شرح HTML وتمارين إضافية

تحتاج إلى حاسوب ومتصفح وبرنامج تكتب فيه الكود. ستفتح صفحتك على جهازك مباشرة؛ لا تحتاج إلى نشرها على الإنترنت.

1. استخدم برنامجاً لكتابة النصوص، مثل المفكرة، أو ثبّت Visual Studio Code. أنشئ مجلداً باسم first-page وافتحه في البرنامج.
2. داخل المجلد، أنشئ ملفاً باسم index.html. إذا استخدمت المفكرة، تأكد أنها لم تضف .txt إلى نهاية الاسم.
3. اكتب المثال الكامل واحفظه بترميز UTF-8. انقر مرتين على index.html لفتحه في المتصفح.
4. غيّر الاسم في المثال إلى اسمك، واحفظ الملف، ثم حدّث صفحة المتصفح لترى التغيير.

باستخدام HTML، تخبر المتصفح أن هذا النص عنوان، وهذا النص فقرة، وهذه قائمة. انظر إلى الكود والنتيجة بجانبه، وحاول معرفة السطر الذي أظهر كل جزء.

<!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>
  <main>
    <h1>مرحباً، أنا سارة</h1>
    <p>أتعلّم بناء المواقع، وهذه صفحتي الأولى.</p>
    <h2>ثلاثة أشياء أحبّها</h2>
    <ul>
      <li>القراءة</li>
      <li>الرسم</li>
      <li>تعلّم شيء جديد</li>
    </ul>
    <a href="https://developer.mozilla.org/">موقع أحبّه</a>
  </main>
</body>
</html>

head / body

head للإعدادات، مثل اسم تبويب المتصفح. body للمحتوى الذي يراه الزائر، مثل النصوص والصور.

h1 / h2 / p

h1 للعنوان الرئيسي؛ h2 لعنوان قسم؛ p لفقرة نصية.

ul / li

اكتب القائمة داخل ul، وكل عنصر داخل li.

a / href

استخدم a للرابط، واكتب وجهته داخل href. اكتب بين الوسمين نصاً يوضح للزائر إلى أين ينقله الرابط.

عنصر / خاصية

العنصر يحدّد نوع المحتوى، مثل العنوان أو الرابط. الخاصية تضيف معلومات عنه؛ مثلاً href تحدّد وجهة الرابط.

غيّر النص داخل h1، ثم داخل title. أيّهما غيّر العنوان أمامك، وأيّهما غيّر اسم التبويب؟