HTML چیست؟ + کاربرد و جایگاه آن در دنیای وب

آیا می‌دانید HTML چیست؟ به زبان نوشتاری صفحات وب HTML گفته می شود که مخفف عبارت “Hypertext Mark-up Language” است. سؤالی که پیش می‌آید این است که این عبارت به چه معناست؟ در حقیقت، HTML، یک زبان برنامه نویسی نبوده و به عنوان زبانی برای نشانه گذاری ابر متن استفاده می‎شود. این زبان نشانه گذاری جهت ساختارمند کردن اطلاعات و جداسازی اجزای یک نوشتار همچون عنوان ها، تصاویر، فهرست ها، بندها و… استفاده می‎شود. HTML زبانی برای صفحه آرایی محسوب نمی‎شود و این امر برعهده CSS است که در ادامه این مطلب از آرنیکاوب بیشتر راجع به آن می‎خوانید.

• Hyper متضاد کلمه Linear به معنای (ابر) می‌باشد. برنامه‌های کامپیوتری قدیمی لزوما از نوع Linear بوده اند، به این صورت که برنامه‌ها دستور خاصی را دنبال می‌کردند. ولی با ظهور زبان نوشتاری “Hyper” نظیر HTML، کاربر در هر زمانی به هر جای سایت می‌تواند دسترسی داشته باشد.
• Text همین چیزی است که شما در حال حاضر به آن نگاه می‌کنید. حروف هر زبانی سازنده‌ی کلمات معمول در همان زبان است.
• Mark-up عملی است که با متن انجام می‌شود تا ظاهر آن تغییر کند. به عنوان مثال: نشانه گذاری متن با <b> قبل از آن و <b/> بعد از این که متن را به حالت برجسته در خواهیم آورد.
• Language همین است که می بینید. اچ دی ام ال زبانی است که کامپیوترها به منظور فهم صفحات وب استفاده می‌کنند.

تاریخچه ای از html و markup language ها

در ابتدابرای اینکه بتوانیم مفهوم آموزش طراحی سایت با html را متوجه شویم به تاریخچه این زبان، اشاره کوتاهی داریم. در زمان پیدایش وب، زبان های مختلفی برای ساختن صفحات وب ظهور کردند که از آن ها به عنوان markup language ها یاد می شوند که تمامی آن ها بر اساس پردازش متن کار می کردند. مدت ها بعد از این دوره، شرکت برنرزلی با الهام گرفتن از این زبان ها، زبانی را تحت عنوان hyper text markup language طراحی و منتشر کرد.

این زبان امروزه به زبانی تبدیل شده است که در تمامی وب سایت ها از آن استفاده می شود. تا کنون پنج نسخه از این زبان عرضه شده است. نسخه پنجم زبان html در سال ۲۰۱۴ توسط سازمان جهانی وب منتشر شد. این نسخه نسبت به نسخه های قبلی امکانات بیشتری برای طراحی صفحات وب دارد.

برای ساخت وب‌سایت نیاز به آشنایی با HTML است؟

جواب منفی است. برنامه‌های زیادی برای ساخت وب‌سایت در بازار موجود است که هرگز نیازی به دانستن دانش کدنویسی اچ تی ام ال ندارند. شما هستید که از برنامه خروجی مورد نظر را می خواهید و برنامه هم اچ تی ام ال را برای شما می سازد. اگرچه، مطمئنا به نفع شماست که بدانید اچ تی ام ال چگونه کار می کند، حتی اگر یکی از این برنامه‌ها را استفاده می کنید، در این صورت می توانید  تمام مزایایی که هر کدام از برنامه ها به شما پیشنهاد می کنند را یکجا بدست آورید. و اگر شما فردی هستید که همه کارها را خودتان انجام می دهید و  وب سایت خودتان را ساخته اید که شامل کد های اچ تی ام ال می باشد، می‌تواند خیلی جالب باشد.

برای نوشتن HTML چه چیزی نیاز است؟

کامپیوتر،مرورگر اینترنت (هم اکنون که در حال خواندن این صفحه هستید هر دوی آن‌ها را دارید) و یک برنامه واژه پردازی مانند Notepad یا Wordpad شرکت مایکروسافت و یا Simple Text سیستم  عامل Mac. از لحاظ فنی به همه این ابزار نیاز دارید.

چه کارهایی با HTML می توان انجام داد؟

کدهای HTML ابزاری هستند که وب‌سایت شما را به جای یک متن ساده به شکل یک وب‌سایت در می‌آورند. با این زبان برنامه‌نویسی می‌توانید کارهای زیر را انجام دهید:

• ساخت عنوان،تیتر و زیر تیتر
• ساخت لیستی از شماره ها
• رسم پاراگراف
• برجسته کردن یا Italic کردن متن
• اضافه کردن تصویر و لینک
• و موارد بسیار دیگر

مزایا و معایب زبان HTML چیست؟

زبان برنامه‌نویسی HTML به همراه css و js عناصر اصلی یک سایت را تشکیل می‌دهند و یک زبان بسیار مهم در دنیای وب محسوب می‌شوند. این زبان مزایا و معایبی دارد که می‌بینیم چرا این زبان با تمام مشکلاتی که دارد هنوز در اولویت زبان وب حساب می‌شود و دلیل ماندگاری آن چیست؟

از مهم‌ترین مزایایی که HTML دارد می‌توان گفت که:

1. به راحتی می‌توان آن را آموخت.
2. در هرنوع مرورگری می‌توان آن را اجرا کرد.
3. باز بودن دست در نوشتن متن‌ها و رایگان بودن آن
4. به راحتی با زبان‌های دیگر مانند php  قابل ادغام است.

و از مهم‌ترین معایب این زبان:

1. در پشتیبانی از مرورگرهای قدیمی دارای ضعف فراوانی است.
2. به دلیل نبودن منطق در برنامه نویسی، نیاز دارد هر صفحه از وب به طور جداگانه طراحی شود.

برای تعامل با کاربران به زبان‌های سمت سرور وابسته است

شناخت ارتباط  HTML و CSS 

به طور کلی می‎توان گفت که سی اس اس کامل کننده HTML است و به همین دلیل باید با این زبان برنامه نویسی تا حد ممکن آشنا شوید تا بتوانید راحت تر با اچ تی ام ال کار کنید. این امر کاملا عادی است که زمان شروع به یادگیری توسعه وب، با چالش‌هایی اساسی در رابطه با اصول HTML  و CSS مواجه ‎شوید. بنابراین به توضیحات بعدی با دقت توجه کنید تا اگر تا کنون هیچ گونه کدی در زندگی تان ننوشته اید، نحوه و ارتباط این دو زبان را برای همیشه فرا بگیرید.

 CSS چیست و چه کارایی دارد؟

CSS مخفف عبارت Cascading style sheetو به معنی صفحات استایل آبشاری است. علت آبشاری بودن هم این است که دستورات CSS بر هر عنصر، به طرز جالبی بر فرزندان و توابع آن عنصر هم تأثیر می‌گذارد. بنابراین، کدهای CSS، مجموعه ای از دستورات هستند که با بکارگیری آن ها می‎توانید مشخصات ظاهری صفحات وب سایت را طراحی کنید.

منظور از مشخصات ظاهری صفحات، تمام عناصر مرتبط با رنگ، سایز، اندازه، فونت و امثال آن است که به اصطلاح می‎توانید با آن ها به صفحات سایتی که در حال طراحی آن هستید، رنگ و لعاب دهید و فراموش نکنید که این کار تأثیر عمده ای بر سئو سایت نیز دارد. پس، اگر در کنار HTML که اسکلت سایت شما محسوب می‎شود، عناصر و جزئیات CSS را به درستی بکار بگیرید؛ گوگل علاقه و توجه بیشتری به سایت تان نشان داده و رتبه بهتری نیز برایتان در نظر خواهد گرفت.

یک ساختمان، بدن انسان و یا حتی پرنده  بدون پر را تصور کنید!

هنگامی که صحبت از ارتباط HTML و CSS می‌شود، می‌توان به مثال های بسیار زیادی برای درک بهتر تفاوت های این دو اصطلاح، اشاره کرد. برخی از کارشناسان حوزه توسعه وب، می‎گویند که طراحی وب چیزی شبیه ساختمان سازی است. یعنی برای ساخت یک ساختمان ابتدا باید بتن ریزی، اسکلت بندی و کارهای زیربنایی انجام شود؛ سپس همزمان با پیشرفت نسبی ساختمان، نوبت به گچکاری، رنگ آمیزی، نصب شیرآلات، زیباسازی نمای ساختمان و … می‎رسد.

طراحی سایت نیز دقیقا طبق همین روش پیش می‌رود. یعنی ساختار کلی صفحه وب سایت، همان اسکلت ساختمان یا بدن انسان یا پرنده ای است که خالی از هر نوع زیبایی بوده و این شما هستید که با استفاده از HTML، ساختار کلی صفحه وب سایت تان را می‎سازید و در گام بعدی با بهره گیری از CSS، به اسکلت وب سایت تان ( که همچون اسکلت بندی بدن انسان، پرنده و یا ساختمان است) جذابیت های ظاهری و بصری همچون رنگ و فونت و… را می‎افزایید. اینگونه شما با استفاده از هر دو زبان، یک صفحه وب زیبا و البته کارآمد را طراحی می‎کنید.

چگونه می‎توان CSS را به عناصر  HTML اضافه کرد؟

در واقع شما به راحتی و با استفاده از این ۳ روش می‎توانید CSS را به عناصر HTML خود اضافه کنید.

1. روش inline

در روش اینلاین، استایل های هر عنصر داخل تگ HTML نوشته می‎شود. به عنوان مثال:

<h2 style=”color:blue;”>This is a sample text</h2>

دقت کنید که در این شیوه و در مثال بالا، استایلی که  تعریف شده  است فقط به تگ h2 تعلق گرفته و نسبت به باقی تگ های h2 اعمال نخواهد شد.

2. روش internal

در روش اینترنال، کدهای css مربوط به صفحه در بخش <head> و در داخل تگ <style> نوشته می‎شوند.

3. روش external

روش اکسترنال در واقع، بهترین و رایج ترین روش برای افزودن CSS به HTML است؛ به این صورت که هر نوع استایل نوشته شده در یک فایل مجزا با پسوند CSS نوشته می‎شود و در انتها، لینک آن در هدر صفحه قرار داده خواهد شد. مزیت دیگر این شیوه، این است که می‎توانید یک فایل css را در چندین صفحه، اعمال کنید.

آشنایی با تگ‌های html

Html ، متشکل از عناصری است که با یادگیری و استفاده از آن ها می‎توانید سایت مورد نظر خود را به خوبی و به شکل دلخواه تان طراحی کنید. همانطور که در ارتباط میان HTML و CSS، در پاراگراف قبلی اشاره کردیم، عناصر اچ تی ام ال همچون مصالح ساختمانی هستند که برای برپایی و ساخت یک ساختمان به آن نیاز دارید. در ادامه همچنان با آرنیکاوب همراه باشید تا با مفهوم عنصر در HTML بیشتر آشنا شوید.

هرچند عناصر HTML به ۳ دسته تگ آغازین، تگ پایانی و هر آنچه میان این دو قرار می‎گیرد، گفته می‌شود اما برای شناخت و درک بهتر شما با انواع این عناصر، در ادامه اکثر عناصر HTML را به صورت دسته بندی شده ارائه می‎کنیم.

تگ های نوشتاری

<small>      کوچک کردن متن

<strong>   نمایش متن های مهم

<sup>         کوچک کردن و بالا بردن متن

<b>            بولد کردن متن

<em>         بزرگ کردن متن تأکید شده

<mark>      هایلایت متن

<bdo>        تغییر جهت دادن متن

تگ های پایه

<body>      ایجاد بدنه برای سند

<h>            تگ عنوان

<p>           ایجاد پاراگراف

<hr>        خط کشی زیر عناصر

<br>       اینتر (رفتن به خط بعدی)

<head>      تعریف اطلاعات سند

<doctype html!>          تعریف نوع سند

تگ های فرم

<form>      ایجاد فرم

<button>   ایجاد دکمه با قابلیت کلیک شدن

<textarea>  جایی برای نوشتن چندین خط

تگ های تصویر و مدیا

<img>                     ایجاد عکس

<figcaption>       توضیحات مربوط به تصویر

<track>                 زیرنویس

<audio>             ایجاد و یا وارد کردن صدا

برای طراحی سایت html را کجا بنویسیم؟

Editor های مختلفی برای این زبان وجود دارد که میتوان به :

• Microsoft Web Matrix
• Notepad++
• Web Storm
• Brackets

اشاره کرد.

کافیست یکی از این نرم افزار ها را بر روی سیستم خود نصب کنید و در منوی language، زبان مورد نظر خود یعنی html را انتخاب کنید و شروع به کد زنی کنید. فایل هایی که پس از اتمام کار save می کنید دارای پسوند .html مانند web.html است.در پایان به عنوان آخرین مطلب این را هم بدانید که با  html نمی توان به صفحه وب، ظاهر گرافیکی و جلوه بدهیم و برای این کار باید از زبان دیگری به نام css استفاده کنیم که آن هم تگ های مربوط به خود را دارد و به کمک آن می توانیم به سایت رنگ، استایل، افکت و… اضافه کنیم.

چگونه HTML را یاد بگیریم؟

حال که می‌دانید اچ تی ام ال چیست آیا برای آموزش آن آماده اید؟  فقط کافیست شروع کنید! کتاب‌ها و دوره‌های زیادی به مبحث کدنویسی HTML و سایر زبان‌های برنامه نویسی اختصاص داده شده است؛ اما آموزش با کیفیت و آموزش تئوری و عملی مباحث قطعا در یادگیری شما تاثیر زیادی دارد. اگر می‌خواهید تکنیک‌های کدنویسی HTML را اساسی فرا بگیرید پیشنهاد ما به شما شرکت در دوره آموزش آنلاین طراحی سایت آرنیکاوب است.

در انتها، اگر واقعا به طراحی سایت علاقمند هستید و تمایل دارید که با استفاده از روش های نوین، ساده و به دور از پیچیدگی، کلیات طراحی وب و همچنین توسعه وب را بیاموزید و سپس با گذراندن دوره های تخصصی، از جزئیات و اطلاعات پیشرفته تری در طراحی وب سایت، مطلع شوید؛ توصیه می‎کنیم مجموعه مقالات و ویدئوهای آموزشی طراحی سایت آرنیکاوب را همچنان دنبال کنید. به زودی و در سایر مقالات، بیشتر از قبل با دنیای گسترده و جذاب HTML آشنا خواهید شد.