هيكل وثيقة HTML هو العلامات الرئيسية. تصحيح بنية مستند HTML ورمز الصفحة

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

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

يبدو مخيفًا وسهل البرمجة

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 صفحتي

  • علامات لغة ترميز النص التشعبي الأساسية
  • العلامات الجديدة التي جاءت مع HTML 5
  • مثال على هيكلة الصفحة

المادة 1

وهنا نص المقال الأول.

المادة 2

وهنا نص المقال الثاني.

مؤلف هذه المقالة بلوق

صفحتي

إنشاء هيكل الموقع باستخدام HTML

  • علامات لغة ترميز النص التشعبي الأساسية
  • العلامات الجديدة التي جاءت مع HTML 5
  • مثال على هيكلة الصفحة
    •
    • علامات لغة ترميز النص التشعبي الأساسية
    • العلامات الجديدة التي جاءت مع HTML 5
    • مثال على هيكلة الصفحة

    المادة 1

    وهنا نص المقال الأول.

    المادة 2

    وهنا نص المقال الثاني.

    مؤلف هذه المقالة بلوق


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

    لنبدأ استخلاص المعلومات من السطر الأول.

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

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

    منطقيا، أستطيع أن أفترض أن السؤال الذي نشأ على الفور في رأسك: "ما نوع التعليمات البرمجية غير المفهومة الموجودة في هذا الجزء من البرنامج؟" لا يبدو مثل HTML على الإطلاق! والجواب هو: ليس HTML هو الذي يُكتب في علامة النمط، بل كود CSS. كما ذكرنا سابقًا، فهذه أداة لتنسيق مظهر مواقع الويب.

    شعبةيشير إلى علامات كتلة اللغة الترميزية. يتم استخدامه لعزل أجزاء معينة لغرض تعديلها الإضافي.

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

    وبالتالي فإن الكود يحتوي على:

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

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

      و
    • . في كتلة تحتوي على محتوى فئة النمط - علامات العناوين

      والفقرة

      الآن دعونا نلقي نظرة فاحصة على الكتلة

      .

      HTML أو لا يزال HTML 5؟ كيفية التعرف؟

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

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

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

    • .

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

      أدوات لإنشاء موارد الويب

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

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

      ما هو HTML؟

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

      لاحظ أن HTML هي لغة ترميزية وليست لغة برمجة. لا تحتوي هذه اللغة على أي وظائف منطقية ومن المستحيل إجراء أي حسابات رياضية فيها. صفحات HTML لها امتداد .لغة البرمجةأو .htmوتتم معالجتها بواسطة المتصفحات - IE وMozilla Firefox وGoogle Chrome وYandex Chrome وOpera وما إلى ذلك.

      الآن دعونا نتعرف على كيف يفهم المتصفح ماذا وكيف يتم عرضه على صفحة الويب؟ انه بسيط جدا. تحتوي لغة ترميز النص التشعبي HTML على أوامر مضمنة تسمى العلامات. ومن خلالهم يتم توجيه المتصفح.

      هيكل مستند HTML

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

      هيكل مستند HTML ...

      دعونا نلقي نظرة على ما تم تضمينه في هذا الهيكل بالترتيب:

      1. أول ما يتم إدخاله في مستند HTML هو الإشارة إلى الإصدار (السطر الأول). للتشغيل الصحيح، يجب تحديد هذا الخط عند تخطيط صفحة الويب.

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

      4. العلامة الوصفية "الوصف" - ملخص للصفحة، مخصص لمحركات البحث. هذه العلامة مهمة لتحسين محرك البحث ويجب ملؤها.

      5. العلامة الوصفية "الكلمات الرئيسية" - الكلمات الرئيسية التي قد تظهر على الصفحة. هذه العلامة مخصصة أيضًا لمحركات البحث. نادرا ما تستخدم هذه العلامة في الوقت الحاضر.

      6. يتم فتح نص الصفحة بعلامة ويغلق، وفقا لذلك، مع العلامة

      . عادةً ما يحتوي نص صفحة الويب على المحتوى الرئيسي - النص والفيديو والصوت والمعلومات الأخرى.

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

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

      في هذه المقالة سنقوم بإنشاء صفحة HTML تدريجيًا ونزينها بعلامات HTML5 الدلالية.

      الشكل - البنية الدلالية لصفحة HTML5.

      DOCTYPE والعلامات الوصفية في عنوان الصفحة

      لنبدأ بقالب مستند HTML5 قياسي، ونضيف العلامات الوصفية إلى الرأس:

      عنوان الصفحة

      أضفت علامة وهو المسؤول عن الكلمات الرئيسية. والعلامة وهي المسؤولة عن وصف الصفحة. لتحسين محركات البحث، هذه العلامات مطلوبة. من الضروري أيضًا ملء العلامة بشكل صحيح . يجب أن يكون عنوان الصفحة فريدًا للموقع بأكمله، وأن يحتوي في العنوان على جوهر الصفحة بالكامل التي تم تحديدها لها.</p><p>دعنا نذهب أبعد من ذلك. يقدم HTML5 علامات جديدة تُستخدم لإنشاء علامات دلالية في المستند. هذه هي العلامات الرأسية، والتنقل، والرئيسية، والمقالة، والجانبية، والتذييلية، وما إلى ذلك. من حيث العرض، فهي تعمل بنفس الطريقة العادية. <div>العلامات، أي أنها عناصر كتلة. لكن اذا <div>لا يحتوي على حمل دلالي، فيجب استخدام header وnav وmain وغيرها بشكل مفيد فقط.</p><h3>عنوان الصفحة</h3><p>يتم تنسيق رأس الصفحة في علامة الرأس. يرجى ملاحظة أن عنوان الصفحة مكتوب باستخدام علامة h1.</p><p> <!-- Header страницы --> <header> <h1>عنوان الموقع</h1> </header> </p><p>إذا كان لدينا أيضًا شعار بجوار العنوان، فسنضعه في p أو div أوspan.</p><p> <!-- Header страницы --> <header> <h1>عنوان الموقع</h1> <p>شعار الموقع</p> </header> </p><p><b>ملاحظة حول علامة H1</b></p><p>تجدر الإشارة إلى أنه في HTML5 يتم استخدام علامة H1 للإشارة إلى عنوان الحاوية التي توجد بها (قد يكون هذا رأسًا أو قسمًا أو مقالة وما إلى ذلك)</p><p>قبل ظهور علامات HTML5، كانت الدلالات مختلفة ومختلفة إلى حد ما. لذلك في HTML4 يمكن أن يكون هناك عنوان H1 واحد فقط لكل صفحة! كقاعدة عامة، كان هذا هو عنوان المقالة أو عنوان الصفحة (على سبيل المثال، إذا كانت صفحة فئة يتم فيها عرض عدة مقالات.) تم استخدام H2 للعناوين الفرعية، أو لأقسام المقالة الرئيسية. H3 للأقسام الفرعية وما إلى ذلك.</p><h3>التنقل في الصفحة</h3><p>يجب أن يكون تصميم التنقل الرئيسي للموقع موجودًا في علامة التنقل. يجب أن تتذكر أيضًا أنه يعتبر من الممارسات الجيدة تصميم التنقل باستخدام عناصر القائمة.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>بيت</li> <li>مَلَفّ</li> <li>صالة عرض</li> <li>جهات الاتصال</li> </ul> </nav> </p><h3>المحتوى على الصفحة</h3><p>يتم تنسيق المحتوى الرئيسي للصفحة في العلامة الرئيسية. يمكن أن تكون هذه مقالة واحدة، أو عدة معاينات للمقالات إذا كنا نتحدث عن صفحة مدونة تحتوي على عدة إدخالات. لا يمكنك وضع شريط جانبي أو رأس صفحة أو تذييل أو التنقل الرئيسي في العلامة الرئيسية!</p><p> <!-- Основное содержимое страниц --> <main>...محتوى الصفحة الرئيسية...</main> </p><h3>تصميم المقال</h3><p>يتم استخدام علامة المقالة لالتفاف المقالات. بشكل عام، تحتوي هذه العلامة على كتلة من المحتوى يمكن إخراجها من سياق الصفحة واستخدامها بشكل منفصل في مكان آخر. يمكن أن يكون هذا مقالًا (النص الكامل للمقال أو معاينة)، أو منشورًا في المنتدى، وما إلى ذلك.</p><p>في المثال أدناه، قمت بعرض تصميم المقالة في السياق، داخل العلامة الرئيسية. تحتوي المقالة على كتلة رأس تحمل عنوان المقالة. يتم تحديد تاريخ نشر المقالة بواسطة علامة زمنية خاصة، والتي يتم عرضها كعنصر مضمّن عادي. تحتوي علامة الوقت على سمة خاصة يجب تحديد وقت النشر فيها بتنسيق الجهاز. يمكن أن يكون هذا فقط datetime="2015-09-30" أو بالساعات والدقائق والثواني datetime="2015-09-30T15:25:55" . تشير المعلمة pubdate إلى أنه تم نشر المقالة في نفس وقت كتابتها. إذا كانت هذه أخبار، فمن الممكن أن يكون وقت الأخبار واحدًا، ووقت النشر مختلف، ولهذا تحتاج إلى تحديد علامة الوقت مرتين، ووضع النشر فقط في العلامة التي يُشار فيها إلى وقت النشر.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>عنوان المقال</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 سبتمبر</time> </header> <!-- Подзаголовок страницы --> <h2>العنوان الفرعي للمقالة</h2> <p>لوريم إيبسوم دولور سيت أميت، consectetur adipisicing elit. Nemo quisquam، soluta sunt، aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur يجلس هاروم في الوضع الراهن. Adipisci Beatae eaque unde?</p><p>من المثال أعلاه، يمكنك أن ترى أنه تم استخدام علامات الرأس والتذييل داخل المقالة لتسليط الضوء على عنوان المقالة وتذييلها.</p><h3>الشريط الجانبي أو العمود الذي يحتوي على عناصر واجهة المستخدم</h3><p>لكل عنصر من عناصر الشريط الجانبي على حدة، نستخدم كتلة جانبية. بداخله، يتم تنسيق العنوان بعلامة h1. لذلك قد يبدو عمود الشريط الجانبي كما يلي:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>عنوان الأداة</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>الملاحظات الأخيرة</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>التعليقات الشعبية</h1> ... </aside> </div> </p><h3>علامة القسم</h3><p>يتم استخدام علامة القسم لتمثيل مجموعة أو قسم من المحتوى المرتبط بالموضوع، واستخدامه يشبه المقالة مع الاختلاف الرئيسي وهو أن المحتوى الموجود داخل العنصر يُسمح له بأن لا يكون له أي معنى. <section>خارج سياق الصفحة نفسها. يوصى باستخدام العلامات ( <h1> – <h6>) للإشارة إلى موضوع القسم.</p><p>لإعطاء مثال على المقالة التي تقرأها الآن، يمكنك لف كل فقرة في علامة <section>. على سبيل المثال، يمكن استخدام علامة القسم لتمييز أجزاء من المحتوى على الصفحة المقصودة. يبدو هذا مشابهًا لتعريف عنصر div، والذي يُستخدم غالبًا كحاوية للمحتوى. الفرق هو أن div ليس له معنى دلالي، ولا يقول أي شيء عن المحتوى الموجود بداخله. على العكس من ذلك، يتم استخدام علامة القسم للإشارة بوضوح إلى أن المحتوى الموجود بداخلها مرتبط بالمعنى. يمكنك استبدال بعض علامات div بعلامات القسم، ولكن اسأل نفسك دائمًا السؤال التالي: "هل هذا المحتوى مرتبط أم لا؟"</p><p>مثال على استخدام علامة القسم في قائمة تسرد المدن:</p><p> <h1>حدث وبصرف النظر</h1> <section> <header> <h2>مدن</h2> </header> <p>انضم إلينا في هذه المدن في عام 2010.</p> <section> <header> <h3>سياتل</h3> </header> <p>اتبع الطريق ذو الحجار الصفراء.</p> <section> <header> <h3>بوسطن</h3> </header> <p>هذا Beantown لأصدقائه.</p> <section> <header> <h3>مينيابوليس</h3> </header> <p>أنها كذلك <em>لطيف - جيد</em>.</p> <small>لم يتم توفير السكن.</small> </p><h3>تذييل الموقع - تذييل</h3><p>تم تصميم تذييل الموقع بالعلامة <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 حقوق الطبع والنشر للموقع</p> </footer> </p><h3>خاتمة</h3><p>يمكنك استخدام أداة الخطوط العريضة HTML5 للتحقق من بنية الصفحة. يُظهر بنية الصفحة حسب الكتل والعناوين.</p><p>لا تقتصر الدلالات في HTML5 على العلامات المذكورة أعلاه في المقالة. ولكن باستخدام الأمثلة المذكورة أعلاه، يمكنك تحديث الترميز الخاص بك وجعل موقعك أكثر ملاءمة لمحركات البحث، مما سيؤدي إلى ترتيب أعلى لموقعك في نتائج البحث.</p><p>لمتابعة هذا الموضوع، يمكنك استكشاف علامات HTML5 جديدة أخرى. بالإضافة إلى التنسيقات الدقيقة لتصميم البيانات وتنظيمها، مثل schema.org</p><p><b>ملاحظة مهمة حول استخدام علامات HTML5.</b>لا تحدد المواصفات قواعد صارمة لاستخدام العلامات الدلالية، بل تقدم فقط توصيات لاستخدامها. إذا كنت لا تفهم أو لا تعرف أين وأي علامة HTML5 يجب استخدامها، فمن الأفضل استخدام div حتى لا تلحق الضرر ببنية المستند أو تكسرها.</p><p><b>المقالات والمواد</b></p> <ul><li>1. وثائق HTML هي وثائق هيكلية.</li> <li>2. يمكن كتابة أسماء العناصر بأي حال من الأحوال.</li> <li>3. يمكن كتابة أسماء السمات في أي حال.</li> <li>4. تعتمد قيم السمات على الحالة، وخاصة العناوين (إحدى ميزات أنظمة التشغيل Unix هي التفسير المختلف للأحرف في السجلات المختلفة، وبالتالي فإن الملفات</li> </ul><p>الصورة .gif والصورة.GIF مختلفة!).</p> <ul><li>5. لا يمكن أن تحتوي أسماء العناصر على مسافات.</li> <li>6. إذا كانت قيم السمات تحتوي على مسافات، فيجب أن تكون بين علامات الاقتباس.</li> <li>7. يتم تجاهل المسافات الزائدة وعلامات التبويب وأحرف الإرجاع وضغطها في مسافة واحدة.</li> <li>8. يمكن تداخل العناصر داخل بعضها البعض. في هذه الحالة، يجب مراعاة قاعدة التعشيش. داخل العنصر المتداخل، بالإضافة إلى علامة الفتح، يجب أن يكون هناك أيضًا علامة إغلاق. التقاطعات غير صحيحة:</li> </ul><h1>هيكل مستند HTML</h1> <p>9. يتم تجاهل العناصر والسمات غير المألوفة بواسطة المتصفحات ("التسامح مع الخطأ").</p> <p>تحتوي معظم المستندات على عناصر قياسية مثل العنوان أو الفقرات أو القوائم. باستخدام علامات HTML، يمكنك تسمية هذه العناصر، مما يوفر لمتصفحات الويب الحد الأدنى من المعلومات لعرض هذه العناصر، مع الحفاظ بشكل عام على البنية العامة واكتمال المعلومات للمستندات. كل ما هو مطلوب لقراءة مستند HTML هو متصفح ويب، الذي يفسر علامات HTML ويعرض المستند على النحو الذي أراده المؤلف.</p> <p>عندما يتلقى متصفح الويب مستندًا، فإنه يحدد كيفية تفسير المستند. يجب أن تكون العلامة الأولى التي تظهر في المستند هي العلامة <HTML>. تخبر هذه العلامة متصفح الويب أن المستند مكتوب باستخدام HTML.</p> <p><b>التعليقات في HTML.</b>مثل أي لغة، تسمح لك لغة HTML بإدراج التعليقات في نص المستند، والتي يتم حفظها عند نقل المستند عبر الشبكة، ولكن لا يتم عرضها بواسطة المتصفح. في كثير من الأحيان، يتم "إخفاء" علامات معينة أو هياكل نحوية كاملة في التعليقات من الإصدارات القديمة من المتصفحات التي لا تستطيع معالجتها. يمكن أن تظهر التعليقات في أي مكان في المستند وبأي كمية. يجب أن نتذكر أن التعليقات تزيد من حجم المستند، وبالتالي وقت التحميل.</p> <p><b>جزء الرأس العام للمستند.</b>يجب استخدام علامة رأس المستند مباشرة بعد العلامة <HTML>وليس في أي مكان آخر في نص الوثيقة. تمثل هذه العلامة وصفًا عامًا للمستند. علامة البداية <HEAD>وضعت مباشرة قبل العلامة <TITLE>والعلامات الأخرى التي تصف المستند، وعلامة النهاية</head>يتم وضعها مباشرة بعد انتهاء وصف الوثيقة.</p> <p><b>عنوان الوثيقة.</b>تعرض معظم متصفحات الويب محتويات العلامة <TITLE>في عنوان النافذة التي تحتوي على المستند، وفي ملف الإشارات المرجعية، إذا كان متصفح الويب يدعمها. العنوان محدود بالعلامات <TITLE>و، توضع داخل العلامات . لا يظهر عنوان المستند عندما يتم عرض المستند نفسه في النافذة.

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

      نص الوثيقة.يجب أن يكون نص المستند بين العلامات و. هذا هو جزء المستند الذي يتم عرضه كمعلومات نصية ورسومية (دلالية) لمستندك.

      مستويات العناوين<Нх>. يتم تحديد المستوى الأول من العناوين (الأكبر) بالرقم 1، والمستوى التالي بالرقم 2، وهكذا حتى الرقم 6. تدعم معظم المتصفحات تفسير ستة مستويات من العناوين، مع تحديد كل منها بأسلوبه الخاص. في معظم الحالات، يصبح نص هذا الرأس غامقًا، وسيكون هناك سطر فارغ بعد النص. من المهم أن تحدد هذه العلامات البنية المنطقية للمستند وتشارك في الفهرسة بواسطة محركات البحث على الإنترنت. الرؤوس الأعلى من المستوى السادس ليست قياسية وقد لا يدعمها المتصفح.

      علامة الفقرة<Р>. فيعلى عكس معظم معالجات النصوص، يتم تجاهل أحرف الإرجاع في مستند HTML. يقوم المتصفح بتقسيم الفقرات فقط في حالة وجود علامة<Р>. إذا لم تقم بفصل الفقرات بعلامة<Р>، فإن المستند سيبدو كفقرة واحدة كبيرة.

      علامة نصية منسقة مسبقًا 

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

      قائمة العلامات.هناك ثلاثة أنواع رئيسية من القوائم في مستند HTML: القائمة المرقمة، والتعداد النقطي، وقائمة الوصف.
      

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

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

       
        وينتهي بالعلامة
       
    • .
      

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

      تبدأ القائمة المرقمة بعلامة البداية 
        وينتهي بالعلامة
      .  يبدأ كل عنصر في القائمة بعلامة<ы>.
      

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

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

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

      

      تحتوي المعلمة المطلوبة على نفس بنية عنوان URL القياسي.  يخبر عنوان URL هذا المتصفح بمكان
      

      رسم.  يجب أن يتم تخزين الرسم بتنسيق رسومي يدعمه المتصفح.  اليوم هي تنسيقات GIF و JPG و PNG.  وهي مدعومة من قبل معظم المتصفحات.
      

      البديل = "نص"
      

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

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

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

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

      بنية الارتباط في مستند HTML.لكي يتمكن المتصفح من عرض رابط لعنوان URL، يجب عليك وضع نص أو صورة داخل علامة الارتباط التشعبي.  بناء جملة HTML كما يلي:
      

      <А HREF="URL">نص أو صورة سيتم تمييزها كرابط
      


      بطاقة شعار<А HREF="URL">يفتح وصف الرابط، والعلامة- يغلقه.  يتم تمييز أي نص يقع بين هاتين العلامتين بطريقة خاصة بواسطة متصفح الويب.  عادةً ما يظهر هذا النص تحته خط ويتم تمييزه.  الصورة مؤطرة بإطار مستطيل.  لا يتم عرض النص الذي يمثل عنوان URL بواسطة المتصفح، ولكن يتم استخدامه فقط لتنفيذ الإجراءات المقصودة عند تنشيط الارتباط (عادةً عن طريق النقر فوق النص المميز أو الذي تحته خط).
      

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

      يجب أن يبدأ كل مستند HTML بالعلامة <
لغة البرمجة>
وتنتهي بالعلامة لغة البرمجة>
.  تشير هذه العلامات إلى أن الأسطر الموجودة بينها تمثل مستند HTML واحدًا.  بالإضافة إلى ذلك، يمكنك أن ترى أن ملف HTML ككل هو عنصر من عناصر لغة HTML.
      بالإضافة إلى ذلك، يجب أن يحتوي مستند HTML على عنصري HEAD (معلومات المستند) وBODY (نص المستند).
      قسم الوثائقرأس
      يحدد قسم HEAD في المستند عنوانه ويحتوي أيضًا على معلومات إضافية حول المستند للمتصفح.  هذا القسم اختياري، ولكن يوصى باستخدامه دائمًا في مستندات HTML الخاصة بك، حيث يمكن أن يكون الرأس المكتوب جيدًا مفيدًا جدًا.
      يبدأ قسم الرأس بالعلامة <
رأس>
ويتبع العلامة على الفور .  بين علامتي الفتح والإغلاق لعنصر HEAD توجد عناصر رأس أخرى.
      عنوان عنوان الوثيقة
      لإعطاء اسم لمستند HTML، العلامة هي <
عنوان>
.  سيتم عرض هذا الاسم في عنوان نافذة المتصفح.  العنوان مكتوب بين العلامات ووهو سطر من النص.  يمكن أن يكون طول هذا السطر موجودًا، ولكن يوصى بألا يزيد عن 60 حرفًا.  يجب أن يظهر عنصر TITLE فقط في قسم HEAD.
      قسم الوثائقجسم
      يحتوي هذا القسم من المستند على المعلومات التي يتم عرضها في نافذة المتصفح.  يجب أن يبدأ قسم الجسم بالعلامة <
جسم>
وتنتهي بالعلامة جسم>
والتي توجد بينها عناصر HTML التي تشكل محتوى المستند.
      مواصفات السلعةجسم
      بطاقة شعار يحتوي على عدد من السمات التي تحدد مظهر المستند.  وفيما يلي مواصفات العلامة .
      النص = "لون النص"
      BGCOLOR = "لون الخلفية"
      BACKGROUND = "عنوان صورة الخلفية"
      تحدد سمة TEXT لون الخط للمستند بأكمله بتنسيق RGB أو تدوين الأحرف.  افتراضيًا (إذا لم يتم تحديد هذه السمة)، يتم استخدام إعدادات المتصفح.
      تحدد السمة BGCOLOR لون الخلفية لنافذة متصفح المستندات بتنسيق RGB أو التدوين الرمزي.  يتم استخدام إعدادات المتصفح بشكل افتراضي.
      تسمح لك سمة BACKGROUND بتحديد عنوان واسم الصورة المستخدمة كخلفية.  سيتم إعادة إنتاج هذا الرسم وتوزيعه في خلفية الوثيقة.
      تحدد سمات LINK، وVLINK، وALINK ألوان الارتباطات التشعبية بتنسيق RGB أو التدوين الرمزي.  يتم استخدام إعدادات المتصفح بشكل افتراضي.  الارتباط التشعبي الذي لم تتم زيارته هو ارتباط تشعبي لم يتم استخدامه بعد للانتقال إلى مستند آخر.  الارتباط التشعبي الذي تمت زيارته هو ارتباط تشعبي تم استخدامه بالفعل للانتقال إلى مستند آخر.  الارتباط التشعبي النشط – ارتباط تشعبي للمستند الذي يتم الانتقال إليه حاليًا.
      نصائح لاستخدام سمات علامة BODY
       إذا قمت بتحديد لون واحد على الأقل في علامة BODY، فقم بتحديد الألوان الأخرى أيضًا.  ويرجع ذلك إلى حقيقة أنه يمكن للمستخدم ضبط إعدادات الألوان في متصفحه بالشكل الذي يناسبه أكثر.  قد يؤدي تحديد لون واحد فقط إلى مزج النص مع لون الخلفية لدى بعض المستخدمين.  ونتيجة لذلك، سيكون من الصعب عرض المستند.
       اختر لون النص بحيث "يتناسب" مع لون الخلفية أو الألوان الرئيسية للصورة.  على سبيل المثال، يمكن أن يسبب اللون الأحمر على اللون الأخضر مشاكل خطيرة لعدد كبير من الأشخاص.
       يمكن تحديد كل من BGCOLOR وBACKGROUND في عنصر BODY.  في هذه الحالة، يعطي المتصفح الأفضلية للخلفية، ولكن إذا تعذر تحميل صورة الخلفية، فسيتم استخدام BGCOLOR.  لذلك، حاول ضبط لون الخلفية ليكون مشابهًا للون صورة الخلفية حتى لا يخل بتوازن ألوان المستند.
      


      

      

    
       
      
    
      قد يكون من المفيد أن تقرأ: