HTML: The Building Blocks
of the Web
Welcome to the world of HTML! In this presentation, we'll explore
the fundamental language of the web and learn how to create
dynamic and engaging websites.
RM
by Rayan Martin
Learning Objectives
By the end of this presentation, you'll be able to understand
HTML's purpose, its basic structure, and how to create simple
webpages. You'll also have a foundational understanding of key
HTML tags and elements.
Starter Activity
Let's get started! Try creating a simple HTML page with a heading, a paragraph, and a link to your favorite website.
This hands-on activity will help you solidify your understanding of HTML basics.
What is HTML?
Foundation Language
HTML, or HyperText Markup Language, forms the core HTML uses tags and elements to define different
structure of web pages. It defines the content and content elements like headings, paragraphs, images,
layout, providing a blueprint for how a webpage is and links, bringing structure and meaning to the web.
displayed.
Basic HTML Structure
HTML
1
Head
2
Metadata
Body
3
Content
HTML Tags and Elements
Tags Elements
Tags like <h1> and <p> Elements are enclosed by
define elements, opening and closing tags,
indicating specific content e.g., <h1>This is a
types and how they should heading</h1>, creating
be displayed. the content structure of a
webpage.
Headings, Paragraphs, and Text Formatting
Headings Paragraphs
Headings (h1 to h6) provide structure, emphasize Paragraphs (p) organize content into readable blocks,
important information, and define the hierarchy of creating a clear and visually appealing layout.
content.
HTML Links and Images
Links (a) Images (img)
Links connect to other pages or Images enrich webpages,
resources, making the web making them more engaging
interactive and allowing users and visually appealing.
to navigate effortlessly.
HTML Lists and Tables
Lists (ul, ol, li) Tables (table, tr, td)
Lists, both unordered (ul) Tables arrange data in rows
and ordered (ol), organize and columns, providing a
items in a structured clear and organized way to
manner, making information display structured
easily accessible. information.
HTML Forms and Inputs
Forms (form) Inputs (input)
Forms allow users to input information, enabling Inputs, such as text fields, radio buttons, and
interaction and data collection. checkboxes, provide different ways for users to enter
information.