اگر قصد دارید طراحی سایت و توسعه وب را از پایه یاد بگیرید، HTML یکی از اولین مهارت‌هایی است که باید با آن آشنا شوید. تقریباً تمام صفحاتی که در مرورگر مشاهده می‌کنیم، برای مشخص کردن ساختار و محتوای خود از HTML استفاده می‌کنند.
در این آموزش قرار نیست از همان ابتدا وارد تگ‌ها و کدنویسی‌های پیچیده شویم. ابتدا می‌خواهیم بدانیم HTML چیست، چه کاری انجام می‌دهد، چه تفاوتی با CSS و JavaScript دارد و چرا یادگیری آن برای طراحی سایت ضروری است.
این مطلب اولین درس از مجموعه آموزش رایگان HTML ویترین وردپرس است و برای شروع آن به هیچ دانش قبلی در زمینه برنامه‌نویسی یا طراحی سایت نیاز ندارید.
HTML چیست؟
HTML مخفف عبارت HyperText Markup Language به معنی «زبان نشانه‌گذاری ابرمتن» است.
HTML زبانی است که با استفاده از آن می‌توانیم ساختار و معنای محتوای یک صفحه وب را مشخص کنیم.
برای مثال، به کمک HTML به مرورگر می‌گوییم:
- این قسمت عنوان اصلی صفحه است.
- این قسمت یک پاراگراف است.
- این متن باید به صفحه دیگری لینک شود.
- این قسمت یک تصویر است.
- این موارد یک فهرست هستند.
- این بخش شامل یک فرم است.
- این قسمت محتوای اصلی یا بخش جانبی صفحه است.
بنابراین HTML در اصل اسکلت و ساختار صفحه وب را تشکیل می‌دهد.
آیا HTML یک زبان برنامه‌نویسی است؟
HTML را معمولاً نباید یک زبان برنامه‌نویسی بدانیم.
HTML یک زبان نشانه‌گذاری یا Markup Language است.
زبان‌های برنامه‌نویسی معمولاً امکاناتی مانند شرط‌ها، حلقه‌ها، متغیرها و اجرای منطق برنامه را در اختیار برنامه‌نویس قرار می‌دهند؛ اما وظیفه اصلی HTML مشخص کردن ساختار و مفهوم محتوای صفحه است.
برای مثال:
<h1>آموزش HTML</h1>
<p>به اولین آموزش HTML خوش آمدید.</p>در این کد، با استفاده از HTML مشخص کرده‌ایم که:
h1یک عنوان اصلی است.pیک پاراگراف است.
مرورگر این کد را می‌خواند و محتوای آن را به شکل مناسب در صفحه نمایش می‌دهد.
در درس‌های بعدی دقیق‌تر با مفهوم تگ، عنصر و ساختار کدهای HTML آشنا خواهیم شد.
HTML چه کاربردی دارد؟
HTML پایه ساخت صفحات وب است و برای تعریف بخش‌های مختلف یک صفحه استفاده می‌شود.
برای نمونه با HTML می‌توانیم موارد زیر را در صفحه ایجاد یا تعریف کنیم:
عنوان‌ها
عنوان اصلی و زیرعنوان‌های یک صفحه با عناصر HTML مشخص می‌شوند.
متن و پاراگراف
متن‌های معمولی، پاراگراف‌ها، نقل‌قول‌ها و بخش‌های مختلف محتوا ساختار HTML دارند.
لینک‌ها
یکی از مهم‌ترین ویژگی‌های وب امکان ارتباط صفحات مختلف با یکدیگر است.
HTML به ما اجازه می‌دهد یک متن، تصویر یا عنصر دیگر را به صفحات مختلف سایت یا سایت‌های دیگر لینک کنیم.
تصاویر
تصاویر موجود در صفحات وب نیز با عناصر HTML در ساختار صفحه قرار می‌گیرند.
فهرست‌ها
فهرست‌های شماره‌دار و بدون شماره با HTML ساخته می‌شوند.
جدول‌ها
برای نمایش اطلاعات جدولی می‌توانیم از ساختار مخصوص جدول در HTML استفاده کنیم.
فرم‌ها
فرم ورود، ثبت‌نام، جستجو، تماس با ما و بسیاری از فرم‌های دیگری که در وب مشاهده می‌کنید دارای ساختار HTML هستند.
محتوای صوتی و تصویری
HTML امکاناتی برای قرار دادن فایل‌های صوتی و ویدئویی در صفحات وب نیز در اختیار ما قرار می‌دهد.
اما نکته مهم این است که HTML فقط درباره «نمایش دادن» محتوا نیست؛ بلکه تا حد امکان باید معنی و نقش هر بخش از محتوا را نیز مشخص کند.
HTML چگونه کار می‌کند؟
فایل‌های HTML فایل‌های متنی هستند و معمولاً پسوند آنها .html است.
برای مثال:
index.htmlداخل این فایل، کدهای HTML نوشته می‌شوند.
مرورگری مانند Chrome، Firefox یا Edge فایل HTML را دریافت می‌کند، ساختار آن را می‌خواند و نتیجه را به شکل یک صفحه قابل مشاهده به کاربر نمایش می‌دهد.
یک صفحه بسیار ساده HTML می‌تواند چنین ساختاری داشته باشد:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>اولین صفحه من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین صفحه HTML من است.</p>
</body>
</html>اگر در حال مشاهده این کد برای اولین بار هستید، نگران بخش‌های مختلف آن نباشید.
قرار نیست در همین درس همه آنها را حفظ کنیم.
در آموزش‌های بعدی تک‌تک قسمت‌های این ساختار را بررسی خواهیم کرد و خودمان از صفر یک فایل HTML می‌سازیم.
تگ HTML چیست؟
HTML از عناصری تشکیل شده است که معمولاً آنها را با تگ‌ها در کد مشخص می‌کنیم.
برای مثال:
<p>این یک پاراگراف است.</p>در این مثال:
<p>تگ شروع است و:
</p>تگ پایان محسوب می‌شود.
متنی که میان آنها قرار گرفته، محتوای عنصر است.
نمونه دیگری را ببینید:
<h1>آموزش طراحی سایت</h1>عنصر h1 مشخص می‌کند که عبارت «آموزش طراحی سایت» عنوان اصلی این بخش از صفحه است.
البته همه عناصر HTML دقیقاً به همین شکل نیستند و بعضی از آنها ساختار متفاوتی دارند. در درس مربوط به ساختار تگ‌ها این موضوع را کامل بررسی می‌کنیم.
تفاوت HTML با CSS چیست؟
یکی از سؤال‌های رایج افراد مبتدی این است که HTML و CSS چه تفاوتی با یکدیگر دارند.
به زبان ساده:
HTML ساختار و معنای محتوا را مشخص می‌کند و CSS ظاهر آن را کنترل می‌کند.
فرض کنید می‌خواهیم یک عنوان در صفحه داشته باشیم.
با HTML مشخص می‌کنیم:
<h1>آموزش طراحی سایت</h1>اما اگر بخواهیم رنگ، اندازه، فونت، فاصله یا نحوه نمایش این عنوان را تغییر دهیم، معمولاً از CSS استفاده می‌کنیم.
برای مثال:
h1 {
color: blue;
}بنابراین می‌توانیم به شکل ساده تصور کنیم:
HTML = ساختار صفحه
CSS = ظاهر و طراحی صفحه
به همین دلیل در مسیر آموزش طراحی وب، ابتدا HTML و سپس CSS را یاد خواهیم گرفت.
تفاوت HTML با JavaScript چیست؟
JavaScript نقش متفاوتی دارد.
JavaScript معمولاً برای اضافه کردن رفتار، منطق و تعامل به صفحات وب استفاده می‌شود.
مثلاً:
- با کلیک روی یک دکمه پنجره‌ای باز شود.
- اطلاعات بدون بارگذاری مجدد صفحه دریافت شود.
- یک منوی تعاملی باز و بسته شود.
- محتوای صفحه براساس عملکرد کاربر تغییر کند.
- اطلاعات یک فرم قبل از ارسال بررسی شود.
به صورت بسیار ساده می‌توان سه فناوری اصلی سمت کاربر وب را این‌گونه در نظر گرفت:
HTML → ساختار و محتوا
CSS → ظاهر و چیدمان
JavaScript → رفتار و تعامل
البته با پیشرفت در طراحی وب متوجه خواهیم شد که مرز بین وظایف آنها همیشه به این سادگی نیست، اما برای شروع این تقسیم‌بندی درک مناسبی از نقش هرکدام به ما می‌دهد.
آیا می‌توان فقط با HTML سایت ساخت؟
بله.
حتی فقط با HTML هم می‌توان یک وب‌سایت ساده شامل چند صفحه، متن، تصویر و لینک ایجاد کرد.
اما چنین سایتی از نظر ظاهر و امکانات بسیار محدود خواهد بود.
برای ساخت سایت‌های مدرن معمولاً HTML در کنار فناوری‌های دیگری مانند CSS و JavaScript استفاده می‌شود.
در پروژه‌های بزرگ‌تر ممکن است فناوری‌های دیگری مانند PHP، پایگاه داده و سیستم‌های مدیریت محتوا مانند وردپرس نیز وارد کار شوند.
اما HTML همچنان پایه ساختار صفحات وب را تشکیل می‌دهد.
آیا برای یادگیری وردپرس به HTML نیاز داریم؟
برای استفاده معمولی از وردپرس لازم نیست حتماً برنامه‌نویس باشید یا HTML را به‌طور کامل بلد باشید.
اما اگر بخواهید در زمینه‌هایی مانند:
- طراحی قالب وردپرس
- شخصی‌سازی سایت
- طراحی صفحات حرفه‌ای
- رفع مشکلات ظاهری
- توسعه قالب
- توسعه افزونه
- طراحی سایت حرفه‌ای
فعالیت کنید، آشنایی با HTML بسیار مفید و در بسیاری از موارد ضروری خواهد بود.
در واقع یادگیری HTML کمک می‌کند بهتر متوجه شوید مرورگر چگونه ساختار صفحات سایت شما را دریافت و نمایش می‌دهد.
برای یادگیری HTML به چه پیش‌نیازی احتیاج داریم؟
خبر خوب این است که برای شروع HTML تقریباً به هیچ دانش برنامه‌نویسی قبلی نیاز ندارید.
اگر بتوانید با فایل‌ها و پوشه‌های ویندوز کار کنید و از مرورگر استفاده کنید، می‌توانید HTML را شروع کنید.
برای تمرین فقط به چند ابزار ساده احتیاج داریم:
- یک کامپیوتر
- یک مرورگر مانند Google Chrome
- یک ویرایشگر کد مانند Visual Studio Code
در آموزش بعدی این ابزارها را آماده می‌کنیم و اولین فایل HTML خودمان را خواهیم ساخت.
آیا یادگیری HTML سخت است؟
HTML یکی از مناسب‌ترین فناوری‌ها برای شروع یادگیری طراحی وب است.
ساختار اولیه آن پیچیده نیست و می‌توانید خیلی زود نتیجه کدی را که نوشته‌اید در مرورگر مشاهده کنید.
اما یادگیری چند تگ به معنی یادگیری کامل HTML نیست.
برای نوشتن HTML اصولی باید به مرور با موضوعاتی مانند:
- ساختار صحیح سند
- عناصر معنایی
- لینک‌ها
- تصاویر
- فرم‌ها
- جدول‌ها
- دسترس‌پذیری
- ساختار صحیح عنوان‌ها
- اصول استاندارد نوشتن کد
نیز آشنا شوید.
در این مجموعه آموزشی همه این موضوعات را به ترتیب و همراه با مثال بررسی خواهیم کرد.
در دوره آموزش HTML چه چیزهایی یاد می‌گیریم؟
مسیر آموزشی ما از مباحث پایه شروع می‌شود و به تدریج به موضوعات کاربردی‌تر می‌رسد.
در ادامه دوره با موضوعاتی مانند این موارد آشنا خواهیم شد:
- ساخت اولین فایل HTML
- ساختار استاندارد یک سند HTML
- تگ‌ها و عناصر HTML
- Attributeها
- عنوان‌ها و پاراگراف‌ها
- فرمت‌بندی متن
- لینک‌ها
- تصاویر
- فهرست‌ها
- جدول‌ها
- فرم‌ها
- عناصر معنایی HTML
- محتوای صوتی و تصویری
- اصول دسترس‌پذیری
- نکات مرتبط با SEO
- روش نوشتن HTML تمیز و استاندارد
در طول آموزش فقط تگ‌ها را حفظ نمی‌کنیم؛ هدف این است که یاد بگیریم چه زمانی، چرا و چگونه از هر عنصر استفاده کنیم.
جمع‌بندی
HTML پایه اصلی ساختار صفحات وب است.
با HTML مشخص می‌کنیم هر قسمت از محتوای صفحه چه نقشی دارد؛ برای مثال عنوان، پاراگراف، لینک، تصویر، فهرست یا فرم است.
HTML یک زبان نشانه‌گذاری است و برای کنترل ظاهر صفحات معمولاً از CSS و برای ایجاد رفتار و تعامل از JavaScript استفاده می‌شود.
اگر هیچ تجربه‌ای در طراحی سایت ندارید، HTML نقطه بسیار مناسبی برای شروع است.
در درس بعدی وارد بخش عملی می‌شویم؛ ابزارهای مورد نیاز را آماده می‌کنیم، اولین فایل HTML را می‌سازیم و نتیجه کد خودمان را در مرورگر مشاهده می‌کنیم.
درس بعدی: شروع کار با HTML؛ ابزارهای لازم و ساخت اولین صفحه وب
حبیب قنبری
نویسنده و مدرس در ویترین؛ علاقه‌مند به انتقال تجربه‌های کاربردی و قابل اجرا.
مشاهده همه نوشته‌ها
1 دیدگاه