Introduction to
HTML
Welcome to the world of HTML! This tutorial will guide you through
the fundamentals of creating web pages. We'll explore tags,
structure, and more. Get ready to craft your digital masterpiece!
by هبه محمود
What is HTML?
Hypertext Markup Building Blocks
Language
HTML elements form the
HTML is the standard foundation of websites.
language for creating web They define the structure
pages. It structures content and meaning of content.
using tags.
Browser Interpretation
Web browsers read HTML files and render them into visible
web pages.
HTML Basics: Tags,
Elements, and Attributes
1 Tags
HTML tags are enclosed in angle brackets, like <p>.
They define elements.
2 Elements
Elements consist of opening and closing tags with
content in between.
3 Attributes
Attributes provide additional information about
elements, like src for images.
HTML Document Structure
<!DOCTYPE html>
Declares the document type as HTML5. It's the first line of an HTML document.
<html>
The root element that contains all other HTML elements on the page.
<head> and <body>
Head contains metadata, while body holds the visible content of the webpage.
Working with Text in HTML
Paragraphs Text Formatting Line Breaks
Use <p> tags to create <strong>, <em>, and <mark> The <br> tag inserts a single line
paragraphs. They automatically tags add emphasis to your text. break. It's useful for addresses or
add space before and after. poems.
Organizing Content with
HTML Headings and
Paragraphs
1 Heading Hierarchy 2 Semantic Meaning
<h1> to <h6> tags Use headings to convey
create a hierarchical the importance and
structure for your relationship of different
content. sections.
3 Paragraphs for Readability
Break your content into digestible paragraphs using <p> tags.
Linking Web Pages with
Hyperlinks
Anchor Tag
Use <a> tags to create hyperlinks. The href attribute specifies the destination.
External Links
Link to other websites using full URLs. Include https:// for secure connections.
Internal Links
Use relative paths to link to pages within your own website.
Embedding Images, Videos, and Other Media
Images Videos Audio
Use <img> tags to embed images. Embed videos using <video> tags Use <audio> tags to add sound to
Always include alt text for or iframe elements from platforms your web pages.
accessibility. like YouTube.
Creating Lists and Tables
List Type Tag Usage
Unordered List <ul> For bullet point lists
Ordered List <ol> For numbered lists
Definition List <dl> For term-
definition pairs
Table <table> For tabular data
HTML Forms for User Input
Form Container Input Types Form Handling
Use <form> tags to create a Utilize different input types like Specify form actions and methods
container for various input text, checkbox, radio, and submit to process user input on the
elements. buttons. server.
