html training course in persian

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

HTMLبخش اول -

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

عناوین مطرحی

وب چیست؟•–Web 2HTTPپروتکل –کاوشگر وب–HTTPSپروتکل –FTPپروتکل –پروتکل های دیگر وب–

•HTMLچیست؟

وب چیست؟

وب چیست؟

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

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

وب، • سند یا HTMLاستانداردترین HyperText 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پروتکل

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

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

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

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

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

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

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

کاوشگر وب

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

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

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

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

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

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

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

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

HTTPSپروتکل

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

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

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

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

اس/ت احتی/اج ام/نیت ب/ه ک/ه ه/ایی وب تم/امی در پروتک/ل استفاده می گردد.

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

ب/ه مراک/ز ت/ا ی/ک گواهینام/ه دیجیت/ال، الزم اس/ت تهی/ه ب/رای ه/زار توم/ان ب/رای ه/ر 100اعط/ای گ/واهی هزین/ه ای مع/ادل

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

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

FTPپروتکل

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

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

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

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

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

)مانن/د ظ/اهری نم/ود دارای س/ند ب/رای HTMLهیچ HTTP )ندارد.

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

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

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

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

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

HTMLچیست؟

HTML چیست؟

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

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

قالبی را داراست. و PDFمی ت/وان آن/را ی/ک ف/رمت خیلی س/اده دانس/ت ک/ه مانن/د •

Word تص/ویر، متن و داده ه/ای دیگ/ر را در کن/ار یک/دیگر نم/ایش می دهد.

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

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

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

ق/رار می گ/یرد، و پای/ان برچس/ب همانن/د ش/روع آن، فق/ط ب/ا تفاوت یک / است:

<tagName>tagdata here, as mush as you want </tagName>

برچسب چیست؟

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

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

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

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

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

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

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

برچسب ریشه

، ب/ا برچس/ب ه/ای خ/ود ی/ک س/اختار 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. ب/ایت می گ/یرد و 1: در این م/دل ه/ر ک/اراکتر ASCIIکاراکتر بن/دی 1.

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

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

تبدیل می شود.بن/دی 3. این م/دل، ه/ر ک/اراکتر Unicodeکاراکتر ب/ایت می 2: در

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

پشتیبانی شده است.UTF-8استاندارد اصلی آن،

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

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

ویندوز، یکسره و بدون خط بندی به نظر می رسند.

HTMLنکات

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

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

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

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

.1Microsoft Frontpage

.2Adobe Dreamweaver

.3ZendStudio for Eclipse

HTMLبرچسبهای

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

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

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

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

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

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

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

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

<html>برچسب

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

HTML نام برچسب:

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

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

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

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

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

<html>مثال

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

<head></head>

<body>

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

</html>

<html><head></head>

<body>

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

<head>برچسب

Head نام برچسب:

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

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

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

استفاده شوند.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 ک/اربرد حرف/ه ای )جهت تخصیص/ی ی/ک نقش/ه منطق/ه :

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

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


<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 نام برچسب:

ی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ب این

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

<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تعریف متن وظیفه:

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


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

شده است.

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

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

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

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

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

شده است.

< hr>برچسب

Hr نام برچسب:

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

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

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

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

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

<body>

Some text with

<sup>super</sup>

text.

<hr/>

Some more text with

<sub>sub</sub>

text.

</body>

</html>

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

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

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

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


را ای گلول/ه ی/ا و ع/ددی لیس/ت ی/ک مح/دوده برچس/ب دو این می ت/وان 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یک جدول کامل با یک برچسب •(، ی/ک قس/مت Headerهر ج/دول می توان/د ی/ک قس/مت ب/االیی )•

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

شوند.

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



<td>Cell 22</td>

</tr></table>

</body>

</html>

<Tbody>برچسب

Tbody نام برچسب:

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

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

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

<Thead>برچسب

Thead نام برچسب:

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



<Tfoot>برچسب

Tfoot نام برچسب:

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



<Th>برچسب

Th نام برچسب:

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


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ص/فحات وب ب/ه ی/ک س/رور، از فرمه/ای شود.

هس/تند. ب/ه هنگ/ام HTMLفرم و اج/زای آن ن/یز برچس/ب ه/ای •( اتوماتی/ک Submitارس/ال ص/ورت ب/ه کاوش/گر ف/رم، ی/ک )

محتوای درخواست فرم را به سرور ارسال می نماید. ایس/تا Getبا اس/تفاده از اتص/االت، می ت/وان درخواس/ت ه/ای •

ایجاد کرد.:Post و Getدرخواست ها دو نوع معمول دارند: •

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

کیلوبایت(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’>Hello

There</textarea>

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

<select>

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

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

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

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

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

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

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

<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 اس/تفاده ب/رای را برچس/ب ی/ک ب/ه دسترس/ی ت/رتیب :

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

خواهید شد.

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

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

تمرینات

تمرینات

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

( بسFازید و آنFرا بFا مطFالب دلخFواه SBCEیک صFفحه سFه سFتونی )ماننFد 2.( IE و Firefoxپ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د 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اربر 5.طراحی کنید.

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

مجزا باز شود. )قسمتها لزوما مربعی نباشند(

html training course in persian

Technology