Scribd
Upload
4 views15 pages

HTML5 Web Development Student Workbook

This workbook is designed for Grade 8 students to learn HTML5 and CSS3 for web development. It covers key concepts, tasks, and practice exercises related to HTML elements, formatting, lists, images, multimedia, tables, hyperlinks, forms, and CSS styling techniques. The final project involves creating a styled website that incorporates all learned skills.

Uploaded by

wesleywenceslaus07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views15 pages

HTML5 Web Development Student Workbook

This workbook is designed for Grade 8 students to learn HTML5 and CSS3 for web development. It covers key concepts, tasks, and practice exercises related to HTML elements, formatting, lists, images, multimedia, tables, hyperlinks, forms, and CSS styling techniques. The final project involves creating a styled website that incorporates all learned skills.

Uploaded by

wesleywenceslaus07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML5 Web Development Student

Workbook (Grade 8)

Course Introduction
Welcome to your HTML5 Web Development Workbook! This workbook will guide you
through the basics of building websites using HTML5. Each lesson includes explanations,
examples, and space for you to practice. Let’s begin your journey into web development!

Introduction to HTML5
Key Concepts

 HTML5: Latest version of HTML used to structure web pages.


 Element: HTML tags and content. E.g., <p>Hello</p>
 Tag: Keywords wrapped in < >. E.g., <h1>
 Attribute: Extra information about an element. E.g., src, alt

Tasks

 Create a folder for your website project in Visual Studio Code.


 Inside the folder, create a new file named index.html.
 Type ! and press Enter for code autogeneration.

Practice
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, HTML5!</h1>
</body>
</html>

Write your own code in the editor


Content and Character Formatting
Key Concepts

 Headings: <h1> to <h6>


 Paragraphs: <p>
 Line Breaks: <br>
 Horizontal Rule: <hr>
 Formatting: <b>, <i>, <u>, <sup>, <sub>
 Special Characters: &copy;, &lt;, &gt;, &amp;

Practice
<h1>Main Heading</h1>
<p>This is a paragraph.<br>With a line break.</p>
<hr>
<p>Water is H<sub>2</sub>O and 2<sup>3</sup> = 8</p>
<p>&copy; 2025</p>

Try it yourself:

Lists
Key Concepts

 Ordered List: <ol>


 Unordered List: <ul>
 Nested Lists: A list inside a list

Practice
<ul>
<li>Fruits
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
</li>
</ul>

Create your own list:


Images and Multimedia
Key Concepts

 Image: <img src="" alt="">


 Audio: <audio controls>
 Video: <video controls>
 YouTube Embed: <iframe>

Practice
<img src="cat.jpg" alt="A cat" width="200">
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>

Insert your own media code:

Tables
Key Concepts

 <table>, <tr>, <th>, <td>


 Merging cells: colspan, rowspan

Practice
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>12</td>
</tr>
</table>

Try creating your own table:


Hyperlinks
Key Concepts

 Internal Link: <a href="about.html">About</a>


 External Link: <a href="https://www.google.com">Google</a>
 Anchor Link: <a href="#section">Go to Section</a>

Practice
<a href="page2.html">Go to Page 2</a>
<a href="https://www.example.com" target="_blank">External Site</a>

Create your own hyperlinks:

Forms
Key Concepts

 <form>: Starts a form


 Inputs: <input type="text">, <input type="email">, <textarea>
 Submit Button: <input type="submit">
 Labels: <label>

Practice
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>

<label>Email:</label>
<input type="email" name="email"><br>

<textarea name="message">Enter message</textarea><br>


<input type="submit" value="Send">
</form>

Design your own form:


Introduction to CSS3
What is CSS?
CSS stands for Cascading Style Sheets. It's used to control the
look and layout of HTML elements on a webpage. While
HTML gives structure (like building walls), CSS gives style
(like painting the walls and arranging furniture).
Types of CSS:
1. Inline CSS – Style is written directly inside the HTML
element.
<p style="color: red;">This is red text.</p>
2. Internal CSS – Written inside a <style> tag within the
HTML file’s <head> section.
<style>
p { color: green; }
</style>
3. External CSS – Written in a separate .css file and linked to
the HTML file.
<link rel="stylesheet" href="style.css">
CSS Syntax:
selector {
property: value;
}
Example:
css
body {
background-color: lightblue;
}

External and Inline CSS


External CSS
 Stored in a separate .css file.
 Best for styling multiple pages.
 Linked using the <link> tag inside the HTML <head>.
<link rel="stylesheet" href="styles.css">
Inline CSS
 Applied directly to a specific HTML tag using the style
attribute.
 Best for quick changes, but not recommended for large
websites.
<h1 style="color: blue;">Hello</h1>

The <div> Tag


What is a Div?
 A container element that groups together other HTML
elements.
 Useful for sectioning a page (like rows, boxes, or cards).
<div style="background-color: lightgrey; padding: 10px;">
<h2>This is a div</h2>
<p>It contains content</p>
</div>
Use in CSS:
css
div {
border: 1px solid black;
margin: 20px;
}
Classes and IDs
Class
 Used to style multiple elements with the same rules.
 Prefixed with a . in CSS.
<p class="intro">Welcome!</p>
css
.intro {
font-size: 20px;
color: green;
}
ID
 Used to style a unique element (only one per page).
 Prefixed with a # in CSS.
<h1 id="main-title">My Website</h1>
css
#main-title {
color: navy;
}

Flexbox
What is Flexbox?
 A layout system in CSS is used to align and distribute
space among items in a container.
css
.container {
display: flex;
justify-content: space-between;
}
html
<div class="container">
<div>Column 1</div>
<div>Column 2</div>
</div>
Flexbox Terms:
Flexbox (short for Flexible Box Layout) is a layout system in CSS3 used to arrange items
inside a container — either in a row (horizontal) or a column (vertical). It makes it easier to
align, distribute space, and reorder content on a web page, especially when building responsive
designs.

🔹 Why Use Flexbox?

 It automatically adjusts the layout based on screen size or content.


 It solves common layout problems like centering items, equal spacing, and aligning
elements vertically and horizontally.

🔹 How Flexbox Works

To use Flexbox, you start by turning a container into a flex container using this CSS:

css
.container {
display: flex;
}

🔹 Key Properties of Flexbox

✅ For the container (parent element)

Property What it does Example


display: .container { display:
flex; Enables flexbox on the container flex; }
flex- Direction of items (row, column, row-reverse, flex-direction: row;
direction column-reverse)
justify- Horizontal alignment (start, center, space-between, justify-content:
content space-around, space-evenly) center;

align-items
Vertical alignment (flex-start, center, flex-end, align-items: center;
stretch)
flex-wrap Allows items to wrap onto multiple lines flex-wrap: wrap;

✅ For the items (children elements)

Property What it does Example


flex-grow Item's ability to grow flex-grow: 1;
flex-shrink Item's ability to shrink flex-shrink: 1;
flex-basis Default size of the item flex-basis: 200px;
align-self Overrides align-items for individual items align-self: flex-end;

 display: flex; – Enables flex layout.


 justify-content: – Aligns items horizontally.
 align-items: – Aligns items vertically.
 flex-direction: – Row or column layout.

CSS Tables
HTML Table Basics:
html
CopyEdit
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Amy</td><td>13</td></tr>
</table>
CSS Styling Example:
css
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 8px;
}
Borderless Table:
Use CSS to hide borders:
css
table, td, th {
border: none;
}

CSS Forms
Styling a Form:
You can style inputs, buttons, and labels to improve the
appearance.
css
input[type="text"], input[type="email"] {
width: 100%;
padding: 8px;
margin: 5px 0;
}
html
<form>
<label>Name:</label>
<input type="text" name="name">
</form>

Simple Navigation Bar


Horizontal Menu:
Use CSS to create a navigation bar with menu links.
html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Css
ul {
list-style-type: none;
background-color: #333;
padding: 0;
}
li {
display: inline;
margin-right: 15px;
}
a{
color: white;
text-decoration: none;
}

Term 2 Project: Create a Styled Website


Using everything you’ve learned (HTML5 + CSS3), create a
small website with:
 A homepage
 A contact form
 Navigation menu
 Images and styled content
 Consistent use of classes, IDs, and Flexbox

Final Notes
Congratulations! You've completed the HTML5 basics. Keep practicing and try combining all
you've learned into a mini-website. Happy coding!

coding instructor

wesley wenceslaus

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy