HTML هو أساس كل صفحة ويب. إنها الطريقة التي نطلب بها من المتصفحات تنظيم المحتوى في فقرات وعناوين وصور وروابط وقوائم ونماذج وجداول وأزرار والمزيد. إذا كنت مهتمًا ببناء موقع ويب، أو تطوير الويب، أو مجرد البرمجة بشكل عام، فإن تعلم HTML يعد مكانًا رائعًا للبدء.
في هذا الدليل لـ HTML للمبتدئين، سنتعرف على ما هو HTML وفيم يُستخدم. بعد ذلك، سنتعرف على كيفية كتابة بعض عناصر HTML الأساسية ونراجع بعض عناصرها وسماتها الأكثر أهمية. سننتهي بإلقاء نظرة سريعة على بعض الموارد التي يمكنك استخدامها لمواصلة التعلم واستخدام HTML.
ما هو HTML؟
HTML، وهي اختصار لـ HyperText Markup Language، هي اللغة الأساسية لشبكة الويب العالمية. وهو يحدد المحتوى والبنية الأساسية لصفحات الويب وتطبيقات الويب.
كما ذكرنا أعلاه، HTML هو اختصار لعبارة “HyperText Markup Language”. دعونا نقسم هذا إلى فهم أفضل لما يعنيه HTML فعليًا.
“HyperText” هو نص موجود على صفحة ويب يحتوي على إشارات إلى صفحة ويب أخرى. ربما تعرف هذه الارتباطات التشعبية. نستخدم الارتباطات التشعبية للانتقال إلى قسم آخر من نفس الصفحة، أو صفحة مختلفة على موقع الويب الحالي، أو موقع ويب جديد تمامًا. يمكن للارتباطات التشعبية أيضًا فتح ملف PDF أو بريد إلكتروني أو وسائط متعددة، مثل ملف فيديو أو صوت.
كان ربط المعلومات معًا بهذه الطريقة بمثابة خطوة ثورية في بناء الويب. يتيح HTML والإنترنت معًا لأي شخص الوصول إلى جميع أنواع المعلومات حول العالم، بأي ترتيب يريده.
بالمضي قدمًا، يشير “الترميز” إلى كيفية “ترميز” HTML للصفحة بالتعليقات التوضيحية داخل ملف HTML. ولا يتم عرض هذه التعليقات التوضيحية على صفحة الويب نفسها. وبدلاً من ذلك، يعملون خلف الكواليس لإخبار المتصفح بكيفية عرض المستند للزائرين. سنتعلم المزيد عن هذا الترميز قريبًا.
أخيرًا، “اللغة” هي أبسط جزء من الاختصار الذي يجب فهمه. مثل أي لغة، HTML لديها بناء جملة وأبجدية فريدة من نوعها. لكن ما هو نوع اللغة بالضبط؟ دعونا نتناول هذا السؤال بعد ذلك.
هل HTML لغة برمجة؟
ما إذا كانت لغة HTML لغة “برمجة” أم لا من الناحية الفنية هي نقاش مستمر بين مطوري الويب والخبراء. في حين أن الأغلبية تعرف لغة HTML على أنها لغة “ترميزية” (وليست لغة برمجة)، يرى البعض أن الاثنين لا يستبعد أحدهما الآخر.
جميع لغات البرمجة لها غرض وظيفي ما، فهي تحتاج إلى “القيام” بشيء ما، سواء كان ذلك تقييم التعبيرات، أو الإعلان عن المتغيرات، أو تعديل البيانات. JavaScript هي لغة البرمجة الأكثر استخدامًا في تطوير الويب . تشمل لغات البرمجة الشائعة الأخرى Python وJava وC.
على الرغم من أنها مفيدة جدًا كما سنرى، إلا أن لغة HTML لا “تفعل” أي شيء بهذا المعنى. إنه ببساطة يمنح المتصفحات المحتوى الذي يحتاج إلى عرضه. لا يهتم HTML بكيفية قيام المتصفح بعرض المحتوى، طالما أنه معروض. بمعنى آخر، لغة HTML لها غرض هيكلي، وليس غرضًا وظيفيًا.
ومع ذلك، يستخدم بعض المطورين نفس المنطق للقول بأن HTML هي لغة برمجة – إنها مجرد لغة برمجة تعريفية. وفقًا للبروفيسور ديفيد برايلسفورد من جامعة نوتنغهام، فإن اللغات التصريحية مقيدة أكثر من اللغات الأخرى، لكن هذا لا يجعلها أقل من لغة برمجة.
مع أخذ ذلك في الاعتبار، دعنا ننتقل إلى الغرض من استخدام HTML.
في ماذا تستخدم HTML ؟
تستخدم HTML في المقام الأول لإنشاء صفحات الويب. HTML مجاني للاستخدام ويضمن عرض النصوص والصور والعناصر الأخرى على النحو المنشود.
باستخدام HTML، لا يمكنك فقط إضافة العناوين والفقرات والقوائم والعناصر الأخرى إلى صفحتك، بل يمكنك أيضًا تضمين الصور ومقاطع الفيديو والملفات الصوتية والوسائط المتعددة الأخرى. ويمكنك الارتباط بصفحات ويب أخرى على نفس الموقع أو من موقع آخر. يتيح ذلك للزائرين التنقل بسهولة في موقع الويب الخاص بك والتنقل بين مواقع الويب.
حتى بعد إضافة العناوين والصور والارتباطات التشعبية، ستظل لديك صفحة ويب أساسية جدًا – وهذا حسب التصميم. HTML مخصص فقط لمحتوى الصفحة. إنه ينشئ قاعدة بسيطة يمكنك من خلالها إضافة التصميم باستخدام لغة أخرى تسمى CSS (والتي تعني Cascading Style Sheets). باستخدام CSS، يمكنك تخصيص التصميم والتخطيطات وتغيير اللون والخط ومحاذاة العناصر.
يتم استخدام HTML لإنشاء أشياء أخرى غير صفحات الويب أيضًا. يمكنك استخدامه من أجل:
- عمل جداول لتنظيم البيانات
- إنشاء نماذج لجمع معلومات المستخدم، أو معالجة المعاملات، أو إجراء الحجوزات، أو تقديم طلب
- إنشاء رسائل البريد الإلكتروني مع HTML
سواء كنت تريد إنشاء صفحات ويب أو جداول أو نماذج أو رسائل بريد إلكتروني، فسوف تحتاج إلى معرفة كيفية كتابة HTML. لذا، دعونا نحلل العملية التالية.
كيفية كتابة HTML
بالمقارنة مع لغات البرمجة الأخرى، فإن لغة HTML سهلة القراءة والفهم نسبيًا، نظرًا لأنها نص إنجليزي عادي مع رموز إضافية هنا وهناك.
العنصر الأساسي لصفحة الويب بتنسيق HTML . عنصر HTML هو وحدة معلومات تخبر متصفح الويب بما يجب تقديمه للمشاهد. يمكن أن يكون عنصر HTML جزءًا من النص مثل الفقرة، أو عنصرًا تفاعليًا مثل الزر، أو قسمًا من الصفحة مثل الرأس أو التذييل.
إليك ما يبدو عليه العنصر الأساسي مكتوبًا بتنسيق HTML. يُسمى هذا العنصر عنصر <button> ، ويقوم بإنشاء زر على الشاشة يمكن للمستخدمين النقر عليه بالماوس.
دعونا نلقي نظرة فاحصة على كل مكون من عناصر HTML.
علامات HTML
يتم تحديد عناصر HTML بواسطة العلامات. تحتوي معظم العناصر على علامة فتح وعلامة إغلاق. تحتوي العلامات المفتوحة التي تسبق على اسم العنصر محاطًا بأقواس زاوية (<>). تتطابق علامات الإغلاق مع علامات الفتح، باستثناء الشرطة المائلة (/) التي تسبق اسم العنصر.
تحتوي العلامات على محتوى العنصر. قد يكون المحتوى نصًا أو عنصر وسائط أو حتى عناصر أخرى.
لذا، لنفترض أنك تريد إضافة فقرة إلى صفحة الويب الخاصة بك، تحتوي الفقرة على النص “هذه فقرة”. ستقوم بتغليفها بعلامات فقرة HTML <p> و </p> . لذلك، سيبدو HTML كما يلي:
<p>This is a paragraph.</p>
سهل هكذا. هذه الأشياء الثلاثة معًا هي كل ما تحتاجه لإنشاء عنصر فقرة في HTML.
تحتوي معظم عناصر HTML على علامة فتح وعلامة إغلاق ومحتوى بين هذه العلامات. ومع ذلك، تحتوي بعض عناصر HTML على علامة افتتاحية فقط، وتُسمى هذه العناصر بالعناصر الفارغة.
عنصر فاصل الأسطر هو عنصر فارغ شائع. لإضافة فاصل أسطر في HTML، ما عليك سوى كتابة <br> (من أجل “فاصل”)، وستتم إضافة فاصل أسطر.
كما أن أسماء العناصر غير حساسة لحالة الأحرف، مما يعني أنه يمكن كتابتها بأحرف كبيرة أو صغيرة. على سبيل المثال، يمكن أيضًا كتابة العلامة <p> كـ <P>. ومع ذلك، سترى دائمًا أسماء العناصر مكتوبة بأحرف صغيرة.
سمات HTML
في حين أن جميع عناصر HTML تحتاج إلى علامات، فإن بعضها فقط يتطلب سمات. سمة HTML هي نص داخل علامة الفتح التي توفر معلومات إضافية حول عنصر HTML.
يتم العثور على السمة دائمًا في العلامة الافتتاحية لعنصر HTML. تحتوي معظمها على الصيغة name=“value” ، على الرغم من أن بعض السمات تتطلب منك فقط كتابة الاسم دون أي قيمة مخصصة.
تتطلب بعض العناصر سمات معينة. على سبيل المثال، يجب أن يحتوي عنصر صورة HTML ( <img> ) دائمًا على سمة مصدر ( src ) تكون قيمتها عنوان URL للصورة أو مسار الملف. وإلا فإن المتصفح لن يعرف الصورة التي سيتم عرضها.
وبالمثل، يجب أن يحتوي عنصر الربط ( <a> )، الذي يقوم بإنشاء رابط تشعبي، على سمة href بقيمة تحدد وجهة الارتباط. بخلاف ذلك، إذا نقر الزائر على عنصر الربط، فلن يرسله المتصفح إلى أي مكان.
تحتوي العناصر الأخرى على سمات ليس من الضروري تضمينها، ولكنها تعتبر ممارسة جيدة. على سبيل المثال، يأخذ العنصر <img> أيضًا السمة alt ، التي تحتوي على نص بديل للصورة . سيستمر المتصفح في عرض الصورة إذا لم تكن السمة alt موجودة في العلامة <img> . ولكن، قد يواجه القراء ضعاف البصر صعوبة في فهم ما تنقله الصورة دون وصف نصي بديل. لذا، يوصى بأن تحتوي جميع الصور غير المزخرفة على نص بديل وبالتالي استخدام السمة alt .
يمكن كتابة السمات بأي ترتيب داخل علامة الفتح. ومع ذلك، لا يمكنك وضع مثيلات متعددة لنفس السمة داخل نفس علامة HTML.
كيفية استخدام HTML
للبدء في استخدام HTML، ستحتاج إلى محرر نصوص . محرر النصوص هو برنامج لكتابة التعليمات البرمجية. نظرًا لأن ملف HTML بتنسيق نص قياسي، فإن أي محرر نص أساسي سيعمل مع هذا البرنامج التعليمي.
ستكون خطوتك الأولى هي تنزيل محرر نصوص مجاني لاستخدامه. يعد برنامج Visual Studio Code محرر نصوص مجانيًا جيدًا لنظام التشغيل Windows، ويعد Sublime Text خيارًا شائعًا لنظام التشغيل Mac. عادةً، يمكنك البحث في محرر النصوص عبر الإنترنت وتنزيل ملف مضغوط من صفحة التنزيل. افتح الملف المضغوط، واتبع أي تعليمات مقدمة لتثبيت البرنامج، ثم افتحه.
عندما تفتح محرر النصوص، من المحتمل أن ترى نافذة محرر مثل تلك الموجودة أدناه. هذا هو المكان الذي ستكتب فيه كود HTML الخاص بك.
مع فتح نافذة المحرر هذه، انسخ كود HTML أدناه والصقه في النافذة.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
وسنشرح ما يعنيه كل عنصر من هذه العناصر في القسم التالي.
بعد ذلك، احفظ الملف وقم بتسميته “index.html”. يمكنك حفظه على سطح المكتب أو مجلد آخر.
بعد حفظ ملف HTML، ستتمكن من فتح هذا الملف في متصفح الويب الخاص بك. للقيام بذلك، يمكنك النقر نقرًا مزدوجًا فوق الملف، ثم النقر بزر الماوس الأيمن واختيار فتح، أو سحب رمز الملف وإفلاته في نافذة متصفح مفتوحة. سوف يبدو مثل هذا:
الآن بعد أن عرفت كيفية استخدام محرر HTML، دعونا ننظر في كيفية كتابة التعليمات البرمجية الفعلية.
كيفية إنشاء ملف HTML
لإنشاء موقع ويب باستخدام HTML، يتعين عليك إنشاء ملف HTML أولاً. سيحتوي هذا الملف على كل HTML لصفحة الويب الخاصة بك وسيتم تحميله على خادم الويب الخاص بك. وبهذه الطريقة، عندما يبحث أحد الزائرين عن موقع الويب الخاص بك، سيرسل الخادم ملف HTML إلى متصفح الزائر، وسيعرض المتصفح الصفحة وفقًا لذلك.
في القسم الأخير، قمنا بإنشاء ملف HTML بسيط جدًا لفتحه في متصفحك. في هذا القسم، سنتعرف على عملية بناء عملية أكثر تعقيدًا.
الخطوة 1: إضافة تعريف <!DOCTYPE>.
للبدء، سنحتاج إلى الإعلان عن نوع المستند كـ HTML. أضف الكود الخاص <!DOCTYPE html> في السطر الأول من الملف. يبدأ كل ملف HTML بهذه الطريقة.
<!DOCTYPE html>
الخطوة 2: إضافة عنصر <html>.
بعد ذلك، سنضيف عنصر <html> بعد تعريف نوع المستند، والذي يُسمى أيضًا عنصر “الجذر” للمستند لأنه يحتوي على جميع العناصر الأخرى في المستند.
في السطر الموجود أسفل إعلان DOCTYPE، أضف علامة فتح <html> . أسفل ذلك، قم بإضافة علامة إغلاق </html> .
<!DOCTYPE html> <html> </html>
سيتم وضع كل عنصر آخر في المستند بين هذه العلامات.
الخطوة 3: إضافة سمة اللغة.
ضمن العلامة الافتتاحية لعنصر html، سنضيف أيضًا سمة lang (اللغة) . يساعد ذلك قارئي الشاشة على تحديد اللغة المستخدمة في المستند، مما يجعل الوصول إلى موقع الويب الخاص بك أكثر سهولة .
بدون سمة اللغة، ستستخدم برامج قراءة الشاشة لغة نظام التشغيل بشكل افتراضي، مما قد يؤدي إلى أخطاء في نطق العنوان والمحتويات الأخرى على الصفحة.
<!DOCTYPE html> <html lang="en"> </html>
الخطوة 4: إضافة قسم الرأس (head) والجسم (body) .
يتكون مستند HTML من جزأين: قسم الرأس وقسم النص. يحتوي قسم الرأس على معلومات وصفية حول الصفحة بالإضافة إلى أي CSS داخلي. ولا يعرض المتصفح هذه المعلومات للمستخدمين. يحتوي قسم النص على جميع المعلومات التي ستكون مرئية في الواجهة الأمامية، مثل الفقرات والصور والروابط.
لإنشاء هذه الأقسام، سنضيف علامات <head></head> وعلامات <body></body> داخل القسم <html> من المستند.
<!DOCTYPE html>
<html lang=”en”>
<head>
</head>
<body>
</body>
</html>
ستلاحظ أيضًا وجود مسافة بادئة للعلامتين <head> و <body> هنا. يشير هذا بصريًا إلى أن هذه العلامات موضوعة داخل علامات <html> أو “متداخلة فيها” . على الرغم من أن المسافة البادئة ليست ضرورية ولا تحدث فرقًا في كيفية عرض المتصفح للمستند، إلا أنه لا يزال من الممارسات الشائعة وضع مسافة بادئة لـ HTML الخاص بك لتحسين إمكانية القراءة.
الخطوة 5: أضف عنوانًا في قسم الرأس.
بعد ذلك، في قسم الرأس، نريد تسمية وثيقتنا. اكتب اسمًا (سنستخدم “صفحة HTML الخاصة بي” في هذا المثال) ثم لفه في علامات <title></title> . سنقوم أيضًا بوضع مسافة بادئة لعنصر <title> هذا حتى نوضح أنه متداخل في قسم <head> .
في قسم head، ستحتاج إلى تسمية المستند الخاص بك. اكتب اسمًا (سنستخدم “صفحة HTML الخاصة بي” في هذا المثال) ثم لفه في علامات <title></title>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My HTML Page</title>
</head>
<body>
</body>
</html>
الخطوة 6: إضافة عناصر HTML في قسم body.
في قسم النص، دعونا الآن نضيف عنوانًا وفقرة. اكتب محتوى العنوان ولفه في علامات <h1></h1> ، ثم اكتب محتوى الفقرة ولفه في علامات <p></p>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
مثال HTML
لدينا الآن ملف HTML أساسي سيتم تحميله في متصفحك. إليك ما يبدو عليه ملفنا المكتمل في الواجهة الأمامية.
أدناه هو كيف سيبدو على الواجهة الأمامية. لاحظ أنه يتم عرض فقط العنوان والفقرة من قسم النص.
عناصر HTML المشتركة
يتكون الإصدار الأول من HTML من 18 عنصرًا فقط. منذ ذلك الحين، تم إصدار المزيد من الإصدارات مع إضافة العشرات من العلامات في كل إصدار. في أحدث إصدار من HTML، HTML5 ، يوجد 110 علامة HTML.
لا تقلق، رغم ذلك، فهناك عدد قليل فقط من الأشياء التي ستستخدمها في أغلب الأحيان. سنراجع أدناه العناصر الأكثر شيوعًا وعلاماتها.
سنراجع أدناه العناصر الأكثر شيوعًا وعلاماتها.
الفقرة (<p>)
يمثل عنصر فقرة HTML فقرة. من خلال وضع العلامات <p></p> حول النص، ستجعل هذا النص يبدأ في سطر جديد
<p>This is a paragraph.</p> <p>Here’s another paragraph on a new line.</p>
الصورة (<img>)
يقوم عنصر صورة HTML بتضمين صورة في المستند. يتطلب سمة src (المصدر) لعرضها بشكل صحيح. يجب أيضًا تضمين سمة alt في حالة عدم تحميل الصورة بشكل صحيح أو إصابة القارئ بإعاقة بصرية.
فيما يلي مثال لصورة تحتوي على سمة المصدر والبديل:
<img src="https://hubwebz.com/wp-content/uploads/2023/11/logo-2.png" alt="logo"/>
العناوين (<h1>-<h6>)
تمثل عناصر عناوين HTML مستويات مختلفة من عناوين الأقسام. <h1> هو أعلى مستوى للقسم وأكثره بروزًا، في حين أن <h6> هو الأدنى وبالتالي الأقل بروزًا.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
القسم (<div>)
عنصر تقسيم محتوى HTML (div) عبارة عن حاوية عامة على مستوى الكتلة. تساعد عناصر Div في تنظيم التعليمات البرمجية في أقسام محددة بوضوح. كما يقومون بإضافة فواصل أسطر قبل وبعد المحتوى الخاص بهم. وبخلاف ذلك، فإنها لا تؤثر على محتوى الصفحة أو تخطيطها ما لم يتم تصميمها باستخدام CSS.
فيما يلي مثال لـ div الملتف حول صورة:
<div> <img src="https://hubwebz.com/wp-content/uploads/2023/11/logo-2.png" alt="logo"/> </div>
span (<span>)
عنصر امتداد HTML عبارة عن حاوية مضمنة عامة. لا تمثل علامات الامتداد أي شيء بطبيعتها، ولكنها تُستخدم لتجميع محتوى الصياغة لسببين.
الأول هو تطبيق التصميم على جزء من النص . على سبيل المثال، إذا كنت تقوم بإنشاء أحرف استهلالية كبيرة ، فيمكنك تغليف الحرف الأول من الفقرات الافتتاحية لكل قسم من مقالتك بعلامات الامتداد.
<p><span style="font-size:36px;">T</span>his is dummy text. This is more dummy text.</p>
السبب الثاني لاستخدام علامات الامتداد هو تجميع العناصر التي تشترك بالفعل في قيم السمات. على سبيل المثال، ربما يكون لديك موقع ويب للمتحدثين باللغة الإنجليزية الذين يتعلمون اللغة الفرنسية. تم تعيين اللغة الافتراضية على اللغة الإنجليزية ولكن في عدة صفحات، قد يكون لديك جدول يحتوي على المصطلحات الفرنسية في العمود الأول وترجماتها الإنجليزية في العمود الثاني. في هذه الحالة، يمكنك تغليف المصطلحات الفرنسية بعلامات امتداد مع تعيين سمة اللغة على “fr”.
مرساة (<a>)
يقوم عنصر ربط HTML بإنشاء ارتباط تشعبي. يتطلب عنصر الربط سمة href ، التي تحدد وجهة الارتباط. يمكن أن تكون الوجهة قسمًا آخر على نفس صفحة الويب أو صفحة ويب أخرى على نفس الموقع، أو مواقع ويب وملفات وعناوين بريد إلكتروني خارجية.
فيما يلي مثال على رابط متداخل في فقرة:
<p><a href="default.asp">This is a link</a> that appears within a paragraph.</p>
فاصل الأسطر (<br>)
يقوم عنصر فاصل الأسطر بإنشاء فاصل أسطر حيث يتم وضعه. وهذا يعني أنه يمكنك إضافته أينما تريد أن ينتهي النص في السطر الحالي ويستأنف في السطر التالي. يمكن استخدام هذا العنصر لعرض القصائد أو كلمات الأغاني أو أشكال المحتوى الأخرى التي يكون فيها تقسيم الخطوط مهمًا.
فيما يلي مثال لعنوان تم تقديمه بطريقتين: واحدة باستخدام عناصر فاصل الأسطر والأخرى باستخدام عناصر الفقرة.
<!-- Using paragraph and line break elements --> <p>Mustafa Abdo<br> 11378 Fake Street<br> City, State 00000</p> <!-- Using paragraph element only--> <p>Anna Fitzgerald</p> <p>11378 Fake Street</p> <p>City, State 00000</p>
قائمة غير مرتبة (<ul>)
يتم استخدام عنصر القائمة غير المرتبة بتنسيق HTML لتجميع العناصر عندما لا يكون الترتيب مهمًا. قوائم التسوق، على سبيل المثال، لا تحتاج إلى اتباع ترتيب معين. يتم تعريف عناصر القائمة بواسطة العلامة <li> ويتم تغليفها في العنصر <ul> .
وفيما يلي مثال على قائمة غير مرتبة. حاول إضافة بعض عناصر القائمة بنفسك وشاهد كيف تتغير القائمة.
<h1>Components of the project</h1> <ul> <li>Html</li> <li>Css</li> <li>Java script</li> <li>PHP</li> <li>Python</li> <li>mysql</li> </ul>
القائمة المرتبة (<ol>)
يتم استخدام عنصر القائمة المطلوبة بتنسيق HTML لتجميع العناصر عندما يكون الترتيب مهمًا. الوصفات، على سبيل المثال، يجب أن تتبع ترتيبًا معينًا. يجب تحديد الخطوات بواسطة العلامة <li> ثم تغليفها بالعنصر <ol> .
ستبدأ القائمة المرتبة بالرقم 1 افتراضيًا. إذا كنت ترغب في البدء برقم آخر، أضف سمة البداية وقم بتعيين القيمة على الرقم الذي تريده.
فيما يلي مثال لقائمة مرتبة تبدأ بالرقم 1. حاول إضافة خطوات في أجزاء مختلفة من القائمة:
<h1>How to Make Street Corn</h1> <ol> <li>Chop the jalapeno.</li> <li>Add jalapeno and frozen corn to skillet.</li> <li>Cook until charred, then let cool for 5 minutes.</li> <li>Combine cotija cheese, mayo, chili powder, cilantro, and lime in bowl with corn and jalapeno.</li> </ol>
التوكيد (<em>)
يشير عنصر التركيز في HTML إلى ضرورة التركيز على النص الموجود بداخله. تعرض المتصفحات عادةً النص داخل علامات <em> بخط مائل.
فيما يلي مثال على التركيز الملتف حول فقرة والمتداخل داخل الفقرة
<p>This paragraph is normal.</p> <p><em>This paragraph is important!</em></p> <p>This <em>word</em> within the paragraph is important!</p>
Strong (<strong>)
يشير عنصر HTML Strong إلى أن النص الذي يحتوي عليه له أهمية خاصة أو إلحاح. تعرض المتصفحات عادةً النص بالخط العريض .
<p>This paragraph is normal.</p> <p><strong>This paragraph is important!</strong></p> <p>This <strong>word</strong> within the paragraph is important!</p>
الجدول (<table>)
يقوم العنصر <table> بإنشاء جدول لتنظيم المحتوى. يتطلب ثلاثة عناصر HTML أخرى:
- <tr> يحدد صف الجدول.
- <th> يحدد رأس الجدول
- <td> يحدد بيانات الجدول (أي محتوى خلايا الجدول).
فيما يلي مثال للجدول:
<table> <tr> <th>Name</th> <th>Job Title</th> <th>Email address</th> </tr> <tr> <td>Mustafa Abdo</td> <td>Staff Writer</td> <td>[email protected]</td> </tr> <tr> <td>Mohamed</td> <td>Marketing Manager</td> <td>[email protected]</td> </tr> <tr> <td>Ahmed</td> <td>CEO</td> <td>[email protected]</td> </tr> </table>
القاعدة الأفقية (<hr>)
يحدد عنصر القاعدة الأفقية خطًا أفقيًا عبر صفحة الويب. ويمكن استخدامه لتحديد أي تغيير في الموضوع، مثل المشهد التالي في مسرحية، أو قسم جديد من مقال، أو خاتمة مقال.
<p>Improvement may be slow. But experts think human interaction will, eventually, return to the pre-pandemic status quo. The rise in disorder may simply be the unsavory side of a uniquely difficult time—one in which many people were tested, and some failed. “There have been periods where the entire nation is challenged,” Insel said, “and you see both things: people who do heroic things, and people who do some very defensive, protective, and oftentimes ridiculous things.”</p> <hr> <p><em>Olga Khazan is a staff writer at The Atlantic and the author of Weird: The Power of Being an Outsider in an Insider World.</em></p>
Select
يحدد عنصر Select قائمة منسدلة من الخيارات، والتي يمكن للمستخدم من خلالها تحديد خيار واحد (أو عدة خيارات إذا كان مسموحًا به). عادةً ما يتم استخدام عنصرSelect في نماذج HTML لتجميع إرسالات المستخدم. من الأفضل تحديد خيار واحد من بين العديد من الخيارات مع زيادة المساحة على صفحة الويب.
<label for="dog-names">Choose a dog name:</label>
<select name="dog-names" id="dog-names">
<option value="rigatoni">Rigatoni</option>
<option value="dave">Dave</option>
<option value="pumpernickel">Pumpernickel</option>
<option value="reeses">Reeses</option>
</select>
سمات HTML المشتركة
تقوم السمات بتعديل عناصر HTML بطرق مختلفة. يمكنهم تغيير مظهر العنصر، أو تطبيق معرفات فريدة حتى يمكن استهداف العناصر بواسطة CSS، أو توفير المعلومات الضرورية للقراء أو قارئات الشاشة.
تظهر السمات عادةً بأحرف صغيرة وأزواج اسم/قيمة، مع قيمها بين علامتي اقتباس.
أدناه سنلقي نظرة على السمات الأكثر شيوعًا.
سمة النمط
تحتوي سمة النمط على CSS مضمنة. سيتجاوز CSS هذا أي أنماط تم تعيينها في القسم الرئيسي للمستند أو في ورقة أنماط خارجية. سيتم تطبيقه فقط على عنصر HTML الذي يحتوي على سمة النمط في علامته الافتتاحية.
فيما يلي مثال للسمة في HTML:
<p>This paragraph will be black by default. </p> <p style="color: #800000">This paragraph will be maroon. </p>
سمة المعرف ID
يتم استخدام سمة ID لتحديد عنصر واحد في ملف HTML. وهذا يعني أنه لا ينبغي تكرار قيمة سمة ID داخل نفس الملف. باستخدام هذه القيمة الفريدة، يمكنك استهداف عنصر واحد باستخدام CSS داخلي أو خارجي.
فيما يلي مثال للسمة في HTML:
<h1 id=”decorative”>Title in Fancy Typography</h1>
سمة Class
يتم استخدام سمة Class لتحديد مجموعة من العناصر تحت نفس الاسم وتخصيص تلك المجموعة، مما يؤدي بشكل فعال إلى إنشاء مجموعة جديدة من العناصر.
على سبيل المثال، يتم تصنيف جميع أزرار Bootstrap بالفئة .btn بحيث يكون لها نفس النمط الأساسي: خط بحجم 14 بكسل، وحجم متوسط، وحواف مستديرة، وما إلى ذلك.
فيما يلي مثال للسمة في HTML:
<button class="btn" type="submit">Button</button>
سمة اللغة Language
كما ذكرنا سابقًا، تشير سمة اللغة إلى قراء الشاشة عن اللغة الأساسية لصفحة الويب ومتى يحتاجون إلى التبديل إلى لغة أخرى. هذه تفاصيل صغيرة يمكن أن تجعل المحتوى الخاص بك في متناول جميع القراء، بغض النظر عن المنطقة التي ينتمون إليها أو اللغة التي يتحدثون بها.
على الرغم من أن هذه السمة يتم تضمينها بشكل شائع في عنصر HTML، إلا أنه يمكن استخدامها أيضًا مع الفقرة، وdiv، وspan، وعناصر أخرى.
فيما يلي مثال للسمة في HTML:
<p lang="fr">Cette phrase est en français</p> <p lang="es">Esta frase es en español.</p>
سمة href
تحتوي سمة href على وجهة الرابط. يجب دائمًا تضمين هذه السمة مع عنصر الربط.
فيما يلي مثال على سمة href في HTML:
<a rel="noopener" target="_blank" href="https://hubwebz.com">go to egy-daily.com</a>
سمة Source
مثلما يحتاج عنصر الربط إلى سمة href، تحتاج الصورة إلى سمة Source (المصدر). يحتوي هذا على المسار إلى ملف الصورة أو عنوان URL الخاص به.
فيما يلي مثالان للسمة في HTML:
<img src="images/pineapple.png"> <img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg">
السمة البديلة alt
توفر السمة alt معلومات وصفية حول عنصر HTML. يعد هذا أمرًا مهمًا للقراء الذين يعانون من إعاقات بصرية ولجميع القراء في حالة عدم تحميل العنصر. في هذه الحالة، سيظل القراء قادرين على فهم ما كان المقصود من العنصر نقله. مثل السمة المصدر، ستجد غالبًا السمة alt مع عنصر الصورة.
فيما يلي مثال للسمة في HTML:
<img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg" alt="Pineapple in grass">
السمة data-*
يتم استخدام السمة data-* لتخزين البيانات المخصصة الخاصة بالصفحة أو التطبيق. يمكنك استخدام هذه البيانات المخزنة في JavaScript للمستند لإنشاء تجربة أكثر ديناميكية للمستخدم.
يمكن أن تكون العلامة النجمية الموجودة في سمة data-* بأي قيمة.
فيما يلي مثال للسمة في HTML من W3Schools:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
يمكنني بعد ذلك استخدام هذه البيانات في JavaScript لتشغيل رسالة منبثقة توفر مزيدًا من المعلومات حول كل عنصر في القائمة. لنفترض، على سبيل المثال، أن أحد الزائرين نقر على كلمة “Owl”. بعد ذلك سيظهر مربع منبثق مكتوب عليه “The owl is a bird”، كما هو موضح في لقطة الشاشة أدناه.
الآن بعد أن قمنا بتغطية العناصر والسمات الأكثر شيوعًا في HTML، دعنا نستكشف أين يمكنك التدرب على كتابة هذه اللغة ومواصلة تعلم المزيد عنها.
كيف تتعلم لغة HTML
هناك المئات من الموارد المتاحة لتعلم لغة HTML للمبتدئين والمطورين الأكثر تقدمًا. اعتمادًا على أسلوب التعلم الخاص بك، قد تفضل قراءة منشورات المدونة، أو مشاهدة مقاطع الفيديو التعليمية، أو الحصول على دورات عبر الإنترنت، أو تنزيل كتاب إلكتروني، أو استخدام مجموعة من كل هذه الموارد.
سنتناول أدناه مثالًا واحدًا على الأقل لكل نوع من أنواع المحتوى هذه. بهذه الطريقة، بغض النظر عن نوع المتعلم الذي أنت عليه، يمكنك العثور على مورد يساعدك على تعلم هذه اللغة.
1. البرنامج التعليمي لـ HTML 4.01 بواسطة W3C
تقدم W3C مجموعة من المواد التدريبية لـ HTML وCSS. على الرغم من أن هذه البرامج التعليمية ليست تفاعلية، إلا أنها مليئة بالمعلومات ذات الصلة بالمطورين المبتدئين والمتقدمين.
لا تقلق بشأن تفاعل الدورات التدريبية، حيث توفر W3C صفحة مرجعية تقوم بتقسيم المادة أسبوعًا بعد أسبوع. في الأسبوع الأول، ستتعلم أساسيات HTML وصياغتها، ثم بحلول الأسبوع الرابع ستبدأ في إنشاء أوراق الأنماط وإنشاء أقسام كاملة لصفحة الويب الخاصة بك.
2. دروس HTML للمبتدئين من أكاديمية الزيرو
أنشأ اسامة الزيرو برنامجًا تعليميًا للمبتدئين في HTML لأولئك الذين ليس لديهم أي معرفة سابقة بـ HTML أو CSS. يبدأ الأمر بنظرة عامة على ماهية HTML وما تتكون منه (العلامات والعناصر والسمات). ثم يشرح كيفية إنشاء ملف HTML بالعناوين والفقرات والعناوين والعناصر الأخرى. في النهاية، ستكون قد تعلمت كيفية إنشاء ملف HTML كاملاً. نوصيك أيضًا بمتابعة قناته على اليوتيوب.
أنت الآن جاهز للترميز.
HTML هي اللغة التي نستخدمها للتحدث مع أجهزة الكمبيوتر. إنها الطريقة التي تعرض بها المتصفحات النصوص والصور والفقرات والعناصر الأخرى على صفحة الويب.
وعلى هذا النحو، فإن لغة HTML هي اللغة السائدة في شبكة الويب العالمية. وهذا يجعل اللغة مهمة ليس فقط للأشخاص الذين يحاولون أن يصبحوا مبرمجين، ولكن أيضًا للمسوقين. إن معرفة أساسيات لغة الترميز هذه ستسمح لك بإجراء تغييرات على موقع الويب الخاص بك دون الحاجة إلى الاعتماد على مطور، مما يوفر لك ولعملك الوقت والمال.
لا تعليق