Scribd
Upload
1 views

HTML and CSS CKD Booklet

Uploaded by

kaylancube694
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

HTML and CSS CKD Booklet

Uploaded by

kaylancube694
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

IEB Coding and Robotics

Summary: HTML and CSS


2
I ntroduction to HTML

Welcome to your HTML adventure!

In this module, you'll dive into the world of HTML (HyperText Markup Language), the
fundamental building block of web pages.

What is HTML?
HTML is a markup language used to create and design web pages. It’s like the skeleton
of a webpage, giving it structure and meaning. Think of HTML as the language that tells
your web browser how to display content, from simple text to complex images and
interactive features.

Why Learn HTML?


Understanding HTML is crucial for anyone interested in web development. With HTML,
you can:
• Create your own web pages.
• Structure content effectively.
• Ensure that your website is accessible and well-organized.

How Does HTML Work?


When you visit a webpage, your browser receives HTML code and converts it into the
visual layout you see. This code is written using plain text and includes special tags that
define different parts of the page.

Example:
If you've ever right-clicked on a webpage and selected "View Page Source," you’ve
seen HTML code in action. This code is what browsers interpret to display the web
page.

3
Tools You’ll Use
To start writing HTML, you need a text editor. Unlike word processors like MS Word,
which add extra formatting codes, text editors are designed to handle plain text.

We’ll be using Notepad++ in our lessons, but other text editors like Visual Studio
Code, Atom, or Sublime Text are also great choices.

Fun Fact!
Did you know that HTML has been around since 1991? It’s been the backbone of the
web for over three decades!

I nteractive Activity: Text Editors Comparison

Instructions:
1. Read the Descriptions: Review the descriptions of various text editors.

2. Match the Editors:

- Setup: Copy the given HTML code into a file named index.html and open it in a
web browser.
- Drag-and-Drop: Learners drag text editor names into the boxes below the
descriptions.
- Check Results: Ensure that each description is correctly matched with its text
editor.

Descriptions

Text Editor Description


1. Notepad++ 1. A powerful, open-source text editor
with a strong community. It supports
many programming languages and
has a wide range of extensions.
2. Visual Studio Code 2. A lightweight and fast text editor that
is part of the standard Windows
installation. It lacks advanced features
but is simple to use for basic HTML
coding.
3. Atom 3. A versatile text editor known for its
speed and ease of use. It provides a
distraction-free writing experience and
includes a lot of customization
options.
4. Sublime Text 4. An advanced text editor with a focus
on code development. It includes
features like debugging, code
navigation, and Git integration.

4
S ummary of HTML Tags… (thus far)

1. <!DOCTYPE html>

Purpose: Declares the document type and HTML version. It tells the web browser
that the document is written in HTML5.

Usage: Should be the very first line in an HTML document.

2. <html> / </html>

Purpose: The root element that contains all other HTML elements. The opening
<html> tag starts the HTML document, and the closing </html> tag ends it.

Usage: Encloses the entire HTML content.

3. <head> / </head>

Purpose: Contains meta-information about the document, such as the title,


character set, and links to CSS files or scripts.

Usage: Placed inside the <html> element, before the <body> element.

4. <title> / </title>

Purpose: Sets the title of the web page, which appears in the browser’s title bar or
tab.

Usage: Must be placed inside the <head> element.

5. <body> / </body>

Purpose: Contains the visible content of the web page, such as text, images, links,
and other elements.

Usage: Encloses the main content of the web page, placed inside the <html>
element after the <head>.

6. <h1> / </h1>

Purpose: Defines a top-level heading. <h1> is the highest level, with <h2>, <h3>,
etc., being progressively smaller.

Usage: Used to create headings on the web page, with <h1> being the most
important.

8
7. <p> / </p>

Purpose: Defines a paragraph of text. Automatically adds space before and after
the paragraph.

Usage: Used to group text into paragraphs for better readability.

Example HTML Code Using These Tags

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text on my first web page.</p>
</body>
</html>

A ctivities

Complete the crossword puzzle.

9
10
P age Formatting – More Tags

1. Basic Tags
• Headings: <h1> to <h6> represent headings of different sizes, with <h1>
being the largest.

Example: <h1>Largest Heading</h1>


<h2>Smaller Heading</h2>

• Paragraph: <p> is used for creating paragraphs.

Example: <p>This is a paragraph of text.</p>

• Line Break: <br /> is a self-closing tag that adds a line break.

Example: This is the first line.<br />This is the second line.

• Horizontal Line: <hr /> adds a horizontal line across the page.

Example: <hr />

• Bold Text: <b> makes text bold, but an alternative is <strong>, which is more
modern.

Example: <b>This text is bold.</b>


<strong>This is also bold text.</strong>

• Italic Text: <i> makes text italic.

Example: <i>This text is italicized.</i>

• Underline: <u> underlines text.

Example: <u>This text is underlined.</u>

• Comments: <!-- comment --> is used for adding notes that won’t be visible on
the webpage.

Example: <!-- This is a comment, not shown on the webpage. -->

12
2. Attributes
• Font Tag: An older, deprecated tag for styling text.

Example: <font size="6">This text is size 6.</font>


<font color="red">This text is red.</font>

• Style Attribute: A modern way to apply inline styles.

Example: <p style="color: red;">This paragraph is red.</p>

3. Colors
• Color can be defined by:
o Names: like "red" or "blue".

Example: <p style="color: blue;">This text is blue.</p>

o RGB: color: rgb(255, 0, 0); (where each value ranges from 0 to 255).

Example: <p style="color: rgb(255, 0, 0);">This text is red.</p>

o Hex: color: #ff0000;.

Example: <p style="color: #ff0000;">This text is red using


a hex value.</p>

• Combine styles using a semi-colon:

Example: <p style="color: red; background-color: yellow; font-size:


16px;">This text is red, has a yellow background, and is size
16px.</p>

4. Span Tag
1. <span> is used for styling specific parts of text within a paragraph.

Example: <p>This is a <span style="color: red;">red</span> word in the


paragraph.</p>

5. Self-Closing Tags
• Some tags like <br /> and <hr /> do not need a closing tag and are self-
contained.

Example: First line.<br />Second line.<hr />This is after a horizontal line.

13
I mages in HTML

Adding Images to HTML


To display an image, use the <img> tag.

Example: <img src="images/Earth2.png" alt="Earth image" />

Key Attributes
• src (source):
Specifies the path to your image file. Ensure the file name matches exactly
(case-sensitive).

• alt (alternative):
Provides a description for screen readers and displays if the image cannot load.

Adjusting Image Size


You can control the size of your image with the width and height attributes.

Example:
<img src="images/Earth2.png" alt="Earth image" width="320"
height="320" />

Why Use Width and Height?


Adding width and height attributes helps your browser allocate space for the image
while it loads, resulting in a smoother browsing experience.

Adding Borders
You can also add a border to your image.

Example:
<img src="images/Earth2.png" alt="Earth image" width="320"
height="320" border="1" />

Centering Images
If you want your image to appear in the center of the page, wrap it in a <p> tag (or
<div> tag)

Example:
<p style="text-align: center;">
<img src="images/myimage.png" alt="my image" />
</p>
19
T Ypes of Lists

Unordered Lists (UL)


• An unordered list is created using the <ul> tag.
• Each item in the list is defined with the <li> tag.
• Unordered lists do not have numbers; instead, they can have bullet points or
symbols.
• You can change the bullet style using the type attribute. For example:
o type="circle" produces hollow circles.
o type="square" produces squares.
Ordered Lists (OL)
• An ordered list is created using the <ol> tag.
• Like unordered lists, each item is defined with the <li> tag.
• Ordered lists are numbered automatically (1, 2, 3, etc.).
• You can change the numbering style using the type attribute. Options include:
o type="A" for uppercase letters (A, B, C).
o type="a" for lowercase letters (a, b, c).
o type="I" for uppercase Roman numerals (I, II, III).
o type="i" for lowercase Roman numerals (i, ii, iii).

Additional Features
• Both types of lists can include as many list items as needed.
• You can make list items clickable by wrapping them in an anchor (<a>) tag, allowing
you to create a functional menu system.

20
A ctivity

Multiple Choice Questions


1. What is the purpose of the src attribute in the <img> tag?

A) To provide a description of the image


B) To specify the path to the image file
C) To set the size of the image
D) To add a border to the image

2. Which of the following attributes is optional when using the <img> tag?
A) src
B) alt
C) width
D) height

3. What happens if you don’t include width and height attributes for an image?
A) The image will not display
B) The browser may take longer to load the page
C) The image will automatically adjust its size
D) The image will be centered on the page
True/False Questions

4. True or False: The alt attribute is used to improve accessibility for visually impaired
users.
5. True or False: You can only use the <p> tag to center an image; the <div> tag
cannot be used for this purpose.

Short Answer Questions

6. Explain why it is important to match the file name exactly in the src attribute.

7. What is the effect of adding a border to an image using the border attribute?

Fill-in-the-Blank Questions

8. The <img> tag is a __________ tag, meaning it does not require a closing tag.

9. To center an image on the page, you can wrap it in a <p> tag and set the
__________ property to "center."

21
H TML Glossary

1. html: The root element that contains all other HTML elements in a web
document.
2. heading: A tag that defines a top-level heading, indicating the most important
title on a web page.
3. paragraph: A tag used for creating paragraphs of text, improving readability on
web pages.
4. src: An attribute in the img tag that specifies the path to an image file, essential
for displaying images.
5. browser: Software that allows users to access and view web pages on the
internet.
6. hr: A tag used to add a horizontal line across a web page, often used to separate
content visually.
7. doctype: An opening tag that declares the document type and HTML version
being used in an HTML document.
8. span: A tag used for styling specific parts of text within a paragraph without
creating a new block-level element.

22
p
1.
roject
Create a Personal Webpage

Scenario: Imagine you have been tasked with creating a personal webpage to
introduce yourself to the world. This webpage will showcase your interests,
hobbies, and some personal achievements.

Questions to Guide Your Creation:


1. What is the purpose of your webpage?
Write a brief statement explaining why you are creating this webpage.

2. What main heading (h1) will you use to introduce yourself?


Think of a catchy title that represents you.

3. What paragraphs (p) will you include?


Describe yourself in one paragraph. What hobbies do you have? What are your
interests?

4. What image will you choose to represent you?


Include an image (make sure to note the file name and path). Why did you
choose this image?

5. What additional sections (h2) do you want to add?


Consider sections like "About Me," "My Hobbies," or "Achievements." What
headings will you use?

6. How will you make certain text stand out?


Identify parts of your paragraphs that you can emphasize using <span> or other
styling methods.

7. What comments will you add in your HTML code?


Think about useful notes that could help you or others understand your code.

8. What horizontal lines (hr) will you use to separate content?


Decide where you might want to add visual breaks in your content.

Now create your website.

23
2. Build a Community Event Webpage

Scenario: Your local community center is hosting a fun fair, and they need your
help to create a simple webpage to promote the event. This webpage will provide
details about the event, including the date, time, location, activities, and how to
register.

Questions to Guide Your Creation:


1. What is the name of the event?
Choose a catchy title for the fair to grab attention.

2. What date and time will the event take place?


Include the specifics so visitors know when to attend.

3. Where is the event being held?


Provide the location details, including any relevant landmarks.

4. What activities will be available at the fair?


List the main attractions (e.g., games, food stalls, live performances).

5. How can people register for the event?


Include information on how to sign up or contact for more details.

6. What images will you use to make the webpage visually appealing?
Decide on images related to the event (e.g., pictures of past fairs, activities).

7. What additional sections do you want to include?


Think about adding sections like "Contact Us" or "FAQ."

8. What comments will you add in your HTML code?


Add notes to help others understand your code or to remind yourself of future
edits.

3. Design a Travel Blog Homepage

Scenario: You are an aspiring travel blogger, and you want to create a
homepage for your travel blog. This homepage will introduce visitors to your
adventures, showcase your favorite destinations, and provide links to your travel
stories.

Questions to Guide Your Creation:


1. What is the name of your travel blog?
Create a unique and catchy title for your blog.

2. What is your tagline or motto?


Write a short phrase that captures the essence of your travels.

3. What are some of your favorite travel destinations?


List a few places you've visited or would like to visit.

24
4. What images will you include to make your blog visually appealing?
Choose images from your travels that represent the destinations.

5. What sections do you want to include on your homepage?


Consider sections like "Latest Posts," "Travel Tips," or "About Me."

6. How can visitors subscribe to your blog?


Provide a way for visitors to sign up for updates (e.g., an email signup form).

7. What links will you include to direct visitors to your travel stories?
Think about including links to specific blog posts or categories.

8. What comments will you add in your HTML code?


Include notes to help others understand your code or to remember future
edits.

25
P
1.
ossible Answers

Create a Personal Webpage

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Personal Webpage</title>
</head>
<body>

<h1>Welcome to My World!</h1>

<p>Hi! My name is Alex, and I am a passionate coder and a


lover of nature.</p>

<img src="images/profile.jpg" alt="A picture of me"


width="300" height="300">

<hr>

<h2>About Me</h2>
<p>I enjoy spending my free time exploring the outdoors,
coding new projects, and learning about technology.</p>

<h2>My Hobbies</h2>
<p>Some of my hobbies include:</p>
<ul>
<li><span style="color: green;">Hiking</span> - I love
discovering new trails.</li>
<li><span style="color: blue;">Programming</span> - I
enjoy creating websites and apps.</li>
<li><span style="color: purple;">Photography</span> -
Capturing beautiful moments is a passion of mine.</li>
</ul>

<hr>

<h2>Achievements</h2>
<p>I recently completed a coding bootcamp and built my
first website!</p>

<!-- This section is for additional comments and notes. -->


<!-- Feel free to customize your webpage as you wish! -->

</body>
</html>

26
Code Explanation:
• <!DOCTYPE html>: Declares the document type.
• <html>, <head>, <body>: Basic structure of the HTML document.
• <h1>: Main heading introducing the webpage.
• <p>: Paragraphs describing the person and their interests.
• <img>: Displays an image with a specified path and alternate text.
• <hr>: Creates horizontal lines to separate sections.
• <h2>: Subheadings for different sections of content.
• <ul> and <li>: Creates an unordered list of hobbies.
• Comments: Notes within the code that won’t appear on the webpage.

2. Build a Community Event Webpage


<!DOCTYPE html>
<html>
<head>
<title>Community Fun Fair 2024</title>
</head>
<body>

<h1>Welcome to the Community Fun Fair!</h1>

<p>Join us for a day of fun, food, and festivities!</p>

<h2>Date and Time</h2>


<p>The event will take place on Saturday, March 15, 2024,
from 10 AM to 5 PM.</p>

<h2>Location</h2>
<p>Come visit us at the Community Center Park, 123 Main
Street, Yourtown.</p>

<h2>Activities</h2>
<p>We have a variety of exciting activities planned:</p>
<ul>
<li>Games and Prizes</li>
<li>Food Trucks</li>
<li>Live Music Performances</li>
<li>Arts and Crafts Booths</li>
<li>Petting Zoo</li>
</ul>

<h2>Registration</h2>
<p>To register for the event, please contact us at <a
href="mailto:[email protected]">[email protected]
om</a>.</p>

<h2>Gallery</h2>

27
<img src="images/funfair.jpg" alt="Community Fun Fair"
width="600" height="400">

<hr>

<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out!</p>
<p>Phone: (123) 456-7890</p>

<!-- This section contains details about the event -->


<!-- Make sure to update the information as the event date
approaches! -->

</body>
</html>

Code Explanation:

• <!DOCTYPE html>: Declares the document type.


• <html>, <head>, <body>: Basic structure of the HTML document.
• <h1>: Main heading for the webpage.
• <p>: Paragraphs providing details about the event.
• <h2>: Subheadings for sections like date, location, activities, etc.
• <ul> and <li>: Unordered list of activities at the fair.
• <a>: Hyperlink for email registration.
• <img>: Displays an image related to the event.
• <hr>: Creates a horizontal line to separate sections.
• Comments: Notes for clarification and reminders.

3. Design a Travel Blog Homepage


<!DOCTYPE html>
<html>
<head>
<title>Wanderlust Adventures</title>
</head>
<body>

<h1>Welcome to Wanderlust Adventures!</h1>


<p>Your guide to exploring the world, one destination at a
time.</p>

<h2>Favorite Destinations</h2>
<ul>
<li><a href="#paris">Paris, France</a></li>
<li><a href="#bali">Bali, Indonesia</a></li>
<li><a href="#newyork">New York City, USA</a></li>
<li><a href="#tokyo">Tokyo, Japan</a></li>
</ul>

<h2>Latest Travel Stories</h2>


28
<p>Check out my latest adventures:</p>
<ol>
<li><a href="paris.html">Exploring the Charm of
Paris</a></li>
<li><a href="bali.html">Relaxing in Bali's
Beaches</a></li>
<li><a href="newyork.html">The Buzz of New York
City</a></li>
<li><a href="tokyo.html">Cultural Wonders of
Tokyo</a></li>
</ol>

<h2>Subscribe to My Blog</h2>
<p>Stay updated with my latest travels by signing up!</p>
<form action="subscribe.html" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Subscribe">
</form>

<h2>Gallery</h2>
<img src="images/travel.jpg" alt="Travel Adventure"
width="600" height="400">

<hr>

<h2>About Me</h2>
<p>Hi! I'm Jamie, a travel enthusiast who loves exploring
new cultures and cuisines. Join me on my adventures!</p>

<!-- This section is for future blog updates -->


<!-- Make sure to update the links and content regularly! -
->

</body>
</html>

Code Explanation:
• <!DOCTYPE html>: Declares the document type.
• <html>, <head>, <body>: Basic structure of the HTML document.
• <h1>: Main heading for the blog.
• <p>: Paragraphs introducing the blog and providing personal info.
• <ul> and <ol>: Unordered and ordered lists for destinations and latest travel
stories.
• <a>: Hyperlinks for destinations and blog post links.
• <form>: Simple subscription form for email signup.
• <img>: Displays an image related to travel.
• <hr>: Creates a horizontal line to separate sections.
• Comments: Notes for clarification and reminders.

29
H yperlinks

Importance of Links

• Links are essential for creating the "web" in the World Wide Web, connecting web
pages and resources.
• Clickable items like text or images allow users to navigate to different locations,
such as other web pages, documents, or email addresses.

Hyperlinking Basics

• Use the <a> (anchor) tag to create clickable links.


• The href attribute specifies the target location, which can be another web page, a
file, a document (like PDF), or even a media file.

Example:
<a href="http://example.com">Click here</a>

Linking to Email Addresses

• You can link directly to an email address using the mailto: protocol.

Example:
<a href="mailto:[email protected]">Send email</a>

This opens the user’s default email client and populates the "To:" field.

• You can also include pre-filled subjects and body content:


<a href="mailto:[email protected]?subject=Feedback&body=
Message">Send feedback</a>

Linking to Other Resources

• You can link to any type of file, such as PDFs or media files, by specifying the file's
location.

Example for a local PDF:


<a href="mydoc.pdf">Open PDF</a>

30
Opening Links in a New Tab

• By default, links open in the same tab, but you can use the target="_blank"
attribute to open links in a new tab.

Example:
<a href="http://example.com" target="_blank">Open in new
tab</a>

Clickable Images

• Just like text, you can make images clickable by wrapping them inside an anchor
tag.

Example:
<a href="http://example.com">
<img src="image.jpg" alt="Clickable Image">
</a>

A ctivity

True or False Questions

1. True or False: The <a> tag is used to create clickable links on a web page.

2. True or False: You can only use text, not images, as clickable items in a
hyperlink.

3. True or False: The mailto: protocol is used to create a link that opens the user’s
default email client.

4. True or False: Adding target="_blank" to an anchor tag will open the link in the
same tab.

5. True or False: You can link to a PDF document using the <a> tag, and most
browsers will be able to open it.

31
I ntroduction to Styling with CSS

CSS is a styling language used to define how HTML elements should look. It separates
the design (look and feel) from the content of a webpage.

There are three main methods to apply CSS:


1. Inline CSS – Adding the style directly to HTML elements.

2. Internal CSS – Adding CSS inside the <style> tag in the HTML <head>.

3. External CSS – Linking an external .css file to your HTML. This is the most
preferred method.

Example:
<h1 style="color: green;">This is inline CSS</h1> <!-- Inline
CSS -->

<head>
<style>
h2 { color: blue; } <!-- Internal CSS -->
</style>
</head>

<link rel="stylesheet" href="CSS/style.css"> <!-- External CSS -


->

Here, we demonstrate how to use inline, internal, and external CSS, with external being
the most maintainable as it keeps the design separate from the content.

Colours

In CSS, there are several ways to specify colours:

1. Named Colours
Using predefined colour names like red, green, blue.

2. RGB (Red, Green, Blue)


Using RGB values like rgb(255, 0, 0) for red.

3. Hexadecimal Colours
Using hex values like #ff0000 for red.

4. RGBA
Same as RGB but with an additional alpha (transparency) value,
e.g., rgba(255, 0, 0, 0.5) for a transparent red.

32
Example:
h1 {
color: red; /* Named Color */
}
h2 {
color: rgb(0, 128, 0); /* RGB Color */
}
h3 {
color: #0000ff; /* Hexadecimal Color */
}
h4 {
color: rgba(255, 165, 0, 0.5); /* RGBA Color */
}

HTML Selectors

In CSS, selectors are used to target HTML elements for styling. You can use basic
selectors like element selectors (e.g., h1, p) to apply styles to all occurrences of an
element.

Example:
h1 {
color: orange;
font-size: 24px;
}

p {
color: blue;
text-align: center;
}

In this example, all h1 elements will be orange, and all p elements will have blue text
and be centered.

Styling
Classes allow you to define styles that can be applied to multiple elements. A class is
defined with a . followed by the class name and applied using the class attribute in
HTML.

Example:
In CSS

.heading-common {
font-style: italic;
}

.text-red {
color: red;
}

33
In HTML
<h2 class="heading-common text-red">This is styled with a
class</h2>

Here, the class heading-common applies italic style, and text-red changes the text
colour to red. Multiple classes can be applied by separating them with a space.

CSS ID’s

Unlike classes, IDs are unique and can only be used once per page. An ID is defined
with a # followed by the ID name and is applied using the id attribute in HTML.

Example
In CSS
#main-heading {
color: purple;
text-transform: uppercase;
}

In HTML
<h1 id="main-heading">This is a unique styled heading</h1>

The ID main-heading is applied to this h1 and makes the text purple and uppercase.

What Do We Know So Far?

• A CSS file is just a text file that controls the styling of HTML pages.

• CSS allows the separation of content (HTML) and design (CSS).

• Using an external CSS file ensures consistency across all HTML pages in a project.

• There are various ways to define colours, using names, RGB values, hex codes, or
RGBA for transparency.

• Classes can be reused on multiple elements, while IDs are unique to a single
element.

34
A ctivity

Complete the crossword puzzle.

35
S tyling Text

Modern browsers will support around 300 different CSS properties. The good news is
that you do not have to remember them all. Most web developers can remember the
most common ones that they use, but will usually look up the rest when they need to
use them.

In this lesson you will learn a little more about styling text.

An excellent resource to look up the various CSS properties is the CSS Reference at
W3Schools website. You can click on any of the properties to get a full explanation on
how to use it, and the possible values.

CSS Properties
There are far too many text styling properties for us to explain them all. We will cover
only some of the most popular.

CSS Property Purpose Some example values


Specifies the type of font to be used. If font-family: "Times New
more than one value is given then the Roman", Times, serif;
font-family
second will be tried if the computer does font-family: Arial, Helvetica,
not have the first font. sans-serif;
font-style: normal;
font-style Sets the style of the font.
font-style: italic;
font-weight: normal;
font-weight: bold;
Sets how thick of thin the characters of the font-weight: bolder;
font-weight
text must be. font-weight: lighter;
font-weight: 500 (a number
from 100 to 900);
font-size: 15px;
Sets the size of the font. Can be given in
font-size font-size: 200%;
pixels, percentage, or a description.
font-size: large;
Sets the colour of the text. Can be stated in color: red;
color any of the forms that have already been color: #ff557e;
discussed. color: rgb(56, 184, 212);
text-decoration-line:
underline;
text- Sets the type of line to be used for text text-decoration-line:
decoration-line decoration. overline;
text-decoration-line: line-
through;

36
text-decoration-thickness:
text-decoration- Sets the thickness of the line used for
5px;
thickness text decoration.
text-decoration-thickness:
50%;
text-decoration-color: red;
text-decoration-color:
text-decoration- Sets the colour of the line used for
#ff0000;
color text decoration.
text-decoration-color:
rgb(234, 65, 97);
text-transform: uppercase;
Sets the transform of the text within a
text-transform text-transform: lowercase;
<DIV> tag.
text-transform-capitalize;
line-height: normal;
Sets the distance between lines of
line-height line-height: 80%;
text.
line-height: 10px;
Increases the space between letters letter-spacing: 3px;
letter-spacing
of text. letter-spacing: -2px;
Increases the spacing between words
word-spacing word-spacing: 20px;
of text
background-color: red;
background-color: #00ff00;
background-color Sets the background color for text
background-color: rgb(57,
222, 187);

A ctivity

True or False Questions

1. The font-family property allows you to specify multiple fonts, and the browser will
try the second font if the first one is unavailable.

2. The font-weight property can only accept values like normal and bold.

3. The color property can be used to set the text color using a color name, hex
code, or RGB value.

4. The text-transform property is used to set the size of the font.

5. The letter-spacing property increases or decreases the space between letters in


a block of text.

37
S tyling Paragraphs

On a web page it is likely that you have many paragraphs of text. Paragraphs work fine
(using the <P></P> tags), however if you want more flexibility when it comes to the
styling of "blocks" then the best tag to use is the <DIV></DIV> tag.

The <DIV> tag creates a "container". You can think of these as being "areas" or "blocks"
on the web page. Each <DIV> tag can contain a lot of other HTML tags. The DIV tag
just helps to arrange things a lot easier.

You already know how to use CSS to style text. But, what if you wanted to style entire
areas of the web page. The best way to do this is break your page into areas using the
<DIV> tag. Then you can put various content into the DIV tag. For example, you could
put a paragraph (or paragraphs) of text in it. Or, you could create a DIV tag, and place
an image inside it.

Think of each DIV tag as being a "container". Not only DIV tags are containers. Almost
all HTML tags (like <BODY>, <UL>, <H1>, etc.) are also containers, and can be styled
accordingly.

Here are some handy CSS properties that can act on the entire container.

Table of CSS Properties


CSS
Purpose Examples of values
Property
Sets the width for the element. Can be in pixels, width: 50%;
width
or percentage of display width width: 800px;
Sets the height of an element. Can be in pixels, height: 75%;
height
or percentage of display height. height: 700px;
margin: 10px 20px 10px
Adds a margin around the top, right, bottom, and
margin 20px;
left of the element
margin: 10px;
If elements are next to each other, then the
padding: 20px 30px 20px
padding specifies the distance between them
padding 30px;
(different to margin). The padding is also
padding: 25px;
specified as top, right, bottom, and left.
This specifies the style of any required border
around the element. You can use the border
property on its own, or you can use one of the border: 5px solid red;
border other many border properties to set things more border: 4px dotted blue;
accurately. If using just the border property then border: double;
you can specify the width, style and colour all at
once. The style is compulsory.
background-color:
background- Sets the background colour for the entire
yellow;
color container/element.
background-color:

38
Table of CSS Properties
CSS
Purpose Examples of values
Property
#00cc00;
background-color:
rgb(224, 100, 56);
Sets a background image for a container. make
sure that you have the image in the correct file
background- background-image:
location. The example to the right assumes you
image url("assets/myimage.gif");
have an image called myimage.gif, and that it is
stored in a folder called /assets.
These properties are all used to "position" an
element inside of its parent. For example, the
following CSS (using an ID) can be used to
position a <div> element at an exact location
(150 pixels from the left and 120px from the top)
position
inside of the <body> tag. The DIV is inside the
BODY, so the BODY is the parent and the DIV is position: absolute;
left
the child. You need to be very careful when position: relative;
placing things at exact positions on the screen, top: 50px;
top
as it doesn't always end up looking like you want bottom: 135px;
it to. left: 200px;
bottom
right: 100px;
#mydiv {
right
position: absolute;
left: 150px;
top: 120px;
border: 3px solid green;
}
text-align: left;
Sets how text is aligned if it is placed inside of text-align: right;
text-align
the container. text-align: center;
text-align: justify;

39
A ctivity

Match column B to column A.

A udio and Video Files

In earlier versions of HTML there was an <embed> tag. This was used to embed
various file types into a web page. That <embed> tag is now deprecated (can you
remember what that means ? No. Look it up.).

HTML5, the version of HTML that is now in common use, offers two tags for us to use.

The first of these is used for video, and is the <video> tag.

The following HTML code snippet will place a video onto the web page.

40
The DIV tags are not necessary, but it always handy to place the video into a container
that you can then later style with CSS.

<div>

<video width="960" height="540" controls>


<source src="assets/video-sample.mp4" type="video/mp4">
<source src="assets/video-sample.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

Take note of the attributes that are included in the <video> tag.

The width and height attributes specify the width and height of the video player. It is
important to use both of these, or the video may flicker when it plays. For best results
try and match these numbers to the actual width and height of the video (you can check
the video files properties for this), or some fraction of this. The original video provided is
at 1960x1080 resolution, and the code above sets the width and height to exactly have
of those to maintain the "aspect ratio".

The controls attribute instructs the browser to display play, pause, and stop buttons so
that the playback can be controlled.

You may have noticed that there are TWO <source> tags. This is a bit of a "safety"
feature. If the client browser is an older type and cannot play the first file type (the .mp4
file), then it will automatically try and play the second type of file (the .ogg file) instead.

There is another attribute, autoplay, that can also be used in the video tag. Browsers
often will not auto-play though, so in order to make sure that it does you should rather
use autoplay muted instead.

HTML5 provides the <audio> tag that we can use to place audio videos into a player on
the web page.

The following snippet of code will put the provided audio file onto the page.
<div>
<audio controls>
<source src="assets/music-sample.ogg" type="audio/ogg">
<source src="assets/music-sample.mp3" type="audio/mpeg">
<source src="assets/music-sample.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<div>

Note that the <audio> tag has the controls attribute. This puts play, pause, stop buttons
on the player so the playback can be controlled. If you leave it off then there are not
buttons.

41
The reason for the multiple <source> tags is the same as for the video. If the browser is
unable to play the .ogg file then it will try the .mp3 version. If it still cant play that then it
will try the .wav version last.

If none of the versions will play, then the text (Your browser does not support the audio
element.) is displayed instead.

The <audio> tag also supports the autoplay muted attributes. If you just use autoplay on
its own then most Chromium based browsers (Chrome, Edge, Brave, etc.) will not auto
play.

Note: Safari browser does not support OGG files at this time.

A ctivity

True or False Questions


1. The <embed> tag is still commonly used in HTML5 to embed various file types into
a web page.

2. The <video> tag is used to place audio files onto a web page in HTML5.

3. The controls attribute in the <video> tag instructs the browser to display play, pause,
and stop buttons.

4. If the first <source> tag in a media element cannot be played, the browser will
automatically try to play the second <source> tag.

5. The <audio> tag supports the autoplay muted attributes to ensure that audio plays
automatically without sound in browsers.

42
C ss Glossary
1. CSS (Cascading Style Sheets): A style sheet language used for describing the
presentation of a document written in HTML or XML. CSS controls the layout of
multiple web pages all at once.

2. CSS Properties: Attributes that define how HTML elements should be displayed.
Each property has a specific purpose and can have multiple values. Common
properties include width, height, margin, padding, border, background-color, and
more.

3. font-family: A CSS property that specifies the type of font to be used for text.
Multiple fonts can be listed as fallbacks.

4. font-style: This property sets the style of the font, such as normal or italic.

5. font-weight: Specifies the thickness of characters in text, with values like normal,
bold, or numeric values from 100 to 900.

6. font-size: Sets the size of the font, which can be specified in pixels, percentages, or
keywords like small, medium, and large.

7. color: Defines the color of the text, which can be represented in various formats
such as named colors, hex codes, or RGB values.

8. text-decoration-line: Determines the type of line used for text decoration, including
underline, overline, and line-through.

9. text-decoration-thickness: Specifies the thickness of the line used in text


decoration.

10. text-decoration-color: Defines the color of the text decoration line.

11. text-transform: Controls the capitalization of text within an element, with values like
uppercase, lowercase, or capitalize.

12. line-height: Sets the vertical distance between lines of text, which can be specified
in normal, percentages, or fixed pixel values.

13. letter-spacing: Adjusts the spacing between letters in text.

14. word-spacing: Modifies the spacing between words in text.

15. background-color: Specifies the background color of an element.

16. background-image: Sets a background image for an element, requiring the correct
file path.

43
17. position: A property that determines how an element is positioned within its parent
container. Common values include static, relative, absolute, and fixed.

18. left, right, top, bottom: Properties used to define the exact position of an element
when using the absolute or fixed position.

19. text-align: Controls the alignment of text within an element, with values like left,
right, center, and justify.

20. HTML5: The latest version of HTML, which introduces new elements and attributes,
including <video> and <audio> for multimedia content.

21. <video> tag: An HTML element used to embed video content in a web page. It
includes attributes like controls, width, and height.

22. <audio> tag: An HTML element used to embed audio content in a web page. It also
includes the controls attribute for playback control.

23. <source> tag: An HTML element used within <video> and <audio> tags to specify
different media file formats. Browsers will attempt to play the first supported format
listed.

24. autoplay: An attribute that allows media (audio or video) to start playing
automatically when the page loads. Browsers often require muted to allow autoplay.

25. deprecated: A term indicating that a feature (like the <embed> tag) is outdated and
should not be used in modern web development.

44
A
1.
ctivities

Create Your Personal Webpage

Scenario: You have been tasked with creating a personal webpage to introduce
yourself to the world. This webpage will showcase your interests, hobbies, and
some personal achievements.

1.1 Build the website.

1.2 Create Your CSS Style Guide for Your Personal Webpage

Scenario: You are tasked with creating a CSS style guide for your
personal webpage. This guide will define how your webpage will look,
including fonts, colors, spacing, and layout.

Questions to Guide Your CSS Creation:


1. What is the overall theme of your personal webpage?
Write a brief statement explaining the mood or aesthetic you want to
convey (e.g., professional, fun, artistic).

2. What color scheme will you use for your webpage?


Identify primary and secondary colors. What colors will represent your
brand or personality?

3. What font styles will you choose?


List the font families (e.g., Arial, Georgia, sans-serif) you plan to use
for headings, body text, and other elements. Why did you choose
these fonts?

4. How will you structure the layout of your webpage?


Describe how you plan to organize the content (e.g., header,
navigation bar, main content area, footer). Will you use CSS grid or
flexbox for layout?

5. What spacing (margin and padding) will you apply?


Decide on the margins and padding for various elements. How much
space will you have between paragraphs, headings, and other
components?

6. What styles will you use for links?


Describe how you will style hyperlinks (e.g., color, hover effects). How
will you make sure they are visually appealing and accessible?

45
7. What background styles will you use?
Determine whether you will use a solid color, gradient, or image for
your background. Why did you choose this style?

8. What comments will you add in your CSS code?


Think about useful notes that could help you or others understand your
styling choices.

P
1.
ossible Answers

Create your personal website.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Personal Webpage</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif; /* Body font */
background-color: #F8F9FA; /* Background color */
margin: 0; /* Reset default margins */
display: flex; /* Flexbox layout */
flex-direction: column; /* Column direction */
justify-content: space-between; /* Space between
sections */
}

/* Header Styles */
header {
background-color: #007BFF; /* Header background
color */
color: white; /* Header text color */
padding: 20px; /* Padding around header */
text-align: center; /* Centered text */
}

/* Navigation Styles */
nav {
margin: 10px 0; /* Margin for navigation */
}

46
nav a {
color: white; /* Link color */
text-decoration: none; /* No underline */
margin: 0 15px; /* Spacing between links */
}

nav a:hover {
text-decoration: underline; /* Underline on hover
*/
}

/* Main Content Styles */


main {
padding: 20px; /* Padding around main content */
}

h2 {
margin: 20px 0; /* Margin for headings */
}

p {
margin: 15px 0; /* Margin for paragraphs */
}

/* Footer Styles */
footer {
background-color: #007BFF; /* Footer background
color */
color: white; /* Footer text color */
text-align: center; /* Centered text */
padding: 10px; /* Padding around footer */
}
</style>
</head>
<body>

<header>
<h1>Welcome to My Personal Webpage</h1>
</header>

<nav>
<a href="#about">About Me</a>
<a href="#hobbies">My Hobbies</a>
<a href="#achievements">Achievements</a>
</nav>

<main>
<div id="about">
<h2>About Me</h2>

47
<p>Hi! I'm [Your Name], a [your profession or
interests]. I love exploring new technologies and creating
innovative solutions.</p>
<img src="assets/your-image.jpg" alt="A
representation of me" width="300"> <!-- Replace with your image
file -->
</div>

<div id="hobbies">
<h2>My Hobbies</h2>
<p>I enjoy [list your hobbies, e.g., painting,
hiking, coding]. Each hobby brings me joy and relaxation.</p>
</div>

<div id="achievements">
<h2>Achievements</h2>
<p>Some of my achievements include [list your
achievements, e.g., certifications, awards].</p>
</div>
</main>

<footer>
<p>&copy; 2024 [Your Name]. All rights reserved.</p>
</footer>

</body>
</html>

48
C SS and Tables

Introduction to HTML Tables


Although using tables for layout is deprecated, it's part of the syllabus for
completeness. Most developers now use CSS (Cascading Style Sheets) for layout and
styling because it offers more control.

Basic Table Structure


A table is made up of three main HTML tags:

1. <table> – Starts the table.

2. <tr> – Defines a table row.

3. <td> – Defines table data or individual cells in the row.

Example:
<table width="800" border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>Row 1, Cell 4</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
<td>Row 2, Cell 4</td>
</tr>
</table>

• The width attribute sets the width to 800 pixels.


• The border attribute adds a 1-pixel border around the table so you can see it
clearly.

Table Rows and Data


• <tr> defines a row.

• <td> is the table data element. Each <tr> contains multiple <td> tags for the number
of cells in the row.

• Think of rows like in an Excel spreadsheet: they contain cells.

49
Aligning Data
• Use the align attribute in <td> to position your content:
o align="center"
o align="left"
o align="right"

• For vertical alignment, use valign in <tr>:


o valign="top"
o valign="middle"
o valign="bottom"

Practical Uses for Tables


Even though we don’t use tables for layout anymore, they still help with:

• Structuring data like spreadsheets.

• Placing elements in exact spots on a page.

You can also put almost anything inside a table cell:

• Images using the <img> tag.

• Clickable text using the <a> (anchor) tag.

A ctivity

Test your understanding of HTML tables:


1. What HTML tag is used to define a row in a table?
2. How can you center align text in a table cell?
3. Which attribute controls the width of the table?

50
Below is an example index.html file that will place a table on a page.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Web page title</TITLE>
<LINK rel="stylesheet" href="css/style.css">
</HEAD>
<BODY>
<DIV>
<TABLE border="1">
<!-- The CAPTION section is optional -->
<CAPTION>This is the title for the
table</CAPTION>
<!-- The THEAD section is optional -->
<THEAD>
<TR>
<TH>Column Head 1</TH>
<TH>Column Head 2</TH>
</TR>
</THEAD>
<!-- The TBODY section is COMPULSORY -->
<TBODY>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

This code above is indented so that you can clearly see the different HTML tags that
make up the table.

The table is inserted inside a set of <DIV> tags. This is not compulsory, but using a
container makes it easier for us to style the section of the display where the table is
located.

A <TABLE> tag is what initially creates the table. I have added the
optional border="1" attribute so that the table will draw a border around all of the cells
to make it easier for you to see what is going on.

51
You can give your table a title. This is optional. Use the <CAPTION> tag to add the
table title if you want one.

The next part of the table is the table header. This is also an optional section. To place a
header for your table you use the <THEAD> tags.

If you have used the optional <THEAD> tag, then there are another two HTML tags that
you need to include. You need to place a <TR> tag to create one row, and then you
need a set of <TH> tags to create a cell for each column. In the above example the
table has 2 columns, and therefore needs two sets of <TH> tags inside the <TR> tag.

The last part of the table is compulsory, and that is the table body tag <TBODY>.
In the example code above we are building a table that is 2 rows by 2 columns (not
counting the optional header row created above). So the first thing that you need inside
of the <TBODY> tag is a set of <TR> tags for each row. In the example above we need
two sets of <TR> tags, one for each data row.

Once the <TR> tags have been inserted, then it is required to add a set of table data
(cells) tags for each column. Use the <TD> tags for this task. In our example above the
table will have 2 rows of 2 columns for data, so we need two sets of <TD> tags inside
each <TR> tag.

Carefully study the structure of the code. While it may look very complicated, there is a
definite pattern to it that is easy to remember.

The above code will create the following (very bare and plain) table on the web page.
This is a snip from my Chrome browser.

Styling a table using HTML attributes

Many of the HTML attributes used to fine-tune/create the tables have been deprecated.

I will show you how to use the HTML attributes, and then I will also show you how to
use CSS properties (the most common way to do it nowadays).

52
Here is the code to show a table.
<TABLE border=”1” width=”50%” height=”400”>
<!—The CAPTION section is optional →
<CAPTION>This is the title for the table</CAPTION>
<!—The THEAD section is optional →
<THEAD>
<TR height=”100”>
<TH width=”300”>Column Head 1</TH>
<TH>Column Head 2</TH>
</TR>
</THEAD>
<!—The TBODY section is COMPULSORY →
<TBODY>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
</TR>
</TBODY>
</TABLE>

Lets investigate what these attributes do for us.

The <TABLE> tag has got three attributes included.

• The border="1" attribute will cause the browser to put a border around all the table
cells. The 1 means the border will be 1 pixel in thickness. You can use larger
numbers for a thicker border.

• The width="50%" attribute will cause the table to use 50% of the available screen
width. You can also specify the width in pixels, eg. width="500".

• The height="400" attribute will make the total height of the table be 400 pixels.

By setting these attributes in the <TABLE> tag these are the overall settings for the
entire table.

You should notice that these same attributes can also be set on individual <TR>, <TH>,
and <TD> tags as well.

If you set the width attribute to 500 for the <TABLE>, and then set the first <TH> tag
(column #1) to a width of 200, then column #2 will automatically be set to 300 (500-200)
even if you do not set anything. It makes sense when you think about it.

53
You do not need to set the width of every cell in a column. By setting the width of just
one cell in the column (usually the top one, but doesn't have to be) then all cells in that
column will be that width.

You also do not need to set the width of every column in a row. The ones you do set will
be that width, and the ones you don't will set themselves automatically.

Let us try CSS

The previous section showed you how to set some of the properties of the table by
using HTML attributes.

Now on this page you will see how to do exactly the same thing, but this time using the
more modern CSS styling method.

<TABLE class="table-width table-height">


<!-- The CAPTION section is optional -->
<CAPTION>This is the title for the table</CAPTION>
<!-- The THEAD section is optional -->
<THEAD>
<TR class="height100">
<TH class="width300">Column Head 1</TH>
<TH>Column Head 2</TH>
</TR>
</THEAD>
<!-- The TBODY section is COMPULSORY -->
<TBODY>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
</TR>
</TBODY>
</TABLE>

54
The following CSS code is in the style.css file.

table, th, td, caption {


border: 1px solid black;
border-collapse: collapse;
}
.table-width {
width: 50%;
}
.table-height {
height: 200px;
}
.height100 {
height: 40px;
}
.width30 {
width: 300px;
}

Lets investigate what is happening here.

In the style.css there is a CSS rule-set that is using HTML selectors to draw a 1 pixel
border (using a solid black line) around all <table>, <th>, <td>,
and <caption> containers. This means that a border is drawn around every cell in the
table. In addition, the border-collapse property is being used to make sure that only 1
border is drawn around everything. Remove this property and see what happens.

Also in the style.css file we have defined 4 classes that will set the values of various
properties.

Then, in the index.html file, we have included those classes at the appropriate places.

55
Using CSS to style other properties of a table
You have seen how to set a border, and the width and height of the table (or the rows or
columns) of the table.

Now, lets have a look at styling some other features of the table. Study the following
HTML code.

<DIV>
<TABLE class="table-settings">
<!-- The CAPTION section is optional -->
<CAPTION>This is the title for the table</CAPTION>
<!-- The THEAD section is optional -->
<THEAD>
<TR class="height100">
<TH class="width300">Column Head 1</TH>
<TH>Column Head 2</TH>
</TR>
</THEAD>
<!-- The TBODY section is COMPULSORY -->
<TBODY>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD class="redonblue textalignright">Row 2
Col 2</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

56
Study the following code from my style.css file.

table, th, td, caption {


border: 1px solid black;
#border-collapse: collapse;
}
.height100 {
height: 40px;
}
.width300 {
width: 300px;
}
.table-settings {
margin: auto;
width: 50%;
height: 200;
border-spacing: 20px;
}
th, td {
padding: 20px 30px 20px 30px;
}
.redonblue {
background-color: aqua;
color: red;
}
.textalignright {
text-align: right;
}

Lets investigate what is happening in this CSS code.

Notice, in the top piece of code dealing with the table HTML selectors that the border-
collapse property now has a # in front of it. This "comments" that line out, so that it is
no longer active. I want you to be able to see all of the borders for all of the cells for
when we configure spacing and padding.

There is a height100 class defined that can be used to style any container to have a
height of 100 pixels.

There is a width300 class defined that can be used to style any container to be 300
pixels wide.

There is a table-settings class defined that is configuring various properties.

The margin: auto will cause the entire table to be drawn in the middle of the DIV
container (ie. centre of the screen).

The width: 50% sets the table width to be 50% of the width of the display.

The height: 200px sets the table height to be 200 pixels.

57
The border-spacing: 20px forces each individual cell of the table to be spaced 20
pixels away from any cells in any direction.

When you do this for yourself you will see where the cell borders are drawn.

Then there is another piece of code for styling any TH and TD selectors. This
adds padding in each direction (top, right, bottom, and left). Padding is reserved space
that is INSIDE the cell between the cell borders and any content (text). This is different
to cell spacing (the spacing between cells themselves).

See the image of one cell below, which shows each property. Spacing is not shown, but
it is the space between adjacent cells.

Then there is another class called redonblue that will cause text to be written in red
colour on a light blue (aqua) background.

Lastly there is a class called textalignright that will align text to the right (right justified).

If you look at the HTML code at the top you will see where these classes have been
applied.

58
A ctivity

Complete the crossword puzzle.

59
C
1. <TABLE>
SS and Tables Glossary

Definition: The HTML tag used to create a table.


Example: <TABLE border="1" width="50%">

2. <CAPTION>
Definition: An optional HTML tag used to add a title or caption to a table.
Example: <CAPTION>This is the title for the table</CAPTION>

3. <THEAD>
Definition: The optional section of a table used to define the header row.
Example: <THEAD><TR><TH>Header 1</TH></TR></THEAD>

4. <TBODY>
Definition: The compulsory section of a table that contains the rows and columns of
data.
Example: <TBODY><TR><TD>Row 1 Col 1</TD></TR></TBODY>

5. <TR>
Definition: The HTML tag used to define a row in a table.
Example: <TR><TD>Row 1</TD><TD>Row 2</TD></TR>

6. <TH>
Definition: The HTML tag used to define a header cell in a table. It creates a bold,
centered header by default.
Example: <TH>Column Header</TH>

7. <TD>
Definition: The tag used for individual data cells in a table.
Example: <TD>Data 1</TD>

8. border-collapse
Definition: A CSS property that merges borders of adjacent table cells into a single
border.
Example: border-collapse: collapse;

9. border
Definition: An HTML attribute or CSS property that creates a border around table
cells or elements.
Example: border="1" or border: 1px solid black;

60
10. width
Definition: An HTML attribute or CSS property used to define the width of a table or
table cells.
Example: width="50%" or width: 300px;

11. height
Definition: An HTML attribute or CSS property used to define the height of a table or
table rows.
Example: height="400" or height: 200px;

12. margin
Definition: A CSS property used to control the space around elements. In tables, it
can center the table on the page.
Example: margin: auto;

13. padding
Definition: A CSS property used to define the space inside an element between its
border and content.
Example: padding: 20px;

14. border-spacing
Definition: The CSS property that sets the space between table cells.
Example: border-spacing: 20px;

15. redonblue
Definition: A custom CSS class that sets the background color to aqua and the text
color to red.
Example: .redonblue { background-color: aqua; color: red; }

16. textalignright
Definition: A custom CSS class used to align text to the right within a table cell.
Example: .textalignright { text-align: right; }

17. height100
Definition: A custom class that sets the height of a table row to 100 pixels.
Example: .height100 { height: 100px; }

18. CSS
Definition: Cascading Style Sheets, a language used to define the visual
appearance and formatting of HTML elements.
Example: <style> table { border: 1px solid black; } </style>

19. HTML
Definition: Hypertext Markup Language, the standard language used to create and
structure web pages.
Example: <html><head><title>Table Example</title></head><body></body></html>

61
A
1.
ctivities

Create a Webpage for a Café Menu using Tables


Objective:
Learners will create a basic webpage displaying a café menu using HTML tables and
CSS for styling.

Instructions:
1. Title:
The webpage should be titled "Sunny Café Menu".
2. Table Structure:
o Use the <TABLE>, <THEAD>, <TBODY>, <TR>, <TH>, and <TD> tags to
create a table with a header and body.
o The table should have 3 columns: Item Name, Description, and Price.
o The table should have at least 6 rows of menu items (2 for each section:
Breakfast, Lunch, and Drinks).
3. Styling:
o Use CSS to style the table.
o Set the width of the table to 80% of the page.
o Add a border around the table and the cells (use border-collapse to
merge borders).
o Use padding inside the table cells (padding property).
o The header row (<TH>) should have a different background color from the
rest of the table rows.
o Make the text in the Price column align to the right using CSS (text-align:
right).
4. Adding a Caption:
o Add a <CAPTION> at the top of the table with the text: "Sunny Café
Menu".
5. Section Labels:
o Create subsections for each part of the menu (Breakfast, Lunch, and
Drinks) using different background colors for each section by applying
custom CSS classes.

62
2.
Activity: Create a Webpage for a Sports Team Roster using Tables
Objective:
Learners will design a webpage that displays the roster of a fictional sports team using
HTML tables and CSS for styling.

Instructions:
1. Title:
The webpage should be titled "Team Thunder Roster".
2. Table Structure:
o Use the <TABLE>, <THEAD>, <TBODY>, <TR>, <TH>, and <TD> tags to
create a table.
o The table should have 4 columns: Player Name, Position, Number, and
Height.
o Include at least 8 rows of players.
3. Styling:
o Use CSS to style the table.
o Set the width of the table to 90% of the page.
o Add a border around the table and the cells (use border-collapse).
o Apply padding inside the table cells (padding property).
o The header row (<TH>) should have a distinct background color from the
rest of the table.
o Make the text in the Number column align to the center using CSS (text-
align: center).
o Add a hover effect to the table rows that changes the background color
when the mouse hovers over them.
4. Adding a Caption:
o Include a <CAPTION> at the top of the table with the text: "Team
Thunder Roster".
5. Position Highlighting:
o Use different background colors for players based on their positions (e.g.,
forwards, defenders, goalkeepers) by applying custom CSS classes.

63
P
1.
ossible Answers

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sunny Café Menu</title>
<style>
table {
width: 80%;
margin: auto;
border-collapse: collapse;
border: 2px solid #444;
}

th, td {
border: 1px solid #444;
padding: 10px;
}

th {
background-color: #f4b41a;
color: white;
}

.breakfast {
background-color: #ffe5b4;
}

.lunch {
background-color: #ffd700;
}

.drinks {
background-color: #f4a460;
}

.price {
text-align: right;
}

caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
64
}
</style>
</head>
<body>

<table>
<caption>Sunny Café Menu</caption>
<thead>
<tr>
<th>Item Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="breakfast">
<td>Pancakes</td>
<td>Fluffy pancakes with syrup</td>
<td class="price">$5.00</td>
</tr>
<tr class="breakfast">
<td>Scrambled Eggs</td>
<td>Served with toast and bacon</td>
<td class="price">$7.00</td>
</tr>
<tr class="lunch">
<td>Grilled Cheese</td>
<td>Cheddar cheese on toasted bread</td>
<td class="price">$6.00</td>
</tr>
<tr class="lunch">
<td>Burger</td>
<td>Beef burger with lettuce and tomato</td>
<td class="price">$9.00</td>
</tr>
<tr class="drinks">
<td>Latte</td>
<td>Coffee with steamed milk</td>
<td class="price">$4.00</td>
</tr>
<tr class="drinks">
<td>Smoothie</td>
<td>Fruit blend with yogurt</td>
<td class="price">$5.50</td>
</tr>
</tbody>
</table>

</body>
</html>

65
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Team Thunder Roster</title>
<style>
table {
width: 90%;
margin: auto;
border-collapse: collapse;
border: 2px solid #333;
}

th, td {
border: 1px solid #333;
padding: 10px;
}

th {
background-color: #007bff;
color: white;
}

.forward {
background-color: #d1e7dd;
}

.defender {
background-color: #ffeeba;
}

.goalkeeper {
background-color: #f8d7da;
}

.number {
text-align: center;
}

tr:hover {
background-color: #cce5ff;
}

caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;

66
}
</style>
</head>
<body>

<table>
<caption>Team Thunder Roster</caption>
<thead>
<tr>
<th>Player Name</th>
<th>Position</th>
<th>Number</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr class="forward">
<td>John Smith</td>
<td>Forward</td>
<td class="number">10</td>
<td>6'2"</td>
</tr>
<tr class="forward">
<td>Jane Doe</td>
<td>Forward</td>
<td class="number">11</td>
<td>5'9"</td>
</tr>
<tr class="defender">
<td>Mike Johnson</td>
<td>Defender</td>
<td class="number">5</td>
<td>6'0"</td>
</tr>
<tr class="defender">
<td>Emma Brown</td>
<td>Defender</td>
<td class="number">4</td>
<td>5'8"</td>
</tr>
<tr class="goalkeeper">
<td>Chris Green</td>
<td>Goalkeeper</td>
<td class="number">1</td>
<td>6'1"</td>
</tr>
<tr class="forward">
<td>Anna White</td>
<td>Forward</td>
<td class="number">7</td>
<td>5'7"</td>

67
</tr>
<tr class="defender">
<td>David Black</td>
<td>Defender</td>
<td class="number">3</td>
<td>5'10"</td>
</tr>
<tr class="goalkeeper">
<td>Rachel Blue</td>
<td>Goalkeeper</td>
<td class="number">12</td>
<td>6'3"</td>
</tr>
</tbody>
</table>

</body>
</html>

68

You might also like