HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده است. هر کدام از این بخش ها دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .
عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Languageاست . معنی این عبارت (زبان نشانه گذاری فوق متن) است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند. به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند .بدین معنی که کد قابل فهم برای آنها اچ تی ام ال می باشد.
کدهای HTML
کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند. سپس برای مرورگر فرستاده می شوند تا به کاربران نمایش داده شود. در يک صفحه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول را قرار داد . که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و … کدهای اچ تی ام ال مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.
هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.
یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال می خوانند. سپس محتوای آن صفحه را نمایان‌سازی (Render) میکنند.
HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است . این زبان اساساً برای ساختارمند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار مانند عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول به کار می‌رود. از سوی دیگر، HTMLرا نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد. این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در مقاله ی مربوط با نام ( ) به آن پرداخته می شود.
زبان نشانه گذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن می‌توانیم با کامپیوترها حرف بزنیم. زبانهای برنامه نویسی به کمک دستورالعمل‌هایی که برای کامپیوتر قابل فهم هستند با آنها ارتباط برقرار کرده است. این زبان ها به طور عمده از ساختارهای کنترلی و شرطی استفاده میکنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعمل‌ها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده می‌شود.
انواع مختلفی از زبان نشانه گذاری وجود دارد که معروف‌ترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبانهای نشانه گذاری خبری از ساختارهای رایج برنامه‌نویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده می‌کنید. در حقیقت در این زبان‌ها شما به کمک این نشانه‌ها متن را از سایر عناصر صفحه جدا می‌کنید تا به کمک آنها المان‌های مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.
تاریخچه زبان HTML
برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگهای کاربردی‌تر در اختیار طراحان قرار داد.
به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و توانست تا مدت‌ها توسط طراحان وب مورد استفاده قرار گیرد. تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایت‌ها کمک کند که در ادامه می‌خواهیم با آن بیشتر آشنا شویم.
مزایا و معایب زبان HTML چیست؟
HTML در کنار css و js هسته اصلی وب را تشکیل می‌دهد و یک زبان بسیار مهم در دنیای وب حساب می‌شود. این زبان مزیت‌ها و محدودیت‌هایی هم دارد که در ادامه به آنها می پردازیم. میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می‌آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:
مزایای HTML :
- یادگیری آسان و لذت‌بخش
- قابلیت اجرا در تمام مرورگرها
- متن باز و رایگان بودن
- ادغام آسان با زبانهای سمت سرور مثل php
معایب HTML:
- استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
- ضعف در پشتیبانی از مرورگرهای قدیمی
- نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
HTML چگونه کار می‌کند؟
HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار می‌دهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان ساده‌تر ما با HTML بدنه اصلی صفحه وب را می‌سازیم. حال که با اصلی‌ترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم.
اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را می‌سازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML می‌سازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS می‌پردازد.
البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی می‌توانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران می‌شوند.
تگ چیست ؟
HTML به کمک برچسبها (Tags) عناصر مختلف را کنار هم می‌چیند و هر کاربر با توجه به نیاز خود از آنها استفاده می‌کند. شاید بپرسید تگ چیست؟ تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود. همچنین برای نشان دادن لینک‌ها از تگ a استفاده در صفحات وب استفاده می‌شود.
تگهای HTML در حقیقت همان دستورالعمل‌های این زبان هستند که به مرورگر می‌گویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن‌ها، ساخت لیست‌های مختلف و به هم متصل کردن صفحات را می‌دهند. همچنین از آنها برای کار با صدا، تصویر و غیره استفاده می‌شود.
مهم ترین تگ های HTML را بشناسید
تنوع تگ‌ها در HTML بسیار بالاست و این تگ‌ها در نسخه‌های جدید در حال پیشرفت و بهبود هستند. بعضی از آنها محبوبیت چندانی نداشته و به ندرت توسط طراحان وب استفاده می‌شوند. مثلا تگ meter که برای اندازه‌گیری است به ندرت توسط طراحان سایت استفاده می‌شود.
از طرفی دیگر تگ <div> که برای تقسیم کردن صفحه به بخش‌های مختلف به کار می‌رود، تقریبا بخش جدا نشدنی در طراحی سایت می‌باشد. اگر قصد دارید بر این زبان مسلط شوید، به شما توصیه می‌کنیم که به بررسی و مطالعه تگهای مختلف HTML بپردازید.
HTML چه رابطه‌ای با زبانهای css و javascript دارد؟
کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبانهای css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.
چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیت‌های ظاهری را نمی‌دهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند. اما زمانی که در کنار css و JavaScript قرار می‌گیرند، زیبایی واقعی خود را در طراحی وب نشان می‌دهند.پیشنهاد
به شما پیشنهاد می‌کنیم بعد از اینکه دانستید HTML چیست و به خوبی آن را تمرین کردید، سراغ css و جاوا اسکریپت بروید.
HTML, CSS, JavaScript
با توجه به نکاتی که گفته شد می‌توان HTML به تنهایی را مانند یک انسان برهنه در نظر گرفت که CSS مانند لباس‌های شیک، ظاهر آن را آراسته می‌کند. در نهایت جاواسکریپت باعث می‌شود او حرکت کرده و با بقیه شروع به صحبت کند. پس در طراحی ظاهر سایت به طور خلاصه باید گفت :
- HTML به کمک تگهای از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص می‌کند.
- CSS به ما کمک می‌کند عناصر مختلف را در صفحه جابه‌جا کنیم. آن ها را رنگ‌بندی را تغییر دهیم. فونت‌ها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
- JavaScript به ما اجازه می‌دهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS می‌توانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.
