آشنایی با کدهای HTML در طراحی صفحات وب

بهینه سازی حجم صفحات سایت
دی ۱۰, ۱۳۹۳
دانلود کلیپ آموزش طراحی سایت
دی ۱۱, ۱۳۹۳

آشنایی با کدهای HTML در طراحی صفحات وب

فایل های HTML چیست؟

HTML مخفف عبارت HyperText Markup Language به معنی زبان نشانه گذاری فوق متن است.
HTML بر خلاف سایر زبانهای برنامه نویسی که یادگیری آنها زمان بسیار زیادی را لازم دارند، یک زبان بسیار ساده برای شکل دهی مناسب صفحات طبق خواسته طراح وب است. فایل های HTML فایل های متنی ساده ای هستند که حاوی متن به همراه تعدادی تگ (Tag) می باشند. این تگ ها به مرورگر یا Browser کاربران نحوه نمایش متون و تصاویر مختلف را نشان می دهد. فایل های HTML می توانند به راحتی توسط هر برنامه ساده ای برای نوشتن متون مانند notepad ایجاد شوند و برای اجرای آنها هم فقط به یک مرورگر نیاز است، این فایل ها معمولا دارای پسوند htm یا html هستند. در ادامه مفاهیم اولیه بطور کامل توضیح داده می شود.

آشنایی با کدهای HTML در طراحی صفحات وب

برای ساخت و اجرا و بطور کلی کار با HTML تنها به دو چیز نیاز است:

۱. یک ادیتور فایل متنی: اگر با ویندوز کار می کنید notepad بهترین و ساده ترین انتخاب ممکن می باشد. اگر ویرایشگر شما متنی ساده نمی باشد باید در هنگام ذخیره فایل HTML خود حتما آنرا به فرمت متن ساده یا Plain Text ذخیره نمایید.

۲. یک مرورگر: که می توان به اینترنت اکسپلورر یا Internet Explorer، فایرفاکس یا Firefox و اپرا یا Opera اشاره کرد و حتما لازم نیست که سیستم عامل شما ویندوز باشد بلکه با استفاده از همین مرورگرها (نسخه مخصوص سیستم عامل مورد استفاده خود) نیز می توانید با HTML کار کنید و نتیجه کار بر روی تمام مرورگرها با سیستم عامل های مختلف نیز تقریبا یکسان است.

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

 

نمایش صفحات در مرورگرهای مختلف

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

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

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

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

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

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

اجزای HTML

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

صفات تگ ها

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

<a href=”http://www.google.com”>Google</a>

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

value = “my website”
value = “everyone says “learning HTML is as easy as pie”

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

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

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

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

تگ html

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

<html></html>

تگ head

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

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

تگ body

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

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

تگ title

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

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

<html>
<head>
<title>Article’s Title</title>
</head>
<body></body>
</html>

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

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

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

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

<html>
<head>
<title>Article’s Title</title>
</head>
<body>
<h1>Welcome To My Website</h1>
<h2>Welcome To My Website</h2>
<h3>Welcome To My Website</h3>
<h4>Welcome To My Website</h4>
<h5>Welcome To My Website</h5>
<h6>Welcome To My Website</h6>
</body>
</html>

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

اگر می خواهید یک متن در یک پاراگراف جدید قرار گرفته شود از این تگ استفاده کنید، تگ <p> را قبل از متن قرار دهید و متن را در ادامه درج کنید و تگ اختیاری <p/> را هم در انتها وارد کنید:

<p>This is a new paragraph</p>

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

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

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

<br>This is a new line<br>This is a new line

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

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

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

در مثال های زیر موارد مختلف کاربرد تگ hr استفاده شده است:

<hr>
<hr size=”۵″>
<hr width=”۸۰%”>
<hr width=”۲۸۰″>
<hr size=”۳″ width=”۹۰%”>
<hr size=”۱″ width=”۵۰۰″ noshade>

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

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

<!– This is a test –><!–This is a test–>

<!–
This is a test
–>

<!–
This is a test
This is a test
This is a test
–>

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره آنلاین