كل صفحة ويب تراها لها هيكل: عنوان هنا، وفقرة هناك، وقائمة وصورة. اللغة التي تبني هذا الهيكل اسمها HTML، والمتصفح يقرؤها ويعرض الصفحة.
نكتب HTML بـالوسوم. أغلب الوسوم زوج: وسم بداية مثل <p> ووسم نهاية فيه شرطة مائلة </p>، والمحتوى بينهما. عدّل النص ولاحظ المعاينة:
<h1>My Notepad</h1> <h2>Today's shopping list</h2> <p>Bread</p>
<h1> إلى <h6> عناوين: h1 أكبرها وh6 أصغرها. و<p> فقرة نص. أما <br> فينزل إلى سطر جديد، وليس له وسم نهاية. نحتاجه لأن المتصفح يتجاهل ضغطات Enter في الكود.
<h3>My Notepad</h3> <h6>Today's shopping list</h6> <p>Bread<br> Milk<br> Cheese</p>
القوائم
<ul> قائمة نقطية و<ol> قائمة مرقّمة. كل عنصر في القائمة يوضع داخل <li>، والمتصفح يضيف النقاط أو الأرقام بنفسه.
<h2>Tomorrow's Schedule</h2> <ol> <li>Science</li> <li>Math</li> <li>Music</li> </ol> <h2>Bring</h2> <ul> <li>Pencil case</li> <li>Water bottle</li> </ul>
الصور والسمات
<img> يعرض صورة، وليس له وسم نهاية. لكنه وحده لا يعرف أيّ صورة يعرض؛ نخبره بـسمة داخل وسم البداية: src="اسم الملف". والسمة alt تصف الصورة، فيظهر وصفها إذا لم تُحمَّل الصورة، وتقرؤه برامج القراءة لضعاف البصر.
<h2>Birthday party</h2> <ul> <li>Cake<br><img src="img/cake.svg" alt="A pink cake"></li> <li>Balloons<br><img src="img/balloons.svg" alt="Red balloons"></li> </ul>
الصورة الثانية غير موجودة، لذلك ظهر نص alt مكانها. ولكتابة ملاحظة لا تظهر في الصفحة نستخدم التعليق <!-- ... -->:
<!-- Prices change next week --> <h1>Drink Menu</h1> <p>Orange juice: 20 pounds<br> Mango juice: 25 pounds</p>
<h1>Hello<h1> تجعل كل ما بعدها عنوانًا كبيرًا؛ الصحيح <h1>Hello</h1>.تدريبات
اعرض My Notepad بالوسم h3، وToday's shopping list بالوسم h6.
___My Notepad___ ___Today's shopping list___
أضف <br> بعد Bread وبعد Ham حتى تظهر كل كلمة في سطر مستقل.
<h2>Shopping list</h2> <p>Bread Ham Cheese</p>
حوّل الكلمات الأربع تحت العنوان إلى قائمة نقطية بالوسمين ul وli (بنفس الترتيب).
<h1>Shopping List</h1> Tomato Onion Mushroom Garlic
حوّل خطوات عمل الحساء إلى قائمة مرقّمة بالوسمين ol وli.
<h1>How to Make Tomato Soup</h1> Boil water Add ingredients Adjust the seasoning
في العنصر الثالث (Ball) أضف بعد <br> صورة: src قيمتها img/ball.svg وalt قيمتها An orange ball.
تلميح
اكتب السمتين داخل وسم البداية:<img src="..." alt="..."><h1>My Wishlist</h1> <ul> <li>Cake<br><img src="img/cake.svg" alt="A pink cake"></li> <li>Book<br><img src="img/book.svg" alt="A blue book"></li> <li>Ball<br></li> </ul>
اجعل السطر الأول تعليقًا في HTML حتى لا يظهر في الصفحة.
___ The h1 tag is a heading. ___ <h1>Hello</h1>
اكتب صفحة تعريف من ثلاثة أسطر بهذا الترتيب: عنوان h1 نصه Sara's Page، ثم فقرة p نصها I love reading.، ثم صورة src قيمتها img/book.svg وalt قيمتها My favourite book.
النقاط الرئيسية
- الوسوم أزواج:
<p>...</p>، ما عدا<br>و<img>. h1–h6عناوين، وpفقرة، وul/olمعliقوائم.<img src="..." alt="...">:srcملف الصورة وaltوصفها.- التعليق
<!-- ... -->لا يظهر في الصفحة.