Module 1: HTML5 — Lecture Notes Web Technologies

LECTURE NOTES

Web Technologies
Module 1: HTML5

Structuring, Styling, and Enriching Web Pages with HTML5 and CSS

Prepared for classroom instruction — B.E./[Link], Information Technology

Faculty of Computer Science & Technology

Instructor: ______________________________
Academic Year: __________

Page 1 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Table of Contents
Table of Contents.......................................................................................................................................................... 2
Module 1: HTML5 — Overview...................................................................................................................................... 5
Learning Objectives................................................................................................................................................... 5
Suggested Session Plan ............................................................................................................................................. 5
1. Introduction to HTML5 .............................................................................................................................................. 6
1.1 What Is HTML?.................................................................................................................................................... 6
1.2 Understanding HTML Tags................................................................................................................................... 6
1.3 Setting Up the Document Structure ..................................................................................................................... 6
Specifying the Document Type .............................................................................................................................. 6
Creating the HTML Skeleton ................................................................................................................................. 6
Specifying a Page Title .......................................................................................................................................... 6
1.4 Formatting Text by Using Tags ............................................................................................................................. 7
Creating Headings................................................................................................................................................. 7
Applying Bold and Italic Formatting....................................................................................................................... 7
Applying Superscript and Subscript Formatting ..................................................................................................... 7
Using Monospace and Preformatted Text ............................................................................................................. 7
1.5 Using Lists and Backgrounds................................................................................................................................ 7
Creating Bulleted and Numbered Lists .................................................................................................................. 7
Creating Definition Lists ........................................................................................................................................ 7
Inserting Special Characters .................................................................................................................................. 8
Inserting Horizontal Lines ..................................................................................................................................... 8
Choosing Background and Foreground Colors ....................................................................................................... 8
1.6 Creating Hyperlinks and Anchors ......................................................................................................................... 8
Hyperlinking to a Web Page .................................................................................................................................. 8
Creating a Hyperlink to an E-Mail Address ............................................................................................................. 8
Hyperlinking to Other Content .............................................................................................................................. 8
2. Style Sheets and Graphics........................................................................................................................................ 10
2.1 Introduction to Style Sheets .............................................................................................................................. 10
Understanding Styles .......................................................................................................................................... 10
Constructing Style Rules ..................................................................................................................................... 10
Creating Styles for Nested Tags ........................................................................................................................... 10
Applying Styles to Hyperlinks .............................................................................................................................. 10
Creating and Linking to External Style Sheets ...................................................................................................... 10
2.2 Formatting Text by Using Style Sheets ............................................................................................................... 11
Specifying a Font Family...................................................................................................................................... 11
Specifying a Font Size and Color .......................................................................................................................... 11
Applying Bold and Italics, Strikethrough and Underlining..................................................................................... 11
Creating Inline Spans .......................................................................................................................................... 11
Adjusting Spacing Between Letters ..................................................................................................................... 11
2.3 Formatting Paragraphs by Using Style Sheets .................................................................................................... 11
Indenting Paragraphs.......................................................................................................................................... 11
Applying a Border to a Paragraph........................................................................................................................ 11
Page 2 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Specifying the Horizontal Alignment of a Paragraph ............................................................................................ 12
2.4 Displaying Graphics ........................................................................................................................................... 12
Selecting a Graphics Format................................................................................................................................ 12
Preparing Graphics for Web Use ......................................................................................................................... 12
Inserting Graphics............................................................................................................................................... 12
Arranging Elements on the Page ......................................................................................................................... 12
Controlling Image Size and Padding..................................................................................................................... 12
Hyperlinking from Graphics................................................................................................................................. 12
Using Thumbnail Graphics .................................................................................................................................. 12
Including Alternate Text for Graphics .................................................................................................................. 12
Adding Figure Captions ....................................................................................................................................... 12
3. Page Layout and Navigation .................................................................................................................................... 13
3.1 Creating Navigational Aids................................................................................................................................. 13
Creating a Text-Based Navigation Bar.................................................................................................................. 13
Creating a Graphical Navigation Bar .................................................................................................................... 13
3.2 Creating Tables ................................................................................................................................................. 14
Specifying the Size of a Table .............................................................................................................................. 14
Specifying the Width of a Column ....................................................................................................................... 14
Merging Table Cells ............................................................................................................................................ 14
3.3 Formatting Tables ............................................................................................................................................. 15
Applying Table Borders — Using Attributes ......................................................................................................... 15
Applying Borders by Using Styles ........................................................................................................................ 15
Changing Cell Padding, Spacing, and Alignment................................................................................................... 15
Setting Horizontal and Vertical Alignment ........................................................................................................... 15
4. Creating User Forms ................................................................................................................................................ 16
4.1 Creating a Basic Form ........................................................................................................................................ 16
4.2 Creating a Text Box ........................................................................................................................................... 16
4.3 Special Field Types for E-Mail and Web Addresses ............................................................................................. 16
4.4 Creating a Text Area .......................................................................................................................................... 16
4.5 Creating a Submit or Clear Button ..................................................................................................................... 16
4.6 Creating Check Boxes and Option Buttons ......................................................................................................... 16
Check Boxes (multiple selections allowed) .......................................................................................................... 16
Option (Radio) Buttons (single selection from a group) ....................................................................................... 17
4.7 Additional Input Types in HTML5 ....................................................................................................................... 17
5. Incorporating Sound and Video ............................................................................................................................... 18
5.1 What's New with Audio and Video in HTML5? ................................................................................................... 18
5.2 Embedding Video Clips ...................................................................................................................................... 18
Introducing the <video> Tag ............................................................................................................................... 18
The <embed> Tag: Your Fallback Plan ................................................................................................................. 18
Placing a Video Clip on a Web Page ..................................................................................................................... 18
5.3 Playing Audio with the <audio> Tag ................................................................................................................... 18
Placing an Audio Clip on a Web Page................................................................................................................... 18
Module Summary ....................................................................................................................................................... 19

Page 3 of 19
Module 1: HTML5 — Lecture Notes Web Technologies

Page 4 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Module 1: HTML5 — Overview
This module builds the foundation for all web development work that follows: the structure, semantics, and formatting
capabilities of HTML5, styling with CSS, tabular and navigational page layout, interactive forms, and native audio/video
embedding. Mastery of this module is a prerequisite for meaningful work with JavaScript, PHP, or any CMS platform (including
WordPress, covered in Module 2).

Learning Objectives
On completion of this module, students will be able to:
● Explain what HTML is and describe the correct structure of an HTML5 document
● Apply HTML tags to format text, including headings, emphasis, superscript/subscript, and preformatted text
● Construct ordered, unordered, and definition lists, and insert special characters and horizontal rules
● Create hyperlinks to web pages, email addresses, and other content types, using absolute and relative referencing
● Explain the purpose of CSS and write style rules, including selectors for nested and linked elements
● Apply CSS properties to format text (font, size, colour, decoration) and paragraphs (indentation, borders, alignment)
● Prepare and insert graphics correctly, including alternate text, captions, and image-based hyperlinks
● Build navigational aids and multi-row/column tables, and format them using both attributes and CSS
● Design and build HTML forms using appropriate input types, including HTML5-specific field types
● Embed audio and video content natively using the <video>, <audio>, and <embed> elements

Suggested Session Plan

Session Topics Suggested Duration
1 What is HTML? Document structure: DOCTYPE, html, head, title 1.5 hours
2 Formatting text: headings, bold/italic, superscript/subscript, monospace/pre 1.5 hours
3 Lists, special characters, horizontal lines, background/foreground colours 1.5 hours
4 Hyperlinks and anchors: web pages, email links, other content 1 hour
5 Introduction to Style Sheets: syntax, selectors, nested tags, external stylesheets 2 hours
6 Formatting text with CSS: font, size, colour, decoration, spans, spacing 1.5 hours
7 Formatting paragraphs with CSS: indentation, borders, alignment 1 hour
8 Displaying graphics: formats, insertion, sizing, alt text, captions (with lab) 1.5 hours
9 Page layout and navigation: nav bars, creating tables 1.5 hours
10 Formatting tables: borders, padding, spacing, alignment (with lab) 1.5 hours
11 Creating user forms: text boxes, textareas, buttons, checkboxes, radio buttons 2 hours
12 HTML5 input types; incorporating audio and video (with lab) 2 hours
13 Module review and consolidated lab exercise 1.5 hours

Page 5 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
1. Introduction to HTML5

1.1 What Is HTML?

HTML (HyperText Markup Language) is the standard markup language used to structure content on the web. It is not a
programming language — it has no logic, loops, or variables — but a markup language that describes the meaning and structure
of content using elements (tags). A web browser reads HTML and renders it as a visual page.
HTML5 is the fifth major revision of HTML, introducing new semantic elements (such as <header>, <footer>, <article>, <section>,
<nav>), native audio/video support, new form input types, and APIs for canvas drawing, offline storage, and geolocation —
reducing the historical reliance on third-party plugins like Flash for rich media.

1.2 Understanding HTML Tags

An HTML element typically consists of an opening tag, content, and a closing tag: <p>This is a paragraph.</p>. Tags are enclosed
in angle brackets, and closing tags include a forward slash. Some elements are self-closing/void, such as <br> or <img>, since
they carry no inner content.
Key terminology to establish clearly with students:
● Element — the tag plus its content, e.g. <p>Text</p>
● Attribute — extra information added inside the opening tag, e.g. <img src="[Link]" alt="A photo">
● Nesting — placing one element inside another; nested tags must close in the reverse order they were opened
<!-- Correct nesting -->
<p>This is <strong>important</strong> text.</p>

<!-- Incorrect nesting (avoid) -->

<p>This is <strong>important</p></strong>

1.3 Setting Up the Document Structure

Specifying the Document Type
Every HTML5 document begins with a DOCTYPE declaration, which tells the browser to render the page in standards mode using
HTML5 rules. Unlike earlier HTML versions, the HTML5 doctype is deliberately simple:
<!DOCTYPE html>

Creating the HTML Skeleton

A minimal, complete HTML5 document has the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is my first web page.</p>
</body>
</html>

Instructors should point out each part's role:

● <html> — the root element wrapping the entire document; the lang attribute aids accessibility and search engines
● <head> — contains meta-information not displayed directly on the page (title, character encoding, linked
stylesheets/scripts)
● <meta charset="UTF-8"> — declares the character encoding, ensuring special characters display correctly
● <title> — sets the text shown in the browser tab and used as the default bookmark name
● <body> — contains all visible page content

Specifying a Page Title

Page 6 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
The <title> element is placed inside <head> and should be descriptive and unique per page — it is also the text most commonly
shown in search engine results, making it relevant to both usability and SEO.

1.4 Formatting Text by Using Tags

Creating Headings
HTML provides six levels of headings, <h1> through <h6>, in decreasing order of importance/size. Good practice — worth
emphasizing — is to use exactly one <h1> per page (typically the main title) and to not skip heading levels purely for visual sizing,
since headings convey document structure to assistive technologies and search engines, not just visual size.
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>

Applying Bold and Italic Formatting

Tag Effect Semantic Meaning
<b> Bold text visually No extra meaning implied — purely visual
<strong> Bold text visually Indicates strong importance
<i> Italic text visually No extra meaning implied — purely visual
<em> Italic text visually Indicates emphasis (changes meaning of the sentence)
Instructors should highlight that <strong> and <em> are preferred in modern HTML5 practice because they carry semantic
meaning, whereas <b> and <i> are purely presentational.

Applying Superscript and Subscript Formatting

<p>E = mc²</p>
<p>H₂O is the chemical formula for water.</p>

Using Monospace and Preformatted Text

The <code> element marks up inline snippets of code in a monospace font, while <pre> preserves whitespace and line breaks
exactly as typed — essential for displaying code blocks or ASCII-formatted text.
<p>Use the <code>print()</code> function to display output.</p>

<pre>
function greet() {
[Link]("Hello, World!");
}
</pre>

1.5 Using Lists and Backgrounds

Creating Bulleted and Numbered Lists
<!-- Unordered (bulleted) list -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<!-- Ordered (numbered) list -->

<ol>
<li>Plan the page structure</li>
<li>Write the HTML</li>
<li>Style with CSS</li>
</ol>

Creating Definition Lists

A definition list pairs terms with their descriptions using <dl> (definition list), <dt> (definition term), and <dd> (definition
description):
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — used to structure web content.</dd>
Page 7 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
<dt>CSS</dt>
<dd>Cascading Style Sheets — used to style web content.</dd>
</dl>

Inserting Special Characters

Certain characters have special meaning in HTML (e.g. < and >) and must be represented using character entities to display
correctly:
Character Entity Name Entity Number
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
Non-breaking space &nbsp; &#160;
© &copy; &#169;

Inserting Horizontal Lines

The <hr> element inserts a thematic break, typically rendered as a horizontal line, used to visually separate sections of content:
<p>Section One content...</p>
<hr>
<p>Section Two content...</p>

Choosing Background and Foreground Colors

While background/text colour can be set with the deprecated bgcolor and text HTML attributes, modern practice uses CSS
instead (covered fully in Section 2). It is worth showing students both approaches briefly, explicitly noting that the attribute-
based approach is legacy and should not be used in new code:
<!-- Legacy approach (avoid in new projects) -->
<body bgcolor="#f0f0f0" text="#333333">

<!-- Modern approach: CSS -->

<body style="background-color: #f0f0f0; color: #333333;">

1.6 Creating Hyperlinks and Anchors

Hyperlinks are created with the <a> (anchor) element and its href attribute, which specifies the destination.

Hyperlinking to a Web Page

<!-- Absolute URL: links to an external site -->
<a href="[Link] [Link]</a>

<!-- Relative URL: links to another page within the same site -->
<a href="[Link]">About Us</a>

Creating a Hyperlink to an E-Mail Address

<a href="[Link] Us</a>

<!-- With a pre-filled subject line -->

<a href="[Link] Us</a>

Hyperlinking to Other Content

Links can also point to specific locations within the same page (using id attributes as anchor targets), or to non-HTML resources
such as PDFs or downloadable files:
<!-- Jump link to a section further down the same page -->
<a href="#contact-section">Jump to Contact Section</a>
...
<h2 id="contact-section">Contact Us</h2>

<!-- Link to a downloadable file -->

<a href="[Link]">Download our Brochure (PDF)</a>

KEY TERMS
Element An HTML tag together with its content, e.g. <p>Text</p>.

Page 8 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Attribute Additional information supplied inside an opening tag, e.g. href or src.
Semantic HTML Markup chosen for its meaning (e.g. <strong>, <em>) rather than purely for visual appearance.
Character entity A reserved code (e.g. &lt;) used to display a character that would otherwise be interpreted as
markup.
Anchor The <a> element, used to create hyperlinks to other pages, resources, or locations within the
same page.

Review Questions — Section 1

1. Explain the difference between <b> and <strong>, and between <i> and <em>. Why does this distinction matter in HTML5?
2. Write the minimal skeleton of a valid HTML5 document, labelling the purpose of each major element.
3. What is a character entity, and why is &lt; needed instead of typing < directly in page content?
4. Differentiate an absolute URL from a relative URL, giving an example of each.
5. Write the HTML needed to create a mailto link that pre-fills the subject line as 'Feedback'.

Page 9 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
2. Style Sheets and Graphics

2.1 Introduction to Style Sheets

Understanding Styles
CSS (Cascading Style Sheets) controls the visual presentation of HTML content — colour, spacing, typography, layout — while
HTML remains responsible only for structure and meaning. This separation of concerns mirrors the theme/content separation
discussed in the WordPress module, and is one of the most important ideas to reinforce: the same HTML can look completely
different depending on which stylesheet is applied to it.

Constructing Style Rules

A CSS rule consists of a selector (what to style) and a declaration block (how to style it), containing one or more property: value;
pairs:
selector {
property: value;
property: value;
}

/* Example */
p {
color: navy;
font-size: 16px;
}

Three ways to apply CSS, from least to most maintainable:

Method Syntax Location Notes
Inline style attribute on the element itself Highest specificity; hardest to maintain; avoid for
large sites
Internal <style> block inside <head> Useful for single-page styling or quick demos
External Separate .css file linked via <link> Best practice — reusable across many pages,
cached by the browser

Creating Styles for Nested Tags

Descendant selectors allow styling of elements based on their ancestors, which is essential once pages become more complex:
/* Styles only <a> elements found inside <nav> */
nav a {
color: white;
text-decoration: none;
}

/* Styles only <li> elements that are direct children of .menu */

.menu > li {
display: inline-block;
}

Applying Styles to Hyperlinks

Links support special pseudo-classes representing different states, which should always be introduced together and,
conventionally, in this order (often remembered by the mnemonic "LoVe/HAte"):
a:link { color: blue; } /* Unvisited link */
a:visited { color: purple; } /* Visited link */
a:hover { color: red; } /* Mouse is over the link */
a:active { color: orange; } /* Link is being clicked */

Creating and Linking to External Style Sheets

An external stylesheet is a plain .css file linked from the HTML <head>:
<!-- Inside the HTML <head> -->
<link rel="stylesheet" href="[Link]">

/* [Link] */
body {
Page 10 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
font-family: Arial, sans-serif;
margin: 0;
}

2.2 Formatting Text by Using Style Sheets

Specifying a Font Family
The font-family property accepts a comma-separated fallback list, since not every font is guaranteed to be installed on every
device — the browser tries each in order until one is available:
p {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

Specifying a Font Size and Color

h1 {
font-size: 32px;
color: #1F4E79;
}

Instructors should briefly compare units: px (fixed pixels), em (relative to the parent element's font size), and rem (relative to
the root element's font size) — rem is generally recommended for scalable, accessible typography.

Applying Bold and Italics, Strikethrough and Underlining

strong-text {
font-weight: bold;
font-style: italic;
}

.old-price {
text-decoration: line-through;
}

.highlight {
text-decoration: underline;
}

Creating Inline Spans

The <span> element applies styling to a portion of text without introducing a line break or block-level structural meaning —
useful for styling a word or phrase within a larger paragraph:
<p>This offer is <span class="highlight">valid today only</span>.</p>

Adjusting Spacing Between Letters

h1 {
letter-spacing: 2px;
}

p {
line-height: 1.6;
word-spacing: 3px;
}

2.3 Formatting Paragraphs by Using Style Sheets

Indenting Paragraphs
p {
text-indent: 40px;
}

Applying a Border to a Paragraph

[Link] {
border: 1px solid #cccccc;
Page 11 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
padding: 10px;
}

Specifying the Horizontal Alignment of a Paragraph

[Link]-text { text-align: center; }
[Link]-text { text-align: right; }
[Link]-text { text-align: justify; }

2.4 Displaying Graphics

Selecting a Graphics Format
Format Best For Notes
JPEG Photographs Lossy compression; smaller file sizes; no transparency
PNG Logos, graphics with transparency Lossless compression; supports transparency
GIF Simple animations Limited to 256 colours
SVG Icons, logos, illustrations Vector format; scales without quality loss
WebP General web use Modern format with strong compression, wide browser
support

Preparing Graphics for Web Use

Before uploading, images should be sized to their intended display dimensions and compressed to balance visual quality against
file size — oversized, uncompressed images are one of the most common causes of slow-loading pages.

Inserting Graphics
<img src="[Link]" alt="Our team at the 2026 conference" width="600" height="400">

Arranging Elements on the Page

The float property (or, in modern layouts, Flexbox/Grid) allows text to wrap around an image:

[Link]-left {
float: left;
margin-right: 15px;
}

Controlling Image Size and Padding

img {
width: 300px;
height: auto; /* preserves aspect ratio */
padding: 8px;
}

Hyperlinking from Graphics

<a href="[Link]
<img src="[Link]" alt="Example Company logo">
</a>

Using Thumbnail Graphics

A thumbnail is a small preview image that links to a larger version — commonly implemented by displaying a small <img>
wrapped in an <a> pointing to the full-size file, or opened via a JavaScript lightbox for a smoother experience.

Including Alternate Text for Graphics

The alt attribute is not optional in practice: it is read aloud by screen readers, displayed if the image fails to load, and used by
search engines to understand image content. Alt text should be concise and descriptive of the image's purpose or content, not
simply the filename.

Adding Figure Captions

HTML5 introduces <figure> and <figcaption> to semantically associate an image with its caption:

Page 12 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
<figure>
<img src="[Link]" alt="Bar chart showing quarterly sales growth">
<figcaption>Fig. 1 — Quarterly sales growth, 2025–2026</figcaption>
</figure>

KEY TERMS
Selector The part of a CSS rule identifying which HTML element(s) the rule applies to.
Pseudo-class A CSS keyword (e.g. :hover) that selects an element based on a state or interaction, not just its
position in the markup.
External stylesheet A separate .css file linked to one or more HTML pages, enabling shared, reusable, cacheable
styling.
Alt text A textual description of an image's content or purpose, used for accessibility, fallback display,
and SEO.
Vector graphic An image described mathematically (e.g. SVG) rather than as a fixed grid of pixels, allowing
scaling without quality loss.

Review Questions — Section 2

1. List the three ways CSS can be applied to HTML and explain why external stylesheets are generally preferred.
2. Write CSS rules for all four link pseudo-classes in the correct conventional order, and explain why order matters here.
3. What is the difference between em and rem as CSS units?
4. Why is the alt attribute considered essential rather than optional on <img> elements?
5. Write the HTML5 markup needed to display an image with a captioned label using semantic elements.
3. Page Layout and Navigation

3.1 Creating Navigational Aids

Navigation allows visitors to move between pages or sections of a site. HTML5 provides the semantic <nav> element specifically
to wrap primary navigation blocks, which helps both assistive technologies and search engines identify the site's navigation
structure.

Creating a Text-Based Navigation Bar

<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

/* CSS to display the list horizontally as a nav bar */

nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #1F4E79;
font-weight: bold;
}

Creating a Graphical Navigation Bar

A graphical navigation bar replaces or supplements text links with icons or styled buttons, typically achieved by placing images
inside the anchor tags or by using CSS to style plain links as button-like elements:
<nav>
<a href="[Link]"><img src="icons/[Link]" alt="Home"></a>
<a href="[Link]"><img src="icons/[Link]" alt="About"></a>
</nav>
Page 13 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Emphasize to students that alt text remains mandatory even on purely navigational/icon images, since screen reader users rely
on it to understand where each link leads.

3.2 Creating Tables

Tables are used for displaying genuinely tabular data (schedules, comparisons, pricing) — not, in modern practice, for overall
page layout, which is instead handled with CSS. The core structural elements are:
Tag Purpose
<table> The container for the entire table
<tr> A table row
<th> A header cell (bold, centered by default)
<td> A standard data cell
<thead>, <tbody>, <tfoot> Group rows into header, body, and footer sections for semantics and styling
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Asha Kulkarni</td>
<td>Developer</td>
<td>IT</td>
</tr>
<tr>
<td>Rohan Mehta</td>
<td>Designer</td>
<td>Creative</td>
</tr>
</tbody>
</table>

Specifying the Size of a Table

table {
width: 100%;
max-width: 600px;
}

Specifying the Width of a Column

Column width is typically set on the header or first-row cells, and applies to the entire column:
th:first-child, td:first-child {
width: 40%;
}

Merging Table Cells

The colspan attribute merges cells horizontally across columns, and rowspan merges cells vertically across rows:
<table>
<tr>
<th colspan="2">Contact Information</th>
</tr>
<tr>
<td>Email</td>
<td>contact@[Link]</td>
</tr>
<tr>
<td rowspan="2">Phone</td>
<td>+91-98765-43210 (Office)</td>
</tr>
<tr>
<td>+91-91234-56789 (Mobile)</td>

Page 14 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
</tr>
</table>

3.3 Formatting Tables

Applying Table Borders — Using Attributes
The legacy border attribute is still functional but discouraged in new code; it is worth showing briefly for context, since students
may encounter it in older codebases:
<table border="1">
...
</table>

Applying Borders by Using Styles

table, th, td {
border: 1px solid #999999;
border-collapse: collapse; /* merges double borders into a single line */
}

Changing Cell Padding, Spacing, and Alignment

th, td {
padding: 10px; /* space inside each cell, between border and content */
text-align: left; /* horizontal alignment */
vertical-align: middle;/* vertical alignment */
}

table {
border-spacing: 4px; /* space between adjacent cells (ignored if border-collapse: collapse) */
}

Setting Horizontal and Vertical Alignment

text-align controls horizontal alignment of content within a cell (left, center, right, justify); vertical-align controls vertical position
(top, middle, bottom) — both should be demonstrated together since students frequently confuse the two properties.
KEY TERMS
<nav> An HTML5 semantic element used to wrap a block of primary navigation links.
colspan / rowspan Table cell attributes that merge a cell across multiple columns or rows respectively.
border-collapse A CSS property that merges adjacent table cell borders into a single line rather than showing
doubled borders.
Cell padding The space between a table cell's border and its content.
Cell spacing The space between adjacent table cells (only visible when borders are not collapsed).

Review Questions — Section 3

1. Why is the <nav> element preferred over a plain <div> for a site's navigation bar?
2. Write the HTML for a 3-row, 2-column table where the header cell in the first row spans both columns.
3. Explain the difference between cell padding and cell spacing, and state which one border-collapse: collapse affects.
4. Should HTML tables be used for overall page layout in modern web development? Justify your answer.
5. Differentiate text-align and vertical-align as applied to a table cell.

Page 15 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
4. Creating User Forms

4.1 Creating a Basic Form

Forms allow users to submit data to a server. The <form> element wraps all input controls and specifies where and how the data
should be sent:
<form action="/submit-form" method="POST">
<!-- form fields go here -->
</form>

Attribute Purpose
action The URL the form data is sent to
method GET (data visible in URL, for non-sensitive queries) or POST (data sent in the request body, for
most form submissions)

4.2 Creating a Text Box

<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder="Enter your name" required>

The <label> element, correctly linked via the matching for/id pair, is essential for accessibility — it increases the clickable area
and allows screen readers to announce the field's purpose.

4.3 Special Field Types for E-Mail and Web Addresses

HTML5 introduced input types that provide built-in validation and, on mobile devices, an appropriately optimized on-screen
keyboard:
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<label for="website">Website:</label>
<input type="url" id="website" name="website">

4.4 Creating a Text Area

For multi-line input (e.g. comments or messages), <textarea> is used instead of <input>:
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

4.5 Creating a Submit or Clear Button

<button type="submit">Submit</button>
<button type="reset">Clear Form</button>

Instructors should note that <button> is generally preferred over <input type="submit">/<input type="reset"> in modern
practice, since <button> can contain richer content (icons, styled text) while functioning identically.

4.6 Creating Check Boxes and Option Buttons

Check Boxes (multiple selections allowed)
<p>Select your interests:</p>
<input type="checkbox" id="web" name="interests" value="web">
<label for="web">Web Development</label><br>
<input type="checkbox" id="design" name="interests" value="design">
<label for="design">Design</label>

Page 16 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Option (Radio) Buttons (single selection from a group)
<p>Preferred contact method:</p>
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">Email</label><br>
<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">Phone</label>

A common point of confusion worth addressing directly: radio buttons belonging to the same group must share the same name
attribute so that selecting one deselects the others; checkboxes do not share this constraint since multiple selections are
expected.

4.7 Additional Input Types in HTML5

Input Type Purpose
date A date picker control
number Numeric input, often with a spinner control and min/max validation
range A slider control between a minimum and maximum value
color A native colour-picker control
tel Telephone number input (mobile keyboards show a numeric/phone layout)
search A search field, often styled with a clear ("×") button by the browser
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">

KEY TERMS
Form An HTML element used to collect user input and submit it to a server.
Label An HTML element associated with a form control, improving accessibility and click target size.
Placeholder Hint text shown inside an input field before the user types, disappearing on input.
Client-side validation Validation performed by the browser (e.g. required, type="email") before data is sent to the
server.

Review Questions — Section 4

1. Explain the difference between the GET and POST form methods, and give an appropriate use case for each.
2. Why must radio buttons in the same group share an identical name attribute, while checkboxes do not need to?
3. Write the HTML for a labeled email input field that is required and shows placeholder text 'you@[Link]'.
4. List three HTML5 input types introduced beyond the basic text/password/checkbox/radio set, and describe what each is used
for.
5. Why is a properly linked <label> considered important for accessibility, beyond simply displaying descriptive text?

Page 17 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
5. Incorporating Sound and Video

5.1 What's New with Audio and Video in HTML5?

Prior to HTML5, embedding audio and video required third-party browser plugins (most commonly Adobe Flash), which created
compatibility, security, and accessibility problems. HTML5 introduced the native <audio> and <video> elements, allowing
browsers to play media directly without any plugin, along with a JavaScript API for building custom playback controls.

5.2 Embedding Video Clips

Introducing the <video> Tag
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

Commonly used attributes to walk through with students:

Attribute Effect
controls Displays the browser's built-in play/pause/volume/seek controls
autoplay Begins playback automatically (browsers generally require muted for this to work without user
interaction)
loop Replays the video automatically once it ends
muted Starts the video with sound muted
poster Specifies an image shown before playback begins
Providing multiple <source> elements with different formats/codecs allows the browser to choose whichever it supports, since
not all browsers support every video codec.

The <embed> Tag: Your Fallback Plan

The generic <embed> element can embed external content/plugins and is sometimes used as a fallback for older browsers or
non-standard media types, though for standard audio/video in modern development, <video> and <audio> are strongly
preferred:
<embed src="movie.mp4" width="640" height="360">

Placing a Video Clip on a Web Page

Beyond the basic tag, instructors should demonstrate responsive sizing, since a fixed pixel width/height will not adapt well to
different screen sizes:
video {
max-width: 100%;
height: auto;
}

5.3 Playing Audio with the <audio> Tag

Placing an Audio Clip on a Web Page
<audio controls>
<source src="podcast-episode.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>

The <audio> element supports the same controls, autoplay, loop, and muted attributes as <video>. As with video, offering
multiple source formats maximizes cross-browser compatibility.
KEY TERMS
Codec A method of encoding/decoding digital audio or video data (e.g. H.264, VP9, MP3, AAC).
<source> A child element of <video>/<audio> offering an alternative file format for the browser to
choose from.
Poster frame A static image displayed in place of a video before playback begins.

Page 18 of 19
Module 1: HTML5 — Lecture Notes Web Technologies
Fallback content Content placed between opening and closing media tags, shown only if the browser cannot
play any provided source.

Review Questions — Section 5

1. Why did HTML5's native <video> and <audio> elements represent a significant improvement over the previous plugin-based
approach?
2. Write HTML to embed a video with playback controls that offers both an MP4 and a WebM source.
3. What is the purpose of the poster attribute on a <video> element?
4. Under what circumstances might autoplay fail to start video playback, and what attribute is commonly required alongside it to
work reliably in modern browsers?
5. Explain the purpose of the fallback text placed between the opening and closing <video> tags.

Module Summary:
This module built a complete foundation in HTML5: document structure and semantic tagging; text formatting both through tags
and CSS; lists, special characters, and hyperlinks; the separation of content (HTML) from presentation (CSS) via style rules,
selectors, and external stylesheets; correct handling of images including accessibility considerations; page layout through
navigation bars and tables; and interactive forms and native audio/video embedding without reliance on third-party plugins.
Instructors are strongly encouraged to pair each section with a short hands-on lab — particularly forms and tables, which are
best absorbed through direct construction and troubleshooting of markup rather than lecture alone. A cumulative lab exercise
(e.g. building a simple multi-page personal portfolio site using every element covered in this module) is an effective capstone
activity before moving to Module 2.

Page 19 of 19