Web Page Development - HTML5-Part2

Week 7

1
Copyright © Terry Felke-Morris
HTML Lists
• Unordered List
• Ordered List
• Description List
formerly called a definition list

2
Unordered List
• Displays a bullet, or list marker, before each entry
in the list.
• <ul>
Contains the unordered list
• type attribute determines the type of bullet point
• default type is disc (but depends on the browser)

• <li>
Contains an item in the list

3
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

4
Ordered List
• Displays a numbering or lettering system to itemize the
information contained in the list
• <ol>
Contains the ordered list
• type attribute determines numbering scheme of list,
default is numerals
• <li>
Contains an item in the list

5
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

6
Description List
Useful to display a list of terms and descriptions or a list of FAQ
and answers

◦ <dl>
Contains the description list

◦ <dt>
Contains a term/phrase/sentence
Configures empty space above and below the text

◦ <dd>
Contains a description of the term/phrase/sentence
◦ Indents the text
◦ Configures empty space above and below the text
7
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

The result of this code is as below:

8
Checkpoint

1. Describe the features of a heading element and how it configures the

text.
2. Describe the difference between ordered lists and unordered lists.
3. Describe the purpose of the blockquote tag.

9
Special Characters
• Display special characters such as quotes,
copyright symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
&nbsp;

10
Div Element
Configures a structural block area or “division” on a web
page with empty space above and below.
Can contain other block display elements, including other div
elements

<div>Home Services Contact</div>

11
Anchor Element
 Specifies a hyperlink reference (href) to a file
 Text between the <a> and </a> is displayed on the web page.

<a href="contact.html">Contact Us</a>

 href Attribute
 Indicates the file name or URL

12
Absolute & Relative Hyperlinks
• Absolute link
• Link to other websites

<a href="http://yahoo.com">Yahoo</a>

• Relative link
• Link to pages on your own site

<a href="index.htm">Home</a>

13
E-Mail Hyperlink

• Automatically launch the default mail program configured for

the browser
• If no browser default is configured, a message is displayed

<a href=“mailto:me@hotmail.com”>me@hotmail.com</a>

14
Hyperlinks
• Hands-On Practice

15
Checkpoint
1. Describe the purpose of special
characters.
2. Describe when to use an absolute link.
Is the http protocol used in the href value?

3. Describe when to use a relative link. Is the http

protocol used in the href value?

16
Writing Valid HTML
• Check your code for syntax errors
• Benefit:
• Valid code 
more consistent browser
display

17
Types of Graphics
• Graphic types commonly used on
web pages:
• GIF
• JPG
• PNG

18
GIF
Background Background
color color – no
configured to transparency
be transparent
Graphics Interchange Format
Best used for line art and logos
Maximum of 256 colors
One color can be configured as transparent
Can be animated
Uses lossless compression
Can be interlaced

19
JPEG
Joint Photographic Experts Group
Best used for photographs
Up to 16.7 million colors
Use lossy compression
Cannot be animated
Cannot be made
transparent
Progressive JPEG – similar to
interlaced display

20
PNG
• Portable Network Graphic
• Support millions of colors
• Support multiple levels of transparency
(but browsers do not --
so limit to one transparent color for Web display)

• Support interlacing
• Use lossless compression
• Combines the best of GIF & JPEG
• Browser support is growing

21
HTML Image Element
Configures graphics on a web page
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100”>

src Attribute
◦ File name of the graphic
alt Attribute
◦ Configures alternate text content (description)
height Attribute
◦ Height of the graphic in pixels
width Attribute
◦ Width of the graphic in pixels

22
Accessibility & Images
Required:
Configure the alt attribute
Alternate text content to convey the meaning/intent of the
image
NOT the file name of the image
Use alt="“ for purely decorative images
Recommended:
If your site navigation uses image links for the main navigation, provide simple
text links at the bottom of the page.

23
Image Links
To create an image hyperlink use an anchor element to
contain an image element
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home"></a>
Home

Browsers automatically add a border to image links.

Configure CSS to eliminate the border
img {border-style:none; }

24
 Thumbnail Image
A small image configured to link to a larger version of that image.
<a href=“big.jpg”><img src=“small.jpg” alt=“country road” width=“200”
height=“100”></a>

25
Image Optimization
• The process of creating an image
with the lowest file size that still
renders a good quality image—
balancing image quality and file size.

• Photographs taken with

digital cameras are
not usually optimized for the Web

26
Optimize An Image for the Web
Image Optimization
Reduce the file size of the image
Reduce the dimensions of the image to the actual width and height of
the image on the web page.
Image Editing Tools:
GIMP (free!)
Adobe Fireworks
Adobe Photoshop
http://pixlr.com/editor (free!)

27
Choosing Names for Image Files
• Use all lowercase letters
• Do not use punctuation symbols and spaces
• Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)
• Keep your file names short but descriptive
• i1.gif is probably too short
• myimagewithmydogonmybirthday.gif is too long
• dogbday.gif may be just about right

28
Organizing Your Site
• Place images in
their own folder

• Code the path to

the file in the src
atttribute

<img src=“images/home.gif” alt=“Home”

height=“100” width=“200”>
29
 HTML5 Figure and Figcaption Elements

Figure Element: contains a unit of content that is self-

contained, such as an image, along with one optional
figcaption element.

<figure>
<img src="lighthouseisland.jpg" width="250"
height="355"
alt="Lighthouse Island">
<figcaption>
Island Lighthouse, Built in 1870
</figcaption>
</figure>

30
Exercise
• Create a Web Page describing this course contents
• Add Assessments as bullet points
• List the Course contents
• Add a picture of a computer

31
References
1. Gary B. Shelly & Misty E. Vermaat & Jeffrey J. (CON) Quasney & Susan L. (CON) Sebok & Steven
M. (CON) Freund.(2011). Discovering Computers, Complete: Your Interactive Guide to the
Digital World. Cengage Learning
2. MacDonald M. & (2015). Creating a Website; The Missing Manual. 4th Ed
3. Tittel, Ed(2013). Beginning HTML5 & CSS3 for dummies, John Wiley and Sons Publisher.
4. Castro,Elizabeth(2007).HTML,XHTML&CSS:Visual quickstart guide,Peachpit Press.

32