اگر میخواهید برنامه‌نویس فرانت‌اند شوید، یکی از مواردی که به شما پیشنهاد می‌دهم، یادگیری زبان نشانه‌گذاری HTML است. HTML که به معنای "زبان نشانه‌گذاری ابرمتن" یا "Hypertext Markup Language" میباشد، در واقع یک زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است. HTML پایه اکثر صفحات وب میباشد.
اگر میخواهید برنامه‌نویس فرانت‌اند شوید، یکی از مواردی که به شما پیشنهاد می‌دهم، یادگیری زبان نشانه‌گذاری HTML است. HTML که به معنای "زبان نشانه‌گذاری ابرمتن" یا "Hypertext Markup Language" میباشد، در واقع یک زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است. HTML پایه اکثر صفحات وب میباشد.
HTML از مؤلفه‌های مختلفی تشکیل شده است، از جمله برچسب‌ها (tags)، ویژگی‌ها (attributes) و عناصر (elements). در این مقاله، تمرکز ما بر روی تگ‌های HTML قرار دارد. ما در کد خود از تگ‌های HTML استفاده می‌کنیم تا به مرورگر بگوییم که چگونه با عنوان‌ها، پاراگراف‌ها، تصاویر و سایر عناصر رفتار کند.
سرورها تگ‌های HTML را از بالا به پایین میخوانند. هیچ محدودیتی برای تعداد تگ‌های HTML در صفحه وب وجود ندارد.
- تمامی تگ‌های HTML میان <> قرار میگیرند.
- هر تگ HTML یک وظیفه خاصی را انجام میدهد.
- اکثر تگ‌های HTML یک تگ باز <tag> و یک تک بسته </tag> دارند.
تفاوت میان تگ‌های HTML، عناصر HTML، ویژگی‌های HTML
بیشتر مردم اصطلاح "تگ‌های HTML" و "عناصر HTML" را به جای هم استفاده میکنند. اما آیا آنها با هم یکی هستند؟ از نظر فنی، عناصر HTML و تگ‌های HTML متفاوت هستند؛ تگ‌های HTML، عناصر HTML را تعریف میکنند.
بگذارید با یک مثال توضیح دهیم:
<p> این یک پاراگراف هست </p>
<p> یک مثال از تگ‌ها در HTML است.
ویژگی‌های HTML اطلاعات اضافی درباره عناصر HTML در یک سند ارائه می‌دهند. ویژگی‌ها در داخل عناصر HTML قرار دارند؛ مثال:
<button id="submitPayment" class="bg-green-500 text-white">پرداخت</button>
تگ‌هایی از HTML که همه باید بدانند
HTML یک زبان نشانه‌گذاریه که در طول سال‌ها از زمانی که تیم برنزلی آن را در سال 1993 معرفی کرد، تکامل یافته است. اولین نسخه از HTML شامل 18 تگ بود. با هر نسخه جدید از HTML، تگ‌های جدیدی به آن اضافه میشد؛ آخرین آپدیت آن هم در سال 2014 با نسخه HTML5 انجام شد.
مقایسه‌ای دقیقه بین HTML و HTML5 نشان میدهد که در HTML5 تگ‌های معنایی مثل <article>، <header> و <footer> وجود دارد که به وضوح محتوا را توصیف میکند. در هر حال بیش از 100 تگ HTML داریم. برخی از محبوب ترین و مهمترین تگ‌هایی که باید بدانید آورده شده است:
1. <!DOCTYPE>
DOCTYPE از نظر فنی یک تگ نیست، بلکه به مرورگر توضیح میدهد که چه فایلی قرار است بارگزاری شود، این تگ به مرورگر میگوید که قرار است چه نوع HTML بارگذاری میشود.
در HTML5 شما میتوانید فایل خود را با استفاده از این دو روش معرفی کنید:
<!DOCTYPE html>
یا
<!doctype html>
نکته: به یاد داشته باشید که تگ DOCTYPE نیازی به بسته شدن ندارد و به حروف بزرگ و کوچک هم حساس نیست.
2. <html> </html>
تگ <html> ... </html> بعد از تگ DOCTYPE می‌آيد. این تگ سند HTML را به عنوان یک صفحه وب تعریف میکند. تمامی تگ‌های دیگر باید داخل این تگ قرار بگیرند. تگ html قرار میگیرد در اول و آخر کد سند HTML صفحه وب.
تگ html به این شکل استفاده میشود:
<html> محتوا </html>
3. <head> </head>
بخش head از یک سند HTML به صورت <head> نشان داده میشود. این تگ بین تگ <html> قرار میگیرد و اطلاعات کلی درباره‌ی وبسایت به ما میدهد.
تگ <head> دارای تگ‌های داخلی دیگری هم هست که جزئیاتی از مثل عنوان صفحه، اسم نویسنده و ... را دارا میباشد. محتوایی که داخل تگ head گذاشته میشود در صفحه وبسایت نمایش داده نمیشود.
ساختار تگ <head> به این شکل میباشد:
<head> .... </head>
4. <title> </title>
تگ <title> عنوان صفحه را مشخص میکند. این تگ داخل تگ <head> قرار میگیرد. تگ <title> نمایش خواهد داد عنوان را در نوار عنوان (title bar) در صفحه مرورگر.
ساختار تگ <title> به این شکل میباشد:
<title> آموزش تگ‌های HTML برای برنامه نویسان مبتدی </title>
5. <body> </body>
تگ <body> تمامی محتوای قابل مشاهده در وبسایت را نمایش میدهد. عکس‌ها، لینک‌ها، متن‌ها، ویدیو‌ها و سایر موارد ... را میتوانید در تگ body قرار دهید.
بعضی از تگ‌های دیگه که میتونید آنها را در تگ body قرار دهید تگ <p> برای پاراگراف، تگ <a> برای لینک، تگ <img> برای تصاویر، تگ <strong> یا <b> برای ایجاد متن‌های درشت و تگ <ol> برای نمایش به ترتیب مقادیر لیست مورد استفاده قرار میگیرند.
ساختار تگ <body> به این شکل هست:
<body> محتوا </body>
6. تگ‌های H1 تا H6
در HTML تگ‌های Heading از h1 تا h6 وجود دارند، هر یک از این تگ‌ها بر اساس عدد که از 1 تا 6 به صورت <h1>, <h2>, <h3>, <h4>, <h5>, <h6> هستند تعریف شده اند.
تگ <h1> بزرگ‌ترین تگ و تگ <h6> هم کوچک ترین تگ Heading میباشد، هر چه از عدد تگ Heading بیشتر میشود اندازه فونت آن کوچکتر میشود. (که میشود با استفاده از css آنها را تغییر داد)
در HTML میتوانید از تگ‌های Heading به شکل زیر استفاده کنید:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
تگ‌های <h1> تا <h6> داخل تگ body قرار میگیرند.
در اینجا تگ <h1> را بین تگ‌های باز و بسته body قرار داده‌ایم:
<body>
<h1> عنوان مقاله </h1>
</body>
7. <p> </p>
تگ <p></p> یا به اختصار تگ پاراگراف استفاده میشود وقتی که میخواهید از ساختار محتوا به شکل پاراگراف استفاده کنید. اگر شما بیشتر از یک پاراگراف در صفحه خود نیاز دارید باید چندین <p></p> داخل کدتان قرار بدهید. فشار دادن دکمه `enter` در ادیتور شما باعث ایجاد شدن پاراگراف نمیشود. توجه داشته باشید که تگ‌های پاراگراف باید بین تگ‌های باز و بسته body قرار بگیرد.
ساختار تگ <p> به این شکل میباشد:
<p> متن خود را اینجا وارد کنید </p>
اگر بخواهید که ۴ پاراگراف در صفحه خود داشته باشید باید طبق شکل زیر از پاراگراف‌ها استفاده کنید.
<body>
<p> محتوا برای پاراگراف اول </p>
<p> محتوا برای پاراگراف دوم </p>
<p> محتوا برای پاراگراف سوم </p>
<p> محتوا برای پاراگراف چهارم </p>
</body>
8. <b> </b>
تگ <b></b> یا bold، هر متنی را که بین دو تگ باز و بسته <b> قرار بدهید به شکل bold مینویسد. شما میتوانید تگ bold را بین تگ‌های باز و بسته <h1> یا حتی <p> قرار بدهید.
اجازه دهید با چند مثال تگ <b> را به شما توضیح بدهم:
<b> نمایش متن به صورت bold شده </b>
میتوانید تنها یک کلمه از متن در تگ <h1> را هم bold کنید:
<h1>
مقاله آموزش <b> برنامه نویسی </b> وبسایت
</h1>
در اینجا متن `برنامه نویسی` bold شده است.
9. <i> </i>
تگ <i> متنی را که بین این تگ بنویسید را به شکل ایتالیک (italic) مینویسد، مثال:
<p> من <i> برنامه نویس </i> وبسایت هستم </p>
کلمه `برنامه نویس` در کد بالا به شکل ایتالیک نوشته شده است.
10. <u> </u>
تگ <u> متنی را که بین این تگ بنویسید، یک خط (underline) زیر آن میکشد، مثال:
<p> من <u> برنامه نویس </u> وبسایت هستم </p>
در اینجا زیر کلمه `برنامه نویس` یک خط (underline) اضافه شده است.
11. <center> </center>
تگ <center> وقتی استفاده میشود که ما میخواهیم که محتوا را در وسط صفحه قرار دهیم.
برای مثال اگر شما یک تگ <h2> دارید که میخواهید آن را وسط چین کنید میتوانید از تگ <center> استفاده کنید، مثال:
<center>
<h2> آموزش HTML - دوره آموزش HTML مقدماتی</h2>
</center>
12. <span> </span>
تگ <span> به طور کلی به شکل inline می‌آید و هیچ استایل پیشفرضی ندارد. شما میتوانید از span برای گروهی از متن ها استفاده کنید که هیچ استایل پیشفرضی نداشته باشند.
همچنین شما میتوانید span را در تگ‌های Heading و پاراگراف‌ها قرار دهید؛ مثال:
<h2> مقاله آموزشی <span> تگ‌های HTML </span> در وبسایت میموک </h2>
<p> مقاله آموزشی <span> تگ‌های HTML </span> در وبسایت میموک </p>
13. <div> </div>
تگ division خلاصه شده div هست. این تگ به شما این اجازه رو میدهد که تگ‌های مختلفی رو در سند HTML خود قرار دهید.
یک تگ div میتواند دریافت کند یک `class` خارجی با استفاده از CSS.
در اینجا برای شما یک مثال آمورده‌ایم که چطوری یک تگ <div> میتواند تگ‌های h1، h2، p و ... را بین تگ‌های باز و بسته خود داشته باشد.
<div>
<h1> آموزش HTML </h1>
<h2> آموزش تگ‌های مهم HTML </h2>
<p> HTML یک زبان نشانه گذاری میباشد </p>
</div>
14. <em> </em>
تک emphasis یا <em>، برای تاکیید کردن روی کلمات در سند HTML استفاده میشود.
محتواهایی که بین تگ <em> قرار دارند، به شکل ایتالیک نشان داده میشوند.
در اینجا یک مثال از تگ <em> براتون آوردیم:
<p> یک روز <em> ۲۴ ساعت </em> هست</p>
15. <sup></sup>
تگ <sup> یا superscript به ما اجازه میدهد که متنی رو که بین تگ sup نوشتیم بالاتر از بقیه متن قرار دهد. یک مثال عالی برای استفاده از تگ <sup> توان در ریاضی میباشد.
در اینجا مثالی از ساختار تگ <sup> براتون آورده‌ایم:
<p>2<sup>3</sup> = 8</p>
16. <sub></sub>
تگ <sub> یا subscript دقیقا برعکس تگ <sup> یا superscript میباشد. محتوایی که داخل تگ <sub> قرار میگیرد محتوا را پایین تر از خط عادی متن نشان میدهد. یک مثال عالی از تگ subscript برای نوشتن فرمول‌های شیمی میباشد، به طور مثال وقتی میخواهید که فرمول شیمیایی آب رو بنویسید به این شکل H20.
ساختار تگ sub به این شکل میباشد:
<div>فرمول آب: H<sub>2</sub>O میباشد</div>
17. <br>
تگ <br> یک تگی هست که نیازی به بسته شدن ندارد، هر محتوایی که بعد از تگ <br> قرار بگیرد ادامه متن را در خط جدید شروع خواهد کرد.
در اینجا مثالی از ساختار تک <br> در تگ پاراگراف برای شما آورده‌ایم:
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه
روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود
ابزارهای کاربردی می باشد. <br> کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد
کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد
نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
18. <ol> </ol> و <li> </li>
تگ <ol> یا ordered list باید استفاده شود به همراه یک تگ دیگر به اسم تگ <li>.
نحوه استفاده از این دو تگ رو در کد زیر قرار داده‌ایم:
<ol>
<li>آسیا</li>
<li>اروپا</li>
<li>آفریقا</li>
</ol>
وقتی که مرورگر این کد را بارگذاری بکند، تمامی قاره‌هایی که داخل کد نوشتیم به همراه شماره ظاهر خواهند شد.
19. <img src=””/>
ممکن هست که شما بخواهید عکس مربط با موضوع خود یا حتی لوگو سند HTML خود قرار دهید. در اینجا ما باید از تگ <img> استفاده کنیم. تگ img هم یک تگی هست که نیاز به بسته شدن ندارد (self-closing). در اینجا یک مثال از نحوه استفاده از تگ img را برایتان آورده‌ایم:
<img src="https://mimoc.ir/static/images/png/mimoc.png" alt="توضیح درباره‌ی عکس">
برای مقدار src شما باید آدرس یک عکس را وارد کنید و باید آدرس را بین `"` قرار دهید.
خب اینم از معرفی 19 تا از تگ‌های مهم HTML که باید برنامه‌نویسان تازه‌کاری که قصد ورود به بخش طراحی وبسایت رو دارند یاد بگیرند. اگر علاقه‌مند به شروع یادگیری وب هستید میتوانید از دوره آشنایی با HTML که بطور رایگان دردسترس هست استفاده کنید و وارد دنیای برنامه‌نویسی شوید. خیلی متشکریم که این مقاله را مطالعه کردید.
منبع: geekflare
