جلسه سوم: شروع کار با HTML | آموزش عملی از صفر
به جلسه سوم دوره آموزش HTML در آوای وب خوش اومدی، جایی که قراره شروع کار با HTML رو مثل یه حرفه‌ای بترکونی! تو جلسه اول با معرفی HTML و تاریخچه‌ش آشنا شدی، تو جلسه دوم پیش‌نیازها و ساختار رو یاد گرفتی، و حالا وقتشه دستاتو آغشته کد کنی و اولین صفحه وب‌تو زنده کنی. تو این مقاله، تگ‌های پایه رو موشکافی می‌کنیم، با مثال‌های عملی جلو می‌ریم، و با یه پروژه ساده، وب رو از صفر می‌سازی. این فقط یه آموزش نیست یه سفره که تورو به قله طراحی وب می‌رسونه. آماده‌ای؟ بزن بریم!
آنچه در این مقاله می‌خوانید :
چرا شروع کار با HTML اینقدر مهمه؟
شروع کار با HTML مثل یاد گرفتن الفبای وب‌ست بدون اون، هیچ سایتی نمی‌تونی بسازی. از یه وبلاگ ساده تا غول‌های خبری مثل BBC، همه با HTML شروع شدن. این زبان پایه هر چیزیه که تو وب می‌بینی: متن، عکس، لینک، و حتی ویدیو. اگه از اول درست یادش بگیری، نه‌تنها سایتت قشنگ می‌شه، بلکه تو سئو هم می‌درخشی چون گوگل با تگ‌ها می‌فهمه صفحه‌ات چیه!
برای تازه‌کارا، شروع کار با HTML یه دروازه‌ست به دنیای طراحی وب. برای حرفه‌ای‌ها، تسلط بر تگ‌های پایه یعنی یه پایه محکم برای خلق شاهکارها. تو این جلسه، قراره این دروازه رو با هم باز کنیم!
ابزارهای لازم برای شروع کار با HTML
برای شروع کار با HTML، نیازی به تجهیزات پیچیده نداری همه‌چیز دم دستته! بیایم ببینیم چی لازم داریم:
- مرورگر: هر مرورگری کافیه، ولی ما کروم یا فایرفاکس رو پیشنهاد می‌کنیم، رایگانن و سریع کداتو نشون می‌دن.
- ویرایشگر متن: اگه تازه‌کار هستی، Notepad تو ویندوز یا TextEdit تو مک کافیه. بعداً که راه افتادی، VS Code رو امتحان کن یه دنیای دیگه‌ست!
- یه ذره حوصله: HTML ساده‌ست، ولی باید با دقت یادش بگیری تا تو CSS و جاوااسکریپت غوغا کنی.
همین الان این ابزارها رو آماده کن قراره با هم یه صفحه وب بسازیم!
گام اول: ساخت یه سند HTML
شروع کار با HTML یعنی ساخت یه فایل ساده که مرورگر بفهمه. اینجوری شروع کن:
- رو دسکتاپ یا یه پوشه کلیک راست کن، یه فایل تکست بساز و اسمشو بذار index.html.
- چرا index؟ چون استاندارد صفحه اصلی وب هست، سرورها اینو به‌عنوان نقطه شروع می‌شناسن.
- فایل رو با Notepad، TextEdit، یا هر ویرایشگری باز کن و تگ‌های پایه رو بنویس.
حالا بیایم تگ‌های اصلی رو با هم بشناسیم اینا اسکلت صفحه‌تن!
هر صفحه HTML با چندتا تگ اصلی شروع می‌شه که مثل اسکلت یه خونه‌ست بدون اینا هیچی سرپا نمی‌مونه! بیایم اینا رو با هم کشف کنیم:
<DOCTYPE html!> : اعلام نسخه به سبک باحال
!>این یه تگ معمولی نیست یه جور اعلامیه‌ست که به مرورگر می‌گه: «هی، من با HTML5 کار می‌کنم!» بدون اینم صفحه‌ات اجرا می‌شه، ولی با این انگار به همه می‌گی که کدت به‌روز و حرفه‌ایه. همیشه بذارش بالای فایل تا مرورگر بدونه چطور صفحه‌تو نشون بده و چه قوانینی رو برای خوندن کدت استفاده کنه.
تگ <html> :
جعبه بزرگ همه‌چیز تگ <html> مثل یه جعبه جادوییه که همه تگ‌های دیگه توش جا می‌گیرن هیچ تگی نمی‌تونه بیرونش باشه! با </html> بسته می‌شه و یه ویژگی باحالم داره: می‌تونی با اتریبیوت lang زبان صفحه‌تو مشخص کنی. مثلاً <html lang="fa"> می‌گه : «این صفحه فارسیه، آماده باش!»
تگ <head> :
پشت‌صحنه شگفت‌انگیز تگ <head> مثل گروه پشت‌صحنه یه فیلم بزرگه کارگردان، تهیه‌کننده، و تیم فنی که نمی‌بینی، ولی بدون اونها فیلم نمی‌چرخه! تو این بخش، چیزایی که تو مرورگر نشون داده نمی‌شن می‌ذاری: عنوان صفحه، متاها، تنظیمات سئو، و حتی اتصال به CSS و جاوااسکریپت. با </head> بسته می‌شه و یه جورایی مغز پنهان صفحه‌اته!
تگ <body>:
قلب تپنده صفحه تگ <body> جائیه که همه‌چیز زنده می‌شه، هر چیزی که می‌خوای کاربر ببینه، از متن و عکس بگیر تا لیست و جدول، اینجاست! با </body> تموم می‌شه و مثل صحنه یه تئاتره که بازیگرای اصلی (محتواهات) روش اجرا می‌کنن. بدون این تگ، صفحه‌ات فقط یه مغز بدون بدنه!
اتریبیوت‌ها: چاشنی تگ‌ها رو اضافه کن
تگ‌ها می‌تونن ویژگی اضافه داشته باشن بهشون می‌گن اتریبیوت. اینا اطلاعات بیشتری به تگ می‌دن:
"lang="fa: تو تگ <html> زبان صفحه رو فارسی می‌کنه مثلاً <"html lang="fa>. این به گوگل و مرورگر می‌گه صفحه‌ات چه زبانیه.
اتریبیوت‌ها یه اسم (مثل lang) و یه مقدار (مثل “fa”) دارن ساده‌ست، ولی وب‌تو حرفه‌ای‌تر می‌کنه!
اکثر تگ‌ها یه شروع و یه پایان دارن (مثل <body></body>)، ولی بعداً تگ‌هایی مثل<img>رو می‌بینی که تنهایی کار می‌کنن. این ساختار پایه هر صفحه وب هست بیا باهاش بازی کنیم!
پروژه عملی: اولین صفحه وب رو زنده کن
حالا که تگ‌ها رو شناختی، بیایم با یه پروژه عملی شروع کار با HTML رو حس کنیم:
فایل index.html رو باز کن.
این کد رو بنویس:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>این تگ‌ها الان چیزی تو مرورگر نشون نمی‌دن فقط اسکلت اصلی HTML رو می‌سازن. تو مثل یه هنرمندی که با این پایه‌ها یه اثر خفن خلق می‌کنه فقط باید بدونی هر تگ رو کجا بذاری!
بیا با مثال تگ‌های head و body رو بهتر بفهمیم!
حالا که تگ‌های اصلی رو شناختی، بیایم با یه چندتا مثال ساده ببینیم تگ‌های head و body دقیقاً چیکار می‌کنن
یه مثال باحال برای تگ head: تگ title
تگ title تو head می‌ره و مثل یه تابلوی خوش‌آمدگویی بالای مرورگرت نشون داده می‌شه یه جورایی به همه می‌گه: «این صفحه درباره چیه!» مثلاً وقتی می‌نویسی «آموزش HTML»، این عنوان بالای مرورگرت میاد و به کاربر و گوگل می‌گه موضوع صفحه‌ات چیه. یه توضیح کوتاه و باحال از محتواته! بعداً تو جلسات مربوط به head بیشتر برات بازش می‌کنیم، ولی الان اینو ببین:
<head>
<title> HTML آموزش </title>
</head>اینجوری هر کی مرورگرشو باز کنه، می‌فهمه قراره چی یاد بگیره، مثل اسم یه کتاب رو جلدش!
یه مثال خفن برای تگ body: تگ هدینگ
حالا بریم سراغ body اینجا جائیه که همه‌چیز زنده می‌شه! مثلاً تگ h1 رو می‌ذاری تو body و یه تیتر بزرگ و قشنگ رو صفحه‌ات نشون می‌ده، مثل سرتیتر یه روزنامه که همه اول اونو می‌بینن. بعداً تو جلسات بعدی حسابی درباره تگ‌های هدینگ حرف می‌زنیم، ولی الان اینو امتحان کن:
<body>
<h1> HTML آموزش </h1>
</body>با این کد، یه تیتر گنده تو مرورگرت می‌بینی که انگار داره بهت می‌گه: «بیا شروع کنیم!»
پس تا این قسمت کدهای ما به این صورت خواهد بود
<!DOCTYPE html>
<html lang="fa">
<head>
<title> HTML آموزش </title>
</head>
<body>
<h1> HTML آموزش </h1>
</body>
</html>حالا در گام آخر باید این فایلی که ایجاد کردیم را با فرمت html ذخیره کنیم و اون رو توسط مرورگر باز کرده تا بتوانیم تغییراتی رو که اعمال کردیم در مرورگر مشاهده کنیم.
نکات طلایی برای شروع کار با HTML
برای اینکه از اول درست شروع کنی، این نکات رو یادت باشه:
- تگ‌ها رو درست ببند: هر تگی که باز می‌کنی (مثل <body>)، حتماً با <body/> ببندش وگرنه صفحه‌ات به‌هم می‌ریزه!
- از اتریبیوت‌ها استفاده کن: مثلاً “lang=”fa رو تو <html> بذار تا سایتت استاندارد باشه.
- تست کن: هر تغییری دادی، تو مرورگر بازش کن و چک کن این بهترین راه یادگیریه.
کدت رو با W3C Validator تست کن
می‌خوای مطمئن شی کدهای HTML تو استاندارد و بدون خطاست؟ W3C Validator یه ابزار رایگان و قدرتمنده که کدهای تو رو بررسی می‌کنه و خطاها یا هشدارهایی که ممکنه روی سئو، دسترسی‌پذیری، یا عملکرد تاثیر بذاره رو نشون می‌ده. تو این بخش، قدم‌به‌قدم یاد می‌گیری چطور از این ابزار استفاده کنی و کدت رو بهینه کنی! 🚀
چطور کدت رو با W3C Validator تست کنی؟
سه روش برای تست کد با W3C Validator وجود داره: آپلود فایل، وارد کردن URL، یا جای‌گذاری مستقیم کد. ما روش جای‌گذاری کد رو توضیح می‌دیم، چون ساده و کاربردیه.
- ورود به سایت: به https://validator.w3.org برو و گزینه Validate by Direct Input رو انتخاب کن.
- جای‌گذاری کد: کد HTML خودت رو تو باکس متنی کپی کن. مثلاً:
- اجرای تست: روی دکمه Check کلیک کن. ابزار کد رو بررسی می‌کنه و نتایج رو نشون می‌ده.
- تحلیل نتایج: اگه خطا یا هشداری بود، توضیحاتش رو می‌بینی. اگر بدون مشکل باشه کدت رو تایید می‌کنه.
مثلاً برای این کد:
<!DOCTYPE html>
<html lang="fa">
<head>
<title> HTML آموزش </title>
</head>
<body>
<h1> HTML آموزش </h1>
</body>
</html>کد رو چک می‌کنه مشکلی نداشته باشه مثل تصویر پایین تاییدش می‌کنه. برای دوستان تازه کار بسیار مفیده و پیشنهاد می‌شه همیشه کدهاشون رو بررسی کنن.
جمع‌بندی: شروع کار با HTML، قدم به دنیای وب
تو این جلسه، شروع کار با HTML رو با تگ‌های پایه، اتریبیوت‌ها، و یه پروژه عملی تجربه کردی. حالا که این پایه رو ساختی، وقتشه بری به جلسه چهارم: تگ‌های هدینگ و وب رو عمیق‌تر بترکونی. با آوای وب، هر قدم یه پله‌ست به سمت بهترین شدن ما تا آخر خط باهاتیم!
مخترع وب بعدی تویی؟ بیا ایده‌هات رو فریاد بزن!
شروع کار با HTML چه حسی داشت؟ نظرت راجب این مقاله چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.