17 من أمثلة تعليمات HTML البرمجية البسيطة التي يمكنك تعلمها في 10 دقائق

17 من أمثلة تعليمات HTML البرمجية البسيطة التي يمكنك تعلمها في 10 دقائق

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





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



1.

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





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

2.

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



3.

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

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



أربعة.

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


My Website

هذا هو الاسم الذي سيتم عرضه كعنوان علامة التبويب عند فتحه في المستعرض.



5.

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

  • وصف : وصف أساسي لصفحتك.
  • الكلمات الدالة : مجموعة مختارة من الكلمات الرئيسية التي تنطبق على صفحتك.
  • مؤلف : مؤلف صفحتك.
  • منفذ العرض : علامة للتأكد من أن صفحتك تبدو جيدة على جميع الأجهزة.

فيما يلي مثال قد ينطبق على هذه الصفحة:




يجب أن تحتوي علامة 'viewport' دائمًا على 'width = device-width، initial-scale = 1.0' كمحتوى للتأكد من عرض صفحتك جيدًا على أجهزة الجوّال وأجهزة سطح المكتب.

6.

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

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


Everything you want displayed on your page.

7.

رأس كبيرة أقل قليلاً


العنوان الفرعي

نتيجة:

كما ترى ، فإنها تصبح أصغر في كل مستوى.

8.

تبدأ علامة الفقرة فقرة جديدة. يؤدي هذا عادةً إلى إدراج فاصلي أسطر.

انظر ، على سبيل المثال ، عند الفاصل بين السطر السابق وهذا السطر. هذا ما أ

العلامة ستفعل.

Your first paragraph.


Your second paragraph.

نتيجة:

فقرتك الأولى.

فقرتك الثانية.

يمكنك أيضا استخدام أنماط CSS في علامات الفقرات الخاصة بك ، مثل هذه التي تغير حجم النص:

This is 50% larger text.

نتيجة:

9.

تقوم علامة فاصل الأسطر بإدراج فاصل سطر واحد:

The first line.

The second line (close to the first one).

نتيجة:

العمل بطريقة مماثلة هو

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

10.

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

كيفية نقل محرك google إلى محرك أقراص آخر

ومع ذلك ، يمكنك استخدام إلى نص عريض.

Very important things you want to say.

نتيجة:

أشياء مهمة جدا تريد أن تقولها.

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

أحد عشر.

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

An emphasized line.

نتيجة:

خط مؤكد.

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

12.

ال ، أو anchor ، تسمح لك بإنشاء روابط. رابط بسيط يبدو كالتالي:

اذهب إلى MUO

تحدد السمة 'href' وجهة الارتباط. في كثير من الحالات ، سيكون هذا موقع ويب آخر. يمكن أن يكون أيضًا ملفًا ، مثل صورة أو ملف PDF.

تشمل السمات المفيدة الأخرى 'الهدف' و 'العنوان'. تُستخدم السمة target بشكل حصري تقريبًا لفتح ارتباط في علامة تبويب أو نافذة جديدة ، مثل هذا:

Go to MUO in a new tab

نتيجة:

انتقل إلى MUO في علامة تبويب جديدة

تنشئ سمة 'العنوان' تلميحًا. مرر مؤشر الماوس فوق الرابط أدناه لترى كيف يعمل:

Hover over this to see the tool tip

نتيجة:

تحوم فوق هذا لرؤية تلميح الأداة

13.

إذا كنت تريد تضمين صورة في صفحتك ، فستحتاج إلى استخدام علامة الصورة. ستستخدمه عادةً مع السمة 'src'. هذا يحدد مصدر الصورة ، مثل هذا:

نتيجة:

برامج لتثبيتها على جهاز كمبيوتر جديد

تتوفر سمات أخرى ، مثل 'الارتفاع' و 'العرض' و 'البديل'. إليك كيف قد يبدو ذلك:

the name of your image

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

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

14.

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

  1. ) ، لذلك ستبدو قائمتك على النحو التالي:


    1. First thing

    2. Second thing

    3. Third thing

    نتيجة:

    1. اول شيء
    2. الشيء الثاني
    3. الشيء الثالث

    في HTML5 ، يمكنك استخدام ملفات

      لعكس ترتيب الأرقام. ويمكنك ضبط قيمة البداية باستخدام سمة البدء.

      تتيح لك السمة 'النوع' إخبار المتصفح بنوع الرمز الذي يجب استخدامه لعناصر القائمة. يمكن ضبطه على '1' أو 'A' أو 'a' أو 'I' أو 'i' ، مع تعيين القائمة للعرض بالرمز المشار إليه مثل هذا:

        خمسة عشر.

          القائمة غير المرتبة أبسط بكثير من نظيرتها المرتبة. إنها ببساطة قائمة ذات تعداد نقطي.


          • First item

          • Second item

          • Third item

          نتيجة:

          • البند الأول
          • البند الثاني
          • البند الثالث

          تحتوي القوائم غير المرتبة أيضًا على سمات 'النوع' ، ويمكنك تعيينها على 'قرص' أو 'دائرة' أو 'مربع'.

          16.

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














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          ال

          و
          تحدد العلامات بداية ونهاية الجدول. التحتوي العلامة على جميع محتويات الجدول.

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

          نتيجة:

          العمود الأولالعمود الثاني
          الصف 1 ، العمود 1الصف 1 ، العمود 2
          الصف 2 ، العمود 1الصف 2 ، العمود 2

          17.

          عندما تقتبس من موقع ويب أو شخص آخر وتريد تعيين الاقتباس بعيدًا عن بقية المستند ، استخدم علامة blockquote. كل ما عليك فعله هو إرفاق الاقتباس في علامات blockquote الافتتاحية والختامية:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          نتيجة:

          الويب كما تخيلته ، لم نشاهده بعد. المستقبل لا يزال أكبر بكثير من الماضي.

          قد يعتمد التنسيق الدقيق المستخدم على المتصفح الذي تستخدمه أو CSS لموقعك. لكن العلامة تبقى كما هي.

          عينات كود HTML

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

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

          يشارك يشارك سقسقة بريد الالكتروني هل تريد تعلم البرمجة الأساسية؟ جرب 5 تطبيقات ترميز صغيرة الحجم في وقت فراغك

          تريد أن تتعلم البرمجة الأساسية ولكن لديك القليل من الوقت؟ ستستغرق تطبيقات الترميز صغيرة الحجم هذه بضع دقائق فقط من يومك الحافل.

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

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

          المزيد من Andy Betts

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

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

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