آموزش مقدماتی HTML ( قسمت دوم )

امیرحسین بخشی

11 سال پیش

CSS که مخفف Cascading Style Sheets می باشد برای قالبندی و استایل دهی عناصر صفحه HTML به کار می رود.

استایل بندی در HTML با CSS
CSS به همراه نسخه HTML 4.0 برای راحت شدن قالب بندی و استایل دهی عناصر HTML منتشر شد.

روش های استفاده از CSS در HTML
* خطی : با استفاده از ویژگی style در عناصر HTML
* داخلی : با استفاده از عنصر <style> در صفحه HTML
* خارجی : با استفاده از فراخوان یک فایل خارجی توسط <link>

روش خارجی در اکثر مواقع توصیه می شود.
با این حال در این جلسه، روش خطی یعنی استفاده از ویژگی style در عناصر را آموزش می دهیم.روش خطی استایل دهی به عناصر HTML
هر ویژگی style در عنصر فقط به همان عنصر مربوط می شود و بر روی دیگر عناصر تاثیر نمی گذارد.
برای استفاده از روش خطی کافیست ویژگی style را به تگ خود اضافه کنید. محتوای ویژگی style می تواند حاوی هر خاصیتی از زبان CSS باشد.
به نمونه ساده زیر که به تغییر رنگ پاراگراف به آبی و حاشیه از سمت چپ به اندازه ۲۰px منجر می شود.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

مثال هایی از استایل دهی

رنگ پس زمینه
خاصیت background-color برای تغییر رنگ پس زمینه عنصر به کار می رود.

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

با این خاصیت، ویژگی bgcolor که در قدیم در عناصر استفاده میشد، عملا بی استفاده می شود.

فونت، رنگ و سایز مت
خاصیت های font-family و color و font-size به ترتیب برای انتخاب نوع فونت، تغییر رنگ فونت، اندازه فونت به کار می روند.

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

با این خاصیت ها، تگ <font> که در قدیم استفاده میشد، عملا بی استفاده می شود.

ترازبندی متن
خاصیت text-align برای ترازبندی متن به کار می رود.

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

با این خاصیت، تگ <center> که در قدیم استفاده میشد، عملا بی استفاده می شود.

روش داخل استایل دهی به عناصر HTML
استایل دهی داخلی در بخش <head> توسط تگ <style> مورد استفاده قرار می گیرد. این روش بیشتر زمانی استفاده می شود که یک صفحه وب دارای یک استایل خاص و منحصر به فرد باشد. با این روش می توان بر روی عناصر هم نوع یک صفحه، استایلی مشخص ایجاد کرد.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

در مثال بالا، رنگ تمام متن هایی که در هر تگ <p> قرار می گیرند، آبی خواهد شد.
همچنین رنگ پس زمینه صفحه وب به زرد تبدیل خواهد شد.

روش خارجی استایل دهی به عناصر HTML
این روش زمانی مورد استفاده قرار می گیرد که چندین صفحه دارای استایل های خاص و مشابه باشند. با استفاده از فراخوانی یک فایل CSS در صفحه وب خود، می توانید استایل آن صفحه را تغییر دهید. برای فراخوانی فایل CSS از تگ <link> در بخش <head> استفاده می شود.

<head><linkrel="stylesheet"type="text/css"href="http://foryoucenter.com/mystyle.css"></head>

تگ های استایل در HTML

تگ ها	توضیحات
<style>	برای تعریف مستقیم قالب بندی ها و استایل های CSS در صفحه وب به کار می رود.
<link>	برای ارتباط دادن و فراخوانی یک صفحه کد مانند فایل CSS با یک صفحه وب به کار می رود.

تگ های منسوخ شده
در HTML 4.0 تگ هایی وجود دارد که در نسخه های جدیدتر HTML پشتیبانی نمی شوند. عناصری همچون <strike> ، <center> ، <font> و ویژگی هایی همچون color , bgcolor دیگر مورد استفاده قرار نمی گیرند.

عکس ها در HTML با تگ <img> تعریف می شوند. تگ <img> خالی است و این بدان معناست که فقط حاوی ویژگی هایی است و تگ پایانی ندارد.
برای نمایش یک تصویر در صفحه وب شما باید در تگ <img> از ویژگی src (مخفف و به معنای منبع) برای آدرس دهی استفاده کنید.

نمونه:

<head><linkrel="stylesheet"type="text/css"href="http://foryoucenter.com/mystyle.css"></head

url نشانگر مکانی است که تصویر در آن ذخیره شده است. برای نمونه تصویر logo.png در پوشه اصلی سایت https://tik4.com می باشد. پس تصویر در این مکان ذخیره شده است : https://tik4.com/logo.png
مرورگر تصویر را در هرجایی که تگ <img> در صفحه به کار رفته باشد، نمایش می دهد. اگر شما تگ <img> را بین دو پاراگراف (<p>) به کار برده باشید. ابتدا پاراگراف اول، سپس عکس، بعد پاراگراف دوم نمایش داده می شود.

ویژگی alt در تگ <img>
ویژگی alt متنی است که بجای تصویر، زمانی که تصویر نمایش داده نمی شود، قرار می گیرد. در ویژگی alt یک متن مرتبط با متن یا تصویر قرار می گیرد.
مثال:

<img src="https://tik4.com/logo.png"alt="ForYouCenter Logo">

به عبارت ساده از ویژگی alt ، زمانی که مرورگر، یک تصویر را به دلایلی (همچون سرعت ضعیف، اشتباهی در آدرس دهی داخل ویژگی src، استفاده کاربر از یک sreen reader برای دیدن صفحه و …) نمی تواند بارگذاری کند، استفاده کرده و متن alt را بجای همان تصویر نمایش می دهد.

ویژگی height و width در تگ <img>
ویژگی های height و width به ترتیب برای تنظیم ارتفاع و عرض تصویر استفاده می شوند. در این ویژگی ها به طور پیشفرض، مقادیر را به صورت پیکسل قرار می دهند.

<img src="http://foryoucenter.com/logo.png"alt="ForYouCenter Logo" width="637"height="274">

نکته: وقتی این ویژگی ها در تگ <img> قرار داده شده باشند فضای گرفته شده توسط عکس، هنگام بارگذاری تصویر، محفوظ و ثابت است اما در صورتی که این ویژگی ها در تگ <img> قرار داده نشده باشند مرورگر اندازه تصویر را نمی داند و این ممکن است بر قالب بندی صفحه، هنگام بارگذاری تصویر، تاثیر بگذارد و آن را تغییر دهد.
چند نکته مفید
توجه: از تصاویر با دقت استفاده کنید زیرا ممکن است سرعت بارگذاری صفحه را به شدت کاهش دهند. اگر HTML شما دارای ده فایل تصویر باشد این به این معناست که مرورگر باید علاوه بر صفحه، ده فایل تصویر دیگر را برای نمایش صحیح صفحه بارگذاری کند.

توجه: هنگامی که یک صفحه وب بارگذاری می شود در یک لحظه در واقع تمام تصاویر از وب سرور دریافت شده و بر روی صفحه قرار داده می شوند و در تاریخچه مرورگر ذخیره می شوند. بنابراین مطمئن شوید که این رابطه همیشه باقی بماند زیرا در غیر اینصورت برای بازدیدکنندگان وبسایت شما ممکن است آیکون آدرس دهی خراب نمایش داده شود در حالی که مرورگر شما می تواند تصاویر از قبل ذخیره شده در تاریخچه را برای شما نمایش دهد و متوجه خرابی آدرس دهی ها نشوید.

در HTML، جدول با تگ <table> تعریف می شود. یک جدول به سطرهایی (توسط تگ <tr>) و سپس هر سطر نیز به ستون هایی و یا به عبارتی سلول هایی (توسط تگ <td>) تقسیم می شوند. TD مخفف Table Data به معنای “داده های جدول” که در آن اطلاعات مورد نیاز قرار می گیرد.یک تگ <td> می تواند شامل متن ها، لینک ها، عکس ها، لیست ها، فرم ها، جدول های دیگر و … باشد.

جدول نمونه:

<table border="1"><tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

نمونه بالا به در مرورگر به صورت زیر نمایش داده می شود:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

ویژگی border در جدول ها
اگر ویژگی border در جدول مشخص نباشد، جدول شما بدون خط و مرز نمایش داده می شود. در بسیاری مواقع این امر ممکن است مفید و خوشایند باشد اما لازم است در برخی مواقع خط و مرز یک جدول مشخص باشد.
برای نمایش خطوط جدول از ویژگی border استفاده می شود:

<table border="1"><tr><td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

سرتیترها در جدول
سرتیترها در جدول با تگ <th> تعریف می شوند. تمام مرورگرهای معروف این تگ را به صورت برجسته (همچون Bold) نمایش می دهند.

<table border="1"><tr><th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

کد بالا به در مرورگر به صورت زیر نمایش داده می شود:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

تگ های جدول در HTML

تگ ها	توضیحات
<table>	برای تعریف یک جدول در صفحه وب به کار می رود.
<th>	برای تعریف سرتیترها در جدول به کار می رود.
<tr>	برای تعریف سطرها در جدول به کار می رود.
<td>	برای تعریف ستون ها (و در نتیجه تعریف سلول ها) در جدول به کار می رود.
<caption>	برای تعریف عنوان در جدول به کار می رود.
<colgroup>	برای قالبندی گروهی از ستون های مشخص در جدول به کار می رود.
<col>	برای تعیین قالبندی ها برای هر ستون به کار می رود. این تگ در داخل عنصر <colgroup> به کار می رود.
<thead>	برای مشخص کردن بخش های header یا سربرگ در جدول به کار می رود.
<tbody>	برای مشخص کردن بخش های body یا بدنه در جدول به کار می رود.
<tfoot>	برای مشخص کردن بخش های footer یا پاورقی در جدول به کار می رود.

شایعترین دستورات در HTML لیست های مرتب و لیست های نامرتب می باشند:

شناسه اول
شناسه دوم
شناسه سوم

شناسه اول
شناسه دوم
شناسه سوم

لیست های نامرتب
یک لیست نامرتب توسط تگ <ul> آغاز می شود. هر شناسه از لیست توسط تگ <li> آغاز می گردد.
شناسه های این نوع لیست توسط گلوله (دایره های توپر سیاه رنگ) مشخص می شوند.

<ul>
<li>شناسه اول</li><li>شناسه دوم</li>
</ul>

کد بالا به شکل زیر در مرورگر نمایش داده می شود.

شناسه اول
شناسه دوم

لیست های مرتب
یک لیست مرتب توسط تگ <ol> آغاز می شود. هر شناسه از لیست توسط تگ <li> آغاز می گردد.
شناسه های این نوع لیست توسط اعداد مشخص می شوند.

<ol>
<li>شناسه اول</li>
<li>شناسه دوم</li>
</ol>

کد بالا به شکل زیر در مرورگر نمایش داده می شود:

شناسه اول
شناسه دوم

لیست توضیحات در HTML
یک لیست توضیحی شامل تعدادی از نام ها (شرایط) می باشد که به همراه توضیحی ارائه می شود.
لیست توضیحی توسط تگ <dl> تعریف می شود. برای تعریف نام ها (شرایط) یک لیست توضیحی از تگ <dt> و برای توضیحات هر کدام از نام ها (شرایط) از تگ <dd> استفاده می شود.

<dl><dt>شناسه اول</dt><dd>- این شناسه اول است</dd>
<dt>شناسه دوم</dt>
<dd>- این شناسه دوم است</dd>
</dl>
<br><br>

کد بالا به شکل زیر در مرورگر نمایش داده می شود:

شناسه اول
– این شناسه اول است
شناسه دوم

– این شناسه دوم است
چند نکته مفید:
داخل هر شناسه لیست می توانید متن، عکس، پیوند، خط جداکننده، لیست های دیگر و … قرار دهید.
تگ های لیست در HTML

تگ ها	توضیحات
<ol>	برای ایجاد یک لیست مرتب به کار می رود.
<ul>	برای ایجاد یک لیست نامرتب به کار می رود.
<li>	برای تعریف شناسه های لیست به کار می رود.
<dl>	برای ایجاد یک لیست توضیحی به کار می رود.
<dt>	برای تعریف نام ها (شرایط) در یک لیست توضیحی به کار می رود.
<dd>	برای توضیح نام ها (شرایط) در یک لیست توضیحی به کار می رود.

اکثر عناصر HTML به دو قسمت عناصر سطحی و عناصر درون خطی تقسیم شده و تعریف می شوند. در زیر به خصوصیت مهم آن ها اشاره ای می کنیم:

عناصر سطحی
عناصر سطحی به طور معمولی در مرورگر با یک خط فاصله اضافی در آغاز (و پایان) نمایش داده می شوند.
مثال: <h1>, <p>, <ul>, <table>

عناصر درون خطی
عناصر درون خطی به طور معمولی در مرورگر بدون یک خط فاصله اضافی در آغاز (و پایان) نمایش داده می شوند.
مثال: <b>, <td>, <a>, <img>

عنصر <div> در HTML
عنصر <div> یک عنصر سطحی است که می تواند شامل گروهی از عناصر HTML دیگر باشد.
یک عنصر <div> در واقع هیچ معنا و مفهومی ندارد جز اینکه چون یک عنصر سطحی است مرورگر آن را با یک خط فاصله اضافی در آغاز و پایان آن نمایش می دهد.
هنگامی که <div> با زبان CSS همراه شود، می تواند بخش بزرگی از محتوا را استایل دهی کند.
برای طرح بندی صفحه وب می توان از روش قدیمی جداول نیز استفاده کرد. در این روش از عنصر <table> برای طرح بندی صفحه استفاده شده است و این یعنی استفاده نادرست از عنصر <table> که هدف اصلی آن نمایش داده های جدولی است.

عنصر <span> در HTML
عنصر <span> یک عنصر درون خطی است که می تواند شامل گروهی متن ها باشد.
یک عنصر <span> در واقع هیچ معنا و مفهومی ندارد.
هنگامی که <span> با زبان CSS همراه شود، می تواند بخش هایی از متن را استایل دهی کند.

تگ ها	توضیحات
<div>	برای تعریف قسمتی از صفحه وب به کار می رود. (عنصر سطحی)
<span>	برای تعریف قسمتی از صفحه وب به کار می رود. (عنصر درون خطی)

همانطور که در سایت های زیادی مشاهده می کنید، اغلب سایت ها محتویات خود را در چند ستون قرار داده اند.
این ستون های متعدد توسط تگ <div> و یا تگ <table> ایجاد شده اند. زبان CSS برای قرار گرفتن این عناصر در مکان های مورد نظر، رنگ بندی این عناصر، استایل دهی به آن ها و … برای صفحات استفاده می شود.
نکته: حتی اگر توسط تگ <table> بتوان یک چیدمان و طرح بندی زیبا در HTML ساخت، باز هم یک روش نامناسب برای استفاده از جدول در زبان HTML می باشد، زیرا تگ <table> برای نمایش داده های جدولی است نه طرح بندی و چیدمان در صفحات وب!

چیدمان در HTML توسط عنصر <div>
عنصر <div> یک عنصر سطحی است که می تواند شامل گروهی از عناصر HTML دیگر باشد.
مثال زیر با استفاده از پنج عنصر <div> به ایجاد یک طرح بندی در صفحه وب پرداخته است.

<!DOCTYPE html>
<html>
<body>
<div id="container"style="width:500px">
<div id="header"style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer"style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © Tik4.Com</div>
</div>
</body>
</html>

چیدمان در HTML توسط عنصر <table>
یکی از راحترین راه ها برای طرح بندی و چیدمان در صفحه وب استفاده از جدول ها می باشد.
ستون های متعدد توسط تگ <div> و یا تگ <table> ایجاد شده اند. زبان CSS برای قرار گرفتن این عناصر در مکان های مورد نظر، رنگ بندی این عناصر، استایل دهی به آن ها و … برای صفحات استفاده می شود.
نکته: حتی اگر توسط تگ <table> بتوان یک چیدمان و طرح بندی زیبا در HTML ساخت، باز هم یک روش نامناسب برای استفاده از جدول در زبان HTML می باشد، زیرا تگ <table> برای نمایش داده های جدولی است نه طرح بندی و چیدمان در صفحات وب!
مثال زیر با جدولی که دارای سه سطر و دو ستون می باشد به طرح بندی یک صفحه وب پرداخته است. در خط اول و خط آخر جدول از ویژگی colspan استفاده شده است:

<!DOCTYPE html>
<html>
<body>
<table width="500"border="0">
<tr>
<td colspan="2"style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2"style="background-color:#FFA500;text-align:center;">
Copyright © ForYouCenter.Com</td>
</tr>
</table>
</body>
</html>

چند نکته مفید:
نکته: همانطور که میبینید طرح بندی و چیدمان کلی در HTML به کمک CSS صورت می پذیرد. بهتر است یک صفحه CSS را برای استایل دهی به HTML خود فراخوانی کنید. زیرا می توانید طرح کلیه صفحات خود را با ویرایش در این صفحه CSS، تغییر دهید.

نکته: یک طرح بندی پیشرفته ممکن است بسیار وقتگیر باشد. لذا بهتر است ابتدا از طرح های آماده که در اینترنت موجود است استفاده کنید. شما می توانید این طرح ها را ویرایش کرده و در صفحه وب خود استفاده کنید. کافیست در موتور جستجو گوگل عبارت “Website Templates” را جستجو کنید!

تگ های چیدمان در HTML

تگ ها	توضیحات
<div>	برای تعریف قسمتی از صفحه وب به کار می رود. (عنصر سطحی)
<span>	برای تعریف قسمتی از صفحه وب به کار می رود. (عنصر درون خطی)

فرم های HTML برای انتقال داده ها به سرور استفاده می شوند. فرم ها می توانند شامل عناصر ورودی همچون دکمه های رادیویی، تیک باکس ها، فیلدهای متنی، دکمه ارسال و … باشند. همچنین یک فرم می تواند شامل توضیحات، جداکننده ها، برچسب ها و دیگر عناصر HTML باشد.

یک فرم توسط تگ <form> تعریف می شود:

<form> .عناصر ورودی . </form>

عناصر ورودی فرم
مهمترین عنصر یک فرم، <input> است.
عنصر <input> برای دریافت اطلاعات از کاربر به کار می رود.
یک عنصر <input> براساس نوع ویژگیش می تواند به شکل های مختلفی به کار رود. عنصر <input> می تواند فیلد متنی، کادر انتخاب، فیلد رمز عبور، دکمه های رادیویی، دکمه ارسال و … برای دریافت اطلاعات از کاربر به کار رود.
مهمترین ورودی ها در زیر توضیح داده شده اند:

فیلد متنی
<input type=”text”> توسط این ویژگی می توان یک خط برای دریافت اطلاعات متنی از کاربر در فرم ایجاد کرد تا بتواند در آن متنی بنویسد.

<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
</form>