هاست لینوکس پرسرعت سی پنل

ساختار بندی سند HTML

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

در نوشته “چگونه یک برچسب html بنویسیم“، شما یاد گرفتید که چطور یک برچسب بنویسید. سرصفحه(Head) و بدنه(Body) هم خودشان یک برچسب هستند، که از یک قسمت ابتدایی و انتهایی و محتوای درونی تشکیل شده است.

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

ویرایشگر متن تان را باز کنید و با یک سند خالی ایجاد کنید. این کار در بیشتر برنامه ها از طریق file > new انجام می شود. در بالای سند، <html> را تایپ کنید. این برچسب، اولین محتوی سند را شروع می کند. در اصل این برچسب نوع سندی که شما در حال ساختن آن هستید را مشخص می کند، که HTML است.
این برچسب باز <html>، نیازمند برچسب بسته مربوط به خود است. بنابراین برای اینکه چند خط خالی بین این دو برچسب بوجود بیاید چند بار کلید Enter را بفشارید و پس از آن برچسب بسته یا <html/> را قرار دهید.

 <html>
 </html>

اشاره گر موس را در بین برچسب باز و بسته ای که ایجاد کرده اید قرار دهید. سپس برچسب <head> را در مکان مورد نظر تایپ کنید که نشان دهنده ناحیه سرصفحه سند ماست.
یک بار کلید Enter را بفشارید تا به خط بعد بروید و در مکان جدید، برچسب بسته یعنی <head/> را بنویسید. سند شما باید شبیه کد زیر باشد:

<html>
 <head>
 </head>
</html>

برای ساخت عنوان سند که در بالای مرورگر، هنگام نمایش سایت نشان داده می شود، بین برچسب head، عبارات <title> و <title/> را قرار دهید. همانطور که در زیر مشاهده می کنید، هر آنچه که بین این دو برچسب باز و بسته قرار بگیرد همان متنی خواهد شد که در نوار عنوان مرورگر نشان داده می شود. همچنین این برچسب برای موتور جست و جو بسیار مهم خواهد بود. پس برای بهینه سازی سایت برای موتورهای جستجو(SEO) روی این گزینه خیلی کار کنید.

 <html>
  <head>
    <title>this is a title</title>
  </head>
 </html>

آخرین عنصری که قصد اضافه کردن به الگوی صفحه را داریم، برچسب <body> است. بین برچسب بسته <head/> و تگ بسته <html/> تنها جایی است که باید شما برچسب بدنه را در آنجا قرار دهید. یا به عبارتی دیگر در برچسب HTML دو عنصر اصلی دیگر وجود دارد که یکی HEAD و BODY است.

 <html>
  <head>
    <title>this is a title</title>
  </head>
  <body>

  </body>
 </html>

همانطور که در کدهای بالا می بینید، شما یک سند ساده که شامل ساختار اساسی HTML است را درست کردید. اگر این پرونده را بعد از ذخیره کردن در یک مرورگر باز کنید، یک صفحه خالی در مرورگر با عنوانی که در برچسب title مشخص کردید را مشاهده می کنید.

حالا وقت ذخیره سند است. شما می توانید یک نام مثل blank.html به آن بدهید تا بعد از آن هر وقت که خواستید کار روی این سند را شروع کنید. حتی می توانید از آن به عنوان یک قالب یا الگو استفاده کنید، به این معنی که هر وقت که خواستید که سند جدیدی بسازید از این پرونده یک کپی گرفته و کار بروی آن را شروع کنید. فقط اگر از Notepad برای کدنویسی HTML استفاده می کنید، برای این کار از منوی File گزینه Save as را انتخاب کنید و در قسمت File Name یک نامی انتخاب کنید که با پسوند html. به اتمام رسیده باشد، و یادتان باشد که از قسمت Save as type هم گزینه All File را انتخاب کنید. در غیر این صورت سند شما به صورت یک سند متنی ساده ذخیره خواهد شد که هنگام باز کردن، مرورگر آن را نخواهد شناخت.

  1. اینم خوب بود
    دستتون طلا

  2. آقا دمتون گرم. ما یک ساعت داریم جزوه می خونیم هیچی نفهمیدیم. خیلی عالی توضیح دادین.

دیدگاه تان را ارسال کنید.

لطفاً از درج نظرات خارج از موضوع این صفحه خودداری کنید!


کانال آموزش طراحی سایت