Hyper Text Markup Language
HTML (زبان نشانهگذاری ابرمتن) پایه و اساس هر وب سایتی است. این یک زبان نشانهگذاری است که برای تعریف ساختار و محتوای یک صفحه وب استفاده میشود. با HTML میتوانید متن را قالببندی کنید، تصاویر و ویدیوها را درج کنید، لینکها را ایجاد کنید و کارهای بسیار بیشتری انجام دهید. هر سند HTML با یک تگ <html> شروع میشود و با </html> به پایان میرسد. محتوای وب سایت در داخل این تگها قرار میگیرد و به عناصر مختلف تقسیم میشود.
ساختار اصلی یک سند HTML
یک سند HTML ساده از چند عنصر اساسی تشکیل شده است که ساختار صفحه را مشخص میکند. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My test page</title>
</head>
<body>
<!-- محتوای صفحه اینجا قرار میگیرد -->
</body>
</html>
عناصر اصلی ساختار:
- <!DOCTYPE html>: نوع سند و نسخه HTML (در این مورد HTML5) را اعلام میکند.
- <html>: عنصر ریشهای که کل سند HTML را در بر میگیرد.
- <head>: حاوی ابرداده و پیوندهایی به منابع خارجی مانند فایلهای CSS است. آنچه در <head> است معمولاً مستقیماً در وب سایت نمایش داده نمیشود.
- <meta charset="utf-8">: مجموعه نویسههایی را که سند شما باید استفاده کند را روی UTF-8 تنظیم میکند.
- <meta name="viewport" content="width=device-width">: viewport تضمین میکند که صفحه در عرض درگاه نمایش رندر میشود و از باز شدن صفحهها توسط مرورگرهای تلفن همراه و سپس کوچک شدن آنها جلوگیری میکند.
- <title>: عنوان صفحه وب را که در نوار عنوان مرورگر نمایش داده میشود را مشخص میکند.
- <body>: شامل تمام محتوایی است که میخواهید هنگام بازدید از صفحه به کاربران نشان دهید — خواه متن، عکس، ویدیو، بازی، آهنگهای صوتی قابل پخش یا هر چیز دیگری.
HTML Elements
یک عنصر / HTML Element از یک تگ شروع، محتوا و یک تگ پایان تشکیل شده است. تگ شروع و تگ پایان نام یکسانی دارند، با این تفاوت که تگ پایان یک اسلش قبل از نام دارد.
بخشهای اصلی عنصر ما به شرح زیر است:
- تگ باز / opening tag: شامل نام عنصر (در این مورد p) است که در براکتهای زاویه باز و بسته پیچیده شده است. این نشان میدهد که عنصر از کجا شروع میشود — در این مورد که پاراگراف شروع میشود.
- تگ بسته شدن / closing tag: این تگ همانند تگ افتتاحیه است، با این تفاوت که قبل از نام عنصر دارای یک اسلش رو به جلو است. این نشان میدهد که عنصر به کجا ختم میشود. عدم اضافه کردن برچسب بسته شدن یکی از خطاهای استاندارد مبتدی است.
- محتوا / content: محتوای عنصر است که در این مورد فقط متن است.
- عنصر / element: تگ افتتاحیه، تگ بسته شدن و محتوا با هم عنصر را تشکیل میدهند.
عناصر همچنین میتوانند ویژگیهایی داشته باشند که به شکل زیر هستند:
ویژگیها حاوی اطلاعات اضافی درباره عنصری هستند که نمیخواهید در محتوای واقعی ظاهر شوند. در اینجا، class نام ویژگی و 'editor-note' مقدار ویژگی است. برخی از ویژگیها هیچ ارزشی ندارند، مانند required.
ویژگیهایی که یک مقدار را تعیین میکنند همیشه دارای:
- فاصله بین آن و نام عنصر (یا ویژگی قبلی).
- نام مشخصه که با علامت مساوی همراه است.
- مقدار مشخصه با علامت نقل قول باز و بسته میشود.
عناصر تودرتو / Nesting elements
شما میتوانید عناصر را درون عناصر دیگر نیز قرار دهید — به این حالت تودرتو میگویند. اگر بخواهیم بگوییم که گربه ما بسیار بداخلاق است، میتوانیم کلمه «بسیار» را در یک عنصر <strong> بپیچیم، به این معنی که این کلمه باید به شدت تأکید شود:
<p>My cat is <strong>very</strong> grumpy.</p>
✅ صحیح
<p><strong>very</strong></p>
عناصر به درستی باز و بسته میشوند — اول <strong> بسته میشود، سپس <p>.
❌ نادرست
<p><strong>very</p></strong>
همپوشانی تگها باعث نتایج غیرمنتظره میشود. مرورگر سعی میکند بهترین حدس را انجام دهد.
عناصر خالی / Void elements
برخی از عناصر محتوایی ندارند و عناصر خالی نامیده میشوند. عنصر <img> را که قبلاً در صفحه HTML خود داریم، در نظر بگیرید:
<img src="images/firefox-icon.png" alt="My test image">
این شامل دو ویژگی است، اما هیچ برچسب </img> بسته و محتوای داخلی وجود ندارد. این به این دلیل است که یک عنصر تصویر محتوا را نمیپوشاند. هدف آن قرار دادن یک تصویر در صفحه HTML در مکانی است که ظاهر میشود.
برخی از عناصر اولیه
تصاویر / Images
عنصر <img> یک تصویر را در صفحه ما در موقعیتی که ظاهر میشود تعبیه میکند. این کار را از طریق ویژگی src (source) انجام میدهد که حاوی مسیر فایل تصویری ما است.
<img src="images/firefox-icon.png" alt="My test image">
ما همچنین یک ویژگی alt (جایگزین) قرار دادهایم. در ویژگی alt، متن توصیفی را برای کاربرانی که نمیتوانند تصویر را ببینند، مشخص میکنید، احتمالاً به دلایل زیر:
- آنها دچار اختلال بینایی هستند. کاربرانی که دارای اختلالات بینایی قابل توجهی هستند اغلب از ابزارهایی به نام صفحهخوان (screen reader) برای خواندن متن جایگزین استفاده میکنند.
- مشکلی رخ داده است که باعث شده تصویر نمایش داده نشود — مثلاً مسیر داخل ویژگی src نادرست باشد.
کلمات کلیدی متن جایگزین «descriptive text» هستند. متن جایگزینی که مینویسید باید اطلاعات کافی را در اختیار خواننده قرار دهد تا ایده خوبی از آنچه که تصویر منتقل میکند داشته باشد.
سرفصلها / Headings
عناصر عنوان به شما این امکان را میدهند که مشخص کنید قسمتهای خاصی از محتوای شما عنوان یا عنوان فرعی باشد. همانطور که یک کتاب دارای عنوان اصلی، عنوان فصل و زیرنویس است، یک سند HTML نیز میتواند. HTML شامل 6 سطح عنوان، <h1> تا <h6> است، اگرچه معمولاً حداکثر از 3 تا 4 استفاده میکنید:
<h1>عنوان اصلی</h1>
<h2>عنوان سطح بالایی</h2>
<h3>زیرعنوان</h3>
<h4>زیرعنوان فرعی</h4>
<h5>عنوان سطح پایین</h5>
<h6>کوچکترین عنوان</h6>
توجه: هر چیزی که در HTML بین <!-- و باشد یک Comment HTML است. مرورگر توضیحات را در هنگام ارائه کد نادیده میگیرد — آنها در صفحه قابل مشاهده نیستند، تنها در کد. از عناصر عنوان برای بزرگتر یا پررنگتر کردن متن استفاده نکنید، زیرا برای دسترسی و SEO استفاده میشوند.
پاراگرافها / Paragraphs
همانطور که در بالا توضیح داده شد، عناصر <p> برای شامل پاراگرافهای متن هستند. هنگام علامتگذاری محتوای متنی معمولی، اغلب از این موارد استفاده میکنید:
<p>This is a single paragraph</p>
لیستها / Lists
بسیاری از محتوای وب لیست است و HTML عناصر ویژهای برای آنها دارد. علامتگذاری لیستها همیشه از حداقل 2 عنصر تشکیل شده است. رایجترین انواع لیست:
- لیستهای نامرتب (<ul>): برای لیستهایی که ترتیب اقلام در آنها مهم نیست، مانند لیست خرید.
- لیستهای مرتب (<ol>): برای لیستهایی که ترتیب اقلام مهم است، مانند دستور پخت.
هر آیتم داخل لیستها داخل یک عنصر <li> (مورد لیست) قرار میگیرد. مثال:
<ul>
<li>technology</li>
<li>design</li>
<li>humanities</li>
</ul>
پیوندها / Links
پیوندها بسیار مهم هستند — آنها چیزی هستند که وب را به یک وب تبدیل میکنند! برای افزودن یک پیوند، باید از یک عنصر ساده استفاده کنیم — <a> شکل کوتاه «anchor» است. برای تبدیل متن داخل پاراگراف به پیوند، مراحل زیر را دنبال کنید:
مراحل ایجاد پیوند:
- متنی را انتخاب کنید — ما متن «Mozilla Manifesto» را انتخاب کردیم.
- متن را در یک عنصر <a> بپیچید:
<a>Mozilla Manifesto</a>
- به عنصر <a> یک ویژگی href بدهید:
<a href="">Mozilla Manifesto</a>
- مقدار این ویژگی را با آدرس وب پر کنید:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
اگر قسمت https یا http (نام پروتکل) را در ابتدای آدرس وب حذف کنید، ممکن است نتایج غیرمنتظرهای دریافت کنید. پس از ایجاد یک پیوند، روی آن کلیک کنید تا مطمئن شوید که آن را به جایی که میخواهید ارسال میکند.
توجه: href مخفف «Hypertext Reference» (مرجع فرامتن) است.
مثال کامل: index.html
برای شروع کار با HTML، میتوانید به سادگی از یک ویرایشگر متن مانند Notepad (ویندوز)، TextEdit (Mac) یا یک ویرایشگر کد مانند Visual Studio Code استفاده کنید. فایل خود را با پسوند .html ذخیره کنید و آن را در یک مرورگر وب باز کنید تا نتیجه را ببینید.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<h1>Mozilla</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo">
<p>Mozilla, the maker of Firefox</p>
<p><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></p>
</body>
</html>
یادگیری HTML نسبتاً آسان است، اما زمانی که با CSS برای چیدمان و طراحی وب سایت ترکیب شود، بسیار قدرتمند است. هنگامی که با اصول HTML آشنا شدید، میتوانید شروع به کاوش در CSS کنید.
منابع برای یادگیری بیشتر:
- W3Schools HTML Tutorial — تمام دستورات HTML با جزئیات
- Programiz Online HTML Editor — ویرایشگر آنلاین HTML
HTML5 چیست؟ درک روش صحیح چیدمان صفحه با HTML5
HTML5 آخرین نسخه از زبان نشانهگذاری ابرمتنی است، زبان استاندارد برای ساختاربندی محتوا در وب. این نسخه به طور رسمی در اکتبر 2014 منتشر شد و تعدادی بهبود و ویژگیهای جدید را در مقایسه با پیشینیان خود به ارمغان آورد. HTML5 با هدف ساخت وبی مدرنتر، دسترسپذیرتر و همکاریپذیرتر توسعه یافت.
مجموعهای از عناصر و ویژگیهای جدید HTML5 را میتوان با تمرکز بر موارد زیر معرفی کرد:
- ساختار معنایی: تگهای جدیدی که هدف بخشهای مختلف صفحه وب را واضحتر تعریف میکنند.
- ذخیرهسازی آفلاین و برنامههای کاربردی: وبسایتها را قادر میسازد تا دادهها را به صورت محلی ذخیره کنند و حتی بدون اتصال به اینترنت کار کنند.
- چندرسانهای: پشتیبانی بهبود یافته برای جاسازی مستقیم صدا و تصویر در صفحات وب.
- دسترسیپذیری: عناصر و ویژگیهای پیشرفتهای برای آسانتر کردن استفاده از وبسایتها برای افراد دارای معلولیت.
تکنیکهای چیدمان در HTML5
بزرگترین بهبود چیدمان HTML5 معرفی عناصر معنایی بود. این موارد به توسعهدهندگان و مرورگرها کمک میکنند تا محتوا را به روشی معنادارتر درک کنند:
- <header>: نشاندهنده محتوای مقدماتی برای یک صفحه یا بخش، که معمولاً شامل عناوین، ناوبری یا لوگوها میشود.
- <nav>: مجموعهای از لینکهای ناوبری را در بر میگیرد.
- <main>: محتوای اصلی یک سند. در هر صفحه فقط باید یک <main> وجود داشته باشد.
- <section>: یک بخش کلی از محتوا، مانند مقاله، بلوک خبری و غیره.
- <article>: محتوای مستقل و خودکفا مانند پست وبلاگ، مقاله خبری یا ورودی انجمن.
- <aside>: محتوایی که به طور مرتبط با محتوای اطراف است (نوارهای کناری، کادرهای فراخوان، لینکهای مرتبط).
- <footer>: ناحیه پایین یک صفحه یا بخش، که معمولاً حاوی اطلاعات حق نسخهبرداری، لینکهای تماس و غیره است.
مثال چیدمان HTML5
هنگام طراحی یک صفحه وب با HTML5، مهم است که از عناصر معنایی به طور معقولی استفاده شود تا ساختار محتوا را به وضوح تعریف کنید. یک طرح ابتدایی میتواند به شکل زیر باشد:
استفاده از <main>, <section>, <article>, <aside>, و دیگر تگهای معنایی به سازماندهی منطقی محتوا کمک کرده و بهینهسازی موتور جستجو (SEO) را بهبود میبخشد.
مزایای چیدمان معنایی HTML5
- وضوح: خوانایی کد را برای توسعهدهندگان و موتورهای جستجو بهبود میبخشد.
- دسترسیپذیری: به خوانندههای صفحه و فناوریهای کمکی برای پیمایش موثرتر صفحه کمک میکند.
- نگهداری: بهروزرسانی و استایلدهی وبسایت شما را آسانتر میکند، زیرا ساختار منطقیتری دارد.
HTML5 امکانات ایجاد فرمها و عناصر تعاملی در صفحات وب را گسترش میدهد. این نسخه انواع ورودی جدیدی مانند email, date, time, range و color را معرفی میکند. علاوه بر این، APIهای جدید برای کانواس (Canvas)، کشیدن و رها کردن (Drag & Drop)، و چندرسانهای امکانات گستردهتری برای ایجاد محتوای تعاملی فراهم میکنند.
به خاطر داشته باشید که HTML5 عمدتاً ساختار صفحه شما را مدیریت میکند. در اینجا CSS وارد عمل میشود تا به آن سبک دهد:
- Grid (شبکه CSS): سیستمی قدرتمند برای ایجاد چیدمانهای چند ستونی و پیچیده.
- Flexbox: مناسب برای تراز کردن عناصر درون کانتینرها و پاسخگو کردن چیدمانها به اندازههای مختلف صفحه نمایش.
قدمهای بعدی برای یادگیری
پس از درک اصول اولیه HTML5، قدم بعدی گسترش و تعمیق دانش خود با کسب تجربه عملی و یادگیری مفاهیم جدید است. در اینجا چند پیشنهاد برای حرکت رو به جلو وجود دارد:
- CSS را یاد بگیرید — هنگامی که با HTML احساس راحتی کردید، باید شروع به یادگیری CSS (Cascading Style Sheets) کنید. از CSS برای طراحی ظاهر و چیدمان صفحات وب استفاده میشود: رنگها، فونتها، فاصلهگذاری، موقعیت و موارد دیگر. تسلط بر CSS برای ایجاد وبسایتهایی با ظاهر حرفهای بسیار مهم است.
- طراحی وبسایت واکنشگرا / Responsive Web Design — یاد بگیرید که چگونه طراحی وب ریسپانسیو را پیادهسازی کنید تا وبسایت شما در دستگاهها و اندازههای مختلف صفحه نمایش عالی به نظر برسد. این شامل درک پرسشهای رسانه (Media Queries) در CSS، طرحبندیهای انعطافپذیر و سایر تکنیکها برای تطبیق با موبایل و تبلت میشود.
- جاوا اسکریپت / JavaScript — یک زبان برنامهنویسی است که برای تعاملی کردن وبسایتها استفاده میشود. با یادگیری جاوا اسکریپت میتوانید ویژگیهای پویا مانند گالریهای تصاویر، اعتبارسنجی فرمها، تغییرات محتوای پویا و غیره را اضافه کنید. جاوا اسکریپت همچنین پایهای برای فناوریهای پیشرفته مانند React، Angular و Vue است.
- ابزار توسعه وب / Web Development Tools — با ابزارها و فناوریهای توسعه وب مدرن آشنا شوید: ابزارهای نسخهسازی (Git)، ابزارهای توسعه مرورگر (Developer Tools)، و چارچوبها/کتابخانهها مانند Bootstrap، Tailwind (CSS) و React، Angular، Vue (JavaScript).
- ساخت پروژهها — بهترین راه یادگیری از طریق تمرین است. با ایجاد پروژههای خود یا شرکت در پروژههای منبع باز شروع کنید: وبسایتهای ساده، نمونهکار شخصی، برنامههای وب کوچک یا بازیها. این به شما کمک میکند مهارتهای حل مسئله را توسعه دهید و مجموعهای بسازید که میتواند به کارفرمایان ارائه شود.
- به طور مداوم یاد بگیرید — توسعه وب یک زمینه سریع است و یادگیری مداوم بسیار مهم است. وبلاگها، پادکستها و دورههای آنلاین را دنبال کنید، در وبینارها شرکت کنید و در جوامع شرکت کنید تا روندها، فناوریها و بهترین شیوههای جدید را کشف کنید.
🎯 نکات کلیدی / Key Takeaways
- HTML زبان نشانهگذاری است که ساختار و محتوای صفحات وب را تعریف میکند.
- هر سند HTML با <!DOCTYPE html> شروع میشود و شامل <html>, <head>, و <body> است.
- عناصر از تگ باز، محتوا، و تگ بسته تشکیل میشوند. ویژگیها (Attributes) اطلاعات اضافی به عناصر اضافه میکنند.
- عناصر باید به درستی تودرتو (Nested) شوند — همپوشانی تگها خطاست.
- عناصر خالی (Void) مانند <img> تگ بسته ندارند.
- عناصر اصلی: تصاویر (<img>)، سرفصلها (<h1>-<h6>)، پاراگرافها (<p>)، لیستها (<ul>/<ol>)، پیوندها (<a>).
- HTML5 عناصر معنایی جدید (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) را معرفی کرد.
- پس از HTML، گامهای بعدی: CSS، طراحی واکنشگرا، JavaScript، و ساخت پروژههای عملی.