آموزش قدم به قدم HTML – بخش دوم – شروع کار: مفهوم تگ ها و انواع آن

سلام عرض می کنم خدمت دوستان عزیز؛ در قسمت قبلی از مجموعه آموزش قدم به قدم HTML در cutedownload, با مقدمات اسناد اچ تی ام ال و کلیات طراحی وب آشنا شدیم. در این قسمت از این مجموعه می خواهیم به معرفی مهمترین مفهوم در زبان html یعنی “تگ ها” بپردازیم.
اگر هیچ آشنایی با زبان اچ تی ام ال ندارید, شاید با نگاه به کد های این زبان, آرایش خاص علامت های کوچکتر و بزرگتر (< و >) توجه شما را به خود جلب کرده باشد. آرایشی که عبارات و دستورات HTML را در خود جای داده اند. شما که این آموزش را میخوانید به احتمال زیاد مفهوم این علامت ها و عبارات درونشان را متوجه نمیشوید. این علامت های کوچتر و بزرگتر و عبارات درونشان در HTML , “تگ” نام دارند.

توجه: همانطور که در قسمت قبلی گفتم, HTML یک زبان نشانه گذاری است. نه برنامه نویسی. اما معمولا و به اشتباه آنرا زبان برنامه نویسی می نامند. بنابراین ما هم در این آموزش ها از لفظ برنامه نویسی برای همه ی زبان ها استفاده می کنیم. هرچند اشتباه است اما این چیزیست که جا افتاده.

تگ چیست؟

تگ (tag) ها عباراتی به شکل <نام تگ> هستند که هدفشان ارائه و شناساندن نوع خاصی از محتوا به مرورگر است. واضح ترش این میشود که اگر میخواهید محتوای خاصی را از یک نوع خاص (مثلا متن یا عکس یا فیلم یا …) به نمایش در بیاورید؛ باید محتوایتان را درون تگ مخصوص به خودش قرار دهید. مثلا اگر محتوای شما متن است باید درون تگ مخصوص به متن (تگ <p>) قرار دهید تا مرورگر بفهمد که محتوا از چه نوعی است و باید با آن چه کار کند (البته این را هم یک گوشه داشته باشید که انواع تگ ها به همین تقسیم بندی کلی متن و عکس و … محدود نمیشود, بلکه هر نوع محتوا دارای انواع مختلف تگ مخصوص به خود هست. مثلا برای نمایش متن, تگ های مختلفی برای نمایش پاراگراف, عنوان و … وجود دارد. البته الان نیازی نیست در این مورد خاص به خودتان فشار بیاورید. در ادامه بازترش می کنیم)

شروع کار با ایجاد یک سند HTML

بعد از آشنایی با مفاهیمی مانند “تگ ها”, بهتر است با ایجاد یک سند اچ تی ام ال و کار با آن ها, html را کاربردی تر بیاموزیم. یک فولدر با نام “training” در هر جای کامپیوترتان که دوست دارید ایجاد کنید. سپس درون این فولدر با راست کلیک کردن و انتخاب گزینه “Text document” در قسمت “New”یک فایل متنی ایجاد نمایید. اگر کامپیوترتان پسوند فایل ها را در انتهای نامشان بعد از یک نقطه نمایش میدهد نیازی به انجام مرحله ی بعدی ندارید اما اگر نشان نمیدهد (یعنی فقط نام فایل بدون پسوند در زیر آن نمایش داده میشود) باید این مرحله ای که میگویم را انجام دهید. ابتدا Control Panel را باز کنید. سپس در پنجره کنترل پنل روی گزینه “Folder Options” کلیک کنید. در پنجره باز شده روی تب “View” کلیک کرده و در قسمت “Advanced settings” تیک گزینه “Hide extensions for known file types” را بردارید. در نهایت روی دکمه OK کلیک کنید. حالا اگر به نام فایل هایتان نگاه کنید, در انتهایش پسوند آن فایل را هم نمایش میدهد.

بعد از انجام مراحل بالا دوباره به فولدر “training” برگردید و روی فایل متنی که ساخته بودید راست کلیک کنید و گزینه “Rename” را انتخاب کنید. سپس همه ی محتویات موجود در قسمت نام همراه با پسوند آن را پاک کنید و به جایش بنویسید “index.html” و اینتر را فشار دهید. بعد از فشردن کلید اینتر, پنجره ای باز می شود که به شما درمورد تغییر نوع فایل هشدار میدهد و شما باید روی دکمه ی Yes کلیک کنید.

حالا فایلی که از نوع متنی بود و با نوت پد باز میشد, تبدیل به یک فایل html شد که با مرورگر وب تان باز میشود. برای آزمایش روی آن دوبار کلیک کنید تا نتیجه اش را ببینید. تعجب نکنید. انتظار نداشته باشید وقتی هیچ کدی ننوشته اید, برایتان طرح یک سایت زیبا را نمایش دهد. صفحه سفید است اما به زودی پر میشود. فایل “index.html” سند اچ تی ام ال اصلی شماست و مرورگر برای نمایش سایت یا قالبتان این فایل را فراخوانی می کند.

نوشتن اولین کد HTML – اعلان Doctype

حالا که همه چیز ردیف است شروع می کنیم به نوشتن کد های اچ تی ام ال. پس فایل index.html تان را با یک ویرایشگر زبان های برنامه نویسی (مثل Dremweaver) باز کنید. البته انتخاب نوع ویرایشگر بستگی به خودتان دارد. حتی می توانید از نوت پد ویندوز برای ویرایش و برنامه نویسی استفاده کنید. هیچ فرقی نمیکند. اما چون در ابتدای کار هستید بهتر است از همان نوت پد استفاده کنید تا با تمرین بیشتر, کد ها را بهتر به ذهن بسپارید.

بعد از باز کردن فایل index.html با یک ویرایشگر, لازم است که نوع صفحه مان را برای مرورگر تعریف کنیم. انجام این کار با اضافه کردن یک اعلان <!DOCTYPE> در ابتدای سند HTML امکان پذیر است. این اعلان (نگویید تگ, چون تگ نیست) به مرورگر می فهماند که صفحه از چه نوعی است (که در اینجا اچ تی ام ال است) و چه نسخه ای از اچ تی ام ال است. چون شما از HTML5 استفاده می کنید لازم است که به ابتدای سند اچ تی ام ال تان کد زیر را اضافه کنید.

HTML

<!DOCTYPE html>

اما اگر از HTML4و نسخه های قدیمیتر می خواهید استفاده کنید باید به جای کلمه ی html در کد بالا, دستورات دیگری را بنویسید. چون استفاده از نسخه های قدیمیتر اچ تی ام ال پیشنهاد نمیشود و مناسب هم نیستند ما آن دستورات را اینجا نمی آوریم. شما فقط همان کدی که در بالا قرار دادم را به صفحه تان اضافه کنید.

ساختار های حتمی

در برنامه نویسی html یکسری ساختار ها هستند که حتما باید از آنها در سند اچ تی ام ال استفاده شود. مهمترین ساختار هایی که باید قرار داده شوند در زیر آورده شده است:

۱- تگ html

این تگ حتما باید در سند اچ تی ام ال قرار داده شود. تگ html یک تگ باز و بسته شونده است. بگذارید اول ببینیم تگ های باز و بسته شونده یعنی چه. در اچ تی ام ال تگ ها به دو دسته باز و بسته شونده و تهی تقسیم بندی می شوند. تگ های باز و بسته شونده به صورت <نام تگ> باز می شوند و پس از قرار گرفتن محتوا درونشان, به صورت <نام تگ/> بسته می شوند. اما تگ های تهی نیازی به بسته شدن ندارند و در واقع محتوایی درونشان قرار نمیگیرد که بسته شوند. پس به صورت <نام و مشخصات تگ> باز می شوند و دیگر بسته نمی شوند.

دوباره فایل index.html تان را با ویرایشگر متنی نوت پد باز کنید و بعد از اعلان <!DOCTYPE> تگ <html> را به صورت زیر باز کنید و ببندید:

HTML

<html>
 </html>

تگ html دربردارنده تمامی کد های یک سند اچ تی ام ال است (البته به جز اعلان <!DOCTYPE> که در بالای تگ شروع html نوشته می شود).

نکته: تگ html فقط یکبار نوشته می شود.

تاحالا باید کد های سند index.html تان به صورت زیر باشد:

HTML

<!DOCTYPE html>
<html>
</html>

۲- تگ head

این تگ نیز حتما باید در سند اچ تی ام ال قرار داده شود. تگ head نیز یکبار باز و یکبار بسته می شود. تگ را به صورت زیر بعد از تگ شروع <html> باز کنید و ببندید:

HTML

<html>
<head>
</head>
</html>

تگ head دربردارنده تمامی مشخصات صفحه که قابل نمایش در صفحه مرورگر نیستند است. چیز هایی مثل عنوان صحفه (که در قسمت بالای مرورگر نشان داده می شود), کلمات کلیدی, عنوان صفحه, فراخوانی فایل های دیگر و … درون تگ head قرار می گیرند.

توجه: تگ head حتما باید اولین تگ بعد از تگ شروع html باشد.

نکته: تگ هایی مثل <title>, <script>, <meta>, <style>, <link> میتوانند درون تگ <head> قرار بگیرند. مثلا در کد زیر عنوان صفحه را تایین کرده ایم:

HTML

<!DOCTYPE html>
<html>
<head>
<title>WEBTOASTER</title>
</head>
</html>

کد بالا را در فایل ایندکستان بنویسید و آن را ذخیره کنید. سپس با یک مرورگر آن را باز کنید. میبینید که در قسمت بالایی مرورگر عنوان صفحه نوشته شده است (که در اینجا عبارت WEBTOASTER است)

۳- تگ body

تگ <body> محتوی تمامی کدها و عناصر قابل نمایش در صفحه ی مرورگر است. مثلا اگر متنی می خواهید بنویسید باید آن را درون تگ خاص خودش در تگ <body> قرار دهید.

این تگ هم باز و بسته می شود.

حتما تگ <body> را بعد از تگ پایان </head> باز کنید و ببندید. به صورت زیر:

HTML

<html>
<head>
</head>
<body>
</body>
</html>

یک مثال:

HTML

<!DOCTYPE html>
<html>
<head>
<title>WEBTOASTER</title>
</head>
<body>
<p>متن آزمایشی</p>
</body>
</html>

کد بالا یک صفحه ایجاد می کند که عنوانش WEBTOASTER است و درون صفحه هم یک متن به صورت پاراگراف با محتوای “متن آزمایشی” قرار دارد.

حالا بعد از ذخیره فایل, آنرا با مرورگر خود باز کنید. چه می بینید؟ بله یکسری حروف عجیب و غریب که در واقع همان عبارت “متن آزمایشی” می باشد. برای رفع این مشکل کد زیر را بعد از تگ شروع <head> قرار دهید:

HTML

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

این کد انکودینگ صفحه را به UTF-8 که انکودینگ مناسب برای نمایش حروف فارسی است تغییر میدهد. اما باز هم مشکلی وجود دارد. اگر پس از ذخیره, فایلتان را با مرورگر باز کنید میبینید که حروف به شکل دیگری عجیب و غریب شده اند. برای رفع این مشکل ابتدا نرم افزار Notepad++ را دانلود و نصب کنید. پس از نصب مراحل زیر را طی کنید:

1. نرم افزار را اجرا کنید و فایل html را درونش باز کنید.
2. از تمامی محتویات درون این فایل کپی بگیرید.
3. از منوی Encoding گزینه Encode in UTF-8 without BOM را انتخاب کنید.
4. کدی را که در مرحله ۲ کپی کرده بودید جایگزین تمامی کد های موجود کنید.
5. فایل را ذخیره کنید.

حالا با اجرای سند اچ تی ام ال در مرورگر می بینید که مشکل برطرف شده است. این مراحل را باید برای تمامی سند های اچ تی ام ال جدیدی که ایجاد می کنید انجام دهید.