urdon-CO

در این جلسه قصد داریم به آموزش پایه 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 صدها تگ دارد که هرکدام وظیفه و عملکرد مخصوص به خود را دارند. نگران نباشید، یادگیری این تگ‌ها بسیار آسان است و ما از درس‌های آینده سعی می‌کنیم در هر جلسه چند تگ مهم و کاربردی را به شما آموزش دهیم.

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

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

• تگ‌های جفت
• تگ‌های تهی

تگ‌های جفت

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

• content

در این مثال

تگ باز و

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

تگ‌های تهی

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

• name
  father phury 

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

name

father phury

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

صفت یا attribute چیست؟

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

تگ وظیفه ایجاد پیوند (link) در صفحات وب را دارد. کد زیر عبارت urdon team را به آدرس urdon-co.ga لینک می‌کند.

•  urdon team 

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

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

• content

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

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