Your first web page: HTML from zero
Lesson 1 of 8
1Your first web page: HTML from zero
The big pictureEvery site you have ever visited, from Google to Darb, starts with a plain text file called HTML. It needs no special software: a text editor and a browser are enough. In this lesson you write your first page by hand and watch it work.
What the picture shows: The journey of an HTML file: you write it in an editor, the browser reads it line by line, turns each tag into an element, then draws them on screen. Edit the file, press refresh, and the page changes.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
Think of the page as a letter to a friend, but with small labels marking each part: a "heading" label on the first line, a "paragraph" label around the words, an "image" label where the picture goes. The browser is the friend who reads the labels and lays the letter out on screen as you asked. The labels are called "tags", and the language of labels is HTML.
HTML is a markup language, not a programming language: no variables, no conditions, just a tree of elements. The browser's parser turns the text into the DOM tree, then computes styles and paints. The parser is very forgiving: it closes forgotten tags and repairs bad nesting by rules set in the HTML Living Standard, so a page with mistakes may "work" with a tree other than the one you meant. Elements come in two display kinds: block ones take a full line, like p and h1, and inline ones flow inside text, like a and strong. Some elements are void, with no closing tag, like img, br and input.
Before You Start
💻A computer or phone and a browser
Any modern browser: Chrome, Firefox, Edge or Safari.
📂Files and paths
From "How a computer works": you know how to save a file and find it again.
🌐How the internet works
You know the browser asks a server for a page and the server sends it.
The Core Idea
1What is a web page? Three languages, each with a job
When you open a site, the server sends your browser text files. Three matter most, and each has a job that does not overlap the others:
HTML is structure and content: what the heading is, which are paragraphs, where the image goes, where the button is. CSS is looks: colours, fonts, spacing and how things are arranged on screen. JavaScript is behaviour: what happens when you press the button or type in a box. This lesson and the next teach HTML, then CSS, then JavaScript.
2Tags, elements and attributes
A tag is a word between angle brackets, like <p>. Most tags come in pairs: an opening tag <p> and a closing tag </p> with a slash. The two tags plus what is between them make an element. An attribute is extra information written inside the opening tag as name="value".
Anatomy of a link element: the two tags and the content are one element, and the href attribute tells the link where to go.
وسم الفتح المحتوى وسم الإغلاق
| | |
<a href="https://darb.dev"> ادخل درب </a>
\________________/
خاصية: اسم="قيمة"
\_______________________________________/
العنصر كاملًاTry it yourself: your first tags
Change any text in the code and watch the page update on its own. You cannot break anything, and the restore button brings the original code back.
<strong>important without closing it and everything after it turns bold, nearly to the end of the page. The browser shows no error message; it guesses, and its guess is often not what you meant.3The file skeleton: head and body
Every complete HTML page has the same skeleton. Copy it into every new file you start:
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبًا بالعالم</h1>
<p>هذه أول صفحة أكتبها بيدي.</p>
</body>
</html>Line by line: <!doctype html> tells the browser it is a modern HTML page. <html lang="en"> wraps everything, and lang is the page language (it helps screen readers and search engines); for Arabic you would also add dir="rtl" for right-to-left. The head <head> holds information about the page that does not show in it: the utf-8 encoding so every alphabet displays correctly, the viewport line so it fits a phone, and <title>, the text on the browser tab. The body <body> is everything the visitor sees.
How do you try it on your machine? (1) Open an editor: VS Code or even Notepad. (2) Paste the skeleton above. (3) Save the file as index.html (make sure the extension is .html, not .txt). (4) Double-click the file and it opens in the browser. (5) Edit in the editor, save, then press F5 in the browser to see the change.
! in an empty .html file and press Tab: it writes the whole skeleton for you. The Live Server extension refreshes the browser by itself every time you save.4Headings, paragraphs and text formatting
Headings come in six levels, from h1 (the most important and biggest) to h6. Give a page one h1 that says what it is about, then h2 for sections, then h3 inside those, like a book's table of contents. A paragraph is p, a line break inside a paragraph is br, and a divider between topics is hr.
A café page: headings and paragraphs
Try changing an h2 to h1 and watch it grow, then add a new paragraph under "Opening hours".
Notice: strong for an important word (shown bold), em for emphasis (italic), mark for highlighting, and small for side notes. Pick an element by meaning, not looks; you will change the looks later with CSS however you like.
h4 because its size "looks right": headings are a map of the page that screen readers and search engines rely on. Order them by importance and change the size with CSS.5Links and images
A link <a> takes an href attribute with the destination: another site (https://...), a page on your site (about.html), a section on the same page (#hours), or an email (mailto:). An image <img> is a void element with no closing tag; it takes src, the image path, and alt, a text description for whoever cannot see it.
Links and an image
Change width to 80, then to 300. Then delete the src attribute and see what shows in place of the image: that is the alt text.
Paths in src and href come in two kinds: absolute, starting with https:// and pointing somewhere on the internet, and relative, starting from where your current file is: images/cup.jpg means "the images folder next to this file". That is why your project's folder layout matters.
alt empty or writing "image". A blind visitor hears "image" and learns nothing. Describe what is in it in a short sentence, and use alt="" only for decorative images that add no information.6Lists and tables
An unordered list ul (bullets) and an ordered list ol (numbers), each item an li. A table table is made of rows tr, and each row holds cells: th for a header and td for data. Use tables for real tabular data (prices, timetables), not for laying out the page.
A list of steps, a bullet list and a price table
Add a fourth step to the ordered list and notice the number appears on its own. Then add a table row for a "Cappuccino".
ul inside an li, and that is how most sites build their drop-down menus.7Nesting and developer tools: find your mistakes
Elements nest like boxes inside boxes: body holds a ul, the ul holds an li, and an li may hold an a. The golden rule: what opened last closes first. <p><strong>text</strong></p> is correct, and <p><strong>text</p></strong> is wrong because the boxes cross.
This is how the browser sees your page: a tree. Every element is a "child" of the one containing it. The tree is called the DOM, and you will edit it later with JavaScript.
body
├─ h1 ........ "مقهى درب"
├─ p
│ └─ strong "مقهى درب"
└─ ul
├─ li .... "لاتيه"
└─ li
└─ a . "موكا"Developer tools (DevTools) are built into every browser: press F12, or right-click anything on the page and choose "Inspect". The Elements tab shows the tree as the browser actually understood it, not as you wrote it. If something is out of place, you will see it here: an element that moved somewhere odd, or a tag the browser closed for you.
Worked example
Problem: Ahmed wrote this page; all the text after the word "sale" came out bold, and the image does not show. What is wrong?
<h1>عرض اليوم</h2> <p>لاتيه بـ <strong>تخفيض 20%</p> <img src="images/latte.jpg> <p>العرض حتى المساء</p>
Analysis: (1) h1 was opened and closed with h2: the two tags must match. (2) strong was never closed, so the bold ran to the end. (3) The src value is missing its closing quote, so the browser took the rest of the line as part of the path. (4) The image has no alt. Fix:
The fixed version
The image will not load here because the file does not exist, but notice the alt text shows in its place. That is what it is for.
Myth vs Reality
| Myth | Reality |
|---|---|
| HTML is a programming language. | It is a markup language: it describes content and runs no logic. Programming starts with JavaScript, but no site exists without HTML. |
| You need expensive software to make a web page. | Your computer's Notepad and a browser are enough. VS Code is free and makes it easier. |
| If the page shows, the code is correct. | The browser silently repairs your mistakes by guessing. Check with developer tools and the validator. |
Where you meet it at work
🌍Every website and web app
From shops to banks to learning platforms: they all start with HTML.
📧Formatted emails
Newsletters and colourful invoices are written in HTML.
📱Hybrid mobile apps
Many apps show HTML pages inside them.
Test your understanding
Which line writes a correct link to Wikipedia?
A link is the a element, and its destination is the href attribute. src is for images.
Where do you write the title shown on the browser tab?
head holds information about the page, including title, shown on the tab and in search results.
Which nesting is correct?
What opened last closes first: em opened inside p, so it closes before p.
Why do we write alt for an image?
Screen readers read alt aloud, and the text shows in place of the image if it fails to load.
You want recipe steps numbered automatically. Which element?
ol is an ordered list: the browser writes the numbers and renumbers when you add an item.
Quick review cards
<p>, usually in an opening and closing pair.Check Your Understanding
What is the difference between a tag and an element?
The tag is <p> or </p> alone; the element is both plus the content between them.
Why do we need <meta charset="utf-8">?
So the browser knows the character encoding and Arabic and symbols display correctly instead of garbage.
An image does not show on your page. What are the first three things you check?
That the src path is right relative to the file's location, that the file name and extension match exactly (even upper and lower case), and that the quotes are closed.
When do you use a table and when not?
For data arranged in rows and columns, like prices and timetables, not for page layout; layout is CSS's job.
Resources for this lesson
Grouped by type. Start with the official docs for precision, or an article or video for the explanation.
course3
Done with this lesson?
Sign in to save your progress.