HTML (لغة ترميز النص التشعبي) هي الكود المستخدم لهيكلة صفحة الويب ومحتواها، على سبيل المثال، يمكن هيكلة المحتوى ضمن مجموعة من الفقرات أو قائمة بالنقاط النقطية أو باستخدام صور وجداول بيانات، وكما يوحي العنوان ، ستمنحك هذه المقالة فهماً عن أساسيات لغة البرمجة HTML ووظائفها.
المحتويات:
1. لغة البرمجة HTML.
HTML هي لغة ترميزية تحدد بنية المحتوى الخاص بك. تتكون HTML من سلسلة من العناصر التي تستخدمها لتضمين أو التفاف أجزاء مختلفة من المحتوى لجعله يظهر بطريقة معينة، أو يتصرف بطريقة معينة.
يمكن للعلامات المرفقة إنشاء ارتباط تشعبي لكلمة أو صورة إلى مكان آخر، ويمكن أن تجعل الكلمات مائلة، ويمكن أن تجعل الخط أكبر أو أصغر، وهكذا. على سبيل المثال، خذ سطر المحتوى التالي:
تعلّم أساسيات HTML من موقع ثقافاتي
إذا أردنا أن يكون السطر بمفرده، فيمكننا تحديد أنه فقرة من خلال تضمينه في علامات الفقرة كالتالي:
<p> تعلّم أساسيات HTML من موقع ثقافاتي </ p>
2. شرح أساسيات عناصر HTML.
دعنا نستكشف عنصر الفقرة في مثالنا السابق.
الأجزاء الرئيسية لعنصرنا هي كما يلي:
- علامة الفتح Opening Tag: تتكون من اسم العنصر ( في هذه الحالة، p )، ملفوفاً بأقواس زاوية الفتح والإغلاق ( <> ). يوضح هذا في المكان الذي يبدأ فيه العنصر أو يبدأ في التأثير، في هذه الحالة حيث تبدأ الفقرة.
- علامة الإغلاق Closing Tag: هذه هي نفسها علامة الفتح، باستثناء أنها تتضمن شرطة مائلة للأمام قبل اسم العنصر( / ). يوضح هذا أين ينتهي العنصر، في هذه الحالة حيث تنتهي الفقرة. يعد الفشل في إضافة علامة إغلاق أحد الأخطاء القياسية للمبتدئين ويمكن أن يؤدي إلى نتائج غريبة.
- المحتوى Content: هذا هو محتوى العنصر، وهو في هذه الحالة مجرد نص يتم وضعه بين علامتي الفتح والإغلاق.
- العنصر Element: تشكل علامة الفتح وعلامة الإغلاق والمحتوى معاً العنصر.
السمات في لغة البرمجة HTML.
يمكن أن تحتوي العناصر أيضاً على سمات Attributes تشبه ما يلي:
تحتوي السمات على معلومات إضافية حول العنصر الذي لا تريده أن يظهر في المحتوى الفعلي. هنا، class هي اسم السمة وملاحظة المحرر هي قيمة السمة.
تسمح لك سمة class بإعطاء العنصر معرفاً غير فريد يمكن استخدامه لاستهدافه (وأي عناصر أخرى بنفس قيمة الفئة) مع معلومات النمط وأشياء أخرى.
يجب أن تحتوي السمة دائماً على ما يلي:
- مسافة بينها وبين اسم العنصر (أو السمة السابقة، إذا كان العنصر يحتوي بالفعل على سمة واحدة أو أكثر).
- اسم السمة متبوعاً بعلامة التساوي.
- التفاف قيمة السمة بعلامات اقتباس فتح وإغلاق.
ملاحظة: يمكن أن تظل قيم السمات البسيطة التي لا تحتوي على مسافات ASCII البيضاء (أو أي من الأحرف “” = <>) بدون اقتباس، ولكن يوصى باقتباس جميع قيم السمات، لأنها تجعل الشفرة أكثر اتساقاً ومفهومة.
العناصر المتداخلة.
يمكنك أيضاً وضع عناصر داخل عناصر أخرى، وهذا ما يسمى بالتداخل. إذا أردنا أن نقول أن “القطة جداً غاضبة”، فيمكننا تغليف كلمة “جداً” في عنصر <strong>، مما يعني أنه يجب التأكيد بشدة على الكلمة:
<p> القطة <strong> جداً </ strong> غاضبة </ p>
ومع ذلك ، فأنت بحاجة إلى التأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه، فتحنا العنصر <p> أولاً، ثم العنصر <strong>؛ لذلك ، علينا إغلاق عنصر <strong> أولاً، ثم العنصر <p>. ما يلي غير صحيح:
<p> القطة <strong> جداً. غاضبة </ p> </strong>
يجب أن تفتح العناصر وتغلق بشكل صحيح بحيث تكون واضحة داخل أو خارج بعضها البعض. إذا كانت متداخلة كما هو موضح أعلاه، فسيحاول متصفح الويب الخاص بك أن يخمن أفضل ما كنت تحاول قوله، مما قد يؤدي إلى نتائج غير متوقعة. لذا لا تفعل ذلك!
العناصر الفارغة.
بعض العناصر ليس لها محتوى ويطلق عليها عناصر فارغة. خذ عنصر <img> الموجود بالفعل في صفحة HTML الخاصة بنا:
<img src = “images / icon.png” alt = “صورة الغلاف”>
يحتوي هذا على سمتين، ولكن لا توجد علامة إغلاق </ img> ولا يوجد محتوى داخلي. هذا لأن عنصر الصورة لا يلتف المحتوى للتأثير عليه. والغرض منه هو تضمين صورة في صفحة HTML في المكان الذي تظهر فيه.
3. شرح مستند HTML.
يختتم هذا أساسيات عناصر HTML الفردية، لكنها ليست سهلة الاستخدام بمفردها. سننظر الآن في كيفية دمج العناصر الفردية لتكوين صفحة HTML كاملة. دعنا نعيد النظر في الكود في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My test page</title>
</head>
<body>
<img src=”images/icon.png” alt=”My test image”>
</body>
</html>
يوجد لدينا في المثال السابق العناصر التالية:
- <!DOCTYPE html>
وهي ديباجة مطلوبة. في الزمن السابق، عندما كان HTML صغيراً (حوالي 1991/1992)، كان من المفترض أن تعمل نماذج DOCTYPE بمثابة روابط لمجموعة من القواعد التي يجب أن تتبعها صفحة HTML لاعتبارها HTML جيدة، مما قد يعني التحقق التلقائي من الأخطاء وغير ذلك من أشياء مفيدة.
ومع ذلك، في هذه الأيام، لا يفعلون الكثير ويحتاجون في الأساس فقط للتأكد من أن المستند يتصرف بشكل صحيح. هذا كل ما تحتاج إلى معرفته بشكل أساسي.
- <html> </html>
يلف هذا العنصر (عنصر <html> ) كل المحتوى في الصفحة بأكملها ويُعرف أحياناً بالعنصر الجذر.
- <meta charset=”utf-8″>
يعيّن هذا العنصر مجموعة الأحرف التي يجب أن يستخدمها مستندك إلى UTF-8 والذي يتضمن معظم الأحرف من الغالبية العظمى من اللغات المكتوبة. بشكل أساسي، يمكنه الآن التعامل مع أي محتوى نصي قد تضعه عليه. لا يوجد سبب لعدم تعيين هذا ويمكن أن يساعد في تجنب بعض المشاكل لاحقاً.
- <title> </title>
يؤدي هذا إلى تعيين عنوان صفحتك، وهو العنوان الذي يظهر في علامة تبويب المتصفح التي تم تحميل الصفحة بها. كما يتم استخدامه أيضاً لوصف الصفحة عند وضع إشارة مرجعية عليها.
- <body> </body>
يحتوي هذا على كل المحتوى الذي تريد عرضه لمستخدمي الويب عند زيارتهم لصفحتك، سواء كان ذلك نصاً أو صوراً أو مقاطع فيديو أو ألعاباً أو مسارات صوتية قابلة للتشغيل أو أي شيء آخر.
الصور.
دعنا نحول انتباهنا إلى عنصر <img> مرة أخرى:
<img src=”images/icon.png” alt=”My test image”>
كما قلنا من قبل، فإنه يدمج صورة في صفحتنا في الموضع الذي تظهر به. يقوم بذلك عبر السمة src (المصدر)، والتي تحتوي على المسار إلى ملف الصورة الخاص بنا.
لقد قمنا أيضاً بتضمين سمة alt (بديلة). في هذه السمة، تحدد نصاً وصفياً للمستخدمين الذين لا يمكنهم رؤية الصورة، ربما للأسباب التالية:
- هم ضعاف البصر. غالباً ما يستخدم المستخدمون الذين يعانون من إعاقات بصرية كبيرة أدوات تسمى قارئات الشاشة لقراءة النص البديل لهم.
- حدث خطأ ما تسبب في عدم عرض الصورة. على سبيل المثال، حاول تغيير المسار عمداً داخل سمة src الخاصة بك لجعلها غير صحيحة. إذا قمت بحفظ الصفحة وإعادة تحميلها.
الكلمات الأساسية للنص البديل هي “نص وصفي”. يجب أن يزود النص البديل الذي تكتبه القارئ بمعلومات كافية للحصول على فكرة جيدة عما تنقله الصورة. في هذا المثال، نصنا الحالي “My test image” ليس جيداً على الإطلاق. فهو يجب أن يحتوي على وصف عما تحويه الصورة.
4. ترميز النصوص.
سنتحدث الآن في هذا القسم بعض عناصر HTML الأساسية التي ستستخدمها لترميز النص.
العناوين
تسمح لك عناصر العنوان Heading بتحديد أن أجزاء معينة من المحتوى الخاص بك هي عناوين أو عناوين فرعية. بنفس الطريقة التي يحتوي بها الكتاب على العنوان الرئيسي وعناوين الفصول والعناوين الفرعية، يمكن أن يكون مستند HTML أيضاً.
يحتوي HTML على 6 مستويات للعناوين، <h1> – <h6> ، على الرغم من أنك ستستخدم 3 إلى 4 فقط على الأكثر:
<! 6 مستويات للعناوين: ->
<h1> العنوان الرئيسي </ h1>
<h2> عنوان المستوى الثاني </ h2>
<h3> العنوان الفرعي من المستوى الثالث </ h3>
<h4> عنوان فرعي من المستوى الرابع </ h4>
<h5> العنوان الفرعي من المستوى الخامس </ h5>
<h6> العنوان الفرعي من المستوى السادس </ h6>
ملاحظة: أي شيء في HTML بين <! – و -> هو تعليق HTML. يتجاهل المتصفح التعليقات لأنه يعرض الشفرة. بمعنى آخر، فهي غير مرئية على الصفحة، وتكون مرئية فقط في الكود. تعد تعليقات HTML طريقة لك لكتابة ملاحظات مفيدة حول التعليمات البرمجية أو المنطق.
ملاحظة: ستلاحظ أن مستوى العنوان 1 يحتوي على نمط ضمني. لا تستخدم عناصر العنوان لجعل النص أكبر أو غامقاً، لأنها تُستخدم لإمكانية الوصول ولأسباب أخرى مثل تحسين محركات البحث. حاول إنشاء تسلسل ذي معنى للعناوين على صفحاتك، دون تخطي المستويات.
الفقرات.
كما هو موضح أعلاه، فإن العناصر <p> مخصصة لاحتواء فقرات النص Paragraph؛ ستستخدمها بشكل متكرر عند ترميز محتوى نص عادي:
<p> هذه فقرة واحدة </ p>
أضف نصك النموذجي في فقرة واحدة أو بضع فقرات، توضع مباشرة أسفل عنصر <img> الخاص بك.
القوائم.
الكثير من محتوى الويب عبارة عن قوائم Lists، وتحتوي HTML على عناصر خاصة لهذه القوائم. تتكون قوائم الترميز دائماً من عنصرين على الأقل. أكثر أنواع القوائم شيوعاً هي القوائم المرتبة وغير المرتبة:
- القوائم غير المرتبة مخصصة للقوائم التي لا يهم فيها ترتيب العناصر، مثل قائمة التسوق. هذه ملفوفة في عنصر <ul>.
- القوائم المرتبة مخصصة للقوائم التي يكون ترتيب العناصر فيها مهماً، مثل الوصفة. هذه ملفوفة في عنصر <ol>.
يتم وضع كل عنصر داخل القوائم داخل عنصر <li> (عنصر قائمة).
على سبيل المثال، إذا أردنا تحويل جزء جزء الفقرة التالية إلى قائمة:
<p> نقدم لكم مجموعة متنوعة من المقالات في مجال التكنولوجيا العلوم البرمجة </p>
يمكن تعديلها على النحو التالي:
<p> نقدم لكم مجموعة متنوعة من المقالات في مجال </p>
<ul>
<li>التكنولوجيا</li>
<li>العلوم</li>
<li>البرمجة</li>
</ul>
الروابط.
الروابط مهمة جداً، فهي ما يجعل الويب على شبكة الإنترنت! لإضافة ارتباط، نحتاج إلى استخدام عنصر بسيط، وهو <a>. الحرف “a” هو النموذج المختصر لـ “Anchor”. لتحويل نص داخل فقرتك إلى ارتباط، اتبع الخطوات التالية:
- اختر بعض النصوص. اخترنا النص “موقع ثقافاتي”.
- لف النص في عنصر <a>، كما هو موضح أدناه:
<a>موقع ثقافاتي</a>
- امنح عنصر <a> سمة href، كما هو موضح أدناه:
<a href=””> ثقافاتي </a>
- املأ قيمة هذه السمة بعنوان الويب الذي تريد الارتباط به:
<a href=”https://Thaqafati.com/”> موقع ثقافاتي </a>
قد تحصل على نتائج غير متوقعة إذا حذفت جزء https: // أو http: // ، المسمى البروتوكول، في بداية عنوان الويب. بعد إنشاء رابط، انقر فوقه للتأكد من أنه يرسل لك إلى المكان الذي تريده.
ملاحظة: قد يظهر href كخيار غامض إلى حد ما لاسم سمة في البداية. إذا كنت تواجه مشكلة في تذكرها، فتذكر أنها تعني مرجع النص التشعبي.