مقالات طراحی وب اچ تی ام ال آموزش مقدماتی HTML ( قسمت دوم )

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 منجر می شود.

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

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

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

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

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

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

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


روش داخل استایل دهی به عناصر HTML

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

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


روش خارجی استایل دهی به عناصر HTML

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

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

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


تگ های منسوخ شده

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

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

نمونه:

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

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

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

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

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

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

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

جدول نمونه:

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

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

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

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

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

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

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

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

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

  1. شناسه اول
  2. شناسه دوم
  3. شناسه سوم
  • شناسه اول
  • شناسه دوم
  • شناسه سوم

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

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

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

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

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

  1. شناسه اول
  2. شناسه دوم

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

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

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

– این شناسه دوم است
چند نکته مفید:
داخل هر شناسه لیست می توانید متن، عکس، پیوند، خط جداکننده، لیست های دیگر و … قرار دهید.
تگ های لیست در 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> به ایجاد یک طرح بندی در صفحه وب پرداخته است.


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

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

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

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

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

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

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


عناصر ورودی فرم

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

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

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

First name: Last name: 

نکته: خود فرم در صفحه نمایش داده نمی شود. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد متنی ۲۰ کاراکتر می باشد.

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

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

Password: 

نکته: کاراکترها در فیلد رمز عبور به صورت امنیتی (دایره های سیاه توپر) نمایش داده می شوند.
دکمه های رادیویی
<input type=”radio”> این ویژگی دکمه رادیویی را در فرم ایجاد می کند. دکمه های رادیویی کاربر را به انتخاب یک گزینه از بین چند گزینه مجبور می کنند.

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

MaleFemale

تیک باکس ها
<input type=”checkbox”> توسط این ویژگی می توان دکمه تیک باکس در فرم ایجاد کرد. کاربر می تواند هیچ یا چند دکمه از تیک باکس ها را تیک بزند.

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

I have a bikeI have a car

دکمه ثبت و ارسال
این ویژگی یک دکمه ثبت و ارسال اطلاعات در فرم ایجاد می کند.
این دکمه برای ارسال اطلاعات به سرور استفاده می گردد. تمامی داده های ورودی به صفحه مشخص شده در ویژگی action در عنصر <form> فرستاده می شوند. فایلی که در ویژگی action قرار دارد معمولا عملیاتی را بر روی داده های ورودی انجام می دهد.

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

Username: 

اگر شما تعدادی کاراکتر در فیلد متنی Username وارد کنید و سپس روی دکمه Submit کلیک کنید. مرورگر داده ورودی Username را به صفحه جاری ارسال می کند. این صفحه عملیاتی را روی شناسه کاربری Username انجام می دهد.

تگ های فرم در HTML

تگ هاتوضیحات
<form>برای تعریف یک فرم به منظور دریافت اطلاعات از کاربر به کار می رود.
<input>برای تعریف انواع عناصر ورودی به کار می رود.
<textarea>برای ایجاد یک ورودی فیلد متنی چند خطی در فرم به کار می رود.
<label>برای ایجاد متن و برچسب های عناصر ورودی به کار می رود.
<fieldset>برای نمایش مرتبط بودن گروهی از عناصر به هم در فرم به کار می رود.
<legend>برای ایجاد عنوان یک گروه از عناصر مرتبط که توسط <fieldset> مشخص شده اند، به کار می رود.
<select>برای ایجاد یک منوی کشویی در فرم به کار می رود.
<optgroup>به منظور نمایش عنوانی برای گروهی از گزینه های <select> که به هم مرتبط هستند، به کار می رود.
<option>برای ایجاد گزینه های منوی کشویی <select> به کار می رود.
<button>برای تعریف یک دکمه در فرم به کار می رود.
<datalist>برای ارسال یک لیستی از گزینه های از پیش تعریف شده در فرم به کار می رود.
<keygen>برای تعریف و ایجاد جفت کلیدهای امنیتی در فرم به کار می رود.
<output>برای نمایش داده های خروجی به کاربر در فرم ورودی به کار می رود.

ساختار کد IFrame به صورت زیر می باشد:

در ویژگی src ، آدرس صفحه ای جداگانه از صفحه جاری، برای نمایش قرار داده می شود.

طول و عرض IFrame
ویژگی width و height برای طول و عرض عنصر IFrame برای نمایش صفحه به کار می روند.
ارزش این دو ویژگی به طور پیشفرض Pixel می باشد اما می توانید از درصد هم برای مقداردهی استفاده کنید.

حذف کردن خط مرزی border
توسط ویژگی frameborder می توانید خطوط مرزی IFrame را حذف کنید. در این حالت IFrame شما بدون خط و مرز نمایش داده می شود. در بسیاری مواقع این امر ممکن است مفید و خوشایند باشد اما لازم است در برخی مواقع خط و مرز یک IFrame مشخص باشد.
برای حذف خط مرزی، ارزش ویژگی frameborder را ۰ دهید.

نمایش لینک ها در IFrame
یک IFrame می تواند لینک های صفحه ای که در آن قرار گرفته است را در صفحه اش نمایش دهد.
برای نمایش لینک در IFrame باید ارزش Target لینک با name برای IFrame برابر باشد.

تگ های IFrame در HTML

تگ هاتوضیحات
<iframe>برای تعریف صفحات درون خطی به کار می رود. این تگ صفحه ای را درون صفحه جاری نمایش می دهد.

منبع : w3schools

ترجمه شده توسط تیم تیک۴

آموزش مقدماتی HTML ( قسمت دوم )
به این مطلب رای دهید
Telegram Facebook WhatsApp +Google Twitter LinkedIn

دیدگاه خود را بیان کنید

دیدگاهتان را بنویسید

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.