برای ساختن یک صفحه ی HTML کافیست یک فایل TEXT (با فرمت txt.) در فضای داخلی (local) کامپیوتر خود مثلا در Desktop ایجاد کنیم. در مرحله ی بعد لازم است فرمت txt. را با html. جایگزین کنیم. در برخی از سیستم عامل ها مانند ویندوز، فرمت فایل های شناخته شده از دید کاربر مخفی می ماند و در چنین شرایطی پس از ایجاد فایل text تنها نام آن را مشاهده خواهید کرد. برای رفع این مشکل در ویندوز ۱۰ می توانید با مراجعه به This PC از منوی بالا گزینه ی View را انتخاب نموده و File name extension را تیک بزنید. حالا باید صاحب فایلی با نام دلخواه و فرمت html. شده باشیم. در مرحله ی بعد توسط ویرایشگر کد دلخواهمان، فایل html خود را باز می کنیم. انتظار می رود فایل html ساخته شده خالی باشد و هیچ کدی در آن وجود نداشته باشد.
حال نگاهی به ساختار یک element در HTML می اندازیم.
قسمت های اصلی یک element در HTML عبارت اند از:
- Opening tag (تگ آغازین): شامل نام element می باشد (دراین جا p) که بین < و > قرار گرفته و به معنی آغاز element می باشد (در این جا به معنی آغاز یک پاراگراف یا سطر می باشد).
- Closing tag (تگ پایانی): همانند تگ آغازین اما با این تفاوت که نام element به صورت <نام/> (به همراه یک forward slash) به تصویر کشیده می شود و به عنوان پایان قلمروی یک element (در این جا پایان یک سطر) به شمار می رود.
- The content: همان محتوای درون یک element است (که در این جا همان متن مورد نظر ماست).
- The element: مجموعه ی نهایی از تگ آغازین و محتوا و تگ پایانی است (البته در مثال بالا).
Element ها می توانند ساختار های منحصر بفردی داشته باشند و ساختار آن ها وابسته به نوع آن هاست. برخی از element ها مانند br بدلیل ماهیتشان (در این مثال br به میزان یک خط، فاصله ایجاد می کند) نیازی به تگ پایانی ندارند و نوشتن تگ آغازین برای دست یابی به نتیجه ی مطلوب کافی می باشد. برخی دیگر مانند img نیازی به محتوا ندارند چرا که محتوای آنها شامل متن نیست. (تگ img برای نمایش عکس بکار می رود و از این رو آدرس عکس تحت عنوان یک attribute به نام src در داخل element قرار می گیرد). element ها می توانند دارای قابلیت ها و خواص منحصربفردی باشند که اصولا در تگ آغازین قید می شوند، به این خواص attribute می گوییم. جهت آشنایی نمونه از یک attribute را در شکل زیر نشان داده ایم.
همانطور که در تصویر ابتدای صفحه مشاهده می کنید، index.html در سمت چپ توسط ویرایشگر (در این جا vscode) باز شده است. در این تصویر ساختار کلی و ابتدایی ترین حالت یک فایل html ترسیم شده است و در این مرحله قصد داریم تک تک element های بکار رفته در تصویر را بطور مختصر معرفی کنیم.
از اولین عبارت شروع می کنیم.
<!doctype html>
این عبارت که به آن doctype می گوییم بیشتر جنبه ی تاریخی دارد و ظهور آن به دوران تولد HTML باز می گردد. doctype در نسخه های قبلی HTML نقش مجموعه قوانینی را ایفا می کرد که هر فایل HTML برای رعایت استاندارد ها بدان نیازمند بود. در نسخه های پیشین، doctype کمی طولانی تر از الان تعریف می شد. پس از ورود HTML 5 عبارت doctype مختصر شد و این روز ها برای داشتن یک کد معتبر تر آن را در ابتدای هر فایل html اضافه می کنیم.
در ادامه
<html></html> را مشاهده می کنیم که به عنوان element ریشه در نظر گرفته می شود و تمام محتوای صفحه را در خود جای می دهد.پس از آن
<head></head> را داریم که شامل تمام چیزهاییست که جزیی از محتوایی که برای نمایش به کاربر درنظر گرفته ایم- به حساب نمی آیند. به عبارت دیگر تگ head حاوی اطلاعاتی همچون کلمات کلیدی و توضیحاتی از صفحه که مایلید در موتور های جستجو نمایش داده شوند، می باشد و البته مواردی دیگر که در آینده معرفی خواهیم کرد.از
<meta charset="utf-8"> برای تنطیم نوع کاراکتر استفاده می کنیم، utf-8 از اکثر کاراکتر های نوشتاری ما پشتیبانی می کند و با این کار می توان از درست به نمایش در آمدن محتوای صفحه در انواع مرورگر ها اطمینان حاصل کرد.از
<title></title> برای معرفی عنوان صفحه استفاده می شود که در پنجره ی مرورگر قابل مشاهده است (و در مثال ما USB 95) تگ
<body></body> شامل تمام چیزهایی است که می خواهید به کاربر نمایش دهید، انواع محتوا مثل تصویر، متن، لینک، ویدیو و... را می توان با استفاده از element خاص هر یک در این قسمت اضافه کرد و به نمایش گذاشت.در نهایت نیز یک تگ h1 به عنوان نمونه اضافه کردیم تا با شیوه استفاده از element ها و نحوه ی دیده شدن آن ها در مرورگر ارتباط بهتری برقرار کنید.
در آموزش های بعدی درمورد نحوه ی استفاده از element ها جهت افزودن محتوا (تصویر، متن، فیلم و موسیقی و...) به صفحه ی html می پردازیم. با ما همراه باشید!
