الكورس الثاني: اساسيات لغة HTML

الكورس الثاني: اساسيات لغة 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).

ملاحظة: ويجب الانتباه الى حالة الاحرف الكبيرة.

عناوين HTML

يتم تعريف عناوين HTML بعلامات <h1>الى  <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>

صور HTML

يتم تعريف صور HTML بالعلامة <img>

مثال

<img src="wpmrj3.com/wp-contetn/themes/wpmrj3/img/image.jpg" alt="wpmrj3.com" width="104" height="142">

كيفية عرض مصدر HTML؟

هل تتسائل كيف الان انت تقرأ هذه العبارات التي تقرأها حالياً؟”

عرض كود مصدر HTML:

انقر بزر الماوس الأيمن في صفحة HTML وحدد “عرض مصدر الصفحة” (في Chrome) أو “عرض المصدر” (في Edge) ، أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي هذا إلى فتح نافذة تحتوي على شفرة مصدر HTML للصفحة.

افحص عنصر HTML:

انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة) ، واختر “فحص” أو “فحص العنصر” لمعرفة العناصر المكونة (سترى كل من HTML و CSS). يمكنك أيضًا تحرير HTML أو CSS سريعًا في لوحة العناصر أو الأنماط التي تفتح.