HTMLإتش تي إم إل

A web page is a text file. HTML is the language it is written in, and the browser is what turns it into a page.

صفحة الويب ملف نصي، ولغته هي HTML، والمتصفح هو الذي يحوّله إلى صفحة.

Everything starts with one plain text file, saved with a .html extension, opened in a browser. This lesson walks through doing exactly that, one careful step at a time.

كل شيء يبدأ بملف نصي عادي واحد، محفوظ بامتداد .html، ومفتوح في متصفح. هذا الدرس يشرح كيف تفعل ذلك بالضبط، خطوة خطوة بعناية.

Every real HTML page has the same four-part shape: a doctype, <html>, <head>, and <body>. This lesson shows what each part is for.

لكل صفحة HTML حقيقية نفس الشكل المكوَّن من أربعة أجزاء: doctype، و <html>، و <head>، و <body>. يشرح هذا الدرس وظيفة كل جزء منها.

Every browser has a set of developer tools built in. They let you see the page as the browser understands it, and change it live — the fastest way to learn, and the fastest way to fix.

في كل متصفح أدوات مطوّرين مدمجة. تتيح لك رؤية الصفحة كما يفهمها المتصفح، وتعديلها مباشرة — وهي أسرع طريقة للتعلّم، وأسرع طريقة للإصلاح.

An element is an opening tag, its content and its closing tag — except for void elements, which have no closing tag at all. Attributes add extra information inside an opening tag, written name="value".

العنصر هو وسم فتح ومحتوى ووسم إغلاق — إلا العناصر الفارغة، التي لا وسم إغلاق لها أصلًا. والسمات تضيف معلومات إضافية داخل وسم الفتح، وتُكتب name="value".

HTML gives you six heading levels, <h1> down to <h6>. The number is a rank, not a size.

تعطيك HTML ستة مستويات للعناوين، من <h1> إلى <h6>، والرقم يدل على الأهمية لا على الحجم.

The <p> tag marks one paragraph, one idea. The browser collapses every space and line break inside it into a single space, and adds its own spacing above and below.

الوسم <p> يُعرِّف فقرة واحدة، فكرة واحدة. والمتصفح يدمج كل مسافة وسطر جديد داخلها في مسافة واحدة، ويضيف تباعده الخاص فوقها وتحتها.

Three tags for shaping text precisely: <br> forces a line break, <hr> marks a break between topics, and <pre> keeps your spacing exactly as you typed it.

ثلاثة وسوم لتشكيل النص بدقة: <br> يفرض كسر سطر، و <hr> يفصل بين موضوعين، و <pre> يحافظ على تباعدك كما كتبته تمامًا.

Seven tags for text that carries meaning, not just a look — <strong> marks real importance and <em> marks real emphasis, and appearance is only ever a side effect.

سبعة وسوم لنص يحمل معنى، لا مجرد شكل — <strong> تعني أهمية حقيقية و <em> تعني تشديدًا حقيقيًا، والمظهر ليس إلا أثرًا جانبيًا.

Four tags for quoting someone else's exact words: <blockquote> for a quotation that stands on its own, <q> for one inside a sentence, <cite> to name the source, and <abbr> to spell out an abbreviation on hover.

أربعة وسوم لاقتباس كلام شخص آخر كما قاله بالضبط: <blockquote> لاقتباس قائم بذاته، و <q> لاقتباس داخل جملة، و <cite> لذكر المصدر، و <abbr> لشرح اختصار عند المرور عليه بالمؤشر.

A comment, written <!-- like this -->, is a note the browser skips completely — for notes to yourself and for hiding a piece of code while you test.

التعليق، ويُكتب <!-- هكذا -->، ملاحظة يتجاوزها المتصفح تمامًا — لتدوين ملاحظات لنفسك، ولإخفاء قطعة كود مؤقتًا أثناء الاختبار.

The <a> tag turns text into a link. Its href attribute is the destination — another site, a file beside yours, an email address, or a phone number.

الوسم <a> يحوّل النص إلى رابط، وسمته href هي الوجهة: موقع آخر، أو ملف بجانب صفحتك، أو بريد إلكتروني، أو رقم هاتف.

Give any element an id and you can link straight to it with # — the browser jumps to that spot on the same page instead of loading a new one.

أعطِ أي عنصر سمة id وستستطيع الربط إليه مباشرة بـ # — فيقفز المتصفح إلى تلك النقطة في الصفحة نفسها بدل تحميل صفحة جديدة.

The <img> tag shows a picture on the page. It needs a src to know which file, and an alt to say what is in it — for the visitor who cannot see it.

الوسم <img> يعرض صورة في الصفحة. يحتاج src ليعرف أي ملف، وalt ليقول ما فيها — من أجل الزائر الذي لا يستطيع رؤيتها.

One image file cannot suit both a phone and a wide screen. srcset offers the browser a choice of sizes, <picture> lets you swap the image entirely, and loading="lazy" keeps the ones further down from slowing the page.

ملف صورة واحد لا يناسب الهاتف والشاشة العريضة معًا. تعرض srcset على المتصفح خيارات من الأحجام، ويتيح <picture> استبدال الصورة كليًا، ويمنع loading="lazy" الصور البعيدة من إبطاء الصفحة.

Use <ul> for a list where order does not matter, and <ol> for one where it does — every item, either way, goes inside its own <li>.

استخدم <ul> لقائمة لا يهم فيها الترتيب، و <ol> لقائمة يهم فيها الترتيب — وفي الحالتين كل عنصر يوضع داخل <li> خاص به.

Use <dl> when you have a set of terms and their meanings — each <dt> is a term, each <dd> is what it means.

استخدم <dl> عندما يكون لديك مجموعة من المصطلحات ومعانيها — كل <dt> مصطلح، وكل <dd> معناه.

A table is a grid of rows and cells for data that truly has rows and columns — not a tool for arranging the page.

الجدول شبكة من الصفوف والخلايا للبيانات التي فيها فعلًا صفوف وأعمدة — وليس أداة لترتيب الصفحة.

Group a table into row sections, make one cell span several rows or columns, and give the whole table a caption a screen reader announces first.

جمّع صفوف الجدول في أقسام، اجعل خلية واحدة تمتد عبر عدة صفوف أو أعمدة، وأعطِ الجدول كله عنوانًا توضيحيًا يعلنه قارئ الشاشة أولًا.

<div> and <span> are containers with no meaning of their own — <div> for a block, <span> for a piece of inline text — that exist purely so CSS can style or position them later.

<div> و<span> حاويتان بلا معنى خاص بهما — <div> لكتلة، و<span> لقطعة نص مضمّنة — وجودهما فقط ليتيحا لـ CSS تنسيقهما أو تحديد موضعهما لاحقًا.

Two things every real page uses: data-* attributes for attaching your own information to an element, and inline <svg> for icons that stay sharp and take their colour from the text around them.

شيئان تستخدمهما كل صفحة حقيقية: سمات data-* لإرفاق معلوماتك الخاصة بعنصر، و<svg> المضمّن للأيقونات التي تبقى حادة وتأخذ لونها من النص حولها.

Elements like <header>, <nav>, <main> and <footer> say what a region of the page actually is, not just how to group it — which is what makes a page usable by screen readers and search engines, not only by eyes.

عناصر مثل <header> و<nav> و<main> و<footer> تقول ما هي منطقة الصفحة فعلًا، لا مجرد كيفية تجميعها — وهذا ما يجعل الصفحة قابلة للاستخدام بقارئات الشاشة ومحركات البحث، لا بالعين وحدها.

A form is how a page collects something from the visitor and sends it somewhere. You need four things: <form>, action, method, and an input with a label.

النموذج هو الطريقة التي تجمع بها الصفحة شيئًا من الزائر وترسله إلى مكان ما. وتحتاج فيه إلى أربعة أشياء: <form> و action و method وحقل إدخال له تسمية.

The type attribute changes what kind of box an <input> gives you — and, on a phone, which keyboard appears. It is a hint to the browser, not a guarantee.

سمة type تُغيّر نوع الصندوق الذي يعطيك إياه <input> — وعلى الهاتف، تُغيّر لوحة المفاتيح التي تظهر. وهي تلميح للمتصفح لا ضمان.

Sometimes a visitor should pick from a fixed set instead of typing freely. Checkboxes let them choose several; radio buttons — tied together by a shared name — let them choose exactly one; <select> gives a dropdown list; and <datalist> only suggests values while still letting them type anything.

أحيانًا يجب أن يختار الزائر من مجموعة محددة بدل الكتابة الحرة. مربعات الاختيار تتيح له اختيار أكثر من واحد، وأزرار الاختيار — المرتبطة معًا بسمة name مشتركة — تتيح له اختيار واحد فقط، و <select> يعطي قائمة منسدلة، أما <datalist> فيقترح قيمًا فقط بينما يظل بإمكانه كتابة أي شيء.

This lesson covers <textarea> for multi-line text, the three types a <button> can take, and <fieldset>/<legend> for grouping related fields together.

يغطي هذا الدرس <textarea> للنصوص متعددة الأسطر، والأنواع الثلاثة التي يقبلها <button>، و <fieldset>/<legend> لتجميع الحقول المرتبطة معًا.

HTML can ask the browser to check a field before it submits — required, pattern, min and max. This is convenience, never security: the server must always check the data again.

تستطيع HTML أن تطلب من المتصفح التحقق من الحقل قبل الإرسال — بـ required و pattern و min و max. وهذا للراحة فقط، وليس أمانًا: يجب أن يتحقق الخادم من البيانات مرة أخرى دائمًا.

HTML reserves <, > and & for its own syntax, so to show one of them as plain text you write a short code called an entity instead — plus a handful of others, like   and ©, for characters your keyboard cannot type.

تحتفظ HTML بالحروف < و> و& لصياغتها الخاصة، ولذلك تكتب لإظهار أي منها كنص عادي رمزًا قصيرًا يسمى كيانًا بدلًا من الحرف نفسه — إضافة إلى عدد آخر منها، مثل   و©، لحروف لا تستطيع لوحة مفاتيحك كتابتها مباشرة.

<audio> plays a sound file, <video> plays a video with a set of built-in controls, and <iframe> embeds an entirely separate web page — a map, a video host, anything with a URL — inside yours.

<audio> يشغّل ملف صوت، و<video> يشغّل فيديو بمجموعة أدوات تحكم جاهزة، و<iframe> يُضمّن صفحة ويب منفصلة تمامًا — خريطة، أو مضيف فيديو، أو أي شيء له رابط — داخل صفحتك.

HTML has two interactive elements built in: <details> opens and closes a section, and <dialog> is a real modal. Both come with keyboard support and screen reader support you would otherwise have to write yourself.

في HTML عنصران تفاعليان مدمجان: <details> يفتح قسمًا ويغلقه، و<dialog> نافذة حوار حقيقية. ويأتي كلاهما بدعم لوحة المفاتيح وقارئ الشاشة الذي كنت ستكتبه بنفسك لولاهما.

The <head> holds information about the page that never appears in the page itself: the character encoding, the mobile viewport, the search-engine description, and the tab icon.

يحمل <head> معلومات عن الصفحة لا تظهر داخلها أبدًا: ترميز الأحرف، والعرض على الجوال، والوصف الذي تراه محركات البحث، وأيقونة التبويب.

A page becomes real once you connect it to a stylesheet with <link> and a script with <script> — two tags that pull in the files that make the page look good and do things.

تصبح الصفحة حقيقية حين تربطها بملف تنسيق عبر <link> وبملف سكربت عبر <script> — وسمان يجلبان الملفات التي تُجمّل الصفحة وتجعلها تفعل شيئًا.

Accessibility is not new syntax — it is using alt, <label>, heading order and the right lang the way they were meant to be used, so a screen reader can read your page correctly.

إتاحة الوصول ليست صيغة جديدة، بل استعمال alt و <label> وترتيب العناوين والسمة lang الصحيحة كما ينبغي، ليستطيع قارئ الشاشة قراءة صفحتك بشكل صحيح.

Build a small personal site of three linked pages — home, about and contact — that uses everything the course has taught you: semantic layout, headings, images, a list, a table, and a real form.

ابنِ موقعًا شخصيًا صغيرًا من ثلاث صفحات مترابطة — الرئيسية ونبذة عني واتصل بي — يستخدم كل ما علّمك إياه هذا المقرر: تخطيطًا دلاليًا، وعناوين، وصورًا، وقائمة، وجدولًا، ونموذجًا حقيقيًا.