HTML (HyperText Markup Language) هي الكود المستخدم لهيكلة صفحة الويب ومحتواها. على سبيل المثال ، يمكن هيكلة المحتوى ضمن مجموعة من الفقرات ، أو قائمة بالنقاط النقطية ، أو باستخدام صور وجداول بيانات. كما يوحي العنوان ، ستمنحك هذه المقالة فهمًا أساسيًا لـ HTML ووظائفها.

حسنًا في البداية، دعنا نتعلم كيف يمكننا إنشاء ملف HTML وكيفية تحريره. ولتحرير الملف يمكننا استخدام برامج تحریر الکود مثل VSCode , Php Storm , etc.

حسنا لنصنع ملف HTML و نضيفه في VSCode:

أساسيات HTML

ما هو HTML؟

HTML هي لغة ترميزية تحدد بنية المحتوى الخاص بك. يتكون HTML من سلسلة من العناصر ، التي تستخدمها لتضمين، أو التفاف، أجزاء مختلفة من المحتوى لجعلها تظهر بطريقة معينة، أو تتصرف بطريقة معينة. يمكن للعلامات المرفقة إنشاء ارتباط تشعبي لكلمة أو صورة إلى مكان آخر، ويمكن أن تجعل الكلمات مائلة، ويمكن أن تجعل الخط أكبر أو أصغر ، وهكذا. على سبيل المثال ، خذ سطر المحتوى التالي:

I wanna learn HTML

إذا أردنا أن يقف السطر بمفرده، فيمكننا تحديد أنه فقرة (paragraph) من خلال تضمينه في علامات (tag) الفقرة (paragraph):

<p>I wanna learn HTML<p>

تشريح عناصر HTML

دعنا نستكشف عنصر الفقرة هذا قليلاً.

أساسيات HTML

الأجزاء الرئيسية لعنصرنا هي كما يلي:

  1. علامة الفتح (Opening Tag): تتكون من اسم العنصر في هذه الحالة، (p)، ملفوفًا بأقواس زاوية للفتح والإغلاق. يوضح هذا المكان الذي يبدأ فيه العنصر أو يبدأ في التأثير – في هذه الحالة حيث تبدأ الفقرة.
  2. علامة الإغلاق(Closing Tag): هذه هي نفسها علامة الفتح، باستثناء أنها تتضمن اسلش للأمام قبل اسم العنصر. يوضح هذا أين ينتهي العنصر – في هذه الحالة حيث تنتهي الفقرة. يعد الفشل في إضافة علامة إغلاق أحد الأخطاء القياسية للمبتدئين ويمكن أن يؤدي إلى نتائج غريبة.
  3. المحتوى (Content): هذا هو محتوى العنصر ، وهو في هذه الحالة مجرد نص.
  4. العنصر(Element): تشكل علامة الفتح وعلامة الإغلاق والمحتوى معًا العنصر.

هناك شيء آخر قد يكون في علامة الفتح الذی يسمى السمات‌ (attributes):

أساسيات HTML

تحتوي السمات على معلومات إضافية حول العنصر . هنا ، class هي اسم السمة و “editor-note” هي (attribute Value). تسمح لك سمة class بإعطاء العنصر معرفًا غير فريد يمكن استخدامه لاستهدافه (وأي عناصر أخرى بنفس قيمة الفئة) مع معلومات النمط (CSS) وأشياء أخرى.  (سنتكلم عن هذا الموضوع لاحقاً).

يجب أن تحتوي السمة دائمًا على ما يلي:

  • مسافة بينها وبين اسم العنصر (أو السمة السابقة ، إذا كان العنصر يحتوي بالفعل على سمة واحدة أو أكثر).
  • اسم السمة متبوعًا بعلامة التساوي. (=) (‌Equivalent sign)
  • يتم التفاف قيمة السمة بعلامات اقتباس فتح وإغلاق. (“”) (quotation signs)

ملاحظة: قيم السمات البسيطة التي لا تحتوي على مسافات ASCII البيضاء (أو أي من الأحرف “” “ = <>) يمكن أن تظل بدون علائم الاقتباس، لكن يوصى بأن تقوم بوضع علائم الاقتباس لجميع قيم السمات ، لأنها تجعل الشفرة أكثر اتساقًا ومفهومة.

ادغام العناصر بعضًا في بعض‌ (Nesting Elements)

يمكنك أيضًا وضع عناصر داخل عناصر أخرى وهذا ما يسمى بال   Nestingإذا أردنا أن نقول أن “my cat is very grumpy” ، فيمكننا تغليف كلمة “very” في عنصر <strong> ، مما يعني أنه يجب التأكيد بشدة على الكلمة:

<p>My cat is <strong>very</strong> grumpy.</p>

نوع أخر من العناصر

هناك نوع اخر من العناصر الذی لا یحتوی ای محتوی و حتی لا یحتوی علامه الاغلاق هذهی النعاصر تسمی العناصر الفارغه (Empty elements).

لننظر الی هذا المثال:

<img src="images/firefox-icon.png" alt="My test image">

يحتوي هذا على سمتين ، ولكن لا توجد علامة إغلاق </ img> ولا يوجد محتوى داخلي. هذا لأن عنصر الصورة لا يلتف المحتوى للتأثير عليه. والغرض منه هو تضمين صورة في صفحة HTML في المكان الذي تظهر فيه.

العناصر الضرورية (HTML Page Anatomy)

هناك عناصر ضرورية و یجب علیها ان توجد في أی ملف HTML هنا سنشرحها لکم.

يختتم هذا أساسيات عناصر HTML الضرورية، لكنها ليست سهلة الاستخدام بمفردها. سننظر الآن في كيفية دمج العناصر الفردية لتكوين صفحة HTML كاملة. دعنا نعيد النظر في الكود الذي وضعناه في هذا مثال:

>!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>
  1. يجب أن تبدأ كافة مستندات HTML بإعلان <! DOCTYPE html>. التصريح ليس علامة HTML. إنها “معلومات” للمتصفح بأن الملف هذا ملف HTML
  2.     <html> </html>يلف هذا العنصر كل المحتوى في الصفحة بأكملها ويُعرف أحيانًا باسم العنصر الروت (Root Element)
  3. <head> </head> يعمل هذا العنصر كحاوية لجميع العناصر التي تريد تضمينها في صفحة HTML التي لا تمثل المحتوى الذي تعرضه لمشاهدي صفحتك. يتضمن ذلك أشياء مثل الكلمات الرئيسية ووصف الصفحة التي تريد ظهورها في نتائج البحث ، و CSS لتصميم المحتوى الخاص بنا ، وإعلانات مجموعة الأحرف ، والمزيد.
  4. <meta charset=”UTF-8”> يعيّن هذا العنصر مجموعة الأحرف التي يجب أن يستخدمها المستند الخاص بك إلى UTF-8 والذي يتضمن معظم الأحرف من الغالبية العظمى من اللغات المكتوبة. بشكل أساسي ، يمكنه الآن التعامل مع أي محتوى نصي قد تضعه عليه. لا يوجد سبب لعدم ضبط هذا ويمكن أن يساعد في تجنب بعض المشاكل لاحقًا.
  5. <title></title> يؤدي هذا إلى تعيين عنوان صفحتك ، وهو العنوان الذي يظهر في علامة تب ويب المتصفح (Browser tab) التي تم تحميل الصفحة بها. كما يتم استخدامه أيضًا لوصف الصفحة عند وضع إشارة مرجعية عليها / تفضيلها.

6. <body></body>  يحتوي هذا على كل المحتوى الذي تريد عرضه لمستخدمي الويب عند زيارتهم لصفحتك ، سواء كان ذلك نصًا أو صورًا أو مقاطع فيديو أو ألعابًا أو مسارات صوتية قابلة للتشغيل أو أي شيء آخر.

للمزيد اقرأ: مساحة تصميم HTML

لنذهب إلی تعلم بعض العناصر المهم والبسیطة

عموما جمیع صفحات HTML تحتوي بعضا من هذه العناصر:

عنصر الصورة (Image Tag):

<img src="images/firefox-icon.png" alt="My test image">

كما قلنا من قبل، فإنه يدمج صورة في صفحتنا في الموضع الذي تظهر به. يقوم بذلك عبر السمة src (المصدر)، والتي تحتوي على المسار إلى ملف الصورة الخاص بنا. لقد قمنا أيضًا بتضمين سمة alt (بديلة). في هذه السمة، تحدد نصًا وصفيًا للمستخدمين الذين لا يمكنهم رؤية الصورة، ربما للأسباب التالية:

  • هم ضعاف البصر. غالبًا ما يستخدم المستخدمون الذين يعانون من إعاقات بصرية كبيرة أدوات تسمى قارئات الشاشة لقراءة النص البديل لهم.
  • حدث خطأ ما تسبب في عدم عرض الصورة. على سبيل المثال، حاول تغيير المسار عمدًا داخل سمة src الخاصة بك لجعلها غير صحيحة. إذا قمت بحفظ الصفحة وإعادة تحميلها، فمن المفترض أن ترى شيئًا كهذا في مكان الصورة:

الكلمات الأساسية للنص البديل هي “نص وصفي”. يجب أن يزود النص البديل الذي تكتبه القارئ بمعلومات كافية للحصول على فكرة جيدة عما تنقله الصورة. بعنوان المثال عندما نضع صوره شجره فی الصفحه یجب ان سمه alt  تحتوي بی كلمه “Tree”.

ترميز النص

سيغطي هذا القسم بعض عناصر HTML الأساسية التي ستستخدمها لترميز النص.

العناوين (Headings)

تسمح لك عناصر العنوان(Heading Elements) بتحديد أن أجزاء معينة من المحتوى الخاص بك هي عناوين – أو عناوين فرعية. بنفس الطريقة التي يحتوي بها الكتاب على العنوان الرئيسي وعناوين الفصول والعناوين الفرعية ، يمكن أن يكون مستند HTML أيضًا. يحتوي HTML على 6 مستويات للعناوين((<h1> – <h6> على الرغم من أنك ستستخدم 3 إلى 4 فقط على الأكثر:

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

الكومنت (Comment)

 أي شيء في ال اج تی ام <!– What we write here is a comment –> ينكتب بي هذهی الطریقه هو کومنت.

يتجاهل المتصفح التعليقات لأنه يعرض الشفرة. بمعنى آخر، فهي غير مرئية على الصفحة – فقط في الكود. تعد تعليقات HTML  طريقة لك لكتابة ملاحظات مفيدة حول التعليمات البرمجية أو المنطق.

ملاحظة: ستلاحظ أن مستوى العنوان 1 يحتوي على نمط ضمني. لا تستخدم عناصر العنوان لجعل النص أكبر أو غامقًا، لأنها تُستخدم لإمكانية الوصول ولأسباب أخرى مثل تحسين محركات البحث (SEO). حاول إنشاء تسلسل ذي مغزى من العناوين على صفحاتك، دون تخطي المستويات.

الفقرات (Paragraphs)

كما هو موضح أعلا، فإن العناصر  <p> مخصصة لاحتواء فقرات من النص؛ ستستخدمها بشكل متكرر عند ترميز محتوى نص عادي:

<p> This is a paragraph </p>

هنا قد شرحنا بعضاْ من العلائم المهمه لتعلم اسلوب سينتكس HTML ولكن هناك العشرات من العلائم (tags) في ال  HTMLهنا ساضع البعض منهن:

في المستقبل، سنعبر عن جميع العلامات المهمة والمطلوبة لتطوير صفحة ويب جميلة لكما معًا.

لا تنس أن تتعلم جميع الأساسيات جيدًا لأنه الجزء الأكثر أهمية لبدء شيء جديد!

المصادر

الأول
الثاني

منشور ذات صلة
frameworks 2 Minutes

أفضل فریم وركات

فردوس مزرعاوي

الفریم ورك منصة لتطویر البرمجیات. مثلا كل frame work، یشمل عدة فانكشن، كلس، وما شابه بشكل افتراضی، وبإمكان المبرمج استخدمها للبرمجة بطرق أسهل. أي باستخدام الفریم وركات المختلفة، يتجنب كتابة كود متكرر.

البرمجة 9 Minutes

هل يجب عليك البرمجة كمدير هندسة؟

جاسم ناظري

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة