Download Report

7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
http://www.gerrykruyer.com
TEACH YOURSELF HTML5 & CSS3: Task 16 - Lists
In this task we will look at how to create lists that automatically number or bullet themselves using HTML5 in
combination with CSS 3.
Before you start this task properly it is a good time to review the website you created in the Beginners Web
Development course:
 Open index.html webpage from your SPAN student folder to make sure that you can navigate to all linked
webpages. These should be an image in every webpage except the homepage and each link should function
like a button. All images, links and general page formatting for all four webpages should look similar because
you removed all internal CSS code and instead applied an external style sheet to all four webpages. Your three
graphic links should become partially transparent when you hover over them and you should see a squiggly
background behind your graphic links area when you hover over any part of this division. You should have a
button on each page that, when you scroll down the webpage, takes you back to the top of that webpage.
When you click down on any paragraph of text the background and text colours of the paragraph should
change.
 If you are missing any files including the finished webpages from last week then get them from the Week 15
Resources link in the Beginners Website Development course from my website.
 Open classic-authors.css in Notepad++ to remind yourself of the CSS code used on your four website pages.
Lists
Lists are used in webpages in the same way as bullets are used in word processors. There are two main types of
HTML lists that you can have in your web pages:

Ordered lists:
which can be used to produce numbered lists (1, 2, 3, …).

Unordered lists:
which can be used to produce bullets that look like discs ().
To set up an ordered list use the following HTML layout:
<ol>
<li>Some point, words or sentence.</li>
<li>Some other point, words or sentence.</li>
<li>Some other point, words or sentence.</li>
</ol>
This method will give you a numbered list starting from one. <ol> is short for ordered list and <li> is short for
list item. Each item in your list must be preceded with <li> and end in </li>.
Before we start this task properly:
 If you do not have a copy of template.html saved in your server space (and on your USB stick) then get it
from my website.
 Using Notepad++ open template.html
 Alter the <title> … </title> section to Investigating lists.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 1
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
 In the <body> … </body> section of your page insert a <h1> heading using the text "My Fellow SPAN
Learners".
 Underneath the heading make an ordered list of the other learners in this web development course using the
method shown above.
 Save your document in your SPAN server HTML5 folder calling it learners.html
 View your document in a browser to make sure it works. Your fellow learners should be numbered 1. to 5. (or
more if you had more than this).
To set up a simple unordered list use the following HTML5 layout:
<ul>
<li>Some point, words or sentence.</li>
<li>Some other point, words or sentence.</li>
<li>Some other point, words or sentence.</li>
</ul>
This method will give you a bulleted list using disks () as the bullet. <ul> is short for unordered list.
 In the <body> … </body> section underneath your ordered list code insert a <h1> sized heading using the
text "My Favourite Animals".
 Underneath this heading make an unordered list of at least five of your favourite animals using the method
shown above.
 Next to each type of animal name within each <li> … </li> tag, include information about why you like each
type of animal. (The information can be more than one sentence long and can go for more that one line in a
web page – it will automatically be indented.)
 Save the addition to your code.
 View your document in a browser to make sure it works. Your items should have disks in front of them.
Using CSS with your HTML5 code you can redefine both ordered lists and unordered lists according to the
following table:
Bullet type
circle
disc
square
decimal
upper-roman
lower-roman
upper-alpha
lower-alpha
none
Note:
Symbol



1, 2, 3, 4, 5, …
I, II, III, IV, V, …
i, ii, iii, iv, v, …
A, B, C, D, E, …
a, b, c, d, e, …
There are many other bullet types such as lower-greek, hiragana, decimal-leading-zero, katakana and
hebrew as well but these are the main types.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 2
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
If you want to define bullets using CSS then you firstly need to create your <li> tags in your HTML5 code just like
we did in the previous examples:
<body>
<h1>My Fellow SPAN Learners</h1>
<ol>
<li>Jana</li>
<li>Lana</li>
<li>Shane</li>
<li>Catherine</li>
<li>Patrick</li>
<li>Gerardo</li>
<li>Mark</li>
</ol>
<h1>My Favourite Animals</h1>
<ul>
<li>Dogs – My dogs Bert and Ernie always wags their tails when I get home from work.</li>
<li>Cats – My cat has a loud purr and keeps me calm when I am stressed.</li>
<li>Fish – Watching gold fish swimming around in a pond is relaxing.</li>
<li>Seals – Seals always seem to have a good time swimming in groups.</li>
<li>Monkeys – They are very intelligent animals.</li>
</ul>
</body>
</html>
Now you include your CSS code (using either an internal or external style sheet) as shown in the following internal
style sheet example where I change all of the list items in both the ordered and unordered lists to square bullets:
<style type = "text/css">
li
{
list-style-type: square;
}
</style>
 Add the style sheet code above to learners.html
 Save your changes to learners.html
 View learners.html in a browser.
You can mix your bullets if you add the class = " … " attribute to the <li> tags as shown in the following
example where I have used five different classes and then used a different type of bullet in the style sheet for each
of those classes:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 3
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Mixed bullets using CSS</title>
<style type = "text/css">
li
{
list-style-type: square;
}
li.learner1
{
list-style-type: square;
}
li.learner2
{
list-style-type: disc;
}
li.learner3
{
list-style-type: circle;
}
li.learner4
{
list-style-type: decimal;
}
li.learner5
{
list-style-type: none;
}
</style>
</head>
<body>
<h1>My Fellow SPAN Learners</h1>
<ol>
<li class = "learner1">Jana</li>
<li class = "learner2">Lana</li>
<li class = "learner5">Shane</li>
<li class = "learner1">Catherine</li>
<li class = "learner4">Patrick</li>
<li class = "learner3">Gerardo</li>
<li class = "learner5">Mark</li>
</ol>
<h1>My Favourite Animals</h1>
<ul>
<li>Dogs: My dogs Bert and Ernie always wags their tails when I get home from work.</li>
<li>Cats: My cat has a loud purr and keeps me calm when I am stressed.</li>
<li>Fish: Watching gold fish swimming around in a pond is relaxing.</li>
<li>Seals: Seals always seem to have a good time swimming in groups.</li>
<li>Monkeys: They are very intelligent animals</li>
</ul>
</body>
</html>
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 4
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
 Alter your HTML5 code to include a mix of three, four or five class attributes much like that shown above.
 Now include the CSS code shown above.
 Save your changes to your webpage.
 View your webpage in a
browser. It should look much
like this:
Question 1/ Look at the output from my HTML/CSS code above and then answer these questions:
a) Why does the third list element (Shane) not have a bullet?
b) Why does the fifth list element (Patrick) have “5.” for its bullet?
c) Why do all of my favourite animals have squares for their bullets?
Question 2/ If you do not use CSS code on your ordered lists, which type of ordered list bullets do you get?
Question 3/ If you do not use CSS code on your unordered lists, which type of unordered list bullets do you get?
Adding More HTML5 Tags In Ordered And Unordered Lists
You can insert line breaks anywhere within the <li> … </li> tags by using <br> provided it is part of the content
and a meaningful part of the text. Adding a <br> does not change the indenting of your list text.
 Assume that you always start your list descriptions on a new line. Alter your HTML5 code by inserting a line
break between the animal types that you like and the reason why you like them.
 Save your changes to learners.html
 View your webpage in a
browser. The “Animals”
section
should
look
something like this shown on
the right:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 5
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
You can also add any other HTML5 tags such as image code, horizontal line code, hypertext link code and
<span> … </span> tags for formatting particular sections of your list item text.
 From your list of animals, pick your favourite type of animal and then alter your HTML5 code so that the text
describing your favourite type of animal is surround with <span> … </span> tags.
 Use an in-line style to decorate your favourite animal type in a red colour and a 30 pixel font size. You can
also add other formatting features if you want.
 If you do not already have an images folder in your SPAN server space then create one.
 Find a picture of your favourite type of animal using Google Images or some other source and save it in your
images folder.
 Open Adobe Photoshop or PaintDotNet.
 Resize your image so that it is no more than 100 pixels in size for both the length and the width. Write these
measurements down on scrap paper.
 Save your image for the web as a .png (File  Save for Web… as a .png-24) with a sensible name.
 Insert your image before the animal name but within the <li> … </li> tag.
 Add length = " … " and width = " … " attributes to your image tag using the length and width
measurements you wrote on scrap paper earlier.
 Also add appropriate alt = " … " and title = " … " attributes to your image tag.
 Also using an in-line style, float your animal image to the right of your screen so that your text flows around
the left of your image.
 Save your additions.
 View learners.html in a browser. It
should look something like this shown on
the right:
On the next page is my <body> code to achieve the web page above.
Notice how I have organised my code so that it is nicely set out. This makes it easier to read and understand. You
should layout your code in a similar way too using the Tab key to indent lines and the Enter key to insert blank
lines so that your code does not look crowded:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 6
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
Adding More CSS Formatting To Ordered And Unordered Lists
At this point you may be wondering how to format your bullets so that they appear in a different colour, font, size
etc. To achieve this you would define styles for either or both your <ol> and <ul> tags. For example if you wanted
to colour all of your unordered list bullets as brown you would use the following CSS code:
ul
{
color: brown;
}
 Alter your unordered list CSS code so that the unordered list bullets are brown using the code above.
 Save the addition to your CSS code.
 View your webpage in a browser. Your unordered list should be brown.
 Now alter your ordered list so that the ordered list bullets are red and use a 30 pixel font.
 Save the addition to your CSS code.
 View your webpage in a browser.
Your ordered lists should be red and the numbered bullets and lettered bullets will be larger in size provided you
are using the latest version of your browser. In older browsers things may look differently so if you are using an
older browser you need to update it immediately.
Notice how the text went the same colour as the bullet. To get the text, but not the bullets, back to black or any
colour you use <span> … </span> tags and perhaps include class attributes around your text and then apply CSS
code just like you did with your favourite animal.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 7
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
 Alter your HTML5 and CSS code so that:
 All list text is white
 All list text has a dark blue background colour
 All list text uses a 14 pixel font size for both your ordered lists and your unordered lists but all bullets are
coloured as before.
 Make the webpage background light blue.
 Save the addition to your CSS code.
 View your webpage in a browser. Your output
should look something like this:
Creating Your Own Bullets
If you get fed up with using disks, squares and circles as your bullets then you can create your own small bullets in
a graphics package such as Adobe Illustrator, Adobe Photoshop or PaintDotNet etc. You need to convert them to a
.png, .gif or .jpg so that they can be used in a web page.
 In the <body> … </body> section underneath your list of favourite animals code insert a <h1> sized heading
using the text “My Favourite Fruit”.
 Underneath this heading make an unordered list of at least five of your favourite fruit.
 Save the addition to your HTML5 code.
 View your webpage in a browser. Your unordered list of fruit should be brown.
We are now going to create a graphic image in Photoshop/PaintDotNet and use this as our bullet in just our fruit
list.
 Open up Adobe Photoshop or PaintDotNet.
 Create a new document naming it as bullet with a width of 15 pixels, a height of 15 pixels, colour mode set
to RGB colour and background contents set to transparent.
Notes 1: I chose a document size of 15px by 15px because in most web browsers you only have a 15px by
15px space for your bullets. You can get around this by adjusting the line height using CSS code.
2: You can set your document size to a smaller size if you want.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 8
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
 Magnify your work space to 1600% by using Ctrl +
 Use the Pencil Tool to draw an interesting bullet using whatever colours you like leaving
part of the background as transparent simply because this is a nice effect. Here is my
magnified graphic at this stage:
 Save your graphic for the web as a .png following these steps: File  Save for Web…
 Choose PNG-8 and make sure the Transparency box is ticked  Save  Make sure
you save the bullet in your images folder giving it a sensible name such as bullet.
We only want the fruit in your unordered lists to use this bullet and nothing else. To do this we need to give each
list item in the fruit list a class name.
 Give each fruit list item a class name of fruit as shown in my example below:
<h1>My Favourite Fruit</h1>
<ul>
<li class = "fruit">Bananas</li>
<li class = "fruit">Custard Apples</li>
<li class = "fruit">Pineapples</li>
<li class = "fruit">Lychees</li>
<li class = "fruit">Mandarins</li>
</ul>
 Save the addition to your code.
Now you need to use CSS code to use your bullet with your fruit. The CSS code for this is:
list-style-image: url(image.ext);
 Alter your style sheet code to include the following line:
li.fruit
{
list-style-image: url(images/bullet.png);
}
 Save the addition to your CSS code.
 View your webpage in a browser. Your
favourite fruit list should look something
like this:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 9
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
Description Lists
There is a third type of list called a description list and these are used to describe terms. They used to be called
definition lists but were renamed in HTML5.
A description list start with <dl> and end with </dl>.
Each term in your list begins with <dt> and ends in </dt>. This is short for description term.
The description of each of your terms begins with <dd> and ends with </dd>. This is short for description
definition.
 In the <body> … </body> section underneath your list of favourite fruit code insert a <h1> sized heading
using the text “About the Weather”.
 Insert the following code after your new heading section taking notice of how I have set this out to make it
easy to follow:
<h1>About the Weather</h1>
<dl>
<dt>Hot</dt>
<dd>Above 30 degrees Celsius.</dd>
<dt>Warm</dt>
<dd>Between 15 and 30 degrees Celsius.</dd>
<dt>Cold</dt>
<dd>Below 15 degrees Celsius.</dd>
</dl>
 Save your addition.
 View your webpage a browser.
 Now go back to your Notepad++ document.
Now for a bit of colour:
 Using CSS, style your description terms so that they are written in an orange colour.
 Using CSS, style your description definitions so that they are written in a tomato colour.
 Save your changes.
 View your webpage in a browser. The
description list should look something
like this:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 10
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
Images could be used as description terms and then the description definitions text could describe the image.
 Underneath the descriptions of the weather add a <h1> sized heading: “My Favourite Vegetables”.
 Find images of two of your favourite vegetables and save them in your images folder.
 Using Adobe Photoshop or PaintDotNet, make sure your vegetable images are no more than 100 pixels high
or wide.
 Below the heading use these two images as description terms and then describe them in description definitions.
Remember to include all the relevant attributes in your image code to maximise your SEO ranking.
 Save your changes.
 View your webpage in a browser. The
favourite vegetable description list should
look something like this shown on the
right:
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 11
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
Bonus Activity/Extension/Revision/Homework: Lists For Navigation
Lists are often used in the construction of links in a website’s navigation block and this makes sense when you
think of the navigation section as a list of unordered links.
In the website that you developed in the Beginners
Website Development course you had a list of four,
(or more) links that looked like that shown on the
right:
The HTML5 code for this was set up as follows:
<div class = "navigation">
<p>
<a href = "index.html">Home</a>
<a href = "brave-tin-soldier.html">Hans Christian Andersen</a>
<a href = "emily-dickinson.html">Emily Dickinson</a>
<a href = "h-g-wells.html">H G Wells</a>
</p>
</div>
Instead of using paragraph tags you could use an unordered set up as follows:
<div class = "navigation">
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "brave-tin-soldier.html">Hans Christian Andersen</a></li>
<li><a href = "emily-dickinson.html">Emily Dickinson</a></li>
<li><a href = "h-g-wells.html">H G Wells</a></li>
</ul>
</div>
 Test this in an entirely new webpage document rather than change what you had done in the beginners course
website.
Here is my new webpage that I have named:
unordered-list-for-navigation.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Unordered List for Navigation</title>
<link rel = "stylesheet" href = "css/css file name.css">
<style type = "text/css">
</style>
</head>
<body>
<div class = "navigation">
<ul>
<li><a href = "unordered-list-for-navigation.html">Home</a></li>
<li><a href = "#">Hans Christian Andersen</a></li>
<li><a href = "#">Emily Dickinson</a></li>
<li><a href = "#">H G Wells</a></li>
</ul>
</div>
</body>
</html>
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 12
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
Notice that I have used a # (hash) symbol replacing webpage addresses (or URL’s) that once linked to other
webpages. This lets you test your links without actually linking to those webpages.
The output of this without any added CSS styling is
shown on the right:
 Get rid of the list bullets in the navigation section by using the following CSS code. It would be best to place
this in an external CSS file. Remember to add a link to this CSS file in the HEAD section of the webpage.
The output of this is shown on the right:
.navigation li
{
list-style-type: none;
}
Question 4/ What is the difference between a block element and an inline element? Give an example of a tag for
each.
 To make the list items appear as a horizontal list rather than a vertical list include the display attribute in your
CSS code. The value will be inline-block rather than inline to enable you to add margin and border box
properties later on. (You cannot use margin and border attributes on inline elements.)
The output is shown on the right:
.navigation li
{
list-style-type: none;
display: inline-block;
}
 Colour the navigation background a blue colour and
since we will not be using positioning, float the
navigation section to the left:
.navigation
{
float: left;
background-color: #5dbeff;
}
Hmmm… This does not look even – the right hand side of the navigation section does not match the left hand side.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 13
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
 Using em measurements, add extra padding on the
right side of the navigation division to even out the
left and right sides. (This usually requires a bit of
experimentation!)
.navigation
{
float: left;
background-color: #5dbeff;
padding-right: 2em;
}
So far so good.
Next you will be adding CSS formatting features to the anchors in the navigation section. These features are:
 Padding;
 Margins;
 Turning off the underlining of your anchors (since users of your site will realise they are anchors anyway).
Tip: If you have trouble understanding what is going on in this next section, use CSS to add a 1px solid red border
around each list item and a similar green borders around each anchor so that you can see what is going on.
Remove these two borders when you finish the navigation section. You will use CSS code to add padding,
margins and display values.
 Add the following to your CSS code:
.navigation a
{
padding: 0.2em 1em;
margin: .5em 0;
text-decoration: none;
}
Hmmm… The padding/margin height does not look quite right to me. This occurs because anchor tags are inline
elements and so you cannot use box properties on them. To fix this:
 Add the following to your CSS code:
.navigation a
{
padding: 0.2em 1em;
margin: .5em 0;
text-decoration: none;
display: block;
}
Anchor tags are inline elements. Box properties such as margin and padding heights do not work on inline
elements. Changing the anchor display property to block restores the padding and margin height.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 14
7 November 2014
Written by Gerry Kruyer
Intermediate Level HTML5 / CSS 3
 Next you will be adding text and background pseudo-class CSS formatting features to the anchors (link,
visited, hover, focus, active) in the navigation section.
 Add the following to your CSS code:
.navigation a:link, .navigation a:visited
{
color: #FFF;
}
.navigation a:hover
{
opacity: 0.6;
}
.navigation a:active
{
background-color: #fff;
color: #5dbeff;
}
When hovering over the Hans Christian Andersen link
When clicking down on the Hans Christian Andersen link
 Finally add pseudo-class styling for vision impaired people. Use a dotted black very thin border around the
anchor when you use the Tab key for webpage navigation to focus onto any link and then use the Enter
key to apply it.
The result should look like that shown on the right
when you use your Tab key to navigate around
your webpage:
Need a hint?
LoVe Frogs HAppy.
Notes: 1/ Including the focus pseudo-class with your links will improve your website SEO ranking.
2/ Watch a video about a vision impaired person suing Coles over their lack of functionality in the
Coles website posted October 2014.
Question 5/ I think that looks quite professional. What is your opinion about the navigation section?
Comments
As a general rule you should be adding appropriate comments explaining your lines of HTML5 and CSS 3 code.
 Place a few comments in both your HTML5 code and your CSS 3 code.
 Save your addition.
 View your webpage in a browser make sure you cannot see the comments within the web page.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 15
7 November 2014
Intermediate Level HTML5 / CSS 3
Written by Gerry Kruyer
There is a lot more for you to to learn concerning lists in combination with other tags such as creating beautiful
drop-down navigation menus for a website using HTML5 and CSS 3 (and when you include some JavaScript
website coding you can create some really beautiful navigation menus but that is part of another SPAN course in
web design using JavaScript).
 Back up everything that you have done in this class to your USB stick including any additions to your css and
images folders. You should do this at the end of every class that you take here at SPAN so that you have a
backup of your files and so that you can revise what you have covered at home over the coming week.
 Have you been saving your work to the SPAN student drive every 10 minutes?
 Have you backed up your files at the end of this lesson to your USB drive including your css folder?
 Show your webpage to Mr Kruyer for assessment. Also hand in the answers to the questions next week.
Due Dates:
All questions from this task and your webpage should be completed by Thursday
13th November 2014.
C:\Users\Kruyer\Documents\SPAN\HTML5\intermediate\learning-tasks\task16\TYHTML16.docx
Page 16