BIHE V1.0 2015

برنامه نویسی وبHTMLآموزش زبان

BIHE

مقدمه

( اطالع�ات فن�اوری این�ترنت، ITام�روزه قدرتمن�د اب�زار ب�ا )داش�ته کش�ورها ف�نی و علمی پیش�رفت در بس�زایی نقش اس�ت. اهمیت آن بگون�ه ای اس�ت ک�ه دولت ه�ای پیش�رفته و درح�ال توس�عه بخش زی�ادی از بودج�ه خ�ود را ص�رف آن می

(، دولت eLearningکنن�د، ک�ه می ت�وان ب�ه آم�وزش الکترونی�ک )( )e-Governmentالکترونیک الکترونیک تجارت ،)e-

Commerce .و یا موارد مشابه آن اشاره نمود )

BIHE

در این بخش س�عی ش�ده ت�ا مف�اهیم و اص�ول برنام�ه نویس�ی ب�ا آم�وزش داده ش�ود. انتظ�ار می رود، بع�د از ب�ه HTMLزب�ان

پای�ان رس�اندن این آم�وزش ش�ما مف�اهیم اولی�ه برنام�ه نویس�ی ب�ه راح�تی ص�فحات HTMLب�ا بتوانی�د و باش�ید را فراگرفت�ه

وب س�ایت خودت�ان را ایج�اد نمایی�د. لطف�ا توج�ه کنی�د ک�ه جهت نی�از ب�ه ص�رف زم�ان و تم�رین مک�رر داری�د. )توج�ه ی�ادگیری داش�ته باش�ید ک�ه در این بخش تنه�ا مج�از ب�ه اس�تفاده از ن�رم

ی�ا Notepad، Notepadافزاره�ای ویرایش�گر متن مانن�د ++ و Emeditor)هستید

س�والی خ�ود، ی�ادگیری مس�یر هرج�ای در ک�ه ص�ورتی در داش�تید می توانی�د آن�را در ف�روم مرتب�ط ب�ا این بخش مط�رح نتیج�ه و بررس�ی آن�را بتوانن�د ن�یز دانش�جویان ت�ا س�ایر کنی�د بی�ان از هم�واره ک�ه باش�ید داش�ته نظ�ر در و کنن�د گ�یری

انتقادات و پیشنهادات شما عزیزان خوشحال خواهم شد.

با آرزوی موفقیت برای شما

BIHE

تاریخچه

مخفف HTMLزبان که Hyper Text Markup Language تحت عن�وان روش�ی 1991 اس�ت، در س�ال

جهت نم�ایش اطالع�ات در مرورگ�ر ه�ا مع�رفی ش�د. در تکمی�ل 1995س�ال آن ی اولی�ه و واقعی تعری�ف

(HTML 2.0 و در س�ال ،)توس�ط 1997 W3C وی�رایش ب�ا نس�خه قبلی ک�ه ش�امل وی�ژگی ه�ای جدی�د س�ازگار

( شد تکمیل بود تصاویر و ها اپلت HTMLجدول، 3.2 .)

BIHE

نس�خه از 4.0در به�تری پش�تیبانی مجموع�ه این از مت�ون و راس�ت/چپ چین ب�ودن، ج�دول ه�ا و ف�رم ه�ا

ب�رخی از مش�کالت آن 1999ارائ�ه ش�د. ک�ه در س�ال ارتق�ا ی�افت. در س�ال 4.01مرتف�ع گردی�د و ب�ه نس�خه

از 2000 جدی�دی ش�کل HTML ه�ای دس�تاورد ک�ه وس�یع و توان�ایی پش�تیبانی از مرورگره�ای تلفن هم�راه

ارائ�ه و تکمی�ل گردی�د. ک�ه XHTMLداش�ت تحت عن�وان ب�ه روز رس�انی HTML5 ب�ه 2014در نه�ایت در س�ال

گردید.

BIHE

تع�داد مفاهیم پیوس�تن هم ب�ه از ک�ه دنی�ا بزرگ�ترین ش�بکه این�ترنت زیادی از کامپیوتر ها ایجاد شده است.

پروتک�ل ب�ه مع�نی ق�رارداد و ب�ه مجموع�ه قوانی�نی گفت�ه می ش�ود ک�ه دو ی�ا چن�د ک�امپیوتر جهت ارتب�اط )انتق�ال اطالع�ات( ب�ا

اینترنت اصلی پروتکل کنند. رعایت باید TCP/IPهمدیگر (Transmission Control Protocol) قس�مت ک�ه اس�ت IP آن

ه�ای ش�بکه طری�ق از اطالع�ات ه�ای بس�ته انتق�ال وظیف�ه آن هم وظیف�ه تع�یین ص�حت داده و TCPک�امپیوتر و قس�مت

رس�اندن آن ب�ه الی�ه ه�ای قاب�ل اس�تفاده ب�رای ک�اربر را دارد. در س�طوح ب�االتر جهت مش�اهده س�ایت ه�ای اینترن�تی و دری�افت

از HTMLاطالع�اتی ش�امل متن، ص�وت و تص�ویر در ق�الب اس�تفاده می HTTP (Hyper Text Transfer Protocol)پروتک�ل

شود.

BIHE

HTML ن�وعی زب�ان توص�یفی )متف�اوت و آس�ان ت�ر از زب�ان ه�ای برنام�ه ( اس�ت ک�ه ب�رای نم�ایش ص�فحات وب اس�تفاده می Cنویس�ی مانن�د

c تم�امی ص�فحات دری�افتی از این�ترنت ب�ا این زب�ان نوش�ته ش�ود. تقریب�ا( آن را ب�ه م�ا نم�ایش می Web Browsersش�ده و مرورگ�ر ه�ای وب )

زب�ان در کلی�دی کلم�ات ک�ه HTMLدهن�د. ش�ود، می نامی�ده ت�گ مرورگ�ر ب�ا دی�دن ه�ر ک�دام از این ت�گ ه�ا ن�وع خاص�ی از متن ی�ا تص�ویر را

نمایش می دهد.

( )Clientسرویس گیرن�ده تم�امی س�ایت Server( / س�رویس دهن�ده )م�ا ب�رای دهن�ده( )س�رویس س�رور ی�ک طری�ق از اینترن�تی ه�ای )س�رویس گیرن�ده( ارس�ال می ش�ود. ب�ه ص�ورت کلی س�رور هم�واره منتظ�ر دری�افت تقاض�ای ص�فحه ی وب از ط�رف مش�تری اس�ت ت�ا آن ص�فحه را ب�رای او ارس�ال کن�د. ب�ه عن�وان مث�ال هنگ�امی ک�ه م�ا در ن�وار

آدرس ک�نیم، www.bihe.orgآدرس مرورگ�ر خودم�ان وارد می را ( را ب�ه س�روری ک�ه ارائ�ه دهن�ده این وب Requestمرورگ�ر درخواس�تی )

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

گرداند.

( برنام�ه ای اس�ت ک�ه می توان�د ص�فحات Web Browserمرورگ�ر وب )HTML.را نمایش دهد

BIHE

نحوه کد نویسیزب�ان ب�ا نویس�ی برنام�ه ش�روع ی�ک HTMLبرای ب�ه ش�ما

ی�ا Notepad، Notepadویرایش�گر متن مانن�د ++Emeditor و ی�ا م�وارد مش�ابه IE، Firefoxهمچ�نین ی�ک مرورگ�ر وب مانن�د

فای�ل ایج�اد ب�رای گزین�ه HTMLداری�د. انتخ�اب از بای�د پس save as از من�وی file مس�یری ب�رای فای�ل انتخ�اب ک�رده، در

بنویس�ید و گزین�ه html ن�ام فای�ل را ب�ا پس�وند file nameک�ادر save as type را به all files.تغییر داده و سپس ذخیره کنید

را ب�ا ویرایش�گر ه�ای HTML: ش�ما می توانی�د ص�فحات نکت�ه( ای ک�ه FrontPage، Adove Dreamweaverپیش�رفته )... و

ب�رای این منظ�ور ط�راحی ش�ده ان�د ایج�اد و وی�رایش کنی�د. ام�ا را ب�ه خ�وبی فراگیری�د به�تر HTMLاگ�ر مایلی�د ک�ه ک�د نویس�ی

است از ویرایشگرهای ساده متن استفاده کنید.

BIHE

BIHE

HTML ش�امل ت�گ ه�ایی اس�ت ک�ه بین دو عالمت > < ق�رار می گیرن�د، ک�ه معم�وال جف�تی اس�تفاده می ش�وند ب�ه عن�وان

< در p< در آغ�از ی�ک پ�اراگراف جدی�د و ت�گ >/pمث�ال ت�گ >و ت�گ ش�روع بین متن اس�تفاده می ش�ود. پ�اراگراف پای�ان

( نامی�ده می ش�ود. در element contentپای�ان محت�وای عنص�ر ) HTMLادام�ه می خ�واهیم اولین تجرب�ه برنام�ه نویس�ی ب�ا زب�ان

ب�از ک�رده و ک�د Notepadرا داش�ته باش�یم، ب�ه این منظ�ور ی�ک <html>زیر را درون آن تایپ کنید:

<head> <title>Page Title</title>

</head> <body>

<p>Hello to HTML</p> </body> </html>

BIHE

سپس ب�ا اس�تفاده از روش�ی ک�ه در ب�اال ب�ه آن اش�اره ش�د، ک�د خود را ذخیره کنید.

< اس�ت ک�ه ب�ه مرورگ�ر ن�وع فای�ل html>اولین ت�گ این مث�ال پای�انی >/HTMLدری�افتی یع�نی < html و ش�روع آن، و ت�گ

اطالع�ات headپای�ان ص�فحه را اطالع می ده�د. متن بین ت�گ ( نم�ایش Header Informationس�ند ک�ه می کن�د گ�زارش را )

می ت�وان تی�تر ص�فحه وب را tileداده نمی ش�ود. ب�ا کم�ک ت�گ ب�ه مرورگ�ر اطالع داد و در ب�االی ص�فحه مرورگ�ر نم�ایش داد.

تنه�ا اطالع�اتی اس�ت ک�ه توس�ط مرورگ�ر ه�ا bodyمتن بین ت�گ به کاربر نمایش داده می شود.

ه�ای نکت�ه فای�ل :HTML ه�ای پس�وند ب�ا htm ی�ا html می ب�ه htmlتوانن�د ذخ�یره ش�وند ولی ترجیح�ا همیش�ه از پس�وند

کنی�د. پس�وند ه�ای س�ه ه�ا اس�تفاده فای�ل این هنگ�ام ذخ�یره مانن�د ق�دیمی ه�ای عام�ل ب�ه سیس�تم مرب�وط DOSح�رفی

بودند.

BIHE

پایان بخش اول

BIHE

HTMLعناصر و تگ های اصلی

ی دهن�ده تش�کیل اج�زا ه�ا س�عی HTMLت�گ ادام�ه در ک�ه هس�تند خ�واهیم ک�رد ب�ا آنه�ا بیش�تر آش�نا ش�ویم. در این قس�مت ش�ما ب�ا ت�گ ه�ایی

مانند:

آش�نا خواهی�د ش�د. س�عی کنی�د ت�ا ب�ا دنب�ال ک�ردن آم�وزش، تم�رین مث�ال ه�ا و ایجاد تغییر در آنها درک بهتری از این زبان بدست بیاورید.

<p>, <!--Comment-->, <h1> ... <h6>, <br>, <hr>

BIHE

(Headingسر تیتر )< h1< تع�یین می ش�وند، ک�ه >h6< ت�ا >h1>سر تیتره�ا ب�ا ت�گ ه�ای < کوچک�ترین آن اس�ت. مرورگ�ر ب�ه ص�ورت h6بزرگ�ترین س�رتیتر و >

خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند. <html> <head> <title><h1> … <h6></title> </head> <body> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </body> </html>

BIHE

(Paragraphپاراگراف )ت�گ توس�ط ب�ه ص�ورت p>پ�اراگراف مرورگ�ر مع�رفی می ش�ود. >

خودکار یک خط خالی قبل و بعد از پاراگراف اضافه می کند.

<html> <head> <title><p></p></title> </head> <body> <p>This is a Paragraph</p> <p>This is another Paragraph</p> </body> </html>

BIHE

(Line Breaksسطر جدید )

/< br/< استفاده می شود. >br>برای رفتن به سطر جدید از تگ تگ انتهایی ندارد.

<html> <head> <title><br/></title> </head> <body> <p>This is a <br/> Paragraph</p> <p>This is another<br/> Paragraph</p> </body> </html>

BIHE

(Commentتوضیحات ) This is a Comment از ت�گ >!-— HTMLبرای نوش�تن توض�یحات در ک�د

این �ت�گ و متن �وس�ط آن توس�ط مرورگر�ه�ا --< اس�تفاده می� ش�ود. نادیده گرفته شده و در خروجی نمایش داده نمی شود.

در مرورگره�ا، می توانی�د روی آن راس�ت HTML: ب�رای دی�دن ک�د نکت�ه را انتخاب کنید.View Page Sourceکلیک کرده و گزینه

<html> <head> <title><!-- Comment --></title> </head> <body> <p>This is a Paragraph</p> <!-- This is a comment --> <p>This is another Paragraph</p> </body> </html>

BIHE

(Horizontal Lineخط افقی )

/< استفاده کنید.hr>برای جدا کردن قسمت هایی از متن از تگ

<html> <head> <title><hr/></title> </head> <body> <p>This is a Paragraph</p> <hr/> <p>This is another Paragraph</p> </body> </html>

BIHE

ه�ای نکت�ه فای�ل نم�ایش :HTML متف�اوت ه�ای مختل�ف در مرورگ�ر اس�ت، پس س�عی کنی�د ک�د خودت�ان را در چن�د مرورگ�ر مع�روف و ب�ا س�ابقه تس�ت و بررس�ی کنی�د. همچ�نین توج�ه داش�ته باش�ید ک�ه مت�ون

HTML در ص�فحات ب�ا س�ایزهای متف�اوت ب�ه ص�ورت خودک�ار تغی�یر ج�ا می دهن�د، یع�نی ب�ا کوچ�ک و ب�زرگ ک�ردن ص�فحه، نح�وه نم�ایش متن

تغییر می کند.

BIHE

جدول تگ های این بخشتگ کاربرد

<html></html> HTMLشروع و پایان متن

<body></body> HTMLبدنه اصلی صفحات

<h1>…<h6> h6 تا h1تعریف سرتیترهای

<p></p> تعریف پاراگراف

<br>/ ایجاد خط جدید

<hr>/ ایجاد خط افقی در صفحه

—!<Comment>-- توضیحات

BIHE

پایان بخش دوم

BIHE

HTMLفارسی نویسی در

فای��ل ک��ردن ذخ��یره هنگ��ام پنج��ره در سیس��تم ب��رروی

Save As برنام�ه Notepad از UTF-8 گزین�ه Encodingمن�وی

را انتخ�اب ک�رده و ذخ�یره می کنیم.

BIHE

از متات�گ این ک�ار تعری�ف ش�ده HTMLبا اس�تفاده ی ک�ه مخص�وص اس�ت اس�تفاده می کنی�د و ب�ه مرورگ�ر اعالم می کنی�د ک�ه اس�تاندارد

است. UTF-8کدگذاری صفحاتتان

<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>

BIHE

Dirصفت

در زب�ان فارس�ی نگ�ارش از س�مت راس�ت ب�ه چپ و در زب�ان انگلیس�ی از چپ ب�ه م�ا ک�م�ک �م�ی کن�د ت�ا dir( Attributeب�ه ر�اس�ت� ا�س�ت.� �ب�ه �ه�مین� دلی�ل ص�فت �)

چپ� ی�ا� راس�ت �چ�ین ب�ود�ن ص�فح�ات ی�ا� ن�وش�ته� �هایم�ان� را ت�ع�یین ک�ن�ی�م. مق�ادیر این �است که به �ترت�یب �چپ �چین� و �راس�ت چ�ین �می شو�د.rtl و ltrصف�ت

<html> <head> <title>Ζϔλ Dir</title> </head> <body> <p dir="ltr">This is a Paragraph</p> <p dir="rtl"> Ζγϑ ή̳/ έΎ̡2 ̮ ϳϦϳ </p> </body> </html>

BIHE

پایان بخش سوم

BIHE

Formattingقالب بندی

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

BIHE

(Boldتوپر )( از bold ب�ه ص�ورت ت�وپر )HTMLب�رای نش�ان دادن کلم�ات در ص�فحه

< استفاده می کنند.bتگ >

<html> <head> <title><b></b></title> </head> <body> <b>This is bold</b> </body> </html>

BIHE

(Bigبزرگ نمایی )< جمله نوشته شده را به صورت بزرگ نمایش می دهد.big>تگ

<html> <head> <title><big></big></title> </head> <body> <big>This is big</big> </body> </html>

BIHE

( Emphasizeتاکید )< اس�تفاده می em>جهت تاکی�د بیش�تر ب�رروی ی�ک جمل�ه ی�ا کلم�ه از ت�گ

کنیم.<html> <head> <title><em></em></title> </head> <body> This is <em>emphasized</em> </body> </html>

BIHE

(Italicایتالیک )بعض�ی مواق�ع جمل�ه ی�ا کلم�ه ای ب�ه ص�ورت کج ی�ا ایتالی�ک نم�ایش داده

< استفاده می کنند.iمی شود. برای نوشتن به این صورت از تگ >

<html> <head> <title><i></i></title> </head> <body> This is <i>italic</i> </body> </html>

BIHE

(Smallکوچک نمایی )< عم�ل می کن�د، یع�نی جمل�ه ی�ا کلم�ه big< ب�ر عکس ت�گ >smallت�گ >

را کوچکتر نمایش می دهد.<html> <head> <title><small></small></title> </head> <body> <small>This is small</small> </body> </html>

BIHE

(Strongنمایش قوی ) HTMLجهت تاکی�د بیش�تر ب�رروی مطل�بی آن�را پررنگ�تر می نویس�یم. در

< بدین منظور استفاده نمود.strongمی توان از تگ ><html> <head> <title><strong></strong></title> </head> <body> <strong>This is strong</strong> </body> </html>

BIHE

( و باال Sub scriptedنمایش زیر نویس )(Super scriptedنویس )

< ب�رای نوش�تن ت�وان sup< ب�رای نوش�تن زی�ر ن�ویس و ت�گ >sub>ت�گ بکار می رود.

<html> <head> <title> - </title> </head> <body> This is _subscripted <br/> This is ^{superscripted} </body> </html>

BIHE

(Insertedمتن دارای زیر خط )< کلمه ای زیر خط دار ایجاد می کند.insتگ >

<html> <head> <title><ins></ins></title> </head> <body> This is <ins>inserted</ins> </body> </html>

BIHE

(Deletedمتن خط خورده )هنگ�امی ک�ه قیمت جنس�ی تخفی�ف می خ�ورد و قیمت جدی�د ج�ای آن

< ب�رای این منظ�ور اس�تفاده del هم ت�گ >HTMLنوش�ته می ش�ود. در می شود.

<html> <head> <title><del></del></title> </head> <body> The price is <del>2000</del> 1200 </body> </html>

BIHE

(Codeنوشتن کد )اگ�ر نی�از داش�تیم از ن�وع نوش�تار ک�د جهت نم�ایش مت�نی اس�تفاده ک�نیم،

استفاده کنیم.HTML< در کد codeباید از تگ >

<html> <head> <title><code></code></title> </head> <body> This is <code>Code</code> </body> </html>

BIHE

(Keyboardنوشتن تایپی )اگ�ر مای�ل بودی�د نوش�ته خودت�ان را ب�ه ص�ورت ت�ایپی نم�ایش دهی�د، می

< استفاده کنید.kbdتوانید از تگ >

<html> <head> <title><kbd></kbd></title> </head> <body> This is <kbd>keyboard</kbd> </body> </html>

BIHE

(Sampleکد های نمونه برنامه نویسی )گ�اهی اوق�ات نی�از داریم بخش�ی از ک�دهای برنام�ه نویس�ی را ب�ه عن�وان

نم�ایش دهیم. ب�رای این منظ�ور می ت�وان از HTMLمث�ال در ص�فحات < استفاده کرد. sampتگ >

<html> <head> <title><samp></samp></title> </head> <body> This is <samp>sample</samp> </body> </html>

BIHE

(Quotationsنقل قول کوتاه )گ�اهی مواق�ع نی�از داریم جمل�ه را نق�ل ق�ول ک�نیم ب�رای این منظ�ور از

< استفاده می شود.q>تگ <html> <head> <title><q></q></title> </head> <body> This is <q>Quotations</q> </body> </html>

BIHE

(Addressآدرس )< address از تگی ب�ه ن�ام >HTMLجهت نم�ایش آدرس در ص�فحات

استفاده می کنیم.

<html> <head> <title><address></address></title> </head> <body> <address>No.10, St, Tehran, Iran</address> </body> </html>

BIHE

(Citeاستناد )گ�اهی نی�از داریم ب�ه گفت�ه ه�ای شخص�ی اس�تناد ک�نیم ک�ه می ت�وان از ت�گ

<cite.استفاده نمود ><html> <head> <title><cite></cite></title> </head> <body> This is <cite>cite</cite> </body> </html>

BIHE

از ت�گ ه�ا نکت�ه بینی�د خ�روجی ب�رخی : هم�انطور ک�ه در مث�ال ه�ا می ک�امال مش�ابه هم اس�ت و بعض�ی از آنه�ا تغی�یری ایج�اد نمی کنن�د. در این م�وارد ه�دف اس�تفاده از این ت�گ ه�ا تنه�ا مش�خص ک�ردن ن�وع متن در

HTML می باش�د و ق�الب بن�دی متن ب�ه نویس�نده متن HTMLص�فحه وابسته است.

BIHE

جدول تگ های این بخشتگ کاربرد

<b></b> نمایش توپر<big></big> نمایش در اندازه بزرگ<em></em> نمایش به صورت تاکید

<i></i> نمایش کج )ایتالیک(<small><small> نمایش در اندازه کوچک

<strong></strong> نمایش قوی نمایش پایین تر از خط افقی نمایش باالتر از خط افقی

<ins></ins> نمایش به صورت خط زیر <del></del> نمایش به صورت خط خورده

<code></code> نمایش به صورت کدهای برنامه نویسی<kbd></kbd> نمایش متن به صورت صفحه کلید

<samp></samp> نمایش کدهای نمونه برنامه نویسی<q></q> نمایش به صورت نقل قول کوتاه

<address></address> نمایش به صورت آدرس دهی<cite></cite> نمایش استناد به مطلب

BIHE

پایان بخش چهارم

BIHE

بای�د از ت�گ HTMLب�رای تع�یین ن�وع ف�ونت و ان�دازه متن در ی�ک ص�فحه (Fontفونت )<font اس�تفاده نم�ود. اس�تفاده از این ت�گ توص�یه نمی ش�ود و به�تر >

)در آین�ده بررس�ی خ�واهیم ک�رد( جهت این ک�ار اس�تفاده CSSاس�ت از کنی�د. در اینج�ا تنه�ا جهت آش�نایی ب�ا این ت�گ آن�را توض�یح می دهیم. ت�گ

<font دارای سه صفت >size، face و color.است <html> <head> <title><font></font></title> </head> <body> <p> <font size="2" face="Verdana" color="#ff00ff">This is paragraph</font> <br/> <font size="4" face="Times" color="blue">This is another paragraph</font> </p> </body> </html>

BIHE

(Linkپیوند )از ت�گ >HTMLدر a ک�ه ح�رف اول کلم�ه >anchor لنگ�ر ب�ه مع�نی

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

<a href="site url">some text</a>

BIHE

hrefصفت برای مش�خص ک�ردن آدرس ف�ایلی ک�ه می خ�واهیم ب�ه آن لین�ک ک�نیم ص�ورت ب�ه انته�ایی و ابت�دایی ت�گ بین ش�ود.کلمات می اس�تفاده

hyperlink نم�ایش داده می ش�وند. ب�ه عن�وان مث�ال خ�ط زی�ر لین�ک ب�ه سایت

<a href="http://www.google.com">Google.com</a>

BIHE

targetصفت توس�ط این ص�فت ش�ما می توانی�د تع�یین کنی�د ک�ه فای�ل لین�ک ش�ده ب�ه

چه صورتی باز شود.مقادیر کاربرد

_blank پنج�ره جدی�د ی�ک را در فای�ل ی�ا آدرس باز می کند.

_self ب�از پنج�ره فعلی را در فای�ل ی�ا آدرس می کند.

_parent اص��لی ق��اب در را فای��ل ی��ا آدرس (parent frame ( ب�از می کن�د. )درب�اره ی

frame)ها جلوتر توضیح خواهم داد

_top ی�ا فای�ل را در ک�ل پنج�ره فعلی آدرس از ش�دن خ�ارج )ب�رای کن�د. می ب�از

frame).ها استفاده می شود

BIHE

nameصفت

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

HTML ارج�اع دهی�د، و ک�اربر بج�ای پیم�ودن ص�فحه مس�تقیم ب�ه بخش مربوطه منتقل می شود.

<a name="label">some text</a>

BIHE

هنگ�امی ک�ه بخواهی�د ب�ه ی�ک لین�ک دارای ن�ام ارج�اع دهی�د، بای�د انته�ای ن�ام فای�ل عالمت # را اض�افه کنی�د و بع�د از آن ن�ام لین�ک م�ورد نظرت�ان را

بنویسید.<html> <head> <title>name attribute</title> </head> <body> <a href="#tip">Read this part</a> <p>This is a text. </p> <p>This is a text. </p> <p>This is a text. </p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <a name="tip">Read this part</a> <p>This is a text. </p> <p>This is a text. </p> <p>This is a text. </p> </body> </html>

BIHE

Emailلینک به آدرس

داش�ته باش�یم ت�ا ب�ا کلی�ک ب�رروی Emailاگ�ر بخ�واهیم لینکی ب�ه آدرس آن، برنام�ه ه�ای مخص�وص ایمی�ل را در سیس�تم ک�اربر اج�را ک�رده و مح�ل آدرس را ب�ه ص�ورت خودک�ار پ�ر کن�د ب�ه این ص�ورت عم�ل می

کنیم.

<a href="mailto:email@email.com">Send Mail</a>

BIHE

:نکته

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

لین�ک ه�ای دارای ن�ام اغلب ب�رای س�اخت فهرس�ت در ص�فحات ط�والنی HTML.استفاده می شوند

BIHE

پایان بخش پنجم

BIHE

(Tableجدول )

آش�نا خواهی�د HTMLدر این بخش ب�ا مجموع�ه ای از مهم�ترین ت�گ ه�ای شد.

BIHE

،Table، Table Rowجدول، ردیف و ستون )Table Data)

< اس�تفاده می ش�ود. ج�دول از ی�ک ی�ا table>ب�رای ایج�اد ج�دول از ت�گ table row مخف�ف کلم�ه tr( >trچن�د س�طر تکش�یل ش�ده ک�ه ب�ا ت�گ >( از ی�ک ی�ا چن�د خان�ه س�لول rowاس�ت( مع�رفی می ش�ود. ه�ر ردی�ف ) table data مخف�ف کلم�ه td( >tdتش�کیل ش�ده ک�ه ب�ا اس�تفاده از ت�گ >

اس�ت( تعری�ف می ش�ود. محت�وای ی�ک س�لول می توان�د مجموع�ه ای از متن، تصویر، فهرست و ... باشد.

BIHE

<html> <head> <title><table><tr><td></td></tr></table></title> </head> <body> <table border="1"> <tr> <td>row 1, col 1</td> <td>row 1, col 2</td> <td>row 1, col 3</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> <td>row 2, col 3</td> </tr> </table> </body> </html>

BIHE

borderصفت این میزان ض�خامت خ�ط دور ج�دول را نش�ان می ده�د، ک�ه ه�ر چ�ه

0م�یزان بزرگ�تر باش�د خ�ط ض�خیم ت�ر می ش�ود و در ص�ورتی ک�ه مق�دار به آن بدهیم خط دور جدول نمایش داده نمی شود.

td; درون ی�ک nbsp&: جهت نم�ایش س�لول خ�الی از ک�ارکتر وی�ژه نکت�هاستفاده کنید.

BIHE

(Table Headسر ستون در جدول )< استفاده می کنیم.th>جهت نمایش سر ستون در جدول از تگ

<html> <head> <title><th></th></title> </head> <body> <table border="1"> <tr> <th>row 1, col 1 head</th> <th>row 1, col 2 head</th> <th>row 1, col 3 head</th> </tr> <tr> <td>row 1, col 1</td> <td>row 1, col 2</td> <td>row 1, col 3</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> <td>row 2, col 3</td> </tr> </table> </body> </html>

BIHE

عنوان در جدول< می توانید عنوانی برای جدول تعیین کنید.caption>توسط تگ

<html> <head> <title><caption></caption></title> </head> <body> <table border="1"> <caption>this is Caption</caption> <tr> <td>row 1, col 1</td> <td>row 1, col 2</td> </tr> </table> </body> </html>

BIHE

Colspanصفت برای درک مفهوم، مثال زیر را تست کنید.

<html> <head> <title>Colspan</title> </head> <body> <table border="1"> <tr> <td colspan="2">row 1, col 1</td> <td>row 1, col 3</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> <td>row 2, col 3</td> </tr> </table> </body> </html>

BIHE

Rowspanصفت برای درک مفهوم، مثال زیر را تست کنید.

<html> <head> <title>Rowspan</title> </head> <body> <table border="1"> <tr> <td rowspan="2">row 1, col 1</td> <td>row 1, col 2</td> <td>row 1, col 3</td> </tr> <tr> <td>row 2, col 2</td> <td>row 2, col 3</td> </tr> </table> </body> </html>

BIHE

Cellspacingصفت بین خان�ه ه�ای ج�دول ایج�اد فض�ای خ�الی بیش�تر ب�رای این ص�فت از

استفاده می شود.<html> <head> <title>Cellspacing</title> </head> <body> <table border="1" cellspacing="10"> <tr> <td>row 1, col 1</td> <td>row 1, col 2</td> <td>row 1, col 3</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> <td>row 2, col 3</td> </tr> </table> </body> </html>

BIHE

جدول تگ های این بخشتگ کاربرد

<table></table> تعریف جدول

<tr></tr> تعریف ردیف

<td></td> تعریف ستون

<th></th> تعریف سر ستون

BIHE

پایان بخش ششم

BIHE

HTMLحروف خاص در

مفه�وم خاص�ی دارن�د )مانن�د >( و نمی HTMLبعض�ی از ح�روف در ت�وان از آنه�ا در متن اس�تفاده ک�رد. ب�رای این منظ�ور از اس�امی مع�ادل

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

فاص�له ه�ا را در مت�ون نادی�ده می گ�یرد، HTML: ب�ه ط�ور معم�ول نکت�ه فاص�له ایج�اد کنی�د بای�د از مع�ادل آن 10 متن 2اگ�ر نی�از داری�د ک�ه بین

; است، استفاده کنید.nbspکه &

BIHE

برخی از حروف خاص و معادل های آنهانتیجه نام حرف معادل

Non-breaking space &nbsp; < Less than &lt; > Greater than &gt;& Ampersand &amp;“ Qultation mark &quot;© Copyright &copy;® Registered Trademark &reg;

BIHE

HTMLرنگ ها در می ت�وان اس�تفاده RGB, HEX, Nameاز رن�گ ه�ا توس�ط س�ه روش

ک�رد. ب�ه عن�وان مث�ال س�ه دس�تور زی�ر رن�گ پس زمین�ه را ب�ه س�یاه تغی�یر می دهند.

به�تر اس�ت از از دو Nameدر اس�تفاده از رن�گ ه�ا اس�تفاده نکنی�د و روش دیگ�ر اس�تفاده کنی�د، چ�ون ن�ام رن�گ ه�ا ب�رای هم�ه مرورگ�ر ه�ا ممکن اس�ت قاب�ل اس�تفاده نباش�د و مح�دودیت در تع�داد ف�راوان رن�گ

میلی�ون رن�گ 16 ی�ا 256×256×256 می توان�د ت�ا RGBدارد. روش ایجاد کند.

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

BIHE

پایان بخش هفتم

BIHE

(Ordered List, Unordered Listفهرست ها )

BIHE

(Unordered Listsفهرست های نامرتب )فهرس�تهایی هس�تند از تع�دادی اطالع�ات ک�ه معم�وال ب�ا دای�ره ت�وپر س�یاه رن�گ در کن�ار آن نم�ایش داده می ش�وند. ی�ک فهرس�ت ن�امرتب ب�ا ت�گ

<ul></ul< ت�گ ه�ای داخ�ل ایج�اد می ش�ود. و اطالع�ات >li></li >< ت�گ داخ�ل گیرن�د. می تص�ویر، liق�رار پ�اراگراف، از ت�وان می >

فهرست های دیگر و ... استفاده نمود.<html> <head> <title><ul>,<li></title> </head> <body> <ul> <li style="color:Red">red</li> <li style="color:Blue">blue</li> </ul> <ul dir="rtl"> <li style="color:Red">ΰϣή̳ϗ </li> <li style="color:Blue">̶NΑ </li> </ul> </body> </html>

BIHE

(Ordered Listفهرست های مرتب )

می ش�روع ع�دد ب�ا معم�وال ک�ه هس�تند اطالع�ات از ه�ایی فهرس�ت < می توان ایجاد کرد.ol></ol>شوند. یک فهرست مرتب را با تگ

توضیح خواهم داد. CSS بعدا در بخش styleدر خصوص صفت جدید <html> <head> <title><ol>,<li></title> </head> <body> <ol> <li style="color:Red">red</li> <li style="color:Blue">blue</li> </ol> <ol dir="rtl"> <li style="color:Red">ΰϣή̳ϗ </li> <li style="color:Blue"> N̶Α </li> </ol> </body> </html>

BIHE

(Definition Listفهرست های تعریفی )< ش�روع می ش�ود، عن�وان مطلب را ب�ا dl></dl>فهرس�ت تع�ریفی ب�ا

< نمایش می دهند.dd></dd< و توضیح آنرا با تگ >dt></dtتگ ><html> <head> <title><dl>,<dt>,<dd></title> <meta charset="utf-8" content="text/html" http-equiv="content-type" /> </head> <body> <dl dir="rtl"> <dt>ϪϣΪϘϣ </dt> <dd>ϪλϼΧ ϪϣΪϘϣ </dd> <dt>Ϟμϓ ϝϭ </dt> <dd>ϪλϼΧ Ϟμϓ ϝϭ </dd> <dt>Ϟμϓ ϡϭΩ </dt> <dd>ϪλϼΧ Ϟμϓ ϡϭΩ </dd> </dl> </body> </html>

BIHE

typeصفت

توس�ط این ص�فت می توانی�د عالمت کن�ار فهرس�تهای ب�دون ش�ماره و ش�ماره دار را تغی�یر دهی�د. ش�کل ه�ا عبارتن�د از س�ه ن�وع دای�ره ت�وپر،

ت�و خ�الی و مرب�ع ) ( و ش�ماره گ�ذاری ه�ا square و disc، circleدای�ره و I II III( "a، A، i" و "a b c”، “A B C”، "i ii iiiعبارتن�د از چه�ار ن�وع “

I.)

BIHE

جدول تگ های این بخشتگ کاربرد

<ol></ol> تعریف فهرست مرتب

<ul></ul> تعریف فهرست نا مرتب

<li></li> تعریف یک آیتم از فهرست

<dl></dl> تعریف فهرست تعریفی

<dt></dt> تعریف عنوان فهرست تعریفی

<dd></dd> تعریف توضیح فهرست تعریفی

BIHE

پایان بخش هشتم

BIHE

(Imagesتصاویر ) نم�ایش دهیم، ب�رای HTMLگ�اهی نی�از داریم ک�ه تص�ویری را در ص�فحه

/< ی�ک ت�گ تنه�ا اس�ت، اس�تفاده ک�رد. imgاین منظ�ور می ت�وان از ت�گ > مسیر فایل تصویر را تعیین می کنیم.srcم با استفاده از صفت

<html> <head> <title><img/></title> </head> <body> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5 Logo" title="HTML5 Logo" /> </body> </html>

BIHE

title و altصفت

ص�فت همچ�نین altاز ش�ود. می اس�تفاده تص�ویر توص�یف ب�رای موتوره�ای جس�تجو از این ص�فت جهت دس�ته بن�دی آن عکس اس�تفاده ب�ه ک�اربر نم�ایش داده ب�ه ه�ر دلی�ل می کنن�د. در ص�ورتی ک�ه تص�ویر

تعری�ف ک�رده ای�د، نم�ایش داده altنش�ود ب�ه ج�ای عکس عب�ارتی ک�ه در می شود.

ب�رای نم�ایش توض�یحات تص�ویر ب�ه ک�اربر اس�تفاده می titleاز ص�فت شود.

BIHE

تغییر ابعاد نمایش تصویره�ای از ص�فت اس�تفاده و widthب�ا height نم�ایش ابع�اد توانی�د می

را کنی�د ک�ه ط�ول و ع�رض ی�ا کوچک�تر ک�رد )دقت بزرگ�تر را تص�ویر متناسب تغییر دهید، تا تصویر واضح نمایش داده شود(.

<html> <head> <title><img width height/></title> </head> <body> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5 Logo" title="HTML5 Logo" width="256" height="256" /> </body> </html>

BIHE

پایان بخش نهم

BIHE

(form، inputفرم ها و ورود اطالعات )

اس�ت ک�ه ک�اربر می توان�د ب�ا HTML( ناحی�ه ای در ص�فحه formف�رم )اس�تفاده از اج�زایی ک�ه در آن ق�رار گرفت�ه اس�ت اطالع�ات م�ورد نی�ازش

را وارد کند و آنرا برای انجام کاری به سمت سرور ارسال کند.

آن�را inputت�گ > مختل�ف ه�ای ح�الت ک�ه اس�ت ک�اربرد پ�ر بس�یار >بررسی خواهیم کرد.

BIHE

textboxاز این مشخص�ه زم�انی ک�ه بخ�واهیم از ک�اربر کلم�ات ی�ا اع�داد دری�افت

” تع�یین type=”textک�نیم، اس�تفاده می ش�ود ک�ه ب�ا اس�تفاده از ص�فت می ش�ود. ان�دازه پیش ف�رض ب�رای این مشخص�ه در اک�ثر مرورگره�ای

نی�از ب�ه تغی�یر مق�دار پیش ف�رض داری�د می 20 ح�رف اس�ت ک�ه اگ�ر ”(. size=”40 استفاده کنید )sizeتوانید از صفت

First name: <input type="text" name="firstname" />

BIHE

radiobuttonهنگ�امی ک�ه بخ�واهیم ک�اربر از بین چن�د گزین�ه ی�ک ی�ا تع�داد مح�دودی را

” اس�تفاده ک�رد. اگ�ر ن�ام type=”radioانتخ�اب کن�د می ت�وان از ص�فت گزین�ه ه�ا یکس�ان تعری�ف ش�وند، ب�ا انتخ�اب یکی از گزین�ه ه�ا، گزین�ه دیگ�ر

از ب�ا اس�تفاده انتخ�اب خ�ارج می ش�ود. ت�وان checkedاز ح�الت می تعیین کرد که گزینه به صورت پیش فرض انتخاب شده باشد.

<input type="radio" name="gender" value="male" checked /> Male <br/> <input type="radio" name="gender" value="female" /> Female

BIHE

checkbox

ه�ای گزین�ه ک�اربر بخ�واهیم ک�ه هنگ�امی ب�اال مانن�د ن�یز م�ورد این از ص��فت ب��ا ک��ه ک��نیم. می اس��تفاده کن��د، انتخ��اب را مح��دودی

type=”checkbox تع�یین می ش�ود، و ک�اربر می توان�د همزم�ان چن�دین ” اس�تفاده ش�ود، گزین�ه ب�ه ص�ورت checkedانتخ�اب داش�ته باش�د. اگ�ر از پیش فرض انتخاب می شود.

<input type="checkbox" name="car" />

BIHE

password

از ت�وان می عب�ور کلم�ه دری�افت اس�تفاده type=”passwordجهت ”کنیم، که در این صورت بجای حروف * نمایش داده می شود.

User name: <input type="textbox" name="username" /> <br/> Password: <input type="password" name="pass" />

BIHE

button تعری�ف ک�رد و button” می ت�وان type=”buttonب�ا اس�تفاده از ص�فت

آن�را ب�ا اس�تفاده از ” می ت�وان تعری�ف ک�رد. value=”textنوش�ته روی ت�گ >buttonایج�اد از اس�تفاده ب�ا button .اس�ت پ�ذیر امک�ان ن�یز >

عکس العم�ل مرتب�ط ب�ا آن بس�ته ب�ه م�وارد و ک�اربرد ه�ای مختل�ف می توان�د متغ�یر باش�د ک�ه در مب�احث آین�ده در این م�ورد ص�حبت خ�واهیم

</"input type="button" value="Send>کرد.<button>cancel</button>

BIHE

dropdown فهرس�تی از گزین�ه ه�ایی ک�ه تنه�ا یکی از آنه�ا قاب�ل مش�اهده اس�ت، میباش�د و ب�ا کلی�ک ب�رروی آن ب�اقی گزین�ه ه�ا نم�ایش داده می ش�وند. ب�ا

ت�گ از ب�ا select>اس�تفاده آن ه�ای گزین�ه و ش�ود می تعری�ف >ت�گ > از پیش optionاس�تفاده ب�ه ص�ورت اض�افه می ش�ود. آن ب�ه >

ف�رض گزین�ه اول انتخ�اب می ش�ود. ک�ه می ت�وان ب�ا اس�تفاده از گزین�ه selected< ت�گ ب�ه ک�ه option را دیگ�ری گزین�ه ش�ود، می اض�افه >

<"select name="cars>انتخاب کرد.<option value="Volo">Volo</option> <option value="Audi" selected>Audi</option>

</select>

BIHE

textareaدر ص�ورتی ک�ه نی�از داش�ته باش�ید متن ط�والنی ت�ر از ی�ک خ�ط از ک�اربر

< اس�تفاده کنی�د. ب�ا اس�تفاده textarea>دری�افت کنی�د می توانی�د از ت�گ می توانی�د تع�داد س�طر و س�تون آن�را جهت cols و rowsاز ص�فت ه�ای

نمایش تعیین کنید.

<textarea name="text1" rows="5" cols="10"></textarea>

BIHE

fieldset

< می توانی�د ی�ک گ�روه بن�دی تعری�ف کنی�د، fieldset>ب�ا اس�تفاده از ت�گ < درون این ت�گ می توانی�د ب�رای گ�روه legendو ب�ا اس�تفاده از ت�گ >

بندی عنوانی را تعریف کنید.

<fieldset> <legend>Health Information</legend> Height: <input type="text" size="3"/> Weight: <input type="text" size="3"/> </fieldset>

BIHE

submit در فرم ها و actionصفت کلی�ک می کن�د، اطالع�ات ف�رم ب�ه فای�ل submitوق�تی ک�ه ک�اربر ب�رروی

ن�ام فای�ل ی�ا آدرس را actionی�ا آدرس دیگ�ری ارس�ال می ش�ود. ص�فت مش�خص می کن�د. در آنج�ا ب�ا اس�تفاده از یکی زب�ان ه�ای برنام�ه نویس�ی س�مت س�رور می ت�وان اطالع�ات را دری�افت نم�ود. در این م�ورد در

آینده بیشتر صحبت خواهیم کرد.<html> <head> <title><form></title> </head> <body> <form name="input" action="action.asp" method="get"> User Name: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> </body> </html>

BIHE

” ب�ه ک�اربر این امک�ان type=”reset: ش�ما می توانی�د ب�ا اس�تفاده از نکت�هرا بدهید که اطالعات فرم را به صورت پیش فرض در بیاورد.

BIHE

پایان بخش دهم

BIHE

(headسربرگ )

اس�ت. عناص�ر HTMLاین ت�گ ش�امل اطالع�ات عم�ومی درب�اره ص�فحه داخ�ل این ت�گ توس�ط مرورگ�ر نم�ایش داده نمی ش�وند. ت�گ ه�ایی ک�ه

< تگ از >headدر عبارتند هستند استفاده و تعریف قابل >title>, <base>, <link>, <meta>, <style< و >script>

BIHE

title

ب�ا اس�تفاده از این ت�گ می ت�وان عن�وانی ب�ه ص�فحه بی�افزایم ک�ه در ن�وار عنوان مرورگر نمایش داده شود.

<html> <head> <title>The Title</title> </head> <body> </body> </html>

BIHE

base را تع�یین ک�رد، و دیگ�ر نی�ازی ب�ه targetتوس�ط این ت�گ می ت�وان ص�فت

< ه�ای ت�گ در مج�دد ص�فت aتع�یین م�ورد در نیس�ت. >target ب�ه صورت کامل قبال توضیح داده شد.

<html> <head> <title>The Title</title> <base target="_blank"/> </head> <body>

<a href="http://www.bihe.org">bihe.org</a> </body> </html>

BIHE

meta و ارائ�ه اطالع�ات اض�افی در خص�وص محت�وی ص�فحه ت�گ این هدف nameکلم�ات کلی�دی آن ب�ه موتوره�ای جس�تجو اس�ت. ک�ه از دو ص�فت

اس�تفاده می ش�ود. ب�رخی از موتوره�ای جس�تجو ب�ا اس�تفاده contentو از این اطالعات صفحات را دسته بندی می کنند.

توضیح درباره صفحه

کلمات کلیدی صفحه

گ�اهی نی�از اس�ت ک�ه ک�اربران ی�ک س�ایت بع�د آدرس جدی�د ارج�اع داده ش�وند در این ص�ورت می ت�وان از این ت�گ ب�ا خصوص�یات زی�ر اس�تفاده

کرد.

<meta name="description" content="Web Programming Course"/>

<meta name="keyword" content="html, css, javascript"/>

<meta http-equiv="refresh" content="0; url=http://www.bihe.org/" />

BIHE

link

اس�تفاده می ش�ود. در این CSSاز این ت�گ بیش�تر جهت اف�زودن فای�ل مورد در آینده بیشتر صحبت خواهیم کرد.

<link rel="stylesheet" type="text/css" href="style.css" />

BIHE

style

اس�تفاده HTML ب�ه ص�فحه CSSاین ت�گ ن�یز جهت اف�زودن دس�تورات می شود. در این مورد نیز در آینده بیشتر صحبت خواهیم کرد.

<style type="text/css"> body {background-color: black;} </style>

BIHE

script و ... در javascriptاین ت�گ ن�یز در ص�ورتی ک�ه بخ�واهیم از دس�تورات

به�ره ب�بریم، ب�ه ک�ار ب�رده می ش�ود. ک�ه ب�ه دو روش HTMLص�فحات ب�ه مرب�وط بخش در ن�یز م�ورد این در اس�ت. اس�تفاده قاب�ل زی�ر

javascript.بیشتر صحبت خواهیم کرد <html> <head>

<script> document.write("Hello World!"); </script>

</head> <body> </body> </html>