کارگاه آموزشی توسعه وب

69
ه وب ع س و ت ی ش وز م کازگاه آ ه وب ع س و ت ی ش وز م کازگاه آ- آول ش خ ب- آول ش خ بHTML HTML ادزی اس ن ب ع ه:& آزآئ ی) ی و ج ش ن ی دآ م ل ع3 ن م ج ب آ ر ت و) ی: مپ ی کا ش د ب ه م ی ت ش ه ب د) ب ه ش گاه ش ن دآ ه خ ش ن ه خ ش ن1 1

Upload: griffith-myers

Post on 30-Dec-2015

53 views

Category:

Documents


6 download

DESCRIPTION

کارگاه آموزشی توسعه وب. بخش اول - HTML. ارائه: عباس نادری انجمن علمی دانشجویی مهندسی کامپیوتر دانشگاه شهید بهشتی. نسخه 1. عناوین مطرحی. وب چیست؟ Web 2 پروتکل HTTP کاوشگر وب پروتکل HTTPS پروتکل FTP پروتکل های دیگر وب HTML چیست؟. وب چیست؟. وب چیست؟. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: کارگاه آموزشی توسعه وب

کارگاه آموزشی کارگاه آموزشی توسعه وبتوسعه وب

HTMLHTMLبخش اول - بخش اول -

ارائه: عباس نادریانجمن علمی دانشجوییمهندسی کامپیوتردانشگاه شهید بهشتی 11نسخه نسخه

Page 2: کارگاه آموزشی توسعه وب

عناوین مطرحی

وب چیست؟•–Web 2

HTTPپروتکل –

کاوشگر وب–HTTPSپروتکل –

FTPپروتکل –

پروتکل های دیگر وب–

•HTMLچیست؟

Page 3: کارگاه آموزشی توسعه وب

وب چیست؟وب چیست؟

Page 4: کارگاه آموزشی توسعه وب

وب چیست؟وب چیست؟

•( جه/انی گس/ترده ه/ای اب/رمتن مجموع/ه (World Wide Webتور به هم از طریق اینترنت است. متصل

•( )اب/رمتن( توس/ط کاوش/گر وب ( قاب/ل Web Browserاس/ناد وب مطالعه هستند.

HyperText Markup Language ی/ا HTMLاس/تانداردترین س/ند وب، •)زبان مشخص ا/برمتن/ی( تقریب/ا تمام وب/ را /تشکیل داده /است.

ابداع شد.1980وب در سال •طری/ق • از وب )ابراتص/الاس/ناد Hyperlink متص/ل یک/دیگر ب/ه )

هستند. World Wide Web Consortium (W3C)اس/تانداردهای وب از ط/رف •

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

استانداردهای خود را وضع نموده است.

Page 5: کارگاه آموزشی توسعه وب

Web 2Web 2

خاص/یت اص/لی وب اس/تاندارد ب/ودن ش/کل ظ/اهری و س/ادگی دسترس/ی •به آن بود.

شکل گرفت.2004 در س/ال 2به دلی/ل کمبوده/ا و ع/دم پوی/ایی وب، وب •

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

وب • تکنول/وژی واق/ع وب 2در بلک/ه ن/دارد، وب ب/ا تف/اوتی ب/دین 2 م/عناس/ت ک/ه /ن/رم/ اف/زاره/ا و ک/اربرده/ای مخ/تل/ف همگ/ی ب/ر روی وب اتک/ا

کنند و به وسیله وب توسعه یابند. اس/تفاده از تکنول/وژی ه/ای خ/اص ب/ا ه/دف پوی/ا س/ازی 2با توس/عه وب •

ص/فحات /رونق گرف/ت و/ دریچه جدی/دی به/ روی/ وب باز شد/. ب/رای وب، ش/رکتها خ/دمات و محص/والت خ/ود را ب/ر روی وب و 2در وب •

ارائه می دهند. ت/ا ج/ایی پیش رفت ک/ه سیس/تم عام/ل ه/ای تحت وب پدید آمدند.2وب •

Page 6: کارگاه آموزشی توسعه وب

HTTPHTTPپروتکل پروتکل

HyperText Transfer Protocol ی/ا HTTPپروتک/ل اص/لی وب پروتک/ل •است.

•HTTP( ی/ک پروتک/ل تقاضا-پاس/خی Request-Responce اس/ت. در )این پروتک/ل ک/الینت، ی/ک د/رخواس/ت ب/ه س/رور/ فرس/تاد/ه و س/رور اتص/ال ت/راکنش/، این از پس/ می /گوی/د. پاس/خ وی /را د/رخواس/ت

مابین طرفین منقطع می گردد.•HTTP( ی/ک پروتک/ل ب/دون وض/عیت Stateless اس/ت، ب/دین مع/نی ک/ه )

س/ر/ور/ ا/ز و/ض/عیت/ فعلی/ کالینت خ/بری/ ن/دار/د و ت/نه/ا ت/قاض/ای/ /وی را دریافت می کند.

و POSTتقاض/ا ان/واع مختلفی داراس/ت. معم/ول ت/رین ان/وع تقاض/ا، •GET.است

اطالع/ات، • توان/د می تقاض/ا ب/ه س/رور ه/ای HTMLپاس/خ فای/ل ،تکمیلی )مانند تصاویر( و یا انواع دیگر داده باشد.

پاس/خ س/رور • ک/ه ب/رای HTMLدر ص/ورتی وب ی/ک ص/فحه باش/د، کاربر فرستاده می شود.

Page 7: کارگاه آموزشی توسعه وب

کاوشگر وبکاوشگر وب

( ن/رم افزاریس/ت ک/ه می توان/د Web Browserکاوش/گر وب )ی/ا •تحت پروتکل های وب با اینترنت کار کند.

درخواس/تهای • ق/الب در را ک/اربر HTTPکاوش/گر وب خواس/ته ب/رای س/رور ارس/ال می کن/د و نت/ایج س/رور را نم/ایش می دهد.

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

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

ت//وان • می را مع//روف Internet Explorerکاوش//گرهای نمی تبعیت وب اس/تانداردهای از نیمی از ک/ه مایکروس/افت

م/وز/یال ک/ه ق/درتمن/دترین/ کاوش/گ/ر حرف/ه ای/ دانس/ته Firefoxکن/د، اخ/یرا و/ ش/ود وب /Google Chromeم/ی ب/رای/ /اه/د/اف ک/ه 2

طراحی شده است، دانست.

Page 8: کارگاه آموزشی توسعه وب

HTTPSHTTPSپروتکل پروتکل

ب/ه ص/ورت تم/ام متن و مس/تقیم ک/ار میکن/د. از این HTTPپروتک/ل •رو احت/یاج/ات ا/منی/تی ر/ا ب/رآور/ده نم/ی س/ازد/./ ب/رای/ /مث/ال/ ت/ع/امالت

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

اب/داع Secure HTTP ی/ا HTTPSبرای ج/بران این کمبوده/ا، پروتک/ل •امنیتی پروتکل از استفاده با پروتکل این SSL ( Secureشد.

Sockets Layer ) ی/ا و TLS ( Transport Layer Security) ت/ب/ادالت س/رور و کالی/ن/ت را ام/ن می س/ازد/. از ای/ن پروتک/ل/ در ت/م/ام/ی وب/

هایی /که به ا/منیت احت/یاج ا/ست /استف/اده می گ/ردد.، الزم اس/ت ک/ه س/رور خ/ود را ب/ا ی/ک HTTPSبرای ک/ارکرد درس/ت •

د/یجیت/ال /) کن/د. /ب/رای (Digital Certificateگ/واهینام/ه ه/ویت/ اه/راز/ اع/ط/ای ت/ا /ب/ه/ /مرا/ک/ز زم /اس/ت/ ال/ ی/ک /گوا/هینام/ه /دیج/یت/ال، ت/هی/ه

هزار تو/مان برا/ی هر/ سال /پرداخت.100گوا/هی ه/زینه ای م/عادل ، HTTPSبه دلی/ل هزین/ه ب/اال و ق/دیمی ب/ودن اک/ثر پی/اده س/ازی ه/ای •

این پروتکل نقاط /امنی/تی بسیا/ری را/ برای وب /باز گذار/ده است.

Page 9: کارگاه آموزشی توسعه وب

FTPFTPپروتکل پروتکل

•FTP ی/ا File Transfer Protocol ی/ک اس/تاندارد نس/بتا قدیمیس/ت ک/ه ب/رای تب/ادل فای/ل در وب اس/تفاده می ش/ود. ام/روزه فای/ل

منتقل کرد.FTP به سادگی HTTPرا می توان با استفاده از راه دیگ/ری دسترس/ی ب/ه داده ه/ای موج/ود ب/ر FTPدر واق/ع •

روی س/رورهای وب اس/ت، ک/ه معم/وال در دو ک/اربرد اس/تفاده می شود:

دریافت فایلهای بسیار بزرگ از اینترنت–ی/ا – نگهدارن/ده توس/ط وب روی ب/ر اس/ناد و فایله/ا قراردادن

سازنده آن

فق/ط ب/رای تعام/ل فای/ل ایج/اد ش/ده اس/ت، FTPاز آنج/ایی ک/ه •)مانن/د ظ/اهری نم/ود دارای س/ند ب/رای HTMLهیچ HTTP )

ندارد.

Page 10: کارگاه آموزشی توسعه وب

پروتکل های دیگر وبپروتکل های دیگر وب

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

مخصوص آن پروتکل احتیاج است. و تکنول/وژی ه/ای جدی/د آن، نی/از ب/ه 2با روی ک/ار آم/دن وب •

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

فراموش شده اند.

Page 11: کارگاه آموزشی توسعه وب

HTMLHTMLچیست؟ چیست؟

Page 12: کارگاه آموزشی توسعه وب

HTMLHTML چیست؟چیست؟

ارائ/ه • ق/الب ی/ک واق/ع در زب/ان این وب. ص/فحات اس/تاندارد زب/ان اطالعات است/ و بر/نامه نویس/ی خاصی/ در آ/ن وجود ندا/رد.

تقریب/ا توان/ایی نم/ایش هرگون/ه داده ای ب/ا ه/ر ق/البی را HTMLام/روزه •داراست.

Word و PDFمی ت/وان آن/را ی/ک ف/رمت خیلی س/اده دانس/ت ک/ه مانن/د •تصویر، /متن و داده های دی/گر را /در کنار یک/دیگر /نمایش م/ی دهد.

•HTML ی/ک زب/ان ( برچس/بیTag) اس/ت. از این رو Markup Language ک/ه /ی/ک زب/ان/ بر/چس/بی/ ب/دون م/ح/دودیت XMLدانس/ته می ش/ود/، مانن/د/

برچسب است. محدودن/د و هرک/دام نمای/انگر داده خاص/ی هستند.HTMLبرچس/ب ه/ای •عن/وان ش/روع برچس/ب در داخ/ل عالمت بزرگ/تر و کوچک/تر ق/رار می •

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

Page 13: کارگاه آموزشی توسعه وب

برچسب چیست؟برچسب چیست؟

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

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

برچس/ب ه/ا می توانن/د در ی/ک س/اختار درخ/تی در داخ/ل یک/دیگر ق/رار •ش/ا/مل خ/ود/ می /توان/د برچ/س/ب ی/ک داد/ه ک/ه/ م/ع/نی ب/د/ین گ/یرن/د،

برچسبهای دیگر باشد.مق/دار ص/فات • و ب/ه هم/راه ص/فات ت/و در ت/و برچس/ب ب/رای مث/ال

برچسب:<tag attribute1=“attributeValue” attribute2=“attributeValue2>”

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

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

Page 14: کارگاه آموزشی توسعه وب

برچسب ریشهبرچسب ریشه

، ب/ا برچس/ب ه/ای خ/ود ی/ک س/اختار درخ/تی می XMLهمانگون/ه ک/ه ی/ک فای/ل • هم HTMLس/از/د/ ک/ه ت/ن/ه/ا ی/ک/ ر/یش/ه/ د/ا/رد )ب/رچس/ب ر/یش/ه(،/ /ریش/ه /ف/ایله/ای /

اس/ت. تم/ام /مح/توی/ات ص/فحه /وب د/ر/ داخ/ل این برچس/ب </html>برچ/س/ب قرار می گیرد.

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

ر/ع/ایت /شو/د. /ن/و/ع د/ر/ خط ا/و/ل/ فا/یل/ قر/ا/ر/ /می /گیرد./ ان/واع /قابل/ اس/تفاده: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">

Page 15: کارگاه آموزشی توسعه وب

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

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">

Page 16: کارگاه آموزشی توسعه وب

سرصفحه و بدنهسرصفحه و بدنه

س/ند • اس/ت، HTMLهر ش/ده تش/کیل اص/لی قس/مت دو از (/. اطالع/ات /مرب/وط ب/ه/ ص/فح/ه ک/ه Body( و بدن/ه )Headسرص/فحه )

ندارن/د، /در سر/ص/فحه/ ق/را/ر/ گرفت/ه و/ اطالع/ات/ ن/م/ایش/ ظ/اهر/ی/ نمایش/ی صفحه د/ر ق/سمت بدنه /جای می/ گی/رند. به عن/وان /مثال:<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>

Page 17: کارگاه آموزشی توسعه وب

فایل متنیفایل متنی

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

فایل های متنی سه نوع ذخیره می گردند:1. 256 ب/ایت می گ/یرد و 1: در این م/دل ه/ر ک/اراکتر ASCIIکاراکتر بن/دی 1.

غ/یر تو/ان/ا/یی /نم/ایش /زبان/ه/ای ف/اق/د/ بن/د/ی ک/اراک/تر ح/الت /دارد. /این /ن/وع انگلیسی است.

ب/ایت می 2کاراکتر بن/دی وین/دوز : در این م/دل ه/ر ک/اراکتر در فای/ل مت/نی 2.گ/یرد/ و بر/ ا/ساس /ا/ستان/دارد /ویندوز/ به ش/کل /خا/صی /ت/بدیل/ /می شود.

بن/دی 3. ک/اراکتر Unicodeکاراکتر ه/ر م/دل، این در و 2: گ/یرد می ب/ایت ت/و/ان/ای /نم/ای/ش ب/ه /اک/ث/ر /زب/ان/ه/ا وج/ود /دارد/. ی/ونیک/د خ/و/د ب/ه ا/س/تان/دارد/های

-UTFمت/ف/اوتی تق/س/یم م/ی/ گ/ر/دد ک/ه/ ز/ب/ان ف/ار/س/ی /در ا/س/تا/ندار/د اص/لی آن، / پشتیبانی شده است.8

کاراکتر انته/ای خ/ط در وین/دوز و لین/وکس تف/اوت می کن/د، در وین/دوز 2. معین /کنن/ده /10( /و ی/ک ک/اراک/تر /کمک/ی ب/ا ش/ماره/ Enter )13ی/ک /ک/اراک/تر /

/وج/ود/ ن/دا/رد. /ازاین رو/ 10پ/ای/ان/ خ/ط /اس/ت /ولی /در ل/ی/ن/وک/س ک/ا/راکتر/ فا/یله/ا/ی مت/نی ل/ین/وکس/ در وی/ن/دوز، /یکس/ر/ه /و ب/دون/ خ/ط /بن/دی ب/ه/ نظ/ر

می رسند.

Page 18: کارگاه آموزشی توسعه وب

HTMLHTMLنکات نکات

( پیوس/ته، در خ/روجی ی/ک whitespaceتم/امی فض/اهای خ/الی )1.Space.می شوند

ب/رای معین ک/ردن برچس/ب > < & از آنج/ایی ک/ه عالمت ه/ای 2.ه/ا ک/اربرد دارن/د، ب/رای وارد ک/ردن آنه/ا در متن بای/د تب/دیل زی/ر

انجام شود:.1< : &lt;.2> : &gt;.3& : &amp;

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

.1Microsoft Frontpage

.2Adobe Dreamweaver

.3ZendStudio for Eclipse

Page 19: کارگاه آموزشی توسعه وب

HTMLHTMLبرچسبهای برچسبهای

Page 20: کارگاه آموزشی توسعه وب

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

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

از/ معمو/ل ترین این /برچس/ب ها را بررس/ی خ/واهیم کرد/. ب/ا گ/ذر زم/ان منق/رض ش/ده ان/د )اس/تفاده HTML برچس/ب 25حدود •

از /آنه/ا غ/یر/ اس/ت/اند/ار/د ش/ده/ اس/ت( /ب/یش/تر /آنه/ا ب/رچس/ب ه/ا/ی ق/الب/ اس/ت/فاده /ا/ز آنه/ا ناص/حیح/ CSSبن/دی/ هس/تند/ /ک/ه/ ب/ا /ب/ه وج/ود آم/دن /

دانسته می شود.•HTML از دیگ/ری، اس/کریپتینگ و نویس/ی برنام/ه زب/ان ه/ر مانن/د

( پش/تیبانی می کن/د، ام/ا متاس/فانه ق/الب آن Commentsتوض/یحات )کمی دشوار است:

<!-- this is a comment! -->از توض/یحات اس/تفاده نمی ش/ود مگ/ر در م/وارد بس/یار HTMLدر •

مح/دود، ز/ی/را حجم/ ص/فحات ب/س/یار مه/م اس/ت و ت/ا/ ج/ای /ممک/ن بای/د آنرا کمینه نمود.

Page 21: کارگاه آموزشی توسعه وب

<<htmlhtml>>برچسب برچسب

•HTML ب/ه ب/زرگی و ک/وچکی ح/روف در ن/ام برچس/ب ه/ا حس/اس نیست.

HTML نام برچسب:

HTMLمشخص کردن یک سند وظیفه:

خیربدون محتوی: صفات استاندارد:

اختیاری•–Dir مش/خص کنن/ده جهت س/ند )چپ ب/ه راس/ت ی/ا ب/العکس( مق/ادیر :

”ltr“ و ”rtl“مجاز rtlمقدار پیش فرض:

–Lang اس/اس مخف/ف )ب/ر زب/ان س/ند کنن/ده ح/رفی 2: مش/خص ”en“ یا ”fa“زبان( مانند

Page 22: کارگاه آموزشی توسعه وب

<<htmlhtml>>مثال مثال

<html dir='rtl' lang='fa'>

<head></head>

<body>

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

</html>

<html><head></head>

<body>

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

Page 23: کارگاه آموزشی توسعه وب

<<headhead>>برچسب برچسب

Head نام برچسب:

مشخص کردن محدوده اطالعات راجع به یک سندوظیفه: خیربدون محتوی:

صفات استاندارد: نداردHtmlمحل قرارگیری: داخل

ق/رار می گیرن/د، می headنکت/ه: تم/ام برچس/ب ه/ایی ک/ه در •در ولی bodyتوانن/د ش/وند، اس/تفاده ن/یز دیگ/ر ج/ای ی/ا و

استفاده شوند.headاستاندارد آن است که داخل

Page 24: کارگاه آموزشی توسعه وب

<<titletitle>>برچسب برچسب

Title نام برچسب:

مشخص کردن عنوان صفحهوظیفه: خیربدون محتوی:

صفات استاندارد: نداردHead داخل محل قرارگیری:

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

Page 25: کارگاه آموزشی توسعه وب

<<titletitle>>مثال مثال

<html lang='fa'>

<head>

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

</head>

<body>

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

</html>

Page 26: کارگاه آموزشی توسعه وب

<<pp>>برچسب برچسب

P نام برچسب:

تعریف پاراگرافوظیفه: خیربدون محتوی:

صفات استاندارد: –Align:مرتب کردن متن داخل پاراگراف، مقادیر مجاز :

•Left)به چپ )پیشفرض • Rightبه راست•Centerبه مرکز •Justifyهم تراز

ج/ای چپ و راس/ت در این م/رتب RTLدقت کنی/د ک/ه ب/رای س/ند ه/ای کردن جابجا می گردد.

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

Page 27: کارگاه آموزشی توسعه وب

<<brbr>>برچسب برچسب

Br نام برچسب:

مشخص کردن انتهای خط )رفتن به خط بعدی(وظیفه: بلهبدون محتوی:

صفات استاندارد: نداردهمه جامحل قرارگیری:

Page 28: کارگاه آموزشی توسعه وب

<<imgimg>>برچسب برچسب

Img نام برچسب:

تعریف تصویروظیفه: بلهبدون محتوی:

صفات استاندارد: –srcآدرس فایل تصویری :–Alt متن ج/ایگزین )ت/ا هنگ/امی ک/ه تص/ویر ب/ار ش/ود، ی/ا اگ/ر نش/ود، این متن :

در جای آن نمایش داده می شود( –Align مقادیر قابل استفاده :top, bottom, middle, left , right

–Width , Heightابع/اد تص/ویر، در ص/ورتی ک/ه ذک/ر نش/ود ان/دازه خ/ود تصویر :–Title( متن راهنمای کمکی :Tooltip)–Usemap ک/اربرد حرف/ه ای )جهت تخصیص/ی ی/ک نقش/ه منطق/ه بن/دی ب/ه :

تصویر(ه/ای برچس/ب تم/ام تقریب/ا ک/ه اس/ت ذک/ر ب/ه ص/فت HTMLالزم از Title

پشتیبانی میکنند، از این رو از تکرار آن می پرهیزیم.

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

Page 29: کارگاه آموزشی توسعه وب

<<imgimg>>مثال مثال

<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>

Page 30: کارگاه آموزشی توسعه وب

<<aa>>برچسب برچسب

A نام برچسب:

تعریFف لنگرگFاه، اتصFال بFه صFفحات دیگFر یFا قسFمتی از صFفحه جاریوظیف/ه: خیر، محتوی عنوان اتصال استبدون محتوی:

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

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

و غیرهBodyداخل محل قرارگیری: این برچسFب می توانFد اتصFالی بFه یFک صFفحه دیگFر برقFرار کنFد، یFا یFک لنگرگFاه

در این صفحه تعریف کند. )لنگرگاه چیست؟(

Page 31: کارگاه آموزشی توسعه وب

<<aa>>مثال مثال

<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>

Page 32: کارگاه آموزشی توسعه وب

<<bb>>برچسب برچسب

B نام برچسب:

Boldتعریف متن وظیفه:

خیربدون محتوی: صفات استاندارد: ندارد

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

ن/یز ب/رای ق/الب و ...small و big و iبرچس/ب ه/ای دیگ/ری مانن/د ج/ایگزین cssبن/دی متن ب/ه ک/ار می رون/د ک/ه ک/اربرد آنه/ا ب/ا

شده است.

Page 33: کارگاه آموزشی توسعه وب

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

Sup, Sub نام برچسب:

تعریف رو/زیر متنوظیفه: خیربدون محتوی:

صفات استاندارد: ندارد و غیرهBodyداخل محل قرارگیری:

ن/یز ب/رای ق/الب و ...small و big و iبرچس/ب ه/ای دیگ/ری مانن/د ج/ایگزین cssبن/دی متن ب/ه ک/ار می رون/د ک/ه ک/اربرد آنه/ا ب/ا

شده است.

Page 34: کارگاه آموزشی توسعه وب

< < hrhr>>برچسببرچسب

Hr نام برچسب:

(Horizontal Lineتعریف خط جدا کننده افقی )وظیفه: بلهبدون محتوی:

صفات استاندارد: ندارد و غیرهBodyداخل محل قرارگیری:

ک/ه ی/ک خ/ط را تم/ام می کن/د و ب/ه ابت/دای خ/ط brبه مانن/د برچس/ب ن/یز خطی خ/الی ک/رده، در خ/ط بع/دی ی/ک hrبع/دی می رود،

خ/ط ن/ازک افقی کام/ل رس/م می کن/د و ب/ه ابت/دای خ/ط بع/دی می رود.

Page 35: کارگاه آموزشی توسعه وب

<<sub>,<supsub>,<sup>>مثال مثال

<html>

<body>

Some text with

<sup>super</sup>

text.

<hr/>

Some more text with

<sub>sub</sub>

text.

</body>

</html>

Page 36: کارگاه آموزشی توسعه وب

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

OL,UL نام برچسب:

)وظیف/ه: مFرتب لیسFت )Ordered ListتعریFف نFامرتب لیسFت و )Unordered List)

خیربدون محتوی: صفات استاندارد: ندارد

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

این دو برچس/ب مح/دوده ی/ک لیس/ت ع/ددی و ی/ا گلول/ه ای را مش/خص برچس/ب از اس/ت/فاده/ ب/ا/ س/پ/س کنن/د. داخ/ل liمی/ د/ر ت/وان /می

لیست، عنصر افزود.

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

به د/رستی نم/ایش /خواهن/د داد/ ولی از ا/ستاندارد خارج شده اید.

Page 37: کارگاه آموزشی توسعه وب

<<lili>>برچسببرچسب

LI نام برچسب:

(List Itemتعریف عنصر لیست )وظیفه: خیربدون محتوی:

صفات استاندارد: نداردUL و OLداخل محل قرارگیری:

هر عنص/ر لیس/ت در لیس/تهای م/رتب ی/ک ش/ماره می گ/یرد و در لیس/ت ه/ای گلول/ه ای ی/ک گلول/ه در ابت/دای آن ق/رار می گ/یرد.

لیست ها می توانند تو در تو استفاده شوند.

Page 38: کارگاه آموزشی توسعه وب

مثال لیست هامثال لیست ها<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>

Page 39: کارگاه آموزشی توسعه وب

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

Span, Div نام برچسب:

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

صفات استاندارد: نداردهمه جامحل قرارگیری:

ه/ای • ناحی/ه ک/ردن ج/دا ب/رای بن/دی ناحی/ه ه/ای HTMLبرچس/ب در و ب/وده/ پر/ک/اربرد ب/س/یار ه/ا برچ/س/ب اس/تف/اده می ش/وند. /این/

به تعداد استفاده می شوند.HTMLاسناد ب/رای ناحی/ه بن/دی قس/متی از متن اس/تفاده می ش/ود Spanبرچس/ب •

و تفاوتی در ظاهر سند ایجاد نمی کند. ب/رای ناحی/ه بن/دی قس/متی از س/ند اس/تفاده می ش/ود و Divبرچس/ب •

( را در خود نگه دارد.Divم/ی تواند انوا/ع بر/چسب های /دیگ/ر )حتی/ بیش/تر راج/ع ب/ه این برچس/ب ه/ا بحث خواه/د شد.CSSدر بخش •

Page 40: کارگاه آموزشی توسعه وب

جدول هاجدول ها

Page 41: کارگاه آموزشی توسعه وب

HTMLHTMLجدول های جدول های

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

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

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

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

شوند.

Page 42: کارگاه آموزشی توسعه وب

<<TableTable>>برچسب برچسب

Table نام برچسب:

تعریف یک جدول کاملوظیفه: خیربدون محتوی:

صفات استاندارد: –Borderاندازه کادر خانه های جدول. یک عدد صحیح :–Cellpadding فاص/له می/ان دی/واره خان/ه ه/ای ج/دول و داده درون :

آنها–Cellspacingفاصله میان دو خانه جدول :–Width ک/ل ان/دازه از )درص/د درص/د ی/ا ع/دد ب/ه ج/دول ع/رض :

صفحه(

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

Page 43: کارگاه آموزشی توسعه وب

<<TrTr>>برچسب برچسب

Tr نام برچسب:

(Table Rowتعریف یک سطر جدول )وظیفه: خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlign:جهت گیری عمودی محتوای یک خانه :

•Top•Middle•Bottom•Baseline

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

Page 44: کارگاه آموزشی توسعه وب

<<TdTd>>برچسب برچسب

Td نام برچسب:

(Table Dataتعریف یک خانه داده در یک سطر جدول )وظیفه: خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlignجهت گیری عمودی محتوای یک خانه :–Colspan این خان/ه چن/د ردی/ف را در ب/ر بگ/یرد )ادغ/ام س/تونی خان/ه :

ها(–Rowspan ردیفی بگ/یرد)ادغ/ام ب/ر در را چن/د س/تون خان/ه این :

خانه ها(

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

Page 45: کارگاه آموزشی توسعه وب

مثال جدول سادهمثال جدول ساده<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>

Page 46: کارگاه آموزشی توسعه وب

<<TbodyTbody>>برچسب برچسب

Tbody نام برچسب:

(Table Bodyتعریف ناحیه بدنه جدول )وظیفه: خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlignجهت گیری عمودی محتوای یک خانه :

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

Page 47: کارگاه آموزشی توسعه وب

<<TheadThead>>برچسب برچسب

Thead نام برچسب:

(Table Headerتعریف ناحیه فوقانی جدول )وظیفه: خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlignجهت گیری عمودی محتوای یک خانه :

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

Page 48: کارگاه آموزشی توسعه وب

<<TfootTfoot>>برچسب برچسب

Tfoot نام برچسب:

(Table Footerتعریف ناحیه تحتانی جدول )وظیفه: خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlignجهت گیری عمودی محتوای یک خانه :

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

Page 49: کارگاه آموزشی توسعه وب

<<ThTh>>برچسب برچسب

Th نام برچسب:

) وظیفه: جدول فوقانی ناحیه سطر در داده خانه یک Tableتعریف Header Data)خیربدون محتوی:

صفات استاندارد: –Align( 4: جهت گیری محتوای یک خانه)حالتی –VAlignجهت گیری عمودی محتوای یک خانه :

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

Page 50: کارگاه آموزشی توسعه وب

مثال جدول ناحیه بندی شدهمثال جدول ناحیه بندی شده<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>

Page 51: کارگاه آموزشی توسعه وب

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

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

می ت/وان ب/ه ج/دول ه/ا نم/ود بس/یار خ/وب و CSSبا اس/تفاده از •مطلوبی داد.

نم/ایش • اس/تاندارد ش/دن ش/یوه ب/اعث ب/ا ج/داول بن/دی قالب صفحه می شود.

( ب/ه ان/واع مختلفی DOCTYPEجدول ه/ا ب/ر اس/اس ن/وع س/ند )•تفسیر می شوند.

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

Page 52: کارگاه آموزشی توسعه وب
Page 53: کارگاه آموزشی توسعه وب
Page 54: کارگاه آموزشی توسعه وب

فرم هافرم ها

Page 55: کارگاه آموزشی توسعه وب

HTMLHTMLفرم های فرم های

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

ا/ستف/اده می شود.HTMLف/رمهای ه/ای • برچس/ب ن/یز آن اج/زای و ارس/ال HTMLفرم هنگ/ام ب/ه هس/تند.

(Submit ی/ک ف/رم،/ کا/وش/گر ب/ه /ص/ورت/ ات/وماتی/ک محت/و/ای درخواس/ت ف/رم )را به سرور ارسال می نماید.

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

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

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

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

جداکنن/ده پارامتره/ا از آدرسGet (c , tid)پارامتره/ای جداکننده پارامترها از یکدیگر

Page 56: کارگاه آموزشی توسعه وب

<<formform>>

ق/رار می گ/یرد. ه/ر 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>

Page 57: کارگاه آموزشی توسعه وب

<<inputinput>>

معم/ول ت/رین فیل/دهایی ک/ه در ی/ک ف/رم م/ورد اس/تفاده ق/رار می •م/تن( ج/عب/ه ی/ا اطالع/ات /)دکم/ه ورود مس/تقی/م گیرن/د، /فیل/دها/ی

مش/خص می typeهس/تند. /ان/واع م/ختل/ف این/ فیل/دها ت/وس/ط ص/فت/ شوند:

–Button)یک دکمه معمولی )برای کاربردهای اسکریپتی :–Checkboxیک مربع سفید کوچک قابل تیک خوردن :–File)یک فیلد انتخاب فایل )برای آپلود :–Hidden)ی/ک فیل/د مت/نی غیرقاب/ل دی/دن )دارای کاربرده/ای فراوان :–Password ی/ک فیل/د مت/نی ک/ه محت/وای خ/ود را ب/ه ش/کل س/تاره نش/ان :

می دهد–Radio ی/ک دای/ره ک/وچک. از ی/ک مجموع/ه :Radio تنه/ا یکی می توان/د

انتخاب شود–Textفیلد متنی معمولی :–Submitدکمه ارسال فرم :–Resetدکمه پاک کردن محتوای تمام فیلدهای فرم :

Page 58: کارگاه آموزشی توسعه وب

<<inputinput>>مثال مثال

<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>

Page 59: کارگاه آموزشی توسعه وب

<<inputinput>> )ادامه()ادامه(

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

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

–Disabled ه/ر ورودی ک/ه غیرفع/ال ش/ود، خاکس/تری ش/ده و غیرقاب/ل :تعامل خواهد شد.

–MaxLength ب/رای :text ی/ا password ح/داکثر تع/داد ک/اراکتر قاب/ل ت/ایپ است

–Readonly ب/رای فیل/دهای :text ی/ا password آنه/ا را غیرقاب/ل تغی/یر می ،کند

–Size)ان/دازه ظ/اهری فیل/د را مش/خص می کن/د )ب/ر حس/ب تع/داد کاراکتر :–Value ب/رای س/ازد. می مش/خص را آنه/ا روی متن ه/ا، دکم/ه ب/رای :

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

ارسال می شود.–Name.نامیس/ت ک/ه س/رور اطالع/ات ه/ر فیل/د را ب/ا آن تم/یز می دهد :

Page 60: کارگاه آموزشی توسعه وب

<<inputinput>>مثال دوم مثال دوم

<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>

Page 61: کارگاه آموزشی توسعه وب

<<textareatextarea>>

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

است متن بزرگی وارد شود، استفاده می کنند. برای این برچسب معتبر است.readonlyصفت • ب/ه ت/رتیب تع/داد س/طرها و س/تون ه/ای ی/ک cols و rowsصفات •

محوطه متنی را بر حسب کاراکتر مشخص می کنند.دقت کنی/د هنگ/امی ک/ه می خواهی/د ی/ک فض/ای متن خ/الی ایج/اد •

کنی/د، بین ش/روع و پای/ان برچس/ب، خ/ط ی/ا فاص/له وج/ود نداش/ته برچس/ب دو/ ک/ه /م/ابین/ هرچ/ی/زی زی/را/ باش/د، textareaباش/د/،

محتوی آن محسوب می گردد:<textarea rows=‘5’ cols=‘10’>Hello

There</textarea>

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

Page 62: کارگاه آموزشی توسعه وب

<<selectselect>>

ایج/اد می کن/د، یع/نی Dropdown Combo ی/ک Selectبرچس/ب •لیس/تی ک/ه تنه/ا ی/ک عنص/ر آن مش/خص اس/ت و ب/ا کلی/ک ب/ر روی

آن، مابقی به صورت کرکره ای قابل انتخاب می گردند. تنظیم ش/ود، دیگ/ر Select از ی/ک Mutipleدر ص/ورتی ک/ه ص/فت •

ب/ا ق/ابلیت ی/ک لیس/ت معم/ولی ب/ه مانن/د نب/وده و کرک/ره ای انتخ/اب چن/دین م/ورد خواه/د ب/ود. محتوی/ات لیس/تهای اینگون/ه

در قالب یک آرایه برای سرور ارسال می شوند. مش/خص Option توس/ط برچس/ب ه/ای Selectموارد ی/ک لیس/ت •

می گردند. آن تنظیم ش/ده باش/د، در Selected ای ک/ه ص/فت Optionهر •

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

آن ب/ه س/رور ارس/ال می ش/ود و در غ/یر Valueص/ورت انتخ/اب، اینصورت محتوای متنی آن.

Page 63: کارگاه آموزشی توسعه وب

<<selectselect>>مثال مثال

<html><body>

<select>

<option value='Wood'>چوب</option>

<option value='Iron'>آهن</option>

<option value='Stone'>سنگ</option>

</select>

</body></html>

Page 64: کارگاه آموزشی توسعه وب

<<label>,<fieldsetlabel>,<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>

Page 65: کارگاه آموزشی توسعه وب

نکات سودمندنکات سودمند

Page 66: کارگاه آموزشی توسعه وب

صفتهای اشتراکیصفتهای اشتراکی

معت/بر HTMLشش ص/فت وج/ود دارن/د ک/ه ب/رای تم/امی برچس/ب ه/ای •هستند:

صفتهای هسته ای:–•Class ب/رای اس/تفاده در( کالس ی/ک برچس/ب را مش/خص می س/ازد :CSS)•Id ی/ک اس/م ب/رای برچس/ب مش/خص می کن/د. در ی/ک س/ند :HTML اس/م هیچ دو

می ت/وان ب/ا /اس/م ب/ردن ی/ک CSSبرچس/بی نبای/د یکس/ان/ باش/د/. در ا/س/کریپت و/ برچسب به آن دسترسی یافت.

•Style وض/عیت ظ/اهری ی/ک برچس/ب را مش/خص می کن/د )توص/یه می ش/ود ب/ه :استفاده شود( CSSجای آن از

•Title داش/تن نگ/ه )ب/ا کن/د می مش/خص را برچس/ب کمکی راهنم/ای متن :ماوس نمایان می شود(

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

صفت دستیابی:–•Tabindex ت/رتیب دسترس/ی ب/ه ی/ک برچس/ب را ب/رای اس/تفاده کنن/دگان از :

را فش/ار TABکیب/ود مش/خص می /س/ازد./ در ص/ور/تی ک/ه ب/ر /روی کی/ب/ور/د کلی/د /روی/ عناصر جابجا خواهید شد/.Tabindexدهی/د، به ترتیب/

Page 67: کارگاه آموزشی توسعه وب

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

وج/ود دارن/د ک/ه در دوره ه/ای 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" />

Page 68: کارگاه آموزشی توسعه وب

تمریناتتمرینات

Page 69: کارگاه آموزشی توسعه وب

تمریناتتمرینات

بسFازید کFه توسFط آن بتوانیFد جسFتجوی تصFاویر گوگFل را انجFام دهید.HTMLیک سFند 1.

پFر کنیFد، SBCEیک صFفحه سFه سFتونی )ماننFد 2. بFا مطFالب دلخFواه آنFرا و ( بسFازید F داقلFح( فFلFگرهای مختFشFکاو Fر رویFرا بFپس آنFسFirefox و IE اFد و تفاوتهFت کنیFتس )

راF بیFاFنF کنیFد.F سFعیF کFنیFد FسFند راF FطFوFریF اصFالحF کنFیFدF کFه دFر FهمFهF FکاوشFگرFهFا یکجFور دیده شود.

یک وبالگ دسFتی بسFازید. وبالگ شFما بایFد چنFدین مطلب داشFته باشFد. همچFنین در 3.وبالگ باید چند فایل برای دانلود وجود داشته باشد.

( را بFاز کنیFد، سFعی کنیFد هماننFد آنFرا بسFازید Download.comیک سFایت معتFبر )ماننFد 4.)اFز نظFرF ظFاهر FعینFا FبراFبFرF باشFدF)F. تمFاFم لینFکFهFایی FکFه Fدر آنF سFایتF وجFوFد داردF را بFه هFمFان مقFصFدF پیوFنFد بزنFیFد، FبFهF طFورFی FکFه اFگFر FکسFیF سFندF شFمFا رFا FدFیFد،F FنتوانFد تFفFاوت آنFرا

با سایت اصلی تشخیص دهد.یک فFرم زیبFا و قFالب بنFدی شFده بFرای دریFافت اطالعFات کامFل یFک کFاربر طFراحی 5.

کنید.، یFک تصFویر ایجFاد کنیFد IMGبا مراجعFه بFه اینFترنت و مطالعFه بیشFتر راجFع بFه برچسFب 6.

کFهF FبFا FکلیFک بFر FرFویF FهFر FقسFمFتیF اFزF آن، یFکF سFایFت مFجFزا بFاFز شFوFد.F( FقسFمتها FلزومFا مربعی نباشند(