INTRODUCTION

Purpose of the Book

The purpose of Introduction to HTML for Beginners is to provide a
clear and easy-to-understand guide for anyone looking to dive into the
world of web development. This book focuses on teaching the
foundational language of the web—HTML—and the basics of CSS for
styling. By the end of the book, you'll have the skills to create simple
websites from scratch, understanding the structure of web pages and
how to style them to make them visually appealing.

Who Should Read This Book

This book is designed for:
Complete Beginners: If you have no prior experience with
coding or web development, this book is written with you
in mind. Each concept is explained step-by-step with plenty
of examples to help you understand.
Aspiring Web Developers: If you're thinking about
pursuing a career in web development, this book serves as
 a solid starting point by introducing the building blocks of
the web.
Designers Wanting to Learn Code: If you're a graphic or
UI/UX designer looking to add coding to your skill set, this
book will help you understand how HTML and CSS bring
designs to life on the web.
Students and Educators: Whether you’re studying web
development or teaching it, this book offers a
comprehensive introduction to HTML and CSS that fits
into any learning or teaching curriculum.

How to Navigate Through This Book

This book is organized into easy-to-follow chapters, each building on
the last:
1. Start with the Basics: The early chapters introduce
HTML, explaining the basic structure of a webpage and
how to write your first lines of code. These chapters are
packed with examples and syntax to help you get
comfortable with the language.
2. Practice What You Learn: Each chapter contains projects
or exercises that encourage you to apply the knowledge
you've gained. You’ll work on real-world projects like a
portfolio website to help solidify what you’ve learned.
3. Explore Additional Topics: Later chapters introduce CSS
to teach you how to style your web pages. You’ll learn how
HTML and CSS work together to create attractive,
functional websites.
4. Utilize the Appendices: The appendices offer helpful
references, troubleshooting tips, and additional resources
for further learning.

Feel free to jump between chapters as needed, but if you're a complete

beginner, we recommend going through the book sequentially. Let’s
get started on your web development journey!
TABLE OF CONTENTS:

Chapter 1: What is HTML?

Chapter 2: Setting Up Your Environment

Chapter 3: Covering the Basics

Chapter 4: Working with Text

Chapter 5: Adding Images & Multimedia

Chapter 6: Structuring Content

Chapter 7: Creating Tables

Chapter 8: Forms and User Input

Chapter 9: What is CSS?

Chapter 10: Adding Basic Styles

Chapter 11: Styling Text and Colors

Chapter 12 : Projects

CONCLUSION

APPENDICES
TOPIC 1: INTRODUCTION
TO HTML
 CHAPTER 1: WHAT IS HTML?

Definition and Purpose of HTML

HTML stands for HyperText Markup Language. It's the

standard language used to create web pages. When you visit a
website, the text, images, and links you see are all displayed
using HTML. It tells the browser how to structure the page, what
content to show, and how that content should look.
Think of HTML as the foundation of a house. It sets the structure
and layout, but you can style and add interactive elements on top
of it using other languages like CSS and JavaScript.

How HTML Fits into Web Development

HTML is the building block of every website. It works together

with two other main technologies:
CSS (Cascading Style Sheets): Used for styling the
website, like colors, fonts, and layout.
JavaScript: Adds interactive features, like buttons
that do something when clicked or animations that
happen on the page.

Web development can be broken down into front-end and back-

end:
Front-end (what the user sees) is primarily built using
HTML, CSS, and JavaScript.
Back-end (behind the scenes, like databases) is
handled with languages like Python, PHP, or Ruby.

In short, HTML is at the core of front-end web development.

 Without it, a web page wouldn’t exist.

Brief History of HTML

HTML was created in 1991 by Tim Berners-Lee, the same person

who invented the World Wide Web. The first version was pretty
simple, designed to display text and basic links.
Over time, HTML evolved:
HTML 1.0: Basic version with text, links, and images.
HTML 4.01: Introduced more features like tables and
forms.
XHTML: A stricter version of HTML.
HTML5: The current version, released in 2014, which
introduced new features like video embedding, audio
support, and better mobile compatibility.

Now, HTML5 is widely used and is considered the backbone of

modern websites.
Overview of a Basic HTML Document Structure

An HTML document is made up of tags. Tags are like containers

that hold different parts of the webpage. We will learn more
about them in detail in the later chapters. Here’s an example of a
basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph explaining what my webpage is
about.</p>
</body>
</html>

Let’s break it down:

1. <!DOCTYPE html>: This tells the browser that the

document is an HTML5 document.
2. <html>: This is the root element that wraps everything on
your webpage.
3. <head>: This section contains information about the
webpage (metadata), like the title or links to stylesheets.
4. <title>: The text inside this tag is what appears on the
browser tab.
5. <body>: The main content of your page goes inside this
tag.
6. <h1>: This is a heading tag. The h1 tag is for the biggest
or most important heading.
 7. <p>: This tag is used to define a paragraph.

Recap and What’s Next

In the next chapter, we’ll dive deeper into HTML tags and how to
use them to create more complex web pages! HTML is a markup
language that structures the content on the web. It’s easy to learn,
and once you understand the basics, you can create simple web
pages. HTML works hand-in-hand with CSS and JavaScript to
bring web pages to life, and it’s the starting point for anyone
interested in web development.
In the next chapter, we’ll learn more about setting up the
environment!
 CHAPTER 2: SETTING UP YOUR
ENVIRONMENT
Choosing a Text Editor
To start writing HTML, you need a text editor. A text
editor is a program where you can write and edit code. It’s
like a more advanced version of Notepad.
Here are some great text editors for beginners:

1. VS Code (Visual Studio Code)

Why choose it? It’s free, lightweight, and has a ton of features
like syntax highlighting (which helps you see different parts of
your code in different colors), autocomplete, and extensions to
make coding easier.
Recommended for: Beginners and advanced users alike.

2. Sublime Text

Why choose it? It’s fast and simple. It also supports many
programming languages and offers features like multi-line
editing.
Recommended for: People who want something quick and
lightweight.

3. Notepad++

Why choose it? It’s a great free option for Windows users. It’s
simple and works well for HTML and other coding tasks.

Recommended for: Beginners who want a no-frills option.

Each of these editors will do the job well. For this book, we’ll
use VS Code in the examples, but you can follow along with any
text editor you like.
Setting Up Your First HTML File
Now that you have your text editor ready, it’s time to create your
first HTML file. Follow these steps:

Step 1: Open your Text Editor

If you’re using VS Code, open the program. You’ll see a blank
space where you can start typing your code.

Step 2: Write Basic HTML Code

Type the following code:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first HTML page. This is a simple
paragraph.</p>
</body>
</html>

This is a basic HTML structure similar to what we discussed in

Chapter 1. It includes a title, a heading (<h1>), and a paragraph
(<p>).

Step 3: Save the File

After you’ve written the code, save your file.
Click on File and select Save As.
Choose a folder where you want to save your HTML file.
 Name the file something like index.html (the .html part is
important because it tells the computer that this is an HTML file).
For example: index.html

Viewing HTML in a Web Browser

Now that your file is saved, it’s time to view it in a web browser.
This is the fun part where you get to see your code in action!
Step 1: Open the HTML File in a Browser
To view your HTML file, follow these steps:
1. Go to the folder where you saved your index.html file.
2. Right-click on the file and select Open with.
3. Choose a web browser (Chrome, Firefox, Edge, or Safari).

The browser will open, and you’ll see the text you wrote displayed
on the screen.
Here’s what you should see:

The title ("My First HTML Page") will appear on the

browser tab.
The heading ("Hello, World!") will be large and bold.
The paragraph ("Welcome to my first HTML page...") will
appear as regular text below the heading.

Step 2: Make Changes and Refresh

One of the best things about coding is that you can experiment and
make changes. Let’s do a quick change:
Go back to your text editor.
Change the text inside the <h1> tag from "Hello, World!" to
something else, like "My First Webpage!".
Save the file again (Ctrl + S or Command + S on Mac).
Go back to your web browser and refresh the page (you can press
F5 or click the refresh button).
Now, you’ll see the updated heading!
Recap and What’s Next

In this chapter, we covered the basics of setting up your

environment to start coding in HTML:
You learned how to choose a text editor, and we used VS Code in
our example.
You created and saved your first HTML file.
You opened it in a web browser to see the output of your code.
In the next chapter, we’ll dive deeper into HTML tags and how to
use them to create more complex web pages!
 CHAPTER 3: COVERING THE BASIC
HTML Tags, Elements, and Attributes
Before we dive into building more complex web pages, it’s
important to understand the three main parts of HTML: tags,
elements, and attributes.

1. HTML Tags
Tags are the building blocks of HTML. They look like this:

<p>This is a paragraph.</p>
The <p> is an opening tag.
The </p> is a closing tag.

Tags tell the browser what to do with the content between them. In
this case, the <p> tag tells the browser to treat the text inside it as
a paragraph.

2. HTML Elements
An element is the combination of the opening tag, the content, and
the closing tag:

<p>This is a paragraph.</p>

In this example:
The entire thing (<p>This is a paragraph.</p>) is an HTML
element.

HTML elements are everywhere in your code. For example:

<h1> creates a heading.
<img> creates an image.
<a> creates a link.
 3. HTML Attributes
Attributes provide extra information about an element. They are
added to the opening tag and usually look like this:

<a href="https://www.example.com">Click here</a>

href="https://www.example.com" is an attribute of the <a> tag
(which creates a link).

It tells the browser where to go when the user clicks the link.
Attributes always come in name="value" pairs. Some common
attributes are:
href (for links).
src (for images).
alt (for image descriptions).

Understanding the Structure: <html>, <head>,

<body>

Now that you know about tags, elements, and attributes, let’s talk
about the structure of an HTML page. Every HTML document has a
basic structure that looks like this:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
</body>
</html>
Let’s break it down:
1. <!DOCTYPE html>
This is called the DOCTYPE declaration. It tells the browser that the
document is written in HTML5, the most current version of HTML.

2. <html>...</html>
The entire page is wrapped inside the <html> tag. This tells the
browser that everything inside these tags is HTML.

3. <head>...</head>
The <head> section contains metadata about the webpage
(information that’s not shown directly on the page). Inside the head,
you’ll often find:
Title: The text between <title>...</title> will appear on the
browser tab. In our example, the title is "My Web Page."

4. <body>...</body>
The <body> section contains the main content of the page. This is
everything you see when you visit a website, including text, images,
and links. In our example:
<h1>Welcome to My Website</h1>: This is a heading.
<p>This is the main content of the page.</p>: This is a
paragraph.

Creating Your First Simple HTML Page

Now, let’s create a simple HTML page to see how these building
blocks work together.

Step 1: Open Your Text Editor

If you’ve already installed a text editor (like VS Code or Sublime
Text), open it.

Step 2: Write the HTML Code

Here’s a basic HTML page to get you started:

<!DOCTYPE html>
<html>
<head>
<title>My Simple HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first web page. I'm learning HTML!</p>
</body>
</html>

Step 3: Save the File

Save the file as index.html in a folder on your computer.

Step 4: Open the File in Your Browser

Once saved, you can open this file in any web browser (like Chrome,
Firefox, or Safari). Here’s how:
Right-click the file and select Open with.
Choose a web browser to view the page.

When you open the file, you’ll see:

The title "My Simple HTML Page" on the browser tab.
The heading "Hello, World!" in bold at the top.
The paragraph "This is my very first web page. I'm
learning HTML!" underneath the heading.

Experimenting With Your Page

You’ve just created your first simple HTML page! Now, let’s try some
changes:

Adding Another Paragraph

Go back to your text editor and add another paragraph under the first
one:

<p>This is another paragraph. I can add more content here!</p>

Your updated code should look like this:

<!DOCTYPE html>
<html>
<head>
<title>My Simple HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first web page. I'm learning HTML!</p>
<p>This is another paragraph. I can add more content here!
</p>
</body>
</html>

Save the file and refresh your browser to see the new paragraph!

Changing the Heading

Let’s change the heading to something else:

<h1>Welcome to My New Website!</h1>

After saving and refreshing the page, you’ll see the new heading at the
top.
Recap and What’s Next

In this chapter, you learned about the basic building blocks of HTML:
tags, elements, and attributes. We also walked through the structure
of an HTML document, with the <html>, <head>, and <body> tags.
Finally, you created a simple HTML page and experimented with
adding and changing content.

In the next chapter, we’ll explore more HTML tags that allow you to
create lists, and build links. You’re already on your way to becoming
an HTML pro!
TOPIC 2: CORE
HTML ELEMENTS
 CHAPTER 4 – WORKING WITH
TEXT

Headings (<h1> to <h6>)

Headings are used to give titles or highlight important parts of your
web page. In HTML, there are six levels of headings, from <h1>
(the largest) to <h6> (the smallest).

Example:
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>

Output:
The <h1> heading will appear the largest, while the <h6>
will be the smallest.
Use <h1> for main titles and <h2> to <h6> for subheadings
or less important titles.

Tip:
Always use headings in order. For example, don't skip from <h1>
directly to <h4>. This helps with the structure of your webpage and
improves SEO (search engine optimization).
Paragraphs (<p>)
The <p> tag is used to create paragraphs. This is where most of the
text content of your webpage goes.

Example:
<p>This is a paragraph. It’s useful for writing blocks of text.
</p>
<p>Here’s another paragraph with more information.</p>

Output:
Each paragraph will appear on its own line with some space
between them.

Tip:
Paragraphs are great for writing long sections of content. Make
sure to break up your text into small, readable chunks to improve
readability.

Text Formatting: Bold (<b>), Italics (<i>), Underline

(<u>)
Sometimes, you want to emphasize certain words or phrases. You
can use bold, italics, and underline formatting in HTML.

1. Bold (<b>)
The <b> tag makes the text bold, which is useful for emphasizing
important words.
<p>This is a <b>bold</b> word.</p>

2. Italics (<i>)
The <i> tag makes the text italic, which is often used for emphasis
or quotes.
 <p>This is an <i>italic</i> word.</p>

3. Underline (<u>)
The <u> tag adds an underline to the text.
<p>This is an <u>underlined</u> word.</p>

Example:
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u>
text.</p>

Output:
Bold text stands out.
Italic text is slanted.
Underlined text has a line underneath it.

Lists: Ordered (<ol>) and Unordered (<ul>)

HTML allows you to create two types of lists: ordered (numbered)

and unordered (bullet points).

1. Ordered List (<ol>)

An ordered list uses numbers to organize items in a specific
sequence.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Output:
1. First item
2. Second item
 3. Third item

2. Unordered List (<ul>)

An unordered list uses bullet points to display items.
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Output:
Item one
Item two
Item three

Tip:
Use ordered lists when the order of items matters (like
steps in a process).
Use unordered lists when the order doesn’t matter (like a
list of ingredients).

Links: Creating Hyperlinks (<a href=" ">)

Links are essential in HTML, allowing users to navigate to other

web pages or resources. The <a> tag is used to create hyperlinks,
and the href attribute specifies the URL of the page or resource.

Example:
 <a href="https://www.example.com">Visit Example
Website</a>

Explanation:
The <a> tag creates the link.
href="https://www.example.com" tells the browser where
to take the user when they click the link.
"Visit Example Website" is the clickable text that will
appear on the page.

Output:
Clicking on "Visit Example Website" will take the user to
https://www.example.com.

Creating Your Own Simple HTML Page with Text

Let’s create a simple webpage using all the elements we’ve

covered in this chapter.

Step 1: Open your text editor and write the following code:
<!DOCTYPE html>
<html>
<head>
<title>Working with Text</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>

<p>This is a simple webpage where I’m learning about

HTML text elements.</p>

<h2>Here’s What I’ve Learned:</h2>

<p><b>Bold</b> text is useful for making important words
stand out.</p>
<p><i>Italics</i> are great for emphasis or quotes.</p>
<p><u>Underline</u> adds emphasis in certain contexts.
</p>

<h3>My Favorite Hobbies</h3>

<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ul>

<h3>Steps to Create a Simple Web Page</h3>

<ol>
<li>Install a text editor.</li>
<li>Write HTML code.</li>
<li>Save the file with a .html extension.</li>
<li>Open the file in a browser to view the page.</li>
</ol>

<p>For more information, <a

href="https://www.example.com">click here</a> to visit an
example website.</p>
</body>
</html>

Step 2: Save the file as text_example.html and open it in your

browser.
Output:
A heading saying "Welcome to My Webpage."
Paragraphs demonstrating bold, italic, and underlined text.
An unordered list of hobbies.
An ordered list of steps for creating a web page.
A clickable link to another website.
Recap and What’s Next

In this chapter, you’ve learned how to:

Use headings to structure your content.
Create paragraphs for your main text.
Format text with bold, italics, and underline.
Build lists using ordered and unordered lists.
Create hyperlinks to navigate between pages or websites.

In the next chapter, we’ll explore adding images, embedding

videos, and styling your content using CSS!
 CHAPTER 5: ADDING IMAGES &
MULTIMEDIA
Inserting Images with the <img> Tag
Adding images to your webpage is one of the easiest ways to make
it more engaging. To insert an image, we use the <img> tag in
HTML. Unlike some tags, the <img> tag is self-closing, meaning it
doesn’t need an opening and closing tag pair.

Example:
<img src="image.jpg" alt="A beautiful view of nature">

Explanation:
<img> is the tag for inserting images.
The src attribute stands for source and tells the browser
where to find the image file.
The alt attribute provides alternative text in case the
image fails to load, or for accessibility reasons (like screen
readers for visually impaired users).

Attributes: src, alt, width, and height

To customize how images are displayed, you can use different

attributes within the <img> tag.

1. src (Source)
This attribute is required and provides the location of the image
file. It can be a link to an image on your computer or an image
from the web.
 <img src="path/to/image.jpg" alt="Description of the image">

2. alt (Alternative Text)

The alt attribute is important for accessibility and SEO. It gives a
text description of the image in case it doesn't load.
<img src="dog.jpg" alt="A cute dog">

3. width and height

You can control the size of an image by specifying its width and
height, either in pixels or percentage.

<img src="cat.jpg" alt="A playful cat" width="300" height="200">

In this example, the image is set to be 300 pixels wide and 200
pixels high.

Tip:
Always use alt text for accessibility and try to maintain image
proportions by adjusting width or height alone.

Embedding Videos and Audio

Just like images, you can embed videos and audio into your HTML
pages.

1. Embedding a Video with the <video> Tag

The <video> tag allows you to play videos on your webpage. You
can control features like play, pause, and volume. It can contain
multiple sources for different video formats.

Example:
<video width="400" controls>
 <source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Explanation:
controls: Adds playback controls (play, pause, volume).
<source>: The actual video file (multiple formats can be
provided for better compatibility).

2. Embedding Audio with the <audio> Tag

The <audio> tag works similarly to the <video> tag, allowing you
to play audio files.

Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Explanation:
controls: Adds play and pause buttons for the audio file.
<source>: Points to the location of the audio file.

Recap and What’s Next

In this chapter, you’ve learned how to:
Use containers like <div> and <span> to structure your
content.

In the next chapter, we’ll dive into CSS, the styling language that
will help make your webpage visually appealing!
 CHAPTER 6: STRUCTURING
CONTENT
Inserting Images with the <img> Tag
Adding images to your webpage is one of the easiest ways to make
it more engaging. To insert an image, we use the <img> tag in
HTML. Unlike some tags, the <img> tag is self-closing, meaning it
doesn’t need an opening and closing tag pair.

Understanding Containers: <div> and <span>

HTML provides two very common container tags, <div> and
<span>, to help you organize and structure your content. These
tags don't add visual changes but are used to group and organize
content for styling (CSS) or scripting (JavaScript) purposes.

1. <div> (Division)
The <div> tag is a block-level container, which means it takes up
the full width available, stacking elements one on top of the other.

Example:
<div>
<h2>Section Title</h2>
<p>This is a paragraph inside a div container.</p>
</div>

2. <span>
The <span> tag is an inline-level container, meaning it only takes
up as much width as necessary. It’s used to style or manipulate a
small part of text within a larger block.

Example:
<p>This is a <span style="color: blue;">blue</span> word.</p>
 In this example, only the word "blue" is styled, without affecting
the rest of the sentence.

Using Semantic Elements: <header>, <footer>,

<main>, <section>, <article>

Semantic HTML means using HTML elements that have a clear

meaning or purpose. Instead of using a generic <div>, semantic
elements like <header>, <footer>, and <main> give structure to
your page and help search engines and assistive technologies
understand your content better.

1. <header>
The <header> element is used to define the header section of a
page or section. It usually contains the logo, navigation, or
introductory information.
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>

2. <footer>
The <footer> element is used to define the footer section of a page,
typically containing copyright information or links to privacy
policies.
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
3. <main>
The <main> element represents the main content of the webpage.
There should only be one <main> section on a page, as it is meant
to highlight the primary content.
<main>
<h2>Main Content Title</h2>
<p>This is where the primary content of the page goes.</p>
</main>

4. <section>
The <section> element groups related content into sections. It’s
useful for dividing a page into different parts.
<section>
<h2>Services</h2>
<p>We offer web design and development services.</p>
</section>

5. <article>
The <article> element is used for self-contained content like blog
posts, news articles, or forums.
<article>
<h3>Blog Post Title</h3>
<p>This is an individual blog post.</p>
</article>
Why Semantic HTML Matters (Accessibility and SEO)

Semantic HTML is not just about giving your page structure. It

also helps:
Accessibility: Screen readers use semantic HTML to help
visually impaired users understand the structure of your
page.
SEO (Search Engine Optimization): Search engines like
Google use semantic HTML to better understand your
content, which can improve your rankings.

Non-Semantic vs. Semantic Example:

Non-Semantic HTML:

<div>Content Title</div>
<div>Some more content</div>

Semantic HTML:

<header>Content Title</header>
<main>Some more content</main>

Using semantic tags makes your HTML easier to read and

improves how search engines and accessibility tools interact with
it.
Creating a Structured HTML Page Example
Here’s how you might combine what you’ve learned in a simple
web page.

<!DOCTYPE html>
<html>
<head>
<title>Structured Web Page</title>
</head>
<body>

<header>
<h1>Welcome to My Blog</h1>
</header>

<main>
<section>
<h2>Latest Articles</h2>
<article>
<h3>How to Learn HTML</h3>
<p>This article will teach you how to create webpages
with HTML.</p>
</article>
</section>
</main>

<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>

</body>
 </html>

Output:
A page with a header, a section containing an article, and a
footer at the bottom.

Recap and What’s Next

In this chapter, you’ve learned how to:
Use containers like <div> and <span> to structure your
content.
Implement semantic HTML elements like <header>,
<footer>, and <main> to improve both accessibility and
SEO.

In the next chapter, we’ll dive into CSS, the styling language that
will help make your webpage visually appealing!
 CHAPTER 7: CREATING TABLES

Tables are useful for displaying data in a structured format. In

HTML, you can create tables using a set of specific tags like
<table>, <tr>, <td>, and <th>.

Basic Table Structure: <table>, <tr>, <td>, <th>

Let’s start with the basic building blocks of a table.
<table>: This tag defines the table itself.
<tr>: Represents a table row.
<td>: Stands for table data and represents the individual
cells in a row.
<th>: Stands for table header and is used to create header
cells, which are
typically bold and centered.

Example:

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
 </tr>
</table>

Explanation:
The first row (<tr>) contains header cells (<th>), which
create headings for the columns.
The next two rows contain data cells (<td>), which hold
the actual data.

Output:

| First Name | Last Name |

|---------------|-----------|
| John | Doe |
| Jane | Smith |
Adding Borders and Spacing
By default, HTML tables don’t have borders or padding. To add
some style to your table, you can use CSS or simple HTML
attributes.

Example with borders and spacing:

<table border="1" cellpadding="10" cellspacing="0">

<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</table>

Explanation:
border="1" adds a border around each cell.
cellpadding="10" adds space inside each cell.
cellspacing="0" removes the space between cells.

Output:
Each cell now has borders and padding to make the table more
readable.
Using Tables for Organizing Data
Tables are best used for organizing data, such as product listings,
schedules, or any kind of structured information.

Example: A Product Price List

<table border="1" cellpadding="5">

<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>100</td>
</tr>
</table>

Output:

| Product | Price | Stock |

|---------|-------|-------|
| Apple | $1 | 50 |
| Banana | $0.5 | 100 |
 CHAPTER 8: FORMS AND USER
INPUT

Tables are useful for displaying data in a structured format. In

HTML, you can create tables using a set of specific tags like
<table>, <tr>, <td>, and <th>.

Forms are essential for collecting data from users, such as login
credentials, search queries, or survey responses. HTML forms
consist of input elements like text fields, checkboxes, and buttons,
all enclosed within a <form> tag.

Creating Forms with <form>

The <form> tag is used to create a form in HTML. Inside the form,
you place input elements like text fields and buttons.

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

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

<button type="submit">Submit</button>
</form>

Explanation:
<label>: Provides a label for the input field.
 <input>: Defines different types of inputs like text, email,
or password.
<button>: Creates a clickable button to submit the form.

Output:
A simple form with fields for name and email, and a submit
button.

Input Elements: Text, Password, Email, Button,

Checkbox, Radio
HTML provides several types of input elements for collecting
different kinds of data.

1. Text Field (<input type="text">)

This is used to collect single-line text input from the user.
<input type="text" name="username">

2. Password Field (<input type="password">)

Used for sensitive data like passwords. The text entered is hidden.
<input type="password" name="password">

3. Email Field (<input type="email">)

Used specifically for collecting email addresses. Browsers may
validate that a correct email format is entered.
<input type="email" name="email">

4. Checkbox (<input type="checkbox">)

Check boxes let users select multiple options.
<input type="checkbox" name="subscribe"> Subscribe to
Newsletter
5. Radio Button (<input type="radio">)
Radio buttons allow users to select one option from a set.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

6. Submit Button (<button type="submit">)

Creates a button to submit the form data.
<button type="submit">Submit</button>

Example with multiple inputs:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>

<input type="checkbox" name="newsletter"> Subscribe to our

newsletter<br><br>

<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female">
Female<br><br>

<button type="submit">Submit</button>
</form>
Form Attributes: action, method
When you submit a form, the data needs to be sent somewhere.
That’s where the action and method attributes come in.

1. action
The action attribute defines where the form data should be sent
(the URL or server-side script).
<form action="/submit-form">
...
</form>

2. method
The method attribute specifies how to send the data. It can be
either GET (data is sent in the URL) or POST (data is sent in the
request body).
GET: Used when you’re retrieving data.
POST: Used when you’re sending sensitive or large
amounts of data.

<form action="/submit-form" method="POST">

...
</form>
Basic Form Validation
HTML can automatically check if the data entered into a form is
valid, without needing any additional code.

Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"
minlength="6" required><br><br>

<button type="submit">Submit</button>
</form>

Explanation:
required: Makes the field mandatory.
minlength="6": Ensures the password is at least 6
characters long.

Output:
If the user tries to submit the form without entering valid data (like
a properly formatted email), the browser will show a message
prompting them to fix it.

Creating a Complete Form Example

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Sign Up</h2>

<form action="/submit-form" method="POST">

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br>
<br>

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

<label for="password">Password:</label>
<input type="password" id="password" name="password"
minlength="6" required><br><br>

<label for="subscribe">Subscribe to Newsletter:</label>

<input type="checkbox" id="subscribe" name="subscribe">
<br><br>

<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female">
Female<br><br>

<button type="submit">Submit</button>
</form>
TOPIC 3: BASIC
CSS
 CHAPTER 9: WHAT IS CSS?
Brief Overview of CSS and Its Role
CSS stands for Cascading Style Sheets. It is a language used to
describe the look and formatting of an HTML document. While
HTML is responsible for the structure of a webpage (what’s on the
page), CSS is responsible for how that page looks (how the content
is presented).
Think of HTML as the building blocks of a house, while CSS is the
paint, decor, and furnishings that make the house beautiful.

How HTML and CSS Work Together

HTML provides the content and structure, while CSS enhances the
presentation of that content. When you apply CSS to your HTML,
you tell the browser how the text, images, and other elements
should look.
For example:
HTML says, “This is a heading.”
CSS says, “Make this heading blue, 24px, and centered.”
Basic CSS Syntax: Selectors, Properties, and Values
To use CSS, you need to understand its basic syntax, which is very
straightforward. A CSS rule has three parts:
1. Selector: What HTML element you want to style (e.g., a
paragraph, a heading).
2. Property: What aspect of the element you want to change
(e.g., color, font-size).
3. Value: The new value you want to assign to that property
(e.g., red, 16px).

Here’s a basic example:

p{
color: blue;
font-size: 16px;
}
The selector p targets all <p> (paragraph) elements.
The property color sets the text color.
The value blue specifies the color.
The property font-size sets the size of the text to 16px.

Example in HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph styled with CSS.</p>
</body>
</html>
In this example, all paragraphs will be blue and have a font size of
16px.
 CHAPTER 10: ADDING BASIC
STYLES

There are three main ways to add CSS to your HTML: inline
styles, internal CSS, and external stylesheets. Each method has
its own use cases.

Inline Styles: Adding CSS Directly in HTML Tags

Inline CSS is added directly inside an HTML element using the
style attribute. This is useful when you want to style a single
element quickly.

Example:
<p style="color: green; font-size: 20px;">This is a green
paragraph.</p>
In this case, the style only applies to this one paragraph, making it
green and 20px in size.

Explanation:
The style attribute is used inside the <p> tag.
CSS properties like color and font-size are defined directly
inside the tag.

Internal CSS: Using <style> Tags in the HTML

Document
Internal CSS is written inside a <style> tag within the <head>
section of your HTML document. This method is useful when you
want to apply styles to the entire page.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p{
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with internal CSS.</p>
</body>
</html>

Explanation:
The <style> tag is placed inside the <head> of the
document.
The CSS inside the <style> tag applies to all matching
elements in the HTML. Here, all <h1> tags will be red, and
all <p> tags will use the Arial font with a line height of 1.5.
External Stylesheets: Linking CSS Files to HTML with
<link>
External CSS is the best practice for larger websites. It allows you
to keep your CSS in a separate file and link it to your HTML
document using the <link> tag. This keeps your HTML clean and
makes it easy to update styles across multiple pages.

Example:
1. Create an external CSS file (styles.css):

h1 {
color: blue;
}

p{
font-size: 18px;
color: darkgray;
}

2. Link the external CSS file to your HTML:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This paragraph is styled with external CSS.</p>
</body>
</html>
 Explanation:
The <link> tag is used to link an external CSS file
(styles.css) to the HTML document.
The href attribute contains the path to the CSS file.
All styles in the external CSS file will be applied to this
HTML page. For instance, the heading (<h1>) will be blue,
and the paragraph (<p>) will be dark gray.

When to Use Each Method:

Inline CSS: Use when you need to style a single element
quickly.
Internal CSS: Use for small websites or individual pages
where styles are unique to that page.
External CSS: Use for larger websites where you want to
apply consistent styles across multiple pages.

Recap and What’s Next

By using CSS in your HTML documents, you can dramatically

improve how your website looks and feels. External stylesheets are
the most powerful way to manage CSS, especially for bigger
websites, as they keep your code organized and easy to maintain.
 CHAPTER 11: STYLING TEXT AND
COLORS

There are three main ways to add CSS to your HTML: inline
styles, internal CSS, and external stylesheets. Each method has
its own use cases.

Changing Font Sizes, Colors, and Families

CSS makes it easy to change the size, color, and type of font for
any text on your webpage. These are the most common properties
used for text styling:
font-size: Changes the size of the text.
color: Changes the text color.
font-family: Changes the type of font.

Example:
p{
font-size: 18px;
color: #333333;
font-family: Arial, sans-serif;
}
font-size: 18px; makes the text size 18 pixels.
color: #333333; changes the text color to dark gray using a
hexadecimal code.
font-family: Arial, sans-serif; sets the font to Arial, with
sans-serif as a fallback.

HTML Example:
<!DOCTYPE html>
<html>
<head>
 <style>
p{
font-size: 18px;
color: #333333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This paragraph has customized text style.</p>
</body>
</html>
Setting Background Colors
CSS also allows you to set background colors for any element on
your webpage using the background-color property.

Example:
body {
background-color: lightblue;
}

p{
background-color: yellow;
}
background-color: lightblue; sets the entire page’s
background to light blue.
background-color: yellow; gives the paragraph a yellow
background.

HTML Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
 <p>This paragraph has a yellow background.</p>
</body>
</html>

Styling Links: Hover Effects

You can style links using the a (anchor) selector. You can also add
hover effects using the :hover pseudo-class, which allows you to
change how a link looks when a user hovers over it.

CSS Example:
File.css
a{
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}
a styles all links with a blue color and no underline by
default.
a:hover changes the link to red and adds an underline
when the user hovers over it.

HTML Example:
File1.html
<!DOCTYPE html>
<html>
<head>
<style>
 a{
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.example.com">This is a link with hover
effects.</a>
</body>
</html>
TOPIC 4: PUTTING IT ALL
TOGETHER
 CHAPTER 12 : PROJECTS

In this section, you'll apply everything you've learned so far to build

real web projects. This will give you hands-on experience and help
you understand how HTML and CSS work together to create fully
functional web pages.
PROJECT 1 – BUILDING A
SIMPLE WEB PAGE
Planning Your Web Page: Structure and Content

Before writing any code, it’s important to plan your web page. Ask
yourself the following questions:
What is the purpose of your webpage? – Is it a personal
blog, a simple landing page, or an informational page?
What content will be on the page? – This might include
headings, paragraphs, images, links, etc.
How will the content be structured? – Make a rough
sketch or outline of how you want your web page to look.
Identify key sections like the header, main content area,
and footer.

Start with basic content like:

A title for your page (like a heading).
A few paragraphs describing what the page is about.
A couple of images to make it visually appealing.
Links to other websites or resources.
Creating a Basic Layout with HTML

Once you’ve planned your content, start creating the structure of your
webpage using HTML. Begin by setting up a basic HTML document
with tags like:
<header>: This could contain a heading and a navigation
bar.
<main>: This is where your main content (paragraphs,
images, links) will go.
<footer>: You can add a simple footer with copyright
information or contact details.

Focus on:
Properly organizing your content inside sections and
containers using tags
like <div>, <section>, and <article>.
Use headings (<h1>, <h2>) for titles and subheadings, and
paragraphs (<p>) for content.
Adding Simple Styling with CSS

After structuring your webpage with HTML, use CSS to make it look
visually appealing. Apply simple styles like:
Text formatting: Change the font size, color, and style to
make the text easier to read.
Background colors: Set background colors for different
sections to make them stand out.
Spacing: Use padding and margins to ensure elements
aren’t too close to each other.

Keep it simple:
Use internal CSS or an external stylesheet.
Focus on creating a clean and readable design, with enough
spacing and visual contrast between different sections of
the page.
PROJECT 2 – YOUR FIRST
PORTFOLIO WEBSITE
Structuring the Portfolio Page with HTML

A portfolio website is a great way to showcase your skills and

projects. The structure of your portfolio should reflect your personal
style, but generally, it should include the following:
Header: Include your name or logo, and navigation links
to sections like “About Me,” “Projects,” and “Contact.”
Main Section: This is where you’ll introduce yourself.
Include a brief bio, a description of your skills, and any
important projects or experiences.
Portfolio Section: Create a section to showcase your work.
Each project could include a title, description, and link to
view more details.
Contact Section: Provide links to your social media
profiles or a form where visitors can contact you.

Think about how to organize the content effectively:

Group similar information into sections using appropriate
HTML tags like <section>, <div>, and <article>.
Use headings (<h1>, <h2>, etc.) to break down different
sections and make it easy to scan.

Adding Text, Images, and Links

Once the structure is in place, start filling in your portfolio page with
real content:
Text: Describe who you are, your skills, and your projects.
Images: Add images of your projects, either screenshots or
logos that represent your work.
Links: Provide links to your live projects, GitHub,
LinkedIn, or any other resources relevant to your portfolio.

When adding images:

 Ensure they are high-quality but optimized for the web (not
too large).
Use descriptive alt text to make your portfolio more
accessible.

For links:
Create buttons or clickable images that take users to your
projects.
Make sure the links open in new tabs so users don’t leave
your portfolio.
Basic CSS Styling: Making It Look Presentable

Once you’ve added the content, use CSS to make your portfolio look
professional and well-designed. Focus on:
Typography: Choose fonts that are easy to read and match
your style. Use different font sizes for headings and body
text.
Colors: Select a color scheme that complements your
content. Use background colors and text colors that
contrast well.
Spacing and Layout: Make sure there’s enough spacing
between different sections and elements. Use margins and
padding to avoid a cluttered look.

Tips for styling:

Keep it simple and clean. Don’t use too many fonts or
colors.
Make sure your portfolio is responsive, meaning it looks
good on both desktop and mobile devices. You can achieve
this by using flexible layouts like percentages for width
and media queries for smaller screens.
Final Thoughts:

Both of these projects are opportunities for you to experiment and get
creative. You don’t need to aim for perfection right away; instead,
focus on learning and gradually improving. Start with basic designs,
and as you grow more comfortable, try experimenting with more
advanced features and styles.
TOPIC 5: CONCLUSION
CONCLUSION
Recap of Key Concepts
Throughout this book, you’ve learned the fundamental building blocks
of web development through HTML and CSS. Here's a quick recap of
the key concepts covered:
HTML Basics: You explored the role of HTML in
structuring a webpage, learned about common tags,
elements, and attributes, and practiced creating well-
structured web documents.
CSS Basics: We introduced you to CSS and its role in
styling webpages. You learned how to apply inline,
internal, and external styles to HTML, and how to use
selectors, properties, and values.
Project Work: You built simple projects like a basic
webpage and your own portfolio website, which helped you
apply both HTML and CSS to real-world scenarios.

Tips for Continuing Your Learning Journey

As you continue your journey in web development, here are some tips
to keep in mind:
1. Practice: The more you code, the more familiar you'll
become with HTML and CSS. Build new projects, try to
replicate existing websites, or create something from
scratch.
2. Stay Curious: Web development is constantly evolving.
Keep yourself updated with the latest trends and
technologies, whether it's learning a new CSS framework
or diving into JavaScript.
3. Break Down Projects: Start small and gradually build
complex projects. By breaking projects into manageable
steps, you’ll not only reduce frustration but also make
steady progress.
4. Seek Feedback: Share your projects with others. Join web
 development communities, ask for feedback, and always be
open to improving your code.
5. Keep Learning: HTML and CSS are just the beginning.
Expand your knowledge by learning JavaScript, which will
allow you to add dynamic functionality to your websites.

Next Steps: Resources and Further Reading

If you're ready to take the next step, here are some areas and resources
you can explore:
Advanced HTML/CSS: Explore CSS Grid, Flexbox, and
Responsive Web Design techniques.
JavaScript: Learn JavaScript to make your web pages
interactive.
Web Development Frameworks: Try Bootstrap, Tailwind
CSS, or React for more efficient web development.
Version Control with Git: Learn Git to manage and
collaborate on coding projects.
APPENDICES
Appendix A: HTML Tag Reference
Here are some of the most commonly used HTML tags:
<h1> to <h6>: Heading tags, used to create headings.
<p>: Paragraph tag, used to define text.
<img>: Used to insert images, with src and alt attributes.
<a href="">: Anchor tag, used to create links.
<div> and <span>: Containers used to group content for
layout and styling purposes.
<ul>, <ol>, <li>: Tags for creating ordered and unordered
lists.
<table>, <tr>, <td>, <th>: Tags for building tables.
<form>: Used to create forms, with input elements like
<input>, <textarea>, <button>, etc.
Appendix B: CSS Property Reference
Common CSS properties you’ll encounter:
color: Sets the text color.
background-color: Sets the background color of an
element.
font-size: Changes the size of the font.
font-family: Specifies the font type.
margin: Sets the space outside an element.
padding: Defines the space inside an element, around its
content.
border: Defines the border around an element.
display: Determines how an element is displayed (block,
inline, etc.).
width and height: Set the size of an element.

Appendix C: Common HTML & CSS Troubleshooting

Tips
Here are a few common issues and troubleshooting tips for HTML and
CSS:
1. HTML Tags Not Displaying Correctly:
Ensure all opening tags have closing tags.
Make sure tags are properly nested (e.g., don’t
put a <p> inside an <a>).
2. CSS Styles Not Applying:
Check if the CSS file is properly linked to your
HTML.
Use browser developer tools (right-click on the
page > Inspect) to check if the styles are being
overridden or not loading.
3. Images Not Showing:
Double-check the src attribute for typos.
 Ensure the file path is correct and relative to
your HTML document.
4. Spacing Issues:
Use margins and padding to adjust spacing
around elements.
If elements overlap, check for incorrect position
values or floats.
5. Website Not Responsive on Mobile:
Ensure your site is mobile-friendly using media
queries and percentage-based widths instead of
fixed widths.

Appendix D: Useful Online Resources and Tools

To keep learning and refining your skills, here are some useful
resources and tools:
MDN Web Docs (https://developer.mozilla.org/): An
excellent resource for HTML, CSS, and JavaScript
documentation.
W3Schools (https://www.w3schools.com/): A beginner-
friendly platform for learning web development.
CodePen (https://codepen.io/): A place to experiment with
HTML, CSS, and JavaScript in real-time.
CSS Tricks (https://css-tricks.com/): A blog dedicated to
all things CSS, with tutorials, code snippets, and guides.
Can I Use (https://caniuse.com/): A tool to check browser
compatibility for HTML, CSS, and JavaScript features.
GitHub (https://github.com/): A platform for sharing code
and collaborating on open-source projects.
Final Words
Congratulations on completing this journey into HTML and CSS! Web
development is a dynamic field, and by mastering these basics, you
have laid a strong foundation for future success. Whether you're
building your portfolio, starting personal projects, or diving deeper
into new technologies, remember that every great developer started
with these exact same building blocks. Keep practicing, stay curious,
and enjoy the process!