كارگاه آموزشي توسعه وب

HTML -بخش اول

عباس نادري: ارائهانجمن علمي دانشجوييمهندسي كامپيوتر

شهيد بهشتي دانشگاه 1نسخه

عناوين مطرحيوب چيست؟•

–Web 2HTTPپروتكل –كاوشگر وب–HTTPSپروتكل –FTPپروتكل –پروتكل هاي ديگر وب–

•HTML چيست؟

وب چيست؟

وب چيست؟World( جهاني گسترده تور• Wide Web(از هم به متصل هاي ابرمتن مجموعه

.است اينترنت طريقWeb( وب كاوشگر توسط )ابرمتن( وب اسناد• Browser( هستند مطالعه قابل.HyperText يا HTML وب، سند استانداردترين• Markup Language )زبان

.است داده تشكيل را وب تمام تقريبا )ابرمتني مشخص.شد ابداع 1980 سال در وب•.هستند متصل يكديگر به )Hyperlink( ابراتصال طريق از وب اسناد•World طرف از وب استانداردهاي• Wide Web Consortium (W3C) و

Internet Engineering Task Force (IETF) شوند مي وضع. وضع را خود استانداردهاي و كند نمي پيروي استانداردها از وب عرصه در مايكروسافت•

.است نموده

Web 2

.بود آن به دسترسي سادگي و ظاهري شكل بودن استاندارد وب اصلي خاصيت•.گرفت شكل 2004 سال در 2 وب وب، پويايي عدم و كمبودها دليل به•

انقالبي تجاري درصنعت كامپيوتر است كه به وسيله 2وب “”.اتكا به اينترنت به عنوان سكوي تجارت شكل گرفته است

افزارها نرم كه معناست بدين 2 وب بلكه ندارد، وب با تفاوتي 2 وب تكنولوژي واقع در•.يابند توسعه وب وسيله به و كنند اتكا وب روي بر همگي مختلف كاربردهاي و

گرفت رونق صفحات سازي پويا هدف با خاص هاي تكنولوژي از استفاده 2 وب توسعه با•.شد باز وب روي به جديدي دريچه و

.دهند مي ارائه وب براي و وب روي بر را خود محصوالت و خدمات شركتها ،2 وب در•.آمدند پديد وب تحت هاي عامل سيستم كه رفت پيش جايي تا 2 وب•

HTTPپروتكل

HyperText يا HTTP پروتكل وب اصلي پروتكل• Transfer Protocol است.•HTTP پاسخي-تقاضا پروتكل يك )Request-Responce( اين در .است

مي پاسخ را وي درخواست سرور و فرستاده سرور به درخواست يك كالينت، پروتكل.گردد مي منقطع طرفين مابين اتصال تراكنش، اين از پس .گويد

•HTTP وضعيت بدون پروتكل يك )Stateless( ،از سرور كه معني بدين است .كند مي دريافت را وي تقاضاي تنها و ندارد خبري كالينت فعلي وضعيت

.است GET و POST تقاضا، انوع ترين معمول .داراست مختلفي انواع تقاضا• و )تصاوير مانند( تكميلي هاي فايل ،HTML اطالعات، تواند مي تقاضا به سرور پاسخ•

.باشد داده ديگر انواع يا.شود مي فرستاده كاربر براي وب صفحه يك باشد، HTML سرور پاسخ كه صورتي در•

كاوشگر وب

Web يا( وب كاوشگر• Browser( وب هاي پروتكل تحت تواند مي كه افزاريست نرم .كند كار اينترنت با

كند مي ارسال سرور براي HTTP درخواستهاي قالب در را كاربر خواسته وب كاوشگر•.دهد مي نمايش را سرور نتايج و

تمام دريافت توانايي ،HTML اسناد نمايش و بندي قالب قابليت بر عالوه وب كاوشگر•.داراست خودكار صورت به را اند شده استفاده HTML سند در كه تكميلي فايلهاي

نيز ديگري بيشمار هاي قابليت باال، اصلي هاي توانايي بر عالوه وب امروزه كاوشگرهاي•.هستند دارا

Internet توان مي را معروف كاوشگرهاي• Explorer از نيمي از كه مايكروسافت حرفه كاوشگر قدرتمندترين كه موزيال Firefox كند، نمي تبعيت وب استانداردهاي

Google اخيرا و شود مي دانسته اي Chrome شده طراحي 2 وب اهداف براي كه .دانست است،

HTTPSپروتكل

امنيتي احتياجات رو اين از .ميكند كار مستقيم و متن تمام صورت به HTTP پروتكل• شوند، انجام HTTP از استفاده با كه بانكي تعامالت مثال براي .سازد نمي برآورده را

.بود خواهند همگان براي ديد قابل كامالSecure يا HTTPS پروتكل كمبودها، اين جبران براي• HTTP اين .شد ابداع

SSL ) Secure امنيتي پروتكل از استفاده با پروتكل Sockets Layer ( يا و TLS ) Transport Layer Security( سازد مي امن را كالينت و سرور تبادالت.

.گردد مي استفاده است احتياج امنيت به كه هايي وب تمامي در پروتكل اين از ديجيتال گواهينامه يك با را خود سرور كه است الزم ،HTTPS درست كاركرد براي•

)CertificateDigital( الزم ديجيتال، گواهينامه يك تهيه براي .كند هويت اهراز .پرداخت سال هر براي تومان هزار 100 معادل اي هزينه گواهي اعطاي مراكز به تا است

نقاط پروتكل اين ،HTTPS هاي سازي پياده اكثر بودن قديمي و باال هزينه دليل به•.است گذارده باز وب براي را بسياري امنيتي

FTPپروتكل

•FTP يا File Transfer Protocol تبادل براي كه قديميست نسبتا استاندارد يك سادگي به HTTP از استفاده با توان مي را فايل امروزه .شود مي استفاده وب در فايل

FTP كرد منتقل. كه است، وب سرورهاي روي بر موجود هاي داده به دسترسي ديگري راه FTP واقع در•

:شود مي استفاده كاربرد دو در معموالاينترنت از بزرگ بسيار فايلهاي دريافت–آن سازنده يا نگهدارنده توسط وب روي بر اسناد و فايلها قراردادن–

نمود داراي سند هيچ است، شده ايجاد فايل تعامل براي فقط FTP كه آنجايي از•.ندارد )HTTP براي HTML مانند( ظاهري

پروتكل هاي ديگر وب

براي آنها از زيادي بسيار تعداد كه دارند وجود وب در ديگري فراوان هاي پروتكل• افزار نرم پروتكل، هر با كاركرد براي .روند مي كار به تصويري و صوتي هاي داده تبادل

.است احتياج پروتكل آن مخصوص تقريبا ديگر هاي پروتكل به نياز آن، جديد هاي تكنولوژي و 2 وب آمدن كار روي با•

و داده دست از را خود متعدد كاربردهاي تقريبا آنها دليل همين به .است شده مرتفع.اند شده فراموش

HTML چيست؟

HTML چيست؟ برنامه و است اطالعات ارائه قالب يك واقع در زبان اين .وب صفحات استاندارد زبان•

.ندارد وجود آن در خاصي نويسي .داراست را قالبي هر با اي داده هرگونه نمايش توانايي تقريبا HTML امروزه• و متن تصوير، Word و PDF مانند كه دانست ساده خيلي فرمت يك آنرا توان مي•

.دهد مي نمايش يكديگر كنار در را ديگر هاي داده•HTML برچسبي زبان يك )Tag( رو اين از .است LanguageMarkup دانسته

.است برچسب محدوديت بدون برچسبي زبان يك كه XML مانند شود، مي.هستند خاصي داده نمايانگر هركدام و محدودند HTML هاي برچسب• پايان و گيرد، مي قرار كوچكتر و بزرگتر عالمت داخل در برچسب شروع عنوان•

:است / يك تفاوت با فقط آن، شروع همانند برچسب<tagName>tagdata here, as mush as you want </tagName>

برچسب چيست؟

3 برچسب هر .گيرد مي قرار ها برچسب داخل در برچسبي، سند يك اطالعات تمام•:دارد بخش

)آن نوع كننده معين( برچسب عنوان–)آن رفتار و ويژگيها كننده معين( برچسب صفات–)دهد مي ارائه برچسب كه اي داده كننده معين( برچسب داده–

معني بدين گيرند، قرار يكديگر داخل در درختي ساختار يك در توانند مي ها برچسب•.باشد ديگر برچسبهاي شامل خود تواند مي برچسب يك داده كه

:برچسب صفات مقدار و صفات همراه به تو در تو برچسب براي مثال•<tag attribute1=“attributeValue” attribute2=“attributeValue2”>

>innerTag<//> anotherInnerTag<> some data innerTag<</tag>

بسته خود داخل در باشد، نداشته داده كه برچسبي است، مشخص مثال در كه همانطور•.شود مي

برچسب ريشه

كه سازد مي درختي ساختار يك خود هاي برچسب با ،XML فايل يك كه همانگونه• <html> برچسب هم HTML فايلهاي ريشه ،)ريشه برچسب( دارد ريشه يك تنها.گيرد مي قرار برچسب اين داخل در وب صفحه محتويات تمام .است

HTML فايلهاي براي نام فضاي و نوع يك توانيد مي XML فايلهاي همانند :نكته• نوع .شود رعايت است بهتر و شده تبديل استاندارد يك به اخيرا كار اين .كنيد تعريف

:استفاده قابل انواع .گيرد مي قرار فايل اول خط درHTML 4.01 Strict )اي ارائه غير(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

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

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

Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

)ادامه(برچسب ريشه

XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 (strict)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

سرصفحه و بدنه

بدنه و )Head( سرصفحه است، شده تشكيل اصلي قسمت دو از HTML سند هر•)Body(. گرفته قرار سرصفحه در ندارند، ظاهري نمايش كه صفحه به مربوط اطالعات :مثال عنوان به .گيرند مي جاي بدنه قسمت در صفحه نمايشي اطالعات و

<html><head>

<title> Sample Webpage </title></head><body>

<p> hello there this is a paragraph </p><p> hello again another paragraph with <b> bold </b> text! </p>

</body></html>

فايل متني

متني فايل مورد در نكاتي دانستن است، متني فايل يك HTML كه آنجايي از•:رسد مي نظر به سودمند

:گردند مي ذخيره نوع سه متني هاي فايل١. نوع اين .دارد حالت 256 و گيرد مي بايت 1 كاراكتر هر مدل اين در :ASCII بندي كاراكتر١.

.است انگليسي غير زبانهاي نمايش توانايي فاقد بندي كاراكتر اساس بر و گيرد مي بايت 2 متني فايل در كاراكتر هر مدل اين در : ويندوز بندي كاراكتر٢.

.شود مي تبديل خاصي شكل به ويندوز استاندارد به نمايش تواناي و گيرد مي بايت 2 كاراكتر هر مدل، اين در :Unicode بندي كاراكتر٣.

زبان كه گردد مي تقسيم متفاوتي استانداردهاي به خود يونيكد .دارد وجود زبانها اكثر.است شده پشتيباني UTF-8 آن، اصلي استاندارد در فارسي

13 كاراكتر يك ويندوز در كند، مي تفاوت لينوكس و ويندوز در خط انتهاي كاراكتر٢.)Enter( در ولي است خط پايان كننده معين 10 شماره با كمكي كاراكتر يك و

و يكسره ويندوز، در لينوكس متني فايلهاي رو ازاين .ندارد وجود 10 كاراكتر لينوكس.رسند مي نظر به بندي خط بدون

HTMLنكات

.شوند مي Space يك خروجي در پيوسته، )whitespace( خالي فضاهاي تمامي١.

> هاي عالمت كه آنجايي از٢. > براي دارند، كاربرد ها برچسب كردن معين براي &:شود انجام زير تبديل بايد متن در آنها كردن وارد

.١< : &lt;

.٢> : &gt;

.٣& : &amp;

نرم جوييد، بهره بسياري افزارهاي نرم از توانيد مي HTML اسناد توليد براي٣.:هستند آنها معروفترين از زير افزارهاي

.١Microsoft Frontpage

.٢Adobe Dreamweaver

.٣ZendStudio for Eclipse

HTMLبرچسبهاي

برچسب هاي مجاز

•HTML هر .است معمول برچسب 100 حدود و )امروزه( مجاز برچسب 75 حدود داراي در .دهند مي ارائه را خاصي اطالعات و دارند خاصي كاربرد ها، برچسب اين از كدام.كرد خواهيم بررسي را ها برچسب اين ترين معمول از تعدادي بعدي بخش

غير آنها از استفاده( اند شده منقرض زمان گذر با HTML برچسب 25 حدود• آمدن وجود به با كه هستند بندي قالب هاي برچسب آنها بيشتر )است شده استاندارد

CSS شود مي دانسته ناصحيح آنها از استفاده.•HTML توضيحات از ديگري، اسكريپتينگ و نويسي برنامه زبان هر مانند

)Comments( است دشوار كمي آن قالب متاسفانه اما كند، مي پشتيباني:<!-- this is a comment! -->

حجم زيرا محدود، بسيار موارد در مگر شود نمي استفاده توضيحات از HTML در•.نمود كمينه آنرا بايد ممكن جاي تا و است مهم بسيار صفحات

<html>برچسب

•HTML نيست حساس ها برچسب نام در حروف كوچكي و بزرگي به.HTML :برچسب نام

HTML سند يك كردن مشخص :وظيفهخير :محتوي بدون:استاندارد صفات

اختياري•–Dir: مجاز مقادير )بالعكس يا راست به چپ( سند جهت كننده مشخص “rtl” و “ltr”

rtl :فرض پيش مقدار–Lang: مانند )زبان حرفي 2 مخفف اساس بر( سند زبان كننده مشخص “fa” يا “en”

<html>مثال

<html dir='rtl' lang='fa'><head></head><body>

خير به شما روز سالم</body></html>

<html><head></head><body>Hello, World! </body></html>

<head>برچسب

Head :برچسب نامسند يك به راجع اطالعات محدوده كردن مشخص :وظيفهخير :محتوي بدونندارد :استاندارد صفاتHtml داخل :قرارگيري محل

جاي يا و body در توانند مي گيرند، مي قرار head در كه هايي برچسب تمام :نكته•.شوند استفاده head داخل كه است آن استاندارد ولي شوند، استفاده نيز ديگر

<title>برچسب

Title :برچسب نامصفحه عنوان كردن مشخص :وظيفهخير :محتوي بدونندارد :استاندارد صفاتHead داخل :قرارگيري محل

.شود مي داده نمايش كاوشگر پنجره باالي در صفحه عنوان•

<title>مثال

<html lang='fa'><head>

<title> صفحه عنوان </title></head><body>

خير به شما روز سالم</body></html>

<p>برچسب

P :برچسب نامپاراگراف تعريف :وظيفهخير :محتوي بدون :استاندارد صفات

–Align: مجاز مقادير پاراگراف، داخل متن كردن مرتب:•Left پيشفرض( چپ به(•Rightراست به•Center مركز به•Justify تراز هم

.گردد مي جابجا كردن مرتب اين در راست و چپ جاي RTL هاي سند براي كه كنيد دقتغيره و Body داخل :قرارگيري محل

<br>برچسب

Br :برچسب نام)بعدي خط به رفتن( خط انتهاي كردن مشخص :وظيفهبله :محتوي بدونندارد :استاندارد صفاتجا همه :قرارگيري محل

<img>برچسب

Img :برچسب نامتصوير تعريف :وظيفهبله :محتوي بدون :استاندارد صفات

–src: تصويري فايل آدرس–Alt: نمايش آن جاي در متن اين نشود، اگر يا شود، بار تصوير كه هنگامي تا( جايگزين متن

)شود مي داده–Align: استفاده قابل مقادير top, bottom, middle, left , right–Width , Height: تصوير خود اندازه نشود ذكر كه صورتي در تصوير، ابعاد–Title: كمكي راهنماي متن )Tooltip(–Usemap: تصوير به بندي منطقه نقشه يك تخصيصي جهت( اي حرفه كاربرد(

از ميكنند، پشتيباني Title صفت از HTML هاي برچسب تمام تقريبا كه است ذكر به الزم.پرهيزيم مي آن تكرار از رو اين

غيره و Body داخل :قرارگيري محل

<img>مثال

<html><head>

<title> /<صفحه عنوان title></head><body><p> </br> است، اول پاراگراف اين خير، به شما روز سالم

.دارد هم تصوير<img src='image1.jpg' width='200'align='middle'/></p><p> دوم پاراگراف هم اين </p><img src='image1.jpg' width='200'height='200' /></body></html>

<a>برچسب

A :برچسب نامجاري صفحه از قسمتي يا ديگر صفحات به اتصال لنگرگاه، تعريف :وظيفهاست اتصال عنوان محتوي خير، :محتوي بدون :استاندارد صفات

–href: آدرس )URL( لنگرگاه يا اتصال–Name: ارجاع براي لنگرگاه نام تعريف–Target: شود باز كجا در جديد، صفحه:

•_blank : شود مي باز جديد پنجره( جديد صفحه(•_parent : است كرده باز را جاري صفحه كه اي صفحه داخل در•_self : )صفحه همين در )پيشفرضشده بندي فريم صفحات براي :فريم نام•

غيره و Body داخل :قرارگيري محل تعريف صفحه اين در لنگرگاه يك يا كند، برقرار ديگر صفحه يك به اتصالي تواند مي برچسب اين

)چيست؟ لنگرگاه( .كند

<a>مثال <html><body>

<p> This is a sample paragraph. Click<a href='http://www.google.com'>Here</a>to visit Google website.<br/><a href='http://hackersite.com/hack.html'

title='Click me to die!'>Yahoo!</a><br/><br/><a href='http://somesite.com/somepage.html#anchor'>

<img src='img.gif' /></a>

</body></html>

<b>برچسب

B :برچسب نامBold متن تعريف :وظيفهخير :محتوي بدونندارد :استاندارد صفاتغيره و Body داخل :قرارگيري محل

روند مي كار به متن بندي قالب براي نيز... و small و big و i مانند ديگري هاي برچسب.است شده جايگزين css با آنها كاربرد كه

<sup>,<sub>برچسب

,Sup :برچسب نام Subمتن زير/رو تعريف :وظيفهخير :محتوي بدونندارد :استاندارد صفاتغيره و Body داخل :قرارگيري محل

روند مي كار به متن بندي قالب براي نيز... و small و big و i مانند ديگري هاي برچسب.است شده جايگزين css با آنها كاربرد كه

<hr>برچسب

Hr :برچسب نامHorizontal( افقي كننده جدا خط تعريف :وظيفه Line(بله :محتوي بدونندارد :استاندارد صفاتغيره و Body داخل :قرارگيري محل

نيز hr رود، مي بعدي خط ابتداي به و كند مي تمام را خط يك كه br برچسب مانند به خط ابتداي به و كند مي رسم كامل افقي نازك خط يك بعدي خط در كرده، خالي خطي.رود مي بعدي

<sub>,<sup>مثال <html><body>

Some text with^supertext.<hr/>Some more text with_subtext.

</body></html>

<ol>,<ul>برچسب

OL,UL :برچسب نامOrdered( مرتب ليست تعريف :وظيفه List( نامرتب ليست و )Unordered List(خير :محتوي بدونندارد :استاندارد صفاتغيره و Body داخل :قرارگيري محل

با سپس .كنند مي مشخص را اي گلوله يا و عددي ليست يك محدوده برچسب دو اين.افزود عنصر ليست، داخل در توان مي li برچسب از استفاده

استفاده ديگر هاي برچسب از ليست، محدوده هاي برچسب داخل در كه صورتي در :نكته استاندارد از ولي داد خواهند نمايش درستي به آنرا كاوشگرها اكثر ،)li از خارج( كنيد.ايد شده خارج

<li>برچسب

LI :برچسب نامList( ليست عنصر تعريف :وظيفه Item(خير :محتوي بدونندارد :استاندارد صفاتUL و OL داخل :قرارگيري محل

يك اي گلوله هاي ليست در و گيرد مي شماره يك مرتب ليستهاي در ليست عنصر هر.شوند استفاده تو در تو توانند مي ها ليست .گيرد مي قرار آن ابتداي در گلوله

مثال ليست ها<html><body>

<ol><li> /<اول عنصر li><li> /<دوم عنصر li><li> /<سوم عنصر li></ol>

<ul><li> List 1</li><li> List 2</li><li> List 3</li></ul>

</body></html>

برچسب هاي ناحيه بندي

,Span :برچسب نام Divسند در ناحيه يك تعريف :وظيفهخير :محتوي بدونندارد :استاندارد صفاتجا همه :قرارگيري محل

اين .شوند مي استفاده HTML هاي ناحيه كردن جدا براي بندي ناحيه هاي برچسب•.شوند مي استفاده تعداد به HTML اسناد در و بوده پركاربرد بسيار ها برچسب

ظاهر در تفاوتي و شود مي استفاده متن از قسمتي بندي ناحيه براي Span برچسب•.كند نمي ايجاد سند

انواع تواند مي و شود مي استفاده سند از قسمتي بندي ناحيه براي Div برچسب•.دارد نگه خود در را )Div حتي( ديگر هاي برچسب

.شد خواهد بحث ها برچسب اين به راجع بيشتر CSS بخش در•

جدول ها

HTMLجدول هاي

كاربردهاي آنها .هستند HTML هاي برچسب پركاربردترين و مهمترين از ها جدول•:جمله از دارند زيادي

شده بندي قالب اطالعات ارائه–صفحات بندي قالب–تصاوير بندي قالب–

.يابد مي پايان و شروع Table برچسب يك با كامل جدول يك• يك و )Body( مياني قسمت يك ،)Header( بااليي قسمت يك تواند مي جدول هر•

.باشد داشته )Footer( تحتاني قسمت.شوند مي مشخص جداگانه ناحيه هر در ها ستون و ها سطر•

<Table>برچسب

Table :برچسب نامكامل جدول يك تعريف :وظيفهخير :محتوي بدون :استاندارد صفات

–Border: صحيح عدد يك .جدول هاي خانه كادر اندازه–Cellpadding: آنها درون داده و جدول هاي خانه ديواره ميان فاصله–Cellspacing: جدول خانه دو ميان فاصله–Width: صفحه كل اندازه از درصد( درصد يا عدد به جدول عرض(

Body داخل :قرارگيري محل

<Tr>برچسب

Tr :برچسب نامTable( جدول سطر يك تعريف :وظيفه Row(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت:

•Top•Middle•Bottom•Baseline

Table,Tbody,Thead,Tfoot داخل :قرارگيري محل

<Td>برچسب

Td :برچسب نامTable( جدول سطر يك در داده خانه يك تعريف :وظيفه Data(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت–Colspan: ها خانه ستوني ادغام( بگيرد بر در را رديف چند خانه اين(–Rowspan: ها خانه رديفي ادغام(بگيرد بر در را ستون چند خانه اين(

tr,th داخل :قرارگيري محل

مثال جدول ساده<html><body>

<table border='1'><tr> <td>Cell 11</td>

<td>Cell 12</td></tr><tr>

<td>Cell 21</td><td>Cell 22</td>

</tr></table><hr/><table border='1'><tr> <td rowspan='2'>Cell 11 <br/>Cell 21</td>

<td>Cell 12</td></tr><tr>

<!-- Cell 21 ommited --><td>Cell 22</td>

</tr></table></body></html>

<Tbody>برچسب

Tbody :برچسب نامTable( جدول بدنه ناحيه تعريف :وظيفه Body(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت

Table داخل :قرارگيري محل

<Thead>برچسب

Thead :برچسب نامTable( جدول فوقاني ناحيه تعريف :وظيفه Header(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت

Table داخل :قرارگيري محل

<Tfoot>برچسب

Tfoot :برچسب نامTable( جدول تحتاني ناحيه تعريف :وظيفه Footer(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت

Table داخل :قرارگيري محل

<Th>برچسب

Th :برچسب نامTable ( جدول فوقاني ناحيه سطر در داده خانه يك تعريف :وظيفه Header Data(خير :محتوي بدون :استاندارد صفات

–Align: حالتي 4( خانه يك محتواي گيري جهت(–VAlign: خانه يك محتواي عمودي گيري جهت

Thead>Tr داخل :قرارگيري محل

مثال جدول ناحيه بندي شده<html><body>

<table border="1"><thead><tr>

<th>Month</th><th>Pays</th>

</tr></thead><tbody><tr><td>January</td><td>$100</td>

</tr><tr><td>February</td><td>$80</td>

</tr></tbody><tfoot><tr><td>Sum</td><td>$180</td>

</tr></tfoot></table></body></html>

جدول هاي قالب بندي

صفر آنها Border شود، مي استفاده صفحه بندي قالب براي جداول از كه هنگامي•.نباشند مشخص تا گيرد مي قرار

.داد مطلوبي و خوب بسيار نمود ها جدول به توان مي CSS از استفاده با•.شود مي صفحه نمايش شيوه شدن استاندارد باعث جداول با بندي قالب•.شوند مي تفسير مختلفي انواع به )DOCTYPE( سند نوع اساس بر ها جدول•

:است شده بندي قالب جداول از استفاده با bazitab.com سايت مثال براي•

فرم ها

HTMLفرم هاي

براي .كند مي كار پاسخ/تقاضا مبناي بر HTTP پروتكل شد، اشاره كه همانطوري• مي استفاده HTML فرمهاي از سرور، يك به وب صفحات از پويا تقاضاي يك ارسال.شود

يك )Submit( ارسال هنگام به .هستند HTML هاي برچسب نيز آن اجزاي و فرم•.نمايد مي ارسال سرور به را فرم درخواست محتواي اتوماتيك صورت به كاوشگر فرم،

.كرد ايجاد ايستا Get هاي درخواست توان مي اتصاالت، از استفاده با•:Post و Get :دارند معمول نوع دو ها درخواست•

هستند، ديدن قابل و شوند مي اضافه URL انتهاي در درخواست پارامترهاي Get نوع در–)كيلوبايت 1( دارند اندازه محدوديت دليل همين به

محدوديت و شوند مي فرستاده سرور به ديد غيرقابل درخواست پارامترهاي Post نوع در–)مگابايت 64( دارند كمتري

چيست؟ در Get و Post معايب و مزايا•http://hosting.pershe.com/viewticket.php?tid=109338&c=X4jQ3Ukc

Get )c پارامترهاي , tid( آدرس از پارامترها جداكنندهيكديگر از پارامترها جداكننده

<form>

حالت در( تواند مي فرم هر .گيرد مي قرار Form برچسب يك داخل HTML فرم يك• فشرده يا آن شدن كليك با كه باشد، داشته )Submit( ارسال كليد يك )معمول ارسال را فرم محتواي خودكار طور به كاوشگر فرم، جاي هر در Enter كليد شدن.كند مي مجدد بارگزاري را صفحه و كرده

:داراست اصلي پارامتر دو فرم يك•–Method: كند مي معين را ارسال شيوه )Get/Post(–Action: سازد مي مشخص را شوند مي ارسال آن به اطالعات كه مقصدي.

:كنيد توجه زير فرم به مثال براي•<form></form><form action=‘getData.php’ method=‘get’></form><form action=‘http://google.com/’ method=‘get’></form>

<input>

ورود فيلدهاي گيرند، مي قرار استفاده مورد فرم يك در كه فيلدهايي ترين معمول• صفت توسط فيلدها اين مختلف انواع .هستند )متن جعبه يا دكمه( اطالعات مستقيم

type شوند مي مشخص:–Button: اسكريپتي كاربردهاي براي( معمولي دكمه يك(–Checkbox: خوردن تيك قابل كوچك سفيد مربع يك–File: آپلود براي( فايل انتخاب فيلد يك(–Hidden: فراوان كاربردهاي داراي( ديدن غيرقابل متني فيلد يك(–Password: دهد مي نشان ستاره شكل به را خود محتواي كه متني فيلد يك–Radio: مجموعه يك از .كوچك دايره يك Radio شود انتخاب تواند مي يكي تنها–Text: معمولي متني فيلد–Submit: فرم ارسال دكمه–Reset: فرم فيلدهاي تمام محتواي كردن پاك دكمه

<input>مثال

<html><body>

<form method='get'><input type='checkbox'> I am a checkbox! <br/><input type='file'> <br/><input type='password' value='sth'> <br/><input type='radio'> Radio button! <br/><input type='text' value='Normal!'> <br/><input type='submit'> | <input type='button'></form></body></html>

<input> )ادامه(

صفات !شوند مي تامين input برچسب از استفاده با فرم يك فيلدهاي اكثر تقريبا•:زيرند شرح به input يك معمول

–Checked: كه صورتي در Radio يا Checkbox خوردن تيك تواند مي شود، استفاده ’Checked=‘Checked : كند مشخص آنرا نخوردن يا or else

–Disabled: شد خواهد تعامل غيرقابل و شده خاكستري شود، غيرفعال كه ورودي هر.–MaxLength: براي text يا password است تايپ قابل كاراكتر تعداد حداكثر–Readonly: فيلدهاي براي text يا password، كند مي تغيير غيرقابل را آنها–Size: كاراكتر تعداد حسب بر( كند مي مشخص را فيلد ظاهري اندازه(–Value: را مقداري محتواي مابقي، براي .سازد مي مشخص را آنها روي متن ها، دكمه براي

ارسال از پس محتوا اين .)است مشاهده قابل متني فيلدهاي در فقط كه( كند مي مشخص.شود مي ارسال سرور به فرم،

–Name: دهد مي تميز آن با را فيلد هر اطالعات سرور كه ناميست.

<input>مثال دوم

<html><body><form method='get'action='http://google.com/search'>

:شود جستجو گوگل در تا كنيد وارد را عبارتي <br/><input text' value='Search String' /><br/><input type='submit' value='Search'><br/></form>

</body></html>

<textarea>

مي استفاده )خطي چند( متن ورود محيط يك تعريف جهت <textarea> برچسب•.كنند مي استفاده شود، وارد بزرگي متن است الزم كه هنگامي برچسب اين از .شود

.است معتبر برچسب اين براي readonly صفت• بر را متني محوطه يك هاي ستون و سطرها تعداد ترتيب به cols و rows صفات•

.كنند مي مشخص كاراكتر حسب پايان و شروع بين كنيد، ايجاد خالي متن فضاي يك خواهيد مي كه هنگامي كنيد دقت•

برچسب دو مابين كه هرچيزي زيرا باشد، نداشته وجود فاصله يا خط برچسب،textarea ،گردد مي محسوب آن محتوي باشد:

<textarea rows=‘5’ cols=‘10’>HelloThere</textarea>

اصول از textarea متحواي كنيد، مي مشاهده كه همانطورHTML به احتياج عدم( كند نمي پيروي <br/>(

<select>

Dropdown يك Select برچسب• Combo تنها كه ليستي يعني كند، مي ايجاد قابل اي كركره صورت به مابقي آن، روي بر كليك با و است مشخص آن عنصر يك

.گردند مي انتخاب به و نبوده اي كركره ديگر شود، تنظيم Select يك از Mutiple صفت كه صورتي در•

ليستهاي محتويات .بود خواهد مورد چندين انتخاب قابليت با معمولي ليست يك مانند.شوند مي ارسال سرور براي آرايه يك قالب در اينگونه

.گردند مي مشخص Option هاي برچسب توسط Select ليست يك موارد• صورت به ليست در باشد، شده تنظيم آن Selected صفت كه اي Option هر•

.بود خواهد شده انتخاب Value انتخاب، صورت در باشد، داشته شده تنظيم Value صفت اگر Option هر•

.آن متني محتواي اينصورت غير در و شود مي ارسال سرور به آن

<select>مثال

<html><body><select>

<option value='Wood'>چوب</option><option value='Iron'>آهن</option><option value='Stone'>سنگ</option>

</select></body></html>

<label>,<fieldset>

از عادي متن بجاي است بهتر فرم، يك در فيلد يك معرف متن و راهنما تنظيم براي•.كند مي بيشتر را صفحات بندي قالب توانايي اينكار .كنيم استفاده Label برچسب

.كند مي دريافت را ديگر فيلد يك نام كه است Label، For يك صفت تنها•<label for=‘myname’>Enter your name:</label><input type=‘text’ name=‘myname’ />

استفاده fieldset برچسب از فرم، يك فيلدهاي از اي دسته منطقي بندي گروه براي•:است الزم متعدد هاي Radio از استفاده هنگام در مخصوصا اينكار .شود مي

<fieldset><input type=‘radio’><input type=‘radio’></fieldset><fieldset><input type=‘radio’><input type=‘radiou’></fieldset>

نكات سودمند

صفتهاي اشتراكي

:هستند معتبر HTML هاي برچسب تمامي براي كه دارند وجود صفت شش•:اي هسته صفتهاي–

•Class: در استفاده براي( سازد مي مشخص را برچسب يك كالس CSS(•Id: سند يك در .كند مي مشخص برچسب براي اسم يك HTML نبايد برچسبي دو هيچ اسم

.يافت دسترسي آن به برچسب يك بردن اسم با توان مي CSS و اسكريپت در .باشد يكسان•Style: از آن جاي به شود مي توصيه( كند مي مشخص را برچسب يك ظاهري وضعيت CSS

)شود استفاده•Title: شود مي نمايان ماوس داشتن نگه با( كند مي مشخص را برچسب كمكي راهنماي متن(

:زباني صفت–•Dir: متن، جهت LTR يا RTL

:دستيابي صفت–•Tabindex: مي مشخص كيبود از كنندگان استفاده براي را برچسب يك به دسترسي ترتيب

روي Tabindex ترتيب به دهيد، فشار را TAB كليد كيبورد روي بر كه صورتي در .سازد.شد خواهيد جابجا عناصر

برچسب هاي ديگر

خواهند مطرح ديگري هاي دوره در كه دارند وجود HTML در نيز زير هاي برچسب•:شد–Style: سند يك CSS شود مي تعريف برچسب اين درون در–Script: اسكريپتهاي Javascript شوند مي نوشته برچسب اين درون–Meta: در متاداده تعريف براي Head توانند مي واقع در متا هاي برچسب .سند يك

.باشند HTTP پارامترهاي مكملHeader محتواي كردن مشخص براي Content صفت•Header خود كردن مشخص براي http-equiv صفت•داده متا نام كردن مشخص براي Name صفت•

–Link: خارجي منبع يك تعريف براي:•Rel: سند با منبع رابطه•Href: منبع آدرس•Type: منبع نوع

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

تمرينات

تمرينات

.دهيد انجام را گوگل تصاوير جستجوي بتوانيد آن توسط كه بسازيد HTML سند يك١.

بر آنرا سپس كنيد، پر دلخواه مطالب با آنرا و بسازيد )SBCE مانند( ستوني سه صفحه يك٢. سعي .كنيد بيان را تفاوتها و كنيد تست )IE و Firefox حداقل( مختلف كاوشگرهاي روي.شود ديده يكجور كاوشگرها همه در كه كنيد اصالح طوري را سند كنيد

بايد وبالگ در همچنين .باشد داشته مطلب چندين بايد شما وبالگ .بسازيد دستي وبالگ يك٣..باشد داشته وجود دانلود براي فايل چند

از( بسازيد آنرا همانند كنيد سعي كنيد، باز را )Download.com مانند( معتبر سايت يك۴. پيوند مقصد همان به را دارد وجود سايت آن در كه لينكهايي تمام .)باشد برابر عينا ظاهر نظر

.دهد تشخيص اصلي سايت با آنرا تفاوت نتواند ديد، را شما سند كسي اگر كه طوري به بزنيد،.كنيد طراحي كاربر يك كامل اطالعات دريافت براي شده بندي قالب و زيبا فرم يك۵. با كه كنيد ايجاد تصوير يك ،IMG برچسب به راجع بيشتر مطالعه و اينترنت به مراجعه با۶.

)نباشند مربعي لزوما قسمتها( .شود باز مجزا سايت يك آن، از قسمتي هر روي بر كليك