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!
![The concept was used on the German side as well with this 'Auch du sollst beitreten zur Reichswehr' [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=283&h=362 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 