HTML چیست؟ آشنایی با ساختار اولیه یک صفحه وب
هر وبسایتی که میبینی از ساده‌ترین بلاگ تا پیچیده‌ترین فروشگاه، همه از HTML شروع کردن😎.تو این آموزش قراره بفهمی HTML چیه،چرا پایه همه صفحات وبه و چطور با ساختار اولیه فایل HTML اولین صفحه‌ت رو در ۱۰ دقیقه بسازی. اگر میخوای از صفر وب دیزاین رو شروع کنی، این اولین قدم مهمه🚀.
HTML چیست و چرا پایه‌ترین زبان ساخت صفحات وب است؟
فکر میکنی وبسایت‌های خفن با جادو ساخته میشن؟نه داداش،همه‌شون از یه زبان ساده شروع کردن که اسمش HTML هست😎🌐 HTML مخفف HyperText Markup Language هست و زبان نشانه گذاری ابرمتن نامیده میشه، یعنی پایه و اساس هر صفحه وب رو میسازه بدون اینکه برنامه نویسی پیچیده باشه.تصور کن میخوای اولین وبسایتت رو بسازی،HTML مثل اسکلت بدن عمل میکنه که مشخص میکنه متن کجا باشه،عکس کجا، دکمه کجا، بدون HTML نه CSS کار میکنه نه JavaScript .هر سایتی که میبینی از google.com تا instagram ،اول با HTML ساختاربندی شده.
<!DOCTYPE html>
<html>
<head>
<title>اولین صفحه من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
</body>
</html>
این کد ساده نشون میده ساختار اولیه فایل HTML برای مبتدیان چقدر آسونه،فقط کپی کن تو notepad ذخیره کن با .html و تو مرورگر باز کن. چرا HTML پایه‌ترین زبانه؟ چون بدون اون هیچ محتوایی تو وب نمایش داده نمیشه، مثل آجر خونه که بدونش دیوار نمیشه ساخت🏗️. اگر میخوای آموزش HTML از صفر شروع کنی، از همین doctype و تگ‌های base شروع کن تا سریع اولین صفحه‌ت رو بسازی🚀.
معرفی ساختار اولیه فایل :HTML تگ‌ها و بخش‌های مهم صفحه وب
اگه ساختار اولیه فایل HTML رو درست یاد بگیری، هر صفحه وبی که بعداً میسازی برات مثل لگو چیدن میشه نه معما🧩😎 وقتی میخوای آموزش ساختار اولیه یک صفحه HTML رو شروع کنی،اولین چیز اینه که بدونی هر فایل HTML تقریبا از یک قالب ثابت تکراری شروع میشه. این قالب مثل اسکلت اصلی صفحه وبه که از چند تگ مهم تشکیل شده !DOCTYPE html برای معرفی نوع سند،تگ html به عنوان ریشه صفحه،تگ head برای اطلاعات پشت صحنه و تگbody برای محتوایی که کاربر میبینه. اگر این چهار بخش رو قشنگ درک کنی، بقیه مسیر یادگیری HTML از صفر برات خیلی راحت‌تر میشه🤝. یک نمونه ساختار اولیه فایل HTML برای مبتدیان میتونه این شکلی باشه 👇
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>اولین صفحه وب من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین پاراگراف من در HTML هست.</p>
</body>
</html>اینجا head جاییه که چیزهایی مثل title، meta و لینک فایل های CSS و JavaScript رو میذاری،یعنی چیزهایی که به سئو،نمایش درست فونت ها و استایل ها کمک میکنن ولی کاربر به صورت مستقیم نمیبینه. در عوض،هر چیزی که کاربر روی صفحه میبینه مثل متن،عکس،دکمه، منو و… باید داخل تگ body قرار بگیره. اگر همیشه یادت باشه چیزهای پشت صحنه تو head ،چیزهای قابل دیدن تو body، خیلی سریع فرق بخش‌های مهم صفحه وب رو میفهمی🚀.
نکته مهم دیگه اینه که HTML از تگ ها ساخته شده و هر تگ معمولاً یک تگ باز و یک تگ بسته داره، مثل p یا h1 که به مرورگر میگه این قسمت متن پاراگرافه یا عنوان. با تمرین روی همین ساختار ساده، میتونی کم کم تگ های بیشتری مثل header، footer ،nav ،section و article رو اضافه کنی تا صفحه‌هات هم مرتب‌تر بشه هم برای موتورهای جستجو و سئو قابل فهم‌تر باشه.این اولین قدم جدی برای ساختن صفحات وب حرفه‌ای با HTML هست✨.
چگونه با تگ‌های پایه HTML اولین صفحه وب ساده خود را بسازیم؟
آماده‌ای اولین صفحه HTML خودت رو بسازی؟ فقط با ۱۰ خط کد واقعی، یه وبسایت کامل داری که به همه نشون بدی😍🚀 حالا که ساختار اولیه فایل HTML رو یاد گرفتی، وقتشه دست به کار بشی و اولین صفحه وب ساده با تگ‌های پایه HTML بسازی😎. یه فایل جدید بساز به اسم index.html، کد زیر رو کپی کن توش و با مرورگر باز کن تا نتیجه رو ببینی:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>وبسایت من</title>
</head>
<body>
<h1>به وبسایت من خوش اومدی!</h1>
<p>این اولین صفحه وب ساخته شده با <strong>HTML</strong> هست.</p>
<img src="logo.png" alt="لوگوی من" width="200">
<h2>درباره من</h2>
<p>من یک <em>برنامه نویس</em> وب هستم و HTML رو یاد میگیرم.</p>
<a href="https://google.com">برو گوگل</a>
</body>
</html>این کد کامل نشون میده چطور تگ‌های پایه HTML با هم کار میکنن :h1 و h2 برای عنوان ،p برای متن ،strong برای بولد کردن ،em برای ایتالیک ،img برای عکس و a برای لینک 🌟.meta viewport هم باعث میشه صفحه رو موبایل عالی نمایش بده. حالا خودت امتحان کن: عنوان رو عوض کن،یه عکس دیگه بذار،لینک رو به سایت مورد علاقه‌ت تغییر بده.این اولین گام مهمه برای ساخت صفحات وب حرفه‌ای با HTML ، چون یاد میگیری هر تگ چه کاری انجام میده و چطور باهم ترکیب میشن🚀. فقط با همین تگ‌های ساده، میتونی رزومه ،portfolio یا landing page بسازی، پس همین الان شروع کن و اولین وبسایتت رو deploy کن✨.
حالا که doctype ،head ،body و تگ‌های پایه رو یاد گرفتی،آماده‌ای هر محتوایی رو به وب تبدیل کنی✨. فقط کافیه فایل html بسازی، کد رو کپی کنی و تو مرورگر باز کنی،اولین صفحه‌ت آماده‌ست! از همین امروز portfolio یا رزومه‌ت رو بساز🌟.
این مقاله به درد یکی از رفیقات می‌خوره؟
با یه کلیک براش بفرست تا اونم تو این مسیر همراهت بشه
مقالات مرتبط با این موضوع
برای ادامه مسیرت اینا رو از دست نده
تگ پاراگراف p در HTML چیست؟ تفاوت آن با تگ inline مثل span
متن‌هات قاطی پاتی میشن؟ layout خراب میشه؟تفاوت block p با inline span رو بفهم تا دیگه مشکل نداشته باشی🎯.تو این آموزش میفهمی هر کدوم کجا استفاده بشن تا صفحاتت مثل حرفه‌ای‌ها مرتب بشه😎.
آموزش تگ‌های h1 تا h6 در HTML
عنوان‌های صفحه‌ت مثل فهرست کتاب عمل میکنن،به کاربر و گوگل نشون میدن هر بخش درباره چیه😍. تو این آموزش تفاوت h1 تا h6 ،ترتیب درست و ترفندهای سئو heading tags رو یاد میگیری تا صفحاتت هم مرتب بشه هم رتبه گوگل بگیره🔍.