مقدمه‌ای بر زبان HTML
HTML که مخفف HyperText Markup Language زبان نشانه‌گذاری استاندارد وب است. هر چند که در اصطلاح اچ تی ام ال را یک زبان می‌نامیم اما در حقیقت یک زبان برنامه نویسی مستقل نیست! بلکه زبانی برای نشانه‌گذاری ابرمتن و ساختارمندی اطلاعات و طبقه بندی اجزای یک متن (نظیر عناوین، جداول، تصاویر و غیره) است.
از طرفی اچ تی ام ال، زبان صفحه آرایی صفحات وب نیز نیست. بلکه برای این زیبایی صفحات وب باید از CSS کمک گرفت. سندهای اچ تی ام ال، پروندههای مبتنی بر متن هستند که با .htm یا .html ذخیره می‌شوند و توسط مرورگرها درک و تفسیر شده و در نهایت رندر می‌شوند.
در ادامه‌ی این مقاله از مجله‌ی پارس تاپ10، به بررسی تاریخچه، ساختار، تگ‌ها و ویژگی‌های HTML خواهیم پرداخت.
تاریخچه‌ی زبان HTML
در این قسمت مختصری از تاریخچه‌ی پیدایش زبان اچ تی ام ال را با هم بررسی می‌کنیم.
آغاز توسعه (اوایل 1990)
تیم برنرز-لی، یک محقق انگلیسی، در اوایل دهه 1990 در CERN (سازمان اروپایی برای پژوهش‌های هسته‌ای) شروع به کار بر روی پروژه‌ای به نام ویب کرد. هدف او تسهیل دسترسی به اطلاعات در میان محققان و دانشمندان بود.
در سال 1991، برنرز-لی اولین نسخه زبان HTML را معرفی کرد. این نسخه شامل تگ‌های بسیار ابتدایی بود که به‌دستکاری محتوا و تعیین ساختار صفحه کمک می‌کرد.
HTML 2.0 (1995)
با رشد وب، نیاز به استانداردسازی زبان HTML بیشتر احساس شد. در سال 1995، IETF (گروه کاری مهندسی اینترنت) نسخه HTML 2.0 را منتشر کرد. این نسخه، ویژگی‌های جدیدی از جمله فرم‌ها و رسانه‌ها را اضافه کرد.
HTML 3.2 و HTML 4.0 (1997-1999)
با گذر زمان، زبان HTML نیاز به به‌روزرسانی‌های بیشتری داشت. در سال 1997، HTML 3.2 منتشر شد که شامل ویژگی‌های جدیدی مانند جداول، اپلت‌ها و تگ‌های جدید برای گرافیک بود. در سال 1999 نیز HTML 4.0 معرفی شد که قابلیت‌های بیشتری را ارائه داد. همچنین تمرکز بیشتری بر روی قابلیت دسترسی (Accessibility) و جداسازی محتوا از نمایش (با CSS) داشت.
XHTML و تغییرات در وب (2000s)
با توجه به نیاز به استانداردسازی بیشتر و کاهش خطاها، XHTML (که HTML را با XML ترکیب می‌کند) در اوایل دهه 2000 معرفی شد. این زبان به توسعه‌دهندگان اجازه می‌داد تا کدهای خود را دقیق‌تر نوشته و از قابلیت‌های XML استفاده کنند.
HTML5 (2014)
HTML5 در سال 2014 به‌طور رسمی معرفی شد. این نسخه بزرگترین تغییرات را به همراه داشت، از جمله:
- تگ‌های جدید: مانند <article>, <section>, <nav>, و <header>.
- پشتیبانی چندرسانه‌ای: تگ‌های <audio> و <video> امکان به‌کارگیری فایل‌های رسانه‌ای را بدون نیاز به پلیرها فراهم کردند.
- APIهای جدید: APIهای جدیدی برای ویژگی‌هایی همچون محلی‌سازی، ذخیره‌سازی مبتنی بر مرورگر و کش CDN معرفی شد.
زبان HTML به عنوان یکی از پایه‌های وب، از زمان ایجاد خود تا کنون دچار تغییرات و تکامل‌های چشم‌گیری شده است. این زبان از یک ابزار ساده برای نشانه‌گذاری به زبانی پیچیده و قدرتمند تبدیل شده است که به توسعه‌دهندگان وب امکان ایجاد تجربیات کاربری جذاب و تعاملی را می‌دهد. با پیشرفت فناوری و نیازهای جدید، می‌توان انتظار داشت که زبان HTML در آینده نیز تکامل یابد.
ساختار زبان HTML
زبان HTML یک زبان نشانه‌گذاری است که با استفاده از تگ‌ها اطلاعات را سازماندهی می‌کند. یک صفحه HTML از عناصر مختلفی تشکیل شده است:
1. تگ‌های HTML: تگ‌ها معمولاً با `<` و `>` آغاز و پایان می‌یابند.
– تگ شروع: برای مثال `<p>` به‌معنای شروع یک پاراگراف.
– تگ پایان: برای مثال `</p>` برای پایان پاراگراف.
2. متن درون تگ‌ها: متن یا محتوایی که باید نمایش داده شود، درون تگ‌ها قرار می‌گیرد.
برای مثال قطعه کد زیر دو پارگراف را در صفحه‌ی وب نشان می‌دهد:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
ساختار کلی یک صفحه HTML
در زیر یک نمونه ساختاربندی صفحه‌ی وب را مشاهده می‌کنید. همان طور که می‌بینید همه‌ی کد ها باید در داخل تگ Html باشند. خود تگ html نیز از دو تگ head و body تشکیل شده است.<!DOCTYPE html>
<html lang=”fa”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>متن پاراگراف.</p>
</body>
</html>
اجزای ساختار
– `<!DOCTYPE html>`: مشخص کننده نوع سند و نسخه HTML.
– `<html>`: ریشه تمامی عناصر HTML.
– `<head>`: شامل متا دیتاها، عنوان صفحه و لینک به استایل‌ها.
– `<body>`: شامل محتوای اصلی و قابل نمایش صفحه.
تگ‌های مهم زبان HTML
در این قسمت به صورت تیتروار و خلاصه با تگ‌های مهم در زبان نشانه‌گذاری آشنا می‌شویم:
1. تگ‌های متنی
– `<h1> تا <h6>`: تگ‌های عنوان که برای تعیین عناوین بخش‌ها استفاده می‌شوند. `<h1>` بزرگترین و `<h6>` کوچک‌ترین است.
– `<p>`: برای ایجاد پاراگراف‌ها.
– `<strong>`: برای تاکید بر روی متن (خط ضخیم).
– `<em>`: برای تأکید بر متن (خط کج).
2. تگ‌های لینک و تصاویر
– `<a href=”URL”>`: برای ایجاد پیوند به صفحات دیگر.
– `<img src=”URL” alt=”متن جایگزین”>`: برای اضافه کردن تصویر به صفحه.
3. تگ‌های لیستی
– `<ul>`: لیست غیر مرتب.
– `<ol>`: لیست مرتب.
– `<li>`: آیتم‌های لیست.
4. تگ‌های فرم
– `<form>`: برای ایجاد فرم‌ها.
– `<input>`: برای گرفتن ورودی از کاربر.
– `<textarea>`: برای ایجاد مناطق متنی بزرگ.
ویژگی‌ها یا مزایای زبان HTML چیست؟!
1. سادگی: زبان HTML یک زبان ساده و کاربرپسند است که یادگیری آن آسان است.
2. قابلیت دسترسی: صفحات HTML می‌توانند به راحتی توسط موتورهای جستجو، کاربران با نیازهای خاص و مرورگرهای مختلف مشاهده شوند.
3. قابلیت سازگاری: HTML با سایر زبان‌ها و فناوری‌ها به‌خوبی کار می‌کند و می‌تواند با CSS و JavaScript ترکیب شود.
HTML5 چیست؟!
نسخه HTML5 که در سال 2014 معرفی شد، ویژگی‌ها و امکانات بیشتری را به این زبان اضافه کرده است:
– تگ‌های جدید مانند `<article>`, `<section>`, `<nav>`, و `<footer>` برای سازماندهی بهتر محتوا.
– قابلیت‌های چندرسانه‌ای: شامل `<audio>` و `<video>` برای پشتیبانی از فایل‌های صوتی و تصویری.
– بهبودهای در قابلیت‌های فرم و نقشه‌های گرافیکی.
تفاوت زبان HTML 5 با نسخه های قبلی
نسخه 5 زبان HTML (HTML5) نسبت به نسخه‌های قبلی خود، تغییرات و بهبودهای عمده‌ای را ارائه داده است. در ادامه به برخی از تفاوت‌های کلیدی HTML5 با نسخه‌های قبلی از جمله HTML4 و XHTML می‌پردازیم:
1. تگ‌های جدید و ساختاری
تگ‌های مفهومی جدید: HTML5 شامل تگ‌های جدیدی است که به سازماندهی بهتر محتوا کمک می‌کند، مانند:
<header>: برای سرصفحه‌ها.
<nav>: برای ناوبری.
<article>: برای محتوای مستقل.
<section>: برای بخش‌های مرتبط.
<footer>: برای پایانی مثل حقایقِ پایانی.
این تگ‌ها باعث بهبود ساختار و قابلیت دسترسی صفحات وب می‌شوند.
2. پشتیبانی چندرسانه‌ای
HTML5 به طور رسمی ویژگی‌های چندرسانه‌ای را شامل می‌شود، که این امکان را به توسعه‌دهندگان می‌دهد تا بدون نیاز به پلیرهای جانبی، ویدئو و صوت را در صفحات وب قرار دهند. به عنوان مثال:
<video>: برای وارد کردن ویدئو.
<audio>: برای صوت.
نسخه‌های قبلی نیاز به پلاگین‌های اضافی مانند Flash برای پخش ویدئوها داشتند.
3. APIهای جدید
HTML5 شامل مجموعه‌ای از APIهای جدید است که امکانات بیشتری را فراهم می‌کند:
- API ذخیره‌سازی محلی: مانند Local Storage و Session Storage برای ذخیره مداوم داده‌ها در مرورگر.
- Geolocation API: برای شناسایی موقعیت کاربر.
- Canvas API: برای رسم گرافیک و انیمیشن‌ها به صورت پویا.
این APIها باعث توانمندسازی توسعه‌دهندگان وب برای ایجاد اپلیکیشن‌های پیشرفته و تعاملی می‌شوند.
HTML5 به عنوان یک زبان پیشرفته‌تر و کارآمدتر، امکانات گسترده‌تری را برای توسعه‌دهندگان وب فراهم کرده و آن‌ها را قادر می‌سازد تا تجربیات تعاملی و چندرسانه‌ای جذاب‌تری برای کاربران ایجاد کنند. این به‌روزرسانی‌های مهم نشان‌دهنده‌ی پاسخ به نیازهای روزافزون وب و تغییرات تکنولوژیکی است.
4. بهبود در فرم‌ها
HTML5 ویژگی‌های جدیدی به فرم‌ها اضافه کرده است، مانند:
- نوع‌های ورودی جدید: مانند email, url, number, date, و range, که به مرورگرها امکان می‌دهد تا اعتبارسنجی و نوع ورودی را به راحتی انجام دهند.
- Attributeهای جدید: مانند placeholder, autofocus, و required به توسعه‌دهندگان کمک می‌کند تا تجربه کاربری بهتری را ایجاد کنند.
5. بهینه‌سازی برای موبایل
HTML5 با در نظر گرفتن استفاده گسترده از دستگاه‌های موبایل طراحی شده است. ویژگی‌های مانند Responsiveness (واکنش‌گرایی) و بهینه‌سازی برای صفحه‌نمایش‌های کوچک باعث می‌شود تا سایت‌ها به خوبی بر روی دستگاه‌های موبایل و تبلت‌ها نمایش داده شوند.
6. حذف تگ‌ها و ویژگی‌های زاید
HTML5 برخی از تگ‌ها و ویژگی‌های غیرضروری و قدیمی را حذف کرده است که به سادگی و بهینه‌سازی بیشتر کد کمک می‌کند. به عنوان مثال، تگ‌های <font> و <center> قدیمی و نامناسب در طراحی مدرن حذف شده‌اند.
چرا باید این زبان را یاد بگیریم؟
اگر شما یک دانشجوی کامپیوتر یا فناوری اطلاعات (IT) هستید و یا خودتان به طراحی صفحات وب علاقه‌مندید باید برای شروع اچ تی ام ال را به خوبی یادبگیرید.
هر چند که روند یادگیری تنها به فراگیری زبان HTML ختم نمی‌شود و شما باید پس از آن به فراگیری CSS و سپس به فراخور علاقه تان باید جاوا اسکریپت، PHP یا ASP یا PYTHON را نیز بیاموزید تا بتوانید صفحات وب قدرتمندی خلق نمایید.
یادگیری HTML را از کجا شروع کنیم؟
یکی منابع اصلی برای آموزش زبان HTML و سایر زبان‌های طراحی وب، سایت W3School است. در این سایت شما با مثال‌های ساده و به صورت گام به گام با این زبان آشنا می‌شوید. بنابراین بسیاری از اساتید نیز این سایت را منبع خوبی برای یادگیری html می‌دانند.
محیط برنامه نویسی html چیست؟
از آنجایی که اچ تی ام ال یک سند متنی است، نیازی به محیط برنامه نویسی خاصی ندارد و شما می‌توانید به راحتی آن را در برنامه‌ی notepad ویندوز نیز بنویسید. اما برای مدیریت بهتر و تسریع در روند برنامه‌نویسی بهتر است از برنامه‌های قوی تری مانند برنامه‌های زیر استفاده نمایید.
الف) ویرایشگرهای متن ساده
این برنامه‌ها معمولا بسیار سبک هستند و معمولا اجرای آن‌ها در هر سیستمی امکان پذیر است.
Notepad++
- ویژگی‌ها: پشتیبانی از چندین زبان برنامه‌نویسی، قابلیت برجسته‌سازی سینتکسی (syntax highlighting)، و قابلیت نصب افزونه‌ها.
- سازگاری: ویندوز
Sublime Text
- ویژگی‌ها: محیط کاربری زیبا، قابلیت جستجوی سریع، و امکان ویرایش چندگانه.
- سازگاری: ویندوز، macOS، و لینوکس
Visual Studio Code
- ویژگی‌ها: قابلیت‌های قوی مانند IntelliSense، قابلیت اکستنشن‌ها، و پشتیبانی از Git.
- سازگاری: ویندوز، macOS، و لینوکس
Atom
- ویژگی‌ها: ویرایشگر متن متن باز با قابلیت‌های شخصی‌سازی بالا و پشتیبانی از پلاگین‌ها.
- سازگاری: ویندوز، macOS، و لینوکس
ب ) محیط‌های توسعه یکپارچه (IDE)
WebStorm
- ویژگی‌ها: یک IDE قوی برای توسعه وب که شامل ابزارهای ویژه HTML، CSS و JavaScript است.
- سازگاری: ویندوز، macOS، و لینوکس (این ابزار تجاری است و هزینه‌ای دارد)
Adobe Dreamweaver
- ویژگی‌ها: قابلیت طراحی بصری و کدنویسی همزمان، ابزارهایی برای طراحی وب و مدیریت کد.
- سازگاری: ویندوز و macOS (این ابزار نیز تجاری است)
ج) پلتفرم‌های آنلاین
CodePen
- ویژگی‌ها: یک محیط آنلاین برای نوشتن و آزمایش کد HTML، CSS و JavaScript. مناسب برای کارهای نمایشی و نمونه‌های سریع.
- ویژگی استفاده: اشتراک‌گذاری و همکاری آسان با دیگران.
JSFiddle
- ویژگی‌ها: یک پلتفرم آنلاین برای آزمایش کد HTML، CSS و JavaScript. رابط کاربری ساده و طرح‌بندی نمودار.
- ویژگی استفاده: گزینه‌های آسان برای به اشتراک‌گذاری و مشاهده نتایج به صورت فوری.
انتخاب برنامه مناسب برای نوشتن زبان HTML بستگی به نیازها و ترجیحات شخصی شما دارد. اگر به دنبال یک ویرایشگر ساده و سبک هستید، Notepad++ یا Sublime Text انتخاب خوبی است. اگر به یک IDE با قابلیت‌های پیشرفته‌تری نیاز دارید، WebStorm یا Adobe Dreamweaver گزینه‌های مناسبی محسوب می‌شوند. همچنین، اگر به راحتی می‌خواهید کد بنویسید و نتایج را بی‌درنگ مشاهده کنید، CodePen و JSFiddle گزینه‌های عالی هستند.
نتیجه‌گیری
زبان HTML، زبان اصلی طراحی و توسعه وب‌سایت‌ها است و به عنوان یک ابزار کلیدی برای توسعه‌دهندگان وب اهمیت بسیار بالایی دارد. هر چند که صفحات پویا و قدرتمند وب تنها از اچ تی ام ال ساخته نشده اند و نیاز به استفاده از زبان‌هایی چون Asp، python یا php نیز هست اما یادگیری و تسلط بر اچ ام ال قدم اول در طراحی صفحات وب است و یادگیری آن بسیار اهمیت دارد.
