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>
پیش از آنکه بخواهم اجزای این کدها را توضیح دهم باید به یکسری نکات توجه کنیم!
خب بعد از این توضیحات حالا باید کد هایی که بالا نوشتم رو واستون توضیح بدم :
این تگ ها شاید اساسی ترین و مهمترین تگ هاییست که در اکثر سایت ها مورد استفاده قرار می گیرد.
شاید تا کنون با شیوه تگ ها در اچ تی ام ال آشنا شده باشید. در اچ تی ام ال برای نوشتن تگ ها باید چند نکته را رعایت کنید.
مثال:
<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
برای نوشتن کدهای اچ تی ام ال شما مجبور به استفاده از برنامه های پیچیده و سنگین نیستید هر چند که اگر از آنها استفاده کنید سهولت و آسانی در نوشتن به همراه دارد اما در همین اوایل کار که با پروژههای سنگینی طرف نیستیم می توانیم از خود نوت پد در ویندوز استفاده کنیم.
اکثر برنامه های ویرایشگر متن این امکان را دارند که بتوانند سند اچ تی ام ال بسازند، البته برنامه ورد برای این کار مناسب نیست، چون در هنگام ذخیره کردن کدهایی دیگر را به فایل اضافه می کند. پس بهترین ویرایشگر متن همان نوت پد برای حال حاضر شما خواهد بود! اما اگر واقعا هم میخواهید که درگیر قضایا شوید و از همین حالا حرفه ای بودن را تجربه کنید من ویرایشگر شرکت ادوبی یعنی براکت را پیشنهاد می کنم.برای ساخت فایل اچ تی ام ال نیاز به کار بسیار پیچیده ای نیست تنها کارهای زیر را دنبال کنید:
فایل را مشاهده کنید و به خودتان ببالید زیرا که شما هم اکنون یکی از مهمترین قسمت های آموزش را فرا گرفتید.
دو یادآوری کوچک
خب در جلسه قبل عرض کردم که اچ تی ام ال شامل یک سری تگ ها می باشد که عموما دارای دو قسمت آغاز و پایان است.به این کد دقت کنید:
<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 href="www.ITPRO.ir">ITPRO</a>
<Img src="c:/icon.png">
توجه کنید این درس تنها برای یادگیری کدنویسی مورد نظر نوشته شد در مورد هر یک از تگ هایی که بحث شده است در درسهای آینده به طور مفصل آموزش داده می شود.
1- ساختار کلی (نه همیشه) یک تگ در اچ تی ام ال به صورت زیر می باشد:
<tagname>Content</tagname>
2- تگهای اچ تی ام ال می توانند تو در تو باشند یعنی برای مثال شما می خواهید متنی را به صورت پاراگراف و عنوان به نمایش در بیاورید خب برای اینکار ابتدا یکی از تگ ها را نوشته سپس تگ بعدی به عنوان محتوای تگ اول شناسایی شده و در بخش محتوای تگ دوم متن را بنویسید.یک قانون کلی تگی که اول از همه باز می شود در آخر از همه نیز بسته خواهد شد. یک مثال ساده:
<h1> <p> This text is title also paragraph </p> </h1>
توجه داشته باشید که تگ عنوان اول باز شده است و در انتهای همه بسته شده است. به این نوع کدنویسی در اچ تی ام ال تودرتو یا Nested می گویند.
3- تگ های خالی اچ تی ام ال به تگ هایی گفته می شود که علاوه بر اینکه دارای تگ پایانی نیستند برای درست کار کردن احتیاج خاصی به صفتی هم ندارند، مثل تگ <br> ! این تگ برای آن استفاده می شود که یک خط شکسته شود. در اچ تی ام ال برای شکستن خط یا به اصطلاح اینتر کردن باید از این تگ استفاده کنید، زدن دکمه اینتر هیچ کاربردی ندارد. حتی زدن دکمه Space بیش از یک کاراکتر نیز هیچ فایده ای ندارد!
4- نکته ی پایانی، اچ تی ام ال یک زبان حساس به بزرگی یا کوچکی کلمات نیست یعنی نوشتن <P> و <p> با هم برابر هستند و هیچ تفاوتی ندارند، اما من نمیدونم چرا هیچوقت از کلمات بزرگ استفاده نمی کنم پیشنهاد می کنم شما هم استفاده نکنید!
<tagname tagattributes="Value">
مثال:
<a href="https://tosinso.com/"></a>
چند صفت مهم و کاربردی در اچ تی ام ال برای تگ ها
<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>
<a href="https://tosinso.com/">This is a link</a>
در این مثلا متنی با عنوان "This is a link" ظاهر می شود که با کلیک روی آن وارد سایت Itpro.ir می شود.
<img src="c:/1.jpg" width="104" height="142" alt="ITPRO">
در این کد یک تصویر واقع در آدرس c: با نام 1.jpg ظاهر می شود اگر بنا به هر دلیلی این تصویر نمایش داده نشود متن ITPRO نمایش داده می شود.
چند نکته مهم در این بخش
<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> <body> ITPRO HTML </body> </html>
و
<html> <body> ITPRO <br> HTML </body> </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 را ذکر نمایید. در زیر به چند نمونه مهم اشاره می شود:
<body style="background-color:blue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
background-color: یکی از property های مهم در سی اس اس می باشد که مقدار آن در این قسمت برابر آبی می باشد.
<h1 style="color:blue;">This is a heading</h1>
Color نیز از آن دسته استایلهای مهم در سی اس اس می باشد. که مقدار آن در این خط کد برابر آبی است.
<h1 style="font-family:verdana;">This is a heading</h1>
توسط استایل font-family می شود فونت مربوط به یک متن را تغییر دهید، توجه داشته باشید توسط این کد تنها در صورتی فونت مربوطه نمایش داده می شود که آن فونت روی سیستم مشاهده کننده نصب شده باشد.
<h1 style="font-size:300%;">This is a heading</h1>
برای تغییر اندازه متون می توانید از استایل font-size استفاده کنید. البته مقدار آن را هم می توان با درصد هم به شکل عدد ساده نوشت.
<h1 style="text-align:center;">Centered Heading</h1>
با استایل text-align به سادگی می توانید متن را در بین قسمت های راست، چپ و وسط صفحه به نمایش بگذارید. مقدار center به معنای مرکز یا وسط می باشد.
چند نکته مهم در Style در html
فرمت متون در HTML
حالت های نمایشی متون متفاوت هستند، شما می توانید متنی را برجسته نشان دهید، زیرخط دار، و... . در اچ تی ام ال این کار به سادگی انجام پذیر هستش کافیه که لیست تگ های زیر رو مطالعه کنید و متن مورد نظرتون رو بین یکی از این تگ ها قرار بدید:
نکته: بعضی از تگ ها دارای یک عملکرد هستند مثل دو تگ اول در لیست، کاربرد این طور تگ ها برای مرورگر ها و موتورهای جستجوگر مهم تر هستند. برای مثال اگر صرفا جهت نمایش می خواهید متنی را نمایش بدهید از b استفاده کنید، اما اگر متن شما حائز اهمیت است از strong این شرایط برای em و i نیز به همین شکل می باشد.
احتمالا تا حالا گفتاورد یا نقل قول را شنیده اید، برای نقل قول کردن در یک فایل اچ تی ام ال می توانید از دو تگ <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>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<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"> -->
در اچ تی ام ال برای تعیین رنگ هر چیزی شما چند راه مختلف پیش رو دارید:
استفاده از نام رنگ: خب در واقع این روشی است که کمتر مورد استفاده طراحان وب استفاده می شود به خاطر اینکه تعداد گزینه های انتخاب رنگ محدود هستند. برای انتخاب رنگ ها در این صورت شما تنها باید نام انگلیسی مربوط به رنگ را بلد باشید. مثلا: Red, Blue, Green و... (استفاده از این روش پیشنهاد نمی شود).
استفاده از کدهای RGB: اگر تا به حال در بچگی با گواش و قلمو و... کار کرده باشید حتما شده که چند رنگ را مخلوط کنید (عمدی یا غیر عمدی ) گاهی ترکیبات قشنگی در می آمدند و گاهی هم کمی .... در اچ تی ام ال شما می توانید سه رنگ Red ، Green و Blue را با هم ترکیب کنید و از مخلوط آنها رنگ هایی را بدست آورید. مشکلی که در حالت قبلی وجود داشت تعداد کم رنگ ها بود ولی با این روش که در ادامه به شما خواهم گفت می توانید 16.581.375 رنگ را داشته باشید. کافیست از روش زیر استفاده کنید:
اگر به این اعداد توجه کنید در میابید که اعداد سمت چپ مربوط به حرف 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 آبی
البته اشتباه نکنید این قسمت صرفا آموزش کلی از سی اس اس می باشد نه خود سی اس اس، چون سی اس اس به صورت کلی مبحثی طولانی تر حتی از خود اچ تی ام ال می باشد. خب در این قسمت می خواهم شما را کمی با سی اس اس و رابطه آن با اچ تی ام ال آشنا کنم.سی اس اس مخفف کلمات Cascading Style Sheets به معنی تحت و الفظی آن شیوه نامه آبشاری می باشد.
خب توسط یک شیوه نامه می توانید یک صفحه اچ تی ام ال را زیبا تر کنید، در واقع با سی اس اس می توانید به اجزا و المنت های اچ تی ام ال استایل بدهید. مثلا تگ های H1 را به رنگ آبی در بیاورید. با استفاده از سی اس اس می توانید از کدهای اضافه پرهیز کنید. مثلا شما فقط یکبار احتیاج دارید که یک استایل را به تگ خاصی بدهید نه با هر بار استفاده از آن تگ. استفاده از سی اس اس به سه صورت در وب امکان پذیر می باشد:
در روش اول برای هر یک از تگ ها می توان به صورت جداگانه استایل نوشت، این صورت برای زمانی مناسب است که بخواهید برای یک تگ خاص فقط استایل نوشت. در واقع در این شیوه شما باید از صفت 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> استفاده کردم اما فقط یک بار برای این تگ استایل نوشتم.
زمانی که شما در حال ساخت یک پروژه بزرگ هستید نمی تواند که کدهای سی اس اس، جاوا اسکریپت و اچ تی ام ال را همگی در یک فایل قرار دهید. منظورم اینست که روش دوم تنها برای زمانی استفاده می شود که حجم کدها کم باشد به این دلیل که تعداد خط کدها هر چقدر کمتر باشد ویرایش آنها راحت تر خواهد بود.در روش سوم فایل سی اس اس از فایل اچ تی ام ال به صورت مستقل از هم هستند و فقط با یک کد به همدیگر متصل می شوند. برای این کار یک فایل در همان مسیر فایل اچ تی ام ال با نام 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 مشخص کننده نوع باز شدن یک لینک می باشد. مقادیری که این صفت می تواند دریافت کند در زیر آمده است:
یک مثال کلی
<a href="https://tosinso.com//" target="_blank">Visit ITPro!</a>
آدرس آی تی پرو را در پنجره جدید باز می کند.
لینک ها در سی اس اس
لینک ها در سی اس اس دارای چهار حالت مختلف هستند، یعنی می توان یک متن که دارای لینک است در چهار حالت مختلف استایل دهی شوند:
حال چگونه می توانیم از این امکانات استفاده کنیم!؟
<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=""/>
<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>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 می باشد که دارای چهار مقدار است.
برای استفاده از این استایل ها کافی است که دستورات زیر استفاده کنید.
<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 شامل متاتگ ها می باشد. (تگ هایی که درباره تگ های دیگر هستند).
تگ عنوان: اولین و شاید مهمترین تگ در این قسمت تگ عنوان یا 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="https://tosinso.com//" target="_blank">
حال اگر در هر مکانی خاصیت href را خالی بگذارید به لینک پایه مراجعه می کند. مثال زیر را اجرا کنید.
<!Doctype HTML> <html> <head> <title>Test</title> <base href="https://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>
<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 برای آنکه امکان انتخاب تنها یک گزینه وجود داشته باشد باید نام گزینه ها را یکسان قرار بدید. البته در صورت استفاده نکردن از این خاصیت هیچ مشکلی وجود نخواهد داشت.
<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 ارسال می شود.
گروه بندی 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 ساخته می شوند. برای این اجزا کافی است که تگ ها و المنت های آن را استفاده کنید.
<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 name="message" rows="15" cols="50">
متنی که به صورت پیش فرض وارد می شود.
</textarea>
در دستور بالا، تعداد 15 ردیف و 50 ستون به صورت پیش فرض قرار گرفته است. متنی که داخل تگ آغازین و پایانی وجود دارد به صورت پیش فرض درون کادر متنی قرار می گیرد. امکان تغییر متن و اندازه کادر به کاربر داده شده است.
<button type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>
یکی از ویژگی های مهم این تگ خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.
<datalist>
<keygen>
<output>
<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 می باشد.
<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 بود که برای وارد کردن داده های متنی در یک سطر استفاده می شد.
<!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>
<form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>
<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 برای آنکه امکان انتخاب تنها یک گزینه وجود داشته باشد باید نام گزینه ها را یکسان قرار بدید. البته در صورت استفاده نکردن از این خاصیت هیچ مشکلی وجود نخواهد داشت.
<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 در تعداد انتخاب است. گزینه اول امکان انتخاب چندین گزینه را می دهد اما گزینه دوم تنها یکی از بین گزینه ها را می توانید انتخاب کنید.
<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 type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>
یکی از ویژگی های مهم این ورودی خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>
ورودی های HTML در ورژن پایینتر از 5 محدود بودند اما در HTML5 این تعداد بسیار زیاد شده اند. اما شیوه کار کردن با آنها کاملا شبیه بقیه ورودی هاست. لیستی از ورودی های HTML5 را می توانید در زیر مشاهده کنید:
شاید در طول سه جلسه قبلی در بعضی از مثال ها چندین خاصیت 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 را آموزش دهم. امیدوارم که موفق بوده باشم.