لقد نظرنا إلى مثال لإنشاء صفحة بسيطة حيث تم تقديم التعليقات على بعض علامات 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:
سيكون هذا النص في المركزيتحول إلى ما يلي على الصفحة:
سيكون هذا النص في المركز
ملحوظة- - للنص
- ... - لكل شيء (على سبيل المثال، صورة)
- يعرض الخط المنخفض.
على سبيل المثال كود HTML:
نص عادي، نص بين السطوريتحول إلى ما يلي على الصفحة:
نص عادي، نص بين السطور
9. علامة HTML (نص مرتفع)- يعرض الخط المرتفع.
على سبيل المثال كود HTML:
نص عادي، نص مرتفعيتحول إلى ما يلي على الصفحة:
نص عادي، نص مرتفع
10. علامة HTML،، - يعرض خطًا أكبر/أصغر بمقدار بكسل واحد من الحجم الحالي (المسموح به بواسطة معلمة النمط والفئة والمعرف).
على سبيل المثال كود HTML:
الخط العادي، هذا الخط أكبر بمقدار بكسل واحديتحول إلى ما يلي على الصفحة:
الخط العادي، هذا الخط أكبر بمقدار بكسل واحد
11. علامة HTML- (إنشاء القوائم)
- و .
- العنصر الأول من القائمة
- العنصر الثاني من القائمة
- العنصر الأول من القائمة
- العنصر الثاني من القائمة
- العناصر الفارغة - , ,
, , , , , ,يستخدم لتخزين معلومات إضافية حول الصفحة. يتم استخدام هذه المعلومات بواسطة المتصفحات لمعالجة الصفحة، ومن خلال محركات البحث لفهرستها. يمكن أن يكون هناك عدة علامات في الكتلة، نظرًا لأنها تحمل معلومات مختلفة اعتمادًا على السمات المستخدمة. مؤشر القياس في نطاق معين. قسم من الوثيقة يحتوي على روابط التنقل الخاصة بالموقع. يحدد القسم الذي لا يدعم البرمجة النصية. حاوية لتضمين الوسائط المتعددة (مثل الصوت والفيديو وتطبيقات Java وActiveX وPDF وFlash). يمكنك أيضًا إدراج صفحة ويب أخرى في مستند HTML الحالي. يتم استخدام العلامة لتمرير معلمات البرنامج المساعد. قائمة مرقمة مرتبة. يمكن أن يكون الترقيم رقميًا أو أبجديًا. حاوية تحتوي على عنوان لمجموعة من العناصر. يحدد خيارًا/خيارًا للاختيار من القائمة المنسدلة أو . حقل لعرض نتيجة العملية الحسابية المحسوبة باستخدام البرنامج النصي. الفقرات في النص. يحدد معلمات المكونات الإضافية التي تم إنشاؤها باستخدام العنصر. عنصر حاوية يحتوي على عنصر واحد وصفر أو أكثر من العناصر. في حد ذاته لا يعرض أي شيء. يسمح للمتصفح باختيار الصورة الأنسب. إخراج النص بدون تنسيق، مع الحفاظ على المسافات وفواصل النص. يمكن استخدامه لعرض رمز الكمبيوتر ورسائل البريد الإلكتروني وما إلى ذلك. مؤشر على الانتهاء من مهمة من أي نوع. يحدد الاقتباس القصير. حاوية لرموز شرق آسيا وفك رموزها. يحدد النص المتداخل الخاص به باعتباره المكون الأساسي للتعليق التوضيحي. يضيف وصفًا مختصرًا أعلى أو أسفل الأحرف الموجودة في العنصر، ويتم عرضها بخط أصغر. وضع علامة على النص المضمن كتعليق توضيحي إضافي. يعرض نصًا بديلاً إذا كان المتصفح لا يدعم العنصر. يعرض النص غير الحالي مع يتوسطه خط. يستخدم لعرض النص الذي يمثل نتيجة تنفيذ كود البرنامج أو البرنامج النصي، بالإضافة إلى رسائل النظام. يتم عرضه بخط أحادي المسافة. يُستخدم لتحديد برنامج نصي من جانب العميل (عادةً JavaScript). يحتوي إما على نص البرنامج النصي أو يشير إلى ملف برنامج نصي خارجي باستخدام السمة src. يحدد المنطقة المنطقية (القسم) من الصفحة، عادةً برأس. عنصر تحكم يسمح لك بتحديد القيم من مجموعة مقترحة. يتم وضع القيم المتغيرة في . يعرض النص بحجم خط أصغر. يحدد موقع ونوع موارد الوسائط البديلة لـ , , . حاوية للعناصر المضمنة. يمكن استخدامه لتنسيق مقاطع النص، مثل تمييز الكلمات الفردية بالألوان. يضع التركيز في النص، ويسلط الضوء عليه بالخط العريض. يتضمن أوراق الأنماط المضمنة. يحدد الكتابة المنخفضة للرموز، على سبيل المثال، فهرس العناصر في الصيغ الكيميائية. ينشئ عنوانًا مرئيًا للعلامة. يتم عرضه بمثلث مملوء، ويتيح لك النقر عليه عرض تفاصيل العنوان. يحدد التهجئة المرتفعة للأحرف. علامة لإنشاء جدول. يحدد جسم الطاولة. إنشاء خلية جدول. يُستخدم للإعلان عن أجزاء تعليمات HTML البرمجية التي يمكن استنساخها وإدراجها في مستند بواسطة برنامج نصي. محتوى العلامة ليس عنصرًا فرعيًا. إنشاء حقول إدخال نص كبيرة. يحدد تذييل الجدول. ينشئ عنوان خلية الجدول. يحدد عنوان الجدول. يحدد التاريخ/الوقت. عنوان مستند HTML الذي يظهر أعلى شريط عنوان المتصفح. قد يظهر أيضًا في نتائج البحث، لذلك يجب أخذ ذلك في الاعتبار عند تقديم عنوان. ينشئ صف جدول. يضيف ترجمات للعناصر و. يسلط الضوء على مقطع من النص من خلال وضع خط تحته، دون تأكيد إضافي. ينشئ قائمة ذات تعداد نقطي. يبرز المتغيرات من البرامج من خلال عرضها بخط مائل. يضيف ملفات الفيديو إلى الصفحة. يدعم 3 صيغ فيديو: MP4، WebM، Ogg. الخط على الصفحةيشير إلى المتصفح حيث قد ينقطع الخط الطويل. علامة حجم الخط في html هي مجرد علامة فرعية وقوية، مما يغير حجم الحروف بطريقة أو بأخرى. لكن HTML يوفر فرصة قليلة جدًا في هذا الصدد. كان هناك، بالطبع، علامة الخط، ولكن اليوم أصبحت قديمة منذ فترة طويلة. إذا كنت مهتمًا حقًا بكيفية تغيير حجم الخط بشكل أكثر مرونة، فأنت بحاجة إلى اللجوء إلى قوة CSS.
خاصية CSS حجم الخطفي CSS، يمكنك تعيين أي حجم نص، ولا يمكن القيام بذلك بالبكسل فحسب، بل أيضًا بوحدات القياس الأخرى. غالبًا ما يتم ضبطه بالبكسل، ولكن يمكن القيام بذلك بشكل مختلف. على سبيل المثال، بالنسبة المئوية. يتم أخذ خط العنصر الأصلي بنسبة 100%.
على سبيل المثال، إذا قمنا بتعيين حجم النص بنسبة مئوية لفقرة ما وكان موجودًا في علامة النص، فإن 100% له سيكون مساويًا للحجم المحدد للنص. وفقًا لذلك، إذا كانت العلامة تحتوي على خط محدد على 12 بكسل، لتعيين حجم الفقرة على 24 بكسل، فأنت بحاجة إلى كتابة هذا:
ص (حجم الخط: 200%)
ص (حجم الخط: 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 عند إنشاء صفحة مدونة هو:
إخراج قائمة (يقبل النمط والفئة ومعلمات المعرف). تتم كتابة كل عنصر جديد بين
على سبيل المثال كود HTML:
قائمة:يتحول إلى ما يلي على الصفحة:
قائمة:
على سبيل المثال كود HTML:
1-سطر 1 عنصر | السطر الأول العنصر الثاني |
عنصر 2-السطر 1 | عنصر 2-السطر 2 |
يتحول إلى ما يلي على الصفحة:
جميع إمكانيات العلامة