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

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

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

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

عناوین مطرحی

وب چیست؟•–Web 2

HTTPپروتکل –

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

FTPپروتکل –

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

•HTMLچیست؟

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

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

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

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

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

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

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

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

Web 2Web 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سازنده آن

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

ندارد.

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

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

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

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

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

HTMLHTMLچیست؟ چیست؟

HTMLHTML چیست؟چیست؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

، ب/ا برچس/ب ه/ای خ/ود ی/ک س/اختار درخ/تی می 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">

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

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

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

س/ند • اس/ت، 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>

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

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

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

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

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

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

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

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

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

می رسند.

HTMLHTMLنکات نکات

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

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

انجام شود:.1< : <.2> : >.3& : &

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

.1Microsoft Frontpage

.2Adobe Dreamweaver

.3ZendStudio for Eclipse

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

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

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

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

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

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

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

از توض/یحات اس/تفاده نمی ش/ود مگ/ر در م/وارد بس/یار HTMLدر •

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

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

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

HTML نام برچسب:

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

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

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

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

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

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

<body>

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

</html>

<body>

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

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

Head نام برچسب:

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

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

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

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

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

Title نام برچسب:

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

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

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

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

<head>

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

</head>

<body>

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

</html>

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

P نام برچسب:

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

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

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

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

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

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

Br نام برچسب:

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

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

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

Img نام برچسب:

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

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

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

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

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

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

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

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

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

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

<html>

<body>

<p> This is a sample paragraph. Click

to visit Google website.

<a href='http://hackersite.com/hack.html'

title='Click me to die!'>Yahoo!</a>

</body>

</html>

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

B نام برچسب:

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

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

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

شده است.

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

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

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

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

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

شده است.

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

Hr نام برچسب:

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

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

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

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

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

<html>

<body>

Some text with

<sup>super</sup>

Some more text with

</body>

</html>

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

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

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

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

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

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

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

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

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

LI نام برچسب:

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

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

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

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

مثال لیست هامثال لیست ها<html>

<body>

</body>

</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شوند.

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

Table نام برچسب:

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

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

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

صفحه(

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

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

Tr نام برچسب:

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

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

•Top•Middle•Bottom•Baseline

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

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

Td نام برچسب:

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

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

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

خانه ها(

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

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

<body>

</tr><tr>

</tr></table>

</tr><tr>

</tr></table>

</body>

</html>

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

Tbody نام برچسب:

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

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

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

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

Thead نام برچسب:

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

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

Tfoot نام برچسب:

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

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

Th نام برچسب:

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

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

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

<body>

<th>Month</th>

</tr></thead><tbody><tr>

<td>January</td>

</tr><tr>

<td>February</td>

</tr></tbody><tfoot><tr>

</tr></tfoot></table>

</body>

</html>

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

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

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

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

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

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

فرم هافرم ها

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)پارامتره/ای جداکننده پارامترها از یکدیگر

<<formform>>

ق/رار می گ/یرد. ه/ر Form داخ/ل ی/ک برچس/ب HTMLیک ف/رم •( Submitف/رم می توان/د )در ح/الت معم/ول( ی/ک کلی/د ارس/ال )

Enterداش/ته باش/د، ک/ه ب/ا کلی/ک ش/دن آن ی/ا فش/رده ش/دن کلی/د در ه/ر ج/ای ف/رم، کاوش/گر ب/ه ط/ور خودک/ار محت/وای ف/رم را

ارسال کرده و صفحه را بارگزاری مجدد می کند.یک فرم دو پارامتر اصلی داراست:•

–Method( شیوه ارسال را معین می کند :Get/Post)–Action مقص/دی ک/ه اطالع/ات ب/ه آن ارس/ال می ش/وند را مش/خص :

می سازد.

برای مثال به فرم زیر توجه کنید:•<form></form>

<<inputinput>>

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

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

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

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

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

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

<input type='checkbox'> I am a checkbox! <br/>

<input type='radio'> Radio button! <br/>

</form>

</body></html>

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

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

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

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

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

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

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

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

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

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

<form method='get'

action='http://google.com/search'>

</br>:عبارتی را وارد کنید تا در گوگل جستجو شود

</form>

</body></html>

<<textareatextarea>>

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

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

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

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

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

There</textarea>

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

<<selectselect>>

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

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

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

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

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

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

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

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

</select>

</body></html>

<<label>,<fieldsetlabel>,<fieldset>>

برای تنظیم راهنم/ا و متن مع/رف ی/ک فیل/د در ی/ک ف/رم، به/تر اس/ت •برچس/ب ع/ادی /از/ توان/ایی Labelبج/ای /م/تن اینک/ار/ ک/نیم./ اس/تف/اد/ه

قالب بندی صفحات را بیشتر می کند. اس/ت ک/ه ن/ام ی/ک فیل/د دیگ/ر را دری/افت می Label، Forتنه/ا ص/فت ی/ک •

کند.<label for=‘myname’>Enter your name:</label>

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

Radio:های متعدد الزم است <fieldset>

</fieldset><fieldset>

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

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

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

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

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

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

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

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

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

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

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

وج/ود دارن/د ک/ه در دوره ه/ای HTMLبرچس/ب ه/ای زی/ر ن/یز در •دیگری مطرح خواهند شد:

–Style یک سند :CSSدر درون این برچسب تعریف می شود –Script اس/کریپتهای :Javascript نوش/ته می برچس/ب این درون

شوند–Meta ب/رای تعری/ف مت/اداده در :Head ی/ک س/ند. برچس/ب ه/ای مت/ا

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

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

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

بس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ا مربعی نباشند(

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

Documents

کارگاه توسعه بازيساز ی

پروژه توسعه پایدار

طراحی و توسعه وب

کارگاه مدلسازی

اسلايدهاي کارگاه خلاقيت – بخش...

فارسی در پهنه وب

کارگاه آموزشی وردپرس

توسعه فناوري

کارگاه آموزش مشاوره شغلی

توسعه بازار خدمات توسعه كسب و...

توسعه مشتری

صندوق توسعه ملی

امنیت نرمافزارهای وب

کارگاه الکترونیک

کارگاه پژوهشی

کارگاه نقد

کارگاه تشخیص آزمایشگاهی مواد...

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

کارگاه آموزشی

آموزش طراحی وب سایت جلسه هفتم -...