طراحی سایت - مقالات

آشنایی با HTML به زبان کمی ساده

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

اگر بخواهیم یک معادل فارسی برای کلمه HTML در نظر بگیریم با توجه به اینکه این ترکیب چهار حرفی مخفف کلمات Hyper Text Markup Language است، می‌توانیم از آن به عنوان “زبان نشانه‌گذاری اَبَرمتن” یاد کنیم که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌رود.

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

شاید سوالی برای شما پیش بیاید که اگر HTML زبان برنامه‌نویسی نیست، پس چیست؟ اگر به کلمه‌ی Markup دقت کنیم، متوجه می‌شویم که حتی در اسم HTML هم آمده است که یک زبان Markup به معنای نشانه‌گذاری یا علامت‌گذاری است نه زبان برنامه‌نویسی! که البته کنسرسیوم وب نیز آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده است.

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

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

زبان‌های برنامه‌نویسی سروری در نهایت با استفاده از برنامه‌ای به نام کامپایلر (که زبان برنامه‌نویسی سطح بالا را به زبانی سطح پایین تبدیل می‌کند) کدهای خود را برای نمایش به کد HTML تبدیل می‌کنند و برای مرورگر می‌فرستند تا به کاربران نمایش داده شوند.

قرار بود به زبان کمی ساده توضیح دهیم که HTML چیست؟ اما کار به جاهای باریک کشیده شد.

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

پس باید تاکنون متوجه شده باشید که برای قرار دادن هر چیزی در صفحه‌ی وب از HTML استفاده می‌شود. مثلاً می‌توانید به کمک این زبان یک متن یا عکس را در سایت قرار دهید که هیچ جذابیت ظاهری خاصی ندارد. برای اینکه به آنها جذابیت‌های ظاهری متفاوتی ببخشیم باید از استایل‌ها یا CSS استفاده کنیم که در مقالات آینده به آن خواهیم پرداخت.

تگ‌ها در HTML

در زبان نشانه‌گذاری ابر متنی بخش‌های مختلف توسط اجزايی به نام برچسب یا تگ (Tag) از هم جدا شده‌اند، که هر کدام دارای کاربرد و خواص مربوط به خود هستند.

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

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

فراموش نکنید که هر یک از برچسب‌های HTML، معنا و مفهوم خاصی دارند و تاثیر مشخصی بر محتوا می‌گذارند و با استفاده از علامت <> به صورت باز و بسته در داخل کد به نمایش در می‌آیند.

صفت یا attribute چیست؟

برای اینکه بتوانیم یک برچسب، عنصر یا تگ را بهتر توصیف کنیم، از صفت یا Attribute استفاده می‌کنیم. در واقع با استفاده از صفت رفتار و وضعیت تگ را تعریف می‌کنیم. به عنوان نمونه صفت href در تگ a نشان دهنده قرار دادن لینک است که در مثال پایین می‌توانید آن را مشاهده کنید.

شاید جالب باشد که بدانید برای ساختن کدهای HTML نیاز به نرم‌افزار یا برنامه خاصی ندارید و با استفاده از یک Notepad نیز به راحتی می‌توانید به طراحی ساختار اصلی صفحات وب بپردازید. یک فایل HTML، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود.

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

<!DOCTYPE html>

<html>

<title>عنوان صفحه اینجا نمایش داده می شود</title>

<body>

<p title=”این صفت برچسب است”> This is My First HTML Project </p>

<br>

</body>

</html>

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

دوره آموزشی طراحی سایت و فروشگاه اینترنتی بدون کدنویسی

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

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