Image

Coding - HTML

Code an HTML website.

Outcome 1

On completion of this unit the student should be able to;

  • Understand the structure of the internet
  • Understand how websites work
  • Understand and use HTML language to code a static, multipage website

What you will do

In this unit we are going to learn about what is the internet, how we communicate across it, what is a webpage, what is a website and the learn how to make our own. Some past student work is live now, so you can take a look by pressing the link below. Students were asked to make a website to promote an aspect of our college. Visit this site:

http://1568aloysius.com/websites/

Quick menu

Model answer

Image

Press this image to check out the great websites made at our college for this task.

Image
A screen shot of a webpage like we're going to build. We will refer to the code at the right side of the photo in the first task of our project.
Image

Learning intentions

Learning intentions should be set at the commencement of each unit, then at regular intervals during the task.

Read through the content on this page. Discuss what you think could be learnt and form them into three 'learning intentions'.  Use sentences like, 'I will learn about making 3d drawings', or I will learn about 'media codes'.

Write your three learning intentions.

For advanced learning intentions, go with 3 different levels. 

  • 1 - What you will learn. (For example, the media code of camera describes the techniques camera operators use to record a scene)
  • 2 - How what you will learn can be used to create meaning or structure. (For example, camera techniques are combined with sound and/ or editing to create suspense).
  • 3 - How could your understanding of the learning be extended or related to other learnings. (For example, the use of camera has changed over the years and the invention of digital formats have allowed anyone to become cinema photographers)
Image

Success criteria

Success criteria should be negotiated between students and their teacher. The class group agrees about what is successful completion of the task. Identification of success criteria is done at the commencement of each unit, then at regular intervals.

Now that you are familiar with what you will learn in this task, it's time to lock in how you will be able to demonstrate that you know it, or can do it. 

Write three success criteria, using sentences like the examples in the next column.

I will demonstrate that I have mastered the learning by;

  • 1 - I Can identify all of the camera techniques used in the selected clip.
  • 2 - I can use a camera to film clips in the ways I have identified.
  • 3 - I can explain how camera is combined with other codes to create meaning in a narrative.
Image

What is a webpage?

The first part of the unit will teach us what a webpage is by back learning what a computer file is. We will then see how webpages are linked together to become a website. We will learn what the various components of a webpage file, called an HTML file are.
Image

Concepts

We will learn
  • That HTML is a language and is sent to a computer in an HTML file.
  • That a web page is not sent in the form that it looks, it is sent as code then read by a computer and displayed on screen.
  • That all components of a webpage file are written in <tags> These tags have opening and closing tags.
  • That there are two parts of a HTML file. These are the head and body of the page. The contains information about the file, and the contains the contents of the page. The head is not seen, the body is seen on the computer display.

A webpage is a text file

Beginning with HTML. A webpage is a text file. Let's examine a text file.

Image
This is part of a text file as we see it on screen. It is part of this page made in the program called ‘Word’. However, this is really just the result of the file – it’s how it displays, but not all the information that might be in the file. Where is the information that describes what font I used, what sizes, etc?
Image

This image shows what it might look like inside a Word file. This shot shows information about the file. Not the text we see on screen but stuff like what generated it, who made it, how many words in it, etc.

An HTML file is like this too.

(https://zoompf.com/ blog/2010/01/ cruft-inside-microsoft- word-html-files/)

What is an HTML file?

An HTML file is a text file. This means it only has text. There are no images, songs, colours or videos in a webpage or even in a Facebook post! It's just a text file like you write in notes on your phone.

Inside an HTML file there are two sections. One section tells us information about the file, how things will look in the file and links to other styles or script operating files.

This part is called the <head> of the page. It does not display on screen in a webpage.

The other section of the file has the content that is on the webpage.

This part is called the <body> of the page. This part displays on screen.

Examining a webpage

Let's talk about what is in a webpage file. Remember, it's just text. Everything in an HTML file is written as a tag. They look like this;

<tag>

Can you spot one in the picture at right?

But often they include stuff like writing in them. So they look like:

<tag> writing in the tag </tag>

What is the difference between the start and end tag of that example?

The two biggest tags in a webpage

<head>

</head>

<body>

</body>

Every page will include a <head> and a <body> tag.

See if you can spot them in the picture.

Image

This is the webpage shown above. We will refer to this for this section.

Tasks

Reading tags

Write the answers to the following questions in your workbooks.

  1. List 5 different <tags> you can see in the code shown.
  2. What do we know about a <tag>? How are they written, how to they begin and end?
  3. Draw a picture of an HTML page structure below,

    Show <head> and <body> tags

  4. Find the text ‘ilovecamping.com’. Copy the tag it is in
  5. Search through the page until you find these tags; <h3>, <h4> and <p>. Looking at how they look on the page, explain what these tags mean and do for the webpage.
  6. Let’s look at the <body> tag. Go to; https://www.w3schools.com/tags/tag_body.asp

    Enter some text in the body. Run to see what happens.

Discuss your learning

Now let’s share these ideas and concepts to see if we understand them.

Tasks

My first webpage

In this task, we are going to learn the structure and process you need for every web page and website. We are going to manage folders, define site in Dreamweaver, make a first webpage, style text with CSS.

In this activity, we are going to ‘short cut’ to some learning we will come back to in the next week. It’s a bit out of order but it gets us working practical before we learn all the theory.

Get a computer with Adobe CC and follow these steps. These are not instructions for independent work yet -  you teacher will guide you;

  1. Make a root folder on desktop
  2. Open Dreamweaver,
  3. Define site
  4. Make new file
  5. Experience the tags
    1. Look at code, and split views,
    2. Discuss the tags we see.
  6. Make text with 2 headings and paragraph
    1. Assign text <tags>
  7. Style text and then body background colour with internal CSS.
Image

What is a website?

Image

Concepts

We will learn
  • That a website is a collection of files in folders accessed by a remote computer.

A website

A website can be on any computer called a server. Websites are usually on commercial computers. They are called remote servers.

The picture at right shows my whole website. It is organised in folders. Look at the image that is selected (blue). Can you work out where it is located in the folder structure (directory)?

Image
The complete https://www.helveticamediuma.com. All the hundreds of files that make up this site are in these folders. Wow.

How are sites joined?

The internet is the web of remote servers connected by telephone data cables.

Consider the following pictures.

Image

The internet could be a series of computers connected together. What problems might arise with this idea?

Image
So the internet is a series of remote hosting servers that are on all the time and secure from viruses. We connect to them to view webpages. Websites are hosted remotely. Each file of a website has its own address.

Uniform Resource Locator

A web address is the file address of a file in a remote server. The folder that contains the files is called a ‘root folder’.

Let’s examine how computers find websites around the world. They do this with a URL. Watch the following video.

The internet could be a series of computers connected together. What problems might arise with this idea?

tasks

Discuss and explain
Web paths

Write the answers to the following questions in your workbooks.

  1. Discuss the disadvantages that might arise if computers were really connected to each other around the world.
  2. Write down the URL for this webpage. Don't forget the '/' (forward slashes).
  3. What do '/' (forward slashes) mean in a web path?
  4. Imagine a picture of a cat was in a folder called ‘year9art’ and that folder was in a domain called ‘art.com’. Show this path as a URL: Domain name: art.com, folder name: year9art, image name: cat.jpg

Image

HTML layout and how it is controlled

In this section we will learn about the difference between content and styles. We will learn how CSS shapes the way things look in HTML.
Image

Concepts

We will learn
  • That the way content looks on a webpage is set by the way it is ‘styled’ by a CSS declaration.
  • That there are different parts of a CSS declaration. Selector {property: value;}
  • That in order to style a layout item it needs either a <tag>, or have an id or a class applied to it.
  • That we can change the way content displays by applying an ‘id’ or ‘class’ to the any item, and/or changing the CSS declaration.
  • That there are three ways to begin a CSS declaration. With a word for a tag, an ‘#’ for an id, or a ‘.’ for a class. Each one can be used at different times.

What is content?

Content means the things on your page. However, for this activity we will step back a bit. I want you to look around our class room. Think about all the things in it. But just think things. Don't think about how the things look or what size they are.

Seems strange? What I mean is if there is a table or a chair, then we will call it a table or chair - not a large, white table or a tall chair. This is what we call content. Thus we are separating content from layout.

When we talk about what is written on an HTML file we will be referring to two separate parts; HTML and CSS.

Two important terms

When we talk about what is written on an HTML file we will be referring to two separate parts; HTML and CSS.

HTML

When we say HTML we are referring to the content on the page. You will learn to recognise these elements as <tags>. All of these will be located in the <body> or an HTML file.

CSS

However, when we talk about how the content is looking, we will be referring to CSS (Cascading Style Sheets). CSS is often called 'styles' as they style the way things look. Think, people frequently have black hair (same HTML content), but there are many different styles (CSS) in which it could be worn. In our study these code elements will be located either in the <head> and <style> tag of our HTML file or in a different .css file altogether.

Image

Tasks

HTML and CSS

In webpages it is best to separate content from styles. This means separating what we show from how it should look. To try to understand this I am going to get you to imagine that this class room is a webpage.

Our first activity is to make a table in your book and write down the names of three things in the left column. Only the name, not the size or colour.

The next step is to describe how they look. Remember there might be a couple of the same thing but they might look different. Fill in the right column now.

I made my table like this:

Names of things: content

How they look: styles

Carpet

Soft, grey

1 –

1 –

2 –

2 –

3 –

3 –

What is layout?

You learnt about content above. Now, when we want to change the way our content looks this is called layout. We need to write our layout using CSS.

Writing CSS correctly

There is a certain protocol (method) to use when writing CSS styles. This is called CSS syntax. Syntax referred to the components of language.

One piece of CSS or one style has three parts. These are the Selector and the Declaration, which includes the Property and the Value.

Selector

The CSS Selector shows which piece of content is being targeted for the style.

property

The CSS Property shows what aspect of the Selector is being set.

Value

The CSS Value shows how big, or what colour to set the Property to.

Tasks

HTML and CSS

Now let’s think of our example in HTML and CSS language. Using the format of the CSS Syntax above write styles for a couple of your classroom objects.

Use the structure I have used below to write your <tags> and styles. See if you can see all the '<,>,{,},:,;' marks. Put them in the same places.

HTML

CSS

<carpet>

carpet {colour: grey;
texture: soft;

}

<table1>

Table1 {size: 1.5m long;
color: white;
height: tall;

}

HTML layout elements

Look back at the code that is driving my sample webpage. Look carefully in the <body> section. Do you notice the following <tags>?

<container>

<header>

<nav>

<div id=”main”>

<div id=”leftcol”>

<div id=”rightcol”>

<footer>

Start and end tags

Now look carefully at the code in the <body> tag. Can you see that each <tag> has a beginning and an end. There are four different kinds of layout <tags> in my page. See if you can find them. They are;

<div>

<header>

<nav>

<footer>

If you found them, look carefully and see if you can tell where they <begin> and </end>. They actually look like;

<div>    </div>

<header>   </header>

<nav>   </nav>

<footer>  </footer>

Lastly, can you find the end of the first (id="container") <div>? Where is it? And why is it so far away?

Tags, ids and classes

There are two different kinds of layout items on the page. One kind is HTML 5  <tag>. <header>, <nav> and <footer> are examples of these. These layout items exist by themselves.

The other kind of layout item is the <div>. This means division of space. But if we use heaps of <divs> on our page, how do we tell them apart? How do we style them differently?

Three of the <divs> have different names. Two of them are know by an 'id'. This means a 'once only' name. Another two of them use a 'class'. This means a kind of id that can be used over and over again.

You will learn how to use CSS to style <tags>. ids, and classes.

Styling layout elements

We style <tags>, ids and classes by writing different kinds of CSS styles. Look below for each one.

Tags

To style a tag we simply write the tag as the selector. We have to have an HTML 5 Tag to do this. <header> is an HTML tag.

This style would look like;

header {background-colour: #000;

}

Ids

To style a layout item like a <div>. We have to be able to tell which div this div is, separately from another div. If we don’t distinguish between divs, we will style all divs on the page in the same way! To do this, we give each div an ‘ID’. However, an id can only be used once on each page. To style a div with an id we use a '#' and write a style like this:

This style would look like;

#container {background-colour: #F00;

}

Class

But what if we want to style two or more elements on the same page in the same way. We can’t use an ID. We give the <div> a ‘class’. To style a div with a class we use a '.' and write a style like this:

This style would look like;

.leftcol {background-colour: #FF0;

}

Tasks

Get styling

In this task we are going to learn the basics of styling a <tag>, and id and a class. Follow this basic process:

  1. Open Dreamweaver,
  2. Make sure your files panel still points to the root folder you used last time
  3. Make new file
  4. In the <body> tag put in a;

<header> </header>

<div id="red"> </div>

<div class="blue"> <div>

Style their background-color properites so they match their names. Use the correct syntax you learnt above for a tag, id and class. Don't forget to give them some height so you can see them. 200px should be ok.

Image

My first real page

Image

Concepts

We will learn
  • That HTML files can be made in a variety of programs. They are text files and can be made in ‘text editor’ or ‘note pad’. They can also be made in specialist programs that write code for you like Dreamweaver.
  • That Dreamweaver has an interface and a variety of views. This includes; code, design or split view.
  • That the first page in a website is an index file. The computer ‘looks’ for an index by default.
  • That there are two parts to anything that displays on a webpage. These are; the content in the HTML file and the instructions for how it will display in CSS declarations in the head or external file.
  • That content in an HTML file can include; text content, images or layout items.

Page structure

In this lesson we are going to create layout items on our HTML page. We will insert them, then style them.

We will learn how to make a two column 'liquid layout'. This means the layout has a flexible width to display on different screen sizes.

Look at the image at right to see what it will look like.

Image
A screen shot of the two column liquid layout page structure.

tasks

Getting a clear idea of layout
Thumbnail sketch

Study the webpage shown above. Analyse it carefully to determine how it is composed from blocks. Count the blocks.

Using a pencil and ruler, draw a neat diagram in your workbooks to represent the structure of the layout as shown.

Setting up in Dreamweaver

Below is a summary of the information needed to complete the next task. You may remember some of it, as we have already had a go with Dreamweaver, but in case you don't I have written all the steps in full.

Set up your computer. To begin with we are going to make a kind of blank website. That is, we will create the spaces for information but we will add the information later. In this project there will be three main steps;

  1. Create the blank page
  2. Add and style some dummy text
  3. Convert it all to our real website.

Before we go ahead with this there are two golden rules we must observe. There are no exceptions to this!!;

  1. Create a named folder on the desktop of your computer. Desktop/website
  2. Define the site in Dreamweaver.

*You will have to be patient while I help every student to achieve this. (This is why we did a basic activity on this in the first section).

Setting up Dreamweaver

  • Make a web folder on the desk top of your computer.
  • Put an ‘images’ folder in there.
  • Define the site in DW
  • Make a new HTML5 file, Save it as ‘index.html’ page
  • Note the various parts of the file
  • Write something in the page in ‘split view’. Note how it appears in the code

tasks

Building the page

Follow the steps below to build your first 'index.html' page.

Please note:

You may use this page later, or you might choose to design a completely new one.

Creating layout items

Remember layout items are code entities that can be styled to have width, height or background-colour. A simple kind of layout item is a <div>. A div can be any shape, colour or size.

We are going to put all the layout items into the page first. We will put them in, but we won’t be able to see them because we haven’t styled them yet.

We will put in these layout items; a container (goes around everything), a header, a navigation bar, a main and a footer. Before we do it, let’s look at the code and see how it works.

Here is the code. You can copy it into Dreamweaver:

<body>

<div id="container">

<header></header>
<nav></nav>

<main>

<div class="leftcol">
</div>
<div class="rightcol">
</div>

</main>

<footer></footer>

</div>

</body>

Styling the layout

It doesn’t really look like anything, yet does it? That’s because we have not styled these components. Go to the top of the page, in the <head> tag. Put in a style tag before the end of the </head>/ This is the place to locate your styles.

Here is the code. You can copy it into Dreamweaver:

<style>

</style>

</head>

Now we will write the styles one by one. (I have shown where the <style> tag begins and ends. You don’t have to write it again).

Here is the code. You can copy it into Dreamweaver:

body {

     background-color: #F4D9D9;

}

#container {

min-width: 600px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;

}

header {

background-color: #E35F61;
display: block;
height: 100px;

}

nav {

background-color: #740F11;
display: block;
height: 60px;

}

main {

display: block;
height: 500px;
background-color: #88F0E9;

}

.leftcol {

background-color:#669900;
width: 45.5%;
min-height: 780px;
float:left;
padding: 20px;

}

.rightcol {

background-color:#06520F;
width: 45.5%;
min-height: 780px;
float:right;
padding: 20px;

}

footer {

background-color:#93B980;
height: 60px;
display: block;
clear: both;
padding:20px;

     }

Image

Inserting and styling text

In this section we will learn how to get text, insert it into our page and how to style it with CSS.
Image

Concepts

We will learn
  • That nothing isn’t nothing. Understanding that a style comes from a style higher up in the order – that browsers have default styles.
  • That each text style has to have its own CSS rule.
  • That fonts need to be set in families for web design to allow for portability across the world.
  • That styles for text area accessed and set in ‘properties’ panel.

Css reset

When we learn about 'nothing isn't nothing' we need to consider the following idea. Why do text elements <p>, <h1>, etc display in certain ways without them being styled? The reason is because our web browser programs, Chrome, Safari, etc have CSS inbuilt into their operation. Just like a Word file writes text in a font without you selecting one, browsers already have styles set by default.

So, what's wrong with that? Isn't it helpful? Well yes and no. Yes, because we can see text without styling it but no, because default styles cause problems when we design an original layout. Browsers don't know where we want margins or padding and this upsets our planning.

In order to switch off browser default styles we need to use a 'CSS Reset'. This effectively resets a browser's settings to zero on every account and lets you do the styling you want to do.

To make a CSS Reset, think up every kind of <tag> you might be going to use on the page and set the values, especially margins and padding, to zero. Use the code on the right.

p, h1, h2, h3, h4, h5, h6 body, header, nav, div, img, a, figure, figcaption {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

}

Obtaining 'dummy' copy

Here is a process for getting dummy text copy from the internet, pasting it into your page, creating <styles> and styling it.

We use dummy text from a Lorem Ipsum generator, because it creates text without formatting. We need raw text to work with.

Follow the steps below each picture.

Image

Grab some ipsom from a nice lorem ipsum generator. I chose cupcake but you can find bacon. Google them.

Image

Paste your text into your page in the design view.

Image

Double click into the bottom of the text and press 'Return'. This will put your text into <p> for paragraph.

Image

Now double click into areas of the text to break it up into smaller paragraphs and headings. Press 'Return' each time to create separate <p> paragraphs. See what's happening in my code on the right.

Image

Now create a style for p. Set a font-family, a font-size and color.

Image

Copy your p style and create three more styles for h1, h2 and h3. These will be for your headings. Change the settings.

Image

Open the 'Properties' panel from Window/ Properties, click in your first heading and assign it heading to 'Heading 1' in the Properties panel.

Image

Click in the subsequent headings and assign them to 'Heading 2' also in the Properties panel.

Tasks

Insert and style text

Follow the steps shown above to:

  • get dummy text,
  • insert it,
  • create styles,
  • style text.

What is layout?

You learnt about content above. Now, when we want to change the way our content looks this is called layout. We need to write our layout using CSS.

Writing CSS correctly

There is a certain protocol (method) to use when writing CSS styles. This is called CSS syntax. Syntax referred to the components of language.

One piece of CSS or one style has three parts. These are the Selector and the Declaration, which includes the Property and the Value.

Selector

The CSS Selector shows which piece of content is being targeted for the style.

property

The CSS Property shows what aspect of the Selector is being set.

Value

The CSS Value shows how big, or what colour to set the Property to.

Tasks

HTML and CSS

Now let’s think of our example in HTML and CSS language. Using the format of the CSS Syntax above write styles for a couple of your classroom objects.

Use the structure I have used below to write your <tags> and styles. See if you can see all the '<,>,{,},:,;' marks. Put them in the same places.

HTML

CSS

<carpet>

carpet {colour: grey;
texture: soft;

}

<table1>

Table1 {size: 1.5m long;
color: white;
height: tall;

}

HTML layout elements

Look back at the code that is driving my sample webpage. Look carefully in the <body> section. Do you notice the following <tags>?

<container>

<header>

<nav>

<div id=”main”>

<div id=”leftcol”>

<div id=”rightcol”>

<footer>

Start and end tags

Now look carefully at the code in the <body> tag. Can you see that each <tag> has a beginning and an end. There are four different kinds of layout <tags> in my page. See if you can find them. They are;

<div>

<header>

<nav>

<footer>

If you found them, look carefully and see if you can tell where they <begin> and </end>. They actually look like;

<div>    </div>

<header>   </header>

<nav>   </nav>

<footer>  </footer>

Lastly, can you find the end of the first (id="container") <div>? Where is it? And why is it so far away?

Tags, ids and classes

There are two different kinds of layout items on the page. One kind is HTML 5  <tag>. <header>, <nav> and <footer> are examples of these. These layout items exist by themselves.

The other kind of layout item is the <div>. This means division of space. But if we use heaps of <divs> on our page, how do we tell them apart? How do we style them differently?

Three of the <divs> have different names. Two of them are know by an 'id'. This means a 'once only' name. Another two of them use a 'class'. This means a kind of id that can be used over and over again.

You will learn how to use CSS to style <tags>. ids, and classes.

Styling layout elements

We style <tags>, ids and classes by writing different kinds of CSS styles. Look below for each one.

Tags

To style a tag we simply write the tag as the selector. We have to have an HTML 5 Tag to do this. <header> is an HTML tag.

This style would look like;

header {background-colour: #000;

}

Ids

To style a layout item like a <div>. We have to be able to tell which div this div is, separately from another div. If we don’t distinguish between divs, we will style all divs on the page in the same way! To do this, we give each div an ‘ID’. However, an id can only be used once on each page. To style a div with an id we use a '#' and write a style like this:

This style would look like;

#container {background-colour: #F00;

}

Class

But what if we want to style two or more elements on the same page in the same way. We can’t use an ID. We give the <div> a ‘class’. To style a div with a class we use a '.' and write a style like this:

This style would look like;

.leftcol {background-colour: #FF0;

}

Tasks

Get styling

In this task we are going to learn the basics of styling a <tag>, and id and a class. Follow this basic process:

  1. Open Dreamweaver,
  2. Make sure your files panel still points to the root folder you used last time
  3. Make new file
  4. In the <body> tag put in a;

<header> </header>

<div id="red"> </div>

<div class="blue"> <div>

Style their background-color properites so they match their names. Use the correct syntax you learnt above for a tag, id and class. Don't forget to give them some height so you can see them. 200px should be ok.

Image

CSS box model

How to get your text to sit properly in the div. In this lesson, we will learn how to fine tune text and images. We will learn about padding and margins.
Image

Concepts

We will learn
  • The CSS Box model
  • The function of margins and padding
  • That margins may be set by default
  • That nothing isn’t nothing until we set it so

CSS Box model

You might notice that your text is sitting right in beside the edge of the <div>. This isn’t very pretty so we need to push it in a bit. You might also want to move one <div> away from another. We need to learn about margins and padding. Margins push out, padding pushes in.

First let’s look at something known as the CSS box model:

Image
Click this image to visit the w3schools page on CSS Box Model.
The css box model in action
Image

A practical example of how margins, borders and padding influence a CSS Box width.

tasks

CSS Box Model

Try coding some <divs> to experiment with margins, border and padding. This will also show you how to write and work with a .class. A .class is used to style a <div> when you want to style several of them differently. If you look carefully you can see each of my three <divs> has a different class;

  • <div class="nomargins">
  • <div class="margins1">
  • <div class="margins2">

Now check inside the <styles>. Can you see where these .classes are shown?

Make three <divs> to experiment with these properties.

Three ways to write margins and padding

There are three ways to code your margins and padding.

1 - The first way is to just set it in pixel or percentage dimensions like:

.class {margin: 10px}

2 - But what if you want your margins, or paddings to be different sizes in the same <div>? Easy, make it;

.class {margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 20px;}

3 - But this is pretty wordy. Did you know you can do the same thing by just writing all your margins or paddings in a line. The computer reads them clockwise - top, right, bottom and left. Try;

.class {margin: 10px 20px 30px 20px;}

tasks

Setting margins and paddings #2
Work back over the page you made in the previous example to create margins and padding of unequal widths.
Image

Navigating between pages

In this section we will learn how to create hyperlinked text that creates navigation between pages in a website.
Image

Concepts

We will learn
  • Making unordered and ordered lists
  • Styling lists
  • Linking list items
  • The <a> tag
  • Styling <a> tag
  • Pseudo classes

Navigation

In HTML we create a navigation bar with lists and then link the list items to other pages. In this lesson you will learn how to create the navigation and style links. It might seem counter intuitive but a horizontal navigation menu is actually just a bullet point list going sideways, with the bullets turned off.

My first list

In one of your <div>s make a list of words with a return between them like;

Rose
Carnation
Tulip
Daffodil

Now let’s put them into a list. Press the bullet points in the ‘Properties’ panel. Then take a close look at the code view. They are in ‘ul’. And ‘li’.

  • Rose
  • Carnation
  • Tulip
  • Daffodil

<ul>
<li>Rose</li>
<li>Carnation</li>
<li>Tulip</li>
<li>Daffodil</li>
</ul>

    1. Rose
    2. Carnation
    3. Tulip
    4. Daffodil

    <ol>
    <li>Rose</li>
    <li>Carnation</li>
    <li>Tulip</li>
    <li>Daffodil</li>
    </ol>

    Image

    Put your words into a bullet point list. Watch the code change.

    Styling your lists

    The list <ul> and <ol> and the list item  <li> are different things. Until we style them we will not be able to tell them apart. Let's see if we can style them independently. In your <styles> add the following code:

    ul {
    background-color: #FF0;}

    ol {
    background-color: #AAA;}

    li {
    background-color: #FAA;}

    You should be able to see how the list and the list items are actually separate.

    Now, to separate them more let's add some margins and paddings.

    li {
    margin: 20px;
    padding: 10px;}

    You should be able to see how they are really separate objects now.

    Image

    Style each component of your list to see them separately from each other.

    Removing the bullet points, making the list run horizontal

    To make our list behave how links in a navigation bar should we have to remove the bullet points and get it to flow across the page, instead of down.

    The 'list-style' property controls the bullets.

    The 'display' property controls how object display.

    Set your <li> to;

    li {
    list-style: none;
    display: inline;}

    I removed the margins and padding but you might still want it to make the list items appear like buttons.

    Image

    Remove bullet points and have it run across the page.

    Creating navigation

    To move between pages, we have to hyperlink words which will point to the other files (pages in our site). There are two ways to do it. One is to link pages you already have.  The other is to assign linked names to pages you will have soon.

    Make a new list where the words are the names of pages you would have on a website.

    Highlight one of the page names in your list. Go to the ‘links’ field in the Properties panel. Type in the name of the page you want to link it to. See these two examples:

    Unlinked:

    <nav>

    <ul>
    <li>Home </li>
    <li>About </li>
    <li>Interests </li>
    <li>Contact </li>
    </ul>

     </nav>

    Now let’s link them, see what they look like.

    Linked:

    <nav>

    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="interests.html">Interests</a></li>
     <li><a href="contact.html">Contact</a></li>
    <li><a href="http://1568aloysius.com/websites/">Back to Websites</a></li>

    </ul>

    </nav>

    SPECIAL NOTE: please note that we need to create a link back to the 1568aloysius.com student website page. I have shown that link above in your navigation. Note; this is shown as an absolute path not a relative path, as it is outside your root folder.

    Image

    Link your list words.

    Styling the a tag

    Did you notice now that your linked words have reverted to the default style which includes underline and are blue? Why is this? Can you guess where they are pulling their style from?

    Take a close look at the styles for <li>. They are no longer in <li> but are now in <a>. This means, in order to change the appearance of you links you have to make new styles for the <a> tag.

    The <a> tag can be styled like any other. Popular styles include a font-family, text-decoration and uppercase. Let's try:

    a{font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;}

    Pseudo classes

    You will be aware that links on real websites change state as you first hover you mouse over them, press them and even if you have visited them before. This is achieved by setting pseudo classes. These classes, within a class modify the state of a link.

    Check out styling links at this w3schools page.

    https://www.w3schools.com/css/css_link.asp

    You will learn to make:

    • a:link - a normal, unvisited link
    • a:visited - a link the user has visited
    • a:hover - a link when the user mouses over it
    • a:active - a link the moment it is clicked

    You may not want all of these pseudos but if you don't you may delete them, but you must remember to keep their order as shown or they will not work.

    Image

    Finally, style <a> then use pseudo classes to style different states of <a>.

    Tasks

    Creating navigation from a list

    Create linked navigation list. Follow the activities shown above including;

    • make ordered and un-ordered lists,
    • style lists,
    • hyperlink page names,
    • style the <a> tag
    Image

    Images

    In this section you will learn how to place images into your page and how to size and style them.
    Image

    Concepts

    We will learn
    • Place images by source
    • Sizing images
    • Styling images by tag and .class

    Inserting and styling images

    Inserting images

    The first thing to understand about inserting images in HTML files is that they are never actually inserted, meaning put in. What happens when we insert an image is we insert a line of code that points to the image, stored in our 'images' folder. This line of code links the image to the page. Therefore the image is not actually in the page but is downloaded from the server via a link when a viewer looks at the page.

    Before you go any further make sure your images are set up properly in your 'images' folder. Follow these rules;

    • Organise them in your 'images' folder
    • Name them using a consistent naming convention
    • Process image mode, size and resolution in Photoshop for web to avoid conflicts and delays.

    Move your cursor to a position in a <div> or other <tag> where you want an image to appear. Be careful not to insert an image in a text <tag> like <p>. Put it in a clear area.

    Then press Insert/ Image and select image from the dialogue box. You will see a place for 'Alt text'. This may be left blank. An image <tag> will appear like this:

          <img src="images/icon.jpg" width="350" height="220">

    What do you notice about the <img/> tag that is different from other <tags>?

    Look, it doesn't have an <open> and </close> tag. It is all <one/>.

    Sizing images

    How can we control the size of the image? If you wanted to make the width 400 px then how big would we need to make the height? Hard…..

    But wait, there is an easy way. If you delete the height property, then the image will maintain its proportions. Try:

          <img src="images/icon.jpg" width="400">

    However, don't forget we do not use the image size properties to massively reduce the size of an image from a camera! We must do this first in Photoshop. If we do not, this will result in a slow website and excess data use for our clients.

    Styling images

    Styling img tag

    This is good but what if I want to make multiple images the same size? And, in addition, a website looks good when we follow a consistent style with images following column widths. That's what I do. So, for example,  if I want three images across the page?

    Firstly, we could style the image tag. Let’s try it:

    img {width: 30%;}

    But can you think of a problem with styling every <img/> tag?

    Img tag styled
    Image

    Try styling your <img> tag like this.

    Styling img tag with .classes

    The problem with styling the <img/> tag is that all the images are the same size on my entire site! We need another way. Let’s create a ‘.class’ for the image. I am going to make three classes. One for one image across the page, one for two and one for three.

     Delete that <img/> style you made above. We don't need it.

    Now make these three .classes in your CSS <styles>:

    .onecol{width: 100%; }

    .halfcol {width: 50%; }

    .thirdcol {width: 25%;}

    Nothing has happened yet. That’s because you have not assigned the class to the image.

    Assigning .classes

    Select the image on the page, go to the 'Properties' panel then click the ‘Class’ field and choose the class you have created. Watch your image change. But, if the aspect ratio is wrong, go back to the code and delete any height or width values.

    HTML

    <img class="halcol" src="images/dog.jpg" />

    CSS

               .halfcol {width: 50%;}

    Advanced style images

    Before too long you will realise that you want your images to move away from each other. You may even want them to have a coloured frame or even a border line. All of this can be styled in the .classes you created. Remember:

    • margins = transparent and push you image away from each other
    • border = a line around image or padding you add
    • padding = with a background -color creates a frame panel around your image.

    Try;

    .fullcol {width: 100%;
    background-color: #CF9394;
    border: dashed 2px #000;
    margin: 10px;
    padding: 20px;}

    Image placed with class attached
    Image

    Note both the image tag and the class applied. You can see the class in the Properties panel.

    tasks

    Images

    Insert, size and style images to your page using the techniques described here. Follow the activities shown above including;

    • insert image
    • re-size image preserving the correct aspect ratio (proportions)
    • style your image using .classes
    • advanced style with margins, borders and paddings.
    Image

    Your design task

    In this section we will begin our major design project. We will link the skills of Visual Communication Design with Coding to make an original website.
    Image

    Concepts

    We will learn
    • The function of design in creative web design
    • How to write and collect text and image assets

    Brief

    A college website

    You are going to make a website for a program or area of interest in to promote our school. Your site will be a minimum of four pages and filled with images and text to sell and inform the public. Your audience is parents and students of our college, as well as those who want to see what a great job we do. If you do a great job your website will be live!

    Check back at the student site now.

    http://1568aloysius.com/websites

    Designing and planning

    You will work through a number of steps to come up with your concept, decide on a layout, gather text and image assets to design your site.

    Please note:

    This section is the design stage, the actual construction section follows next. Follow it carefully as building a new multi-page site is quite a bit different from the exercises you have completed so far.

    Creative thinking and planning

    A mind map is a good way to get started on finding topics we could explore for our website. Brain storm a range of interesting topics you could choose to promote or inform people about at school. Be creative, be interesting but remember promote the college.

    Tasks

    Mind map

    Create a full page mind-map to explore potential topics for your website. Make each arm of the mind-map tease out a different area of the school.

    Set my topic

    Show your partner your mind-map. Discuss them with your class.

    Next you will settle on a topic and explain why you have chosen it and what you hope to show your audience.

    A model example:

    My topic is 'Sport at school'. I have chosen this topic because I like sport and have played in a number of teams since I joined the college. I am currently in the Intermediate AFL team and hope to make it into the Senior team next year. I want to show my audience what kinds of sport can be played both within and against other schools whilst you are a student here.

    The next part of the task will be to set your topic and decide on how you will represent it in four pages. An example of this might be on the topic of sport. Four pages for this website could be;

    • Home page
    • Junior sport
    • Intermediate sport
    • Senior sport

    You are free to choose how you would best approach dividing your site.

    Tasks

    My topic

    Write out a description of your chosen topic in your journal. Explain why you have chosen it and what you hope to show in your site.

    (See example above)

    Site pages

    Determine the pages that will be used to divide your topic up coherently for your audience.

    Design alternatives

    You will need a page design for your site. Although our designs will be fairly simple, consider how many fields and columns you will have.

    You will draft a range of ideas for your home page.

    From this you will then build your layout in HTML.

    Tasks

    Design sketches

    Draw a range of possible layouts for your homepage in your journal.

    When you settle on a layout, draw a finished template and name each field. These will be formed with IDs and <div> .classes.

    Collect content

    There are two main kinds of content you are going to have to collect for your site. These are text and image content. Let's handle them separately. Here's how.

    Text content

    You will write your text content in a Word file. Write a small (100 - 200) word article for each page. Give each article a heading. Put them under a separate heading with the page name as title.

    Image content

    You will need to collect approximately four images to use on each page. In this task we will pretend that we are working with images with copyright clearance so you may take images from the web.

    Make sure that you save them correctly, with simplified file names, in a folder called 'images' in your website root folder.

    Tasks

    Collect content

    Write and collect your text and image content as shown in the two steps above.

    Remember to keep your files organised in this section.

    Image

    Building the site

    In this section you will build your website for assessment. Try to follow the process set out below as there are many steps. You will work independently skipping up and down this page, refreshing your knowledge.
    Image

    Concepts

    We will learn
    • Place images by source
    • Sizing images
    • Styling images by tag and .class

    The process

    • Please note:
      The buttons beneath each step will return you to the section you need for explanation.

    Set up web folder

    Remember, the first step of building a website is to ensure that you have a 'root' folder with an 'images' folded inside it.

    The second step is to point Dreamweaver to that folder in 'Site/ Manage Sites'.

    You may already have this set up, but in any case check that you do.

    Build index.html

    Build the home page for your site.

    • Create a new HTML5 file,
    • Add <divs> as shown in the example page. Use the two column layout in this site or build your own
    • Style the sizes and colours of your layout by creating CSS <styles> in the <head> tag. Don't forget to name your page in the <title> tag
    • Add the navigation text for each page in your site. Link the page names to .html files for each page in the <nav>. Style the navigation links with <ul>, <li> and <a>
    • Add some dummy content and set as headings and subheadings. Style <p>, <h1 - 3>
    • Adjust the margins and padding for your layout

    Build your banner image

    I like hand coded websites to have a purpose built banner image showing off your site at the top of each page. Follow these instructions to make your own:

    • Collect 4 or 5 images that illustrate the topic of your site well
    • Open Photoshop
    • Create a new file 1000 x 150 pixels @72 ppi in Photoshop
    • Place the images in and locate across the width of the field
    • Erase the edges with a soft eraser to blend the images together
    • Add text to name your site
    • Export your image as 'banner.jpg'. Save as high quality. Save into your image folder.
    • Load the banner image into each page by adding this to your header style in your external CSS file:
      • header {
        background-image: url("images/IMG_1773.JPG");
        display: block;
        background-size: cover;
        }

    Move CSS rules to external style sheet

    In this step you will create the real magic in web design.

    • Create a new CSS file
    • Cut (Ctl + X)  all of the CSS rules all the way between the <style> and </style> tags in the <head> tag of your index.html page. You don't need to take the actual <style> tags, just the rules between them.
    • Your page layout implodes...
    • Paste (Ctl + V) the rules into the new CSS file
    • Save the CSS file into your root folder as layout.css
    • Link the CSS file using the CSS designer panel of your Dreamweaver workspace
    • See the magic as your page rebuilds!!

    Create remaining pages

    At last, an easy part. Let the computer do the work.

    • Use 'File/ Save As' to create your remaining three pages by just copying the index page
    • Name each new file exactly as you named it in the links in the <nav>
    • Re-name it in the <title> tag in the <head> tag
    • Change the heading in the text to the name of the page so you will be able to see your website working
    • Test your site and fix any broken links

    Add and style images

    To make it into the real website:

    • Paste in your real text to replace your dummy text
    • You should inform your reader about the topic you are working with
    • Create headings and subheadings in your text
    • Style the headings and subheadings in your external CSS file if you haven't already done so

    Add and style text

    At last, an easy part. Let the computer do the work.

    • Use 'File/ Save As' to create your remaining three pages by just copying the index page
    • Name each new file exactly as you named it in the links in the <nav>
    • Re-name it in the <title> tag in the <head> tag
    • Change the heading in the text to the name of the page so you will be able to see your website working
    • Test your site and fix any broken links

    Check for functionality

    Nearly done!

    • Test your site thoroughly in a browser
    • Clean up your root folder by removing any unused files including .psd files
    • Submit your work on a USB
    Image
    Assessment checklist

    In order to do well in the website task there are some features your website must have. Please make sure you have;

    • Organise all images in the images folder, all HTML files in your root folder, no files not required for operation of your website are submitted
    • Your site has four separate pages
    • Your site operates with an external CSS file
    • Your navigation is fully functional, including the link to 1568aloysius.com
    • Your site has a header banner operating in each page through your CSS file
    • Margins to each <div> are carefully set
    • Padding for text and images in each <div> is carefully set
    • Headings and subheadings in the text on each page
    • Images where their widths are sized by .classes
    • Images are separated from each other with carefully set margins

    tasks

    Build site

    Build and populate your site following the instructions in this section.

    That's it, you're done, it's ready for marking!

    Image

    Evaluation and deeper learning

    In this section we will think about the learning we have done. We will review the main topics and evaluate our learning. Follow the steps in the tasks shown here to prepare your folio for presentation and grading.
    What have I learnt?

    Answer the following questions in your journal.

    1. Describe what is a website
    2. Where is a website stored and how is it accessed by people around the world?
    3. What is a webpage?
    4. In HTML web pages content is separated from layout. Explain what this means and give at least one advantage for it.
    5. How do I change the appearance of a piece of content on my web page?
    6. What is coding? How has learning HTML helped you to understand what it is?
    7. What was the most satisfying part of building your own website?
    8. What was the most challenging part of building your own website?
    9. What would you like to know more about in website building?
    Putting it together

    Find where you wrote up what you thought the success criteria might be. Check that you have done something for all of the steps you wrote down.

    Print final and organise your work book for submission.

    Hand up your work on the due date as instructed.

    tasks

    Evaluation and deeper learning
    Complete the evaluation, deeper learning and rating tasks as shown above.
    [cbratingsystem form_id="2"]
    Image

    Assessment criteria

    This task does not carry detailed assessment criteria. Please ensure that you have done the tasks and evaluations as shown on this page for assessment.