5 خطوات لفهم كود HTML الأساسي

5 خطوات لفهم كود HTML الأساسي

HTML جزء حيوي من الويب كما نعرفه. وبينما يقوم عدد قليل من مصممي الويب بإنشاء صفحات عن طريق كتابة HTML يدويًا ، فلا يزال من السهل معرفة القليل عنها.





سنلقي نظرة على بعض أساسيات اللغة ، بما في ذلك ماهية HTML حقًا ، وبعض المفاهيم الأساسية ، وكيفية تفاعلها مع اللغات الأخرى. فكر في هذا على أنه دورة تدريبية مكثفة حول 'HTML for dummies'.



أساسيات HTML: ما هي HTML؟

HTML تعني لغة ترميز النصوص التشعبية . وبينما يتم دمجها أحيانًا مع لغات البرمجة ، إلا أن هذا ليس دقيقًا.





ك لغة توصيف النص ، يتيح لك HTML فقط إنشاء تخطيط عرض الصفحات. صحيح لغة برمجة ، مثل Java أو C ++ ، يحتوي على المنطق والأوامر التي يتم تنفيذها.

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



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

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



الخطوة 1: فهم مفهوم العلامات

يستخدم HTML نظام العلامات لتصنيف عناصر مختلفة من المستند.

تأتي معظم العلامات في أزواج لتلتف النص المتأثر بداخلها. إليك مثال بسيط (ملف



العلامة تجعل النص بالخط العريض ؛ سنناقش هذا أكثر في لحظة.)

This is some bold text .

لاحظ كيف تبدأ علامة الإغلاق بشرطة مائلة للأمام (/). هذا يدل على علامة إغلاق ، وهو أمر مهم. إذا لم تغلق علامة ، فسيكون لكل شيء من البداية فصاعدًا تلك السمة.

تحويل png إلى pdf windows 10

ومع ذلك ، لا تحتوي كل العلامات على زوج. تسمى بعض عناصر HTML عناصر فارغة ، ليس لديهم محتوى وهم موجودون بمفردهم. مثال على ذلك هو


العلامة ، وهي فاصل أسطر. يمكنك 'إغلاق' مثل هذه العلامات بإضافة شرطة مائلة (مثل


) لكنها ليست ضرورية تمامًا.

الخطوة 2: تخطيط HTML الهيكل العظمي

يجب أن يحتوي مستند HTML المناسب على علامات معينة محددة بحيث يتم وضعها بشكل صحيح. هذه هي الأجزاء الأساسية:

  • يجب أن يبدأ كل مستند HTML بـ لتعلن عن نفسها على هذا النحو. وبالتالي ، علامة الإغلاق الخاصة به ، ، هو العنصر الأخير في ملف HTML.
  • التالي ، يتضمن قسم معلومات مثل عنوان الصفحة والنصوص المختلفة التي يتم تشغيلها على الصفحة وما شابه. كما يوحي الاسم ، يأتي هذا عادةً بعد الأولي مباشرةً بطاقة شعار. لا يرى المستخدم النهائي الكثير من المحتوى في هذه العلامات.
  • أخيرًا ، تحتوي العلامة على نص الصفحة التي يراها القارئ (بالإضافة إلى المزيد). ستجد هنا الصور والروابط والمزيد.

منذ

يشكل القسم الجزء الأكبر من مستند HTML ، بينما تبحث بقية الإرشادات التفصيلية في العناصر المتعلقة به.

الخطوة 3: علامات HTML الأساسية للتنسيق

بعد ذلك ، دعنا نلقي نظرة على بعض العلامات الشائعة التي تشكل مستندات HTML. بالطبع ، لا يمكن تغطية كل عنصر ، لذلك سنراجع بعضًا من أهم العناصر. لقد غطينا العديد من أمثلة HTML إذا كانت هذه لا ترضيك.

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

تنسيق نص بسيط

يدعم HTML أنماط النص الأساسية مثل التي تجدها في Microsoft Word:

  • العلامات تجعل النص بالخط العريض .
  • سوف العلامات (التي تقف على 'التركيز') مائل نص.

يدعم HTML أيضًا الأقدم

علامة للخط العريض و

للخط المائل. ومع ذلك ، من الأفضل استخدام ما سبق.

باختصار،

و

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

فقرة وأقسام أخرى

ملفات HTML

تتيح لك العلامة تحديد قسم من المستند. عادة ، يتم إقران هذا بـ CSS (انظر أدناه) لتنسيق قسم بطريقة معينة.

ال

تسمح لك العلامة بتقسيم النص إلى فقرات. ستضع المتصفحات بعض المساحة تلقائيًا قبل وبعد ذلك ، مما يتيح لك فصل النص بشكل طبيعي.

يمكنك إضافة رؤوس إلى المستند الخاص بك وتسهيل متابعتها باستخدام ملف

عبر

العلامات. H1 هو العنوان الأكثر أهمية ، بينما H6 هو الأقل أهمية. تستخدم كل مقالة في MakeUseOf تقريبًا رؤوس H2 و H3 لتنظيم المعلومات.

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




لإضافة فاصل أسطر.

فيما يلي مثال يستخدم كل ما يلي:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



الخطوة 4: إدخال الصور

الصور جزء حيوي من معظم صفحات الويب. يمكنك إضافتها بسهولة باستخدام HTML ، وحتى تعيين خصائص مختلفة لها.

تقوم بإدراج صورة باستخدام ملف

بطاقة شعار. الجمع بين هذا مع

كيفية العثور على الأغنية المستخدمة في فيديو يوتيوب
src

تتيح لك السمة تحديد المكان الذي تريد تحميل الصورة منه.

سمة مهمة أخرى من

العلامات هي

alt

. يتيح لك النص البديل وصف الصورة لقارئات الشاشة أو في حالة عدم تحميل الصورة بشكل صحيح. يمكنك تمرير الماوس فوق الصورة لمشاهدة نصها البديل.

استخدم ال

width

و

height

لتحديد عدد وحدات البكسل التي تظهر بها الصورة.

ضع كل ذلك معًا ، وستبدو علامة الصورة كما يلي:

Dr. Phil

لن تكون شبكة الويب العالمية عبارة عن شبكة ويب كبيرة بدون روابط لصفحات أخرى. باستخدام

علامة ، يمكنك الارتباط بصفحات أخرى على أي نص.

داخل

العلامة ، ال

href

السمة توضح مكان الارتباط. ببساطة لصق عنوان URL سيعمل بشكل جيد. يمكنك استعمال ال

title

لإضافة جزء من النص الذي يظهر عندما يمرر شخص ما الماوس فوق الارتباط.

الرابط الأساسي يبدو كالتالي:

Visit Google

ال

تحتوي العلامة على العديد من العناصر المحتملة الأخرى ، لكننا لن نتعمق فيها هنا.

كيف يتصل HTML بـ CSS و JavaScript

لقد نظرنا في أساسيات HTML وكيفية إنشائها لصفحة ويب. ولكن كما يمكنك أن تتخيل ، فإن HTML وحده لا يصلح للويب الحديث. كانت صفحات ويب HTML البسيطة شائعة في أيام 'الويب 1.0' ، عندما كانت معظم مواقع الويب لا تعدو كونها نصًا ثابتًا.

لكن الآن ، لدينا الكثير. CSS (أوراق الأنماط المتتالية) هي لغة تستخدم لوصف كيف يجب أن يبدو النص الذي أعددته في HTML. تذكر

علامة ناقشنا؟ داخل هذا (وعلامات أخرى) ، يمكنك تحديد ملف

class

ينسب. بعد ذلك ، في مستند CSS المصاحب ، يمكنك كتابة تعليمات حول كيفية ذلك

class

يجب الرؤية.

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

جافا سكريبت

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

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

هذه مجرد أمثلة أولية قليلة. JavaScript هي لغة برمجة قادرة على القيام بالكثير ، وهي أكثر تعقيدًا نسبيًا من HTML و CSS. ارى نظرة عامة على JavaScript للمزيد.

إن النظر إلى النطاق الكامل لتصميم الويب هو خارج نطاق هذه المقالة ، ولكن يكفي أن نقول إن HTML يتفاعل مع لغات أخرى لإنشاء صفحات الويب التي نعرفها اليوم.

تطور HTML

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

تعلن التكرارات الجديدة لـ HTML أيضًا أن بعض العلامات القديمة تم إهمالها من وقت لآخر. وتشمل هذه العلامات الفظيعة مثل

و

(هذا التمرير ونص الفلاش على التوالي) شائعًا في تصميم موقع الويب في التسعينيات. لذا ضع في اعتبارك أن المعايير تتغير بمرور الوقت.

القليل من معرفة HTML يقطع شوطًا طويلاً

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

المحافظ التي تحمي بطاقات الائتمان الخاصة بك

لمعرفة المزيد ، قم بترقية مهاراتك في تطوير الويب باستخدام الأدوات الأساسية ثم تحقق من ذلك دليلنا حول كيفية تصميم موقع الويب الأول الخاص بك .

حقوق الصورة: Belyaevskiy / الإيداع

يشارك يشارك سقسقة بريد الالكتروني 5 نصائح لزيادة كفاءة أجهزة VirtualBox Linux الخاصة بك

هل سئمت من الأداء الضعيف الذي تقدمه الأجهزة الافتراضية؟ إليك ما يجب عليك فعله لتعزيز أداء VirtualBox الخاص بك.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • لغة البرمجة
  • تطوير الشبكة
  • جافا سكريبت
  • أدوات مشرفي المواقع
  • برمجة
  • HTML5
نبذة عن الكاتب بن شتيجنر(تم نشر 1735 مقالة)

Ben هو نائب محرر ومدير Onboarding في MakeUseOf. ترك وظيفته في مجال تكنولوجيا المعلومات ليكتب بدوام كامل في عام 2016 ولم ينظر إلى الوراء أبدًا. لقد كان يغطي البرامج التعليمية التقنية وتوصيات ألعاب الفيديو والمزيد ككاتب محترف لأكثر من سبع سنوات.

المزيد من Ben Stegner

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك