HTML چیست؟ چگونه کار می کند؟ معرفی تگ ها و عناصر
در این مقاله خواستیم پاسخ به سوالات HTML چیست؟ چگونه کار می کند؟ نحوه عملکرد، مزایا و معایب آن و نحوه ارتباط آن با CSS و جاوا اسکریپت و همچنین معرفی پرکاربردترین تگ های HTML را مطرح کنیم. این مقاله بروز می شود.
HTML چیست؟
HTML مخفف HyperText Markup Language است. اچ تی ام ال یک زبان نشانه گذاری استاندارد برای طراحی سایت و صفحات وب است و امکان ایجاد و ساختاربندی بخش‌ها، پاراگراف‌ها و پیوندها را با استفاده از عناصر HTML (بلوک های سازنده یک صفحه وب) مانند تگ و ویژگی‌ها فراهم می کند.
HTML موارد استفاده زیادی دارد که عبارتند از:
- توسعه وب. توسعه دهندگان از کد HTML برای طراحی نحوه نمایش عناصر صفحه وب مانند متن، لینک ها و فایل های رسانه ای توسط مرورگر استفاده می‌کنند. بسیاری از سیستمهای مدیریت محتوا مانند جوملا، اپن کارت، ووکامرس ، لاراول و وردپرس از این زبان استفاده می کنند. از این زبان برای انواع طراحی سایت و طراحی سایت فروشگاهی استفاده می شود.
- ناوبری اینترنتی. کاربران می توانند به راحتی بین صفحات و وب سایت های مرتبط حرکت کرده و پیوندها را وارد کنند، اچ تی ام ال برای جاگذاری لینک‌ها استفاده می‌شود.
- مستندات سازی در وب. اچ تی ام ال سازماندهی و قالب بندی اسناد را مانند Microsoft Word امکان پذیر می‌کند.
زبان برنامه نویسی HTML چیست؟
این سوال اشتباه است. HTML یک زبان برنامه نویسی محسوب نمی شود، چون نمی تواند عملکرد پویا انجام دهد و به عنوان یک استاندارد رسمی وب در نظر گرفته می شود. HTML توسط کنسرسیوم وب جهانی (W3C) حفظ ، توسعه و بروزرسانی مداوم می شود.
HTML چگونه کار می کند؟
یک وب سایت متوسط شامل چندین صفحه مختلف HTML است. به عنوان مثال، یک صفحه اصلی، یک صفحه درباره، و یک صفحه تماس، همگی دارای فایل های اچ تی ام ال جداگانه هستند.
اسناد اچ تی ام ال فایل هایی هستند که به پسوند html یا .htm ختم می شوند. یک مرورگر وب فایل HTML را می خواند و محتوای آن را به‌گونه ای ارائه می دهد تا کاربران اینترنت بتوانند آن را مشاهده کنند.
همه صفحات HTML دارای یک سری عناصر اچ تی ام ال هستند که از مجموعه ای از تگها و ویژگی‌ها تشکیل شده است. عناصر اچ تی ام ال بلوک های سازنده یک صفحه وب هستند. یک تگ به مرورگر وب می گوید که یک عنصر از کجا شروع و کجا پایان می یابد، در حالی که یک ویژگی، ویژگی های یک عنصر را توصیف می کند.
سه بخش اصلی یک عنصر(Element) عبارت است از:
- تگ باز‌کننده. جایی که یک عنصر شروع به اثر می کند استفاده می شود. تگها با براکت های زاویه باز و بسته نوشته می شوند. به عنوان مثال، از تگ شروع کننده <p> برای ایجاد یک پاراگراف استفاده می شود.
- محتوا. این خروجی است که سایر کاربران می بینند که در بین تگ شروع کننده و خاتمه دهنده قرار می گیرد.
- تگ بسته شدن. همانند تگ باز کننده، اما با یک اسلاش رو به جلو قبل از نام عنصر. به عنوان مثال، <p/> برای پایان دادن به یک پاراگراف.
ترکیب این سه بخش یک عنصر اچ تی ام ال ایجاد می کند:
<p>This is how you add a paragraph.</p>یکی دیگر از بخش های حیاتی یک عنصر HTML ویژگی آن است که دارای دو بخش است:
- نام ویژگی: اطلاعات اضافی که کاربر می خواهد اضافه کند.
- مقدار ویژگی: مشخصات بیشتری را ارائه می دهد.
به عنوان مثال، یک عنصر استایل که رنگ بنفش و خانواده فونت tahoma را اضافه می کند، به این صورت خواهد بود:
<p style="color:purple;font-family:tahoma">This is how you add a paragraph.</p>ویژگی دیگر، کلاس اچ تی ام ال ، برای توسعه و برنامه نویسی بسیار مهم است. ویژگی class اطلاعات استایل را اضافه می کند که می تواند روی عناصر مختلف با مقدار کلاس یکسان کار کند.
به عنوان مثال، ما از همان استایل برای عنوان <h1> و پاراگراف <p> استفاده خواهیم کرد. این استایل شامل رنگ پس‌زمینه، رنگ متن، حاشیه، کلاسی با نام avadis است. برای رسیدن به همان سبک بین <h1> و <p>، بعد از هر تگ شروع، ”class=”avadis را اضافه کنید:
<html>
<head>
<style>
.avadis{
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="avadis">This is a heading</h1>
<p class="avadis">This is a paragraph.</p>
</body>
</html>اکثر عناصر دارای یک تگ باز و بسته هستند، اما برخی از عناصر برای کار نیازی به تگ بسته ندارند، مانند عناصر خالی. این عناصر از تگ پایان استفاده نمی کنند زیرا محتوا ندارند، این نمونه را ببینید:
<img src="/" alt="Image">این تگ تصویر دارای دو ویژگی است|: یک ویژگی src که مسیر تصویر را مشخص می کند و یک ویژگی alt که متن توصیفی آن تصویر است. با این حال، محتوا و تگ پایانی ندارد.
در نهایت، هر سند HTML باید با یک اعلان <!DOCTYPE> شروع شود تا به مرورگر وب در مورد نوع سند اطلاع دهد. با HTML5، اعلان عمومی HTML doctype خواهد بود:
<!DOCTYPE html>پرکاربردترین تگهای HTML
در حال حاضر 142 تگ HTML موجود است که امکان ایجاد عناصر مختلف را فراهم می کند. حتی اگر مرورگرهای مدرن دیگر برخی از این تگها را پشتیبانی نکنند، یادگیری تمام عناصر مختلف موجود، باز هم مفید است.
تگ Block-Level
یک عنصر Block-Level کل عرض یک صفحه را اشغال می کند. همیشه یک خط جدید را در سند خروجی شروع می کند. به عنوان مثال، یک عنصرعنوان در یک خط جداگانه از یک عنصر پاراگراف قرار دارد.
هر صفحه اچ تی ام ال از این سه تگ استفاده می کند:
- تگ <html> عنصر ریشه ای است که کل سند اچ تی ام ال را تعریف می کند.
- تگ <head> اطلاعات متا مانند عنوان صفحه و مجموعه charset ها را در خود نگه می‌دارد و اهمیت ویژه ای در مبحث سئو دارد.
- تگ <body> تمام محتوای ظاهر شده در صفحه را در بر می‌گیرد.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>سایر تگ های پرکاربرد Block-Level عبارتند از:
- تگهای سرفصل (هدینگ‌ها) : این تگها از <h1> تا <h6> متغیر هستند، که در آن عنوان h1 از نظر اندازه بزرگترین است و با حرکت به سمت h6 کوچک‌تر می‌شود.
- تگ پاراگراف: با استفاده از تگ <p> محصور می شوند.
- تگ های لیست: دارای تغییرات مختلفی هستند. از تگ <ol> برای لیست مرتب شده با اعداد و از <ul> برای لیست عادی استفاده می‌شود. با استفاده از تگ <li> در درون تگهای ol یا ul می توانید آیتم‌های فهرست li را محصور کنید.
تگ های درون خطی (Inline Elements)
یک عنصر درون خطی، محتوای درونی عناصر Block-Level، مانند پیوندها و رشته‌ها را قالب بندی می کند. عناصر درون خطی معمولاً برای قالب بندی متن بدون شکست جریان محتوا استفاده می شوند.
به عنوان مثال، یک تگ <strong> یک عنصر را به صورت پررنگ نمایش می دهد، در حالی که تگ <em> آن را به صورت مورب نشان می دهد. هایپرلینک ها نیز عناصر درون خطی هستند که از یک تگ <a> و یک ویژگی href برای نشان دادن مقصد پیوند استفاده می کنند:
<a href="https://example.com/">Click me!</a>تکامل HTML: تفاوت HTML و HTML5 چیست؟
اولین نسخه اچ تی ام ال شامل 18 تگ بود. از آن زمان، هر نسخه جدید با تگها و ویژگی‌های جدیدی به نشانه‌گذاری اضافه شدند. مهم ترین ارتقای این زبان تاکنون، معرفی HTML5 در سال 2014 بود.
تفاوت اصلی بین HTML و HTML5 این است که HTML5 از انواع جدیدی از کنترل‌های فرم پشتیبانی می کند. HTML5 همچنین چندین تگ معنایی را معرفی کرد که به وضوح محتوا را توصیف می کنند، مانند <article>، <header> و <footer>.
مزایا و معایب HTML
درست مانند هر زبان کامپیوتری دیگر، HTML هم نقاط قوت و محدودیت‌های خود را دارد. در اینجا مزایا و معایب اچ تی ام ال آورده شده است:
مزایای HTML
- عالی برای مبتدیان: HTML دارای نشانه گذاری تمیز و ثابت است که منحنی یادگیری آسانی دارد.
- حمایت زیاد: این زبان به طور گسترده مورد استفاده قرار می گیرد و منابع زیادی در آن وجود دارد و جامعه بزرگی پشت آن قرار دارد.
- دسترسی عالی: منبع باز و کاملا رایگان است. HTML به صورت بومی در تمام مرورگرهای وب اجرا می شود.
- انعطاف پذیری: HTML به راحتی با زبان های پشتیبان مانند PHP و Node.js قابل ادغام است.
اگر نمی دانید PHP چیست این مقاله را بخوانید اما بصورت کلی PHP زبان برنامه نویسی بسیار معروفی است در برای طراحی سایت با PHP استفاده می شود.
معایب HTML
- استاتیک بودن: زبان اچ‌تی‌ام‌ال در درجه اول برای صفحات استاتیک وب استفاده می شود. برای عملکرد داینامیک، ممکن است نیاز به استفاده از جاوا اسکریپت یا یک زبان پشتیبان مانند PHP داشته باشید.
- صفحهات مجزا HTML: کاربران باید صفحات وبی مجزا را برای اچ تی ام ال ایجاد کنند، حتی اگر عناصر یکسان باشند.
- سازگاری مرورگرها: برخی از مرورگرها ویژگی‌های جدید آن را به آرامی به پشتیبانی خود اضافه می کنند. گاهی اوقات مرورگرهای قدیمی تگ های جدیدتر را ارائه نمی کنند.
HTML، CSS و جاوا اسکریپت چگونه به هم مرتبط هستند؟
HTML برای افزودن عناصر متنی و ایجاد ساختار محتوا استفاده می‌شود. با این حال، تنها طراحی سایت حرفه ای و کاملاً رسپانسیو کافی نیست. بنابراین، اچ تی ام ال برای ایجاد اکثریت قریب به اتفاق محتوای وب‌سایت به کمک CSS و جاوا اسکریپت نیاز دارد.
CSS مسئول استایل‌هایی مانند پس‌زمینه، رنگ‌ها، چیدمان‌ها، فاصله‌ها و انیمیشن‌ها است. از سوی دیگر، جاوا اسکریپت قابلیت های پویاسازی مانند اسلایدر، پاپ آپ و گالری عکس را اضافه می کند. این سه زبان پایه اولیه توسعه فرانت اند (front-end) هستند.
بروزرسانی html4 به html5
html5 چیست؟ بروزرسانی html4 به html5 همه را نجات داد. بسیاری از تگ های مفید در html5 معرفی شدند و به این ترتیب کار برای همه راحت شد. اگر می خواهید بدانید html5 چیست و پای چه امکاناتی را به عرصه وب باز کرد باید بدانید یادگیری آن به شما کمک بزرگی خواهد کرد. HTML5 سر و صدای فراوانی را با آمدنش به عرصه برپا کرد اما در نهایت یک بروزرسانی از نسخه مورد استفاده از سال 1997 html تا به امروز است که برخی از المان‌ها را اضافه و یا کم کرده و برخی از موارد را شفاف‌سازی کرده است.
نظرات کاربران
سلام: من میخوام اچی تی ام ال یاد بگیرم با توجه به پیشرفت امروز هنوز جواب میده؟ مرسی از شما
درود
تقریباً ساخت وب بدون html غیرممکنه. البته خوب سیستم هایی مثل وردپرس به شما اجازه ساخت سایت بدون کدنویسی میدن اما پشت صحنه دارن کد html تولید می کنند. حتماً یاد بگیرید.
موفق باشید