الدرس 12: البنية الأساسية لصفحة HTML

00:05 البدء بهيكل HTML

استخدم هيكلاً أولياً بدلاً من إعادة كتابته من الذاكرة. انسخه إلى المحرر وجهز head ثم احفظ وأعد التحميل لرؤية أثر التعديل. تبقى مساحة المحتوى فارغة عندما تكون body فارغة، حتى مع وجود البيانات الوصفية.

01:44 وسوم الفتح والإغلاق

توضح الأمثلة عناصر مثل head وbody وعناصر أخرى مثل الصورة، مع استخدام المسافات البادئة لقراءة التداخل. تحتفظ head بالبيانات وتعريف الموارد، بينما تحتوي body ما يظهر للزائر. تعديل البيانات الوصفية لا يضيف فقرة ظاهرة إلى المحتوى.

03:12 الترميز وإعداد viewport

يستخدم المثال UTF-8 لعرض النصوص، ومنها العربية، ويربط viewport بحجم الشاشة وعرض الهاتف. توضع هذه الإعدادات في head ضمن بنية المستند قبل متابعة بيانات تحسين محركات البحث.

04:22 عنوان الصفحة والوصف

يجمع المثال اسم الصفحة والموقع في title ثم يعرضه في تبويب المتصفح. يُضاف الوصف بعنصر meta وقيمتي name وcontent. لا يكفي عد الأحرف لتوقع العرض لاختلاف عرض الحروف؛ وقد يستخدم Google محتوى الصفحة بدلاً من الوصف المقدم. وقد تختلف الإضافات عند فتح ملف محلي عن صفحة مقدمة عبر خادم.

08:26 إضافة العنوان الأساسي وفحصه

يضاف canonical إلى head للإشارة إلى عنوان مفضل مع بقاء الصفحة الحالية مفتوحة. راجع href والوجهة المقصودة ضمن فحوصات العناوين الأساسية والفهرسة، ولا تخلط الإشارة بتحويل ينقل المتصفح.

09:43 قراءة أجزاء URL

يشمل العنوان المطلق البروتوكول والنطاق والمسار، بينما يعتمد المرجع النسبي على سياقه. يشرح المثال البروتوكول والنطاق الفرعي والنطاق والامتداد والمسار. يؤكد فحص المصدر وجود العنوان والوصف وcanonical رغم عدم إضافة محتوى إلى body.