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

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

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

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

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

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

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

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

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

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

• - للنص
• ... - لكل شيء (على سبيل المثال، صورة)

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

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

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

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

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

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

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

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

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

على سبيل المثال كود 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 وCSS وJavaScript وPHP وما إلى ذلك، أي لبرمجة الويب. بالإضافة إلى ذلك، فهي تسمح لك بمشاهدة ثمار جهودك على الفور في المتصفح المدمج وتسليط الضوء على بعض الأخطاء في التعليمات البرمجية المكتوبة.

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

أفعل ذلك: أكتب الكود في Dreamweaver، ثم احفظه وانقر فوق الزر "عرض في المتصفح" (يمكنك تحرير قائمة المتصفحات في هذه القائمة بنفسك)، ثم أعود إلى Dreamweaver واستمر في التحرير. هنا . هذا كل ما يتعلق بالأدوات، والآن دعنا ننتقل إلى علامات HTML.

لنبدأ ببنية صفحة HTML، أو بالأحرى بعلاماتها الرئيسية.

علامات صفحة HTML المطلوبة

تتضمن علامات HTML (الأساسية) المطلوبة المستخدمة في كل مستند HTML ما يلي:

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

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

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

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

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

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

يقع المحتوى الرئيسي لمستند HTML بين العلامات والعلامات. إليك كل ما نراه عندما نفتح صفحة html: النص والرسومات والقوائم والأزرار وما إلى ذلك. هذا هو "النص" الرئيسي للصفحة.

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

ثم ستكون خلفية الصفحة بأكملها حمراء.

هنا العلامة هي في الواقع علامة؛ bgcolor - السمة الخاصة به؛ "#FF0000" - قيمة السمة (يمكن أن تحتوي العلامة على عدة سمات).

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

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

كيف أقترح تعلم HTML

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

ت . أي أن علامات عنوان مستند html () يتم أخذها في الاعتبار أولاً، ثم علامات "النص الأساسي" ().

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

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

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

حسنًا، الآن، دون تردد لمدة دقيقة، انقر فوق الزر "التالي" واستمر في اكتشاف كيفية قيام هؤلاء الرجال غير الحليقين والمحرومين من النوم بإنشاء مواقع الويب.




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

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

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

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

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

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

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

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

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

• ).
علامات HTML الأساسية

نظرًا لأن العلامات هي أساس لغة الترميز، فليس من المستغرب أن يكون هناك الكثير منها. دعونا نلقي نظرة على العلامات الرئيسية والأكثر أهمية.

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

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

• - عنصر الكتلة. يتم تنسيق النص الموجود بالداخل باستخدام CSS (أوراق الأنماط المتتالية، وهي موضوع الجزء الثاني من البرنامج التعليمي).
• . لديك فقرة

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

• ,
  ,
  • - قائمة العلامات. ملحوظة ومرقمة - عمل هذه العلامات. هناك أيضًا قوائم تعريفات تكون العلامات مسؤولة عنها، ولكنك ستتعرف بالتفصيل على كل هذه التعريفات الستة في مقال "إنشاء القوائم".
, , , يتم استخدامها عند إنشاء الجداول ويتم مناقشتها بالتفصيل في مقالة منفصلة.
• - علامة تضيف التفاعل إلى الصفحة، أي تسمح للمستخدم بالتفاعل مع موقع الويب. بالطبع، يحتاج النموذج إلى معالج، ولكن بمساعدة العلامات الموجودة بداخله، يمكنك إنشاء واجهة. إن مربعات الاختيار والأزرار وأزرار الاختيار وحقول الإدخال والكائنات الأخرى التي تتطلب إجراءات نشطة منك كلها عناصر نموذج يتم وضع الكود الخاص بها داخل الحاوية.
• - علامة تقوم بإنشاء زر تفاعلي. لكي يحدث شيء ما عند النقر عليه، يجب أن يكون الزر في النموذج (الموجود بين العلامات).
• ينشئ عناصر النموذج: المفاتيح، وخانات الاختيار، والأزرار، وجميع أنواع حقول الإدخال. تم إدخالها في حاوية. ولكن لماذا نحتاج إلى أشياء منفصلة إذا كان هناك شيء عالمي؟ يسمح لك بإنشاء زر بمعلمات متقدمة. على سبيل المثال، يمكنك وضع صورة على زر. لا يمكن القيام بذلك على عنصر تم إنشاؤه من خلال .
• و - علامات إنشاء القائمة في HTML 5. - هذه حاوية يتم وضع العناصر بداخلها، وتؤدي إضافتها إلى إنشاء عناصر القائمة. زوجان مثيران للاهتمام. على سبيل المثال، بمساعدتها يمكنك إنشاء قائمة السياق الخاصة بك لصفحة أو لعنصرها الفردي.
• - علامة نموذج أخرى تنشئ حقلاً كبيرًا فيه، حيث لا يمكنك إدخال سطر واحد فقط من النص، بل فقرات بأكملها.

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

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

1.

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

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

• عنصر القائمة 1
• عنصر القائمة 2

هذا هو المحتوى الرئيسي.

...
2. أنماط الجدول: و و و

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

، و

غرض	الكمية
مجموع	7
#1	3
#2	4

التفاف صفوف الجدول في . هذه هي الطريقة التي يتم بها تشكيل عنوان الجدول.

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

نحن نلف خطوط البيانات بملف .

فقرة	الكمية
مجموع	7
#1	3
#2	4

3.

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

ديترويت تايجرز شيكاغو كابز ديترويت ليونز شيكاغو بيرز

ديترويت تايجرز شيكاغو كابز ديترويت ليونز شيكاغو بيرز

4. العناوين -،،،، و

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

ليست هناك حاجة لإنشاء عمل إضافي لنفسك. تذكر علامات العنوان.

5. و

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

معلومات عامة: الاسم: البريد الإلكتروني: تاريخ الميلاد:

6.

بطاقة شعار لا يؤثر على النمط بأي شكل من الأشكال. أنه يؤثر على وظائف الصفحة.

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

الاسم: رجل: امرأة:

7.

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

مثال على استخدام العلامة

مثال على استخدام العلامة

8.

لا يمكن أن يقال ذلك يعود الى ولكن عادة ما يتم استخدامهما معًا.

تذكر العلامة ، عندما تحتاج إلى الاقتباس من شخص ما.

مثال على استخدام علامة مع علامة. تم تضمين هذا العرض في العلامة.

مثال على استخدام علامة blockquote مع علامة الاستشهاد. تم تضمين هذا العرض في العلامة.

9.

يوفر استخدام القوائم فرصًا رائعة لتنظيم المعلومات. الجميع يعرف عن

، ولكن كم مرة تستخدمها و ؟ ربما قد يربك اسم "قائمة التعريفات" المطور المبتدئ ويجعله يعتقد أن مثل هذه القائمة لا يمكن استخدامها إلا لإدراج التعريفات والشروط. إلا أن هذا الوضع لا يتوافق مع الواقع.
أنواع القوائم
• قائمة غير مرتبة (ul)
• القائمة المرتبة (ol)
• قائمة التعاريف (دل)
ماذا يفعلون
• قائمة غير مرتبة (ul): قائمة ذات مؤشرات منقطة
• القائمة المرتبة (ol): قائمة مرقمة
• قائمة التعريفات (dl): قائمة تحتوي على تعريفات العناصر
أسباب استخدام القوائم
• نمط محتوى متسق
• مجرد خلق
• متنوع القدرات

تختلف الطريقة التي يعرض بها كل نوع قائمة المعلومات عن النوع الآخر. بالتأكيد ليست هناك حاجة للتوقف عند

و ولكن هيكل قائمة التعاريف يحتاج إلى مزيد من التوضيح.

تعريف عنصر القائمة رقم 1 لعنصر القائمة رقم 1 عنصر القائمة رقم 2 تعريف عنصر القائمة رقم 2

بدلاً من تحديد عنصر القائمة (

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

  تعريف عنصر القائمة رقم 1 لعنصر القائمة رقم 1 عنصر القائمة رقم 2 تعريف عنصر القائمة رقم 2

  10. "(وأحرف ASCII الأخرى)

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