HTML Class – Week 08

Link to all Classes     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment Task
  • Inclass Demonstration
  • Feedback

Assessment Task

Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.

Content: include a

  • banner with an image and title,
  • menu with 5 menu items. The menu items need to be links. Link them to a file with the name of the menu item (it will be an incomplete link).
  • 2 sections (divs) with text content
  • 1 section with an image
  • footer with a Copyright statement including this year and your name.

The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.

Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.

Inclass Demonstration

We will work through the steps to create a website in HTML and CSS:

Start off with the HTML script:

We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:

<!DOCTYPE html>

<html>

</html>

_____

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note: Add the closing tag straight away to make sure that you do not forget it!

Add your title in the Head as well as your main meta data:

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>  (Add your own title here)

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”” />  (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)

<meta name=”author” content=”Federico Viola” />(put your name in here!)

</head>

<body>

</body>

</html>

Now create your divs in html

It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.

Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

</head>

<body>

<div id=”wrapper”>  (This will be the div for the overall webpage. It will be like a frame for all the elements.)

<div id=”header”>

<h1>This is the header/banner</h1>

</div>  (This closes the header div.)

<div id=”container”>  (This will be the div for the menu and content divs)

<div id=”menu”>

<p>Menu</p>

</div>  (This closes the menu div.)

<div id=”content1″>

<p>Content1</p>

</div>  (This closes the content1 div.)

<div id=”content2″>

<p>Content2</p>

</div>  (This closes the content2 div.)

<div id=”content3″>

<p>Content3</p>

</div>  (This closes the content3 div.)

</div>  (This closes the container div.)

<div id=”footer”>

<p>Copyright Statement</p>

</div>  (This closes the footer div.)

</body>

</html>

Now create your CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {;}

#header{;}

#container{;}

#menu{;}

#content1{;}

#content2{;}

#content3{;}

#footer{;}

ul{list-style-type:none;}  (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

Add your dimensions to the CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {width:960px;height:690px;margin:0px;}  (the site will go to the edge due to having no margin)

#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)

#container{width:960px;height:410px;}  (always make sure to use a semi-colon at the end of a CSS declaration)

#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;

#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}

#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}

#content3{width:410px;height:410px;padding:5px;background:#0099FF;}

#footer{width:960px; height:140px;}

ul{list-style-type:none;}

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

To be continued

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s