همانطور که می دانیم، بدون HTML، وب وجود نخواهد داشت. HTML ساختاری را در وب از طرح‌بندی صفحه و پاراگراف‌ها گرفته تا پیوندها، برچسب‌ها و ویژگی‌ها ایجاد می‌کند. هر بار که آنلاین می شویم، چه بدانیم چه ندانیم، به احتمال زیاد HTML وجود دارد. در اینجا برخی از مفاهیم اساسی HTML را توضیح خواهیم داد.
HTML چیست؟
HTML یک سیستم استاندارد شده برای برچسب گذاری فایل های متنی است که تقریباً برای هر صفحه ای که در وب پیدا می کنیم و استفاده می کنیم ساختار ایجاد می کند. این HTML است که شکستگی های صفحه، پاراگراف ها، حروف پررنگ، ایتالیک و موارد دیگر را اضافه می کند. HTML برای ساختن این ساختار با استفاده از برچسب هایی (tag) کار می کند که به مرورگرها می گوید با متن چه کاری انجام دهند.
به عنوان مثال، برای اینکه یک کلمه پررنگ به نظر برسد، آن کلمه را بین تگ های <strong>bold</strong> زیر قرار می دهیم. اولین تگ شروع کلمه(هایی) را که می خواهیم پررنگ کنیم، و تگ بسته(/) نشان می دهد که می خواهیم پررنگ در کجا متوقف شود. این اساس تقریباً هر صفحه در وب است. اگر در حال یادگیری کدنویسی هستید، اینجا نقطه شروع است.
HTML مخفف چیست؟
HTML مخفف Hypertext Markup Language است. فرامتن نوعی متا متن است که برای ارجاع به سایر قطعات متن استفاده می شود. عنصر زبان نشانه گذاری در HTML به این معنی است که یک سری علامت گذاری را ارائه می دهد که به مرورگر وب دستور می دهد با آن تکه های متن چه کاری انجام دهد.
HTML برای چه مواردی استفاده می شود؟
HTML اسکلت تقریباً هر وب سایتی است. استخوان هایی را فراهم می کند که زیربنای هر چیز دیگری در وبسایت است. موارد رایجی که HTML برای تعریف آنها استفاده می شود عبارتند از:
- پاراگراف ها: عنصر پاراگراف HTML یکی از رایج ترین عناصر است و همانطور که حدس زده اید یک پاراگراف را تعریف می کند.
- خط جدید: مانند متون چاپی، یک پاراگراف یک خط جدید در زیر آن ایجاد می کند تا به صورت بصری آن را از سایر پاراگراف ها جدا کند. این برای تأکید بر جدایی معنایی محتوا استفاده می شود. از همین ساختار در یک رمان یا یک مجله نیز استفاده می شود.
- عناصر بلوک: عناصری که فاصله زیر خود را در یک صفحه ایجاد می کنند، عناصر بلوک نامیده می شوند. عناصر بلوک به صورت عمودی در سمت چپ صفحه ظاهر می شوند حداقل تا زمانی که توسط CSS استایل دهی شوند. نمونه هایی از عناصر بلوک عبارتند از <div>، <article>، <table> و بسیاری دیگر. این ویژگی به HTML اجازه می دهد تا شروع به جداسازی یک صفحه وب به بخش های مختلف کند
- سرتیترها: پاراگراف ها و سرتیترها به طور هماهنگ برای ایجاد اکثر محتوای متنی یک صفحه وب و ساختار آن کار می کنند. HTML دارای شش عنصر تیتر است که از 1 تا 6 شماره گذاری می شوند. h1 نشان دهنده یک زیربخش است. h2 و غیره نشان دهنده شناسه های موضوعات بعدی در بخش های فرعی هستند تا زمانی که به h6 برسیم.
برای درک واضح تر از نحوه عملکرد HTML برای ایجاد نسخه نهایی یک صفحه وب، اگر HTML اسکلت ما باشد، CSS (Cascading Style Sheets) ویژگی هایی مانند رنگ چشم، پوست و مو را به ما می دهد. جاوا اسکریپت مربوط به حرکات ما و نحوه تعامل ما با مردم است، مانند زمانی که متقابلاً دست دادن، چشمک زدن، خندیدن یا پرسیدن سوالی را انجام می دهیم.
HTML چگونه کار می کند: برچسب های HTML
HTML با استفاده از یک سری برچسب ها کار می کند تا به مرورگر اطلاع دهد که با متن روی صفحه چه کاری باید انجام دهد و منابع بیشتری را از کجا باید بارگیری کند. در حال حاضر بیش از 100 تگ HTML برای استفاده در دسترس است، اگرچه اکثر سایت‌ها برای کارکردن آنطور که باید، تنها به تعداد انگشت شماری از آنها نیاز دارند.
سه تگ HTML وجود دارد که برای هر صفحه ضروری است. اینها <html>، <head> و <body> هستند. برای اینکه به صفحه وب نشان دهید که از HTML استفاده می کنید، هر صفحه با <html> باز می شود و با </html> بسته می شود. تگ <head> حاوی ابرداده هایی است که در صفحه قابل مشاهده نیستند، اما برای عملکرد مهم هستند، و تگ <body> نشان می دهد که محتوای بدنه یک صفحه در کجا قرار دارد. هر یک از این عناصر ضروری فقط یک بار در هر صفحه قابل استفاده است. ساختار اصلی تگ های رایج HTML به تفصیل در زیر آمده است:
<!DOCTYPE html> <html> <head> <title>Title that appears on browser tab</title> </head> <body> <p>Here is a sentence with <strong>some words</strong> using <strong>bold.</strong></p> </body> </html>
در زیر، آنچه در صفحه وبسایت نمایش داده می شود، آمده است:
.Here is a sentence with some words using bold
عناصر رایج HTML
سایر عناصر غیر ضروری HTML را می توان چندین بار در یک صفحه وب برای تعریف ساختار آن و تأکید بر بخش های خاصی از متن استفاده کرد. عناصر رایج HTML در زیر فهرست شده اند:
- <em> برای اضافه کردن مورب/تأکید
- <head> متن متا head، در صفحه وب قابل مشاهده نیست
- <header> هدر، یک صفحه یا بخش در یک صفحه وب را تعریف می کند
- <body> بدنه صفحه
- <br> برای درج خط جدید
- <audio> جاسازی محتوای صوتی
- <video> جاسازی محتوای ویدیویی
- <button> برای استفاده از دکمه های قابل کلیک
- <div> برای تعریف/تقسیم یک بخش
- <img> برای درج تصاویر
- <li> برای نشان دادن عناصر یک لیست
- <ol> برای تعریف یک لیست مرتب شده
- <ul> برای تعریف یک لیست نامرتب
- <u> برای خط کشیدن زیر متن
یکی دیگر از ویژگی های رایج HTML تعبیه فایل های CSS ،Javascript یا PHP در آن است. این فایل ها صفحات وب پویا می سازند که قابلیت های تعاملی را به اسکلت پایه HTML اضافه می کنند.
HTML5
HTML5 جدیدترین نسخه HTML است. با هر نسخه توانایی های جدید و غیره ارائه می شود. با این حال، همیشه در حال پیشرفت و تکامل است. HTML5 عملکرد بیشتری نسبت به تکرارهای قبلی زبان ارائه می دهد. مثلا:
- می تواند با استفاده از تگ های مربوطه، <audio> و <video> از صدا و تصویر پشتیبانی کند.
- توسط تمام مرورگرها از جمله کروم، سافاری، موزیلا و غیره پشتیبانی می شود.
- استفاده از آن راحت تر از نسخه های قدیمی تر است.
- در دستگاه های تلفن همراه بهتر کار می کند.
چگونه HTML یک صفحه را مشاهده کنم؟
مشاهده HTML یک صفحه آسان است، حتی اگر صفحه وبسایت شما نباشد. برای نمونه، من از روش Google Chrome در اینجا استفاده خواهم کرد. این کار در مرورگرهای دیگر نیز به همین سادگی است. برای مشاهده HTML یک صفحه، روی صفحه کلیک راست کرده و روی “مشاهده منبع صفحه” کلیک کنید. همچنین می توانید از میانبر صفحه کلید CTRL + U در ویندوز یا Option + Command + U در iOS استفاده کنید.
چرا دانستن HTML مفید است؟
HTML واقعاً نان و کره یک توسعه دهنده است. اگر در شغل یا زندگی روزمره خود با کد، وبسایت یا برنامه‌سازی تعامل دارید، باید این زبان را بدانید. برای اینکه ببینید HTML و تکنولوژی چقدر حیاتی است، گوشی هوشمند خود را از جیب خود بیرون بیاورید. چند تا اپلیکیشن دارید؟ چند وقت یکبار از مرورگرها استفاده می کنید؟ آیا از آن برای خرید استفاده می کنید یا برای سفارش آنلاین؟ آیا چیزهایی مانند دمای خانه شما را کنترل می کند؟ آیا از آن برای رزرو هتل، پرواز، مدل مو یا هر چیز دیگری استفاده می کنید؟ آیا از آن برای سفارش غذا یا گوش دادن یا تماشای چیزی آنلاین استفاده می کنید؟ همه اینها به HTML متکی است.
در حال حاضر، صدها هزار شغل در سراسر اروپا وجود دارد که به مهارت های HTML نیاز دارند. در واقع، جهان در حال گذر از یک شکاف مهارتی شدید است و در نتیجه، دستمزدها برای توسعه دهندگان نرم افزار همیشه در حال افزایش است. کارفرمایان این شکاف‌ها را تشخیص می‌دهند و طبق منابع متعدد، درآمدهای بالقوه زیادی را در نتیجه از دست می‌دهند. بنابراین، چه در حال حاضر در زمینه فناوری کار می کنید یا به دنبال تغییر شغل هستید، یادگیری HTML می تواند برای شما بسیار مفید باشد.
ترجمه: ابوالفضل محمدی جو
منبع:
https://codeinstitute.net/nl/blog/what-is-html-and-why-should-i-learn-it