Principles Of Computing

Sunday, September 21, 2014

Lab 3: HTML5 & CSS3

Before you start with Lab-3, I suggest that you go to these links and make yourself familiar with the CSS format.

Download the .zip files on ICON. It has two files viz., css_sheet.css and lab-3-start.html. As you already know, lab-3-start.html has the content of the page and css_sheet.css has the styles using which the html's content will be displayed.
Modify the files, to obtain the following styles:

Use rounded corners and borders on all of the blocking elements. (Rounded border)

Use 2 different linear gradients as background and change background for every blocking element. (Gradients)

3 different hover links. Links should change color when you hover. (Hover)

Use text shadows on at least 2 pieces of text. (TextShadowGenerator, Text Shadow)

Change the title (inside the title tag) to your name, change most of the original text.

Use different colors for a good design. (Colors)

Transfer the page to MyWeb using Filezilla.

Extra: (Not mandatory) Insert a video inside a new article on the page. The video should play on the “OnMouseover” event, stop on the “onmouseout” event and resize when the page re-sizes.

Start CSS here..

To begin writing a CSS, follow the same way as you created a HTML file (Click here). In the end, 'Save as.." , '.css' instead of '.html' .

CSS Syntax

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.

Example

myStyle.css

body {
background-color: lightblue;
}

p { color: red; text-align: center; }

Now let's try to use this with HTML file. The text in bold, tells you how to link a CSS file inside HTML.

myHTML.html

<html>

<head>

<link rel="stylesheet" type="text/css" href="myStyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph using CSS style.</p>

</body>

</html>

Now, if you want to modify the tag <p>'s color to 'green', then you can directly go to 'myStyle.css' file and change, ' color: green; '. Try it yourself and see the difference.. Can you see the advantages of CSS now?

Modifying styles is easy. Go to .css file directly and change it there!
Re-usable: Use the same CSS styles for different HTML file.
Not very complex to learn.
Fun to play with styles :)

Once you're familiar with the format, go to this link and start learning about changing background, text, fonts etc. It'll be fun! :)

HTML and CSS

Okay! Let's define the HTML- CSS relationship. A simple HTML file looks like this.

What if we wanna add some styles and make it goofy? Like this?

Or, scary (Halloween-ish)?

And, we'd like to give different styles to the same HTML file? Or perhaps, same style to different HTML files? That's when we need CSS! Let's define CSS now..

Cascading Style Sheets (CSS) is a style sheet language.

Styles define how to display HTML elements.

Styles are normally saved in external (separate) .css files.

External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Sunday, September 14, 2014

Quizz time!

3 things to keep in mind...

1. No internet.

2. Open book

3. Open notes :)

Thursday, September 11, 2014

Lab 2: Basic HTML

Lab 2 : Due Sept 16, 2014

This week, we'll learn some basics of HTML. It'll help you to create/modify the webpage you created in Lab 1.

1. Create a simple HTML file. Use this link

2. Learn basic HTML commands. You can use the material - "Lab-2-Basic HTML.pdf" uploaded to your ICON. And, you can also use this website w3schools website.

2.1 Some useful links:

3. Remember to try and use these tags (you'll be graded based on these - use all!):

<html> </html>
<head> </head>
<title> </title>
<body> </body>
<h1> </h1> <h2> </h2> ……
<ol> </ol> <ul> </ul> (include 3 links/items in your list)
<li> </li>
<a> </a>
<img>
<p> </p>
<br>
<em> </em>
<strong> </strong>
<hr>

4. Once you have created a HTML page, “YourPage.html” transfer it to your
www.myweb.uiowa.edu/HAWK_ID/YourPage.html using Filezilla, just like the way you did in Lab1 to transfer a Sample.txt file. Use this link and follow the instructions to copy the link as a hyperlink.

Why HTML?

First, you should know some of the cool things you can do with HTML. Here are a few:
Note: Use Internet Explorer to view these links. For some reason, it displays them better.

1. Make your text move: Move it! .

2. Make your text fall like rain or perhaps snow!: Falling Text

3. Colors and Fonts: Make it colorful.

4. Embed a video and play it: Video

Some reference links:

Marquee
Color your HTML page. Use this link to find color Pick a color
Learn about Fonts
Learn about Colors

Adding a webpage as a hyperlink on ICON

1. Go to "Dropbox" and click on the assignment for which you need to add a link.

2. Click "Feedback" box and follow the screenshots below.

3. Click "Insert Quicklink"

4. Click "Url"

5. Copy and paste the webpage link and give it a title. And click "Insert"