هيكل المتجر عبر الإنترنت: كيفية توزيع المنتجات بشكل صحيح إلى فئات. قواعد متداخلة قواعد ذكية html

ما هو HTML

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

تُستخدم عارضات HTML الخاصة ، التي يشار إليها غالبًا باسم المتصفحات ، لتفسير الملفات التي تم ترميزها وفقًا لقواعد لغة HTML وتنسيقها كصفحات ويب وعرض محتواها على شاشة كمبيوتر المستخدم. هناك عدد كبير من برامج المتصفحات التي طورتها شركات مختلفة ، ومع ذلك ، حتى الآن ، يبرز برنامجان رائدان من بين مجموعة كاملة من البرامج - Netscape Communicator و Microsoft Internet Explorer.

تم تطوير Netscape Navigator بواسطة Netscape Communications Corporation. مثل الكثير منتجات البرمجياتهناك عدة إصدارات من هذا البرنامج. أحدث إصدار من Netscape Communicator في وقت كتابة هذا التقرير هو الإصدار 4.7. تم تطوير Internet Explorer بواسطة Microsoft. أحدث إصدار من هذا البرنامج هو 5.0.

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

كانت هناك تقارير عن حروب بين المتصفحات على المستخدمين. الآن هذين المستعرضين متشابهين في شعبيتهما. يتم تسهيل زيادة شعبية متصفح Microsoft من خلال تضمين المتصفح في نظام التشغيل Windows 98 ، ومع ذلك ، في النهاية ، يعود اختيار المتصفح إلى المستخدم.

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

لفهم ماهية لغة الترميز ، دعنا نتذكر الأيام الخوالي عندما عمل العديد من الأشخاص مع برامج تحرير النصوص مثل WordStar. في نفوسهم ، لإبراز عبارة ، على سبيل المثال ، بالخط العريض ، تم وضع علامات خاصة في بدايتها ونهايتها (/ B و / b):

/B سيتم عرض هذا النص بخط عريض / ب

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

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

سيتم عرض هذا النص بخط عريض.

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

يتم تحديد جميع علامات HTML بأحرف محددة (< и >) ، وبينه يُكتب مُعرّف (الاسم) للعلامة (في مثالنا ، يوجد هذا في) ، وربما معلماته. الاستثناء الوحيد لهذه القاعدة هو علامات التعليقات ذات المحددات الأكثر تعقيدًا (). يمكن كتابة أسماء العلامات ومعلماتها في أي حال. من أجل الاتساق ، تمت كتابة معظم العلامات في هذا الكتاب بأحرف كبيرة.

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

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

هناك عدد من العلامات التي تم حذف علامات النهاية الخاصة بها من قبل معظم مؤلفي المستندات. من الأمثلة على ذلك علامة عنصر قائمة

  • أو علامة فقرة

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

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

    هناك قواعد عامة لتفسير العلامات بواسطة المتصفحات. على عكس لغات البرمجة ، حيث تؤدي العبارات الخاطئة إلى إصدار الرسائل المناسبة في مرحلة تجميع البرنامج وتتطلب التحرير ، فليس من المعتاد في HTML الرد على العلامات غير الصحيحة. يجب أن يتجاهل المتصفح ببساطة علامة مكتوبة بشكل غير صحيح أو معاملتها. هذه قاعدة عامة لجميع المتصفحات ، والتي لا تغطي العلامات المكتوبة بالخطأ فحسب ، بل تشمل أيضًا العلامات التي لا يتعرف عليها هذا الإصدار من المتصفح. مثال على ذلك هو العلامات المقترحة والمنفذة لمتصفح معين وغير معروفة للآخر. على سبيل المثال ، حاوية العلامة ، التي تُستخدم لتوفير معلومات بديلة للمتصفحات التي لا تدعم هياكل الإطارات ، لن تتعرف عليها هذه المتصفحات. متصفح يدعم الإطارات ، وقد استوفى العلامة <NOFRAMES>، ستتخطى جميع المعلومات الواردة فيه. والمتصفح الذي لا يعرف الإطارات ، بالطبع ، لن يفهم العلامة أيضًا. <NOFRAMES>. ومع ذلك ، وفقًا للقاعدة أعلاه ، سيتم تخطي هذه العلامة ببساطة ، ولكن سيتم عرض جميع المعلومات اللاحقة.</p> <p>يمكن كتابة العلامات باستخدام معلمات أو سمات (من اللغة الإنجليزية ، السمة). في هذا الكتاب ، سنستخدم مصطلح المعلمة في أغلب الأحيان. مجموعات المعلمات المسموح بها فردية لكل علامة. <a href="https://floritus.ru/ar/e-commerce/delovaya-perepiska-pravila-o-kotoryh-obyazatelno-nuzhno-znat/">قواعد عامة</a>إدخالات المعلمات هي على النحو التالي. يمكن أن يتبع اسم العلامة معلمات ، مفصولة عن بعضها بمسافات. ترتيب معلمات العلامة تعسفي. تتطلب العديد من المعلمات تحديد قيمها ، ومع ذلك ، لا تحتوي بعض المعلمات على قيم أو يمكن كتابتها بدونها ، مع أخذ القيم الافتراضية. إذا كانت المعلمة تتطلب قيمة ، فسيتم الإشارة إليها بعد اسم المعلمة من خلال علامة التساوي. يمكن كتابة قيمة المعلمة بين علامات اقتباس أو بدونها. الحالة الوحيدة التي تكون فيها علامات الاقتباس مطلوبة عندما تكون هناك مسافات في قيمة المعلمة. قيم المعلمات (على عكس أسماء العلامات والمعلمات نفسها) تكون أحيانًا حساسة لحالة الأحرف. فيما يلي مثال على إدخال علامة مع معلمات:</p> <p><TABLE BORDER ALIGN="left"> </p> <p>هنا للعلامة <TABLE>يتم إعطاء معلمتين. تم تحديد معلمة BORDER الأولى بدون قيمة. تم تعيين المعلمة الثانية ALIGN إلى اليسار.</p> <p>في الفصول اللاحقة من الجزء الأول من الكتاب ، سيتم وصف الغرض من علامات HTML ومعلماتها. بشكل عام ، يمكن أن تحتوي العلامات على معلمات مختلفة ، ولكن هناك عددًا من المعلمات المشتركة لجميع العلامات تقريبًا. سنذكر هنا المعلمات العامة للوسوم حتى لا نتحدث عنها مرة أخرى عند وصف كل علامة.</p> <p>جميع العلامات التي يمكن استخدامها في القسم <BODY>يمكن أن يحتوي مستند HTML على معلمات CLASS و ID و LANG و LANGUAGE و STYLE و TITLE. يعد استخدام هذه المعلمات مفيدًا ، أولاً وقبل كل شيء ، عند تصميم المستندات ، والتي سيتم مناقشتها في الجزء الثاني من الكتاب.</p> <p>يتم دعم معلمات CLASS و ID و STYLE بواسطة Internet Explorer 3.0 والإصدارات الأحدث و Netscape 4.0 والإصدارات الأحدث. هذه الخيارات مطلوبة عند استخدام الأنماط.</p> <p>المعلمات LANG و LANGUAGE و TITLE - مدعومة فقط بواسطة Internet Explorer بدءًا من الإصدار 4.0. تشير هذه المعلمات ، على التوالي ، إلى اللغة المستخدمة (على سبيل المثال ، في روسيا: LANG = ru) ، ولغة كتابة البرامج النصية (على سبيل المثال ، LANGUAGE = JavaScript) ، بالإضافة إلى نص تلميح الأداة المعروض عند تحريك مؤشر الماوس فوق هذا العنصر (TITLE).</p> <p>في لغة HTML الحديثة ، بالإضافة إلى علامات اللغة ومحتواها ، تتم أيضًا كتابة أكواد البرامج النصية (جافا سكريبت أو VBScript) في شفرة مصدر HTML. في الجزء الأول من الكتاب ، لم يتم ذكر هذا عمليًا في أي مكان ، ولكن الجزء الثاني مخصص بالكامل لاستخدام النصوص.</p> <p>في ختام نظرة عامة على HTML ، نلاحظ أن أبسط مستندات HTML هي ملفات نصية عادية يمكن عرضها وتحريرها باستخدام أي محرر نصوص. عادة ما يكون لهذه الملفات امتداد HTM أو HTML.</p> <p>مواصفات HTML</p> <p>اكتسبت HTML شعبية في منتصف التسعينيات مع النمو الهائل للإنترنت. بحلول هذا الوقت ، كانت هناك حاجة لتوحيد اللغة ، حيث قدمت العديد من الشركات التي طورت برامج للوصول إلى الإنترنت برامج خاصة بها</p> <p>المتغيرات من تعليمات HTML ، والتي نما عددها وازداد. حان الوقت للتوصل إلى نوع من الاتفاق المشترك فيما يتعلق باستخدام علامات HTML.</p> <p>قامت منظمة تدعى World Wide Web Consortium (W3C باختصار) بعمل إنشاء مواصفات HTML. كانت مهمتها هي تجميع المواصفات التي تعكس الوضع الحالي لتطور قدرات اللغة ، مع مراعاة المقترحات المختلفة لشركات المتصفحات. لذلك ، في نوفمبر 1995 ، ظهرت مواصفات HTML 2.0 ، المصممة لإضفاء الطابع الرسمي على ممارسة استخدام HTML التي تم تطويرها بحلول نهاية عام 1994.</p> <p>مخطط الموافقة على المواصفات على النحو التالي. يقوم اتحاد W3C بإصدار مسودة المواصفات ، بعد مناقشة ما يسمى بإصدار مسودة المواصفات وعرضها للمناقشة على <a href="https://floritus.ru/ar/persony/tokovanie-ptic---opredelennoe-povedenie-v-brachnyi-period/">فترة معينة</a>. بعد فترة من المناقشة ، قد تصبح مسودة المواصفات توصية ، أي نسخة معترف بها رسميًا لمواصفات HTML.</p> <p>بعد وقت قصير من مواصفة 2.0 ، تم إصدار نسخة عمل من مواصفات 3.0 ، والتي أنهت فترة التعليق في سبتمبر 1995. لم يتم اعتماد هذه المواصفات كتوصية رسمية. كان القصد منه تضمين مجموعة متنوعة من العلامات والميزات الخاصة بالمتصفح ، لكن W3C لم تجد أنه من الممكن تطوير مواصفات جيدة لمثل هذا العدد الكبير من التعليمات.</p> <p>بعد الكثير من المداولات ، تم إصدار مسودة HTML 3.2 في مايو 1996. اعتمد المشروع على جزء من العلامات المتوفرة في الإصدار 3.0 ، والتي أظهرت ثباتًا في التشغيل. في سبتمبر 1996 ، بعد عدة أشهر من المناقشة ، أصبح الإصدار 3.2 مواصفة مقترحة ، وفي يناير 1997 ، أصبحت توصية رسمية.</p> <p>شهد يوليو 1997 إصدار مواصفات HTML 4.0 المقترحة ، والتي أصبحت توصية رسمية في ديسمبر 1997. حتى الآن ، هذه هي آخر المواصفات المقبولة.</p> <p>في هذه النظرة العامة الموجزة لتاريخ تطور لغة HTML ، يصعب وصف ميزات المواصفات المختلفة بالتفصيل ، خاصة وأن المطورين في الحياة الواقعية لا يتبعون دائمًا توصيات الاتحاد. دعونا نلاحظ فقط بعض الأفكار الكامنة وراء أحدث المواصفات.</p> <p>في مواصفات HTML 4.0 ، كانت الفكرة الأساسية هي فصل وصف هيكل المستند عن وصف عرضه التقديمي على شاشة العرض. لقد أثبتت التجربة أن فصل بنية المستند وعرضه يقلل من تكلفة دعم مجموعة متنوعة من الأنظمة الأساسية والبيئات وما إلى ذلك ، ويسهل إجراء تصحيحات على المستندات. وفقًا لهذه الفكرة ، يجب على المرء أن يستخدم أساليب وصف التمثيل على نطاق أوسع</p> <p>المستند باستخدام أوراق الأنماط ، بدلاً من تحديد بيانات محددة حول شكل العرض التقديمي المتداخل مع محتوى المستند. لتنفيذ هذه الفكرة ، في مواصفات HTML 4.0 ، تم إهمال عدد من العلامات المستخدمة لتحديد شكل عرض عناصر HTML بشكل مباشر. العلامات الملغاة لهذا السبب تشمل <CENTER>, <FONT>, <BASEFONT>, <S>, <STRIKE>, <U>. من بين العلامات الملغاة الأخرى ، نلاحظ <ISINDEX>, <APPLET>, <DIR>, <MENU>. بدلاً من العلامات المهملة ، يتم تقديم تطبيقات بديلة للميزات المقابلة ، والتي نوليها اهتمامًا خاصًا في هذا الكتاب.</p> <p>مفهوم علامة الإهمال كما يلي. إذا تم استدعاء علامة مهملة في مواصفات اللغة هذه ، فهذا يعني أن المتصفحات يجب أن تستمر في دعم هذه العلامات في الوقت الحالي ، ولكن يتم إيقاف استخدامها. قد تكون هذه العلامات قديمة في المواصفات المستقبلية. قد لا تدعم المتصفحات العلامات الموقوفة. في مواصفات HTML 4.0 ، تم إهمال ثلاث علامات فقط:<ХМР>, <PLAINTEXT>و <LISTING>. يمكن الحصول على معلومات حول العلامات التي تم تضمينها في المواصفات من الجدول الوارد في الملحق P1.</p> <p>تتوفر دائمًا المعلومات الرسمية حول مواصفات HTML من موقع W3C على الويب <b>http://www.w3.org/TR/</b>. المواصفات 4.0 تقع في <b>http://www.w3.org/TR/REC-htmI40-971218</b>. </p> <p>لاحظ أنه ، منطقيًا ، يجب أن تلعب المواصفات الرسمية دور قوة إرشادية وتوجيهية ، مما يضمن تقديم المعلومات بنفس الطريقة من قبل متصفحات مختلفة. هذا هو الشخص المثالي الذي نسعى جاهدين من أجله. في الواقع ، الأمور لا تسير على ما يرام. تظهر باستمرار <a href="https://floritus.ru/ar/istoriya/kak-nachat-svoi-biznes-v-instagram-novye-biznes-idei-prevratit-svoi/">افكار جديدة</a>تنفذها شركات المطورين في متصفحاتها وتروج لها. تتجذر الأفكار الجيدة ثم يلتقطها المطورون الآخرون. تبقى بعض الاحتمالات <a href="https://floritus.ru/ar/ekonomika/specificheskie-osobennosti-raboty-slesarya-sborshchika/">مواصفات خاصة</a>متصفح منفصل. تدخل التطورات الناجحة في النهاية في المواصفات وتصبح مقبولة بشكل عام. وبالتالي ، فإن عملية تحسين قدرات المتصفحات وتوضيح المواصفات مستمرة ، وتؤثر بشكل متبادل على بعضها البعض.</p> <p>هيكل الوثيقة</p> <p>العلامة الأولى لبدء وصف مستندات HTML هي العلامة <HTML>. يجب أن يبدأ دائمًا وصف المستند وينهي وصف المستند بالعلامة</HTML>. تشير هذه العلامات إلى أن السطور بينهما تمثل مستند HTML واحد. المستند نفسه عبارة عن ملف نصي ASCII عادي. بدون هذه العلامات ، قد لا يتمكن المستعرض أو العارض الآخر من تحديد تنسيق المستند وتفسيره بشكل صحيح.</p> <p>العلامة الأكثر شيوعًا <HTML>تستخدم بدون معلمات. استخدمت الإصدارات السابقة معلمة VERSION ، التي تم إهمالها بواسطة مواصفات HTML 4.0. تم استبدال هذه المعلمة بالعلامة<! DOCTYPE>. </p> <p>يمكن لمعظم المستعرضات الحديثة التعرف على المستند على أنه بدون علامات. <HTML>و</HTML>ومع ذلك ، يوصى بشدة باستخدامها.</p> <p>بين زوج من العلامات <HTML>و</HTML>يقع المستند نفسه. يمكن أن يتكون المستند من قسمين - قسم عنوان (يبدأ بالعلامة <HEAD>) وقسم النص في المستند (بدءًا من العلامة <BODY>). بالنسبة للمستندات التي تصف هياكل الإطار ، يتم استخدام قسم FRAMESET بدلاً من قسم BODY (مع العلامة <FRAMESET>). بعد ذلك ، سيتم النظر في قواعد تجميع أقسام HEAD و BODY من المستند. يتم تناول مستندات البناء التي تحتوي على إطارات في الفصل 5.</p> <p><b> <span>قسم وثيقة الرأس</span> </b></p> <p>يحدد قسم HEAD في المستند عنوانه وليس علامة مطلوبة ، ولكن يمكن أن يكون العنوان المكتوب جيدًا مفيدًا للغاية. الغرض من الرأس هو توفير المعلومات الضرورية للبرنامج الذي يفسر المستند. العلامات الموجودة داخل قسم HEAD (باستثناء اسم المستند الموصوف باستخدام العلامة <TITLE>) على الشاشة.</p> <p>يفتح قسم الرأس بعلامة <HEAD>. عادة ما تتبع هذه العلامة العلامة مباشرة <HTML>. علامة الإغلاق</HEAD>يظهر نهاية هذا القسم. بين العلامات المذكورة هي بقية علامات قسم الرأس.</p> <p><b> <span>اسم المستند</span> </b></p> <p>حاوية العلامة <TITLE>هي علامة الرأس الوحيدة المطلوبة ويتم استخدامها لمنح المستند عنوانًا. يظهر عادةً في شريط العنوان في نافذة المتصفح. بطاقة شعار <TITLE>لا ينبغي الخلط بينه وبين اسم ملف المستند ؛ على العكس من ذلك ، فهي عبارة عن سلسلة نصية مستقلة تمامًا عن اسم الملف وموقعه ، مما يجعلها مفيدة جدًا. يتم تحديد اسم الملف بدقة من خلال نظام تشغيل الكمبيوتر الذي تم تخزين الملف عليه. يجب عليك أيضًا التمييز بين عنوان المستند (مع العلامة <TITLE>) من العناوين داخل المستند ، وعادة ما يتم ترميزها بالعلامات <Hx>. </p> <p><i> <b>ملحوظة</b> </i></p> <p><i> <span>الطبيعة الإلزامية لعنوان الوثيقة ، بشكل عام ، هي في طبيعة التوصية القوية. وثيقة بدون علامة <TITLE>سيتم عرضه أيضًا بواسطة المتصفحات. في نفس الوقت ، ستعرض المتصفحات المختلفة معلومات مختلفة كعنوان النافذة. لذلك أعطت الإصدارات المبكرة من متصفح Netscape السطر "بدون عنوان". المتصفحات الأخرى إما لا تعرض أي شيء أو تعرض عنوان الملف الذي تم تنزيله ، مرددًا المعلومات الموجودة في شريط الموقع بالمستعرض.</span> </i></p> <p>عنوان الوثيقة مكتوب بين العلامات <TITLE>و</TITLE>وهي سلسلة نصية. من حيث المبدأ ، يمكن أن يكون الاسم بطول غير محدود ويحتوي على أي أحرف ، باستثناء بعض الأحرف المحجوزة. من الناحية العملية ، يجب أن تقتصر على سطر واحد ، مع الأخذ في الاعتبار أن العنوان يظهر في شريط العنوان في نافذة المتصفح. يجب أيضًا أن تضع في اعتبارك ما سيبقى من اسم المستند عند تصغير نافذة المتصفح. قد يوصى بتحديد طول عنوان المستند إلى 60 حرفًا. يمكنك أن ترى كيف يتم عرض العنوان في نافذة المتصفح بأي شكل في هذا الكتاب يعرض مثالاً على كيفية عرض المستند.</p> <p>بشكل افتراضي ، يتم استخدام النص الموجود في عنوان المستند عند إنشاء إشارة مرجعية للمستند. لذلك ، لمزيد من المعلومات ، تجنب الأسماء مجهولة الهوية (الصفحة الرئيسية ، والفهرس ، وما إلى ذلك). عادةً ما تكون كلمات مثل هذه المستخدمة كاسم إشارة مرجعية عديمة الفائدة تمامًا. يجب أن يصف عنوان الوثيقة محتواها بإيجاز. لاحظ أنه عند عرض مستندات بهيكل إطار على الشاشة ، عند تحميل مستند منفصل باسمه الخاص في كل إطار ، سيكون اسم المستند الرئيسي فقط مرئيًا على الشاشة. ومع ذلك ، يوصى بشدة أيضًا بتحديد عنوان المستندات الفردية التي سيتم تأطيرها. تمت مناقشة هذه المسألة بمزيد من التفصيل في الفصل الخامس.</p> <p>يتم تحديد أهمية عنوان الوثيقة من خلال الحقيقة التالية. لأن العلامة <TITLE>موجود تقريبًا في بداية ملف HTML ، ثم بعد بدء تحميل المستند ، يتم عرضه أولاً وقبل كل شيء. بعد ذلك ، يتم تحميل المحتوى الرئيسي للمستند ، بينما يبدأ المتصفح في تنسيق المستند في النافذة. قد تتأخر هذه العملية ، بشكل عام ، اعتمادًا على محتوى المستند وهيكله ، بالإضافة إلى سرعة الاتصال. لفترة طويلة بما فيه الكفاية ، سوف يفكر المستخدم في شاشة فارغة ، يكون سطر المعلومات الوحيد فيها هو اسم المستند. في كثير من الأحيان (عند انقطاع الاتصال أو إذا كان المستخدم لا يريد الانتظار حتى يتم تنزيل المستند) ، تنتهي جميع المعلومات حول المستند هناك.</p> <p><b><span>العلاقة بوثائق أخرى</span> </b></p> <p>غالبًا ما تكون مستندات HTML مترابطة ، أي أنها تحتوي على روابط مع بعضها البعض. يمكن أن تكون الروابط إما مطلقة أو نسبية. كلاهما له عيوب. يمكن أن تكون الروابط المطلقة مرهقة للغاية وتتوقف عن العمل إذا قمت بنقل مستند أدنى في التسلسل الهرمي. من الأسهل إدخال الروابط النسبية وتحديثها ، ولكن هذا الارتباط ينقطع أيضًا إذا تم نقل مستند أعلى. يمكن كسر كلا النوعين من الروابط عند نقل مستند من كمبيوتر إلى آخر.</p> <p>غالبًا ما يحدث أن يقوم المستخدم بتنزيل مستند كبير على جهازه وفصله عن الشبكة لدراسته بالتفصيل. ستتوقف جميع الروابط الموجودة في النسخة المحلية من المستند عن العمل. لإعادة تنشيطها ، سيتعين عليك الرجوع مرة أخرى إلى المستند الأصلي الموجود على الكمبيوتر البعيد.</p> <p>لحسن الحظ ، توقع مطورو HTML هذه المشكلة وأضافوا علامتين ، <BASE>و <LINK>، والتي تم تضمينها في الرأس بحيث لا يتم قطع العلاقة بين المستندات.</p> <p><b>بطاقة شعار <BASE> </b> </p> <p>بطاقة شعار <BASE>يستخدم لتحديد عنوان URL الأساسي الكامل للمستند. باستخدامه ، يستمر الارتباط النسبي في العمل إذا تم نقل المستند إلى دليل مختلف أو حتى إلى جهاز كمبيوتر مختلف. بطاقة شعار <BASE>يعمل بشكل مشابه لأمر مسار MS-DOS ، مما يسمح للمشاهد بتحديد ارتباط المستند الذي تبحث عنه ، حتى لو كان في مستند ذي تسلسل هرمي أعلى على جهاز كمبيوتر مختلف.</p> <p>بطاقة شعار <BASE>يحتوي على معلمة HREF واحدة مطلوبة متبوعة بعنوان URL الكامل للمستند. فيما يلي مثال على استخدام العلامة <BASE>. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>تحديد العنوان الأساسي</TITLE> </p> <p><BASE HREF="http://www.my_host.ru/~sergeev"> </p> <p></HEAD> </p> <p><BODY> </p> <p><img src='/shopping/struktura-internet-magazina-kak-pravilno-raspredelit-tovary/' loading=lazy loading=lazy> </p> <p></BODY> </p> <p></HTML> </p> <p>بطاقة شعار <BASE>يخبر المتصفح بمكان البحث عن الملف. في حالة عمل المستخدم مع نسخة محلية من الملف ولم يتم فصل الجهاز الخاص به عن الشبكة ، سيتم العثور على صورة رمز الأخبار وعرضها في نافذة المتصفح.</p> <p><b>بطاقة شعار <LINK> </b></p> <p>حتى لو كانت العلامة <BASE>يسمح لك بالعثور على الملف ، تظل مسألة العلاقة بين المستندات مفتوحة. تزداد أهمية هذه العلاقات بالتناسب مع تعقيد مستنداتك. من أجل الحفاظ على اتصال منطقي بينهما ، يتم تقديم علامة HTML <LINK>. </p> <p>بطاقة شعار <LINK>يشير إلى علاقة بين المستند الذي يحتوي على علامة معينة ووثيقة أو كائن آخر. يتكون من عنوان URL ومعلمات تحدد علاقة المستند. يمكن أن يحتوي عنوان المستند على أي عدد من العلامات <LINK>. فاتورة غير مدفوعة. 1.1 يصف خيارات العلامة <LINK>ووظائفهم.</p> <p><i> <span><b>الجدول 1.1.</b>خيارات العلامات <LINK> </span> </i></p> <p>دعنا نعطي أمثلة على العلامة <LINK>مع المعلمات:</p> <p><LINK REL="contents" HREF ="../toc.html"> </p> <p><LINK HREF="mailto:sergeev@mail.ifmo.ru" REV="made"> </p> <p>يشير السطر الأول إلى ارتباط إلى ملف جدول محتويات المستند (toc.html - جدول المحتويات) بعلاقة مباشرة بالمحتويات. يصف السطر الثاني الارتباط بعنوان URL لمؤلف المستند (مع إجراء العلاقة العكسية).</p> <p>يمكن أن يكون هناك العديد من العلاقات المختلفة بين المستندات. أمثلة على قيم معلمات REL الأخرى: المرجعية ، حقوق النشر ، المسرد ، المساعدة ، الصفحة الرئيسية ، الفهرس ، toc ، التالي ، السابق. يمكن أن تأخذ المعلمة REV أيضًا القيم التالية: المؤلف ، والمحرر ، والناشر ، والمالك.</p> <p><b>بطاقة شعار <META> </b></p> <p>يستغرق تطوير مواصفات لغة ترميز النص التشعبي الجديدة وقتًا طويلاً ، وخلال هذا الوقت ، يكون لدى شركات المستعرضات الوقت لإصدار عدة إصدارات من منتجاتها. لذلك يمكن إضافة علامة أخرى إلى قسم الرأس <META>، والذي يسمح لمؤلفي المستندات بتعريف المعلومات بخلاف HTML.</p> <p>يستخدم المستعرض هذه المعلومات للإجراءات التي لا تغطيها مواصفات HTML الحالية. بطاقة شعار <META>لن تحتاجه لإنشاء مستندات HTML الأولى الخاصة بك ، ولكنك بالتأكيد ستحتاج إليها لأن صفحاتك تزداد تعقيدًا.</p> <p>مثال:</p> <p><МЕТА HTTP-EQUIV="refresh" CONTENT="60" RL="www.my_host.ru/homepage.html"> </p> <p>سوف يفسر كل من Netscape Navigator و Internet Explorer هذا الإدخال على أنه إرشادات للانتظار 60 ثانية ثم تحميل مستند جديد. غالبًا ما يتم استخدام هذه التعليمات عند تغيير مكان المستندات. يمكن ترك مستند صغير مع السلسلة أعلاه في موقع المستند القديم لربطه تلقائيًا بموقعه الجديد.</p> <p>السطر التالي:</p> <p><МЕТА HTTP-EQUIV="refresh" CONTENT="60"> </p> <p>يوجه المتصفح لإعادة تحميل الصفحة كل 60 ثانية. يمكن أن يكون هذا مفيدًا إذا تم تحديث البيانات الموجودة على الصفحة بشكل متكرر ، على سبيل المثال عند تتبع أسعار الأسهم.</p> <p>أصبح استخدام العنصر شائعًا جدًا <META>لحل بعض المشاكل النموذجية. مثال على ذلك هو الإشارة إلى الكلمات الرئيسية التي تستخدمها محركات البحث. تسمح لك هذه الطريقة بتضمين كلمات إضافية في فهرس المستند قد لا يتم تضمينها صراحةً في محتواها. للقيام بذلك ، في العلامة <META>تم تحديد اسم بعض الخصائص كقيمة معلمة NAME. وباستخدام المعامل CONTENT ، يتم تحديد قيمة هذه الخاصية ، على سبيل المثال:</p> <p><МЕТА NAME="author" CONTENT="Александр Сергеев"> </p> <p>لا تحدد مواصفات HTML أي أسماء خصائص معينة يتم كتابتها في العلامة. <META>. ومع ذلك ، هناك عدد قليل من الخصائص شائعة الاستخدام ، مثل الوصف والكلمات الرئيسية والمؤلف والروبوتات وما إلى ذلك:</p> <p><МЕТА NAME="description" CONTENT="Описание возможностей языка HTML 4.0"> </p> <p><МЕТА NAME="keywords" CONTENT ="тэг, гипертекст, HTML, браузер"> </p> <p>العلامات المعطاة <META>يمكن الإشارة إليها ، على سبيل المثال ، للنسخة الإلكترونية من هذا الكتاب.</p> <p>بطاقة شعار <META>قد تحتوي على المعلمات المحددة في الجدول. 1.2</p> <p><i> <span><b>الجدول 1.2.</b>خيارات العلامات <META> </span> </i></p> <p>غرض آخر مهم للعلامة <META>هو إشارة إلى ترميز النص. لذلك ، بالنسبة للنص باللغة الروسية بترميز Windows ، تحتاج إلى كتابة السطر التالي:</p> <p><МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> </p> <p><b><span>عناصر الرأس الأخرى</span> </b></p> <p>يمكن وجود علامتين أخريين في قسم الرأس من المستند -<STYLE> и <SCRIPT>. Их назначение связано с использованием таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются во второй части книги. </p> <p><b> <span> Раздел документа </span> <span>BODY </span> </b></p> <p>В этом разделе документа располагается его содержательная часть. Большинство тэгов, рассматриваемых далее в этой главе и последующих, должно располагаться в данном разделе документа. Здесь мы рассмотрим лишь некоторые общие вопросы. </p> <p>Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэгом </BODY>, между которыми располагается все содержимое данного раздела. Строго говоря, наличие этих тегов не является обязательным, поскольку браузеры могут определить начало содержательной части документа по контексту. Однако их употребление рекомендуется. </p> <p>Тэг <BODY> имеет ряд параметров, ни один из которых не является обязательным. Перечень параметров приведен в табл. 1.3. </p> <p><i> <span><b>Таблица 1.3. </b> Перечень параметров тега <BODY> </span> </i></p> <table border="1" width="550" height="427"><tr><td width="140" height="33"> <p><b>Параметр </b></p> </td> <td width="400" height="33"> <p><b>Назначение </b></p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>ALINK </p> </td> <td width="400" height="18" valign="top"> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BACKGROUND </p> </td> <td width="400" height="36" valign="top"> <p>Указывает на URL-адрес изображения, которое используется в качестве фонового </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BOTTOMMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу нижнего поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>BGCOLOR </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет фона документа </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BGPROPERTIES </p> </td> <td width="400" height="36" valign="top"> <p>Если установлено значение FIXED, фоновое изображение не прокручивается </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>LEFTMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу левого поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>LINK </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет еще не просмотренной ссылки </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>RIGHTMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу правого поля документа в пикселах </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>SCROLL </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает наличие или отсутствие полос прокрутки окна браузера </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>TEXT </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет текста </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>TOPMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу верхнего поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>VLINK </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет уже просмотренной ссылки </p> </td> </tr></table><p>Использование параметров BACKGROUND и BGCOLOR, определяющих фон документа, подробно рассмотрено в . </p> <p>Параметр BGPROPERTIES, принимающий единственное значение FIXED, поддерживается только браузером Microsoft Internet Explorer. </p> <p>Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN, задающие расстояния в пикселах между краями текста и соответствующими краями окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet Explorer, начиная с версии 4.0. </p> <p>Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок и текста документа. </p> <p>В языке HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности цифр, вместо них можно пользоваться названиями цветов, которые приводятся в приложении П2 . Ранние версии браузеров распознавали только названия 16 стандартных цветов, отмеченных в приложении звездочками. Современные версии браузеров распознают все 140 названий цветов. </p> <p><b><span> Форматирование текста </span> </b></p> <p>В данном разделе будут рассмотрены возможности форматирования отдельных символов текста документа. </p> <p><b> <span> Тэги уровня блока и последовательные тэги </span> </b></p> <p>Некоторые HTML-тэги, которые могут появляться в разделе BODY, называют тэгами уровня блока (block level), в то время как другие последовательными (inline) тэгами или, называя по-другому, тэгами уровня текста (text level), хотя такое разделение тегов по уровням в известной степени условно. </p> <p>Различие уровней HTML-тэгов заключается в следующем: теги уровня блока могут содержать последовательные теги и другие теги уровня блока, тогда как последовательные теги содержат только данные и другие последовательные тэги. Блоковые теги описывают более крупные структуры документов, по сравнению с последовательными тэгами. </p> <p>По умолчанию теги этих видов размещаются в тексте описания различным образом: теги уровня блока начинаются с новой строки, в то время как последовательные - нет. </p> <p><b> <span> Логическое и физическое форматирование </span> </b></p> <p>Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на теги логического и физического форматирования. </p> <p>Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>) и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью тегов <EM> и <STRONG> можно, например, отметить отдельные фрагменты как выделенные, или сильно выделенные. Заметим, что речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тега логического форматирования), но может быть легко переопределен. </p> <p>Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Например, для отображения фрагмента курсивом можно использовать тег курсива <I>. Этот и другие, часто используемые теги физического форматирования описаны ниже в разделе "Тэги физического форматирования текста"этой главы. </p> <p>Между разработчиками HTML-документов долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления. Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы (основанные на таблицах стилей, динамически изменяющихся документах и т. д.). </p> <p>Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные заменить отдельные теги физического форматирования, распознаются не всеми браузерами, что делает их применение крайне неудобным. Примером может служить логический тег <DEL>, который рекомендуется использовать вместо физического тега <STRIKE>. </p> <p>Рассматриваемые ниже теги относятся к тэгам уровня текста, т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги могут задавать разметку и на уровне блока. </p> <p><b> <span> Тэги логического форматирования текста </span> </b></p> <p><b>Тэг <ABBR> </b> </p> <p>Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером. </p> <p><b>Тэг <ACRONYM> </b> </p> <p>Тэг <ACRONYM>. Так же, как и тег <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е. произносимые слова, состоящие из аббревиатур. Тег <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе. </p> <p>Данный тег удобно использовать в сочетании с параметром TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом <ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки. </p> <p>Заметим, что тег <ACRONYM> распознается только браузером Microsoft Internet Explorer. Пример: </p> <p><ACRONYM TITLE="Санкт-Петербургский государственный институт точной механики и оптики"> СПбГИТМО</ACRONYM> </span><span> - один из ведущих технических вузов Санкт-Петербурга </p> <p><b>Тэг <CITE> </b> </p> <p>Тэг <CITE> используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом. Пример: </p> <p><CITE>Невское время</CITE> является одной из наиболее популярных городских газет Санкт-Петербурга </p> <p><b>Тэг <CODE> </b> </p> <p>Тэг <CODE> отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Этот тег не следует путать с тэгом <PRE>Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода. </p> <p>Например: </p> <p>Пример простейшего оператора языка программирования C:<BR> </p> <p><CODE>puts("Hello, World!");</CODE> </p> <p>Есть еще одно различие в использовании тегов <CODE> и <PRE>В коде программ часто бывает важно наличие нескольких идущих подряд пробелов. Их отображение будет сохранено только при использовании тега <PRE>. </p> <p><b> Тэг <DEL> </b></p> <p>Тэг <DEL> отмечает свой текст как удаленный. Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег <DEL> может использоваться как элемент уровня текста и как элемент уровня блока. </p> <p>Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента. </p> <p>Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например: </p> <p>Последней принятой спецификацией языка разметки HTML является версия <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL> 4.0 </p> <p>Текст, помеченный тэгом <DEL> обычно отображается перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение перед тэгом физического форматирования <STRIKE> или <S>, обозначающих перечеркнутый текст. Однако тег <DEL> </p> <p><b>Тэг <DFN> </b> </p> <p>Тэг <DFN> отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример: </p> <p><DFN>Internet Explorer</DFN> - это популярный Web-браузер </p> <p>Тэг <DFN> поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом. </p> <p><b> Тэг <INS> </b></p> <p>Тэг <INS> отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег <INS> может использоваться как элемент уровня текста и как элемент уровня блока. </p> <p>Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений. </p> <p>Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone). </p> <p>Текст, помеченный тэгом <INS>, обычно отображается подчеркнутым текстом. Тег <INS> в настоящее время распознается только браузером Microsoft Internet Explorer. </p> <p><b> Тэг <EM> </b></p> <p>Тэг <EM> (EMphasis - выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример: </p> <p>Пример выделения <EM>отдельных слов</EM> текста </p> <p> <I>. </p> <p><b> Тэг <KBD> </b></p> <p>Тэг <KBD> отмечает текст как вводимый пользователем с клавиатуры. Обычно отображается моноширинным шрифтом, например: </p> <p>Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD> </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <TT>. </p> <p><b> Тэг <Q> </b></p> <p>Тэг <Q> отмечает короткие цитаты в строке текста. В отличие от тега уровня блока <BLOCKQUOTE> при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег <Q> (в отличие от <BLOCKQUOTE>) в настоящее время распознается только браузером Microsoft Internet Explorer. </p> <p>Тэг имеет параметр CITE, в качестве значения которого можно указать источник цитаты. </p> <p><b> Тэг <SAMP> </b></p> <p>Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное использование этого тега - отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом. </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <TT>. Например: </p> <p>В результате работы программы будет напечатано: <SAMP>Hello, World!</SAMP> </span>. </p> <p><b> Тэг <STRONG> </b></p> <p>Тэг <STRONG>, как правило, используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом. Пример: </p> <p>Санкт-Петербург расположен в самой восточной оконечности <STRONG>Финского залива</STRONG> в устье реки <STRONG>Невы< /STRONG> </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <B>. Тегом <STRONG> обычно размечают более важные фрагменты текста, чем те, что размечены тэгом <EM>. </p> <p><b> Тэг <VAR> </b></p> <p>Тэг <VAR> отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример: </p> <p>Задайте значение переменной <VAR>N</VAR> </p> <p>Отображение некоторых из примеров, приведенных при описании тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>, выдается подсказка. </p> <p><i><b>Рис. 1.1. </b> </i> <i>Примеры форматирования текста </i> </p> <p>Вы, наверное, обратили внимание на то, что некоторые элементы дают одинаковый результат. Более того, часть элементов может никак не изменять представление фрагмента текста на экране. Может возникнуть законный вопрос: для чего создано такое разнообразие элементов форматирования? </p> <p>Ответ - в названии этой группы элементов. Они предназначены для расстановки логических ударений, выделения логических частей и подчеркивания сути высказываний. Их использование весьма актуально, поскольку, вероятно, в ближайшем будущем возможности браузеров возрастут, например, станет возможен поиск цитат на Web-пространстве, а может быть следующее поколение браузеров научится читать документы вслух. Кроме того, авторам документов ничто не мешает уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого из тэгов, переопределив значения по умолчанию. </p> <p> <b> <span>Тэги физического форматирования текста </span> </b></p> <p>Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами. </p> <p><b> Тэг </p> <p>Тэг <B> отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега <B> использовать тег логического форматирования <STRONG>. Например: </p> <p>Это <B>полужирный</B> шрифт. </p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/02.gif' height="435" width="401" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.2. </b> Примеры физического форматирования текста (браузером Netscape) </i> </p> <p><b> Тэг <<span>I > </span> </b></p> <p>Тэг <I> отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги <EM>, <DFN>, <VAR> или <CITE>, поскольку последние лучше отражают назначение выделяемого текста. Например: </p> <p>Выделение <I>курсивом</I> </p> <p><b> Тэг <TT> </b></p> <p>Тэг <TT> отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги <CODE>, <SAMP> или <KBD>. Пример: </p> <p>Это <TT>моноширинный</TT> шрифт </span>. </p> <p><b> Тэг <U> </b></p> <p>Тэг <U> отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать теги <STRONG> или <CITE>. Например: </p> <p>Пример <U>подчеркивания</U> текста </span>. </p> <p><b>Тэги <STRIKE> и <S> </b> </p> <p>Тэги <STRIKE> и <S> отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег <DEL>. Например: </p> <p>Пример <STRIKE>зачеркнутого</STRIKE> текста </span>. </p> <p>В настоящее время тег <DEL> поддерживается не всеми браузерами, поэтому пока рекомендуется использовать <DEL> в сочетании с тэгом <STRIKE>. А именно, внутрь тэга-контейнера <DEL> можно вложить пару тегов </p> <p><STRIKE>...</STRIKE> . </p> <p><b>Тэг <BIG> </b> </p> <p>Тэг <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать <STRONG> или теги заголовков, например, <H3> <BIG></p> <p>Шрифт <BIG>большего</BIG> размера </span>. </p> <p><b> Тэг <SMALL> </b></p> <p>Тэг <SMALL> выводит текст шрифтом меньшего размера. Поскольку в HTML нет тэга, противоположного по действию тэгу <EM>, то для этих целей можно применять тег <SMALL>. Большинство браузеров поддерживают вложенные теги <SMALL>, однако использовать такой подход не рекомендуется. Например: </p> <p>Шрифт <SMALL>меньшего</SMALL> размера </span>. </p> <p><b>Тэг <SUB> </b> </p> <p>Тэг <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например: </p> <p>Пример шрифта для <SUB>нижнего</SUB> индекса </span>. </p> <p><b> Тэг <SUP> </b></p> <p>Тэг <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например: </p> <p>Пример шрифта для <SUP>верхнего</SUP> индекса </span>. </p> <p><b> Тэг <BLINK> </b></p> <p>Тэг <BLINK> отображает мигающий текст. Этот тег не входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие на странице мигающих символов раздражает многих пользователей. </p> <p><b> <span>Тэг </b></p> <p>Тэг-контейнер <SPAN> является аналогом тега уровня блока <DIV>. Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования. </p> <p>Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги. </p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/03.gif' height="240" width="353" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.3. </b> Использование вложенных тегов форматирования текста </i> </p> <p>Тэги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. На рис. 1.3 показан пример использования вложения элемента курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: </p> <p>Это <B>полужирный</B> шрифт. </p> <p> <p>Это <I>курсив</I>. </p> <p> <p>А здесь текст <B><I>полужирный и курсивный</I></В> </p> <p><b> Тэг <FONT> </b></p> <p>Тэг <FONT> указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста. </p> <p>Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а также тег <BASEFONT> отнесены к отмененным. Их дальнейшее применение не рекомендуется. </p> <p>Несмотря на эти грозные предупреждения, видимо, для самых простых документов физическое форматирование можно считать допустимым. Кроме того, начинать обучение основам форматирования проще всего именно с правил непосредственного указания форматов элементов. До стилевого оформления начинающий разработчик должен еще дорасти. </p> <p>Тэг <FONT> относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например, <P>Или <TABLE>. </p> <p>Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем. </p> <ul><p>FACE </p> <p>Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. </p> <p>Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное свойство, так как в разных системах могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным качеством является задание предпочтения использования шрифтов. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т. д. </p> <p>Приведем пример использования параметра FACE: </p> <p><HTML> <HEAD> </p> <p><TITLE>Назначение шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><BR> </p> <p><FONT FACE="Verdana", "Arial", "Helvetica"> </p> <p>Пример задания названия шрифта. </p> <p></FONT> </p> <p></BODY> </p> <p></HTML> </p> <p>На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д. </p> </ul><p><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/04.gif' height="222" width="369" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.4. </b> Отображение примера браузером Netscape </i> </p> <ul><p>SIZE </p> <p>Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3. </p> </ul><p>Настройки размеров шрифта, используемых по умолчанию, а также величины абсолютного изменения размеров шрифта, зависят от браузеров. На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты, используемые по умолчанию. </p> <p>Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега <BASEFONT>. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>При указании размеров шрифтов записи типа "2" и "+2" (в отличие от большинства языков программирования, в которых унарный знак "+" можно опускать) дают принципиально разный результат. </span> </i></p> <p>Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6. </p> <p><br><img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/05.gif' width="100%" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.5. </b> Окно настройки параметров шрифтов браузера Netscape </i> </p> <p><br><img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/06.gif' width="100%" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.6. </b> Назначение размеров шрифтов </i> </p> <blockquote> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Назначение размеров шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><FONT SIZE=1>Шрифт размера 1</FONT><BR> </p> <p><FONT SIZE=-1>Шрифт размера 2</FONT><BR> </p> <p><FONT SIZE=3>Шрифт размера 3</FONT><BR> </p> <p><FONT SIZE=4>Шрифт размера 4</FONT><BR> </p> <p><FONT SIZE=5>Шрифт размера 5</FONT><BR> </p> <p><FONT SIZE=+3>Шрифт размера 6</FONT><BR> </p> <p><FONT SIZE=7>Шрифт размера 7</FONT><BR> </p> <p></BODY> </p> <p></HTML> </p> </blockquote> <ul><p>COLOR </p> <p>Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Выбор цвета шрифта</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><FONT COLOR=green>Текст зеленого цвета</FONT><BR> </p> <p><FONT COLOR=#FF0000>Текст красного цвета</FONT><BR> </p> <p></BODY> </p> <p></HTML> </p> </ul><p><b> Тэг <BASEFONT> </b></p> <p>Тэг <BASEFONT> используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа, однако могут в нужных местах переопределяться с помощью тега <FONT>. После закрывающего тега </FONT> действие тега <BASEFONT> восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут неоднократно переопределяться в документе, т. е. тег <BASEFONT> может появляться в документе любое количество раз. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Тэг <BASEFONT> может появляться также и в разделе <HEAD> документа. </span> </i></p> <p>Заметим, что для тега <BASEFONT> не существует закрывающего тэга. </p> <p>В качестве параметров могут использоваться точно такие же параметры, что и для тега <FONT>, а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны. </p> <p><i> <b><span>Примечание </b> </span> </i></p> <p><i> <span>Браузер Netscape не допускает применение параметра FACE тега <BASEFONT>. </span> </i></p> <p>Приведем пример использования тега <BASEFONT>. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Назначение размеров шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p>Текст, записанный шрифтом по умолчанию. </p> <p><BASEFONT SIZE=2> <p>Шрифт размера 2. </p> <p><BASEFONT SIZE=4> </p> <p> <p>Шрифт размера 4. </p> <p> <p> <TABLE BORDER=1> </p> <p> <TR> </p> <p> <TD>Текст внутри ячейки таблицы</TD> </p> <p> </TR> </p> <p> </TABLE> </p> <p><P>Текст после таблицы </p> <p></BODY> </p> <p></HTML> </p> <p>В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее - 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега <BASEFONT> не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тэга. </p> <span> <br><img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/07.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.7. </b> Отображение примера С ТЭГОМ <BASEFONT> (браузером Netscape) </i> </p> <p><b> <span> Форматирование HTML-документа </span> </b></p> <p><b> <span> Разделение на абзацы </span> </b></p> <p>Любые тексты, будь то школьное сочинение, заметка в газете или техническое описание устройства имеют определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др. </p> <p>Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца. </p> <p>Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра. </p> <p>Избежать этой неприятности позволяет применение специального тега разделения на абзацы <P>Перед началом каждого абзаца текста следует поместить тег <P>Закрывающий тег </P> не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Браузеры обычно интерпретируют несколько стоящих подряд тегов абзаца <P>Как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тегов не удается. </span> </i></p> <p>Тэг <P>Может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию выполняется выравнивание по левому краю. </p> <p><i> <span><b>Таблица 1.4. </b>Значения параметра ALIGN </span> </i></p> <table border="1" width="550"><tr><td width="185"> <p><b><span>Значение параметра ALIGN </span> </b></p> </td> <td width="355"> <p><b>Действие </b></p> </td> </tr><tr><td width="185" valign="top"> <p>LEFT </p> </td> <td width="355" valign="top"> <p>Выравнивание текста по левой границе окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>CENTER </p> </td> <td width="355" valign="top"> <p>Выравнивание по центру окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>RIGHT </p> </td> <td width="355" valign="top"> <p>Выравнивание по правой границе окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>JUSTIFY </p> </td> <td width="355" valign="top"> <p>Выравнивание по ширине (по двум сторонам) </p> </td> </tr></table><p>Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое время не поддерживалось браузерами. Во многих описаниях языка HTML для значений параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT). В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине. Некоторые проблемы создания документов с выравниванием по ширине рассмотрены также в главе 8. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Отсутствие выравнивания по ширине в настоящее время кажется удивительным. Этот режим применяется очень часто для печатных изданий. Достаточно взять в руки любую газету или внимательно присмотреться к абзацам данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив возможности мощных текстовых редакторов и современных браузеров. Примером не реализованных пока возможностей может являться автоматическая расстановка переносов и пр. </span> </i></p> <p><b> Перевод строки </b></p> <p>При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <BR>, который не имеет соответствующего закрывающего тэга. Включение тега <BR> в текст документа обеспечит размещение последующего текста с начала новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тегов разметки списка. Или, например, без данного тега не обойтись для отображения стихотворений и т. п. </p> <p>Приведем пример использования принудительного перевода строки (рис. 1.8): </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Использование принудительного перевода строки</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p>Над омраченным Петроградом<BR> </p> <p>Дышал ноябрь осенним хладом.<BR> </p> <p>Плеская шумною волной<BR> </p> <p>В края своей ограды стройной,<BR> </p> <p>Нева металась, как больной<BR> </p> <p>В своей постеле беспокойной. </p> <p> <p><CITE>А.С.Пушкин. Медный всадник</CITE> </p> <p></BODY> </p> <p></HTML> </p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/08.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.8. </b> Тег <BR> можно использовать для принудительного перевода строки </i> </p> <p>В отличие от тега абзаца <P>При использовании тега <BR> не будет образована пустая строка. </p> <p>Использование тега <BR> требует осторожности - возможна ситуация, когда браузер уже сделал перевод строки за одно-два слова до того, как встретил ваш тег <BR>. Это бывает в случае, если ширина окна программы просмотра читателя меньше, чем тот же параметр программы, с помощью которой вы тестировали ваш документ. При этом может получиться, что в строке посреди абзаца останется только одно слово, нарушая тем самым красоту компоновки документа. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>При использовании тега <BR> для разбивки текста, обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий обтекание текста. Об этом можно прочитать в главах 3 и 4. </span> </i></p> <p><b> Тэги <NOBR>u <WBR> </b></p> <p>Бывают ситуации, когда требуется выполнить операцию противоположного назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега <TD>. Об этом можно узнать в главе 4. </span> </i></p> <p>Размечая текст с помощью тега неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тег <WBR> (Word BReak), который так же, как и тег <BR>, не нуждается в закрывающем тэге. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Тэг <WBR> вообще не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте, размеченном тэгами <NOBR>. </span> </i></p> <p><b> <span> Заголовки внутри HTML-документа </span> </b></p> <p>Наряду с названием всего документа, на Web-странице могут использоваться заголовки для отдельных частей документа. Эти заголовки могут иметь шесть различных уровней (размеров) и представляют собой фрагменты текста, которые выделяются на экране при отображении страницы браузером. </p> <p>Для разметки заголовков используются теги <HI>, <H2>, <H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера. При использовании тегов заголовков осуществляется вставка пустой строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь не требуется. </p> <p>Тэги заголовков могут задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания тега абзаца <P> (см. табл. 1.4). </p> <p>Пример использования заголовков разного уровня с различным выравниванием (рис. 1.9): </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Примеры заголовков</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><H1>Заголовок размера 1</H1> </p> <p><H2>Заголовок размера 2</H2> </p> <p><H3 ALIGN=CENTER>Заголовок размера 3</H3> </p> <p><H4 ALIGN=RIGHT>Заголовок размера 4</H4> </p> <p><H5>Заголовок размера 5</H5> </p> <p><H6>Заголовок размера 6</H6> </p> <p>Основной текст документа </p> <p></BODY> </p> <p></HTML> </p> <span> <br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/09.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.9. </b> Отображение заголовков различного размера </i> </p> <p><b> <span> Горизонтальные линии </span> </b></p> <p>Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы обозначить "объемность" документа. </p> <p>Тэг <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не является контейнером, поэтому не требует закрывающего тэга. До и после линии автоматически вставляется пустая строка. Параметры тега <HR> представлены в табл. 1.5. </p> <p><i> <span><b>Таблица 1.5. </b> Параметры тега <HR> </span> </i></p> <p>Пример: </p> <p><HR ALIGN=CENTER WIDTH=50% NOSHADE> </p> <p>В этом примере задается горизонтальная линия, которая занимает половину ширину окна просмотра и располагается посередине окна. Заметим, что параметры выравнивания имеют смысл только тогда, когда линия занимает не всю ширину окна. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Браузер Netscape не позволяет использовать параметр COLOR тега <HR>. </span> </i></p> <p>Использование предварительно отформатированного текста </p> <p>Как видно в приведенных выше разделах, для разбивки текста по абзацам и обеспечения принудительного перевода строки следует пользоваться специальными тэгами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер <PRE>Определяющий предварительно форматированный (п реформатированный) текст. </p> <p>Текст, размеченный тэгом <PRE>Будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери в гибкости. </p> <p>Одним из вариантов использования этого тега являются таблицы, построенные без применения специальных тегов разметки таблиц. Другим важным </p> <p>применением является вывод на экран больших блоков программного кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их. </p> <p>Текст внутри контейнера <PRE>Может содержать элементы форматирования уровня текста, кроме следующих: <IMG>, <OBJECT>, <APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>, <BASEFONT>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой). </p> <p><i> <b> Примечание </b> </i></p> <p><i> <span>Тэг <PRE>Имеет необязательный параметр WIDTH, назначение которого - указывать браузеру максимальную длину строки преформатированного текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт и/или отступ для оптимального отображения преформатированного текста. В качестве значения по умолчанию предлагалось использовать 80. Другими рекомендованными значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт работы со средствами вычислительной техники, эти числа говорят о многом. На деле же современные браузеры игнорируют значение параметра WIDTH. </span> </i></p> <p>Существуют еще несколько тэгов, решающих близкую по смыслу задачу. К ним относятся теги <ХМР>, <PLAINTEXT>И <LISTING>.Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие. Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо этих тегов рекомендуется использовать тег <PRE>. </p> <p><b> Тэг<<span>DIV > </span> </b></p> <p>Тэг-контейнер <DIV> является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример: </p> <p><DIV STYLE="color: green"> </p> <p>(Фрагмент документа) </p> <p></DIV> </p> <p>В этом примере фрагмент HTML-документа обрамляется тэгами <DIV> и </DIV> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тега <DIV> уровня текста является элемент . </p> <p>Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги. </p> <p><b> Тэг <CENTER> </b></p> <p>Тэг-контейнер <CENTER> предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением </p> <p>ALIGN=CENTER тега <TABLE>. </p> <p>По существу тег <CENTER> является краткой формой следующей записи: <DIV ALIGN=CENTER>. Дальнейшее использование тега <CENTER> по причинам, отмеченным в предыдущем разделе, также нежелательно. </p> <p><b> <span> Включение комментариев в документ </span> </b></p> <p>В HTML-документ можно включать комментарии, которые не будут видны читателю. Они могут состоять из произвольного числа строк и должны начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы не будет отображаться на экране. </p> <p>Правила (rules) являются частью нашего мира и постоянно направляют наши ежедневные действия. Практически в каждой сфере нашей жизни присутствуют правила - правила поведения (rules of behavior), правила этикета (etiquette) , правила перехода улицы (rules of crossing the street) – перечислять можно бесконечно.</p><p>Что такое правила? Это свод инструкций (a set of instructions), которым нужно следовать (must be followed), или которым нужно подчиняться (obey). Есть много английских слов, которые подразумевают правила, или относятся к правилам:</p><ul><li>Cautions — предупреждение</li><li>Commandments – предписание, директива</li><li>Directions — инструкция</li><li>Forewarnings — предупреждение</li><li>Guides – руководства</li><li>Guidelines – руководящие указания</li><li>Instructions — инструкции</li><li>Laws – законы</li><li>Policies – установки</li><li>Procedures – процедуры</li><li>Regulations — правила</li><li>Warnings – предупреждения</li> </ul><p>Google shortcode</p><p>Правила воздействуют на нас каждый день и их трудно избежать (hard to avoid) даже в самых простых местах, даже когда мы просто идем по улице невозможно пропустить все знаки (miss all the signs), вывешенные вокруг нас, предупреждающие (giving warnings) и указывающие на правила, которым нужно следовать. Проще всего объяснить правило (the most common way to explain a rule) – записать его в книгу или выставить знаки, которые будут видны всем. Вот некоторые правила, вывешиваемые в виде знаков, которые мы часто можем встретить на улицах и в общественных местах, известные как warning signs.</p><ul><li>no cycling – нельзя кататься на велосипедах</li><li>no entry – вход воспрещен</li><li>no skating allowed – нельзя кататься на роликах</li><li>beware of oncoming bicycles – берегись встречных велосипедов</li><li>Keep clear = do not block this area – не занимать эту площадь</li><li>you can’t fill your gas cans here — нельзя заполнять газовые баллоны</li><li>poison = do not eat it – яд = есть нельзя</li><li>no smoking allowed – не курить</li><li>beware of people crossing the road – осторожно, пешеходы</li><li>no parking allowed – парковка запрещена</li><li>do not drop litter – мусор не бросать</li><li>no children allowed – дети не допускаются</li><li>no photography allowed – фотографирование запрещено</li><li>please clean up after your dog – убирайте за своей собакой</li><li>danger of death – danger, high voltage electricity nearby – опасно! – опасно, высокое напряжение</li><li>no spitting allowed – нельзя плеваться</li> </ul><p>Как видите, вокруг нас много правил (rules are all around us), и мы должны им следовать, хотя, нужно сказать, что иногда люди не следуют правилам, они их нарушают (they break the rules), или идут против правил (go against the rules), иногда их «ловят» (they are caught) и наказывают (they are punished). Если вы нарушили правило, вас могут заставить заплатить деньги, т.е. штраф (a fine/penalty), или что еще хуже, могут заставить пойти в отделение полиции (the police station).</p><p>Вы когда-нибудь нарушали правила? Люди, которые всегда следуют правилам, называются “law abiding”, а люди, нарушающие правила — “law breakers”.</p><p>Напоследок хотим пожелать вам «be good!» , «follow the rules!», «stay out of trouble!»</p> <p>Создание прибыльного интернет-магазина требует понимания того, как работают поисковые системы, как люди ищут необходимые товары и услуги, что может привлечь максимальное внимание к вашему сайту.</p> <h2>Значимость структуры товаров</h2> <p>Один из ключевых моментов - грамотная структура каталога товаров. Структура сайта интернет-магазина - это определенная система взаимного расположения веб-страниц и разделов, логичный способ их связи. От того, насколько она удобна, зависит непосредственное перемещение пользователя по сайту. При составлении структуры каталога, нужно руководствоваться не вашим субъективным желанием расположить товары определенным образом, а строгой логикой, учитывающей специфику поиска в интернете. Ошибиться в этом вопросе - значит потерять массу потенциальных клиентов, которые просто не найдут ваш сайт во всемирной паутине.</p> <p>Разработать структуру нужно еще на этапе проектирования сайта. Иначе в дальнейшем придется делать работу над ошибками, которая чревата потерей времени, денег, и может сопровождаться дополнительными трудностями при заполнении каталога товарами. И если в условиях ограниченного бюджета перед начинающим бизнесменом стоит вопрос: «Что важнее: дизайн или функциональность сайта?», смело выбирайте последнее.</p> <h2>Ошибки при составлении структуры</h2> <p>Многие веб-мастера часто совершают одну серьёзную ошибку: не смотрят на свою структуру каталога глазами клиента. Они выгружают товары в том виде, в каком их прислал поставщик, копируя его структуру. Или иногда руководствуются структурой склада.</p> <p>Приведём пример неудачной структуры в магазине зоотоваров:</p> <p>На первый взгляд, товары распределены логично. Но у потенциального клиента почти наверняка или собака, или кошка, или аквариумные рыбки. А теперь представим аквариумиста, решившего поискать на этом сайте корм. Он нажмёт кнопку «Корма» и попадёт в категорию, в которой все корма вперемешку: и для кошек, и для собак, и для грызунов. Найти среди этого хаоса нужный корм для рыб будет непросто.</p> <p>С учетом этого фактора структура категорий товаров изменится:</p> <p><img src='https://i1.wp.com/static-internal.insales.ru/files/1/7334/3284134/original/15052017-08.jpg' width="100%" loading=lazy loading=lazy></p> <p>Собственно, если зайти на сайты популярных интернет-магазинов, торгующих зоотоварами, то там мы увидим именно эту структуру:</p> <p><img src='https://i2.wp.com/static-internal.insales.ru/files/1/7335/3284135/original/15052017-02.jpg' width="100%" loading=lazy loading=lazy></p> <p><img src='https://i2.wp.com/static-internal.insales.ru/files/1/7336/3284136/original/15052017-03.jpg' width="100%" loading=lazy loading=lazy></p> <p><img src='https://i0.wp.com/static-internal.insales.ru/files/1/7338/3284138/original/15052017-04.jpg' width="100%" loading=lazy loading=lazy></p> <p>Полезно поставить себя на место вашего клиента, понять его логику поиска товаров и услуг и расположить товары на сайте максимально удобно.</p> <h2>Инструменты для создания структуры</h2> <p>Задача структуры - быстро сориентировать клиента в каталоге, чтобы он легко мог найти нужный товар, выбрать его по своим критериям, сравнить с другими. Существует два инструмента для создания структуры: категории и фильтр.</p> <h3>Категории и подкатегории</h3> <p>Первый по важности и значению - категории и подкатегории товаров. Это - основа и каркас всего сайта. Именно их пользователи видят в главном меню.</p> <p>К распределению товаров по категориям нужно отнестись наиболее ответственно. Ведь изменение структуры на сайте, на котором уже есть трафик, может дорого обойтись. Поэтому при разработке структуры именно категориям нужно уделить основное время.</p> <ol><li>По типу товара</li> <li>По назначению</li> <li>По бренду</li> </ol><p>Тип товара, это то, что мы привели в примере про зоомагазин: корма, лекарства, одежда, игрушки. В магазине одежды это будут: обувь, верхняя одежда, нижнее бельё, сумки, аксессуары. В мебельном магазине: столы, стулья, шкафы, диваны.</p> <p>Назначение - то, для кого или чего этот товар. В зоомагазине: для кошек, для собак, для рыбок, для грызунов. В магазине одежды: для женщин, для мужчин, для детей. В мебельном: для гостиной, для прихожей, кухонная мебель.</p> <p>Что такое структура, основанная на брендах, объяснять не нужно. Но подходит она далеко не всем, чаще только узкоспециализированным магазинам. Например, в магазине, который продаёт только кроссовки, она будет уместна. В меню такого магазина будет логично сделать категории: Adidas, Nike, New Balance. Если специализация магазина шире, то бренды лучше сделать при помощи фильтра.</p> <h3>Фильтры</h3> <p>Дополнительный инструмент для структурирования товаров - фильтры. Они выстраивают товары внутри категорий в определенной последовательности и помогают клиенту в детализации поиска необходимой вещи. Для того чтобы использование фильтра стало возможным, у каждого товара должен быть параметр, по которому его можно будет отфильтровать.</p> <p><img src='https://i2.wp.com/static-internal.insales.ru/files/1/7350/3284150/original/15052017-09.jpg' width="100%" loading=lazy loading=lazy></p> <p>Например, в магазине электроники в категории «смартфоны» параметрами будут: диагональ экрана, операционная система, тип процессора, память, 4g, бренд, цвет корпуса и т.д. В использовании фильтров важно не перегрузить пользователя и соблюсти определенный баланс между недостатком и избытком выбора предложенных характеристик. Чтобы с одной стороны клиент нашел именно то, что ему необходимо, а с другой - не устал от обилия предложенного выбора в фильтре.</p> <p>Для создания фильтров нужно каждому товару добавить параметр, а это может отнять много времени. Поэтому при открытии интернет-магазина лучше не акцентировать на фильтрах всё внимание - их можно сделать позже и постепенно. На первоначальном этапе нужно заняться категориями и подкатегориями, внимательно проработать именно их.</p> <h2>Способы создания структуры</h2> <p>Первый способ - скопировать структуру у конкурентов. Выбираете магазин конкурента с похожим ассортиментом, желательно из ТОПа поисковиков по профильным запросам, и делайте структуру по его подобию. Плюсы этого способа очевидны: скорость, простота, отсутствие издержек. Этот способ подходит новичкам. Но минусы тоже есть: ассортимент у конкурента может немного отличаться, также есть вероятность копировать ошибки конкурента.</p> <p>Второй способ - создание структуры сайта на основе семантического ядра. Плюсы: точное совпадение с запросами потенциальных клиентов. Пример: пользователи набирают в Яндексе или Гугле «прямое свадебное платье цвета шампань». Значит магазину женской одежды нужно в категории «Платья» создать подкатегорию «Свадебные» и настроить фильтр цвета и типа платья. Минус создания структуры на основе семантики: вам потребуется помощь SEO-специалиста или придется самостоятельно разбираться в данном вопросе. Это займет определенное время и стоит денег.</p> <p>Приведём несколько советов, которые помогут избежать других мелких ошибок.</p> <h3>Глубина каталога</h3> <p>Максимальная глубина каталога - три уровня: категория - подкатегория - подподкатегория. Пример: для женщин - одежда - джинсы. Причём старайтесь разместить все товары в два уровня, третий нужен только крупным гипермаркетам или для узкой специализации магазина. Всё, что не помещается в третий уровень стоит делать фильтром.</p> <h3>Избегайте пустых категорий</h3> <p>В подкатегории должно быть не менее 5-7 товаров. Иначе у посетителя останется ощущение «пустого прилавка». Если вы создаёте подкатегорию, но в ней всего 2-3 наименования, возможно и не стоит её создавать? К фильтрам это правило, само собой, не относится.</p> <h3>Один товар в разных категориях</h3> <p>Иногда один и тот же товар нужно разместить в две разные категории. В этом нет ничего плохого, это естественно. У многих интернет-магазинов даже глобальная структура строится по этому принципу. При этом могут использоваться одновременно разные типы структуры.</p> <p><img src='https://i1.wp.com/static-internal.insales.ru/files/1/7342/3284142/original/15052017-06.jpg' width="100%" loading=lazy loading=lazy></p> <h3>Используйте интеллект-карты</h3> <p>Для создания структуры интернет-магазина можно использовать Mind-maps - интеллект-карты. Это удобная графической форма представления мысли или идеи, в нашем случае - структуры. Конечно, можно вооружиться цветными маркерами и изобразить структуру будущего магазина на бумаге, но специальное приложение многим придётся по душе.</p> <p><b>Основы HTML </b> содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.</p> <p>HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе <b>(Блокнот) </b>, так и в специализированном, с подсветкой кода <b>(Notepad++, Visual Studio Code и т.п.) </b>. HTML-документ имеет расширение.html .</p> <p>HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).</p> <p><b>Начальный тег </b> показывает, где начинается элемент, конечный - где заканчивается. <b>Закрывающий тег </b> образуется путем добавления слэша / перед именем тега: <имя тега> … </имя тега> . Между начальным и закрывающим тегами находится содержимое тега - контент.</p> <p>Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег <input type="button" value="Кнопка"> создаст кнопку с текстом <b>Кнопка </b> внутри.</p> <p>Теги могут вкладываться друг в друга, например, <p><i>Текст</i></p> . При вложении следует соблюдать порядок их закрытия <b>(принцип «матрёшки») </b>, например, следующая запись будет неверной: <p><i>Текст</p></i> .</p> <p>HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.</p> <p>Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, <div class="nav top"> . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.</p> <p>Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.</p> <p>Процесс интерпретации <b>(парсинг) </b> начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.</p> <p>HTML-документ состоит из двух разделов - заголовка — между тегами <head> … </head> и содержательной части — между тегами <body> … <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> .</p> <h2>Структура веб-страницы</h2> <i> </i><h3>1. Структура HTML-документа</h3> <p>Язык HTML следует правилам, которые содержатся в файле объявления типа документа <i>(Document Type Definition, или DTD) </i>. DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.</p> <p><b>DOCTYPE </b> отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.</p><p> <!DOCTYPE html> <!-- Объявление формата документа --> <html> <head> <!-- Техническая информация о документе --> <meta charset="UTF-8"> <!-- Определяем кодировку символов документа --> <title>...</title> <!-- Задаем заголовок документа --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей --> <script src="script.js"></script> <!-- Подключаем сценарии --> </head> <body> <!-- Основная часть документа --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Элементы, находящиеся внутри тега <html> , образуют дерево документа, так называемую <b>объектную модель документа, DOM (document object model) </b>. При этом элемент <html> является корневым элементом.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2014/10/DOM.png' width="100%" loading=lazy loading=lazy> Рис. 1. Простейшая структура веб-страницы <p>Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые <b>«родственные отношения» </b> между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.</p> <p><b>Предок </b> - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html> . В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1> , <p> , <span> , <nav> и т.д.</p> <p><b>Потомок </b> - элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html> , а элемент <p>Является потомком одновременно для <body> и <html> .</p> <p><b>Родительский элемент </b> - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> <head> и <body> . Тег <p>Является родительским только для <span> .</p> <p><b>Дочерний элемент </b> - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1> , <h2> , <p>И <nav> являются дочерними по отношению к <body> .</p> <p><b>Сестринский элемент </b> - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1> , <h2> и <p>Являются между собой сестринскими.</p> <h3>1.1. Элемент <html></h3> <h3>1.2. Элемент <head></h3> <p>Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.</p> <h4>1.2.1. Элемент <title></h4> <p>Обязательным тегом раздела <head> является тег <title> . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.</p> <h4>1.2.2. Элемент <meta></h4> <p>Необязательным тегом раздела <head> является одинарный тег <meta> . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta> , потому что в зависимости от используемых атрибутов они несут различную информацию.</p><p> <meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую"> </p><p>Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:</p><p> <meta name="description" lang="ru" content="Описание содержимого страницы"> <meta name="description" lang="en" content="Description"> <meta name="keywords" lang="ru" content="Ключевые слова через запятую"> <meta name="keywords" lang="en" content="Keywords"> </p><p>С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:</p> <p> <meta name="robots" content="index, follow"> </p><p> <meta name="robots" content="index, nofollow"> </p><p> <meta name="robots" content="noindex, nofollow"> </p><p>Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:</p><p> <meta content="30"> </p><p>Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:</p><p> <meta content="0; url=http://yandex.ru/"&gt </p><table class="t3"> Таблица 2. Атрибуты тега <meta> <tbody><tr><th style="width: 20%;">Атрибут </th> <th></th> </tr><tr><td> charset </td> <td>Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8"> </td> </tr><tr><td> content </td> <td>Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. </td> </tr><tr><td> http-equiv </td> <td>Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:<br> default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link> , который ссылается на таблицу стилей CSS, или идентификатор элемента <style> , содержащего таблицу стилей.<br> refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br> Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br> <meta content="30"> <br> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br> <meta content="0; url=http://mail.ru/"> </td> </tr><tr><td> name </td> <td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br> application-name указывает название веб-приложения, используемого на странице.<br> author указывает имя автора документа в свободном формате.<br> description определяет краткое описание к содержимому страницы, например:<br> <meta name="description" content="Описание содержимого страницы"> <br> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br> <meta name="generator" content="WordPress 4.0"> .<br> keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br> <meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. </i> </td> </tr></tbody></table><h4>1.2.3. Элемент <style></h4> <p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p> <p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p> <style type="text/css"> .paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; } </p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p> <div class="paper"> ... </div> </p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p> <h4>1.2.4. Элемент <link></h4> <p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p> <p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через директиву @import url</p><p> <!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> <meta> <title> </title> </head> </p><p>باستخدام العنصر <link>. لا يتطلب العنصر علامة إغلاق. يحدد هذا العنصر العلاقة بين الصفحة الحالية والمستندات الأخرى. يمكن أن يكون هناك العديد من هذه العناصر على الصفحة. سيبدو الإدخال كما يلي:</p><p> <link rel="stylesheet" href="style.css" type="text/css"> </p><table class="t3">الجدول 4. سمات العلامات <link> <tbody><tr><th style="width: 20%;">يصف</th> <th>الوصف والقيمة المقبولة</th> </tr><tr><td>كروسوريجين</td> <td>يحدد ما إذا كان يجب استخدام CORS (تقنية متصفح تسمح لصفحة ويب بالوصول إلى الموارد من مجال مختلف) عند جلب صورة من موقع ما. <br>مجهول - في طلب عبر المجال ، يضيف المتصفح تلقائيًا عنوان Origin الذي يحتوي على اسم المجال الذي تم تقديم الطلب منه. إذا لم يستجب الخادم برأس CORS Access-Control-Allow-Origin: * (أو اسم مجال بدلاً من علامة النجمة) ، فسيتم حظر تحميل الصورة. <br>بيانات اعتماد الاستخدام - إذا لم يوفر الخادم بيانات اعتماد مع بيانات اعتماد Access-Control-Allow-Credentials: صحيح ، فسيتم حظر تحميل الصورة.</td> </tr><tr><td>href</td> <td>السمة الرئيسية للعلامة ، القيمة هي المسار إلى الملف ذي الأنماط.</td> </tr><tr><td>hreflang</td> <td>يحدد لغة النص في المستند المرتبط.</td> </tr><tr><td>وسائل الإعلام</td> <td>يحدد نوع الجهاز الذي سيتم تطبيق مورد الارتباط عليه.</td> </tr><tr><td>nonce</td> <td>متغير سلسلة يتم إنشاؤه عشوائيًا بواسطة الخادم والذي يحدد قواعد استخدام الأنماط المضمنة لحماية المحتوى. قيمة السمة هي سلسلة نصية.</td> </tr><tr><td>rel</td> <td>تحدد السمة العلاقة بين المستند الحالي والمستند المشار إليه. <br>بديل - رابط لنفس المستند ولكن بتنسيق مختلف (على سبيل المثال ، الصفحات القابلة للطباعة أو الترجمة أو النسخ المتطابق أو RSS أو موجز Atom) ، <br> <link rel="alternate stylesheet" type="text/css" title="خط صغير" href="small-font.css"> .<br> <link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml"> <br> <link rel="alternate" type="application/atom+xml" title="الإخبارية" href="/atom.xml?type=news"> <br>تشير المحفوظات إلى أن المستند المرتبط له أهمية تاريخية. يمكن أن يشير الارتباط إلى مجموعة من السجلات والمستندات والمواد الأخرى. <br>رابط المؤلف إلى صفحة مؤلف المستند أو إلى الصفحة التي تحتوي على تفاصيل الاتصال بالمؤلف. <br>إشارة مرجعية إشارة إلى أقرب سلف للمقالة وهو الرابط ، أو إلى قسم المقالة الأكثر ارتباطًا بالعنصر في حالة عدم وجود سلف. <br>يستخدم خارجي للإشارة إلى أن الصفحة المرتبطة ليست جزءًا من هذا الموقع. <br>يحدد أولاً ارتباطًا بالمستند الأول في سلسلة من المستندات. <br>رابط المساعدة إلى مستند المساعدة. <br>تحدد أيقونة المسار إلى الرمز الذي سيتم استخدامه للمستند الحالي. <br>يحدد last ارتباطًا بآخر مستند في سلسلة من المستندات. <br>ترخيص ارتباط إلى معلومات حقوق النشر الخاصة بالمستند. <br>يشير التالي إلى أن هذا المستند جزء من سلسلة وأن الارتباط يشير إلى المستند التالي في السلسلة. <br> <link rel="next" href="/next.html" type="text/html" title="الصفحة التالية"> <br>يشير nofollow إلى أن الرابط لم تتم الموافقة عليه من قِبل مؤلف الصفحة ، أو أن الرابط تجاري. <br>يحدد noreferrer أنه لا ينبغي تمرير رأس طلب العميل الذي يحتوي على عنوان url الخاص بمصدر الطلب عند اتباع الرابط. <br>يحدد pingback عنوان خادم pingback ، والذي يسمح للمدونة بإخطار المواقع المرتبطة بها تلقائيًا. <br>يحدد الجلب المسبق أن الملف المشار إليه يجب أن يتم تخزينه مؤقتًا مسبقًا. <br>prev يشير إلى أن هذا المستند جزء من سلسلة وأن الارتباط يشير إلى المستند السابق في السلسلة. <br> <link rel="prev" href="/next.html" type="text/html" title="الصفحة السابقة"> <br>يشير البحث إلى أن المستند المرجعي يحتوي على واجهة بحث ومصادر ذات صلة. <br>يشير الشريط الجانبي إلى أن المستند المرتبط ، إن أمكن ، سيتم عرضه في سياق متصفح إضافي ، وستفتح بعض المتصفحات ، عند النقر فوق الارتباط التشعبي ، نافذة لإضافة الارتباط إلى شريط الإشارات المرجعية. <br>ورقة الأنماط هي مرجع لملف خارجي سيتم استخدامه كورقة أنماط لهذا المستند. <br>تشير العلامة إلى أن العلامة التي يقودها الارتباط التشعبي تنتمي إلى هذا المستند. <br>يشير up إلى أن الصفحة جزء من هيكل هرمي ، وأن الارتباط التشعبي يؤدي إلى مورد مستوى أعلى في الهيكل.</td> </tr><tr><td>الأحجام</td> <td>يحدد حجم الرموز للعرض المرئي. تُستخدم سمة الأحجام جنبًا إلى جنب مع rel = "icon" ، ويمكن أن تأخذ القيم التالية: <br>عرض الارتفاع - يحدد قائمة الأحجام مفصولة بمسافات ، يجب أن يكون كل حجم بالتنسيق - ارتفاع العرض (يتم تحديد أحجام الرموز بالبكسل) ، على سبيل المثال: <br> <link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png"> ;<br>أي - يمكن تحجيم الرمز إلى أي حجم.</td> </tr><tr><td>لقب</td> <td>يحدد عنوان الارتباط أو اسم مجموعة أوراق الأنماط البديلة. قيمة السمة نص.</td> </tr><tr><td>اكتب</td> <td>يحدد نوع MIME للمستند المرتبط به. في هذه الحالة ، يأخذ القيمة "text / css".</td> </tr></tbody></table><h4>1.2.5. جزء<script></h4> <table class="t3"> Таблица 5. Атрибуты тега <script> <tbody><tr><th style="width: 20%;">Атрибут </th> <th>Описание, принимаемое значение </th> </tr><tr><td> async </td> <td>Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). </td> </tr><tr><td> charset </td> <td>Определяет кодировку символов </td> </tr><tr><td> crossorigin </td> <td>Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).<br> anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.<br> use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. </td> </tr><tr><td> defer </td> <td>Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. </td> </tr><tr><td> nonce </td> <td>Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. </td> </tr><tr><td> src </td> <td>Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. </td> </tr><tr><td> type </td> <td>Используются для объявления языка сценария, использованного при составлении содержимого тега. </td> </tr></tbody></table><h3>1.3. Элемент <body></h3> <p>В этом разделе располагается все содержимое документа. Для элемента доступны .</p> <table class="t3"> Таблица 5. Атрибуты тега <body> <tbody><tr><th style="width: 20%;">Атрибут </th> <th>Описание, принимаемое значение </th> </tr><tr><td> onafterprint </td> <td>Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. </td> </tr><tr><td> onbeforeprint </td> <td>Событие, срабатывающее перед отправкой страницы на печать. </td> </tr><tr><td> onbeforeunload </td> <td>Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. </td> </tr><tr><td> onhashchange </td> <td>Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . </td> </tr><tr><td> onmessage </td> <td>Событие происходит, когда сообщение получено через источник события. </td> </tr><tr><td> onoffline </td> <td>Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. </td> </tr><tr><td> ononline </td> <td>Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. </td> </tr><tr><td> onpagehide </td> <td>Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. </td> </tr><tr><td> onpageshow </td> <td>Событие происходит, когда пользователь переходит на веб-страницу, после события onload. </td> </tr><tr><td> onunload </td> <td>Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. </td> </tr></tbody></table> <p>Мир танков (<b>World of Tanks, WOT </b>) - культовая игра, пришедшая на смену знаменитым MORTAL KOMBAT и Контре. Первоначально проигнорировав игрушку, я зарегистрировался. Игра интересная, динамичная, превзошла ожидания. Мануалов и гайд-ов по игре предостаточно, видео – еще больше. Сервис YouTube забит геймплеями красивых боев знатных танкистов.</p> <p>[англ. guide – ориентир, путеводитель, руководство]</p> <p><b>WOT </b> требовательна к качеству Интернет-соединения и состоянию компьютерного железа. Даже на приличном компе без регулярного обновления драйверов играть сложно. Танки прыгают и дергаются. Отрисовка силуэта танка и картинки боя нечеткая, целиться невозможно. Четыре раза переставлял винду и дрова видеокарты, нашел подходящий вариант.</p> <p>Обрыв/Снижение скорости/ сетевого соединения в игре – катастрофа. Лишнего интернет-софта на компе – не держать. Обновляясь, он предательски жрет танковый трафик в самый неподходящий боевой момент.</p> <p><b>Учебный полигон </b> и <b>Курс молодого бойца </b> прошел. Получил призовой капитал в виде игрового золота и кредитов. Тут правильно.</p> <p>Ломанулся в бой, за славными победами, наивно полагаясь на удачу и везение. Первая ошибка! World of Tanks – игра неторопливая, победа любит хладнокровных, а удача – расчетливых.</p> <p>Танков накупил, числом сорок семь. Вторая ошибка! Технику покупал беспонтово, много. Играть, реально – нечем.</p> <p>Начал покупать дорогие снаряды и снаряжение. Третья ошибка! Дорогие снаряды и снаряжение преимущество в бою дают минимальное, а игровая валюта – тает на глазах. Деньги нужно экономить.</p> <p>Покупая технику экипажи демобилизовал. Четвертая ошибка! На первом уровне 100% экипажи, их нужно беречь. Качать экипаж – нудное занятие, но с прокачанным экипажем танк играет намного лучше.</p> <p>Без тщательного анализа – играть невозможно.</p> <p>Спустя год после регистрации вернулся на первый уровень, для сортировки техники и подбора оптимального ангара. Танки не равноценны по стилю боя. Стиль боя – индивидуален у каждого игрока. Технические характеристики танка подсвечивают перед покупкой и после. Характеристики машины (ТТХ) – условность. Подобрать танк без личного боя – нереальное занятие. Вывод – играть по очереди, продавая неподходящие машины и оставляя в ангаре любимые танки. Благо, сорок семь слотов позволяют. Качать танки в сорок семь слотов – долгое дело. Не тороплюсь! Бой без царя в голове – не мое.</p> <p>Возвращение на первый уровень удивило, после регистрации аккаунта <b>World of Tanks </b> для жены. Наблюдая за ее игрой, увидел разницу. В свежеиспеченном аккаунте жены (новичка), на первом уровне действительно ползают «раки». Подсказываю жене (новичку) боевые приемы, бой выигрываю и орденов зарабатываю немеряно. Иное дело, родной аккаунт (12000 боев). Здесь, на первом уровне такие лихие ребята рубятся! Видимо, Великий Белорусский Рандом (<b>ВБР </b>) подбирая взвод для боя, учитывает опыт игрока, его игровой рейтинг. Не путать с оленемером. Рейтинг игрока для подбора игрового взвода в ВБР несколько иной и не всем он известен. В отличие от оленемера, доступного для публичного просмотра. Взводы противников в ВБР комплектуются по принципу мирового равенства. Взвод игроков с нашивками и в клане, на первом уровне никогда не будет играть с «раками» (новичками).</p> <p>Возвращение на первый уровень возымело интересный результат. Комплектуя и оптимизируя танковый ангар, начал изучать карту. Результативно играть без знания карты невозможно. Ныкаясь в складках местности, понял смысл игры ПТ-САУ и арт-САУ.</p> <p>С новым азартом погрузился в любимую игру. Взял за правило играть не более десяти боев в день. <b>World of Tanks </b> реально затягивает. Выйду на новый уровень – поделюсь впечатлениями. Ясно одно – игра серьезная и требует серьезного отношения. Ломиться быком, ярённым на пушки противника – не покатит. Не согласен, что в <b>WoT </b> каждый за себя, это коллективная игра.</p> <p>P.S. Записная книжка себе любимому.<br>На лавры супер-танкиста не претендую.</p> <p>Статья не совсем актуальна </span><br>В 10.2 и выше, добавлена возможность для переименования страницы с правилами сайта прямо в админпанели движка, при непосредственном редактировании текста правил. Тем не менее, страница с правилами сайта в осталась. Она существует и находится на любом сайте DLE по адресу http://мой_сайт/rules.html<br>Как выжать из этого адреса все соки – читаем дальше</p> <h4> Страница с правилами сайта в CMS DLE</h4> <p>Страница с правилами сайта в – это системная статическая страница. Она обрабатываются движком и генерируется точно также, как и обычная стат.страница. Только удалить её невозможно – не предусмотрено разработчиком движка. Даже, если сами правила сайта выключены для показа при регистрации, то – страница с правилами сайта всегда доступна по адресу http://мой_сайт/rules.html Первый-же поисковик, который там её найдёт – начнёт блевать и плеваться на текст и название. Оно и не мудрено. Ведь на всех сайтах DLE – одно и тоже.</p> <p>Когда страница с правилами сайта попадает в карту сайта, то она расценивается поисковиком как «мусорная» и не берётся в поисковый индекс, поскольку правила сайта, практически везде – одинаковы. Поэтому, страница с правилами сайта в DLE, по-умолчанию – запрещена (закрыта) от поисковой индексации в файле (<i>строка Disallow: /rules.html </i>).</p> <h4> Уникальность «Правил сайта»</h4> <p>Лично моё мнение, про страницу с правилами сайта и про её уникальность – это атавизм, отвлекающий внимание пользователя во время регистрации. Правила сайта – это рудиментарный отросток, ненужность которого с успехом доказали организаторы социальных сетей.</p> <p>Нет, ну кто-то видел на фейсбуке или в твиттере какие-нибудь грозные или особые правила при регистрации? Или, может быть – на Вконтакте и в Одноклассниках они есть? То-то-же!</p> <p><i>А какой-то сайтец, с посещалкой в 1000 уников –<br>начинает писать свои уникальные правила для юзеров.<br>Как на меня, так лучшие правила на сайте – это полное их отсутствие.<br>Если пользователь нормальный и адекватный, он и так всё понимает. </i></p> <h4> Нет страницы – нет проблем</h4> <p>Ни для кого не секрет, что блокировка страниц и каталогов от поисковой индексации – не панацея. Так или иначе, любая страница сайта рано или поздно будет «пережёвана» поисковиком. Например, взять тот-же Яндекс. Его поисковые роботы выкачают из сайта абсолютно всё, что только найдут и лишь потом – начнут сортировать и думать – выдавать страницы в поиск или нет. Это, совершенно очевидно, несмотря на умилительные заверения Яндекса, что он и его роботы лишнего материала из сайта не качают. Мол, если веб-страница закрыта от индексации, то Яндекс сохраняет только её адрес с пометкой <i>, или </i> (кто как закроет).</p> <p>Чем ныкаться и блокировать «мусорную» страницу с правилами сайта от поисковой индексации, гораздо лучше переделать её под какую-либо другую полезную вещь и открыть к ней доступ поисковикам – пусть успокоятся. Или, хотя бы просто написать свои поведения на сайте и, опять-же таки – допустить к странице поисковиков.</p> <h4> Открываем правила сайта для поисковиков</h4> <p>Делаем смелый шаг и открываем поисковикам доступ к странице с правилами сайта. Для этого, в своём файле находим строку Disallow: /rules.html и удаляем её нафик. Дело сделано! Теперь, любой поисковый робот сможет официально залезть в открытые «Правила сайта» и конечно-же – сказать «Фe-e!» и «Бe-e!». Чтобы этого не произошло, переделываем страницу «Правила сайта» – вставляем свой уникальный текст на любую тему, картинки и меняем наименование (тайтл) страницы.</p> <h4> Редактирование страницы «Правила на сайте»</h4> <p>Редактирование страницы с правилами сайта доступно в админпанели движка DLE, в разделе «Список всех разделов» – «Правила на сайте». Редактирование страницы «Правила на сайте» выполняется, как для любой другой статической страницы – в штатном режиме работы визуального текстового редактора. Здесь проблемы могут быть только с написанием уникального текста да подбором уникальных картинок. Чуть выше, есть специальное окошко для введения заголовка (тайтла) для обновляемой страницы. Но, такое новшество появилось в , начиная с версии 10.2.</p> <p><i>Чтобы переименовать страницу с правилами сайта<br>в более древних моделях движка –<br>нужно будет покопаться в его системных файлах. </i></p> <h4> Переименование страницы «Правила на сайте»<br>(для CMS DLE 10.1 и ниже)</h4> <p>Непосредственно переименование самой страницы «Правила на сайте» производится в файле adminpanel.lng, который находится в папке language/Russian/adminpanel.lng. Файл adminpanel.lng – это системный файл движка DLE. Для его редактирования, заходим на свой сервер (иначе – никак).</p> <p>Открываем файл adminpanel.lng.<br>Ищем строку<br><b> "rules_edit" => "Общие правила на сайте" </b><br>Меняем слова «Общие правила на сайте» на своё новое название. Закрываем. Сохраняем. (Менять можно только кириллицу, которая находится между кавычек. Иначе, вообще перестанет работать.)</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </div> </div> </div> <div class='yuzo_related_post style-1' data-version='5.12.50'> <div class='yuzo_clearfixed yuzo__title'> <h3>ماذا تقرأ</h3> </div> <div class='yuzo_wraps'> <div class="relatedthumb relatedpost-7815 " style="width:258.75px;float:left;overflow:hidden;"> <a href="https://floritus.ru/ar/persony/kak-gramotno-napisat-otkaz-ot-raboty-kak-otkazat-rabotodatelyu-posle-sobesedovaniya-isskustvo-otka/"> <div class="yuzo-img-wrap " style="/*width: 258.75px;height:180px;*/"> <div class="yuzo-img" style="background:url('/uploads/f0571271b585f94eadc4efa4551c5dda.jpg') 50% 50% no-repeat;width: 258.75px;;max-width:100%;height:180px;margin-bottom: 5px;background-size: cover; "></div> </div> <span class="yuzo__text--title" style="font-size:20px;">كيف ترفض صاحب العمل بعد المقابلة؟</span> <span class="yuzo_text" style="font-size:16px;">يحدث هذا في الحياة: لقد أرسلت سيرة ذاتية ، واجتازت مقابلة ، وحصلت على وظيفة و ... غيرت رأيك. وجدت مكانا ...</span> </a> </div> <div class="relatedthumb relatedpost-7814 " style="width:258.75px;float:left;overflow:hidden;"> <a href="https://floritus.ru/ar/lajjfstajjl/poryadok-polucheniya-otgula-na-rabote-kak-vzyat-otgul-za-svoi-schet/"> <div class="yuzo-img-wrap " style="/*width: 258.75px;height:180px;*/"> <div class="yuzo-img" style="background:url('/uploads/cbca23e3cd1132a00ccce732a28adaf9.jpg') 50% 50% no-repeat;width: 258.75px;;max-width:100%;height:180px;margin-bottom: 5px;background-size: cover; "></div> </div> <span class="yuzo__text--title" style="font-size:20px;">كيف تأخذ يوم عطلة على نفقتك الخاصة حتى لا يرفض صاحب العمل - تسجيل يوم عطلة وفقًا للقانون ، عينة من المستندات</span> <span class="yuzo_text" style="font-size:16px;">المنظمات المختلفة لها تفسيرات مختلفة لمفهوم "الإجازة". ولكن ، إذا كان المحاسب يعمل في محاسبة الموظفين ، فعندئذ ...</span> </a> </div> <div class="relatedthumb relatedpost-7812 " style="width:258.75px;float:left;overflow:hidden;"> <a href="https://floritus.ru/ar/brendy/chto-nuzhno-dlya-otkrytiya-myasnogo-biznesa-kak-otkryt-myasnoi/"> <div class="yuzo-img-wrap " style="/*width: 258.75px;height:180px;*/"> <div class="yuzo-img" style="background:url('/uploads/506b27da67ebfd8ed51935f6018b978a.jpg') 50% 50% no-repeat;width: 258.75px;;max-width:100%;height:180px;margin-bottom: 5px;background-size: cover; "></div> </div> <span class="yuzo__text--title" style="font-size:20px;">كيفية فتح محل جزارة</span> <span class="yuzo_text" style="font-size:16px;">ميزات بيع المنتجات المنتجة والمعالجة في المزارع الخاصة لمواطني الاتحاد الروسي ...</span> </a> </div> </div> </div> <style> .yuzo_related_post img { width: 258.75px !important; height: 180px !important; } .yuzo_related_post .relatedthumb { line-height: 22px; background: #ffffff !important; color: #494c43!important; } .yuzo_related_post .relatedthumb:hover { background: #ffffff !important; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; ; color: #000000!important; } .yuzo_related_post .relatedthumb a { color: #494c43!important; } .yuzo_related_post .relatedthumb a:hover { color: #dd3333 } !important; } .yuzo_related_post .relatedthumb:hover a { color: #dd3333!important; } .yuzo_related_post .relatedthumb:hover .yuzo__text--title { color: #dd3333!important; } .yuzo_related_post .yuzo_text, .yuzo_related_post .yuzo_views_post { color: #494c43!important; } .yuzo_related_post .relatedthumb:hover .yuzo_text, .yuzo_related_post:hover .yuzo_views_post { color: #000000!important; } .yuzo_related_post .relatedthumb { margin: 5px 0px 0px 0px; padding: 5px 5px 5px 5px; } .yuzo_related_post .relatedthumb .yuzo-img { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .yuzo_related_post .relatedthumb .yuzo-img-wrap { overflow: hidden; background: url(/wp-content/plugins/yuzo-related-post/assets/images/link-overlay.png) no-repeat center; } .yuzo_related_post .relatedthumb:hover .yuzo-img { opacity: 0.7; -webkit-transform: scale(1.2); transform: scale(1.2); } </style> <script> jQuery(document).ready(function($) { jQuery('.yuzo_related_post .yuzo_wraps').equalizer({ columns: '> div' }); }); </script> <div class="wpb_row vc_row-fluid ish-row-notfull ish-row_notsection"> <div class="ish-vc_row_inner"> <div class="share_box share_box_fixed"> <script type="text/javascript"> (function() { if (window.pluso) if (typeof window.pluso.start == "function") return; if (window.ifpluso == undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(); </script> <div class="pluso" data-background="transparent" data-options="big,square,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir"></div> </div> </div> </div> <div class="wpb_row vc_row-fluid ish-row-notfull ish-row_notsection"> <div class="ish-vc_row_inner"> <div class="wpb_row vc_row-fluid ish-row-notfull ish-row_notsection"> </div> </div> </div> </div> <div class="ish-grid3 ish-main-sidebar ish-right-sidebar" id="sidebar"> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> <div id="search-2" class="ish-grid3 widget-1 widget widget_search"> <form role="search" method="get" id="searchform" action="/"> <div> <label class="screen-reader-text" for="s">بحث عن:</label> <input type="text" value="" name="s" id="s" placeholder="بحث..."> <input type="submit" id="searchsubmit" value=""> </div> </form> </div> </div> </div> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> <div id="recent-posts-3" class="ish-grid3 widget-2 widget widget_recent_entries"> <h4 class="widget-title">الملاحظات الأخيرة</h4> <ul> <li> <a href="https://floritus.ru/ar/biznes/kak-ponravitsya-rabotodatelyu-na-sobesedovanii-muzhchine-bezuprechnoe/">سلوك لا تشوبه شائبة في المقابلة ، أو كيفية إرضاء صاحب العمل من الدقائق الأولى</a> </li> <li> <a href="https://floritus.ru/ar/marketing/rabota-v-policii-so-srednim-specialnym-obrazovaniem-rabota/">العمل في الشرطة الروسية: كيف تحصل على وظيفة وماذا تحتاج لذلك</a> </li> <li> <a href="https://floritus.ru/ar/tehnologii/kakoi-biznes-mozhno-nachat-so-100000-rublei-biznes-bez-krupnyh/">عمل بدون استثمارات كبيرة</a> </li> <li> <a href="https://floritus.ru/ar/knigi/ordernyi-konosament-vidy-konosamentov-chto-takoe-konosament/">طلب بوليصة الشحن. أنواع بوالص الشحن. ما هي بوليصة الشحن</a> </li> <li> <a href="https://floritus.ru/ar/persony/v-chem-zaklyuchaetsya-rabochii-vopros-konspekt-uroka-na-temu-rabochii/">ملخص درس حول موضوع "قضية العمل في روسيا</a> </li> </ul> </div> </div> </div> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> <div id="tag_cloud-2" class="ish-grid3 widget-3 widget widget_tag_cloud"> <h4 class="widget-title">فئات</h4> <div class="tagcloud"> <a href='https://floritus.ru/ar/category/e-commerce/' class='tag-link-12' title='التجارة الإلكترونية' style='font-size: 8pt;'>التجارة الإلكترونية</a> <a href='https://floritus.ru/ar/category/biznes/' class='tag-link-12' title='اعمال' style='font-size: 8pt;'>اعمال</a> <a href='https://floritus.ru/ar/category/brendy/' class='tag-link-12' title='العلامات التجارية' style='font-size: 8pt;'>العلامات التجارية</a> <a href='https://floritus.ru/ar/category/istoriya/' class='tag-link-12' title='تاريخ' style='font-size: 8pt;'>تاريخ</a> <a href='https://floritus.ru/ar/category/knigi/' class='tag-link-12' title='كتب' style='font-size: 8pt;'>كتب</a> <a href='https://floritus.ru/ar/category/lajjfstajjl/' class='tag-link-12' title='أسلوب الحياة' style='font-size: 8pt;'>أسلوب الحياة</a> <a href='https://floritus.ru/ar/category/magaziny/' class='tag-link-12' title='المحلات' style='font-size: 8pt;'>المحلات</a> <a href='https://floritus.ru/ar/category/marketing/' class='tag-link-12' title='تسويق' style='font-size: 8pt;'>تسويق</a> <a href='https://floritus.ru/ar/category/personal/' class='tag-link-12' title='طاقم عمل' style='font-size: 8pt;'>طاقم عمل</a> <a href='https://floritus.ru/ar/category/persony/' class='tag-link-12' title='الأشخاص' style='font-size: 8pt;'>الأشخاص</a> <a href='https://floritus.ru/ar/category/pravo/' class='tag-link-12' title='حق' style='font-size: 8pt;'>حق</a> <a href='https://floritus.ru/ar/category/reklama/' class='tag-link-12' title='دعاية' style='font-size: 8pt;'>دعاية</a> <a href='https://floritus.ru/ar/category/tehnologii/' class='tag-link-12' title='تقنية' style='font-size: 8pt;'>تقنية</a> <a href='https://floritus.ru/ar/category/finansy/' class='tag-link-12' title='تمويل' style='font-size: 8pt;'>تمويل</a> <a href='https://floritus.ru/ar/category/shopping/' class='tag-link-12' title='التسوق' style='font-size: 8pt;'>التسوق</a> <a href='https://floritus.ru/ar/category/ekonomika/' class='tag-link-12' title='اقتصاد' style='font-size: 8pt;'>اقتصاد</a> </div> </div> <div class="space"></div> </div> </div> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> <div id="tag_cloud-2" class="ish-grid3 widget-3 widget widget_tag_cloud"> </div> <div class="space"></div> </div> </div> </div> </div> </div> </section> <section class="ish-part_footer" id="ish-part_footer"> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> <div id="text-2" class="ish-grid6 widget-1 widget widget_text"> <div class="textwidget"><p><img src="/images/logo.svg?1" loading=lazy loading=lazy></p> <p>floritus.ru - الأعمال. تسويق. طاقم عمل. تمويل</p> <p></p> </div> </div><div id="ishyoboy-recent-portfolio-widget-3" class="icon-clock ish-grid3 widget-3 widget widget_ishyoboy-recent-portfolio-widget"> </div> </div> </div> </section> <section class="ish-part_legals"> <div class="ish-row ish-row-notfull"> <div class="ish-row_inner"> </div> </div> </section> </div> <a href="#top" class="ish-back_to_top ish-smooth_scroll ish-icon-up-open"></a> </div> <!--[if lte IE 8]><script src="https://floritus.ru/wp-content/themes/boldial/assets/frontend/js/ie8.js"></script><![endif]--> <style scoped>.yuzo_related_post{ } .yuzo_related_post .relatedthumb{ }</style><script type='text/javascript' src='https://floritus.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.11'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.3.14'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.2'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/ishyoboy-boldial-assets/ishyoboy-shortcodes/assets/frontend/js/ishyoboy-shortcodes.js?ver=1.0'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/ishyoboy-boldial-assets/ishyoboy-widgets/assets/frontend/js/widgets.js?ver=4.3.14'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/yuzo-related-post/assets/js/yuzo-postviews-cache.js?ver=5.12.50'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/plugins/yuzo-related-post/assets/js/jquery.equalizer.js?ver=5.12.50'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/themes/boldial/assets/frontend/js/vendor/jquery.smoothscroll.min.js'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/themes/boldial/assets/frontend/js/vendor/jquery.fancybox.pack.js'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/themes/boldial/assets/frontend/js/vendor/ish_jquery.tooltipster.min.js'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/themes/boldial/assets/frontend/js/main.js'></script> <script type='text/javascript' src='https://floritus.ru/wp-content/themes/boldial/wpbakery/js_composer/assets/js/js_composer_front.js?ver=4.5.3'></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>