ساختار یک سند 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

    در اینجا متن مقاله دوم است.

    نویسنده این مقاله وبلاگ


    این کد یک صفحه وبلاگ ایجاد می کند که به نوبه خود به یک هدر، یک منو، یک پانل اصلی (طرح بندی) تقسیم می شود که شامل یک پنل محتوا (محتوا) و یک نوار کناری (نوار کناری) و همچنین یک "پانویس" (footer) است. ).

    بیایید توضیحات را از خط اول شروع کنیم.

    یک عنصر زبانی است که وظیفه اصلی آن نشان دادن نوع سند وب است. به این ترتیب، مرورگر تعیین می کند که صفحه باید با چه استانداردی نمایش داده شود، زیرا امروزه چندین نسخه از html وجود دارد.

    با این حال، توجه به واحد زبان جدیدی به نام ارزش دارد سبک. همانطور که از نام آن حدس زده اید، این تگ استایل را تنظیم می کند و ترتیب اشیاء را در صفحه تنظیم می کند.

    به طور منطقی، می توانم فرض کنم که بلافاصله این سوال در ذهن شما ایجاد شد: "چه نوع کد نامفهومی در این قسمت از برنامه قرار دارد؟ اصلا شبیه html نیست!» و پاسخ این است: این html نیست که در تگ style نوشته می شود، بلکه کد css است. همانطور که قبلا ذکر شد، این ابزاری برای قالب بندی ظاهر وب سایت ها است.

    بخشبه تگ های بلوک زبان نشانه گذاری اشاره دارد. برای جداسازی قطعات خاص به منظور اصلاح بیشتر آنها استفاده می شود.

    بلوک ها با استفاده از شیوه نامه های آبشاری مدیریت می شوند. زبان css صفحه وب مثال دارای سه بلوک است که با استفاده از ویژگی های کلاس استایل دهی شده اند.

    بنابراین، کد شامل:

    • طرح بندی - بلوک مسئول بخش اصلی صفحه،
    • نوار کناری - نوار کناری (معمولاً برای ناوبری ایجاد می شود)،
    • محتوا - بلوکی که پست های وبلاگ در آن قرار دارند.

    در عنصر با تعریف کلاس نوار کناری، من یک لیست نامرتب را با استفاده از عناصر تعریف می کنم

      و
    • . در یک بلوک با محتوای کلاس سبک - برچسب‌های عنوان

      و پاراگراف

      حالا بیایید نگاهی دقیق تر به بلوک بیندازیم

      .

      HTML یا هنوز HTML 5؟ چگونه تشخیص دهیم؟

      در یک div با کلاس layout style، علاوه بر بلوک های دیگر، برچسب هایی مانند هدر، منو و پاورقی وجود دارد. بر خلاف سایر عناصر در مثال، این عناصر مختص پلتفرم HTML 5 هستند.

      بنابراین، هدر یک عنصر از زبان نشانه گذاری فرامتن است، که معمولا سرصفحه صفحات سایت یا بخش هایی را که عنوان در آن درج می شود، ایجاد می کند. شایان ذکر است که مرورگر اینترنت اکسپلورر از هدر تا نسخه 8 پشتیبانی نمی کند، اما محتویات آن را نمایش می دهد.

      هدف اصلی تگ منو نمایش آیتم های منو است. مشابه عناصر ایجاد لیست های شماره دار و بدون شماره، در داخل محفظه منو، هر آیتم محتوا در یک تگ جفت گنجانده شده است.

    • .

      و در نهایت واحد زبان فوتر. در اصطلاحات تخصصی توسعه دهندگان وب، گاهی اوقات به آن «پانویس» یک صفحه می گویند. این تگ در پایین صفحه یا بخش ها قرار دارد. پاورقی معمولاً حاوی اطلاعاتی در مورد نویسندگی یک منبع خاص، تاریخ ایجاد سند، اطلاعات پس زمینه یا سایر مطالبی است که نیازی به توجه ویژه خوانندگان منبع وب ندارد.

      ابزارهایی برای ایجاد منابع وب

      بسیاری از محصولات نرم افزاری برای توسعه صفحات اینترنتی ایجاد شده اند. به طور معمول، آنها را می توان به برنامه های ویرایشگر ساده و محصولات نرم افزاری حرفه ای تقسیم کرد.

      هنگام ایجاد یک وب سایت، اولین چیزی که باید تصور کنید نحوه تشکیل صفحه وب است. این یک نوع "پایه" در ساخت وب سایت است. بنابراین، قبل از پرداختن به فناوری های پیچیده تر ایجاد وب سایت، توصیه می شود حداقل دانش اولیه HTML را داشته باشید. در این درس با HTML، بیایید آن را مرتب کنیم ساختار سند HTMLو از مثال های عملی برای تثبیت دانش به دست آمده استفاده کنید.

      HTML چیست؟

      HTMLمخفف HyperText Markup Language است. این زبان دقیقاً مسئول نحوه نمایش ابرمتن در صفحات سایت است. حالا بیایید بفهمیم که فرامتن چیست؟ بر کسی پوشیده نیست که یک صفحه وب می تواند حاوی انواع مختلفی از اطلاعات باشد، اعم از متن، جداول، نمودارها، فیلم ها، صدا و غیره. بنابراین، تمام این اطلاعات را می توان در یک کلمه - فرامتن نامید.

      توجه داشته باشید که 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>بار معنایی ندارد، پس از هدر، ناو، اصلی و موارد دیگر فقط باید به صورت معنادار استفاده شود.</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>طراحی ناوبری اصلی سایت باید در تگ nav موجود باشد. همچنین باید به یاد داشته باشید که طراحی ناوبری با عناصر لیست تمرین خوبی در نظر گرفته می شود.</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 نشان می دهد که مقاله همزمان با نگارش منتشر شده است. اگر این خبر است، ممکن است زمان خبر یک باشد و زمان انتشار متفاوت است، برای این کار باید دو بار برچسب زمانی را مشخص کنید و pubdate را فقط در برچسبی که زمان انتشار نشان داده شده است قرار دهید.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>عنوان مقاله</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 سپتامبر</time> </header> <!-- Подзаголовок страницы --> <h2>عنوان فرعی مقاله</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam، soluta sunt، aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. 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>برای بررسی ساختار صفحه می توانید از ابزار outliner 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. مقادیر مشخصه ها به حروف بزرگ و به خصوص آدرس ها بستگی دارد (ویژگی سیستم عامل یونیکس تفسیر متفاوت کاراکترها در ثبات های مختلف است، بنابراین فایل ها</li> </ul><p>picture .gif و picture.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 هستند.  آنها توسط اکثر مرورگرها پشتیبانی می شوند.
      

      ALT = "متن"
      

      این عنصر اختیاری متنی را مشخص می‌کند که در مرورگری که از گرافیک پشتیبانی نمی‌کند یا گرافیک تصویر غیرفعال است، نمایش داده می‌شود.  معمولاً این توضیح کوتاهی از تصویری است که کاربر می تواند یا خواهد توانست آن را روی صفحه ببیند.  اگر این پارامتر وجود نداشته باشد، اکثر مرورگرها یک قاب خالی را به جای تصویر نمایش می دهند.  برچسب بزنید اگر کاربران از مرورگرهای غیر گرافیکی مانند Lynx و برای نمایه سازی موتورهای جستجو استفاده می کنند توصیه می شود.  همچنین زمانی که مکان نما ماوس را برای مدتی بدون حرکت روی تصویر به عنوان یک راهنمای سیستم در زیر مکان نما نگه دارید، متن قابل مشاهده است.
      

      اکثر مرورگرها به شما اجازه می دهند یک تصویر پس زمینه را در سند خود اضافه کنید، که مانند کاشی های حمام کپی می شود و به عنوان پس زمینه کل سند ظاهر می شود.  این راه دوم است.  برخی از کاربران گرافیک پس زمینه را دوست دارند، برخی نه.  یک الگوی شفاف غیر قابل توجه (کاغذ دیواری) معمولاً به عنوان پس زمینه برای اکثر اسناد خوب به نظر می رسد.
      

      پیوندهای ابرمتن جزء کلیدی هستند که وب را برای کاربران جذاب می کنند.  کاربر با افزودن پیوندهای فرامتن (که از این پس پیوند نامیده می شود)، مجموعه ای از اسناد را به هم متصل و ساختار یافته می سازد که به او اجازه می دهد تا اطلاعات مورد نیاز خود را با بیشترین سرعت و راحتی به دست آورد.
      

      پیوندها دارای یک فرمت استاندارد هستند که به مرورگر اجازه می دهد بسته به نوع پیوند آنها را تفسیر کند و عملکردهای لازم (روش های فراخوانی) را انجام دهد.  پیوندها می توانند به یک سند دیگر، یک مکان خاص در یک سند اشاره کنند یا عملکردهای دیگری مانند درخواست یک فایل را انجام دهند.  می توانید از متن یا تصویر یا هر دو به عنوان یک لینک استفاده کنید.
      

      ساختار پیوند در یک سند HTML.برای اینکه مرورگر بتواند لینک یک URL را نمایش دهد، باید متن یا تصویری را در داخل تگ هایپرلینک قرار دهید.  سینتکس HTML به شرح زیر است:
      

      <А HREF="URL">متن یا تصویری که به‌عنوان پیوند برجسته می‌شود
      


      برچسب بزنید<А HREF="URL">توضیحات پیوند و برچسب را باز می کند- آن را می بندد.  هر متنی که بین این دو تگ قرار گرفته باشد به روشی خاص توسط مرورگر وب برجسته می شود.  معمولاً این متن زیرخط دار و برجسته به نظر می رسد.  تصویر توسط یک قاب مستطیلی قاب شده است.  متنی که نشان‌دهنده URL است توسط مرورگر نمایش داده نمی‌شود، بلکه تنها برای انجام اقدامات مورد نظر خود در هنگام فعال شدن پیوند (معمولاً با کلیک بر روی متن برجسته یا زیر خط‌دار) استفاده می‌شود.
      

      پیوندهایی به برچسب های داخل سندمی‌توانید با استفاده از برچسب‌های مخفی ویژه برای آن بخش‌ها، به قسمت‌ها یا بخش‌های مختلف یک سند پیوند دهید.  این به شما امکان می دهد تا به سرعت از یک بخش به بخش دیگر در یک سند بدون پیمایش صفحه حرکت کنید.  به محض اینکه کاربر روی پیوند کلیک کرد، مرورگر او را به بخش مشخص شده سند منتقل می کند و خط حاوی برچسب این بخش در اولین خط پنجره مرورگر قرار می گیرد (اگر "طول" سند در پنجره مرورگر کافی است).
      

      هر سند HTML باید با تگ شروع شود <
HTML>
و با تگ خاتمه دهید HTML>
.  این تگ ها نشان می دهد که خطوط بین آنها یک سند HTML واحد را نشان می دهد.  علاوه بر این، می توانید ببینید که یک فایل HTML به عنوان یک کل عنصری از زبان HTML است.
      همچنین، سند HTML باید شامل عناصر HEAD (اطلاعات سند) و BODY (بدنه سند) باشد.
      بخش اسنادسر
      بخش HEAD یک سند عنوان آن را تعریف می کند و همچنین حاوی اطلاعات اضافی درباره سند برای مرورگر است.  این بخش اختیاری است، اما توصیه می شود همیشه از آن در اسناد HTML خود استفاده کنید، زیرا یک سربرگ خوب می تواند بسیار مفید باشد.
      بخش هدر با تگ شروع می شود <
سر>
و بلافاصله تگ را دنبال می کند .  بین تگ های باز و بسته شدن عنصر HEAD، سایر عناصر هدر قرار دارند.
      عنوان عنوان سند
      برای دادن نام به یک سند HTML، تگ است <
عنوان>
.  این نام در عنوان پنجره مرورگر نمایش داده می شود.  عنوان بین تگ ها نوشته می شود وو یک خط متن است.  طول این خط می تواند هر باشد، اما توصیه می شود آن را بیش از 60 کاراکتر نکنید.  عنصر TITLE فقط باید در بخش HEAD ظاهر شود.
      بخش اسنادبدن
      این بخش از سند حاوی اطلاعاتی است که در پنجره مرورگر نمایش داده می شود.  بخش BODY باید با تگ شروع شود <
بدن>
و با تگ خاتمه دهید بدن>
، که بین آن عناصر HTML تشکیل دهنده محتوای سند قرار دارد.
      مشخصات آیتمبدن
      برچسب بزنید دارای تعدادی ویژگی است که ظاهر سند را تعیین می کند.  در زیر مشخصات تگ آمده است .
      TEXT = رنگ متن
      BGCOLOR = رنگ پس زمینه
      BACKGROUND="آدرس تصویر پس زمینه"
      ویژگی TEXT رنگ فونت کل سند را در RGB یا نماد کاراکتر مشخص می کند.  به طور پیش فرض (اگر این ویژگی مشخص نشده باشد)، از تنظیمات مرورگر استفاده می شود.
      ویژگی BGCOLOR رنگ پس‌زمینه پنجره مرورگر سند را به صورت RGB یا نماد نمادین مشخص می‌کند.  تنظیمات مرورگر به طور پیش فرض استفاده می شود.
      ویژگی BACKGROUND به شما امکان می دهد آدرس و نام تصویر مورد استفاده به عنوان پس زمینه را مشخص کنید.  این نقاشی در پس‌زمینه سند تکثیر و توزیع می‌شود.
      ویژگی های LINK، VLINK، و ALINK رنگ هایپرلینک ها را در RGB یا نماد نمادین مشخص می کنند.  تنظیمات مرورگر به طور پیش فرض استفاده می شود.  هایپرلینک بازدید نشده، هایپرلینکی است که هنوز برای پیمایش به سند دیگری استفاده نشده است.  هایپرلینک بازدید شده، هایپرلینکی است که قبلاً برای پیمایش به سند دیگری استفاده شده است.  هایپرلینک فعال - پیوندی به سندی که در حال حاضر به آن پیمایش می شود.
      نکاتی برای استفاده از ویژگی های تگ BODY
       اگر حداقل یک رنگ را در تگ BODY مشخص کنید، بقیه را نیز مشخص کنید.  این به این دلیل است که کاربر می تواند تنظیمات رنگ مرورگر خود را به گونه ای تنظیم کند که برای او راحت تر است.  تعیین تنها یک رنگ ممکن است منجر به ترکیب متن با رنگ پس زمینه برای برخی از کاربران شود.  در نتیجه مشاهده سند مشکل خواهد بود.
       رنگ متن را طوری انتخاب کنید که با رنگ پس زمینه یا رنگ های اصلی تصویر "کار کند".  برای مثال رنگ قرمز روی سبز می تواند برای تعداد قابل توجهی از مردم مشکلات جدی ایجاد کند.
       هر دو BGCOLOR و BACKGROUND را می توان در عنصر BODY مشخص کرد.  در این حالت، مرورگر به BACKGROUND اولویت می دهد، اما اگر تصویر پس زمینه بارگیری نشود، از BGCOLOR استفاده می شود.  بنابراین سعی کنید رنگ پس زمینه را مشابه رنگ تصویر پس زمینه تنظیم کنید تا تعادل رنگ سند بر هم نخورد.
      


      

      

    
       
      
    
      شاید خواندن آن مفید باشد: