الدرس 01 · First page

What HTML is

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

Every web page starts as a plain text file. HTML is the language of that file: tags that say which part is a heading, which is a paragraph and which is a link. Follow a five-line file as a browser reads it, line by line, and watch each element appear on the page. Then meet the two languages that work alongside it: CSS for looks and JavaScript for behaviour.

8 دقيقة11 خطوات5 أسئلةBeginner

شكل 1 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

طبّق ما تعلّمته

جرّب

0/1 تمارين ناجحة

Give your page a heading

Create an h1 with the exact text My first page, then add a paragraph. Watch the preview change as you type.

الشيفرة الخاصة بك

اضغط Ctrl/Cmd + Enter للتشغيل. يضيف Tab مسافة بادئة؛ واضغط Escape ثم Tab لمغادرة المحرّر.

جاهز

المخرجات

شغّل الشيفرة لرؤية مخرجاتها.

الاختبارات

تحقّق من الشيفرة عندما تكون مستعدًا.

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01In <h1>Hello!</h1>, which part is the closing tag?

The closing tag repeats the element's name with a slash: </h1>. <h1> is the opening tag, Hello! is the content, and all three together make one element.

02What does the browser show for <title>My page</title>?

The title element is not drawn on the page. The browser shows it on the tab and uses it as the suggested name for a bookmark.

03Which line nests its elements correctly?

An element inside another must close before the outer one does: open p, open em, close em, close p.

04In <a href="about.html">About</a>, what is href="about.html"?

Attributes sit inside the opening tag as name="value" and add details. href is the link's destination; About is the content the reader clicks.

05Which job belongs to HTML rather than to CSS or JavaScript?

HTML describes what each part is (structure). CSS sets how it looks, and JavaScript, a programming language, makes the page do things.

المصطلحات الأساسية

المسرد

HTML: HyperText Markup Language: plain text with tags that describes the structure of a web page.
Tag: A label in angle brackets. An opening tag like <p> starts an element; a closing tag like </p>, with a slash, ends it.
Element: An opening tag, its content and its closing tag together, such as <h1>Hello!</h1>: one part of the page.
Attribute: Extra information inside an opening tag, written name="value", such as href="about.html" on a link.
Nesting: Putting elements inside other elements. The inner one must close before the outer one.
Browser: The program that reads HTML files and draws the pages they describe, such as Chrome, Firefox, Safari or Edge.
CSS: Cascading Style Sheets: the language that sets how HTML looks, such as colours, fonts and layout.
JavaScript: A programming language the browser runs to make a page interactive.

تفاصيل إضافية

الملاحظات والمصادر

A complete page usually also has <html>, <head> and <body> tags. The HTML standard lets you leave them out, and the browser adds them for you, so these five lines make a working page. A later lesson shows the full shape.
<!DOCTYPE html> switches the browser to "standards mode". Without it, browsers fall back to "quirks mode", which copies the bugs of very old browsers.
The browser reads the whole file in order and builds the page from it almost at once. The figure draws one element per step so you can follow it.
How big a heading is, the italics and the blue underline are the browser's default styles. CSS can change all of them; the HTML only says what each part is.
The file on the card is real HTML. Save it as index.html, open it in any browser and you get the page shown.

اختبار يتاح بعد الخطوة الأخيرة.