HTML / أساسيات اللغة
أنواع الوسوم في HTML
بشكل عام، أي شيء يتم إضافته في الصفحة يقال له وسم (Tag) ويوجد نوعين من الوسوم:
-
وسوم فردية (Single Tags):
هذه الوسوم لا يمكن وضع وسم آخر فيها، مثل الوسم
<br>الذي يستخدم للفصل بين الأسطر. -
وسوم زوجية (Paired Tags):
هذه الوسوم يمكن أن يوضع فيها وسوم أخرى، مثل الوسم
<p></p>الذي يُستخدم لكتابة فقرات.
في هذا الدرس ستتعرف على القواعد الأساسية لكتابة كود HTML.
وسوم البداية والنهاية
عند استخدام وسم فردي، يمكنك عدم وضع الرمز / في آخره، لكن يُفضل وضعه للإشارة إلى أنه وسم فردي. كمثال بسيط، سواء قمت بكتابة <br> أو <br/> فالنتيجة هي نفسها تماماً.
الوسم الزوجي عبارة عن وسم له بداية ونهاية. وسم النهاية الخاص به هو نفسه وسم البداية ولكنه يحتوي على الرمز / في أوله فقط. كمثال بسيط، الوسم الزوجي <p></p> يبدأ بوسم <p> وينتهي بوسم </p>.
التعليقات في HTML
التعليق (Comment) عبارة عن وسم خاص يمكنك وضعه في أي مكان في الصفحة بهدف كتابة ملاحظات تساعدك في الشرح أو لتذكر سبب استخدام الوسوم، في حال أردت مراجعة كود الصفحة لاحقاً. لوضع تعليق، استخدم الوسم <!-- --> وأكتب النص بداخله كالتالي:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- هذا التعليق الأول و هو لا يظهر أمام المستخدم العادي -->
<!-- هذا التعليق الثاني الذي قمنا
بكتابته على ثلاثة أسطر و هو لا
يظهر أيضاً أمام المستخدم العادي -->
</body>
</html>
وسوم الصفحة الأساسية في HTML
بشكل عام، صفحة الويب تتكون من قسمين أساسيين:
-
القسم
<head>:تضع فيه كل ما تحتاجه لتصميم الصفحة، لكن المستخدم لا يراه.
-
القسم
<body>:تضع فيه كل الأشياء التي سيراها المستخدم.
عند كتابة كود HTML5، يجب ذكر المعلومات التالية على الأقل في الملف:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
هذا الهيكل يضمن أن متصفح الويب يتعرف على المستند كصفحة HTML5، مما يسمح بتفسيره بشكل صحيح.
خصائص وسوم HTML
أغلب الوسوم التي تضيفها في الكود يمكن إضافة خصائص لها على النحو التالي:
<tag attribute="value"></tag>
tag - يقصد بها إسم الوسم.
attribute - يقصد بها الخاصية التي يملكها الوسم، ولكننا ننوي تحديد قيمتها.
value - يقصد بها القيمة التي سنضعها في الخاصية، ودائماً يجب وضعها بين علامتي تنصيص "".
الوسم كله مع ما يحتوي من خصائص وقيم، يسمى عنصر (Element).
كمثال بسيط، عند إضافة صورة في الصفحة نستخدم الوسم <img> و بداخله نحدد مسار الصورة التي سيتم عرضها بواسطة الخاصية src كالتالي:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- تستخدم لتحديد مسار الصورة src يستخدم لتخصيص مكان لعرض الصورة في الصفحة و الخاصية img الوسم -->
<img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png">
</body>
</html>
أمثلة على الأشياء التي يمكن إضافتها في القسم Head
عندما تنشئ ملف HTML على حاسوبك وتقوم باستعراضه بواسطة المتصفح، ستلاحظ أنه يعرض لك إسم الملف المفتوح.
عند تصميم الصفحات بنفسك مستقبلاً، قم دائماً بوضع عنوان مناسب للصفحات التي تنشئها كما تفعل أغلب المواقع الاحترافية، لأن هذا الأمر يساعد المستخدم في معرفة ما هي الصفحة المفتوحة بدون الحاجة لأن يقرأ محتواها.
لمشاهدة نتيجة الأمثلة التالية، قم بإنشاء ملف إسمه test.html على حاسوبك واكتب الكود فيه.
طريقة وضع عنوان للملف
في حال أردت وضع عنوان للملف حتى يظهر في المتصفح بدلاً من إسم الملف نفسه، قم بوضعه بداخل <title></title> في القسم <head> كالتالي:
<!DOCTYPE html>
<html>
<head>
<title>My new title</title>
</head>
<body>
</body>
</html>
طريقة وضع أيقونة للملف
في العادة الصورة التي يتم وضعها كأيقونة للصفحة يكون إسمها favicon.ico وحجمها 16 x 16 بكسل، ولكن تستطيع وضع مسار أي صورة لديك بشرط أن يكون لها الحجم المذكور.
لوضع أيقونة بجانب عنوان الصفحة، يجب أن تضع السطر التالي كما هو في القسم <head> مع وضع مسار الصورة التي تريد عرضها:
<link rel="icon" type="image/x-icon" href="icon-path">في المثال التالي، قمنا بوضع أيقونة موقع هرمش بجانب عنوان الصفحة:
<!DOCTYPE html>
<html>
<head>
<title>العنوان الجديد</title>
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png">
</head>
<body>
</body>
</html>
أمثلة على الأشياء التي يمكن إضافتها في القسم Body
في صفحة الويب، بالتحديد في القسم <body>، يمكنك إضافة ما تشاء مثل صور، قوائم، فقرات، روابط، أزرار، وأي شيء يخطر في بالك.
ملاحظة: نتمنى منك التركيز على طريقة ترتيب الكود وليس طريقة عمله.
<!DOCTYPE html>
<html>
<head>
<!-- لم نضع أي شيء في هذا القسم -->
</head>
<body>
<center>
<h2>HTML سهل التعلم</h2>
</center>
<p>لغة ترميز النص الفائق (HTML) هي لغة الترميز القياسية للمستندات المصممة ليتم عرضها في متصفح ويب. يمكن أن تساعدها تقنيات مثل أوراق الأنماط المتتالية (CSS) ولغات البرمجة النصية مثل JavaScript.</p>
<img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png">
<br><br>
<h3>استخدام HTML</h3>
<ul>
<li>إنها لغة الترميز القياسية لإنشاء صفحات الويب</li>
<li>تصف هيكل صفحة الويب</li>
<li>تتكون من مجموعة من العناصر</li>
<li>تخبر المتصفح كيفية عرض المحتوى</li>
</ul>
</body>
</html>
طريقة كتابة أسماء الوسوم لا تؤثر في HTML
سواء قمت بكتابة إسم الوسم بأحرف صغيرة (Small Letters) أو بأحرف كبيرة (Capital Letters) فإن ذلك لا يسبب أي مشكلة. ومع ذلك، من الجيد اتباع نمط موحد، مثل استخدام الأحرف الصغيرة.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- إسم وسم البداية و إسم وسم النهاية كتبناهما بأحرف صغيرة -->
<p>هذه هي الفقرة الأولى<p>
<!-- إسم وسم البداية و إسم وسم النهاية كتبناهما بأحرف كبيرة -->
<P>هذه هي الفقرة الثانية<P>
<!-- إسم وسم البداية كتبناه بأحرف كبيرة و إسم وسم النهاية كتبناه بأحرف صغيرة -->
<P>هذه هي الفقرة الثالثة<p>
</body>
</html>