مبانی HTML
در جلسات قبل با HTML آشنا شدید و ویرایشگر را انتخاب کردید. حالا یک صفحهٔ پایهٔ کامل میسازید: اسکلت استانداردی که هر فایل HTML مدرن باید از آن شروع شود، بههمراه کمی محتوای قابلدیدن.
سند پایه HTML چیست؟
سند پایه HTML یک فایل متنی با ساختار بیرونی ثابت است. داخل آن ساختار، محتوایی را میگذارید که بازدیدکننده میبیند. تقریباً هر صفحه در این کورس همان اسکلت بیرونی را دوباره استفاده میکند و فقط محتوای داخل body را عوض میکند.
پاسخ مستقیم: اسکلت لازم
یک صفحهٔ پایهٔ مدرن این بخشها را بهترتیب دارد:
<!DOCTYPE html>— اعلام سند HTML5<html>— عنصر ریشه که کل صفحه را در بر میگیرد<head>— اطلاعات دربارهٔ صفحه (نه متن اصلی قابلدیدن مقاله)<title>داخل head — متن زبانهٔ مرورگر و نشانکها<body>— محتوایی که افراد روی صفحه میبینند
سند پایه HTML
html<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>این یک تیتر است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>خواندن مثال خطبهخط
- doctype باید اول باشد تا مرورگر قواعد HTML مدرن را به کار ببرد
- بقیه داخل
<html> ... </html>قرار میگیرد <head>عنوان را نگه میدارد؛ بازدیدکننده عمدتاً آن را در نام زبانه میبیند<body>تیتر و پاراگرافی را نگه میدارد که در ناحیهٔ صفحه میبینید- بیشتر عناصر به تگ بستهٔ متناظر با اسلش نیاز دارند، مثل
</p>
تفاوت head و body
<head> را یادداشتهای پشتصحنهٔ صفحه و <body> را صحنه تصور کنید. موتورهای جستجو و مرورگرها از title و دادههای دیگر head استفاده میکنند. کسانی که صفحه را میخوانند به body نگاه میکنند. گذاشتن متن اصلی مقاله فقط داخل head اشتباه رایج مبتدیهاست.
تودرتویی و ترتیب
عناصر HTML تودرتو میشوند: یک عنصر میتواند داخل عنصر دیگر بنشیند. تگها را در درختی روشن نگه دارید. تگهای داخلی را قبل از بیرونی ببندید. برای اسکلت پایه این ترتیب را حفظ کنید: doctype، سپس html، سپس head (با title)، سپس body.
خودتان امتحان کنید
- در ویرایشگر فایلی به نام
basic.htmlبسازید - مثال بالا را بچسبانید
- متن title و تیتر را عوض کنید
- فایل را ذخیره کنید و در مرورگر باز کنید
- بعد از ذخیره و تازهسازی، تأیید کنید عنوان زبانه و تیتر روی صفحه هر دو بهروز شدهاند
نکتههای کوچک که بعداً وقت ذخیره میکنند
- برای سبک مدرن HTML نام تگها را با حروف کوچک ترجیح دهید (
<p>نه<P>) - خطوط تودرتو را تورفتگی بدهید تا ببینید کدام تگها با هم هستند
- در مثالهای اولیه یک
<h1>روشن بهعنوان تیتر اصلی صفحه نگه دارید - charset، لینک، تصویر و موارد بیشتر را در جلسات بعد اضافه میکنید؛ اول این اسکلت را مسلط شوید
اشتباهات رایج
- فراموش کردن
<!DOCTYPE html>در بالا - بستن تگها به ترتیب اشتباه (مثلاً بستن
htmlقبل ازbody) - گذاشتن تیتر قابلدیدن فقط داخل
<head> - ذخیره بدون پسوند
.htmlو تعجب از رفتار عجیب مرورگر - نوشتن تگ باز بدون جفت بسته وقتی عنصر به هر دو نیاز دارد
خلاصه
- صفحهٔ پایه HTML از doctype، html، head، title و body استفاده میکند
- title عمدتاً در زبانهٔ مرورگر دیده میشود
- محتوای قابلدیدن متعلق به body است
- عناصر تودرتو میشوند؛ اول تگهای داخلی را ببندید
- با ویرایش فایل کوچک و تازهسازی مرورگر تمرین کنید
- جلسات بعد عناصر بیشتری روی همین اسکلت اضافه میکنند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود