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!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS Styling Fonts
  • HTML Tables
  • CSS Styling Tables
  • HTML Lists
  • CSS Styling Lists
  • HTML Blocks
  • HTML Layout
  • Homework
  • Feedback

CSS Styling Fonts

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_font.asp.

HTML Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_tables.asp.

CSS Styling Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_table.asp.

HTML Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_lists.asp.

CSS Styling Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_list.asp.

HTML Blocks

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_blocks.asp.

HTML Layout

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_layout.asp.

Homework

Please look at this W3Schools example: Basic website created with div elements and change it to create a simple text based website for yourself. Call it something like ‘My first website’, supply a menu with menu items (about me, portfolio, etc) and change dimensions and colours. Add more divs to the HTML.

Save your final work with Notepad as a HTML file and bring to next class!

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!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS
  • Feedback

CSS

We will continue working through the CSS section on W3Schools: http://www.w3schools.com/css/default.asp.

By now you should understand the purpose or function of CSS. It is mostly responsible for the styling of online documents. CSS is also responsible to view documents for different platforms and outputs.

Examples of Output and Display for web-content. Image: live.surveyshack.com
Examples of Output and Display for web-content. Image courtesy of: live.surveyshack.com

Having CSS allows you to change the font, image sizes, layouts to suit different requirements. The ideal size for a font will be different if viewed on a widescreen monitor or on a mobile phone.

After last week you should be aware of the differences between inline, internal and external CSS: http://www.w3schools.com/css/css_howto.asp

We will go through the Styling related tabs as well as the box model. I will ask you to trial the different options as we work through to the Box Model together.

NOTE: In class we worked through the Styling Backgrounds and Styling Text Tabs. We wook time to look at a number of CSS related aspects and we spend a good time exploring the Styling Backgrounds examples.

Screenshot W3Schools: CSS Background Style
Screenshot W3Schools: CSS Background Style

Make sure to explore these ones in some depth:

Trial the links above and change the code from background-position:right top to left top and change the margin to margin-left:240px. Play around with the settings and observe the changes by submitting them in the TryIt Editor.

<!DOCTYPE html>

<html>

<head>

<style> body

{

background-image:url(‘img_tree.png’); background-repeat:no-repeat; background-position:left top; margin-left:230px;

}

</style>

</head>

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!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS
  • Feedback

CSS

Please complete W3Schools.com’s section on HTML Head and CSS and then move to the CSS section on W3Schools: http://www.w3schools.com/css/default.asp. Work your way through the 5 tabs from CSS Home to CSS How To.

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!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • Your Progress
  • Online Editors
  • Head
  • CSS
  • Feedback

Your Progress

At this stage you should know what HTML does and stands for. You should be able to create a HTML document, including:

  • doctype declaration,
  • html tag,
  • body tag,
  • different headings,
  • paragraphs,
  • line breaks,
  • lines,
  • hyperlinks and
  • email links.

Let us revisit how to create an e-mail link and do it in the TryIt Editor.

Online Editors

W3Schools editor: Tryit!Editor

Another useful online editor: Real-time HTML editor

The Offline Coder App is a good offline editor available as an app for the I-Pad and I-Phone. You can edit HTML, JavaScript and CSS and view the results in a preview. See the screen shot below:

Screenshot of Offline Coder App for I-Pad and I-Phone.

Screenshot of Offline Coder App for I-Pad and I-Phone.

Head

Today we will learn about the Head element of a HTML document. Click here for Head Instruction on W3Schools.com

The Head element is different to the heading tag in HTML! Be sure not to get them mixed up. At this point it is interesting to notice that the terminology used to describe a HTML document is like the terminology of a human: Head and Body.

This image is comparing HTML structure to a human body. Man in photo from image by August Sander.
This image is comparing HTML structure to a human body. Man in photo from image by August Sander.

CSS

CSS is an integral aspect of the styling in HTML. Follow the in class instructions and the text on CSS on W3Schools.com.

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!