HTML چیست ؟

HTML (اچ تی ام ال)

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

 

تاریخچه HTML

در سال ۱۹۸۹، تیم برنرز لی (Tim Berners-Lee) که یک فیزیک‌دان بود، یک زبان جدید برای نوشتن و علامت‌گذاری در هایپرتکست‌ها طراحی و پیشنهاد کرد. زبانی که او می‌گفت: می‌تواند در اینترنت مورد استفاده قرار گیرد (اگر تفاوت وب و اینترنت را به خاطر داشته باشید، الان برایتان درک این مسئله ساده است که اینترنت وجود داشته و هنوز وب اختراع نشده بوده).

برنرز لی، زبان پیشنهادی خودش را HTML نامید: HyperText Markup Language (زبان علامت‌گذاری ابرمتن‌).

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

مرورگر‌های وب (Web Browsers) در میان قابلیت‌های متعددشان، از این قابلیت مهم هم برخوردار هستند که می‌توانند زبان HTML را بفهمند.

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

 

کاربرد اصلی HTML

اگر بخواهیم به سوال HTML چیست پاسخ دهیم، باید کاربرد اصلی HTML را بررسی کنیم. در این قسمت میخواهیم یاد بگیریم که HTML چیست و دقیقا چه کاری انجام میدهد.

اگر بخواهیم خیلی ساده به سوال HTML چیست پاسخ دهیم، میتوانیم بگوییم:

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

اگر کمی با طراحی سایت آشنایی داشته باشید،‌ حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:

1. ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
2. اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.

 

یک ساختمان را تصور کنید

اگر میخواهید خیلی خوب با HTML آشنا شوید و دقیقا درک کنید که HTML چیست ، یکی از بهترین مثال‌های آن، مثال یک ساختمان است که میخواهیم آن‌را در این قسمت بررسی کنیم.

یک ساختمان را تصور کنید که شخصی میخواهد اقدام به ساخت آن کند، برای مثال یک مجتمع مسکونی!

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

طراحی وب با HTML نیز دقیقا به همین صورت است. HTML به شما کمک میکند تا با استفاده از تگ ها، ساختار و ساختمان کلی صفحه وب خود را تعریف کنید. مثلا بگویید که منو کجاست، هدر کجاست، فوتر کجاست و… .

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

 

تکامل HTML به مرور زمان

 

HTML زبانی است که طی زمان برای ایجاد وب سایت‌های زیباتر و کارآمدتر دچار تحول شد. HTML 1.0 اولین نسخه منتشر شده در جهان بود. در آن زمان تعداد برنامه نویس وب چندان زیاد نبود و این زبان هم تا حدودی محدود کننده به نظر می‌رسید. تنها کاری که می‌شد با نسخه اولیه HTML انجام داد، قرار دادن متن ساده در وب بود. پس از آن نسخه HTML 2.0 به بازار معرفی شد که تمام ویژگی‌های نسخه اول به علاوه چند ویژگی جدید را با خود داشت. این نسخه تا ژانویه ۱۹۹۷ و تعریف ویژگی‌های کلیدی برای HTML، به عنوان استانداردی برای طراحی سایت در نظر گرفته می‌شد.

 

تولد HTML 3.0

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

 

 

HTML 3.2

کمی بعدتر کنسرسیوم وب جهانی اولین کار خود را به بازار ارائه کرد که به HTML 3.2 معروف ‌شد و تغییرات اندکی نسبت به نسخه  پیشین داشت و بسیاری از مراحل بزرگ را به نسخه‌های بعدی موکول کرده بود. بسیاری از تگ‌های قبلی در این نسخه و استانداردهای جدید به چشم نمی‌خورد. اما خیلی زود در ژانویه ۱۹۹۷ به نسخه استاندارد تبدیل شد و امروزه تمام مرورگرها از ویژگی‌های آن به طور کامل پشتیبانی می‌کنند.

 

HTML 4.01؛ تحول بزرگ

 

نسخه HTML 4.01 تحول بزرگی نسبت به استانداردهای اولیه اچ تی ام ال در نظر گرفته می‌شد؛ بیشتر کارایی‌های جدیدی که در این نسخه آورده شده بود، در واقع ارتقا و پیشرفتی از نسخه HTML 3.0 به علاوه چندین ویژگی جدید و پیشرفته بود. این نسخه در دسامبر ۱۹۹۷ توسط کنسرسیوم وب جهانی پیشنهاد شد و در آوریل ۱۹۹۸ به استاندارد رسمی طراحی سایت تبدیل شد. پشتیبانی مرورگر از این زبان جدید و تقریبا بیشتر تگ‌ها و خصوصیات توسط مایکروسافت در مرورگر محبوب IE5 صورت گرفت.

 

ورود XHTML

 

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وب سایت‌ها تعریف شده است. برنامه نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهد بود. بسیاری از بخش‌های آن برای کاربران قبلی اچ تی ام ال آشنا و بسیاری دیگر جدید و ناشناخته است.

 

 

Html 5

 

Html5 یا زبان نشانه‌گذاری به عنوان پنجمین ورژن زبان نوشتاری در طراحی وب سایت به شمار می‌رود که در سال 1997 طراحی شده است و همچنان نیز در دست توسعه‌ است. اهداف اصلی Html5 پشتیبانی از  جدیدترین فناوری‌های چند رسانه‌ای است بطوری که خواندن آن را تسهیل نماید و به طور مداوم نیز توسط رایانه‌ها، مرورگرهای وب، تجزیه کننده‌ها و … قابل فهم باشد. Html5 در تلاش است تا بتواند HTML4، XHTML۱ و ۲HTML را نیز پشتیبانی نماید. در واقع Html5 پاسخی به استفاده مشترک XHTML بر روی شبکه جهانی وب است که ترکیبی از ویژگی‌های معرفی شده توسط موتورهای جستجو می‌باشد. هم چنین پاسخی به بسیاری از خطاهای نحوی در مستندات وب موجود است که یک زبان نشانه گذاری یکتا را تعریف می‌نماید. HTML5 به دلیل وجود برخی ویژگی‌های منحصر به فرد آن، از سایر نسخه‌های قبلی برتری دارد.

آموزش HTML

 

زبان html به وسیله المنت‌ها (element)، ساختار یک صفحه وب را می‌سازد. برای ایجاد المنت ها از تگ‌ (tag) استفاده می شود. هر کدام از تگ‌های این زبان، وظیفه خاصی را بر عهده دارند. به طور مثال تگ a که در تصویر بالا ساختار آن را مشاهده می‌کنید، برای لینک کردن صفحات به هم کاربرد دارد. هر تگ تعداد خصوصیت (attribute) دارد، که قابلیت مقداردهی دارند. در این مثال برای درج لینک (link) از خصوصیت href در تگ a استفاده می شود. وجود خصوصیت در تگ ها یکی از بهترین ویژگی های زبان html است. هر تگ در زبان اچ تی ام ال به صورت <نام تگ> باز شده <نام تگ/> بسته می شود.

اولین جمله هر سند اچ‌تی‌ام‌ال <!DOCTYPE html> است. این بخش در واقع این تگ نشان می‌دهد که این سند یک صفحه HTML هستیم. پس اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند خود می‌نویسیم. اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید. پس بخاطر داشته باشید که ما همیشه آن را در اولین خط از کدهایمان قرار می‌دهیم.

دومین رکن اصلی هر صفحه اچ تی ام ال ، همان تگ <html> و <html/> است که برای شروع نوشتن زبان اچ تی ام ال کابرد دارد. پس در قدم بعدی و بعد از <!DOCTYPE html> آن را می‌نویسیم. همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ نوشته می‌شود.

بین دو <html> و <html/> تگ‌های جدیدی با اسم <head> و <head/> قرار می‌گیرند. عمل قرار دادن یک تگ در داخل تگ دیگر، nest نام دارد. تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه اچ‌تی‌ام‌ال است. مثلا می‌گوید نویسنده این صفحه چه کسی بوده یا تگ title در آن قرار می‌گیرد توضیحاتی در رابطه با خود سایت ارائه می‌کند. معمولا چیزهایی که در بخش هدر سایت نوشته می‌شود به صورت مستقیم در سایت نمایش داده نمی‌شوند و راهنمایی برای موتورهای جستجو برای درک صفحات وب شما هستند.

حالا نوبت به نوشتن کدهایی می‌رسد که قرار است در صفحه مرورگر مشاهده شوند. بقیه تگهای ما که بیشتر شامل div هستنند بین دو تگ <body> و <body/> قرار می‌گیرند.

با توجه به تعاریف گفته شده، حالا می‌توان به چند نتیجه مهم در مورد HTML دست یافت:

• HTML زبان پیچیده برنامه نویسی نیست، بلکه برای توصیف صفحات وب از طریق متن عادی به کار می‌رود.
• هر صفحه وب در واقع یک فایل HTML است و هر فایل HTML یک متن ساده است. اما فایل .html به جای متن، از چندین تگ HTML و محتوا ساخته شده است
• یک وب سایت اغلب حاوی چندین فایل HTML است که به یکدیگر لینک شده‌ و قابل ویرایش هستند.
• تگ‌های HTML در واقع کلمات کلیدی پنهان شده در صفحات وب هستند که مشخص می کنند مرورگر چطور باید محتوا را نمایش دهد.
• اکثر تگ‌ها دو بخش آغازین و پایانی را دارند. تگ پایانی همان متن تگ آغازین را دارد اما یک اسلش (/) به قبل از آن اضافه شده است مثل  <html> و <html/>  که اولی تگ آغازین و دومی تگ پایانی است.
• تگ‌ها می‌توانند دارای خصوصیت یا attribute باشند یعنی می‌توان آن‌ها را به شکل دلخواه تغییر داد. برای این کار  باید با استفاده از علامت مساوی، مقداری را تعیین کرد مثل "0"=border و "%50"=width اما برخی دیگر مانند <hr  noshade> را فقط باید داخل تگ عنوان کرد.
• فایل‌های HTML باید با پسوند .htm یا .html مشخص شوند.
• مشخصات صفحات وب توسط تگ‌های HTML توصیف می‌شوند.
• HTML اساس و بنیان ایجاد صفحات وب است اما برای زیباسازی آن‌ها باید از CSS بهره برد.

رابطه زبان HTML با CSS

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

 

 

چگونه یک فایل HTML بسازیم؟

برای ساخت فایل اچ تی ام ال می‌توانید از bracket و یا از notepad استفاه کنید. در هر یک از این دو نرم‌افزار یک فایل جدید باز کرده و نمونه کد بالا را در آن تایپ کنید. سپس فایل را با نام دلخواه و فرمت html. ذخیره نمایید. در مقاله معرفی زبان css  در بخش مقالات آموزشی طراحی سایت هم می‌توانید یاد بگیرید که چگونه از کدهای css در فایل html به صورت خارجی استفاده کنید.