HTML NOTES: Class 1
Laban K Kimeto
Email: Labank@[Link] Welcome to your first step into web
development! Today we'll explore
HTML, the foundational language that powers every website you visit.
Think of this as learning the alphabet before writing stories.
FOUNDATION
What is HTML?
HTML is the languagewe useto buildthe "skeleton" of a
web page.
Think of a web page like a house: HTML creates the walls,
rooms, doors, and windows. It determines what content
appears on the page and where each element is positioned.
HTML is for content and structure, not visual styling.
Making things beautiful comes later with CSS!
BUILDING BLOCKS
What Does an HTML Page Contain?
HTMLpagesaremade up [Link] purpose in organizing and
presenting information to users.
Headings Paragraphs
Titles and section headers that organize content Normal body text for explanations and descriptions
hierarchically
Lists Images
Bullet points or numbered items for organized Visual content that enhances understanding and
information engagement
Links Buttons
Clickable connections to other pages or resources Interactive elements for user actions (you'll learn
these later)
CORE CONCEPT
Understanding Tags
HTML uses tagsto tellthe browser whattypeofcontent it's
dealing with. A tag is like a label that wraps around content.
Example of a tag:
<h1>Hello</h1>
Real-life analogy
Tags work like labels on shipping boxes. When a box
says "FRAGILE," you handle it carefully. When text is
wrapped in <h1> tags, the browser treats it as an
important heading and displays it larger.
Opening and Closing Tags
Most HTMLtags work inpairs:anopeningtagstartstheelement,and a closing tag ends it. The closing tag includes a forward
slash (/)before thetag name.
1 2 3
Opening Tag Content Closing Tag
This is a paragraph.
<p> </p>
The actual text or content
Starts the element Ends the element
Important note: While some tags don't require a closing tag (we'll meet those later), always assume tags come in pairs for
now. This prevents common beginner mistakes!
PAGE STRUCTURE
The Basic HTML Page Structure
EveryHTMLpagefollowsastandard"skeleton"[Link]'sthesimplestcorrect HTML page you can create:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
Hello world!
</body>
</html>
01 02 03
<!DOCTYPE html>
<html>...</html> <head>...</head>
Tells the browser this is an HTML5 Wraps all content on the entire page Contains information about the page
document (not displayed on screen)
04 05
<title>...</title>
<body>...</body>
Text that appears on the browser tab Everything the user actually sees on the page
TEXT ELEMENTS
Common HTML Tags: Headings & Paragraphs
Headings Paragraphs
Paragraphs display normal body text. Use the <p> tag for
Headingsarelarge titles that organize your content. They
sentences, explanations, and general content.
come in six levels, with <h1> being the largest and most
important.
<p>This is a paragraph.</p>
<h1>Biggest heading</h1>
<h2>Smaller heading</h2>
<h3>Even smaller</h3>
Best practice: Use only one <h1> tag for your
page's main title. This helps with organization and
accessibilit y.
LISTS
Common HTML Tags: Lists
Listshelp organizeinformation into easy-to-readbulletpointsor
numbered [Link]<ul> tag createsanunordered(bulleted)list.
The Code: What it means:
<ul> means "unordered list"
<ul>
(bullet list)
<li>Football</li>
<li>Music</li> <li> means "list item" (each bullet
<li>Reading</li> point)
</ul> Each <li> creates a new bullet
automatically
HANDS-ON
Your First Full HTML Page
Nowlet'sput everythingtogether!Here'sacompleteexamplethat uses headings, paragraphs, and lists. Save this code as
[Link] on your computer.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>Hello! My name is Kim. This is
my first time learning HTML.</p>
<h2>My Hobbies</h2>
<ul>
<li>Listening to music</li>
<li>Watching movies</li>
<li>Playing games</li>
</ul>
</body>
</html>
This example demonstrates proper HTML structure with a clear hierarchy: a main heading, introductory paragraph,
subheading, and organized list of items.
GETTING STARTED
How to Run Your HTML Page
Readytoseeyourcreationinaction?Followthesesimplestepstoviewyour HTML page in a web browser.
Locate the File
Save Your File Navigate to the folder where you saved your HTML file
Save your code with the filename [Link] in a folder using File Explorer or Finder
you can easily find
Make Changes
Open in Browser To see updates: Save your file, then refresh the browser
Double-click the file. It will automatically open in your page (press F5 or Ctrl + R)
default browser (Chrome, Edge, Firefox, Safari, etc.)