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

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

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 چیست و چرا در طراحی سایت به اون نیاز داریم، اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد، زیرا فقط ساختار صفحه رو شکل می‌دهد و اجازه اضافه کردن جذابیت‌های ظاهری رو نمی‌دهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار CSS و   JavaScriptقرار می‌گیرند، زیبایی واقعی طراحی وب رو به نمایش می‌گذارند.

 جمع بندی

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

با احترام
تیم فنی و آموزشی توت