في الوقت الحالي، تعرض معظم المتصفحات المواقع، وتقوم بفك تشفير أخطاء مشرفي المواقع وتصحيحها بشكل مستقل. ومع ذلك، عليك أن تكون حذرا عند كتابة HTML - تحتاج إلى اتباع قواعد الصلاحية، لأنه يعد التخطيط الصحيح أمرًا مهمًا لتحسين الموقع، وسيساعد أيضًا في عدم جنون المستخدمين الذين يفتحون موقعك في الإصدارات السابقة من المتصفحات.
يستخدميقع العنصر في السطر الأول من أي صفحة HTML. فهو يحدد إصدار لغة الترميز المستخدمة في الصفحة. في الوقت الحالي، يوصى باستخدام Doctype للنموذج - فهو عالمي لأي إصدار من اللغة.
استخدم بنية المستند الصحيحةيجب أن تكون العلامات , , موجودة دائمًا في الكود؛ وهذا يجعل الصفحة متوافقة مع المعايير ويضمن عرضها بشكل صحيح.
خطأ
مرحبا بالعالم!
مرحبا بالعالم!
يمين
مرحبا بالعالم!
مرحبا بالعالم!
يجب تحديد العلامات الوصفية والأنماط في مكان ما في نص الصفحة. ويفضل تضمين البرامج النصية في أسفل الصفحة قبل علامة الإغلاق. وتتمثل ميزة هذا الأسلوب في أنه قبل عرض محتوى الصفحة، يقوم المتصفح بتحميل الأنماط فقط، وسيقوم بتحميل البرامج النصية أخيرًا، مما يسمح للمستخدم برؤية محتوى الصفحة بشكل أسرع.
خطأ
مرحبا بالعالم!
يمين
مرحبا بالعالم!
يجب أن تتضمن الصور دائمًا سمة بديلة. يعتمد المتصفح على هذه السمة لتوفير سياق للصورة. يجب أن تحتوي السمة alt على نص سيتم عرضه إذا لم يتم تحميل الصورة.
خطأ
يمين
لا تستخدم الأنماط في ترميز HTMLيؤدي هذا إلى إنشاء صفحات يستغرق تحميلها وقتًا طويلاً ويصعب صيانتها. اكتب جميع الأنماط في مستند CSS منفصل. حاول استخدام سمة العلامة والنمط إلى الحد الأدنى.
اكتب التعليقاتقم بالتعليق على الكود، ولكن لا تبالغ فيه. التعليقات المكتوبة بإيجاز ووضوح يمكن أن تكون بمثابة مساعدة كبيرة للمطورين الآخرين، بالإضافة إلى تذكير مهم لك بعد مرور بعض الوقت.
مثال:
صفحة
قم بتسمية فئات CSS وفقًا لمحتوى الكتلة، على سبيل المثال: رأس - رأس، تذييل - تذييل، قائمة - قائمة، محتوى - محتوى. سيؤدي هذا إلى جعل الكود أكثر وضوحًا وأسهل في الصيانة.
رمز سيء
رمز جيد
قواعد كتابة CSSيحتوي CSS أيضًا على قواعد يمكنك اتباعها لإبقاء التعليمات البرمجية الخاصة بك بسيطة وسهلة القراءة ومنظمة بشكل جيد.
إعادة تعيين أنماط المتصفح إلى الوضع الافتراضييمكن أن تتداخل مع الأنماط التي نريد تطبيقها بالفعل. يمكنك تنزيل الملف لإعادة ضبط أنماط المتصفح القياسية هنا -set.css.
استخدام الخصائص والقيم المختصرةرمز سيء
الحشو العلوي: 5 بكسل؛
الحشو على اليمين: 10 بكسل؛
الحشو السفلي: 15 بكسل؛
المساحة المتروكة لليسار: 20 بكسل؛
رمز جيد
الحشو: 5px 10px 15px 20px؛
حدد المحددات والقواعد في سطر جديدرمز سيء
العنصر (العرض: كتلة؛ الموضع: نسبي؛ الحشو: 5 بكسل 10 بكسل 15 بكسل 20 بكسل؛)
رمز جيد
عنصر (
العرض محجوب؛
الموقف: نسبي؛
الحشو: 5px 10px 15px 20px؛
}
رمز سيء
الحشو: 10 بكسل 0 بكسل؛
الهامش الأيسر: 0%؛
رمز جيد
الحشو: 10 بكسل 0؛
الهامش الأيسر: 0;
افصل الكتل الرئيسية بالتعليقات، مما سيؤدي إلى تحسين إمكانية قراءة الكود.
مثال:
/*الرأس*/
رأس (
}
/*نهاية الرأس*/
/*رئيسي*/
رئيسي(
}
/*النهاية الرئيسية*/
/*تذييل*/
تذييل(
}
/*نهاية التذييل*/
هذه الإرشادات والقواعد هي مجرد الأساسيات، حيث تتطور لغات HTML وCSS بشكل أسرع ويتم تطوير طرق جديدة لكتابة التعليمات البرمجية الصحيحة. باتباع توصياتنا، سوف تكون على يقين من أن التعليمات البرمجية الخاصة بك بسيطة وسهلة القراءة ومحسنة. ستحصل أيضًا على +100 كارما وامتنان من المطورين الذين سيعملون على الموقع من بعدك.
ما هو HTML
تتكون شبكة الويب العالمية (WWW) من صفحات الويب التي تم إنشاؤها باستخدام ما يسمى لغة توصيف النص التشعبي (HTML). على الرغم من أن الكثير من الناس يتحدثون عن البرمجة بهذه اللغة، إلا أن لغة HTML ليست لغة برمجة بالمعنى التقليدي. HTML هي لغة ترميز المستندات. عند تطوير مستند HTML، يمكنك ترميز مستند نصي بنفس الطريقة التي يقوم بها المحرر باستخدام قلم رصاص أحمر. تعمل هذه العلامات على الإشارة إلى الشكل الذي يتم به تقديم المعلومات الواردة في المستند.
تُستخدم برامج عرض مستندات HTML الخاصة، والتي تسمى غالبًا المتصفحات، لتفسير الملفات التي تم ترميزها وفقًا لقواعد لغة HTML، وتنسيقها كصفحات ويب، وعرض محتوياتها على شاشة كمبيوتر المستخدم. هناك عدد كبير من برامج المتصفح التي طورتها شركات مختلفة، ومع ذلك، اليوم، من بين مجموعة متنوعة من البرامج، يتم تمييز برنامجين رائدين بوضوح - Netscape Communicator و Microsoft Internet Explorer.
تم تطوير Netscape Navigator بواسطة شركة Netscape Communications Corporation. مثل العديد من منتجات البرمجيات، هناك عدد من الإصدارات من هذا البرنامج. أحدث إصدار من Netscape Communicator في وقت كتابة هذا التقرير كان الإصدار 4.7. تم تطوير إنترنت إكسبلورر بواسطة شركة مايكروسوفت. أحدث إصدار من هذا البرنامج هو 5.0.
المتصفحات الأخرى متخلفة كثيرا في شعبيتها. منذ عدة سنوات، احتل متصفح Netscape مكانة رائدة بين المتصفحات، حيث يستخدم أكثر من ثلثي المستخدمين هذا المتصفح بالذات. مع إصدار متصفحها، بذلت Microsoft جهدًا كبيرًا للتغلب على هذا الجزء من السوق. في كثير من الأحيان في وسائل الإعلام
وكانت هناك تقارير عن حرب بين المتصفحات للمستخدمين. الآن هذين المتصفحين متشابهان في الشعبية. يتم تسهيل الشعبية المتزايدة لمتصفح Microsoft من خلال تضمين المتصفح في نظام التشغيل Windows 98، ومع ذلك، يظل اختيار المتصفح في النهاية مع المستخدم.
تتمتع المتصفحات الحديثة بقدرات واسعة النطاق، ولكن الشيء الرئيسي بالنسبة لها هو تفسير المستندات التي تم ترميزها وفقًا لقواعد HTML. هذا الكتاب مخصص بشكل أساسي لوصف هذه القواعد. في الجزء الأول سوف ننظر فقط إلى المبادئ الأساسية لإنشاء مستندات HTML.
لفهم ما هي لغة الترميز، دعونا نتذكر الأيام الخوالي عندما كان العديد من الأشخاص يعملون مع برامج تحرير النصوص مثل WordStar. فيها، لتسليط الضوء على عبارة، على سبيل المثال، بالخط العريض، تم وضع علامات خاصة في بدايتها ونهايتها (/ B و / b):
/B سيتم عرض هذا النص بالخط العريض/b
عند إخراج مثل هذا النص إلى جهاز الطباعة (نحن لا نتحدث عن شاشات العرض بعد، في تلك الأوقات البعيدة إما أنها لم تكن موجودة على الإطلاق أو كانت هناك عروض أبجدية رقمية لا تسمح بتغيير الخطوط)، اضطرت الرموز / في إلى استخدام الخط العريض الخط حتى تتم مواجهة الأحرف /b.
يعمل HTML بنفس الطريقة تمامًا. إذا كانت هناك حاجة لتسليط الضوء على النص بالخط العريض، فيمكن القيام بذلك بطريقة مماثلة:
سيظهر هذا النص بخط غامق
يتم تشغيل الرموز بالخط العريض، وتقوم الرموز بإيقاف تشغيلها. عادةً ما تسمى هذه الأحرف التي تتحكم في عرض النص ولا يتم عرضها على الشاشة بالعلامات في لغة HTML (من علامة الكلمة الإنجليزية - التسمية والعلامة).
يتم فصل كافة علامات لغة HTML بأحرف محددة (< и >)، حيث يتم كتابة معرف (اسم) العلامة (في مثالنا)، وربما معلماتها. الاستثناء الوحيد لهذه القاعدة هو علامات التعليق ذات المحددات الأكثر تعقيدًا (). يمكن كتابة أسماء العلامات ومعلماتها في أي سجل. من أجل الاتساق، تتم كتابة معظم العلامات في هذا الكتاب بأحرف كبيرة.
يتم استخدام معظم علامات HTML في أزواج، أي بالنسبة لعلامة معينة، دعنا نسميها افتتاحية، والمستند يحتوي على علامة إغلاق مقابلة. وفقًا لقواعد HTML، تتم كتابة علامة الإغلاق بنفس طريقة كتابة علامة الافتتاح، ولكن بالرمز / (شرطة مائلة للأمام) قبل اسم العلامة. والفرق الأساسي الوحيد بين العلامات المقترنة هو أن علامات الإغلاق لا تستخدم المعلمات.
سيتم تسمية العلامات التي تتطلب علامات نهاية مقابلة بعلامات الحاوية. سنقوم بتسمية كل ما هو مكتوب بين علامتي الفتح والإغلاق المطابقتين بمحتويات علامة الحاوية. في بعض الأحيان يمكن حذف علامة النهاية. على سبيل المثال، بالنسبة لعلامة تصف بيانات خلية جدول
يوجد عدد من العلامات التي يتم حذف علامات النهاية الخاصة بها بواسطة معظم مؤلفي المستندات. على سبيل المثال سيكون علامة عنصر القائمة
تقوم المتصفحات الحديثة في كثير من الحالات بتنسيق المستندات بشكل صحيح إذا تم حذف بعض علامات النهاية، ولكن لا يمكن التوصية بهذه الممارسة.
لا تتطلب بعض العلامات علامات النهاية على الإطلاق. تتضمن الأمثلة علامة إدراج الصورة ، تغذية الخط القسري
، إشارة إلى الخط الأساسي، وما إلى ذلك. في كثير من الأحيان، من الغرض ذاته من العلامة، يمكنك تخمين ما إذا كانت تحتاج إلى علامة نهائية.
هناك قواعد عامة لكيفية تفسير المتصفحات للعلامات. على عكس لغات البرمجة، حيث تؤدي البيانات الخاطئة إلى إصدار الرسائل المقابلة في مرحلة تجميع البرنامج وتتطلب التحرير، في HTML ليس من المعتاد الرد على إدخالات العلامات غير الصحيحة. يجب ببساطة أن يتجاهل المتصفح العلامة المكتوبة بشكل غير صحيح أو المعلمة الخاصة بها. هذه قاعدة عامة لجميع المتصفحات، ولا تنطبق فقط على العلامات المكتوبة بشكل خاطئ، ولكن أيضًا على العلامات التي لم يتعرف عليها هذا الإصدار من المتصفح. ومن الأمثلة على ذلك العلامات التي تم اقتراحها وتنفيذها لمتصفح معين وغير معروفة لمتصفح آخر. على سبيل المثال، لن تتعرف هذه المتصفحات على علامة الحاوية التي تعمل على توفير معلومات بديلة للمتصفحات التي لا تدعم بنيات الإطارات. المتصفح الذي يدعم الإطارات، عندما يواجه علامة، سوف يتخطى جميع المعلومات الموجودة فيها. ومن الطبيعي أن المتصفح الذي ليس على دراية بالإطارات لن يفهم العلامة. ومع ذلك، وفقًا للقاعدة المذكورة أعلاه، سيتم تخطي هذه العلامة ببساطة، ولكن سيتم عرض جميع المعلومات اللاحقة.
يمكن كتابة العلامات باستخدام معلمات أو سمات (من الإنجليزية، سمة). في هذا الكتاب سوف نستخدم مصطلح المعلمة في أغلب الأحيان. مجموعات المعلمات المقبولة تكون فردية لكل علامة. القواعد العامة لكتابة المعلمات هي كما يلي. قد يتبع اسم العلامة معلمات، مفصولة بمسافات. ترتيب معلمات العلامة تعسفي. تتطلب العديد من المعلمات تحديد قيمها، لكن بعض المعلمات ليس لها قيم أو يمكن كتابتها بدونها، مع أخذ القيم الافتراضية. إذا كانت المعلمة تتطلب قيمة، تتم الإشارة إليها بعد اسم المعلمة باستخدام علامة التساوي. يمكن كتابة قيمة المعلمة بين علامتي اقتباس أو بدونها. الحالة الوحيدة التي لا يمكنك فيها الاستغناء عن علامات الاقتباس هي وجود مسافات في قيمة المعلمة. في قيم المعلمات (على عكس أسماء العلامات والمعلمات نفسها)، تكون حالة الأحرف مهمة في بعض الأحيان. وفيما يلي مثال لإدخال علامة مع المعلمات:
معامل |
غاية |
رابط |
|
خلفية |
يشير إلى عنوان URL للصورة المستخدمة كخلفية |
الهامش السفلي |
يضبط حدود الهامش السفلي للمستند بالبكسل. |
بي جي كولور |
يحدد لون خلفية الوثيقة |
BGPROPERTIES |
عند التعيين على FIXED، لا يتم تمرير صورة الخلفية |
الهامش الأيسر |
يضبط الهامش الأيسر للمستند بالبكسل. |
وصلة |
يحدد لون الرابط الذي لم يتم عرضه بعد |
الهامش الأيمن |
يضبط حدود الهامش الأيمن للمستند بالبكسل. |
انتقل |
يضبط وجود أو عدم وجود أشرطة التمرير في نافذة المتصفح |
نص |
يحدد لون النص |
الهامش العلوي |
يضبط حدود الهامش العلوي للمستند بالبكسل. |
لينك |
يحدد لون الرابط الذي تم عرضه بالفعل |
تمت مناقشة استخدام معلمات BACKGROUND وBGCOLOR، التي تحدد خلفية المستند، بالتفصيل في.
يتم دعم المعلمة BGPROPERTIES، التي تقبل قيمة واحدة FIXED، فقط بواسطة Microsoft Internet Explorer.
يتم التعرف على معلمات BOTTOMMARGIN وLEFTMARGIN وRIGHTMARGIN وTOPMARGIN، التي تحدد المسافة بالبكسل بين حواف النص وحواف النافذة المقابلة، بالإضافة إلى معلمة SCROLL، فقط بواسطة الإصدار 4.0 من Microsoft Internet Explorer والإصدارات الأحدث.
تحدد معلمات ALINK وLINK وTEXT وVLINK ألوان الروابط ونص المستند.
في لغة HTML، يتم تعريف الألوان بواسطة أرقام ست عشرية. يعتمد نظام الألوان على ثلاثة ألوان أساسية - الأحمر والأخضر والأزرق - ويتم تحديدها بـ RGB. يتم إعطاء كل لون قيمة سداسية عشرية تتراوح من 00 إلى FF، والتي تتوافق مع نطاق من 0 إلى 255 بالنظام العشري. ثم يتم دمج هذه القيم في رقم واحد، يسبقه الرمز #. على سبيل المثال، الرقم #800080 يمثل اللون الأرجواني. لكي لا تتذكر مجموعات من الأرقام، يمكنك استخدام أسماء الألوان بدلاً من ذلك، والتي ترد في الملحق P2. لم تتعرف الإصدارات الأولى من المتصفحات إلا على أسماء 16 لونًا قياسيًا، تم تمييزها بعلامات النجمة في التطبيق. تتعرف الإصدارات الحديثة من المتصفحات على جميع أسماء الألوان البالغ عددها 140 لونًا.
تنسيق النص
سينظر هذا القسم في إمكانيات تنسيق الأحرف الفردية في نص المستند.
علامات مستوى الكتلة والعلامات التسلسلية
تُسمى بعض علامات HTML التي قد تظهر في قسم BODY علامات مستوى الكتلة، بينما يُطلق على البعض الآخر علامات مضمنة أو تُعرف أيضًا باسم علامات مستوى النص، على الرغم من أن تقسيم العلامات إلى المستويات يكون عشوائيًا إلى حد ما.
الفرق بين مستويات علامات HTML هو أن علامات مستوى الكتلة يمكن أن تحتوي على علامات تسلسلية وعلامات أخرى على مستوى الكتلة، بينما تحتوي العلامات التسلسلية على البيانات والعلامات التسلسلية الأخرى فقط. تصف علامات الحظر هياكل مستند أكبر من العلامات التسلسلية.
افتراضيًا، يتم وضع هذه الأنواع من العلامات بشكل مختلف في نص الوصف: تبدأ العلامات على مستوى الكتلة في سطر جديد، بينما لا تبدأ العلامات المتسلسلة.
التنسيق المنطقي والمادي
لتنسيق نص مستندات HTML، يتم توفير مجموعة كاملة من العلامات، والتي يمكن تقسيمها إلى علامات تنسيق منطقية ومادية.
تشير علامات التنسيق المنطقية (بأسمائها) إلى الأنواع الهيكلية لأجزاء النص الخاصة بها، مثل رمز البرنامج (العلامة)، والاقتباس (العلامة)، والاختصار (العلامة)، وما إلى ذلك (راجع أوصاف هذه العلامات والعلامات الأخرى المشابهة في القسم التالي ). باستخدام العلامات، يمكنك، على سبيل المثال، وضع علامة على الأجزاء الفردية على أنها مميزة أو مميزة للغاية. لاحظ أننا نتحدث عن العلامات الهيكلية التي لا تؤثر على تمثيل الشاشة المحدد للجزء بواسطة المتصفح. لذلك، يسمى هذا العلامات منطقية. تعرض المتصفحات مقتطفات منسقة منطقية على الشاشة بطريقة معينة افتراضيًا. لا علاقة لنوع العرض بالنوع الهيكلي للجزء (أي اسم علامة التنسيق المنطقية)، ولكن يمكن تجاوزه بسهولة.
تحدد علامات التنسيق الفعلية تنسيق عرض جزء النص المحدد فيها في نافذة المتصفح (وفقًا لتفضيلات مؤلف المستند). على سبيل المثال، لعرض مقتطف بخط مائل، يمكنك استخدام علامة الخط المائل . سيتم وصف هذه العلامات وعلامات التنسيق المادية الشائعة الاستخدام لاحقًا في قسم "علامات تنسيق النص الفعلي" في هذا الفصل.
لفترة طويلة، كانت هناك مناقشات بين مطوري مستندات HTML حول مزايا وعيوب هذا النهج أو ذاك. مع إصدار مواصفات HTML 4.0، انتهى هذا النقاش لصالح استخدام التنسيق المنطقي، حيث تم الإعلان عن مبدأ فصل بنية المستند عن طريقة عرضه. في الواقع، فقط على أساس التنسيق المنطقي يمكن التحكم بمرونة في عرض المستند باستخدام الأساليب الحديثة (استنادًا إلى أوراق الأنماط والمستندات المتغيرة ديناميكيًا وما إلى ذلك).
ومع ذلك، يمكن حاليًا استخدام التنسيق الفعلي بحرية. أهملت مواصفات HTML 4.0 بعض علامات التنسيق الفعلية، لكنها لا تزال مدعومة من قبل جميع المتصفحات. لاحظ أن بعض علامات التنسيق المنطقية، المصممة لتحل محل علامات التنسيق المادية الفردية، لا تتعرف عليها جميع المتصفحات، مما يجعل استخدامها غير مريح للغاية. ومن الأمثلة على ذلك العلامة المنطقية، التي يوصى باستخدامها بدلاً من العلامة الفعلية.
تتعلق العلامات التي تمت مناقشتها أدناه بالعلامات على مستوى النص، أي أنها مصممة بشكل أساسي لتمييز مجموعات صغيرة من الأحرف. يمكن لبعض العلامات أيضًا تحديد العلامات على مستوى الكتلة.
علامات تنسيق النص المنطقية
بطاقة شعار
تقوم العلامة بوضع علامة على النص الخاص بها كاختصار (ABBReviation). على الرغم من تضمين هذه العلامة في مواصفات HTML 4.0، إلا أنها غير مدعومة حاليًا بواسطة أي متصفح.
بطاقة شعار
بطاقة شعار. تمامًا مثل العلامة، يتم استخدامها لوضع علامة على الاختصارات. يوصى باستخدام هذه العلامة لتمييز ما يسمى بالمختصرات، أي الكلمات المنطوقة التي تتكون من اختصارات. قد يتم استخدام العلامة في المستقبل للعرض غير المرئي للعناصر، على سبيل المثال، في تركيب الكلام.
هذه العلامة ملائمة للاستخدام مع معلمة TITLE، حيث يمكنك تحديد القيمة الكاملة للاختصار. بعد ذلك، ستعرض المتصفحات المرئية، عند تحريك مؤشر الماوس فوق النص المميز بالعلامة، الاسم الكامل في شكل تلميح أداة.
لاحظ أنه يتم التعرف على العلامة فقط بواسطة متصفح Microsoft Internet Explorer. مثال:
SPbGITMO - إحدى الجامعات التقنية الرائدة في سانت بطرسبرغ
بطاقة شعار
يتم استخدام العلامة لوضع علامات الاقتباس أو عناوين الكتب والمقالات، والروابط إلى مصادر أخرى، وما إلى ذلك. وعادةً ما تعرض المتصفحات هذا النص بخط مائل. مثال:
Nevskoe Vremya هي إحدى صحف المدينة الأكثر شعبية في سانت بطرسبرغ
بطاقة شعار
تقوم العلامة بوضع علامة على النص الخاص بها كقطعة صغيرة من كود البرنامج. يتم عرضه عادةً بخط أحادي المسافة. لا ينبغي الخلط بين هذه العلامة وعلامة عنصر مستوى الكتلة، والتي يجب استخدامها لتمييز أجزاء كبيرة (قوائم) من التعليمات البرمجية.
على سبيل المثال:
مثال على أبسط عامل في لغة البرمجة C:
يضع("مرحبا بالعالم!");
هناك اختلاف آخر في استخدام العلامات وفي كود البرنامج، غالبًا ما يكون وجود عدة مسافات متتالية أمرًا مهمًا. سيتم حفظ العرض الخاص بهم فقط عند استخدام العلامة.
بطاقة شعار
تضع العلامة النص الخاص بها على أنه محذوف. يعد هذا العنصر مفيدًا لوضع علامة على التغييرات التي تم إجراؤها على المستند من إصدار إلى إصدار. يمكن استخدام العلامة كعنصر على مستوى النص وكعنصر على مستوى الكتلة.
تحتوي العلامة على معلمتين اختياريتين: CITE وDATETIME. يجب أن تكون قيمة معلمة CITE عنوان URL لمستند يشرح سبب إزالة الجزء.
تحدد المعلمة DATETIME تاريخ الحذف بالتنسيق: YYYY-MM-DDThh:mm:ssTZD، الذي يحدد السنة والشهر واليوم والساعات والدقائق والثواني للحذف، بالإضافة إلى المنطقة الزمنية (المنطقة الزمنية). على سبيل المثال:
أحدث مواصفات لغة ترميز HTML المقبولة هي الإصدار 3.2 4.0
عادةً ما يتم عرض النص الذي تم وضع علامة عليه كنص يتوسطه خط. تعطي مواصفات HTML 4.0 الأفضلية لهذه العلامة على علامة التنسيق الفعلية أو العلامة التي تشير إلى نص يتوسطه خط. ومع ذلك، العلامة
بطاقة شعار
تقوم العلامة بوضع علامة على جزء النص الخاص بها كتعريف (DeFinitioN). على سبيل المثال، يمكن استخدام هذه العلامة لوضع علامة على المصطلح عندما يظهر في النص لأول مرة. مثال:
Internet Explorer هو متصفح ويب شائع
العلامة مدعومة فقط بواسطة Microsoft Internet Explorer. يتم عرضها بخط مائل بشكل افتراضي.
بطاقة شعار
تقوم العلامة بوضع علامة على النص الخاص بها كإدراج (INSertion). يعد هذا العنصر مفيدًا لوضع علامة على التغييرات التي تم إجراؤها على المستند من إصدار إلى إصدار. يمكن استخدام العلامة كعنصر على مستوى النص وكعنصر على مستوى الكتلة.
تحتوي العلامة على معلمتين اختياريتين: CITE وDATETIME. يجب أن تكون قيمة معلمة CITE عنوان URL لمستند يشرح تفاصيل الإضافات التي تم إجراؤها.
تحدد المعلمة DATETIME تاريخ الإدراج بالتنسيق: YYYY-MM-DDThh:mm:ssTZD، الذي يحدد السنة والشهر واليوم والساعة والدقائق والثواني للإدراج، بالإضافة إلى المنطقة الزمنية (المنطقة الزمنية).
عادةً ما يتم عرض النص الذي تم وضع علامة عليه كنص تحته خط. يتم التعرف على العلامة حاليًا بواسطة Microsoft Internet Explorer فقط.
بطاقة شعار
يتم استخدام العلامة (التأكيد - التمييز والتسطير) لتسليط الضوء على أجزاء النص المهمة. عادةً ما تعرض المتصفحات هذا النص بخط مائل. مثال:
مثال على تسليط الضوء على الكلمات الفردية للنص
.
بطاقة شعار
تضع العلامة النص على أنه تم إدخاله بواسطة المستخدم من لوحة المفاتيح. يتم عرضه عادةً بخط أحادي المسافة، على سبيل المثال:
لتشغيل محرر النصوص، اكتب: المفكرة
يُفضل استخدام هذه العلامة بدلاً من استخدام علامة التنسيق الفعلية.
بطاقة شعار
تضع العلامة علامات اقتباس قصيرة في سطر من النص. على عكس العلامة على مستوى الكتلة، لا تقوم الشاشة بفصل النص المميز بأسطر فارغة. يتم عرضها عادةً بخط مائل. يتم التعرف على العلامة (على عكس ) حاليًا بواسطة Microsoft Internet Explorer فقط.
تحتوي العلامة على معلمة CITE، والتي يمكن أن تكون قيمتها مصدر عرض الأسعار.
بطاقة شعار
تقوم العلامة بوضع علامة على النص كعينة (SAMPle). الاستخدام الشائع لهذه العلامة هو وضع علامة على إخراج النص من البرامج (إخراج العينة). يتم استخدامه أيضًا لتمييز أحرف متعددة في خط أحادي المسافة.
يُفضل استخدام هذه العلامة على استخدام علامة التنسيق الفعلية. على سبيل المثال:
ونتيجة لتشغيل البرنامج سيتم طباعة ما يلي: Hello, World! .
بطاقة شعار
تُستخدم العلامة عادةً لتسليط الضوء على أجزاء النص المهمة. عادةً ما تعرض المتصفحات هذا النص بخط غامق. مثال:
تقع سانت بطرسبرغ في أقصى الطرف الشرقي لخليج فنلندا عند مصب نهر نيفا< /STRONG>
يُفضل استخدام هذه العلامة على استخدام علامة التنسيق الفعلية. عادةً ما تحدد العلامة أجزاء أكثر أهمية من النص من تلك التي تم تمييزها بالعلامة.
بطاقة شعار
تحدد العلامة أسماء متغيرات البرنامج. عادةً ما يتم عرض هذا النص بخط مائل. مثال:
قم بتعيين قيمة المتغير N
يظهر في الشكل عرض لبعض الأمثلة الواردة في وصف علامات تنسيق النص المنطقي. 1.1. يوضح الشكل كيف أنه عند تحريك الماوس فوق النص المميز بالعلامة، يتم عرض تلميح أداة.
أرز. 1.1. أمثلة على تنسيق النص
ربما لاحظت أن بعض العناصر تعطي نفس النتيجة. علاوة على ذلك، فإن بعض العناصر قد لا تغير طريقة عرض جزء من النص على الشاشة بأي شكل من الأشكال. قد يطرح سؤال مشروع: لماذا تم إنشاء هذا التنوع في عناصر التنسيق؟
الجواب باسم هذه المجموعة من العناصر. وهي مصممة لوضع التركيز المنطقي، وتسليط الضوء على الأجزاء المنطقية والتأكيد على جوهر البيانات. إن استخدامها مناسب للغاية، لأنه من المحتمل أن تزيد إمكانيات المتصفحات في المستقبل القريب، على سبيل المثال، سيكون من الممكن البحث عن الاستشهادات على الويب، وربما يتعلم الجيل القادم من المتصفحات قراءة المستندات بصوت عال. بالإضافة إلى ذلك، لا شيء يمنع مؤلفي المستندات اليوم، باستخدام أوراق الأنماط، من تعيين العرض المطلوب لأي من العلامات، وتجاوز القيم الافتراضية.
علامات تنسيق النص المادي
فيما يلي وصف لعلامات التنسيق الفعلية. لا يُنصح باستخدام بعضها من خلال مواصفات HTML 4.0 للأسباب المذكورة أعلاه. لقد تم إهمال بعض العلامات بواسطة مواصفات HTML 4.0، لكنها لا تزال مدعومة بواسطة المتصفحات.
بطاقة شعار
تعرض العلامة النص بخط غامق. في معظم الحالات، يوصى باستخدام علامة تنسيق منطقية بدلاً من علامة. على سبيل المثال:
هذا خط غامق.
أرز. 1.2. أمثلة على تنسيق النص الفعلي (متصفح Netscape)
بطاقة شعار
بطاقة شعار يعرض النص بخط مائل. في معظم الحالات، يوصى باستخدام العلامات أو أو بدلاً من هذه العلامة، لأن الأخيرة تعكس بشكل أفضل الغرض من النص المحدد. على سبيل المثال:
اختيار مائل
بطاقة شعار
تعرض العلامة النص بخط أحادي المسافة. في معظم الحالات، من الأفضل استخدام العلامات أو بدلاً من هذه العلامة. مثال:
هذا خط أحادي المسافة.
بطاقة شعار
بطاقة شعار يعرض النص الذي تحته خط. العلامة الملغاة. يوصى باستخدام أو العلامات بدلاً من ذلك. على سبيل المثال:
مثال الشرطة السفليةنص
العلامات و
تعرض العلامات النص بخط أفقي من خلاله. العلامة الملغاة. يجب استخدام العلامة بدلاً من ذلك. على سبيل المثال:
مثال على نص يتوسطه خط.
حاليًا، العلامة غير مدعومة من قبل جميع المتصفحات، لذا يوصى حاليًا باستخدامها مع العلامة. أي أنه يمكنك وضع علامتين داخل علامة الحاوية
... .
بطاقة شعار
تعرض العلامة النص بخط أكبر (من حجم الجزء غير المميز من النص). بدلاً من هذا العنصر، من الأفضل استخدام علامات العناوين، على سبيل المثال،
حجم الخط أكبر.
بطاقة شعار
تعرض العلامة النص بحجم خط أصغر. نظرًا لعدم وجود علامة في HTML معاكسة للعلامة، يمكن استخدام العلامة لهذه الأغراض. تدعم معظم المتصفحات العلامات المتداخلة، لكن لا يوصى بهذا الأسلوب. على سبيل المثال:
حجم الخط أصغر.
بطاقة شعار
تقوم العلامة بنقل النص أسفل مستوى السطر وتعرضه (إن أمكن) بحجم خط أصغر. مريحة للاستخدام للمؤشرات الرياضية. على سبيل المثال:
مثال الخط للمنخفض.
بطاقة شعار
تقوم العلامة بنقل النص أعلى مستوى السطر وتعرضه (إن أمكن) بحجم خط أصغر. مريحة للاستخدام لتعيين صلاحيات الأرقام في الرياضيات. على سبيل المثال:
مثال للخط المرتفع.
بطاقة شعار
تعرض العلامة نصًا وامضًا. هذه العلامة ليست جزءًا من مواصفات HTML وهي مدعومة فقط من خلال متصفح Netscape. نادرا ما يلجأ المطورون ذوو الخبرة إلى استخدام هذه العلامة، لأن وجود أحرف وامضة على الصفحة يزعج العديد من المستخدمين.
بطاقة شعار
تشبه علامة الحاوية علامة مستوى الكتلة. يمكن استخدامه عندما تحتاج إلى وضع علامة على جزء من النص لتعيين خصائصه، ولا يمكن استخدام أي علامة تنسيق هيكلية أخرى.
بالإضافة إلى ذلك، يسمح متصفح Microsoft Internet Explorer باستخدام معلمات العلامات التالية: DIR وDATAFLD وDATAFORMATAS وDATASRC. يمكن العثور على وصف المعلمات في الجزء الثاني من الكتاب.
أرز. 1.3. استخدام علامات تنسيق النص المتداخلة
يمكن أن تكون علامات التنسيق متداخلة داخل بعضها البعض. في هذه الحالة، عليك التأكد بعناية من أن إحدى الحاويات موجودة بالكامل في حاوية أخرى. في التين. يوضح الشكل 1.3 مثالاً على تداخل عنصر مائل داخل عنصر غامق. يتم استخدام جزء تعليمات HTML البرمجية التالي:
هذا خط غامق.
هذا مائل.
وهنا النص غامق ومائل
بطاقة شعار
تحدد العلامة معلمات الخط. ويشير إلى علامات التنسيق الفعلي على مستوى النص.
إن تعيين معلمات الخط مباشرة في نص المستند ينتهك الفكرة الأساسية المتمثلة في فصل محتوى المستند ووصف شكل عرض المستند. ولذلك، في مواصفات HTML 4.0، يتم تصنيف هذه العلامة، بالإضافة إلى العلامة، على أنها ملغاة. لا ينصح باستخدامها مرة أخرى.
وعلى الرغم من هذه التحذيرات الشديدة، يبدو أن التنسيق المادي يمكن اعتباره مقبولاً لأبسط المستندات. بالإضافة إلى ذلك، فإن أسهل طريقة لبدء تعلم أساسيات التنسيق هي قواعد التحديد المباشر لتنسيقات العناصر. لا يزال يتعين على المطور المبتدئ أن ينضج حتى يصل إلى أسلوب التصميم.
تشير العلامة إلى عناصر متسلسلة وبالتالي لا يمكن أن تتضمن عناصر على مستوى الكتلة، على سبيل المثال.
أو
النص داخل خلية الجدول |
النص بعد الجدول
يتجاوز المثال أعلاه حجم الخط الافتراضي مرتين. في البداية هو 3 (الافتراضي). ثم يتم ضبطه على 2، ثم 4. انتبه إلى عرض هذا المثال (الشكل 1.7). يمكن ملاحظة أن تعيين العلامة لا يعمل مع الجداول. وهذا أمر معتاد بالنسبة للعديد من المتصفحات، على الرغم من أنه ينتهك رسميًا فكرة استخدام العلامة.
أرز. 1.7. عرض المثال مع العلامة (متصفح Netscape)
تنسيق مستند HTML
التقسيم إلى فقرات
أي نص، سواء كان مقالًا مدرسيًا أو ملاحظة في إحدى الصحف أو وصفًا تقنيًا لجهاز ما، له بنية معينة. عناصر هذا الهيكل هي العناوين والعناوين الفرعية والجداول والفقرات وما إلى ذلك.
إحدى القواعد الأولى لإعداد أي وثيقة تقريبًا هي تقسيم نصها إلى فقرات منفصلة تعبر عن فكرة كاملة. مستندات HTML ليست استثناءً لهذه القاعدة. عند إنشاء المستندات باستخدام برامج تحرير النصوص، يتم تقسيم الفقرات عن طريق إدخال حرف السطر الجديد. يقوم معظم المحررين بتنفيذ هذا عند الضغط على المفتاح. في مستندات HTML، لا تقوم الأسطر الجديدة بإنشاء فقرة جديدة.
يفترض HTML أن مؤلف المستند لا يعرف شيئًا عن كمبيوتر القارئ. للقارئ الحق في تحديد أي حجم نافذة واستخدام أي من الخطوط المتاحة له. وهذا يعني أن مكان حدوث واصلة السطر يتم تحديده فقط من خلال إعدادات العارض والمستخدم النهائي. نظرًا لتجاهل خلاصات الأسطر في المستند الأصلي، فإن النص الذي يبدو رائعًا في نافذة محرر مؤلف المستند قد يتحول إلى نص صلب وغير قابل للقراءة في نافذة العارض.
يمكنك تجنب هذه المشكلة باستخدام علامة تقسيم فقرة خاصة.
قبل بداية كل فقرة من النص يجب عليك وضع علامة
علامة الإغلاق
غير مطلوب. تقوم المتصفحات عادة بفصل الفقرات بسطر فارغ.ملحوظة
تفسر المتصفحات عادةً علامات فقرات متعددة على التوالي
كواحد. الأمر نفسه ينطبق على علامة تغذية السطر
. ولذلك، ليس من الممكن إنشاء أسطر فارغة متعددة باستخدام هذه العلامات.
بطاقة شعار
يمكن تحديده باستخدام معلمة المحاذاة الأفقية ALIGN. وترد قيم المعلمات المحتملة في الجدول. 1.4. الافتراضي هو المحاذاة اليسرى.
الجدول 1.4. محاذاة قيم المعلمات
محاذاة قيمة المعلمة |
فعل |
غادر |
قم بمحاذاة النص إلى الحافة اليسرى لنافذة المتصفح |
مركز |
قم بالمحاذاة إلى منتصف نافذة المتصفح |
يمين |
قم بمحاذاة الحافة اليمنى لنافذة المتصفح |
يبرر |
التبرير (من الجانبين) |
لاحظ أن التبرير (ALIGN = JUSTIFY) لم يتم دعمه بواسطة المتصفحات لفترة طويلة. تحدد العديد من أوصاف لغة HTML ثلاثة خيارات فقط لقيم معلمات المحاذاة (LEFT وCENTER وRIGHT). حاليًا، يمكن لجميع المتصفحات الشائعة إجراء محاذاة العرض. تمت أيضًا مناقشة بعض المشكلات المتعلقة بإنشاء المستندات المبررة في الفصل الثامن.
ملحوظة
ويبدو أن الافتقار إلى التبرير في الوقت الحالي يثير الدهشة. يُستخدم هذا الوضع كثيرًا في المنشورات المطبوعة. يكفي التقاط أي صحيفة أو إلقاء نظرة فاحصة على فقرات هذا الكتاب - فكلها متساوية في العرض. ومع ذلك، حتى وقت قريب، لم يكن التبرير متاحًا لمستندات HTML. قبل عامين فقط، لم يكن لدى أي متصفح مثل هذا الوضع. وبالتالي، لن يتمكن القراء الذين ما زالوا يستخدمون الإصدار 3.x من متصفح Netscape من رؤية الخطوط المستقيمة في المستند. يمكنك محاولة التنبؤ بالإمكانيات الأخرى التي ستتمتع بها المتصفحات في المستقبل من خلال مقارنة إمكانيات برامج تحرير النصوص القوية والمتصفحات الحديثة. من الأمثلة على الميزات التي لم يتم تنفيذها بعد الواصلة التلقائية، وما إلى ذلك.
ترجمة الخط
عند عرض المستندات النصية في المستعرض، يتم تحديد موقع فواصل الأسطر داخل الفقرة تلقائيًا اعتمادًا على حجم الخطوط وحجم نافذة العرض. لا يمكن تنفيذ فواصل الأسطر إلا باستخدام أحرف فاصلة للكلمات (على سبيل المثال، المسافات). في بعض الأحيان، تحتاج في المستندات إلى تعيين تغذية سطر إجبارية، والتي يتم تنفيذها بغض النظر عن إعدادات المتصفح. يتم ذلك باستخدام علامة تغذية السطر القسري.
، والتي لا تحتوي على علامة إغلاق مقابلة. تمكين العلامة
في نص المستند سيضمن وضع النص التالي في بداية سطر جديد. على سبيل المثال، يمكن استخدام هذا الأسلوب لإنشاء بنيات من نوع القائمة دون استخدام علامات ترميز القائمة الخاصة. أو على سبيل المثال، لا يمكن استخدام هذه العلامة لعرض القصائد وما إلى ذلك.
فيما يلي مثال على استخدام تغذية الخط القسري (الشكل 1.8):
استخدام تغذية الخط القسري
على بتروغراد المظلمة
نوفمبر تنفس برد الخريف.
الرش مع موجة صاخبة
إلى حواف سياجك النحيل،
كانت نيفا تتقلب كشخص مريض
لا يهدأ في سريري.
أ.س. بوشكين. الفارس البرونزي
أرز. 1.8. بطاقة شعار
يمكن استخدامها لفرض تغذية الخط
على عكس علامة الفقرة
عند استخدام العلامة
لن يتم إنشاء سلسلة فارغة.
باستخدام علامة
يتطلب الحذر - من الممكن أن يكون المتصفح قد قام بالفعل بفاصل أسطر بكلمة أو كلمتين قبل أن يواجه علامتك
. يحدث هذا إذا كان عرض نافذة عارض القارئ أصغر من نفس إعداد البرنامج الذي قمت باختبار المستند به. في هذه الحالة، قد يتبين أن كلمة واحدة فقط تبقى على السطر في منتصف الفقرة، مما يفسد جمال تخطيط المستند.
ملحوظة
عند استخدام العلامة
لفصل النص حول صورة أو جدول، يمكنك تعيين المعلمة CLEAR لإيقاف التفاف النص. يمكنك أن تقرأ عن هذا في الفصلين 3 و 4.
العلامات ش
هناك مواقف تحتاج فيها إلى إجراء العملية المعاكسة - تعطيل تغذية السطر. هناك علامة حاوية لهذا الغرض. النص المميز بهذه العلامة مضمون أن يكون في سطر واحد، بغض النظر عن طوله. إذا امتد الخط الناتج إلى ما هو أبعد من نافذة عرض المتصفح، فسيظهر شريط تمرير أفقي.
ملحوظة
لضمان استمرارية النص الموجود في خلايا الجدول، هناك معلمة خاصة لعلامة NOWRAP
من خلال ترميز النص باستخدام علامة السطر غير المنفصل، يمكنك الحصول على أسطر طويلة جدًا. لتجنب ذلك، يمكنك الإشارة إلى متصفح القارئ بموقع تغذية السطر المحتملة، والتي سيتم إجراؤها فقط عند الضرورة (ما يسمى بتغذية السطر "الناعمة"). ويمكن ذلك من خلال وضع علامة (Word BReak) في المكان المناسب في النص وهي نفس العلامة
، لا يحتاج إلى علامة إغلاق.
ملحوظة
العلامة غير مدعومة على الإطلاق بواسطة متصفح Netscape. يتعرف متصفح Microsoft Internet Explorer على هذه العلامة فقط في النص المميز بالعلامات.
العناوين داخل مستند HTML
بالإضافة إلى عنوان المستند بأكمله، يمكن لصفحة الويب استخدام عناوين لأجزاء فردية من المستند. يمكن أن تحتوي هذه العناوين على ستة مستويات (أحجام) مختلفة وهي عبارة عن أجزاء من النص تبرز على الشاشة عندما يعرض المتصفح الصفحة.
يتم استخدام العلامات و و و و لترميز العناوين. تتطلب هذه العلامات علامة إغلاق مقابلة. العنوان رقم 1 هو الأكبر (عنوان المستوى الأعلى)، والعنوان رقم 6 هو الأصغر. تعد علامات العناوين عناصر على مستوى الكتلة، لذا لا يمكن استخدامها لترميز كلمات فردية من النص لزيادة حجمها. تقوم علامات العناوين بإدراج سطر فارغ قبل العنوان وبعده، لذلك لا حاجة إلى علامات فقرة أو فواصل الأسطر.
يمكن تحديد علامات العناوين باستخدام معلمة المحاذاة الأفقية ALIGN. القيم المحتملة للمعلمة هي نفس معلمات المحاذاة لعلامة الفقرة
(انظر الجدول 1.4).
مثال على استخدام عناوين ذات مستويات مختلفة بمحاذاة مختلفة (الشكل 1.9):
أمثلة العناوين
حجم العنوان 1
حجم العنوان 2
حجم العنوان 3
حجم العنوان 4
حجم العنوان 5
حجم العنوان 6
نص الوثيقة
أرز. 1.9. عرض العناوين بأحجام مختلفة
خطوط أفقية
هناك طريقة أخرى لتقسيم المستند إلى أجزاء وهي رسم خطوط أفقية. إنها تؤكد بصريًا على اكتمال منطقة معينة من الصفحة. في الوقت الحاضر، غالبًا ما يُستخدم الخط المرتفع والمضغوط للإشارة إلى "تقلب" المستند.
تتيح لك العلامة رسم خط أفقي مرتفع في نافذة معظم برامج المشاهدة. هذه العلامة ليست حاوية، لذا فهي لا تتطلب علامة إغلاق. يتم إدراج سطر فارغ تلقائيًا قبل السطر وبعده. يتم عرض معلمات العلامة في الجدول. 1.5.
الجدول 1.5. خيارات العلامة
مثال:
يعين هذا المثال خطًا أفقيًا يشغل نصف عرض إطار العرض ويتم وضعه في منتصف النافذة. لاحظ أن خيارات المحاذاة تكون منطقية فقط عندما لا يشغل الخط عرض النافذة بالكامل.
ملحوظة
لا يسمح متصفح Netscape بمعلمة علامة اللون.
استخدام النص المنسق مسبقا
كما ترون في الأقسام أعلاه، يجب استخدام العلامات الخاصة لتقسيم النص إلى فقرات وفرض فاصل أسطر. ومع ذلك، هناك أوقات يكون من الضروري فيها تضمين نص في مستند HTML تم تنسيقه بالفعل بالطريقة التقليدية باستخدام الأسطر الجديدة، والعدد المطلوب من المسافات، وأحرف علامات التبويب، وما إلى ذلك. ولحل مثل هذه المشكلات، يتم توفير علامة حاوية خاصة تحديد النص المنسق مسبقًا ( n المعاد تنسيقه).
سيتم عرض النص المميز بالعلامة كما يبدو في محرر النصوص العادي. سيتم دائمًا استخدام الخط أحادي المسافة للعرض. سيمنحك هذا مزيدًا من التحكم في مخرجات عارض المستندات، على الرغم من أن ذلك على حساب بعض المرونة.
أحد خيارات استخدام هذه العلامة هو الجداول التي تم إنشاؤها دون استخدام علامات ترميز الجدول الخاصة. أخرى مهمة
يهدف التطبيق إلى عرض كتل كبيرة من أكواد البرنامج (Java، وC++، وما إلى ذلك) على الشاشة، مما يمنع المتصفح من إعادة تنسيقها.
النص الموجود داخل الحاوية يمكن أن يحتوي على تنسيق على مستوى النص باستثناء ما يلي: , , , , , , . من غير المقبول تضمين عناصر التنسيق على مستوى الكتلة، مثل علامات العناوين، ضمن النص المنسق مسبقًا. من المنطقي أيضًا ألا تظهر علامة الفقرة داخل نص منسق مسبقًا، ولكن إذا حدث ذلك، فسيتم تنفيذ انتقال سطر جديد (دون إنشاء سطر فارغ).
ملحوظة
تحتوي العلامة على معلمة WIDTH اختيارية، والغرض منها هو إخبار المتصفح بالحد الأقصى لطول سطر النص المنسق مسبقًا. اعتمادًا على هذه القيمة، يمكن للمتصفح تحديد الخط و/أو المسافة البادئة المطلوبة لعرض النص المنسق مسبقًا على النحو الأمثل. تم اقتراح أن تكون القيمة الافتراضية 80. والقيم الأخرى الموصى بها هي 40 و132. لاحظ أن هذه الأرقام تتحدث كثيرًا بالنسبة للقراء ذوي الخبرة الحاسوبية الكبيرة. في الواقع، تتجاهل المتصفحات الحديثة معلمة WIDTH.
هناك العديد من العلامات التي تحل مشكلة مماثلة. تتضمن هذه العلامات علامات AND، وقد تم وضع علامة على هذه العلامات الثلاثة على أنها مهملة في مواصفات HTML 4.0. وهذا يعني أن المتصفحات لن تدعمها بعد الآن في الإصدارات المستقبلية. يوصى باستخدام العلامة بدلاً من هذه العلامات.
بطاقة شعار
علامة الحاوية هي عنصر على مستوى الكتلة يعمل على تمييز جزء من المستند. الغرض من هذا التحديد هو التحكم في معلمات هذا الجزء، والذي يتم عادةً عن طريق تعيين الأنماط. هنا مثال:
(جزء من الوثيقة)
في هذا المثال، تم تأطير جزء من مستند HTML بعلامات لتعيين بعض خصائصه. في هذه الحالة، سيتم عرض كافة عناصر النص للجزء المحدد باللون الأخضر. التناظرية لعلامة مستوى النص هي العنصر.
لاحظ أنه ليس من المستحسن استخدام التعيين المباشر لخصائص النمط لجزء منفصل، كما هو الحال في المثال، وفقًا لمفهوم فصل هيكل المستند وعرضه. يجب عليك استخدام أوراق الأنماط، والتي سيتم مناقشتها في الجزء الثاني من الكتاب.
بطاقة شعار
تم تصميم علامة الحاوية لمحاذاة جميع العناصر أفقيًا في منتصف إطار عرض المتصفح. إنه مستوى الكتلة ومفيد لتوسيط العناصر مثل الجداول، حيث لا يمكن توسيطها عن طريق التعيين
محاذاة = العلامة المركزية
ستارفلور | يقلب التوفو |
ميكو | حساء الأرز النباتي |
آندي | الحمص |
بينغ | خبز فرنسي محمص |
تشير القواعد=الكل إلى أن جميع الحدود الداخلية يجب أن تكون مرئية. يتم استخدام RULES=ALL عادةً مع FRAME=VOID بحيث تكون هناك حدود خارجية ولكن لا توجد حدود داخلية.
ستارفلور | يقلب التوفو |
ميكو | حساء الأرز النباتي |
آندي | الحمص |
بينغ | خبز فرنسي محمص |
يشير COLS إلى أنه يجب أن تكون هناك حدود بين الأعمدة وليس بين الصفوف.
ستارفلور | يقلب التوفو |
ميكو | حساء الأرز النباتي |
آندي | الحمص |
بينغ | خبز فرنسي محمص |
تشير RULES=ROWS إلى أنه يجب أن تكون هناك حدود بين الصفوف وليس بين الأعمدة.
ستارفلور | يقلب التوفو |
ميكو | حساء الأرز النباتي |
آندي | الحمص |
بينغ | خبز فرنسي محمص |
القواعد = المجموعات تسمح لك بوضع حدود بين مجموعات خلايا الجدول. هناك طريقتان يمكن من خلالهما تجميع الخلايا: حسب الصف وحسب العمود. دعنا نراجع كل واحد منهم لاحظ أن Netscape لا يتعرف على القواعد حاليًا.
التجميع حسب الصفللتجميع حسب الصف، استخدم العلامات ، . يشير إلى صفوف رأس الجدول، ويشير إلى النص الرئيسي للجدول، ويشير إلى الصفوف السفلية. لذلك، على سبيل المثال، يقوم هذا الرمز بإنشاء جدول بثلاث مجموعات. تظهر الحدود بين المجموعات فقط:
ستارفلور | يقلب التوفو | 5.95 |
ميكو | حساء الأرز النباتي | 4.95 |
آندي | الحمص | 3.95 |
بينغ | خبز فرنسي محمص | 5.95 |
20.80 |
وإليك كيفية عرض هذا الجدول:
ستارفلور | يقلب التوفو | 5.95 |
ميكو | حساء الأرز النباتي | 4.95 |
آندي | الحمص | 3.95 |
بينغ | خبز فرنسي محمص | 5.95 |
20.80 |
للتجميع حسب العمود، استخدم العلامة وسمة SPAN الخاصة بها. يستغرق الأمر بعض الوقت للتعود عليه لأنه لا يدور فعليًا حول أي خلايا جدول. فهو موجود في الجزء العلوي من رمز الجدول حيث يقوم بتعيين القواعد حول أعمدة الجدول بما في ذلك تلك التي يتم تجميعها معًا. للإشارة إلى عدد الأعمدة الموجودة في كل مجموعة إذا تركت SPAN خارجًا، فمن المفترض أن تحتوي المجموعة على عمود واحد فقط، على سبيل المثال، يقول الكود التالي أن العمود الأول موجود في مجموعة بمفرده والأعمدة الثلاثة التالية معًا في مجموعة إشعار يتطلب ذلك. علامة النهاية ستنتقل فقط بين المجموعات.