مقدمه (Introduction)
اینجا با «آموزش HTML مقدماتی» شروع می کنیم. HTML یعنی «Hyper Text Markup Language». یعنی زبان برچسب گذاری صفحات وب. «تگ (Tag)» یک برچسب است. «المان (Element)» یعنی تگ آغاز، محتوا و تگ پایان. با این ها صفحه می سازیم. مثل ساخت لگو اما برای وب.
HTML چیست؟
HTML اسکلت هر وب سایت است. مرورگر تگ ها را می خواند و نمایش می دهد. خود تگ ها دیده نمی شوند. فقط نتیجه دیده می شود.
نکته: «استاندارد (Standard)» یعنی قوانین رسمیِ ساخت. HTML5 آخرین نسل است.
یک سند ساده HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
توضیح مثال
- <!DOCTYPE html> یعنی سند از نوع HTML5 است.
- <html> ریشه صفحه است.
- <head> اطلاعات درباره صفحه را نگه می دارد.
- <title> عنوان تب مرورگر را تعیین می کند.
- <body> محتوای قابل نمایش را نگه می دارد.
- <h1> تیتر بزرگ است.
- <p> یک پاراگراف متن است.
المان (Element) و تگ (Tag)
المان از سه بخش می آید: تگ شروع، محتوا، تگ پایان. مثل جعبه با درِ باز و بسته. برخی المان ها خالی اند. مثل <br> که پایان ندارد.
نکته: المان خالی «Empty Element» نام دارد و تگ پایان ندارد.
ساختار صفحه HTML
صفحه معمولاً یک <head> و یک <body> دارد. در head، عنوان و متا داده می آید. در body، محتوا دیده می شود. برای تیترها بعداً بخش سرفصل ها را ببین.
برای لینک سازی نیز صفحه تگ لینک مفید است. این دو پایه ناوبری اند.
مرورگرها چه می کنند؟
مرورگر مثل مترجم است. تگ ها را می خواند و خروجی می سازد. تگ ها نمایش داده نمی شوند. فقط نتیجه نمایش می شود.
تمرین سریع گام به گام
- یک فایل جدید بساز و نامش را index.html بگذار.
- کد نمونه بالا را در فایل کپی کن.
- فایل را با مرورگر باز کن و نتیجه را ببین.
هشدار: تگ ها را درست ببند. یک تگِ باز بدون پایان، چیدمان را به هم می زند.
منابع پیشنهادی
- W3Schools: HTML Introduction برای مرور سریع.
- WHATWG HTML Living Standard برای متن استاندارد.
جمع بندی سریع
- HTML اسکلت وب است.
- المان = تگ شروع + محتوا + تگ پایان.
- <head> اطلاعات؛ <body> محتوا.
- مرورگر تگ ها را تفسیر می کند.
- تمرین کن و نتیجه را ببین.