آموزش رایگان HTML و CSS گام به گام

HTML مخفف کلمات Hyper Text markup Language می باشد. با اچ تی ام ال شما می توانید صفحات وب خود را بسازید. اچ تی ام ال یکی از پایه ترین زبان های مورد نیاز برای طراحی وب می باشد. در این مجموعه آموزش سعی می کنم اچ تی ام ال را به صورت تخصصی به شما یاد دهم. منبع آموزش ها سایت W3Schools می باشد.پیش از آنکه این مجموعه شروع شود باید بگویم که این مجموعه خود از چند زیر مجموعه ساخته شده است.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

اولین زیر مجموعه در این مجموعه آموزش نکات پایه اچ تی ام ال می باشد. بقیه آموزش ها نیز تا آخر ماه بهمن سال 95 ارائه می شود که شامل، فرم های اچ تی ام ال، اچ تی ام ال 5، مباحث گرافیکی در وب، سی اس اس و به احتمال زیاد جاوا اسکریپت خواهد بود. خب بریم سراغ اچ تی ام ال: همانطور که عرض کردن اچ تی ام ال سنگ بنای وب می باشد. یادگیری اچ تی ام ال بسیار آسان پس اگه می خواهید یک طراح وب حرفه ای باشید با آموزشهای بنده در آی تی پرو همراه باشید. فرم کلی اچ تی ام ال به صورت زیر می باشد.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

پیش از آنکه بخواهم اجزای این کدها را توضیح دهم باید به یکسری نکات توجه کنیم!

  • همانطور که گفتم اچ تی ام ال مخفف کلمات Hyper Text Markup Language می باشد.
  • یک زبان برچسب گذاری یا Markup زبانی با مجموعه ای از تگ ها می باشد.
  • یک سند اچ تی ام ال شامل یک سری تگ اچ تی ام ال می باشد.
  • هر تگ اچ تی ام ال می تواند محتوای سند دیگری را توضیح دهد.

خب بعد از این توضیحات حالا باید کد هایی که بالا نوشتم رو واستون توضیح بدم :

  • <!DOCTYPE html> تعیین کننده و معرفی کننده سند اچ تی ام ال در واقع این خط کد معرف سند و ورژن اچ تی ام ال به ویرایشگر متن و مرورگر می باشد. در همین مقاله با همین کد برای ورژن های قبلی اچ تی ام ال آشنا می شوید.
  • کدی که در بین <html> و </html> قرار می گیرد معرف کدهای اچ تی ام ال می باشد. در واقع تگ اصلی موجود در اچ تی ام ال این تگ می باشد.
  • تگ <head> اطلاعاتی مربوط به سند اچ تی ام ال را در خود نگه داری می کند عموما اطلاعات بجز بعضی از تگ ها مثل عنوان و فاوآیکن نمایش داده نمی شوند. این اطلاعات بیشتر برای مرورگرها و موتورهای جستجو مهم است.
  • تگ <title> یا عنوان که یکی از تگ های خانواده <head> می باشد همانطور که عرض شد عنوان سند اچ تی ام ال را به ما نشان می دهد.
  • تگ <body> این تگ بدنه اصلی سند اچ تی ام ال را شامل می شود. کلیه اطلاعاتی که ما در یک صفحه اینترنتی می بینیم در این قسمت نوشته می شود.
  • تگ <h1> برای ساخت تیتر و عنوان از این تگ استفاده می کنیم.
  • تگ <p> این تگ برای پارگراف بندی مورد استفاده قرار می گیرد.

این تگ ها شاید اساسی ترین و مهمترین تگ هاییست که در اکثر سایت ها مورد استفاده قرار می گیرد.

  • شیوه نوشتن تگ ها

شاید تا کنون با شیوه تگ ها در اچ تی ام ال آشنا شده باشید. در اچ تی ام ال برای نوشتن تگ ها باید چند نکته را رعایت کنید.

  • تگهای اچ تی ام ال با یک علامت <> اغاز و </> پایان می یابند.
  • بعضی از تگ ها دارای مقدار پایانی نیستند.

مثال:

<p> ITPRO.ir </p>
<br>

در این مثال ها تگ مربوط به پاراگراف با علامت <> شروع شده و با علامت </> پایان یافته است. اما دقیقا تگ بعدی وی یعنی تگ <br> تگ پایانی ندارد. (این تگ برای شکستن متن استفاده می شود.) شیوه کلی تگ های اچ تی ام ال:

<Tag Name> Content </tag Name>

اضهار کننده های <!DOCTYPE> : همانطور که گفته شد <!DOCTYPE> معلوم کننده و وصف کننده یک سند اچ تی ام ال برای مرورگر و ویرایشگرهای متن می باشد. تا حالا <!DOCTYPE> های مختلفی آمده اند که به شرح زیر هستند:

<!DOCTYPE html>

یا

<!doctype HTML> 

این اضهارکننده برای اچ تی ام ال ورژن 5 استفاده می شود.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

این اضهارکننده برای اچ تی ام ال 4.01 مورد استفاده قرار می گرفت

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

این اضهارکننده نیز برای XHTML 1.0استفاده می شود. ورژن های مختلف اچ تی ام ال را می توانید در زیر ببینید

HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

دستورات مقدماتی و معرفی ساختار

برای نوشتن کدهای اچ تی ام ال شما مجبور به استفاده از برنامه های پیچیده و سنگین نیستید هر چند که اگر از آنها استفاده کنید سهولت و آسانی در نوشتن به همراه دارد اما در همین اوایل کار که با پروژههای سنگینی طرف نیستیم می توانیم از خود نوت پد در ویندوز استفاده کنیم.

اکثر برنامه های ویرایشگر متن این امکان را دارند که بتوانند سند اچ تی ام ال بسازند، البته برنامه ورد برای این کار مناسب نیست، چون در هنگام ذخیره کردن کدهایی دیگر را به فایل اضافه می کند. پس بهترین ویرایشگر متن همان نوت پد برای حال حاضر شما خواهد بود! اما اگر واقعا هم میخواهید که درگیر قضایا شوید و از همین حالا حرفه ای بودن را تجربه کنید من ویرایشگر شرکت ادوبی یعنی براکت را پیشنهاد می کنم.برای ساخت فایل اچ تی ام ال نیاز به کار بسیار پیچیده ای نیست تنها کارهای زیر را دنبال کنید:

  1. ویرایشگر متن را باز کنید
  2. کدهایی را که در قسمت قبل این آموزش ذکر کردم را وارد کنید.
  3. فایل را با پسوند .html یا .htm ذخیره کنید.
  4. در نهایت برای مشاهده فایل به یک مرورگر احتیاج دارید که به صورت پیش فرض اینترنت اکسپلورر روی ویندوز نصب می باشد.

فایل را مشاهده کنید و به خودتان ببالید زیرا که شما هم اکنون یکی از مهمترین قسمت های آموزش را فرا گرفتید.

  • تمرین: سعی کنید بفهمید هر کدام از این کدها چه کاربردی دارند(اگر نمیدانید به آموزش قبلی مراجعه کنید).

دو یادآوری کوچک

  • هر سند اچ تی ام ال حتما باید شامل یک اظهارکننده و یک کد <html></html> باشد.
  • بخش قابل رویت در مرورگر را در قسمت <body></body> می نویسند.

خب در جلسه قبل عرض کردم که اچ تی ام ال شامل یک سری تگ ها می باشد که عموما دارای دو قسمت آغاز و پایان است.به این کد دقت کنید:

<h1> Heading </h1>

همانطور که می بینید با <h1> شروع شده (قسمت آغاز) و با </h1> پایان یافته است (قسمت پایان).

تگ عنوان بندی : خب اولین تگی که می خواهم به شما یاد بدم تگ یا دستور عنوان بندی می باشد: به بزرگی و کوچکی عبارت های زیر توجه داشته باشید:

عنوان

عنوان

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

<h1>ITPRO</h1>
<h2>ITPRO</h2>
<h3>ITPRO</h3>
<h4>ITPRO</h4>
<h5>ITPRO</h5>
<h6>ITPRO</h6>

این دستورات را در نوت پد تایپ کنید و نتیجه را ببینید. کلمه ITPRO به ترتیب از بالا به پایین کاهش سایز می دهد. پس تگ <h1> تا <h6> برای عنوان بندی با 6 سایز مختلف به کار برده می شود.

  • تگ پاراگراف : دومین تگ مهم در اچ تی ام ال تگ پاراگراف می باشد. پاراگراف بندی در صفحات وب بسیار مهم است تگ پاراگراف به صورت زیر استفاده می شود:
<p>Paragraph</p>
  • تگ لینک : برای لینک گذاری در صفحات وب باید از تگ <a> استفاده شود تگ a دارای صفتی به اسم href می باشد. در مورد صفات تگ ها بعدا توضیح می دهیم.
<a href="www.ITPRO.ir">ITPRO</a>
  • تگ تصویر : برای استفاده از تصاویر در صفحات وب کافی است از تگ <img> استفاده کنید این دستور تگ پایانی ندارد، یعنی در انتها از </img> استفاده نمی شود. این تگ دارای صفتی به اسم src می باشد که آدرس تصویر را دریافت می کند.
<Img src="c:/icon.png">

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

صفحات یا Attributes و نکات مربوطه

  • نکات مربوط به attribute ها

1- ساختار کلی (نه همیشه) یک تگ در اچ تی ام ال به صورت زیر می باشد:

<tagname>Content</tagname>

2- تگهای اچ تی ام ال می توانند تو در تو باشند یعنی برای مثال شما می خواهید متنی را به صورت پاراگراف و عنوان به نمایش در بیاورید خب برای اینکار ابتدا یکی از تگ ها را نوشته سپس تگ بعدی به عنوان محتوای تگ اول شناسایی شده و در بخش محتوای تگ دوم متن را بنویسید.یک قانون کلی تگی که اول از همه باز می شود در آخر از همه نیز بسته خواهد شد. یک مثال ساده:

<h1>
<p>
This text is title also paragraph
</p>
</h1>

توجه داشته باشید که تگ عنوان اول باز شده است و در انتهای همه بسته شده است. به این نوع کدنویسی در اچ تی ام ال تودرتو یا Nested می گویند.

3- تگ های خالی اچ تی ام ال به تگ هایی گفته می شود که علاوه بر اینکه دارای تگ پایانی نیستند برای درست کار کردن احتیاج خاصی به صفتی هم ندارند، مثل تگ <br> ! این تگ برای آن استفاده می شود که یک خط شکسته شود. در اچ تی ام ال برای شکستن خط یا به اصطلاح اینتر کردن باید از این تگ استفاده کنید، زدن دکمه اینتر هیچ کاربردی ندارد. حتی زدن دکمه Space بیش از یک کاراکتر نیز هیچ فایده ای ندارد!

4- نکته ی پایانی، اچ تی ام ال یک زبان حساس به بزرگی یا کوچکی کلمات نیست یعنی نوشتن <P> و <p> با هم برابر هستند و هیچ تفاوتی ندارند، اما من نمیدونم چرا هیچوقت از کلمات بزرگ استفاده نمی کنم پیشنهاد می کنم شما هم استفاده نکنید!

  • صفات یا Attributes : صفات اطلاعاتی اضافی در مورد تگ ها بوجود می آورند، با صفات می توان دامنه کاربردی تگ ها را گسترش داد. بعضی از تگ ها بدون صفات هیچ کاربردی ندارند برای مثال تگ های <img> , <a> بدون صفات هیچ کاربردی ندارند.
  • تمام تگهای اچ تی ام ال می توانند شامل صفات باشند.
  • صفات اطلاعات اضافی درباره تگ ها می دهند و کاربرد تگ ها را توسعه می بخشند.
  • تمام صفات بدون استثنا در قسمت آغازین تگ ساخته می شوند.
  • هر صفت دارای یک نام/مقدار می باشد. به ساختار زیر توجه داشته باشید:
<tagname tagattributes="Value">

مثال:

<a href="http://www.tosinso.com"></a>
  • a نام تگ
  • href: نام صفت
  • http:////www.tosinso.com: مقدار صفت

چند صفت مهم و کاربردی در اچ تی ام ال برای تگ ها

  • صفت Lang در تگ HTML : برای تعیین نام سایت که برای مرورگرها بسیار مهم است و همچنین بعضی اوقات گوگل ترانسلیت براساس آن تصمیم به ترجمه سایت می کند صفت Lang می باشد که مربوط به تگ <html> می باشد.
<html lang="fa_IR">
</html>
یا
<html lang="en_US">
</html>

اجزای اصلی مقادیر صفت Lang زبان و کشور می باشد، یعنی به صورت زیر استفاده می شود:

(language_country)

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

فارسی: fa
انگلیسی: en
کردی: ckb
-
ایران: IR
آمریکا: US
انگلیس: UK

توجه داشته باشید که خیلی اوقات کشور تعیین کننده زبان نیز می باشد برای نمونه ما دو نوع فارسی داریم یکی فارسی که در ایران استفاده می شود و فارسی افغانستان یا دری!

صفت title در تگ P: زمانی که میخواهیم برای پاراگراف هایمان یک عنوان قرار دهیم از صفت title استفاده می کنیم اما توجه کنید که این عنوان به صورت تولتیپ ظاهر می شود یعنی زمانی که ماوس روی متن اصلی پاراگراف رفت یا Hover شدبه صورت یک تولتیپ ظاهر میشه کد زیر را اجرا کنید تا متوجه شوید:

<p title="I'm a tooltip">
This is a paragraph.
</p>
  • صفت href در تگ a : تگ a جزو آن دسته از تگ هاست که بدون صفت هیچ کاری را انجام نمیدهد یکی از صفت های این تگ href می باشد که آدرس مربوط به لینک را در آن می نویسیم به مثال زیر توجه کنید:
<a href="http://www.tosinso.com">This is a link</a>

در این مثلا متنی با عنوان "This is a link" ظاهر می شود که با کلیک روی آن وارد سایت Itpro.ir می شود.

  • صفت های مربوط به تگ img : تگ img نیز مثل تگ a بدون صفت هیچ کاربردی ندارد، اولین صفت مهم این تگ صفت منبع یا src می باشد که آدرس تصویر را معلوم می کند. صفت اندازه در تگ img نیز یکی از مهمترین تگ ها می باشد برای اندازه از دو صفت width و height استفاده میکنیم که در هر دو حالت مقدار عددی با فرمت px همراه است. و آخرین و جالبترین صفت این تگ alt می باشد که برای زمانی مناسب است که آدرس تصویر تغییر کرده باشد یا بنا به هر دلیلی تگ img قادر به نمایش تصویر نباشد، مقدار این صفت نمایش داده می شود. مقدار این صفت همیشه متنی می باشد. به مثال زیر توجه کنید:
<img src="c:/1.jpg" width="104" height="142" alt="ITPRO"> 

در این کد یک تصویر واقع در آدرس c: با نام 1.jpg ظاهر می شود اگر بنا به هر دلیلی این تصویر نمایش داده نشود متن ITPRO نمایش داده می شود.

چند نکته مهم در این بخش

  • همانطور که متوجه شدیم مقدار صفات باید در بین دوبل کتیشن قرار بگیرد اما در اچ تی ام ال 5 می توان بدون این علامت هم صفتی را مقدار دهی کرد. با این حال من پیشنهاد میکنم از دوبل کتیشن استفاده کنید.
  • می توانیم از کتیشن و دوبل کتیشن نیز استفاده کرد، مثلا زمانی که در مقداردهی ما به کاراکتر " نیاز داریم(یعنی می خواهیم نمایش دهیم) باید از تک کتیشن استفاده کنیم! مثال:
<p title="John 'ShotGun' Nelson">
یا
<p title='John "ShotGun" Nelson'> 

برای دیدن لیست کاملی از تگ ها می توانید به این آدرس بروید.

عنوان بندی و تگ های جدید

اگر یادتان باشد در قسمت های قبلی به تگ های عنوان بندی اشاره کردم در این جلسه میخواهم کمی بیشتر در رابطه با آنها حرف بزنیم. خب همانطور که گفته شد تگ های عنوان بندی با حرف h و یک عدد بین 1 تا 6 نوشته می شود.

<h1>Heading</h1>

یکی از نکات مهم این تگ این هستش که عدد مورد نظر اگر بیشتر باشد سایز نوشته کوچک خواهد بود اما توجه کنید که محدوده این عدد دربین 1 تا 6 می باشد.

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

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

  • نکته: برای قوی کردن یا بزرگ کردن متون عادی از این تگ ها هیچوقت استفاده نکنید، چون تگ های دیگری برای اینکار وجود دارد.

تگ <hr> در HTML

این تگ مخفف کلمات Horizontal Rules می باشد که برای تعریف یک خط افقی استفاده می شود. با این تگ می شود یک خط افقی با حالت واکنشگرا نسبت به بزرگی و کوچکی صفحه مرورگر رسم کرد. اگر یادتان باشد در درس قبلی که به مبحث توصیفات پرداختیم یک مشخصه خیلی مهم width رو بررسی کردیم که برای عرض چه تصاویر و چه بسیاری دیگر از عناصر صفحات وب کاربرد دارد. تگ hr نیز از این قاعده پیروی می کند. تگ <hr> از آن تگ هایی است که تگ پایانی ندارد.

<hr width=”100”>

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

  • تگ br در HTML

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

<html>
<body>
ITPRO
HTML
</body>
</html>

و

<html>
<body>
ITPRO
<br>
HTML
</body>
</html>
  • تگ های Head در html

تا کنون با هر تگی که آشنا شدید در قسمت Body سندهای اچ تی ام ال استفاده می شد. اما درون تگ head نیز یکسری تگ ها قرار می گیره که اکثرا مشخصات سایت که برای موتورهای جستجوگر مهمه درش قرار می گیره مثل تگ عنوان، نام نویسنده و... خب یکی از تگ های بسیار کاربردی در این قسمت تگ عنوان یا <title> می باشد که برای مرورگر و موتور بهینه بسیار کاربردی است. متن داخل این تگ روی زبانه مرورگر نمایش داده می شود.

<head>
<title> ITPRO HTML </title>
</head>

در این کد متن ITPRO HTML روی زبانه مرورگر نمایش داده می شود. یکی دیگر از تگهای بسیار مهم در این قسمت تگ <meta charset=””> می باشد که برای مشخص کردن کاراکترها صفحه استفاده می شود. مثلا در حالت پیش فرض کاراکترهای قابل شناسایی در مرورگر ها و سندهای اچ تی ام ال صرفا انگلیسی می باشند و همین باعث می شود که کاراکترهای عربی، فارسی و... نمایش داده نشود. برای این کار در قسمت Head از دستور زیر استفاده می کنیم.

<meta charset="UTF-8">

مقدار UTF-8 برای شناسایی یونیکد و... کاربرد دارد. در رابطه با تگ های دیگر این قسمت در بخش های آینده ذکر می کنیم!

استایل و فرمت متن ها

استایل: توسط تگ style می توان برای اجزای اچ تی ام ال یا در واقع تگ های اچ تی ام ال یک استایل کلی تعیین کرد:

<tagname style="property:value;"> 

خب در قسمت tagname شما باید نام تگ مورد نظر را بنویسید. مثلا تگ h1 در قسمت property نام استایل مورد نظرتان را بنویسید. مثلا استایل color (در مورد این استایل ها صحبت خواهیم کرد.) و در قسمت Value مقدار property مورد نظر را باید بنویسید مثلا برای color می توانید مقدار red را ذکر نمایید. در زیر به چند نمونه مهم اشاره می شود:

  • 1.رنگ زمینه یک فایل اچ تی ام ال
<body style="background-color:blue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

background-color: یکی از property های مهم در سی اس اس می باشد که مقدار آن در این قسمت برابر آبی می باشد.

  • 2.رنگ متون
<h1 style="color:blue;">This is a heading</h1>

Color نیز از آن دسته استایلهای مهم در سی اس اس می باشد. که مقدار آن در این خط کد برابر آبی است.

  • 3.فونت متون
<h1 style="font-family:verdana;">This is a heading</h1>

توسط استایل font-family می شود فونت مربوط به یک متن را تغییر دهید، توجه داشته باشید توسط این کد تنها در صورتی فونت مربوطه نمایش داده می شود که آن فونت روی سیستم مشاهده کننده نصب شده باشد.

  • 4.اندازه متون
<h1 style="font-size:300%;">This is a heading</h1>

برای تغییر اندازه متون می توانید از استایل font-size استفاده کنید. البته مقدار آن را هم می توان با درصد هم به شکل عدد ساده نوشت.

  • 5.تراز بندی متون
<h1 style="text-align:center;">Centered Heading</h1>

با استایل text-align به سادگی می توانید متن را در بین قسمت های راست، چپ و وسط صفحه به نمایش بگذارید. مقدار center به معنای مرکز یا وسط می باشد.

چند نکته مهم در Style در html

  1. تمام قسمت های تگ style داخل " " قرار می گیرند.
  2. مقدار یک استایل با خود استایل با علامت : جدا می شوند.
  3. در آخر هر مقدار دهی باید از علامت ; استفاده کنید.

فرمت متون در HTML

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

  • <b> - قوی کردن متن
  • <strong> - مهم نشان دادن متن (قوی کردن متن)
  • <i> - کج کردن متن
  • <em> - کج کردن متن
  • <mark> - مارک دار کردن متن با پشت زمینه زرد
  • <small> - متن کوچک
  • <del> خط کشیدن روی متن
  • <ins> زیر خط دار کردن متن
  • <sub> - متن زیر نویس
  • <sup> - متن بالا نویس برای مثال در توان گذاری اعداد

نکته: بعضی از تگ ها دارای یک عملکرد هستند مثل دو تگ اول در لیست، کاربرد این طور تگ ها برای مرورگر ها و موتورهای جستجوگر مهم تر هستند. برای مثال اگر صرفا جهت نمایش می خواهید متنی را نمایش بدهید از b استفاده کنید، اما اگر متن شما حائز اهمیت است از strong این شرایط برای em و i نیز به همین شکل می باشد.

نقل قول و درج توضیحات

احتمالا تا حالا گفتاورد یا نقل قول را شنیده اید، برای نقل قول کردن در یک فایل اچ تی ام ال می توانید از دو تگ <q> و <blackquote> استفاده کرد. تفاوت کلیدی این دو تگ در زیر بیان شده است:

    • <q>: در این صورت در ابتدا و انتهای متن علامت "" (کتیشن) قرار می گیرد.
    • <blackquote>: در این صورت ابتدا و انتهای متن با فاصله از کناره ها متن قرار می گیرد.

مثال زیر را اجرا کنید

<p> this is a passage from bill gates:</p>
<q> if you born poor, it’s not your mistake, but if you die poor it’s your mistake </q>
<p> this is a passage from Bill Gates:</p>
<blackquote>if you born poor, it’s not your mistake, but if you die poor it’s your mistake</blackquote>
  • تگ اختصارات: خود تگ HTML یک اختصار است که می توانید کلمات اختصار شده آن را به صورت تولتیپ در صفحه وب نمایش دهید. تگ abbr با صفت title برای این کار در نظر گرفته شده است. به مثال زیر توجه کنید:
<abbr title="Hyper Text Markup Language">HTML</abbr>
  • تگ Address , Cite: این دو تگ برای اعلان آدرس و ذکر کردن استفاده می شود. البته این تگ ها خیلی جلو نمایشی ندارند فقط متن را به حالت کج در می آورند. اما این تگ ها بسیار برای موتورهای جستجو و مروگر ها مهم می باشد.
  • تگ bdo: با این تگ و صفت dir می توانید حالت نمایشی متن را راست به چپ یا بلعکس کنید. البته دقت کنید که جای کلمات فقط تغییر می کنند نه کل متن. برای آنکه بهتر متوجه شوید لطفا مثال زیر را اجرا کنید.
<bdo dir="rtl">This text will be written from right to left</bdo>

گاهی اوقات برنامه ای را (چه تحت وب و یا سیستم عامل) نوشته و بعد از مدت ها به سراغ آن بازمیگردیم، بعضی اوقات وقتی کدها را بررسی می کنیم بعضی از قسمت ها را یادمان رفته که چه کاربردی داشته و یا اصلا یادمان رفته است که چرا نوشته ایم. ما بعضی اوقات در برنامه هایمان می خواهیم نوشته هایی بنویسیم که در اجرای برنامه ها هیچ نقشی نداشته باشند. مثلا جلوی یک خط کد، کاری که قرار است انجام شود را نیز می نویسیم. در اچ تی ام ال برای درج توضیحات باید آنها را بین علامتهای <!-- --> قرار دهیم.

 <!-- Write your comments here --> 

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

<!-- This is a comment -->

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

<!-- Remember to add more information here -->
یا
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

استفاده از رنگ

در اچ تی ام ال برای تعیین رنگ هر چیزی شما چند راه مختلف پیش رو دارید:

  • استفاده از نام رنگ
  • استفاده از کدهای RGB
  • استفاده از کدهای HEX

استفاده از نام رنگ: خب در واقع این روشی است که کمتر مورد استفاده طراحان وب استفاده می شود به خاطر اینکه تعداد گزینه های انتخاب رنگ محدود هستند. برای انتخاب رنگ ها در این صورت شما تنها باید نام انگلیسی مربوط به رنگ را بلد باشید. مثلا: Red, Blue, Green و... (استفاده از این روش پیشنهاد نمی شود).

استفاده از کدهای RGB: اگر تا به حال در بچگی با گواش و قلمو و... کار کرده باشید حتما شده که چند رنگ را مخلوط کنید (عمدی یا غیر عمدی ) گاهی ترکیبات قشنگی در می آمدند و گاهی هم کمی .... در اچ تی ام ال شما می توانید سه رنگ Red ، Green و Blue را با هم ترکیب کنید و از مخلوط آنها رنگ هایی را بدست آورید. مشکلی که در حالت قبلی وجود داشت تعداد کم رنگ ها بود ولی با این روش که در ادامه به شما خواهم گفت می توانید 16.581.375 رنگ را داشته باشید. کافیست از روش زیر استفاده کنید:

  • Rgb (255,255,255)

اگر به این اعداد توجه کنید در میابید که اعداد سمت چپ مربوط به حرف R می باشند که همان Red یا قرمز است. اعداد وسط مربوط به Green یا سبز و اعداد سمت راست مربوط به Blue یا آبی.حداکثر عددی که می توان به هر یک از این عبارت ها داد مابین صفر تا 255 می باشد.

اگر همه اعداد صفر باشد مقدار رنگ برابر سیاه است چون هیچ رنگی وجود ندارد و اگر همه اعداد 255 باشد رنگ سفید به نمایش در می آید. حالا یک سوال اگر فقط عدد سمت راست 255 و بقیه صفر باشند چه رنگی نمایش داده می شود؟ در نهایت وقتی خواستید رنگ را مشاهده کنید باید از عبارت rgb(28, 58, 255) استفاده کنید. به مثالهای زیر توجه کنید:

Rgb(255,255,255) سفید
Rgb(0,0,0) سیاه
Rgb(255,0,0) قرمز
Rgb(255,255,0) زرد
Rgb(0,255,0) سبز
Rgb(0,255,255) نیلی
Rgb(0,0,255) آبی

استفاده از کدهای HEX: این کدها از سیستم نمایشی هگزادسیمال یا شانزده ای استفاده می کنند شیوه کاری آنها همانند RGB می باشد با این تفاوت که محدوده کاری این کدها صفر تا F می باشد. در سیستم شانزده تایی از عدد صفر تا 9 از عدد استفاده می شود اما از 10 تا عدد 15 از حروف A تا F استفاده می شود. حرف A برابر 10، حرف B برابر 11، حرف C برابر 12 و ... حرف F برابر 15 می باشد.استفاده از این حالت آسان تر از وضعیت قبلی است برای کار با این روش کدنویسی از روش زیر باید تبعیت کنید.

#FFFFFF

هر جفت F مربوط به یک رنگ بین قرمز، سبز و آبی می باشد. در مثال بالا رنگ سیاه به نمایش در می آید. به مثال های زیر توجه کنید:

#FFFFFF سفید
#000000 سیاه
#FF0000 قرمز
#FFFF00 زرد
#00FF00 سبز
#00FFFF نیلی
#0000FF آبی

CSS چیست و مقدمات آن

البته اشتباه نکنید این قسمت صرفا آموزش کلی از سی اس اس می باشد نه خود سی اس اس، چون سی اس اس به صورت کلی مبحثی طولانی تر حتی از خود اچ تی ام ال می باشد. خب در این قسمت می خواهم شما را کمی با سی اس اس و رابطه آن با اچ تی ام ال آشنا کنم.سی اس اس مخفف کلمات Cascading Style Sheets به معنی تحت و الفظی آن شیوه نامه آبشاری می باشد.

خب توسط یک شیوه نامه می توانید یک صفحه اچ تی ام ال را زیبا تر کنید، در واقع با سی اس اس می توانید به اجزا و المنت های اچ تی ام ال استایل بدهید. مثلا تگ های H1 را به رنگ آبی در بیاورید. با استفاده از سی اس اس می توانید از کدهای اضافه پرهیز کنید. مثلا شما فقط یکبار احتیاج دارید که یک استایل را به تگ خاصی بدهید نه با هر بار استفاده از آن تگ. استفاده از سی اس اس به سه صورت در وب امکان پذیر می باشد:

  1. سی اس اس درون تگ یا Inline
  2. سی اس اس درون اچ تی ام ال یا Internal
  3. سی اس اس به صورت یک فایل جداگانه یا External

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

<h1 style="color:red;">This is a heading with red color</h1>

در این مثال یک متن به صورت <H1> و با رنگ قرمز نمایش داده می شود.در استفاده از سی اس اس باید مراقب باشید (منظورم شیوه نگارش هستش .

StyleName:Value;

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

<!doctype html>
<html>
<body>
<style>
    h1{
        text-align: center;
        color: blue;
        font-size: 20px;
    }
</style>
    <h1>I</h1>
    <h1>T</h1>
    <h1>P</h1>
    <h1>R</h1>
    <h1>O</h1>
</body>
</html>

قصد ندارم که دستورات سی اس اس را بررسی کنم اما با نگاهی به این کدها متوجه می شوید که من پنج بار از تگ <h1> استفاده کردم اما فقط یک بار برای این تگ استایل نوشتم.

  • Text-Align: طرازبندی متن که در این مثال مقدار Center گرفته است.
  • Color: برای تعیین رنگ متن استفاده می شود. در این مثال رنگ آن Blue می باشد.
  • Font-Size: اندازه متن تعیین می شود. در این مثال مقدار 20 پیکسل می باشد.

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

    <link rel="stylesheet" href="style.css">

چند مثال کاربردی

رنگ: برای تعیین رنگ یک المنت در سی اس اس باید از استایل Color:Value; استفاده کنید، برای مقدار این استایل هم می توانید از نام رنگ ها استفاده کنید هم از کدهای RGB و هگزادسیمال.

H1
{
Color:#FF0000;
}

اندازه فونت: برای تغییر اندازه یک متن می توانید از سی اس اس به راحتی استفاده کنید. برای این کار از خاصیت Font-Size استفاده می شود. مقدار این خاصیت باید برحسب پیکسل باشد.

H1
{
Font-size:30px;
}

نوع فونت: برای تعیین نوع فونت می توانید از خاصیت Font-Family بهره ببرید. توجه داشته باشید مقدار آن باید فونتی باشد که روی سیستم نصب است.

H1
{
Font-family:B Yekan;
}

حاشیه یا Border: برای ساخت یک حاشیه دور نوشته ها می توانید از خاصیت border استفاده کنید که مقدار آن باید برحسب پیکسل باشد.

H1
{
Border: 1px solid black;
}

خاصیت Solid برای تعیین رنگ حاشیه ها استفاده می شود.

Padding: از این خاصیت برای قرار دادن فاصله داخلی یک المنت با المنت دیگری است. برای مثال در مثال بالا فاصله نوشته تا حاشیه مد نظر گرفته می شود. این اندازه برحسب پیکسل می باشد.

H1
{
Border: 1px solid black;
Padding: 30px;
}

Margin: این خاصیت برای تعیین فاصله خارجی یک المنت از المنت دیگریست.

H1
{
Margin: 20px;
}

ID و Class: از مهمترین خاصیت های سی اس اس این دو خاصیت می باشند. ببینید فرض کنید که شما می خواهید از چند تگ هم نام استفاده کنید و برای هر یک استایل جداگانه ای بسازید خب برای اینکار می توان از صفت Style تگ ها استفاده شود اما زمانی که بخواهیم از فایل سی اس اس در روش سوم استفاده کنیم این کار امکان پذیر نیست. در این مواقع برای انجام این کار از ID و Class استفاده می کنیم. در واقع این دو گزینه آدرس دسترسی به یک تگ را برای ما فراهم می کند. مثلا:

<p id="p1">THIS TAG HAS A ID</p>

حال فایل سی اس اس خارجیتان را باز کرده و کد زیر را در آن قرار دهید:

#p1{
    color: blueviolet;
}

در صورتی که از ID استفاده شود برای دسترسی به تگ مورد نظر پیش از نام آی دی از # استفاده می شود. و در صورتی که از کلاس استفاده کنید باید از علامت . استفاده کنید.

لینک ها

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

<a href="url">link text</a> 

Url تعیین کننده مسیری است که با کلیک روی نوشته link text باز می شود. Href همانطور که قبلا عرض کردن یکی از صفات مهم تگ a می باشد. که مشخص کننده مسیر لینک است.

اهداف در لینک های اچ تی ام ال

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

  • __Blank : باز شدن لینک در یک تب یا پنجره جدید
  • __Self : باز شدن لینک در همان تب / به صورت پیش فرض تگ a دارای این مقدار است.
  • __Parent: (در صورت استفاده از Frame) باز شدن لینک در همان Frame
  • __Top : (در صورت استفاده از Frame) باز شدن لینک در Frame دیگر
  • Framename : (در صورت استفاده از Frame) باز شدن لینک در Frame مشخص

یک مثال کلی

<a href="http://www.tosinso.com/" target="_blank">Visit ITPro!</a> 

آدرس آی تی پرو را در پنجره جدید باز می کند.

لینک ها در سی اس اس

لینک ها در سی اس اس دارای چهار حالت مختلف هستند، یعنی می توان یک متن که دارای لینک است در چهار حالت مختلف استایل دهی شوند:

  • Link: رنگ لینک را انتخاب می کند.
  • Visited: رنگ لینکی که قبلا روی آن انتخاب شده است.
  • Hover: رنگ لینک در زمانی که ماوس روی آن می رود.
  • active : رنگ لینک درست در زمان کلیک کردن روی آن.

حال چگونه می توانیم از این امکانات استفاده کنیم!؟

<style>
a:link {color:red;}
a:visited {color:red;}
a:hover {color:red;}
a:active {color:red;}
</style>

ساخت Bookmark در لینک: حتما تا به حال شده است که با کلیک روی یک لینک، در همان صفحه به مکانی منتقل می شوید، مثلا وقتی به پایینترین نقطه یک سایت میروید عموما با نوشته Top مواجهه شده اید، وقتی روی این نوشته کلیک می کنید به بالای صفحه انتقال می یابید. یا در ویکیپدیا، وقتی روی زیر گزینه ها یک موضوع کلیک می کنید در همان صفحه به قسمت مربوطه فرستاده می شوید، به این نوع لینک ها Bookmark می گویند. برای تعیین بوکمارک کافی است که لینک یک نوشته را برابر آی دی یک المنت یا تگ اچ تی ام ال قرار دهید. برای نمونه:

<h1 id="top"></h1>
    <br><br><br><br><br><br><br><br><br><br>
    <a href="#top">TOP</a>

این دستور را امتحان کنید و نتیجه را ببینید! شما همچنین می توانید برای جذاب تر کردن لینک های تان بجز متن، از تصاویر هم استفاده نمایید. یعنی به جای آنکه روی یک متن کلیک کنید، روی یک عکس کلیک کرده و به جای مورد نظر منتقل شوید. برای این کار داخل تگ <a> از تگ <img> بهره ببرید.

<a href="tosinso.com"><img src="p1.png"></a>

تصاویر

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

<img src=""/>
  • Src مخفف کلمه source یا منبع می باشد. در بین کوتیشن ها شما باید آدرس عکس مورد نظر را وارد نمایید. البته تگ img دارای خاصیت های دیگری نیز می باشد که در ادامه به آنها نیز اشاره می کنیم!
  • صفت alt: این صفت در واقع متنی را دریافت می کند، در صورتی مرورگر به هر دلیلی نتواند مسیر عکس را پیدا کند و ... این متن بجای آن نمایش داده می شود. Alt مخفف alternative می باشد.
  • Width & Height: برای تعیین ارتفاع و عرض تصاویر می توانید از این توصیفات استفاده کنید، البته همین خاصیت را می توانید در صفت Style نیز پیدا کنید:
<img src="itpro.png" alt="ITPRO" style="Width:70px; height:100px;/>

البته جدای از اینها در درسهای سی اس اس که بعدا ارائه خواهد شد، می توانید صفت های بیشتری برای تگ img در نظر بگیرید مثل Border.اگر درسهای قبلی را دنبال کرده باشید به یاد دارید که از حالتی در اچ تی ام ال به اسم تگ های تو در تو نام بردیم، بدین صورت که بتوانید قبل از آنکه تگی را ببندید از تگی دیگر استفاده کنید. به مثال زیر توجه کنید.

<h1><i>Hello</i></h1>

در مثال بالا همزمان که متن Hello به صورت عنوان نمایش داده می شود، کج نیز می باشد. با این دانسته خیلی راحت می توانید یک تصویر را به صورت لینک در آورید، به مثال زیر توجه کنید:

<a href="itpro"><img src="itpro.png"/></a>

جداول

در این قسمت می خواهم که چگونگی ساخت جداول در اچ تی ام ال به همراه چندین صفت مهم را توضیح دهم. خب برای ساخت یک جدول در کل ما نیاز به چهار تگ اصلی داریم که به ترتیب، table، tr، th و td هستند. شیوه کاری این تگ ها به صورت زیر می باشد:

  • ساخت بدنه کلی جدول با تگ table
  • ساخت ردیف های جدول با تگ tr
  • ساخت عناوین جدول با تگ th
  • ساخت مقادیر هر عنوان با تگ td
<table>
  <tr>
<th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

هر جدولی که ساخته شود دارای یک یا چند عنوان و برای هر عنوان چند مقدار در نظر گرفته می شود، در مثال بالا یک ردیف با استفاده از تگ tr و با استفاده از تگ Th سه عنوان نام، نام خانوادگی و سن قرار دادیم در ردیف های بعدی با استفاده از تگ td برای هر یک از عنوان ها یک مقدار در نظر گرفته ایم. به صورت پیش فرض در هر ردیف اولین مقدار زیر اولین عنوان قرار می گیرد. و در این روند تا انتها ادامه خواهد داشت. البته می توان این روند را نیز تغییر داد که در ادامه بحث خواهد شد.

چند استایل زیبا برای جداول : به صورت کلی هر جدولی باید دارای حاشیه باشد، برای اضافه کردن حاشیه کافی است که در قسمت سی اس اس فایل کدهای زیر را قرار دهید:

table, td, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

شاید بخواهید که مکان نوشته های مربوط به عناوین و مقادیر را تغییر دهید برای این کار در قسمت سی اس اس فایل کدهای زیر را قرار دهید:

th, td {
    text-align: left;
}

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

th, td
{
	padding: 10px 10px 10px 10px;
}

Padding برای تعریف فاصله داخلی اجزا استفاده می شود، مقادیر این استایل به ترتیب بالا، چپ، پایین و راست می باشد.

یکی دیگر از تگ های مهم اچ تی ام ال تگ Caption می باشد، این تگ در تگ table باعث می شود که یک نام به جدول اختصاص داده شود، این نام معمولا روی جدول طراحی شده قرار می گیرد، مثال زیر را اجرا کنید.

 <!DOCTYPE HTML>
<HTML>
	<BODY>
		<style>
table, tr, td, th {
    border: 1px solid black;
         border-collapse:collapse;
}
th, td
{
	padding: 10px 10px 10px 10px;
	text-align:center;
}
		</style>
<table>
<caption>ITPRO Family</caption>
<tr>
	<th>Name</th>
	<th>Family</th>
	</tr>
<tr>
	<td>Arastoo</td>
	<td>Abbasi</td>
</tr>
<tr>
<td>Mohammad</td>
<td>Nasiri</td>
</tr>
<tr>
<td>Hosain</td>
<td>Ahmadi</td>
</tr>
</table>
	</BODY>
</HTML>

در آخر دو صفت بسیار مهم از تگ های th, td وجود دارند، که می توانند خیلی کاربردی باشند، برای آنکه یک سلول بیش از اندازه خود چه در جهت ستونی یا ردیفی فضا اشغال کند باید در تگ td یا th آن سلول از دستورات زیر استفاده کنید:

در جهت ستونی:

<th colspan="2">Name</th>

در جهت ردیفی:

<th rowspan="2">Name</th>

مقدار 2 نشان می دهد که سلول Name به اندازه دو سلول فضا اشغال کرده است.

لیست ها

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

لیست نامرتب : برای ساخت این لیست ما به دو تگ Ul و li احتیاج داریم، تگ li داخل تگ ul قرار می گیرد. به مثال زیر توجه کنید:

<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>

تگ ul مشخص کننده نوع لیست (مرتب / نامرتب) بودن آن می باشد. Ul مخفف Unordered List می باشد. این تگ دارای یک استایل مهم به نام List-Style-type می باشد که دارای چهار مقدار است.

  • Disc: حالت پیش فرض لیست است، آیتم های لیست با یک توپ پررنگ مشخص می شود.
  • Circle: دایره توخالی
  • Square: مربع
  • None: بدون هیچ علامتی

برای استفاده از این استایل ها کافی است که دستورات زیر استفاده کنید.

	<ul style="list-style-type:circle;">
			<li>Home</li>
	</ul>

لیست مرتب: ساختار کد نویسی این لیست ها کاملا شبیه لیست قبلی می باشد با این تفاوت که بجای تگ آغازین ul از تگ ol استفاده می شود. در ظاهر نیز تفاوت در آن است که لیست بندی با شکلهای دایره و مربع نمایان نمی شود بلکه از اعداد و حروف استفاده می کند. تگ ol دارای خاصیتی به اسم type می باشد که نوع لیست بندی را مشخص می کند، این خاصیت دارای 5 مقدار (1 ، A ، a ، I ، i) می باشد.

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

لیست های توضیحی: این نوع لیست برای توضیح درباره ی یک آیتم خاص مورد استفاده قرار می گیرد. برای مثال شما یک عنوان دارید و در زیر آن عنوان می خواهید توضیحاتی درباره آن عنوان بنویسید برای این کار کافی است از تگ های dl بهره ببرید. تگ dl دارای تگ های dt برای عنوان نوشته و dd برای توضیح درباره عنوان می باشد. به مثال زیر توجه کنید:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 

لیست ها تودرتو: همانطور که می دانید در اچ تی ام ال تگ ها می توانند در داخل هم قرار بگیرند، برای مثال متنی در عین آن که از تگ b استفاده می کند از تگ i نیز می تواند بهره مند باشد. لیست های تودرتو نیز می توانند این خاصیت را داشته باشند، برای این کار کافی است که از تگ ul یا ol دو بار استفاده شود. به مثال زیر توجه کنید.

<!Doctype HTML>
<html>
	<body>
		<ul>
			<li>Home</li>
			<li>Blog
				<ul>
					<li>Sport</li>
					<li>Music</li>
					<li>Movie</li>
				</ul>
			</li>
			<li>Contact us</li>
	</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html> 

بلاک و کلاس ها

تمام تگ هایی که در اچ تی ام ال وجود دارد، می توانند به صورت مستقل یکسری استایل ها و دسترسی ها را داشته باشند، به عنوان مثال وقتی متنی درون تگ p قرار می گیرد خیلی راحت می توان در سی اس اس به آن استایل داد. اما گاهی اوقات متنی یا شی می تواند داخل یک بلاک باشد که خودمان آن را درست کرده ایم. همچنین می توانید با این کار چندین تگ را با هم در یک بلاک قرار دهیم. برای اینکار می توانید از تگ div استفاده کنید.برای دسترسی به یک تگ Div می توانید از کلاس و آی دی استفاده کرد. به مثال زیر توجه کنید!

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div> 

همانطور که می بینید بلاکی ساخته ایم که خود شامل دو تگ h2,p می باشد. برای دسترسی به این div یک کلاس با نام city ساخته ایم که در حین استفاده از سی اس اس می توانید به آن دسترسی داشته باشید. اگر از class استفاده شود در سی اس اس باید اینگونه عمل کنید:

.city
{
background-color:black;
color:white;
padding:20px;
}

اما اگر بجای class از id استفاده کنید باید اینگونه عمل کنید:

#city
{
background-color:black;
color:white;
padding:20px;
}

بلاک های خطی: اگر بخواهید در یک خط متن به یک کلمه خاص دسترسی داشته باشید استفاده از div خیلی منطقی نیست. در اینگونه مواقع از span استفاده می شود. برای مثال:

<h1>My <span style="color:red">Important</span> Heading</h1>

در این کد کلمه Important به رنگ قرمز درآمده است.

قاب بندی

یک قاب یا Iframe در صفحه اچ تی ام ال موجب می شود که همزمان چند صفحه وب مختلف را در یک صفحه نمایش دهید. این کار توسط تگ <iframe> و با استفاده از خاصیت های مختلف امکان پذیر است. این تگ دارای خاصیت های src مشخص کننده لینک مورد نظر برای نمایش، width , Height برای تعیین طول و عرض قاب می باشد.

<iframe src="itpro" width="300" height="500"></iframe>

یکی از قابلیت های جالب این تگ اینست که می تواند به عنوان target در تگ a قرار بگیرد. برای این کار کافی است مقدار خاصیت name تگ iframe را برابر نامی قرار داده و آن نام را به خاصیت target در تگ a نسبت داد.

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> 

تگ عنوان یا Head

دستوراتی که درون تگ head قرار می گیرد در بدنه سایت نمایش داده نمی شود، و تقریبا اکثر آنها قابل مشاهده نیستند. این تگ ها برای مرورگر ها و موتورهای جستجوگر بسیار مهمند. طبق تعریف اجزای تگ head شامل متاتگ ها می باشد. (تگ هایی که درباره تگ های دیگر هستند).

تگ عنوان: اولین و شاید مهمترین تگ در این قسمت تگ عنوان یا title می باشد. این تگ مشخص کننده نام صفحه اچ تی ام ال است. محتویات این تگ در نتایج موتورهای جستجو بسیار پرکاربرد است.

<head>
  <title>Page Title</title>
</head>

تگ استایل: اگر به یاد بیاورید یکی از روشهای تعیین استایل برای یک سند استفاده از تگ Style می باشد. استایل های مورد نظر برای یک صفحه اچ تی ام ال می تواند داخل این تگ قرار بگیرد.

<!Doctype HTML>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
p{
	color: #f300ff;
	padding-left: 10px;
}
	</style>
	</head>
	<body>
		<p>Welcome To HTML!</p>
	</body>
</html>

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

<link rel="stylesheet" href="style.css"> 

تگ های meta: این نوع تگ ها مهم هستند از این جهت که مشخصات صفحه وب در این تگ قرار می گیرد.

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

<meta charset="UTF-8">

برای تعریف توضیحات مربوط به یک صفحه می توانید از متای زیر استفاده کنید:

<meta name="description" content="Free Web tutorials">

برای تعریف کلمات کلید مربوط به یک صفحه می توانید از متای زیر استفاده کنید:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

برای تعریف نام نویسنده صفحه می توانید از متای زیر استفاده کنید:

<meta name="author" content="Hege Refsnes">

برای آنکه بتوانید یک صفحه وب را در مدت های مشخصی به صورت خودکار رفرش کنید می توانید از متای زیر استفاده کنید: (در این مثال هر 30 ثانیه یکبار صفحه رفرش خواهد شد.)

<meta http-equiv="refresh" content="30">

جاوا اسکریپت: همانند سی اس اس می توانید جاوا اسکریپت را به حالت داخلی استفاده کنید. برای اینکار کافی است در تگ head محتویات جاوا اسکریپت را داخل تگ <script> قرار دهید. به مثال زیر توجه کنید:

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

تگ base: گاهی اوقات از مسیر مشخصی چندبار می خواهید استفاده کنید برای اینکار هر بار باید در خاصیت href مربوط به تگ a آدرس آن را تایپ نمایید. برای جلوگیری از این تکرارها می توانید یک لینک پایه بسازید. در تگ head می توانید از این تگ به صورت زیر بهره ببرید.

<base href="http://www.tosinso.com/" target="_blank">

حال اگر در هر مکانی خاصیت href را خالی بگذارید به لینک پایه مراجعه می کند. مثال زیر را اجرا کنید.

<!Doctype HTML>
<html>
<head>
	<title>Test</title>
	<base href="http://tosinso.com" target="_Blank"></base>
	</head>
	<body>
		<a href="">ITPRO</a>
	</body>
</html>

چند قانون ساده

تا الان با برخی از اجزای و تگ های HTML آشنا شده اید، نوشتن دستورات به نظر خیلی آسان می آیند و در حقیقت هم همینگونه است. اما در این قسمت می خواهم چندین نکته و قانون ساده درباره نوشتن دستورات را به شما یاد بدهم.نوبت دهی به تگ های تو در تو: یک متن همزمان که استایل b را گرفته می تواند i را نیز دریافت کند. ولی اولین تگی که باز شده است آخرین تگی خواهد بود که بسته می شود.

اشتباه:

<b><i>This text is bold and italic</b></i>

درست:

<b><i>This text is bold and italic</i></b>

تگ های اچ تی ام ال حتما باید بسته شود:

اشتباه:

<p>This is a paragraph
<p>This is another paragraph

درست:

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

تگ های بدون تگ بسته (تگ خالی) هم باید بسته شود:

اشتباه:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

درست:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

دستورات را حتما با حروف کوچک بنویسید. (البته تاثیری در نمایش نمی دهد اما طبق قانون باید اینگونه باشد):

اشتباه:

<body>
<P>This is a paragraph</P>
</BODY>
درست:
<body>
<p>This is a paragraph</p>
</body>

مقادیر خاصیت ها باید حتما داخل "کتیشن" باشد:

اشتباه:

<table width=100%>

درست:

<table width="100%">

این قوانین تنها برای آن بود که سند HTML شما به یک سند XHTML تبدیل شود. این نوع سندها بهینه سازی شده سندهای HTML است. دو قانون ساده:در ابتدای هر سند HTML از اظهار کننده <!doctype> استفاده کنید. از خاصیت XMLNS تگ HTML بهره ببرید برای این کار کافی است این خط کد را به بجای <html> قرار دهید:

<html xmlns="http://www.w3.org/1999/xhtml">

فرم ها

فرم های اچ تی ام ال برای جمع آوری یکسری اطلاعات از کاربر استفاده می شود. ساخت فرم در اچ تی ام ال توسط تگ <form> انجام پذیر است. این تگ دارای ورودی های مختلفی است که از طریق تگ input می توان مقادیر مختلفی دریافت کرد. تگ input دارای صفت type می باشد که می تواند شامل text ,radio, submit و... باشد. در این سری آموزش به طور مفصل تک تک آنها را آموزش می دهیم. به طور کلی از این تگ به صورت زیر استفاده می شود.

ورودی text : انتخاب input از نوع text موجب ساختن فرم ورودی متن می شود. از این فرم می توانید اطلاعات را به صورت رشته ای وارد کنید.

<!Doctype HTML>
<html>
<head>
	<title>HTML Form</title>
	</head>
	<body>
		<form>
		Name:	<input type="text"/>
		</form>
	</body>
</html>

یکی دیگر از خاصیت های تگ input صفت name می باشد، از این خاصیت می توانید برای دسترسی به یک فیلد استفاده کنید.

<form>
	Name:	<input type="text" name="name"/><br>
	Family: <input type="text" name="family"/>
</form>
  • ورودی radio : در Radio Button ها امکان انتخاب فقط یک گزینه را در بین چندین انتخاب فراهم می کند. این انتخاب برای زمانی استفاده می شود که در بین چند گزینه فقط یکی از آنها درست است. مثل سوالات چند گزینه.
<form>
	<p>What is your gender?</p>
	<input type="radio" name="gender" value="Man" checked/>Man <br>
	<input type="radio" name="gender" value="Woman"/> Woman 
</form>

البته خاصیت Value هیچ تاثیری در نمایش نمی گذارد، متنی که در بیرون تگ input قرار می گیرد به نمایش در می آید.

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

  • ورودی submit : در ورودی submit برای کنترل کردن داده های فرم می توانید از این ورودی استفاده کنید. داده های فرم با کلیک بر روی یک دکمه واکنش نشان می دهند.
<form>
  First name:<br>
  <input type="text" name="firstname" value="Arastoo"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Abbasi"><br><br>
  <input type="submit" value="Submit">
</form> 

برای نشان دادن متنی روی این ورودی از خاصیت value استفاده کنید.

نکته: خاصیت value برای تعیین مقدار پیشفرض در اکثر ورودی ها استفاده می شود. در مثال بالا ورودی های متنی دارای مقادیر اولیه هستند.

خاصیت Action : این خاصیت همانطور که گفته  شد از ورودی submit برای کنترل فرم مورد استفاده قرار می گیرد، البته یکی دیگر از مسائل مهم در کنترل و انجام عملیات در فرم یکی از خاصیت های تگ form به نام action است. این خاصیت مشخص می کند بعد از کلیک روی یک ورودی دکمه یا submit اطلاعات فرم به کجا برای انجام عملیات روی داده ها ارسال شود. به مثال زیر توجه کنید:

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form> 

در این سند اطلاعات جمع آوری شده پس از کلیک روی دکمه submit به پرونده action_page.php ارسال می شود.

  • خاصیت Method :شیوه ارسال اطلاعات از پرونده ای به پرونده دیگر بسیار مهم است، این شیوه توسط خاصیت method در تگ form مشخص می شود. خاصیت method دارای دو مقدار Post و Get است.
  • Post: در مواقعی که فرم دارای موارد ویرایشی است و یا فرم های ورودی اطلاعات مهمی مثل رمز عبور را دریافت می کنند از این شیوه استفاده می شود. در این شیوه اطالاعات ارسالی درون کادر PageAddres مرورگر نمایش داده می شود. (امنیتی)
  • Get: درمواردی که اطلاعات دارای اهمیت خاصی نیستند، یا اینکه بتوان محتوای این متون را در موقع ارسال تغییر داد از این شیوه استفاده می شود. شیوه ارسال اطلاعات در موتور جستجوی گوگل به این شیوه است. (فاقد امنیت)

گروه بندی fieldset : برای آنکه از چندین فرم مستقل در یک صفحه بهره ببرید می توانید آن ها را گروه بندی کنید، این کار علاوه بر آنکه ورودی ها را قبل فهم می کند، از تداخل اطلاعات با هم جلوگیری می کند. بعد از تگ form اطلاعات ورودی را داخل تگ <fieldset> قرار دهید و برای انتخاب نام گروه از تگ <legend> استفاده کنید. مثال زیر را اجرا کنید:

<form>
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form> 

کنترل ها و اجزای فرم

اجزای کنترلی معمولا بدون احتیاج به تگ form ساخته می شوند. برای این اجزا کافی است که تگ ها و المنت های آن را استفاده کنید.

  • لیست Drop-Down : از این نوع لیست ها برای انتخاب بین چند آیتم به صورت کشویی استفاده می شود. تگ اصلی این لیست select می باشد، مقادیری که می تواند انتخاب شوند را می توانید با تگ option وارد کنید. تگ option زیر مجموعه تگ select است و به تنهایی هیچ کاربردی ندارد.
<select name="f">
<option name="a" value="arastoo">Arastoo</option>
<option name="a" value="Sina">Mohammad</option>
<option name="a" value="Sina">Hosain</option>
<option name="a" value="Sina" selected>Sina</option>
</select>

به صورت پیشفرض اولین آیتم به عنوان آیتم انتخابی قرار می گیرد، اما اگر می خواهید این مقدار را تغییر دهید می توانید از خاصیت selected استفاده کنید:

<option name="a" value="Sina">Mohammad</option>
<option name="a" value="Sina" selected>Hosain</option>
  • ورودی متن چند خطی : در قسمت قبل با کادر ورود متن آشنا شدید، این کادر تنها قادر به دریافت متن از یک خط می باشد اما اگر بخواهیم یک کادر متنی به صورت چند خطی بسازیم باید از تگ textarea استفاده کنید. توسط این تگ می توانید تعداد ردیف ها و ستون های متنی را تنظیم کنید، همچنین این امکان به صورت ظاهری به کاربر داده می شود.
<textarea name="message" rows="15" cols="50">

متنی که به صورت پیش فرض وارد می شود.

</textarea>

در دستور بالا، تعداد 15 ردیف و 50 ستون به صورت پیش فرض قرار گرفته است. متنی که داخل تگ آغازین و پایانی وجود دارد به صورت پیش فرض درون کادر متنی قرار می گیرد. امکان تغییر متن و اندازه کادر به کاربر داده شده است.

  • دکمه : یک دکمه یا button از اجزای بسیار مهم و کلیدی در هر فرمی است. تمام اطلاعاتی که از کاربر دریافت می شود توسط یک دکمه کنترل می شوند. برای ساخت دکمه می توانید از طریق تگ button و خاصیت type اقدام نمایید.
<button type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>

یکی از ویژگی های مهم این تگ خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.

  • اجزای فرم در HTML5 : باید اعتراف کرد که نسخه جدید HTML انقلابی جدید در صنعت وب و حتی اپلیکیشن های موبایل درست کرد. در بحث فرم HTML5 با 3 نوع المنت جدید همراه است.
<datalist>
<keygen>
<output>
  • تگ datalist : به احتمال زیاد وقتی در گوگل سرچ کرده اید وقتی یکی از حروف کلمه ای را بنویسید لیستی از کلمات پیشنهادی برای شما به نمایش در می آید. این کار توسط تگ datalist انجام پذیر است. اصول کاری این تگ تعریف یک id توسط تگ datalist و نسبت دادن آن به تگ input و خاصیت list است. بعد از آن توسط تگ option مقادیر مورد نظر را وارد نمایید.
<form>
	<input list="member">
	<datalist id="member">
		<option value="Mohammd">
		<option value="Hosain">
		<option value="Arastoo">
	</datalist>
</form>

نکته: در تگ هایی که حاوی خاصیت value یا مقدار است ممکن است که مقدار نمایش داده نشود مثلا در لیست های Drop-Down مقدار نمایشی بین تگ های <option> قرار می گیرد، اما برای آنکه در هسته فرم این مقدار جای بگیرد باید از خاصیت value استفاده شود. همچنین بانک های اطلاعاتی از این طریق با فرم ارتباط برقرار می کنند.

تگ Keygen : یکی از مهمترین موضوعات فایلهای تحت وب امنیت می باشد، فرم ها نقش بسیار کلیدی در مباحث امنیتی وب دارند. Keygen یک کلید تعمیری برای فرمهاست. Keygen دارای دو مقدار private , public می باشد.

  1. Public: اطلاعات را به صورت سرور ذخیره می کند، اطلاعات به سمت یک سرور خاص ارسال می شوند.
  2. Private: اطلاعات را به صورت محلی ذخیره می کند.
  • تگ output : زمانی که می خواهید روی مقادیر مختلفی عملیاتی را انجام دهید می توانید از این روش استفاده کنید، البته با وجود تگ های script و کنترل زبان های سمت سرور این کار خیلی منطقی به نظر نمی رسد.
<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

خاصیت oninput متعلق به تگ form شیوه انجام عملیات را دریافت می کند، اینکار تاحدی شبیه تعریف تابع است. بعد از آن مقادیری که توسط input جمع آوری شدند توسط تگ output نمایش داده می شود.

انواع ورودی

همانطور که در بخش اول مبحث فرم ها گفتیم، برای تعیین نوع ورودی در تگ input از خاصیت type استفاده می کنیم. اولین مقدار این خاصیت همانطور که بررسی کردیم text بود که برای وارد کردن داده های متنی در یک سطر استفاده می شد.

  • ورودی text : انتخاب input از نوع text موجب ساختن فرم ورودی متن می شود. از این فرم می توانید اطلاعات را به صورت رشته ای وارد کنید.
<!Doctype HTML>
<html>
<head>
	<title>HTML Form</title>
	</head>
	<body>
		<form>
		Name:	<input type="text"/>
		</form>
	</body>
</html>

یکی دیگر از خاصیت های تگ input صفت name می باشد، از این خاصیت می توانید برای دسترسی به یک فیلد استفاده کنید.

<form>
	Name:	<input type="text" name="name"/><br>
	Family: <input type="text" name="family"/>
</form>
  • ورودی Password : یکی از مهمترین ورودی ها در HTML مخصوصا در فرم های ورود و ثبت نام، ورودی password می باشد. این نوع ورودی برای حفظ امنیت کاراکترهایی که در آن وارد می شود را به صورت دایره های توپ پر نشان می دهد.
<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form> 
  • ورودی radio : در Radio Button ها امکان انتخاب فقط یک گزینه را در بین چندین انتخاب فراهم می کند. این انتخاب برای زمانی استفاده می شود که در بین چند گزینه فقط یکی از آنها درست است. مثل سوالات چند گزینه.
<form>
	<p>What is your gender?</p>
	<input type="radio" name="gender" value="Man" checked/>Man <br>
	<input type="radio" name="gender" value="Woman"/> Woman 
</form>

البته خاصیت Value هیچ تاثیری در نمایش نمی گذارد، متنی که در بیرون تگ input قرار می گیرد به نمایش در می آید.

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

  • ورودی CheckBox : ورودی CheckBox برای انتخاب همزمان چند آیتم استفاده می شود. برای استفاده از این ورودی کافی است که مقدار type را برابر checkbox قرار دهید و یک مقدار توسط خاصیت value به آن بدهید. البته این مقدار نمایش داده نمی شود، برای نمایش متن این گزینه پس از بستن تگ متن مورد نظرتان را بنویسید. به مثال زیر توجه کنید.
<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form> 

تفاوت کلیدی CheckBox و Radio در تعداد انتخاب است. گزینه اول امکان انتخاب چندین گزینه را می دهد اما گزینه دوم تنها یکی از بین گزینه ها را می توانید انتخاب کنید.

  • ورودی submit : ورودی submit برای کنترل کردن داده های فرم می توانید از این ورودی استفاده کنید. داده های فرم با کلیک بر روی یک دکمه واکنش نشان می دهند.
<form>
  First name:<br>
  <input type="text" name="firstname" value="Arastoo"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Abbasi"><br><br>
  <input type="submit" value="Submit">
</form> 

برای نشان دادن متنی روی این ورودی از خاصیت value استفاده کنید.

نکته: خاصیت value برای تعیین مقدار پیشفرض در اکثر ورودی ها استفاده می شود. در مثال بالا ورودی های متنی دارای مقادیر اولیه هستند.

  • ورودی button : یک دکمه یا button از اجزای بسیار مهم و کلیدی در هر فرمی است. تمام اطلاعاتی که از کاربر دریافت می شود توسط یک دکمه کنترل می شوند. برای ساخت دکمه می توانید مقدار خاصیت type را برابر button قرار دهید.
<button type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>

یکی از ویژگی های مهم این ورودی خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.

  • ورودی number : برای آنکه یک ورودی تنها اعداد را دریافت کند در زبان های برنامه نویسی دیگر باید چند کنترل مختلف توسط رویدادها روی کادرهای ورودی انجام دهید اما در HTML با وجود ورودی number این دردسر دیگر وجود نخواهد داشت. همچنین یکی از خاصیت های مهم این ورودی امکان ایجاد محدودیت در بین اعداد ورودی است، برای مثال می توان کاربر را مجبور کرد که اگر عددی را وارد می کند حتما باید از عددی کوچکتر و از عددی بزرگتر نباشد.
<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

ورودی های HTML در ورژن پایینتر از 5 محدود بودند اما در HTML5 این تعداد بسیار زیاد شده اند. اما شیوه کار کردن با آنها کاملا شبیه بقیه ورودی هاست. لیستی از ورودی های HTML5 را می توانید در زیر مشاهده کنید:

  1. color
  2. date
  3. datetime
  4. datetime-local
  5. email
  6. month
  7. number
  8. range
  9. search
  10. tel
  11. time
  12. url
  13. week

خاصیت های تگ input

شاید در طول سه جلسه قبلی در بعضی از مثال ها چندین خاصیت input را یاد گرفته باشید، اما به در این جلسه می خواهم مهمترین خاصیت های تگ input را به شما یاد بدهم. یکی از مهترین خاصیت های تگ input خاصیت type بود که برای تعیین نوع ورودی استفاده می شود. اما جدای از این خاصیت، خاصیت های مهم و تعیین کننده دیگری نیز وجود دارد:

خاصیت disabled: این خاصیت برای غیر فعال کردن یک ورودی استفاده می شود.

<input type="text" name="un" disabled/>

خاصیت maxlength: از این خاصیت برای محدود کردن تعداد کاراکترهای ورودی متنی استفاده می شود.

<input type="text" name="un" maxlength="5"/>

خاصیت readonly: احتمالا صفت فقط خواندنی را در ویندوز نیز دیده باشید، وقتی می خواهید محتوی فایلی قابل ویرایش و تغییر نباشد از این خاصیت استفاده می شود.

<input type="text" name="un" readonly/>

خاصیت size: از این خاصیت برای تعیین اندازه یک ورودی استفاده می شود.

<input type="text" name="un" size="20"/>

خاصیت value: برای مقداردهی به یک ورودی پیش از اجرای آن می توانید از این خاصیت استفاده کنید:

<input type="text" name="un" value="Arastoo"/>

این پنج خاصیت در HTML پایینتر از 5 استفاده می شد، اما با ظهور HTML5 چند خاصیت دیگر نیز به ورودی ها داده شده که در پایین هرکدام از آنها را بررسی می کنیم:

خاصیت max: برای تعیین بیشتر مقدار ورودی استفاده می شود. مثل ورودی های عددی

<input type="number" name="nu" max="40">

خاصیت min: برای تعیین کمترین مقدار ورودی استفاده می شود. مثل ورودی های عددی

<input type="number" name="nu" max="40">

خاصیت pattern: برای آنکه یک مقدار اصلی برای ورودی قرار دهید از این خاصیت استفاده می کنید، در صورتی که مقدار ورودی برابر این خاصیت نباشد فرم خطا می دهد.

<input type="text" name="un" pattern="itpro">

خاصیت required: اگر بخواهید پر کردن یک ورودی را اجباری کنید باید از این خاصیت استفاده کنید.

<input type="text" required>

خاصیت step: وقتی هر واحدی از یک عدد را افزایش می دهیم به صورت تک تک اضافه می شود، توسط این خاصیت می توان این مقدار را تغییر دهید، مثلا 10 10 اعداد افزایش پیدا کنند.

<htm>

<form>

<input type="number" name="points" min="0" max="100" step="10" value="30">

</form>

مدیریت بهتر لایه های وب

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

به همین خاطر باید چند قانون ساده را بپذیریم. برای اینکار کافی است که زمانی می خواهیم یک صفحه وب را طراحی کنیم در طراحی قسمت های وبسایت مطمئن باشیم. مثلا برای ساخت قسمت سربرگ محتوای مورد نظر را درون تگ <header> قرار دهید. و یا در طراحی منو ها کافی است تا تگ های ul , li را درون تگ <nav> قرار دهید. این کار خواندن دستورات را بسیار ساده تر می کند. یک مثال کامل از این دستورات را برای تان آماده کرده ام تا بتوانید بهتر متوجه شوید.

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
			
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

حرف پایانی: تا حالا در 22 قسمت آموزش سعی کرده ام به طور تقریبا کامل HTML را آموزش دهم. امیدوارم که موفق بوده باشم.


نظرات