مزیت صفحات وب یا HTML

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

مشاهده کد HTML Source صفحات در اینترنت

یکی از مزیت های HTML در این است که کدهای HTML صفحات در سایت های مختلف به راحتی قابلیت نمایش داده شدن توسط بینندگان را دارند، برای اینکار وقتی در حین مشاهده یک صفحه وب هستید کافیست به منوی View مرورگر خود رفته و بر روی قسمت Source یا Page Source کلیک کنید، اینکار را هم اکنون برای سایت vfarsi انجام دهید و به کد HTML سازنده صفحه نگاهی بیندازید.

اجزای HTML

تمامی تگ های HTML با ">" شروع و با "<" به پایان می رسند و بیشتر تگ ها دارای یک تگ آغازین و پایانی هستند و مشخصات نام و صفات تگ ها به حروف بزرگ یا کوچک حساس نمی باشند.

صفات تگ ها

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

مقادیر نسبت داده شده به صفات باید در میان کاراکترهای " یا ' قرار بگیرند که هیچ فرقی با یکدیگر ندارند. این مطلب را در خاطر داشته باشید که اگر خود مقدار صفت دارای یکی از همین کاراکترهاست باید از شکل نمونه زیر استفاده شود:

حروف بزرگ و کوچک برای تگ ها و صفات آنها

طبق استانداردهای HTML نسخه 4 به بعد که توسط موسسه World Wide Web Consortium (W3C) تهیه می شود اکیدا توصیه شده است که برای نام و صفات تگ ها همیشه از حروف کوچک استفاده شود، هر چند که هیچ تفاوتی بین نتیجه نمایش تگ های با حروف کوچک و بزرگ وجود ندارد و هر دوی آنها به درستی نمایش داده می شوند.

شروع به ساخت یک صفحه وب

حال که با مفاهیم اولیه آشنا شدید می توانید به راحتی کار با HTML را با استفاده از این مقاله شروع نمایید، در ابتدا شما باید کار با تگ های ابتدایی و پر استفاده را یاد بگیرید، بهتر است کدهای هر قسمت را در فایل آزمایشی HTML خود کپی و Paste کنید و نتیجه هر کدام را در مرورگر خود ببینید:

تگ html

اولین تگی که باید در صفحات خود از آن استفاده کنید تگ html است که باید آنرا در ابتدای فایل HTML خود قرار دهید و تگ پایانی آن را هم باید در پایان صفحه درج کنید:

تگ head

صفحات HTML به دو قسمت head و body تقسیم می شوند. از قسمت head معمولا برای درج عنوان صفحات و سایر اطلاعات اضافی مربوط به صفحه استفاده می شود. از قسمت body هم برای درج متون و تصاویر و به طور کلی هر آنچه را که صفحه باید نمایش دهد استفاده می کنیم. به منظور ایجاد بخش head از تگ head استفاده می کنیم که آنرا بعد از تگ قرار می دهیم و برای مشخص کردن ناحیه انتهایی قسمت head از تگ پایانی استفاده میکنیم.

تگ body

تگ body را دقیقا بعد از تگ پایانی درج می کنیم و تگ پایانی آنرا هم در آخر صفحه قبل از تگ قرار می دهیم.

تگ title

از این تگ که در قسمت head از آن استفاده می شود برای مشخص کردن عنوان صفحه که در بالای پنجره مرورگر قابل مشاهده است استفاده می شود. استفاده از این تگ اجباری است. در انتخاب عناوین برای صفحات خود باید کمی دقت کنید زیرا این عنوان در نوار وظیفه سیستم عامل کاربران و لیست علایق یا Favorites برای اشاره به این صفحه ظاهر می شود و باید واضح و روشن باشد.

مثالی از این تگ را مشاهده می نمایید که عنوان صفحه را عبارت "Article's Title" انتخاب می کند:

تگ های سرتیتر یا h1 تا h6

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

تگ h1 بزرگترین متن عنوان را ایجاد می کند و به همین ترتیب تگ h6 هم کوچکترین متن سرتیتر را می سازد.

با استفاده از کدهای زیر متن "Welcome To My Website" شش بار با اندازه های مختلف نمایش داده می شود:

تگ پاراگراف یا p

اگر می خواهید یک متن در یک پاراگراف جدید قرار گرفته شود از این تگ استفاده کنید، تگ

را قبل از متن قرار دهید و متن را در ادامه درج کنید و تگ اختیاری

را هم در انتها وارد کنید:

ذکر این نکته لازم است که بعد از استفاده از تگ های سرتیتر نیازی به استفاده از تگ p نمی باشد زیرا تگ های سرتیتر بعد از متن عنوان بطور خودکار یک خط اضافه را ایجاد می کنند و همچنین بهتر است برای ایجاد خطوط جدید از تگ BR که در ادامه توضیح داده می شود استفاده کنید.

تگ ایجاد خط یا br

از این تگ زمانی استفاده می شود که بخواهیم خط جدیدی ایجاد کنیم. این تگ، دارای تگ پایانی نیست و بسیار پرکاربرد است:

تگ ایجاد خط افقی یا hr

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

صفت size: این خاصیت ارتفاع خط را به واحد پیکسل مشخص می کند.
ویژگی width: این صفت هم عرض خط را به واحد پیکسل و یا درصد مشخص میکند.
- با اضافه کردن عبارت noshade به انتهای تگ hr سایه خط افقی حذف می شود.

درج متن های توضیحات یا Comments

از این تگ زمانی استفاده می شود که می خواهیم در کد HTML خود متنی را جهت بیان توضیحات اضافی برای بینندگان کد درج نماییم. این کد تنها توسط ویرایشگر ها قابل مشاهده است و توسط مرورگرها نادیده گرفته می شود و هیچ تاثیری در خروجی صفحه برای بینندگان ندارد. برای مثال نوشته "This is a test" که یک توضیح به حساب می آید در مرورگر کاربران نمایش داده نمی شود: