أمثلة HTML الأساسية
سنعرض في هذا الفصل بعض أمثلة 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>
روابط HTML
يتم تعريف روابط HTML <a>بالعلامة:
مثال
<a href="https://www.w3schools.com">This is a link</a>
يتم تحديد وجهة الارتباط في hrefالسمة.
تُستخدم السمات لتوفير معلومات إضافية حول عناصر HTML.
سوف تتعلم المزيد عن السمات في فصل لاحق.
صور HTML
يتم تعريف صور HTML <img>بالعلامة.
الملف المصدر ( src) ، والنص البديل ( alt) ،
widthويتم heightتوفيرها كسمات:
مثال
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
كيفية عرض مصدر HTML؟
هل سبق لك أن رأيت صفحة ويب وتساءلت "مرحبًا! كيف فعلوا ذلك؟"
عرض كود مصدر HTML:
انقر بزر الماوس الأيمن في صفحة HTML وحدد "عرض مصدر الصفحة" (في Chrome) أو "عرض المصدر" (في Edge) ، أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي هذا إلى فتح نافذة تحتوي على شفرة مصدر HTML للصفحة.
افحص عنصر HTML:
انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة) ، واختر "فحص" أو "فحص العنصر" لمعرفة العناصر المكونة (سترى كل من HTML و CSS). يمكنك أيضًا تحرير HTML أو CSS سريعًا في لوحة العناصر أو الأنماط التي تفتح.