أساسيات لغة HTML مع أمثلة

سنعرض في هذا الفصل بعض أمثلة HTML الأساسية. أما بالنسبة للأوامر والعناصر الجديدة المستخدمة في كود HTMLالذي في الشرح، ما هو إلا توضيح لمعرفة الصورة العامة لذلك الكود، والذي سيتم شرحه لاحقاً بالتفصيل.

ملفات ومستندات HTML

يجب أن تبدأ جميع مستندات أو ملفات HTML بإعلان نوع ذلك المستند؛ أي بالعبارة <!DOCTYPE html>.

قبل البدء بكتابة الكود، يبدأ مستند الـ HTML بالكلمة أو الكود <html> وينتهي ذلك المستند بالأمر أو الكود </html>

يقع الجزء المرئي من مستند الـ HTML؛ أي الذي سيتم عرضه في المتصفح بين كل من العلامة <body>والعلامة </body>.

مثال على ملف أو مستند HTML

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

علامة الإعلان <!DOCTYPE>

يمثل الإعلان <!DOCTYPE> نوع المستند، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح. كما ويجب أن يظهر مرة واحدة فقط لا أكثر. (في أعلى الصفحة وقبل علامات HTML).

لا يهم أمر الإعلان <!DOCTYPE> طريقة كتابة الأحرف صغيرة أم كبيرة أي أنه ليس Case Sensitive.

مثال على استخدام الإعلان <!DOCTYPE>

طريقة إعلان <!DOCTYPE> في بيئة HTML5 هي:

العناوين في HTML

يتم تعريف عناوين HTML بالعلامات من <h1> الى <h6>. حيث يحدد <h1> العنوان الأكثر أهمية، بينما يحدد <h6> العنوان الأقل أهمية

مثال على العناوين في HTML

<h1/> هنا العنوان الأول <h1>

<h2/> هنا العنوان الأول <h2>

<h3/> هنا العنوان الأول <h3>

الفقرات في HTML

يتم تعريف الفقرة أو مجموعة الفقرات في الـ HTMLبالعلامة <p>

مثال على الفقرات في HTML

</p> هنا فقرة تحتوي على ..... <p>

</p> هنا فقرة أخرى تحتوي على ..... <p>

الروابط في HTML

يتم تعريف روابط الـ HTML بالعلامة <a> ، كما ويتم تحديد وجهة الارتباط (أي المكان المطلوب الوصول والذهاب اليه عن طريق الضغط على ذلك الارتباط) عن طريق السمة href أي (hrefattribute). حيث تُستخدم السمات لتوفير معلومات إضافية حول عناصر HTML.

مثال على الروابط في HTML

<a/>إضغط هنا للدخول الى موقعنا<"a href="https://www.pl4a.com>

وهنا، سيتم اظهار العبارة " إضغط هنا للدخول الى موقعنا "، وعند الضغط على ذلك الرابط، سيتم الانتقال تلقائياً الى موقع لغات البرمجة للعرب، أي الموقع www.pl4a.com.

وسوف تتعلم المزيد عن السمات في فصول لاحقة.

الصور في HTML

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

عند التعامل مع الصور في لغة HTML، يتم توفير مجموعة من السمات المرافقة للعلامة <img> وهي مكان مصدر الملف (src) والنص البديل (alt) والعرض width والارتفاع height:

مثال على الصور في HTML

فرضاً أننا أردنا عرض صورة اسمها pl4a.jpg تحت اسم "موقع لغات البرمجة للعرب" وبارتفاع 104 وعرض 110، فنكتب الكود البرمجي التالي في لغة HTML:

طريقة عرض مصدر كودات HTML

هل سبق لك أن رأيت صفحة ويب وتساءلت عن طريقة برمجة وكتابة تلك الصفحة باستخدام أكواد HTML!

عرض كود المصدر الخاص بالـ HTML

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

افحص عنصر HTML

انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة)، واختر "فحص" Inspectأو "فحص العنصر" Inspect Element لمعرفة العناصر المكونة. سترى كل من كودات HTMLوCSS. يمكنك أيضاً تحرير HTML أو CSS أثناء التنقل في لوحة العناصر أو الأنماط التي يتم فتحها. علماً أن ذلك التعديل أو التحرير ليس إلا تحريراً مؤقتاً لحين تحديث الصفحة.

الكترونيات للجميع

أساسيات HTML