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

از قدیم تا همین الان، تکنولوژی‌های مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بودن، اما باورت میشه تمام این تکنولوژی‌ها به HTML ختم میشه؟

HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن "زبان نشانه‌ گذاری ابرمتن"می‌گویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language به حساب میاد.

 تفاوت زبان نشانه‌گذاری با زبان برنامه نویسی ؟ 
ما با زبان های برنامه نویسی میتونیم با کامپیوترها حرف بزنیم. زبان‌های برنامه نویسی به کمک دستورالعمل‌هایی که برای کامپیوتر قابل فهم هستن ، با آن‌ها ارتباط برقرار میکنه و به طور عمده از ساختارهای کنترلی و شرطی استفاده می‌کنن.
انواع مختلفی از زبان نشانه گذاری وجود داره که معروف‌ترین آن HTML است. در زبان‌های نشانه گذاری خبری از ساختارهای رایج برنامه‌نویسی مثل شرط، حلقه، تکرار و غیره وجود نداره و شما داخل متن خود از یک سری نشانه استفاده می‌کنید (تگ که در ادامه توضیح میدیم ). در این زبان‌ها شما به کمک این نشانه‌ها متن را از سایر عناصر صفحه جدا می‌کنید تا به کمک آن‌ها المان‌های مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.

 

تاریخچه HTML

برای اینکه بدونیم HTML از کجا اومده باید برگردیم به سال 1991. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد.

به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و تونست تا مدت‌ها توسط طراحان وب مورد استفاده قرار بگیره، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML تونست بیش از پیش به توسعه دهندگان در طراحی سایت‌ها کمک کند که در ادامه می‌خواهیم با آن بیشتر آشنا شویم.شما می توانید از اینجا تاریخچه زبان های برنامه نویسی رو مطالعه کنید.

 

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

لازم به ذکره که در دنیای طراحی وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی توانایی خروجی گرفتن یا به اصطلاح رندر کردن محتویات آن را دارند. منظور از رندر کردن اینه که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران شوند.

تگ چیست؟

HTML به کمک برچسب‌‌ها (Tags) عناصر مختلف رو کنار هم می‌چینه و هر کاربر با توجه به نیاز خود از تگ ها استفاده می‌کنند. حالا باید بپرسیم که تگ چیست؟ تگ‌ها عناصری هستند که وظایف مختلفی دارن و با فراخوانی هر کدو م کار مخصوص به خودشون شروع شده و با بستن تگ کار اونا تمام میشه. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده میشه و زمانی که پاراگراف تمام شده، تگ هم بسته میشه. همچنین برای نشون دادن لینک‌ها، از تگ a  در صفحات وب استفاده میشه. برای مثال :

 <a href="https://tutlearning.com">تیم فنی و آموزشی توت</a>

تگ‌های HTML در حقیقت همون دستورالعمل‌های این زبان هستن که به مرورگر توضیح میدن صفحه مورد نظر از چه عناصری تشکیل شده . هر کدام از این Tag ها معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن‌ها، ساخت لیست‌های مختلف و به هم متصل کردن صفحات رو میدن. همچنین از این تگ ها برای کار با صدا، تصویر و غیره استفاده میشه.

 

HTML چه رابطه‌ای با زبان‌‌های css و javascript دارد؟
دوتا از بهترین دوستای HTML  رو میشناسی؟ کمتر پیش میاد اسمش به گوشت نخورده باشه ، منظورم css و javascript  هست که معمولا به  اتفاق و همراهی این سه طراحی وب سایت ها به حد خوبی انجام میشه. تا اینجای کار فهمیدیم HTML چیه و  چرا در طراحی سایت به اون نیاز داریم، اما به این نکته توجه داشته باشین که امروزه HTML به تنهایی کاربرد زیادی نداره.
چون فقط ساختار صفحه رو شکل میده و اجازه اضافه کردن جذابیت‌های ظاهری رو نمیده. صفحات HTML به تنهایی ارزشی برای انتشار ندارن اما زمانی که در کنار css و JavaScript قرار می‌گیرن، زیبایی واقعی طراحی وب رو به نمایش میذارن.

 

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