مقدمه HTML
HTML پایهٔ هر صفحهٔ وبی است که باز میکنید. قبل از استایل CSS یا رفتار JavaScript، مرورگر به ساختاری روشن نیاز دارد که بگوید هر بخش محتوا چیست.
HTML چیست؟
HTML (HyperText Markup Language) زبان استاندارد ساختاربندی محتوای صفحات وب است. با تگها دور متن و رسانه مینویسید تا مرورگر بداند کدام بخش تیتر، پاراگراف، لینک، تصویر یا عنصر دیگر است.
چرا HTML مهم است؟
بدون HTML مرورگر معنای محتوا و ترتیب آن را درست نمیفهمد. HTML یک زبان برنامهنویسی نیست؛ یک زبان نشانهگذاری است: محتوا را علامتگذاری میکنید تا نرمافزار (و ابزارهای کمکی) آن را درست تفسیر کنند.
نگاهی اول به تگها
HTML از تگهایی با براکت زاویهای استفاده میکند. بیشتر عناصر یک تگ باز و یک تگ بسته دارند.
سلام HTML
html<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>This is my first paragraph.</p>
</body>
</html>این مثال چه چیزی نشان میدهد
<!DOCTYPE html>به مرورگر میگوید سند HTML مدرن است<html>عنصر ریشهٔ صفحه است<head>اطلاعات صفحه مثل عنوان را نگه میدارد<body>محتوای قابلمشاهده برای بازدیدکننده است<h1>تیتر اصلی است<p>یک پاراگراف است
مرورگر چگونه از HTML استفاده میکند
وقتی فایل HTML را باز میکنید، مرورگر نشانهگذاری را از بالا به پایین میخواند، ساختاری به نام DOM میسازد و محتوا را طبق تگها نشان میدهد. نتیجهٔ دیدهشده صفحه است؛ تگها دستورالعمل پشت آن هستند.
HyperText و لینکها
واژهٔ HyperText در HTML به متنی اشاره دارد که میتواند از طریق لینک به اسناد دیگر وصل شود. اتصال صفحات همان چیزی است که چند فایل جدا را به یک وبسایت تبدیل میکند.
یک لینک ساده
html<a href="https://example.com">Visit Example</a>عنصر <a> ابرلینک میسازد. ویژگی href آدرس مقصد را نگه میدارد. جزئیات لینک را در جلسهٔ بعدی میآموزید؛ اینجا کافی است بدانید لینک بخشی از «hyper» بودن HTML است.
خودتان امتحان کنید
فایلی به نام index.html بسازید، مثال کامل صفحه را در آن بگذارید، ذخیره کنید و در مرورگر باز کنید. متن تیتر را عوض کنید و صفحه را تازه کنید؛ باید متن جدید را ببینید.
اشتباهات رایج
- برخورد با HTML مثل زبان برنامهنویسی دارای حلقه و منطق — رفتار را بعداً با JavaScript بسازید
- فراموش کردن تگ بسته برای عناصری که به آن نیاز دارند و خراب شدن ساختار صفحه
- گذاشتن محتوای دیدهشده در
<head>بهجای<body> - رد کردن
<!DOCTYPE html>و مواجهه با رفتارهای قدیمی غیرمنتظره
خلاصه
- HTML محتوای صفحه را با تگ ساختاربندی میکند
- زبان نشانهگذاری است نه برنامهنویسی
- صفحهٔ پایه شامل doctype و html و head و body است
- تیتر و پاراگراف از عناصر اولیهٔ رایجاند
- لینکها صفحات را وصل میکنند و HyperText میسازند
- با ویرایش یک فایل کوچک HTML و دیدن آن در مرورگر تمرین کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود