Chapter 5: HTML II

Class: IX | Subject: Information and Computer Technology

---

Key Concepts

1. HTML Lists

Lists provide information in a structured and easy-to-read format. There are three types of lists in HTML:

List Type	Tag	Purpose
Unordered List	<UL>	Bulleted list, items have equal importance
Ordered List	<OL>	Numbered list, items are ranked
Definition List	<DL>	Glossary/dictionary-style list

1.1 Unordered List <UL>...</UL>

• Classifies data items that have equal importance (none are ranked)., Items are identified by a symbol: disc (default), circle, or square., Uses <LI> tag for each list item.

Attribute: TYPE, changes the bullet symbol.

Value	Symbol
disc	Filled circle (default)
circle	Hollow circle
square	Filled square

<ul type="circle">
  <li>Apples</li>
  <li>Oranges</li>
  <li>Guava</li>
</ul>

1.2 Ordered List <OL>...</OL>

• Classifies data items that do not have equal importance (items are ranked)., Default symbol is number. Can change to letters or Roman numerals.

Attributes:

Attribute	Description	Values
TYPE	Changes the symbol	"1" (numbers, default), "a" (lowercase letters), "A" (uppercase letters), "i" (lowercase Roman), "I" (uppercase Roman)
START	Sets the starting value	Any number (e.g., start="4" begins at 4)

<!-- Default numbered list -->
<ol>
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
  <li>Take the bath</li>
</ol>

<!-- Starting from 4 -->
<ol start="4">
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
</ol>

<!-- Using lowercase letters -->
<ol type="a">
  <li>Get up in the morning</li>
  <li>Brush your teeth</li>
</ol>

1.3 Definition List <DL>...</DL>

• Similar to a dictionary, contains terms and their definitions., Uses three tags:
• <DL>, starts the definition list
• <DT>, defines the term
• <DD>, provides the definition (appears slightly indented/right-tabbed)

<dl>
  <dt>Clairvoyance</dt>
  <dd>French word for ability to see events in the future.</dd>
  <dt><b>Esprit de corps</b></dt>
  <dd>French word for feeling of pride and loyalty.</dd>
</dl>

2. Images

2.1 Types of Images

1. Inline image: Shown when the webpage is opened in the browser.
2. External image: Shown only when demanded by the user (by clicking on a link).

2.2 The <IMG> Tag (Empty Tag)

Inserts an inline image into the webpage.

<img src="address" width="value" height="value" alt="description" longdesc="htmlfilename">

Attributes:

Attribute	Description
SRC	Address/path to the image file (mandatory)
WIDTH	Width of the image (pixels or percentage)
HEIGHT	Height of the image (pixels or percentage)
ALT	Text description displayed when image cannot be loaded
LONGDESC	Links to an HTML file with a longer description
ALIGN	Places image on left or right (text wraps around it)

SRC Attribute, Different Cases

Case	Example
Image in a specific folder	src="C:\My documents\My Pictures\Flower.jpg"
Image in the same folder as HTML	src="Flower.jpg"
Image on a web server	src="http://www.yahoo.com/images/flower.jpg"

<!-- Basic image insertion -->
<img src="flower.jpg" width="200" height="150">

<!-- With alt text -->
<img src="flower.jpg" width="200" height="150" alt="Two White Roses">

<!-- With longdesc -->
<img src="flower.jpg" width="200" height="150" alt="White Roses" longdesc="abc.html">

<!-- Aligned left with text wrapping -->
<p>
<img src="flower.jpg" alt="White Roses" width="32" height="21" align="left">
The image will flow to the left side and this text will be on the right.
</p>

Note: Increasing the size of an image decreases its resolution, making it less clear.

2.3 External Images

Needed when:

1. Image formats like BMP or PICT are not supported by browsers (most support GIF or JPG).
2. Image is to be viewed in a text-only browser.
3. You want to see a larger size of the inline image.

External images are inserted using the anchor tag <A> (covered in the Linking section).

3. Inserting Audio and Video

3.1 The <EMBED> Tag

Defines a container for external (non-HTML) content like sound effects, video clips, and moving pictures. A plug-in is a small program that extends the browser's standard functionality.

<!-- Inserting audio -->
<embed height="50" width="100" src="titanic.mp3">

<!-- Inserting video -->
<center>
  <embed height="250" width="320" src="movie.mp4">
  <br><hr>
</center>

3.2 The <AUDIO> Tag with Controls and Autoplay

Attribute	Description
controls	Displays play/pause button etc.
autoplay	Audio starts playing as soon as it is ready

<audio controls autoplay>
  <embed height="50" width="100" src="titanic.mp3">
</audio>

3.3 The <VIDEO> Tag with Controls and Preload

Attribute	Description
controls	Displays video controls (play/pause button etc.)
preload	Controls buffering: none (don't buffer), metadata (buffer only metadata), auto (buffer before play)

<!-- Video with controls -->
<center>
  <video controls>
    <embed height="250" width="320" src="movie.mp4">
  </video>
</center>

<!-- Video with preload set to none -->
<center>
  <video controls preload="none">
    <embed height="250" width="320" src="movie.mp4">
  </video>
</center>

4. Linking (Anchor Element)

4.1 The <A> Tag

Creates a hyperlink in a webpage. Consists of three parts:

1. Start tag <a> with attributes (href is mandatory; target and name are optional)
2. The text or image to be hyperlinked
3. End tag </a>

<a href="address" target="_blank or _top" name="text">
  Hyperlink text
</a>

4.2 HREF Attribute (Mandatory), Stands for Hypertext Reference., Takes the address of the supporting document as its value.

<!-- Absolute link (full web address) -->
<a href="http://www.w3.org/">Website of W3C</a>

<!-- Relative link (same folder) -->
<a href="page1.html">Page 1</a>

4.3 TARGET Attribute

Value	Effect
_blank	Opens the linked page in a new browser window
_top	Opens the linked page in the current browser window

<!-- Open in new window -->
<a href="http://www.google.com" target="_blank">Search Engine</a>

<!-- Open in same window -->
<a href="http://www.google.com/" target="_top">Want to Google!</a>

4.4 NAME Attribute, Gives a name to a specific section within a webpage., Another anchor can then link directly to that named section.

<!-- Creating a named anchor -->
<a name="salessection">Sales Order Set Up</a>

<!-- Linking to the named anchor from another page -->
<a href="namedexample.html#salessection">Sales</a>

<!-- Linking to the named anchor within the same page -->
<a href="#salessection">Sales</a>

Rules:

• The named anchor itself does NOT have a hash mark: <a name="salessection">
• A link TO a named anchor ALWAYS has a hash mark: <a href="#salessection">

4.5 E-Mail Link

Creates a link that opens the user's email client with a pre-filled address.

<a href="mailto:myself@gmail.com">E-mail to myself!</a>

4.6 Image as a Link

<a href="https://www.facebook.com/">
  <img src="facebook.jpg" alt="Facebook">
</a>

4.7 Link Colours

Set using attributes in the <BODY> tag:

Attribute	Meaning	Default Colour	Hex Code
link	Standard (unvisited) link	Blue	#0000FF
vlink	Visited link	Purple	#800080
alink	Active link (on hover)	Red	#FF0000

<!-- Using colour names -->
<body link="red" alink="green" vlink="pink">

<!-- Using hexadecimal codes -->
<body link="#FF0000" alink="#04B45F" vlink="#FF00FF">

---

Important Definitions

Term	Definition
Unordered List	A bulleted list where items have equal importance
Ordered List	A numbered/ranked list where items have a specific order
Definition List	A list formatted like a dictionary with terms and their definitions
Inline Image	An image displayed automatically when the webpage opens
External Image	An image displayed only when the user clicks on a link
Plug-in	A small program that extends the browser's standard functionality
Anchor Element	The <A> tag used to create hyperlinks in a webpage
HREF	Hypertext Reference, attribute that specifies the link destination
Absolute Link	A link specifying the complete address (protocol + hostname + path)
Relative Link	A link specifying the path relative to the current file's location
Named Anchor	A section within a page given a name, allowing direct linking to it

---

Key Points

1. There are three types of HTML lists: Unordered (UL), Ordered (OL), and Definition (DL).
2. Unordered lists use disc (default), circle, or square as bullet symbols.
3. Ordered lists use numbers (default), letters (a/A), or Roman numerals (i/I).
4. Definition lists use <DT> for terms and <DD> for definitions.
5. Images are inserted with the <IMG> tag (empty tag), SRC attribute is mandatory.
6. The ALT attribute provides text when an image cannot be displayed.
7. Audio is embedded with <embed> tag; use <audio> tag with controls and autoplay attributes.
8. Video is embedded similarly; the preload attribute controls buffering (none/metadata/auto).
9. Hyperlinks are created with the <A> tag, HREF is mandatory.
10. TARGET _blank opens in a new window; _top opens in the same window.
11. Named anchors use name attribute (no hash); links to them use href="#name" (with hash).
12. Email links use mailto: instead of http:// in the HREF.
13. Images can serve as hyperlinks by wrapping <IMG> inside <A> tags.
14. Link colours are set via link, vlink, and alink attributes in the <BODY> tag.

---

Practice Questions

1. What is the correct HTML command for inserting an image?
2. Which list type creates a bulleted list?
3. What is the difference between ordered list and unordered list?
4. Distinguish between href and name attributes of <A> tag with examples.
5. Define Definition term with a suitable example.
6. Which three tags are used to create definition lists?
7. Differentiate <BODY BACKGROUND> and <IMG> tag.
8. Write HTML code to create a link to a school website (www.littlebuds.com).
9. Difference between <A> as an anchor and <A> as a link.
10. How can we set the colour of text that acts as a link? Explain with an example.

Lab Activities, Create an unordered list of vegetables, friends' names, and hobbies., Design a party invitation webpage with title, background colour, image, heading, and formatted text., Create a 3-4 page website for a Travel & Tourism company., Create a school homepage with title, school image, activities list, video, and photo gallery.