علامات HTML المطلوبة. مرجع علامة HTML

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

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

قائمة علامات html 1. علامة HTML (للفقرات) - تعرض فقرة نصية (تسمح بسمات النمط والفئة والمعرف). العلامة الأكثر شيوعًا، حيث يتم وضع النص فيها غالبًا (ومع ذلك، هذا هو ما تم إنشاؤه من أجله).

على سبيل المثال كود HTML:

نص الفقرة رقم واحد

وهذه فقرة أخرى

نص الفقرة رقم واحد

وهذه فقرة أخرى

يمكنك أيضًا إضافة معلمة نمط إلى العلامة:

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

يمكنك أيضًا تحديد سمات CLASS وID. على سبيل المثال:

2. علامة HTML و (بالخط العريض)

و- علامتان تسمحان لك بجعل الخط غامقًا. لا يوجد فرق بين هذه العلامات.

دعونا نعطي مثالا. كود HTML:

ظفري

يتحول إلى ما يلي على الصفحة:

ظفري

يمكنك أيضًا تحديد سمات CLASS وID (كما في حالة Note

هذه العلامات لها تأثير ضئيل على ترتيب المستندات في محركات البحث، لذلك من الأفضل عدم استخدامها بلا هدف.

3. علامة HTML (إنشاء مائل)

- الخط المائل (يسمح بمعلمات النمط والفئة والمعرف)

على سبيل المثال كود HTML:

نص مائل

يتحول إلى ما يلي على الصفحة:

4. علامة HTML (النص الذي تحته خط)

- خط تحته خط (يسمح بمعلمات النمط والفئة والمعرف)

على سبيل المثال كود HTML:

نص تحته خط

يتحول إلى ما يلي على الصفحة:

نص تحته خط

5. علامة HTML (إنشاء ارتباط تشعبي)

ينشئ رابطًا على الصفحة (يسمح بالنمط والفئة والمعلمات الأخرى).

على سبيل المثال كود HTML:

نص الرابط

يتحول إلى ما يلي على الصفحة:

جميع معلمات وسمات العلامة سيتم تناولها في درس منفصل: علامة HTML.

6. علامة HTML (العناوين في المحتوى)

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

على سبيل المثال كود HTML:

العنوان ح1

يتم استخدام العلامة لعنوان الصفحة (بالإضافة إلى العنوان)

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

7. علامة HTML (المحاذاة)

- محاذاة المحتوى في المركز.

على سبيل المثال كود HTML:

سيكون هذا النص في المركز

يتحول إلى ما يلي على الصفحة:

سيكون هذا النص في المركز

ملحوظة
  • - للنص
  • ... - لكل شيء (على سبيل المثال، صورة)
8. علامة HTML (نص منخفض)

- يعرض الخط المنخفض.

على سبيل المثال كود HTML:

نص عادي، نص بين السطور

يتحول إلى ما يلي على الصفحة:

نص عادي، نص بين السطور

9. علامة HTML (نص مرتفع)

- يعرض الخط المرتفع.

على سبيل المثال كود HTML:

نص عادي، نص مرتفع

يتحول إلى ما يلي على الصفحة:

نص عادي، نص مرتفع

10. علامة HTML،

، - يعرض خطًا أكبر/أصغر بمقدار بكسل واحد من الحجم الحالي (مسموح به بواسطة معلمة النمط والفئة والمعرف).

على سبيل المثال كود HTML:

الخط العادي، هذا الخط أكبر بمقدار بكسل واحد

يتحول إلى ما يلي على الصفحة:

الخط العادي، هذا الخط أكبر بمقدار بكسل واحد

11. علامة HTML
    (إنشاء القوائم)

    يعرض قائمة (يقبل النمط والفئة ومعلمات المعرف). تتم كتابة كل عنصر جديد بين

  • و
    • .

    على سبيل المثال كود HTML:

    قائمة:
    • العنصر الأول من القائمة
    • العنصر الثاني من القائمة

    يتحول إلى ما يلي على الصفحة:

    قائمة:

    • العنصر الأول من القائمة
    • العنصر الثاني من القائمة
    12. علامة HTML (إنشاء الجداول)

    - إنشاء جدول (يسمح بالنمط ومعلمة الفئة). يتم إنشاء كل سطر جديد بواسطة العلامات ، والعمود .

    على سبيل المثال كود HTML:

    1-سطر 1 عنصرالسطر الأول العنصر الثاني
    عنصر 2-السطر 1عنصر 2-السطر 2

    يتحول إلى ما يلي على الصفحة:

    جميع قدرات العلامة

    13. علامة HTML
    (الخط مقطوع)


    - الانتقال إلى السطر التالي، هو علامة واحدة.

    على سبيل المثال كود HTML:

    خط 1
    2 خط
    السطر الثالث وسيكون هذا النص في السطر الثالث، لأنه لم يكن هناك انتقال

    يتحول إلى ما يلي على الصفحة:

    1-خط
    2 خط
    السطر الثالث وسيكون هذا النص في السطر الثالث، لأنه لم يكن هناك انتقال

    14. علامة HTML (خط أفقي)

    - يرسم خطًا ويمثل علامة واحدة (يسمح بالنمط ومعلمة الفئة).

    على سبيل المثال كود HTML:

    بعض النص فوق السطر وسيكون هذا النص أسفل السطر

    يتحول إلى ما يلي على الصفحة:

    بعض النص فوق السطر وسيكون هذا النص أسفل السطر

    15. علامة HTML (إخراج الصورة)

    على سبيل المثال كود HTML:

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

    يتحول إلى ما يلي على الصفحة:

    جميع قدرات العلامة سيتم مناقشتها في درس منفصل : .

    16. علامة HTML (تنسيق النص)

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

    على سبيل المثال كود HTML:

    هذا النص باللون الأخضر وحجمه 15 بكسل

    يتحول إلى ما يلي على الصفحة:

    ملحوظة

    علامة مماثلة هي .

    17. علامة HTML (إنشاء النموذج)

    - إنشاء نموذج على الصفحة (يسمح بالنمط ومعلمة الفئة).

    على سبيل المثال، إدخال تسجيل الدخول وكلمة المرور، أي أزرار، أي نموذج تسجيل - كل هذه النماذج.

    18. علامة HTML (إنشاء الكتل)

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

    علامات HTML هي أساس لغة HTML. تُستخدم العلامات لتحديد بداية ونهاية العناصر في الترميز.

    يتكون كل مستند HTML من شجرة من عناصر HTML والنص. يتم تعريف كل عنصر HTML بواسطة علامة البداية (الفتح) والنهاية (الإغلاق). تحتوي علامتي الفتح والإغلاق على اسم العلامة.

    تنقسم جميع عناصر HTML إلى خمسة أنواع:

    • العناصر الفارغة - , ,
      , , , , , ,
    يستخدم لتخزين معلومات إضافية حول الصفحة. يتم استخدام هذه المعلومات بواسطة المتصفحات لمعالجة الصفحة، ومن خلال محركات البحث لفهرستها. يمكن أن يكون هناك عدة علامات في الكتلة، نظرًا لأنها تحمل معلومات مختلفة اعتمادًا على السمات المستخدمة.
    مؤشر القياس في نطاق معين.
    قسم من الوثيقة يحتوي على روابط التنقل الخاصة بالموقع.
    يحدد القسم الذي لا يدعم البرمجة النصية.
    حاوية لتضمين الوسائط المتعددة (مثل الصوت والفيديو وتطبيقات Java وActiveX وPDF وFlash). يمكنك أيضًا إدراج صفحة ويب أخرى في مستند HTML الحالي. يتم استخدام العلامة لتمرير معلمات البرنامج المساعد.
    قائمة مرقمة مرتبة. يمكن أن يكون الترقيم رقميًا أو أبجديًا.
    حاوية تحتوي على عنوان لمجموعة من العناصر.
    يحدد خيارًا/خيارًا للاختيار من القائمة المنسدلة أو .
    حقل لعرض نتيجة العملية الحسابية المحسوبة باستخدام البرنامج النصي.

    		الفقرات في النص.
    يحدد معلمات المكونات الإضافية المضمنة باستخدام العنصر.
    عنصر حاوية يحتوي على عنصر واحد وصفر أو أكثر من العناصر. في حد ذاته لا يعرض أي شيء. يسمح للمتصفح باختيار الصورة الأنسب.
    إخراج النص بدون تنسيق، مع الحفاظ على المسافات وفواصل النص. يمكن استخدامه لعرض رمز الكمبيوتر ورسائل البريد الإلكتروني وما إلى ذلك.
    مؤشر على الانتهاء من مهمة من أي نوع.
    يحدد الاقتباس القصير.
    حاوية لرموز شرق آسيا وفك رموزها.
    يحدد النص المتداخل الخاص به باعتباره المكون الأساسي للتعليق التوضيحي.
    يضيف وصفًا مختصرًا أعلى أو أسفل الأحرف الموجودة في العنصر، ويتم عرضها بخط أصغر.
    وضع علامة على النص المضمن كتعليق توضيحي إضافي.
    يعرض نصًا بديلاً إذا كان المتصفح لا يدعم العنصر.
    يعرض النص غير الحالي مع يتوسطه خط.
    يستخدم لعرض النص الذي يمثل نتيجة تنفيذ كود البرنامج أو البرنامج النصي، بالإضافة إلى رسائل النظام. يتم عرضه بخط أحادي المسافة.
    يُستخدم لتحديد برنامج نصي من جانب العميل (عادةً JavaScript). يحتوي إما على نص البرنامج النصي أو يشير إلى ملف برنامج نصي خارجي باستخدام السمة src.
    يحدد المنطقة المنطقية (القسم) من الصفحة، عادةً برأس.
    عنصر تحكم يسمح لك بتحديد القيم من مجموعة مقترحة. يتم وضع القيم المتغيرة في .
    يعرض النص بحجم خط أصغر.
    يحدد موقع ونوع موارد الوسائط البديلة لـ , , .
    حاوية للعناصر المضمنة. يمكن استخدامه لتنسيق مقاطع النص، مثل تمييز الكلمات الفردية بالألوان.
    يضع التركيز في النص، ويسلط الضوء عليه بالخط العريض.
    يتضمن أوراق الأنماط المضمنة.
    يحدد الكتابة المنخفضة للرموز، على سبيل المثال، فهرس العناصر في الصيغ الكيميائية.
    ينشئ عنوانًا مرئيًا للعلامة. يتم عرضه بمثلث مملوء، ويتيح لك النقر عليه عرض تفاصيل العنوان.
    يحدد التهجئة المرتفعة للأحرف.
    الخط على الصفحة

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

    خاصية CSS حجم الخط

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

    على سبيل المثال، إذا قمنا بتعيين حجم النص بنسبة مئوية لفقرة ما وكان موجودًا في علامة النص، فإن 100% له سيكون مساويًا للحجم المحدد للنص. وفقًا لذلك، إذا كانت العلامة تحتوي على خط محدد على 12 بكسل، لتعيين حجم الفقرة على 24 بكسل، فأنت بحاجة إلى كتابة هذا:

    ص (حجم الخط: 200%)

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

    ص (حجم الخط: 200%)

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

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

    محدد (حجم الخط: أكبر)

    محدد (حجم الخط: أكبر)

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

    حجم العناصر الرئيسية في صفحة الويب

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

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

    الصورة (العرض: 50 بكسل، الارتفاع: 50 بكسل)

    < img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- >

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

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

    علامات html الأساسية هي الأساس الذي يتم بناء أي موقع/مدونة عليه تقريبًا. من هذه المقالة سوف تتعلم بالضبط تلك الـ 20٪ من العلامات التي ستحتاجها دائمًا.

    كما هو الحال في أي لغة، وحتى هنا، تنطبق قاعدة باريتو 20/80 (20٪ من الأشياء 80٪ مهمة لتحقيق النتيجة المرجوة)، مما يعني أنه يكفي معرفة 20٪ فقط من الرموز لتحقيقها بثقة أهدافك في بناء الموقع.

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

    - هذه هي أبسط لغة! إذا قررت دراستها، فمن المهم أن تفهم منذ البداية أنه لا توجد صعوبة في ذلك. يمكننا أن نقول بثقة أن الأطفال يواجهون وقتًا أكثر صعوبة في دروس علوم الكمبيوتر في المدرسة.

    اذا هيا بنا نبدأ. من الأفضل كتابة الأكواد في المفكرة المضمنة في البرامج القياسية لنظام التشغيل Windows أو في البرنامج المجاني "Notepad + +".

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

    علامات HTML لإنشاء إطار موقع الويب

    يمكن إقران العلامات أو عدم إقرانها. المقترنة مفتوحة ومغلقة، أي أن الإغلاق يحتوي على شرطة مائلة عكسية "/".

    أول ما يجب أن يكون في أي مستند HTML عند إنشاء صفحة مدونة هو: