في هذا الفصل سوف نعرض بعض أمثلة HTML الأساسية.
لا تقلق إذا استخدمنا علامات لم تتعلم عنها بعد.
مستندات HTML
يجب أن تبدأ جميع مستندات HTML بإعلان نوع المستند <!DOCTYPE html>:.
يبدأ مستند HTML نفسه بـ <html>وينتهي بـ </html>.
يقع الجزء المرئي من مستند HTML بين <body>و </body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>إعلان <! DOCTYPE>
يمثل الإعلان <!DOCTYPE>نوع المستند ، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح.
يجب أن يظهر مرة واحدة فقط في أعلى الصفحة (قبل أي علامات HTML).
الإعلان <!DOCTYPE>ليس حساسًا لحالة الأحرف.
إعلان <!DOCTYPE>HTML5 هو:
<!DOCTYPE html>
عناوين HTML
يتم تعريف عناوين HTML بعلامات <h1>to <h6>.
<h1>يحدد العنوان الأكثر أهمية. <h6>يحدد العنوان الأقل أهمية:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>فقرات HTML
يتم تعريف فقرات HTML بالعلامة <p>:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>يتم تحديد وجهة الارتباط في hrefالسمة.
تُستخدم السمات لتوفير معلومات إضافية حول عناصر HTML.
سوف تتعلم المزيد عن السمات في فصل لاحق.
صور HTML
يتم تعريف صور HTML بالعلامة <img>.
الملف المصدر ( src) ، والنص البديل ( alt) ، widthويتم heightتوفيرها كسمات:
<img src="menoufy.jpg" alt="menoufy.me" width="104" height="142">كيفية عرض مصدر HTML
هل سبق لك أن رأيت صفحة ويب وتساءلت “مرحبًا! كيف فعلوا ذلك؟”
عرض كود مصدر HTML
انقر بزر الماوس الأيمن في صفحة HTML وحدد “عرض مصدر الصفحة” (في Chrome) أو “عرض المصدر” (في Edge) ، أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي هذا إلى فتح نافذة تحتوي على شفرة مصدر HTML للصفحة.
افحص عنصر HTML
انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة) ، واختر “فحص” أو “فحص العنصر” لمعرفة العناصر المكونة (سترى كل من HTML و CSS). يمكنك أيضًا تحرير HTML أو CSS سريعًا في لوحة العناصر أو الأنماط التي تفتح.
