آموزش پایه HTML | انواع تگ‌ها | نحوه نوشتن و اجرای کدها

در این جلسه قصد داریم به آموزش پایه HTML بپردازیم. همانطور که می‌دانید در سیستم‌های کامپیوتری هر فایلی دارای یک پسوند است. برای مثال پسوند فایل‌های کتاب الکترونیک pdf است. هر فایل در سیستم‌های کامپیوتری با توجه به پسوندی که دارد شناسایی می‌شود. برای کار با پسوندهای مختلف نیاز به نرم افزار های متفاوتی داریم.

برای مثال برای اینکه بتوانیم فایل‌های pdf را مشاهده کنیم، می‌توانیم نرم افزار adobe reader را نصب کنیم. یا برای مشاهده فایل‌های ویدیویی (با پسوند‌های مختلف) نیاز به نرم‌افزاری مثل KM Player داریم.

پسوند فایل‌های HTML

وقتی که به زبان HTML کد می‌نویسیم. در نهایت این کدها را با پسوند htm ذخیره می‌کنیم. یعنی کل خروجی کار ما یک یا چند فایل با پسوند htm. می‌شود. خب نرم افزاری که بتواند فایل‌های htm را اجرا کند چه نرم‌افزاری است؟ مرورگرهای صفحات وب یا همان Web Browser ها.

در حال حاضر بهترین مرورگر دنیا نرم افزار Google Chrome است که کاربران زیادی را به خود جذب کرده است. از دیگر مرورگرهای معروف می‌توان به Firefox، Opera، Safari و Internet Explorer اشاره کرد.

پس این نکته مهم را یاد گرفتید که فایل htm که خروجی کار ماست را می‌توانیم با مرورگر‌های مختلف اجرا کنیم و نتیجه کار خود را ببینیم.

نکته: کدهای html را می‌توان با دو پسوند htm و html ذخیره کرد. در عمل این دو پسوند هیچ تفاوتی باهم ندارند اما نکته بسیار مهمی در اینجا وجود دارد. در سیستم‌های کامپیوتری اکثر پسوند‌ها ۳ حرفی هستند و ممکن است که بعضی از سیستم ها از پسوند‌های ۴ حرفی و غیره پشتیبانی نکنند. پس برای اینکه به مشکلی برنخورید بهتر است همیشه از پسوند htm استفاده کنید.

مفاهیم پایه HTML

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

تگ‌ها چگونه نوشته می‌شوند؟ چند نوع تگ داریم؟

از لحاظ نوشتن تگ‌ها می‌توان آنها را به دو دسته تقسیم کرد:

1. تگ‌های جفت
2. تگ‌های تهی

تگ‌های جفت

تگ‌های جفت به صورت زوج‌های دوتایی نوشته می‌شوند. به اولی تگ باز و به دومی تگ بسته گفته می‌شود. هر چیزی که بین این دو تگ قرار گیرد جزو محتوای درون آن محسوب می‌شود. به مثال زیر دقت کنید:

<p> content </p>

در این مثال <p> تگ باز و <p/> تگ بسته است. عبارت content هم محتوای درون تگ حساب می‌شود. دقت کنید تگ بسته هم دقیقا مانند تگ باز نوشته می‌شود با این تفاوت که قبل از نام تگ یک کاراکتر / قرار می‌دهیم. تگ p وظیفه ایجاد یک پاراگراف در صفحه را دارد.

تگ‌های تهی

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

<p> name <br> ali soltani </p>

در این مثال بازهم از تگ p برای ایجاد یک پاراگراف استفاده شده. درون این پاراگراف عبارتی وجود دارد. همچنین درون تگ p از تگ <br> استفاده شده. این تگ وظیفه شکستن خط را دارد (مانند کلید Enter در هنگام تایپ). اگر دقت کنید این تگ اصلا تگ بسته ندارد. چون اصلا نیازی به تگ بسته ندارد. این تگ یک وظیفه خاص دارد و ما نمی‌توانیم چیزی را درون آن قرار دهیم. خروجی مثال بالا عبارت زیر می‌شود:

name
ali soltani

نکته: اگر دقت کنید در این مثال ما تگ br را درون تگ p نوشته‌ایم. یعنی تگ‌ها می‌توانند بدون هیچ محدودیتی بصورت تو در تو نوشته شوند.

صفت یا attribute چیست؟

برای اینکه بتوان یک عنصر (تگ) را بهتر توصیف کرد، از صفت یا همان attribute استفاده می‌شود. بگذارید با یک مثال توضیح دهیم.

تگ <a> وظیفه ایجاد پیوند (link) در صفحات وب را دارد. کد زیر عبارت ادمین سایت را به آدرس adminesite.com لینک می‌کند.

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

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

ساختار کدهای HTML

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

در خط اول تگ <DOCTYPE html!> را می‌بینید. این تگ یک تگ تهی است و باید دقیقا به همین صورت در ابتدای کدها نوشته شود. این تگ را تگ اعلامیه هم می‌گویند. یعنی به مرورگر اعلام می‌کند که این فایل حاوی کدهای html ورژن 5 است.

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

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

در خط چهارم تگ title وجود دارد. این تگ عنوان صفحه وب را تعیین می‌کند. یعنی هر عبارتی که درون این تگ نوشته شود در عنوان صفحه نمایش داده می‌شود. همانطور که مشاهده می‌کنید این تگ درون تگ head نوشته می‌شود.

در خط ششم تگ body را مشاهده می‌کنید. به تگ body عنصر بدنه هم می‌گویند. هر تگی که درون این تگ نوشته شود در صفحه مرورگر نمایش داده می‌شود.

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

تمرین: پیشنهاد می‌کنیم برای روان شدن دستتان در تایپ انواع تگ‌ها، و یادگیری ساختار کدهای HTML، قطعه کد بالا را ده ها بار در یک ادیتور متن مثل Notepad بنویسید.

نحوه ‌ذخیره و اجرای کدهای HTML

قدم اول: یک نرم‌افزار ویرایشگر متن (مانند Notepad) را باز کرده و کدهای ساختار html را درون آن بنویسید.

قدم دوم: این کدها را با استفاده از کلید‌های ترکیبی Ctrl+S یا از طریق منوی File و انتخاب گزینه save ذخیره کنید. حواستان باشد که باید فایل را با پسوند .htm ذخیره کنید.

قدم سوم: فایلی که ذخیره کرده‌اید را با یک مرورگر (مانند Google Chrome) باز کنید تا کدها اجرا شوند و نتیجه را مشاهده کنید. (البته فعلا چیزی جز یک صفحه سفید و خالی مشاهده نمی‌کنید!)

نکته: هربار که فایل کدهای خود را ویرایش کردید تنها کافیست تا با زدن کنترل ترکیبی Ctrl+S تغییرات را ذخیره کرده و صفحه مرورگر را Refresh کنید تا تغییرات را مشاهده کنید.

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