Your first web page · صفحتك الأولى على الويب
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
العربية
أهلاً بك في الويب
- تتكون صفحة الويب باستخدام HTML.
- HTML هو مجرد نصوص محاطة بـ وسوم (Tags).
- تكتب HTML هنا وترى النتيجة تظهر أمامك — لا حاجة للتثبيت.
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
العربية
كيفية عمل هذه الصفحة
- اكتب في الصندوق، ثم اضغط على ▶ لرؤية صفحتك.
- اضغط على ✓ Check لترى ما إذا كانت مهمتك صحيحة.
- عالق؟ اضغط على 💡 للحصول على تلميح. اضغط على ↻ للبدء من جديد.
- اقرأ كل خطوة، ثم اضغط متابعة.
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
العربية
الوسوم يحيط بكلماتك
- الـ وسم (Tag) هو كلمة داخل أقواس حادة، مثل
<p>. - تأتي معظم الوسوم في زوج: وسم افتتاحي
<p>ووسم إغلاق</p>. - الـ
<p>ينشئ فقرة — كتلة من النص.
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
العربية
أكثر من فقرة
- ضع كل فقرة في زوج خاص بها من وسم
<p>. - يعرض المتصفح الفقرات تباعاً، من الأعلى إلى الأسفل.
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
العربية
أخطاء شائعة
- توضع الوسوم بين الأقواس الحادة؛ والنص الذي تراه يكون بينهما.
- معظم الوسمات تأتي على شكل أزواج، مثل
<p>...</p>.
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
العربية
الآن جرب بنفسك
- أدناه مهمتان صغيرتان. اكتب كود HTML الخاص بك واضغط على ▶ لرؤيته.
- اضغط على ✓ Check عندما تعتقد أن الإجابة صحيحة. يمكنك المحاولة عدد غير محدود من المرات.
Explore · استكشف
HTML is a tree of nodes · HTML هو شجرة من العقد
Tags nest inside tags — the browser builds a tree (the DOM). · تتداخل الوسمات داخل وسمات — يبني المتصفح شجرة (DOM).
Write a paragraph that says Hello, world! — type your text between the <p> and </p> tags. · اكتب فقرة تقول مرحباً بالعالم! — اكتب نصك بين وسمتي <p> و </p>.
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · أضف فقرة ثانية أسفل الأولى. اجعلها تقول لقد صنعت هذا. (استخدم زوجاً جديداً من وسمتي <p> … </p>.)