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!

HTML Class – Week 06

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!

HTML Class – Week 05

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!

HTML Class – Week 04

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!

HTML Class – Week 03

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!

HTML Class – Week 02

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

Today’s Class

  • The Web
    • Web Services
    • What is the Internet?
  • HTML
  • Feedback

The Web

Let us first have a look at this medium, that we seem to know so well. It was  1991 when the World Wide Web became active as a platform for anyone to participate in. It had its origins in military data accessing systems.

Web Services

For the Web to functions it requires a number of Web Technologies. In order to understand what Web Technologies are used for it is important to have a common understanding of web publishing languages such as HTML, CSS, JavaScript or XML.

To view any website on the Internet most people use a web browser. Web browsers work by connecting over the Internet via modem or ISDN (Integrated Services Digital Network) via a server or ISP (Internet Service Provider) to remote machines, asking for a particular document (or page) and then formatting the documents they receive for viewing on a computer.

To allow you to view a web page on your computer, web browsers use a special language called HTTP (HyperText Transfer Protocol). The remote machines containing the documents run HTTP servers. A HTTP server receives a request for a page, and sends it to the computer. The page can then be viewed through the browser.

Each document that is stored on the Web has a particular URL (Uniform Resource Locator). This tells the browser which server to go to to get the document. The syntax of the URL is simple to understand.

The standard for web documents is HTML. HTML is a Mark-up language that uses tags to create all the Web pages. HTML can be used to create formatted text that allows web browsers to make web pages viewable on their screens.

HTTP can also include images, sound, animation and video clips. HTTP weaves together all the relevant elements of the page and describes how it should be represented on your browser. It can also link to other pages or sites on the Web through hyperlinks.

What is the Internet?

So, what is the Internet? I would like to post this as a question to the class.

Let us share our views of what the Internet actually is. What do we see in it, what it is it made up of? What does it symbolise or represent to you?

Please participate in the class discussion before reading on. If you have missed the class and are following the notes online please stop for a moment and think about the question above. You may want to write your responses down before you continue!

Image source: Data Center Knowledge

Image source: Data Center Knowledge

Andrew Blum, a journalist and author of the book ‘Tubes’ explored what the Internet actually is in a physical form. Please use your head phones and view this video from his TED talk in September 2012: Andrew Blum: Inside the physical.

So, has your answer to what the Internet is changed?

HTML

Please follow the in-class instructions:

we will work through W3Schools HTML Sections:

HTML Elements, HTML Attributes, HTML Headings, HTML Paragraphs, HTML Formatting and HTML Links.

Try to create a link to an e-mail, that allows you to send an email automatically to a recipient.

W3Schools Screen

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!

HTML Class – Week 01

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

Today’s Class

  • Introducing each other
  • Introduction to Delivery Format
  • Introduction to the Content
  • In-class Task

Introducing Each Other

Spend 5 minutes interviewing your colleague and another 5 being interviewed. Next introduce the student to the teacher and other students.

Next think about one thing that you have done that no one else has.

Introduction to Delivery Format

The classes will be delivered in 2 hour schedules. The content will be posted on this blog as well as on MyKangan. Tasks, discussions and research will be conducted inside the 2 hour slot and at home.

Assessments:

Important: You need to submit all your assessments on MyKangan. It is your responsibility to follow up due dates and access to MyKangan.

  1. Day 1 Task – this task is a simple comprehension task to establish student participation. (due: after the first class)
  2. Assessment 1 – Create a HTML based Website

RAE – Research and Exploration or Class of Federico

This blog will be or main form of contact. It will be accessible from anywhere as long as you have internet access.

MyKangan

The unit title for this class will be combined in (the catchy name):

ICP40210-PGA4N2-PRIMU-2013-ICAWEB429A

As you can see, the titles are long and hard to remember. The easiest is to look at the last segment with the unit code and title.

The unit itself will be structured in the same way, that you have classes listed as Class 1, Class 2, etc and assessments will be listed by title inside an assessment folder.

This is also where you will submit your assessments. You will find hyperlinks with names such as Submit Assessment  1 here.

You can send messages to your teacher and you can leave comments as well. I am always open to suggestions, so please feel free to forward ideas about content or software that you would like to cover.

Any questions?

Introduction to Content

These units will be covered:

Please click on the links and follow the in-class discussion.

We will work directly with the help of the W3Schools Site: http://www.w3schools.com/ – Click on the Learn HTML tag to get started on HTML.

In-class Task

Please follow the in-class instructions and complete a HTML file that you will need to e-mail to your teacher and keep a copy. Afterwards upload the file onto MyKangan.

Work through the first four sections on W3Schools:

HTML HOME, HTML Introduction, HTML Editors and HTML Basic.

Create a html file with Notepad that includes:

  • a doctype declaration
  • the correct tags used in html
  • h1 tag with your name
  • p tag with something that you like doing
  • a link to www.dzineblog.com
  • make sure to use correct and valid html code

Write all the code from memory. Feel free to look at the code and then apply it after, but do NOT use Copy and Paste.

Save the file as yourname class1 task.html and use UTC-8 for encoding (this will be available when saving the file).

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!