صفحه 1:
اموزش كامل
برنامه نویسی
شرکت مودال
صفحه 2:
منظور از وب چیست
* منظور از وب چیست؟
* وب شبکه ای است متشکل از تمامی کامپیوترهای دنیا؛
شبکه ای از شبکه ها.
" اينترنت؛ وبء (اع /نا» /الالالالاا يا ع0 ألالا 0110 لالا
perp eee eye a |)" (-10)
تمامی کامپیوتر های وب میتوانند با هم ارتباط داشته باشند.
۱0 ee OOTP eer ren
. يريوتوكل 41171:2] با هم ارتباط برقرار ميكنند
صفحه 3:
نحوه ی کار کرد وب چگونه است
نحوه کارکرد وب چگونه است؟
اطلاعات وب داخل فایلهائی به نام ۳۵065 ۷۷60 و يا صفحات وب قرار
۳۳
اين فايلها يا صفحات روى 5611/61 (اع/الا يا كامييوترهاى سرويس دهنده
وب ذخيره شده اند.
براى ديدن صفحات وب از نرم افزارى به نام مروركر و یا ۷۷/۵
و ل meee
5 مروركر Netscape Navigator 5 Internet Explorer >35
معروفترين مروركرها حساب ميشوند.
0 ار ل لت ل ¢)-1a S Ee)
اه ع ا الال ات ل لك كت \ Teh [e [=] kel
صفحه 4:
0
در در
NP Ueber ern ا ae ere eI Srp reenL
ا لي ee rae
" اين 601651 يا درخواست بر اساس استاندارد ارتباطى يا
يروتوكل 18 11] بوده و شامل آدرس صفحه مورد نظر ميباشد.
ل چیزی شبیه
ul http://www.internet.com/fag.html
بخش //:۱۲60] نوع پروتوکل و یا استاندارد ارتباطی را تعیین
ميكندء ره ره
و 30.۳۳۲ نام صفحه ای است که باید خوانده شود.
صفحه 5:
مروره گر ها چگونه صفحات وب را نمایش
مى دهند
چگونگی نمایش یک صفحه وب بصورت مستتر در آن
وجود دارد.
ا Rarer renee ewe
كمك تك ها به نمايش صفحات مييردازند.
وظيفه اصلى تك هاى اجتمل ( 15305 111/1 ) بيان
حِكونكّى نمايش اطلاعات ميباشد.
يك تك اجتمل جيزى شبيه <> اين تك ياراكراف است!
</0> است
a
صفحه 6:
0
eee ee eo رتیت 3 ییا
متال بخش مقدمه را در نظر بگیرید:
۳ html><head><title>Title of>
page</title></head><body>This is my first html! page.
Sy jl sl 4igei ***<<b>This text is bold</b></body></html
عنصر اچتمل:
<00۱0>/0 وا ۲6۵ 5ز۲0<>عنصر اچتمل بالا با تگ <وا> شرو
9۳۳ 1
REMIND PIE te CES DECC I4)
one CPST lc 1
body>This is کال بل رن homepage. <b>This text is>
سوت شروع شده واباتكق PE ۳۷۵۰۷0 7
Ned 0> پایان می یابد. همانطور که میبینید گاهی یک عنصر حاوی یک یا چند تگ دیگر
.وظيفه ۳( و 5
0 ا ا NE ener Fea Kee Cae PN)
داده خواهد شد.
و باتگ
. لازم به
صفحه 7:
شناسه های یک تگ (عصط ۷ )
1 Ue Meee ne res ا Weer ees ees Pee)
۱
177۱ 1 fo <e lal ie) oes eeO eS eee) با
اگر میخواهید که رنگ زمینه صفحه اچتملتان سیاه باشد کافی است که به شکل زیر عمل
<"body bgcolor="black>
در مثال عم 00> داراى جهار شناسه مختلف با نامهاى Bail sata alle) alata
ا ل ل ا 0
0" width="100" height="60" align="center" > >
table border='
۵۱/>>
شناسه ها به صورت كلى "مقدارحنام" يا "©ل)|2/١30076-1]" نوشته ميشوند و هميشه به تك شرو
یک عنصر یا ]۴۱6۱6۲۱ اضافه میشوند ود تا مرت ا ا
نشوند از مقادیر قراردادی با ا[ا06]3 آنها استفاده خواهد شد مثلا در تگ 000 اگر شناسه
لخدو رم سفيد براق زمينه صفحه اسنتفاده خواهد شد.
Vy aul Sy she داخل نويسه هاى " و يا ' بنويسيد و اختيار دست شما است فقط در مواردى
Brae Piers 00 oo
صفحه 8:
0 oe
سر تيترها با كمك تك هاى <1([> تا <1(6> تعيين ميشوند.
<11> معرف بزركترين سر تيتر و <176> معرف كوجكترين
سر تیتر است. مرورگر به هنگام نمایش یک سر تیتر بصورت
اتوماتيك يك سطر خالى قبل و بعد از هر سر تيتر اضافه خواهد
كرد.
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
صفحه 9:
(Paragrapks) eal SIU
و CS SEB ere
هنكام نمايش يك ياراكرافه بصورت اتوماتيك يك سطر
خالى قبل و بعد ان آن اضافه خواهد كرد.
p>This is a paragraph</p>> *
<p>This is another
عمتال ۵
صفحه 10:
۱) easy re
" براى رفتن سر سطر جديد از تك <1(]> استفاده ميشود.در
اينحالت يى ياراكرراف جديد ايجاد نميشود. تك <> از
نوع تك هاى خالى بوده و داراى تك انتهائى (مثلا
ل
p>This <br> is a para<br>graph> ®
<with line breaks</p
صفحه 11:
کامنت ها در اچتمل a) 007
" برای نوشتن شرح و توضیحات در مورد کدهای اچتمل باید
از تك خاصى استفاده كنيد. براى اينكار بايد متن و
eye oor) ا ا كت
هاى 601771116101 را در نظر نكرفته و محتوى آنها را
نمايش نخواهد داد و فقط شرح و توضيحات براى برنامه
نويس و ديكر افرادى كه احتمالا در آينده با كد اجتمل كار
خواهند كرد مفيد خواهد بود. (به محل نويسه "!" توجه كنيد!
فقط يكى و آنهم در ابتدا)
<-- This is a comment --!> "
صفحه 12:
چند نکته کاربردی:
اتوجه داشته باشيد كه بدليل وجود مروركرهاى متفاوت (اكسيلوررء نت اسكيب؛ ..) و به دليل تفاوت دقت نمايش صفحه
NGA CaS OS TONE Pcs ااا اا 00
STOW S Sire ae lecon adit eB Ste oS Spey ope mes yo ete
امکینتاش چک کرده و همچنین در دقت های نمایش 800600 و 102426768 آن را امتحان کند.
eet Nuts را رک
خواهد بود. هميشه به ياد داشته باشید که فاصله های اضافی (50266) و خطهای خالی متن در صفحه ادیتور توسط
ا
یک فاصله خالی باید از نویسها ی ا 0 000
۳ 1
۱ wre ee en nye rene)
17:17 6 7۳0 ۳۹ 0
بر ی را
ر بصورت یک فاصله یا 5026 نما
برای ایجاد یک سطر جدید هیچگاه از یک تگ <و> خالی استفاده نکنید و به جای آن از نگ <و> استفاده کنید..
مرورگرها به هنگام نمایش بعضی عناصر بصورت اتوماتیک یک سطر خالی قبل و بعد از آن عنصر نمایش خواهند
eran Ome Le tor Erde es 1
1 ااا © Cer late Cane mee
|صفحات با كمك اين تك از أهم جدا شنده اند..
صفحه 13:
ار
در جدول زیر عناصر معرفی شده در این فصل به همراه لینکهای مربوطه جهت مطالعه بیشتر
آورده شده آست. توجه داشته باشيد كه براى هر عنصر فهرستى از شناسه هايا 5ع]لا0| اك
به اا م ل ل ل
و سعى كنيد كه از آنها استفاده نكنيد.
دهم وج تور وی <html>Defines
616 11لاع0 0)نشانشسروع متنلجتم[16'5] 1لا 00 16 11065 6</ا0001 >
<hi>-<h6>Defines UitexeX ا ae) Beemer oll NA
16 >< 66۳065 1تعریفسر تیترهایا تا و to heading 6
۱7۳ لور ل رازه
<!-->Defines a,iil bs tli<hr>Defines a horizontal rules-> خط
10 nee rade e soni یرای
صفحه 14:
دو نكته بسيار مهم در مورد فارسى نويسى:
ا
ید be aig a ee
است که مطالب این 1 فکته مهم در مات
09 صفحات فارسى است كه براى ايذكار بايد از
10
ass ee UCU MS en ee eet ca
الور مروركر يا ]ع8/010/5 قبل از eS Beha Teena eee 0
ايكر مثلا نيازى به تعيين دستى (دراكسيليرور ) : 0168-8 / 01009/10012006 1601/806/] ) نوع ومأمعمع م
و reece
Cerner te cee
ed (ep meee Cages Ieee et ee ane ter در مورد متین جملات فارسی باد با
کمک روشی جهت تمایش پیش فرش را به "راست به چپ" تغیردهید. شناسه یا 2127:0086 ی به نام 3 یا مان مرع 07۵
ين كار را براى شما انجام ميدهد. اين شناسه داراى دو مقدار ممكن ميباشد
UTF-8 ى
"itr" , Left-to-right text
ت۱۱ ر جب
ما برای نیش جملهفارسسی "سلام بر دنیای وب!" با کمک عناصر م یا ال کافی است که به یکی از شکلهای زیر عمل شود:
mea ysl| ی
BN ener ee ten eels eae
أدر بسيارى از عناصراو تك هاى اجتمل اسكان استفاده لز شناسه 01 ميسر بوده و به عنوان نمونه ميتوان لزأ عناصر زير نام برد:
<, حانامما> , <قط ... 01> , <لا> , <> , <هاطقا> , <تزووط> , <اصاط> , <زة> , <م
,<<pre>, <select> , <span
صفحه 15:
نحوه دیدن سورس کدهای اجتمل ALTDOL)
(Goure
ام ال ی تس در را کافی است که در متوی /۱۷6۷
es Sie ل ا ل ل ا ل ل 3 ل
درون اديتورى باز كرده و قابل ذخيره توسط شما براى استفاده هاى بعدى ميباشد.
Ie Brees) ا ا 0
سورس كد اصلى فريمها كافى است كه ابتدا با كمك روش بالا به مشاهده سورس كدهاى اجتمل
يرداخته (لازم به توضيح است كه در اين حالت فقط تعاريف كلى فريمها قرار دارند.) و سيس
برای دیدن کد اچتمل اختصاصی هر صفحه باید پس للك ۲۳۵/۲ روی هر صفحه
"50100566 /لا16/ا" كرده و كد اجتمل هر فريم را جداكانه ببينيد
SI طراح سايت با كمى 6م5671 ew Sey HED) eleva ا
PES SPM Kelley inca iia 0) lalla si-roll gin @ltscolgam KAZ
ا ee ۱
ISSN5
صفحه 16:
چند نکته کاربردی:
در استفاده از 1006۳۱۲۱6 eer اك اكثر
مرورگرهاء پیوندها با این خطوط ن شان داده مي شوند و این
مساله میتواند کاریران را دچار اشتباه کند .
Peeters رگ رات (C= Petes Dee
و 8 هستند ء اين أطمينان را مي دهد كه صفحه شما توسط همه
EWE ESS ل ا D Ee ew SP ee
به ترتیب بسته شدن تگهاي پاياني در مثال زیر دقت کنید. همان
ow Crean ا 0
شروع شده است » به همین خاطر تگ خاتمه دهنده آن قبل از
ا لل ل
U>version>
<<STRONG>2.0</STRONG></U
صفحه 17:
تكهاى فرمت دهى متون
" ع05م:لا5 130 :3غ 5كاربردلاء] 6010 065165]<ط>نمايشتوير
لاع 19 10068065< 10> نمايشدر لندازم بزركو00<106/10©>
غلا 607010351260 نمايريصور تتاكيد شد ||1]8 1<100611065 >
غ/امنمايشليتايكييا كسجلاء] |517731 5003||<10661065>نمايشدر لندازم كوجىف
6 ند ۲65 < 5۲۲0۳9 >نماشقو ی؟651 6110 (] <حاناو>
ا 06عم11ع05لاونمايشيايينتر از خط لفقروع 10661 <29لا5>
6 66156110660 ناونمايرباثثر از 3& <ins>Defines inserted
غلاع]نمايشبه صورتخط زيرغكاع] 0616860 061<1061765>نمايشريه صورت
خط خوردم<[17566360 <|06 > ع5لا .3660ع06ع(] < و1
Jistrike>Deprecated. Use <del> instead>c 4 )1
¢J4 21) jlu>Deprecated. Use styles instead>z is
<code>Defines computer codes )-sStart TagPurpose *
6 ]نمایشکدهاویرنامه نویسی]6(6] 6۷0۵۲۵ 661065( <00] > نمایشمتن
Uilai<samp>Defines sample computer codesuls ssivat ) pos
fer PAM EES celia (18 oy ee ee ees
31301 3 066065 <3/>نمايشمتغيير هاوع 6ع (]<ع]م >
ل ا 0
صفحه 18:
Character Entities و
Fe mC eerste sar Seer TaPo EE oY ny eonpa poms
کع 6۳۱ ۱۵۲۵016۲ ظ لستفادم کنید. یکوع|] 6۳0۷ 0۱8۲۵616۲ از سه قسمتتشکیل
papery
نویسه (6) 2۳006۲5۵00
2 نام 6۱0 با نوسه #و سپسشماره عددی ناه
3 -و نهایتا نویسه 56۳016010۳ (:)
IO [tw eey EP SOLON Sree EY BON ECT pay 0
در لینمتللا| نام 60۱۷۱۲۷ و 6000 شمارم عددینمیباشد.
pie] ayes Ses ا ا
ا ا ام ا Peer et AN
اره های عددی 6۳01107 هارا بخوبی میشنانند. توجه داشته باشید که 6۳0118
وركي حروف حساس هسئند و در واقع ©/ا[]5©151 ©35) ميباشند.
tl ال ا ا ا ا 0
PN stolen ole-t-lidialepejol-a su neees) م ام ا
در نظر نگرفته (50۵665 ۲۳0۵1:6) و مثلا از 100 نویسه فاصله» 0 تای آنرا نادیده میگیرند و
برای نمایش فاصله های اضافى بايد از 0۳506 استفاده کنید.
رت
صفحه 19:
ا ل 4 6 ۱
Entity Name(¢_—) Description(.4) Result *
non-breaking Gs. 2 4.4) Entity Number(¢\4)
space  <less than<<>greater
than>>&ersand&&"quotatio
ais;n mark""'apostrophe '
۱ زرد وت توا
ResultDescriptionEntity NameEntity Number #*
¢cent¢ ¢£pound££¥yen&
yen;¥§section§§©copyright&cop
y;©@registered
trademark®® x multiplication×&#
لالص
صفحه 20:
تگ وبلاوج؟) و م
و ۱9
۰ Bao: 01
اشاره کنند.
فرم كلى يك بيوند به قرار زير است:
<ة/ >1 و
ene, ا بکار رفته است. برای تعیین
مقصد و یا آدرس صفحه جدید از شناسه ای به نام 1۲6۴] که همان دا
NOS NOL Te ener TO ms Cee ee eer) reference سرا
9 بر ای ) كه Bere ere eye ornare ag
Tae tee eA خواهد Rees eas reer Pees eee
قرار داده ميشود و هر جند كه در مثال بالا اين بخش متن "]“© 71 ©5017" است ولى ميتواند
حتى يك تصوير باشد.
براى نمونه كد اجتمل زير ييوندى به سايت 6017. 000016 ايجاد خواهد كرد:
a href="http://www.google.com/">Visit Google>
>516>/2
صفحه 21:
شناسه بصي-ب, در پیوندها:
با كمك شناسه 131061 امكان تعيين مقصد ييوند جديد فراهم
ميشود. در مثال بالا يس از كليك روی پیوند مروركر سايت
ا ا 0
اگر میخواهید که مرورگر پیوند را در صفحه ای جدید باز کند باید
وت ۱ زور۱ ۱ ۱
OleT) 0 ورت 0 ا ۱
آخواهد شد:
a href="http://www.google.com/"> ®
<target="_blank">Visit Google Site</a
صفحه 22:
شناسه وه :
ااا 0
مختلف یک صفحه یا 0806 را فراهم میکنند. در ایتصورت مثلا برای رفتن به آخر يك متن
01 5001 كردن تعامى صفحه نيست و كافى است كه بازديدكننده روى
اكليك كند.
0000 era
: ایجاد یک پیوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) -)
|
<3/>لعلاةامداك عط مغ ۲6۸ <۱۵061۳ 02۳062۳ و> رظینه شناسه 0۵۳06 تعین نام برای
بيوند است و مقدارآن همان نام بيوند ميباشد. نام بيوند هم هر نام لاتينى ميتوائد باشد. در |
ae 10 د عبارت "0ع/ا13م015 66 0 (16" خواهد بود. مثال زير به ايجاد يك
SERPS CUE 2100
Ra Screen) Mean) Rang pees fae 2
ا ا اننت که پیرندی معمولی ایجاد کرده و ل 0
مقصد وا سيس نويسه ## و در لهايت نام بيوند نامكذارى شده را درج كنيد ینک
نامكذارى شده أى به نام |0 اشاره ميكند.
و ا ا 0
مستقيما به ابتداى بخش 00] صفحه 10060.71 خواهد رفت.
لگر مقصد پیوند در همان صفحه قرار دارد نيازى به قيد 1]لا نيست و فقط نويسه # و سيس نام بيوند كافى است:
<a href="#top"> Goto Top! </a>
صفحه 23:
چند نکته کاربردی در مورد پیوندها:
۰ * یکی از کاربردهای رایج پیوندهای نام گذاری شده در
صفحات و متونی میباشد که فهرست و یا لیستی از اقلام
نمايش داده شده استء مانند بخش سرفصل مطالبء فهرست
60/] و يا ... در همين صفحه در دو مورد از ييوندهاى
نامكذارى شذه استفاذه شده استء آيا ميتوانيد آنها را بيابيد؟!
SES Ia ا كك
ابتداى صفحه مقصد را نمايش خواهد داد.
صفحه 24:
ام تسم
با كمك فريمها قادر به نمايش همزمان بيش از يك صفحه وب در
ينجره مروركر خواهيد شد. a دا رون
ناميده شده و فريمها كاملا مستقل از هم ميباشند. محتواى هر فريم
هم میتواند هر صفحه یا وب سایتی باشد. هر چند که فریمها طراحی
Pe tere rere eis iby serom eee art iy
(CORI Orr reer terre cnn
مغانت 7
موتورهای جستجو با صفحات طراحی شده با فریمها مشکل دارند.
چاپ و 0/1۱1 صفحاتی که از فریمها استفاده میکنند مشکل است.
صفحاتی که از فریمها استفاده میکنند معمولا مبتدی بودن طراح
سايت را نشان ميدهد!!
صفحه 25:
(@raxvesert) رل a
تا
EDS SIE)
Ip pUey eu eeE TODS EE Ree Sila nl] eres
0 ا ا eee OS)
با كمك شناسه هاى 010/5] و 0015 ابعاد و نسبت هر فريم تعيين
ميكردد
JA </html> s <html> cS os <frameset> 5
۲۲2۲0656] میگیرد.(نیازی به قید تگ 000۷ هنكام معرفی یک
دجم
صفحه 26:
0
000 ا 2 ل | n{ =e CS
در فريم ها نمايش داده شود.
مثال زير مجموعه اى از فريمها را كه شامل دو فريم عمودى ميباشند معرفى
ميكند. از سمت جب فريم اول ©72 درصد و فريم دوم ©© درصد از عرض
پنجره مرورگر را به خود نمایش خواهند داد. در ادامه تعریف محتویات هر
eCCNOn Ee Ware is SB) یاهنت ریت۱
اوه زو ررا مروت رای
html><frameset cols="75%,25%"> <frame>
src="frame_left.html"> <frame
ole<src="frame_right.html"></frameset></html
نمایش مثال بالا به سه فایل نیاز دارید»
۳۱۰۲۱ 5 frame_left.html «frame_right.html
صفحه 27:
1 eae ree
۱ Lem eres ES ES Toe) BS Le meee re]
اق ا و ار تور( مسر تمد بر روخ كر رركي علامت 2 تعیین
تعداد و اندازه رديفها در فريم ستمثالهاى زير را در نظر بكير
Melee tees (eo) tobe io) Oh ns odie ila Oa مثال
<frame src="frame_3.html"> <frame
src="frame_2.html"> <frame
و ا ل 0
سطدر سای تم
0 * مشخص Pa Oa ae
۳
DD 1
صفحه 28:
تگ های فریم
۰ 6 "2۳ ک اربرد
<frameset>Defines a set of
ار ۹۱8-۱۸۸۱2
4;)-Defines a sub window (a frame)
<noframes>Defines a noframea 452
section for browsers that do not
هو ۱ ۰۱۳ ۶ 9 9 ۱( ۲9 ۱۳
که از فریم يشتيبانونميكنند. < 111310006 >
Defines an inline sub window
ار هائدرجا (عأ1أ)
صفحه 29:
کر نامرتب(طآ لحم مر
فهرستهائی هستند از یک یا چند قلم اطلاعات که معمولا با دلیر های کوچک و سیاه رنگ در
ا ا Se tee reine e el ee
اطلاعات با تك <1]> مشخص إدد.
5 انمايشتوسط ۲ | ال 11 code
ps0] bed bed tle bd] ped} [4 |p| bala -\lad) eae Oi
Red
Blue
Green
<li> </ul/>se<li> <li/>4<li><li/>sei<ul dir="rtl" ><li>
اقهوه
شیر
oe
داخل تگهای <]۱> میتوانید از پاراگرافهاه تگهای ۵۳ » تصاویر و حتي فهرستهای دیگر استفاده
کنید. به شناسه ]له در مال بالا توجه کنید. امکان تعیین سمت و جهت نمایش متون در تمامی
INO ۱۱ ce
صفحه 30:
Lares و ار(
اعداد به جاى دايره هاى كوجك سياه رنك استفاده ميكند. hci رو و
شروع شده و ا ا ا ا
لي
مروركر<01/> <1/>مع66ن < [|> < [ال>عنا8 < | > <[ال> لعج <> <ام>
Red
كلت
Green
ای
اقهوه
اشير
55
داخل تكهاى <[|> ميتوانيد از ياراكرافها. ا؛ تگهای 9۲ ۰ تصاویر و حتي فهرستهای دیگر استفاده کنید. به
شناسه ]01 در مثال بالا توجه كنيد امكان تعيين سمت و جهت نمايش متون در تمامى تكهاى مربوط به
'فهرستها ممكن ميباشد.
صفحه 31:
فهرست تعريفى فهرستى است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهاى تعريفى با <01> شروع شده و هر نوج اصطلاح و تعريف مربوط به آن با تكهاى
<0> و 00> تعريف ميشونئد.
00 11011 لإنمايشتوسط
م ا ۱۰۱۳
Protocol</dd><dt>FTP</dt><dd>File Transfer
Protocol</dd><dt>IP</dt><dd>Internet
Protocol</dd></dI>HTTP Hypertext Transfer Protocol FTP
File Transfer Protocol IP Internet Protocol <d! dir="rtl"
0 > < >مقدمه</0]<>00>خلاصه لاز مقدمه</06 ><00> فصل
ل ل ا ا ا لي ل 0
Cony eS ET re earner Sides eee
© خلاصه لواز فسصل© دا اىمتشريح يعنى<00> ميتوانيد لز يارلكرلفهاء تكهاى
POETS og ا ا ل ا 0
نيد لمكانتعيينسمدتو جهدتفمايشمتوزدر تمامىتكهاومربوط به فهرستها ممكن
صفحه 32:
تگهای فهرست
* تگهای فیرست
<ol>Defines ans:j-SStart TagPurpose "
۲ 0۲06۲60تعریفف هر ستهاوپر ند 671065 نا <ابا>
مورا( رت زوارت 2۱۳۳9
10 115 وتعريفيكليتم و قلم از یکف پرسندال >
ل ا 2 حر تاه اك ۱۳-0
term 0680110 3 01<1068165>تعريفلصطلح در
فهرستهائتعريفي<11]6101 0115© 3 1165ع0] <00
010 إوتعر يفمعنىو شرح لصطلاح در فهرستهاى
تعريفى
صفحه 33:
" تمامى عناصر و تكّهائى كه تاكنون ديده ايد فقط به نمايش اطلاعات
پرداخته اند و هیچکدام به گرفتن و اخذ اطلاعات از كاربر نيرداخته
so) gag pre n CSPe U ۱ ۳(
قادر به جمع آورى و اخذ اطلاعات از بازديدكننده سايت خواهند
eS ا ل 1 ۳
دريافت و ارسال اطلاعات به سمت وب سرور كمك خواهند كرد و
ات ا ا BIOS
ی ل 5
" درون تك فرم كروه زيادى از عناصر و تگهای مختلف قابل استفاده
ل ا ا ا ا ات 0021
عناصر ورود متنهاى جند سطرى (7]3162© 1)؛ منوهاى
sfadio buttons s drop-down ..
صفحه 34:
Gee re
* به عنوان پر مصرف ترین تگ مربوط به ورود اطلاعات
باید از تگ <ألام(][> نام برد. در اين تگ شناسه ای به
نام ©06/] به تعيين نوع اطلاعات ورودى اختصاص دارد.
مقادير ممكن براى اين شناسه به قرار زيرند:
text , checkbox , radio , password ,
hidden, submit , reset , button , file,
image
در ادامه به شرح بعضى از ©0]/إ] هاى كاربردى خواهيم
يريداخت:
صفحه 35:
۱9 ( ero ney ERY)
0 PS eM ا Pe cP Um eee een Ce er
مقدار "]اع]" ا میشود.
كد اجتملنمايش توسط مروركر< "اه "عع م لإ لام > :عطقم غكرأع <اصره؟
name="firstname"><br>Last name: <input type="text
/ name="lastname”></form>First name:
input type="text">:-._——< "Last name: <form di faa)
fe) ا ا ا ل
ل ل لم0 an
ا ا ا ا ا ل ا ا
0 ا ا ا ام ا Te NCEE Tees]
مقدار ۲۸۱ آن توجه داشته باشید.لازم به یادآوری است که اغلب مرورگرها در حالت پیش
ice le Se ree ie ees re rae ree eee)
بيش فرض وروديهاى متن را تغيير دهيد بايد از شناسه اى به نام 5126 استفاده كنيد.
صفحه 36:
۹
*_اگر میخواهید که بازدیدکننده گزینه ای را از بین چند گزینه محدود انتخاب كند»
از مقدار "۲۵00" برای شناسه 06 10 استفاده کنید:
ice) danbee lel ele mia ota ا ا a)
name="sex" value="male"> Male<br><input
type="radio" name="sex" value="female">
Female</form>Male
Female <form dir="rtl"><input type="radio"
br><input>s » <"name="sex" value="male
<"type="radio" name="sex" value="female
زن</0111؟>مرد
زن همانطور که مشاهده میشود فقط امکان یکی از گزینه ها برای کاربر میسر
ات
صفحه 37:
وروديهاى مر(
اكر ميخواهيد كه بازديدكننده يك يا جند كزينه را از بين جند كزينه محدود
انتخاب كندء از مقدار "“01>اع©(61" براى شناسه ©(لاغ استفاده كنيد:
کد اچتملنمایش توسط مرورگر <الا0 ۳ رن
type="checkbox" name="bike">I have a
bike<br><input type="checkbox" name="car">1
have a car</form>| have a bike
۱۳۵۷6 5 6۵۲ ۲۵۲۳۱ 01۲2۲۲۲۱۳۶۱۵۷
تک ری رکفت رف 9/۱
تا کر ۰ ۱1۱۱9۱5 ره ۱9
دارم</۲0۲۳۱>دو چرخه دارم
ماشین دارم
صفحه 38:
ل وربرانظ) در فرمها
ا tribute مر رم
رس(
سار لس ار را ار
مر بروی این دکمه ل Petters vole ree ۱۹
task oldu csope te kai ee ew oper omer etre لت
. مقدار شناسه 36181017 أدرس يا 61لا فايلى است كه به دريافت و سيس يردازش اطلاعات
دریافتی خواهد . معمولا فایلهای بخش 21101 برنامه ها و اسکرییت هائی نوشته شده با
ربانهای زو مانند ۰۳۱۷۴ ۳۵۲۱ ۸۵۸5۳۰ و ... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس
دازش آنها میباشد
تعيين مقدار "5161016" براى شناسه ©م لاغ سبب نمايش دكمه 506116 يا ارسال خواهد كرديد.
كد اجتملنمايش توسط مروركر< "لام م|"ع- 7306 1017
action="form_action.cgi">Username: <input type="text"
مصیای هو را نم وک 56۳ 23۳06
value="Submit"></form>Username: <form name="input"
input type="text">)s -u<"action="form_action.cgi" dir="rtl
eee sees 3/0 ubmit" valué="Submit"></form روا وس
کاربر در مثال بالا در باکس ورودی متن؛ کلمه ای را وارد B Soper see eyo)
به محض کلیک دکمه ارسال» اطلاعات درون فرم را که در این مثال متنی ساده است به سمت فایلی که
در شناسه 3611011 تعیین شده است ارسال کرده و در اين مثال برنامه ای به زبان |۳6۲ با نام
[0۳۲۳۳_201100.09] در سمت سرور به ذخیره و سپس نمایش متنی خبری خوا
صفحه 39:
ورود متن فارسی در عناصری مانند 4اع] 4عو۲»
يا مه رو
* همانطور که در متالهای بالا مشاهده کردید در مورد المانمای 71610 16 و
۵ با کمک شناسه 01۲ میتوان سمت و جهت ورود اطلاعات را
Serio tn eee 0
ene nes wee Se) لت
به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین
خواهند بوداء در اینگونه موارد چه باید کرد؟
معمولا برنامه نويسان وب براى فراهم ساختن امكان ورود متن فارسى از يكى
از دو روش زير استفاده ميكنند:
٠ استفاده آز ايلتهاى جاو با اين مزيت كه سورس و كد اصلى فارسى سازى
قابل استفاده توسط دیگران نیست!!
ل م ل ا لك
F-\V/-lciel glo) ا م
صفحه 40:
تگهای فرم
form>Defines a form>s.j-SStart TagPurpose =
fa) ob ice واه تخزرارتزه EDEL رت
Input <textarea>Defines 3 آتعریفورودعاز ۱0۱۱۲ ۵
۲۱۵ (a multi-line text input control)
text-area<label>Defines a label Lis po ورودعمتنجند
label <fieldset>Defines a Las +4 to a control
fieldset<legend>Defines a caption_+—fieldset
Ailey oe کات رت
select>Defines a selectable list (a drop-down>s
ولت لت لي ات
4: s~box<optgroup>Defines an option group
option>Defines an option in the> option group
drop-down بر و box
ها<011] ]لاط ١51نام 3 0<1061165]]لااتعر يفدكمه فشارى
fa} ob] eed) LU mola nome p ery
صفحه 41:
تگ پس؛ و شناسه بو یا سر
و
تگ <۳9> از نوع تگهای خالی است. بدین معنا که فقط دارای
يك يا جند شناسه و 3661111056 بوده و داراى تك انتهائى يا
ianle bd 0
" مهمترين شناسه براى درج و تعريف يك تصوير ع5 يا ع©1ل501
نام دارد و مقدار اين شناسه آدرس یا ]لا تصویر میباشد.
تصاویری که مرورگر در یک صفحه وب نمایش میدهد میتوانند در
همان دایرکتوری صفحه اچتمل» در دیگر دایرکتوریهای همان سایت
و یا در فضای بیکران وب قرار داشته باشند.
صفحه 42:
شکل ساده در ج یک تصویر:
<"img src="url> ®
" مقدار |]لا آدرس اينترنتى تصوير ميباشد و مثلا اكّر تصويرى كه
قرار است كه در صفحه درج شود در همان دايركتورى قرار دارد
و نامش er een eco me.jpg ا 000
بعنی ۳۱6,[00] را بنویسید و اگر تصویر در سایتی دیکر قرار
دارد 11لا كامل آنرا بنويسيد. مثلا تصوير لوكو سايت
G url Gls google.com 314
http://www.google.com/images/logo.gif
است.در این ۲۱لا نام تصوير 090.01۴ بوده در دایرکتوری
۳۱۵065 قرار داشته و روی وب سایت 000916.6010 قرار
دارد.
صفحه 43:
ری
* کاربرد شناسه های ۷۷[01|1 و ]6[91۱ تعیین عرض و ارتفاع نمایش تصویر
ccm en cieege is ms Simca ا 0
Ree rene ore See ener Tis eee Es ne Seer eee)
غیر از مقادیر واقعی طول و عرض تصویر میتوانید به شكل و ابعاد آن
SS aes as ee ee 9
eS eer DIED Eee
img> *
src="http://www.google.com/images/logo.gi
Leia 48 a phe dues < "Ff" width="276" height="110
ا ااا ل ل لكك
سیب کمک به مرورگر در تسریع شروع نمایش صفحه خواهد شد.(در واقع با
قید ابعاد تصوبر» مرورگر قبل از لود تصویر میداند که چه مقدار از صفحه
rts re teeter) لك
صفحه 44:
ا یا "ها عمب-سوات" يا متن Res
اگر مرورگر به هر دلیلی نتواند که یک تصویر را نمایش دهد و یا مرورگر از
OER Tar ل ۱
کمک شناسه ]| تعبین شده است نمایش داده خواهد شد. همچنین در اغلب
ل TEE Te CUED TOT NE 1
PRB peg yer le rer UA Ir] | eco SEEN Ear Ye teNIr- | | een Eng
تصوير قابل نمایش میباشد.مثال زیر نحوه درج تصویری را با قید متن
جایگزین آن شرح میدهد:
img src="images/AkseAlaki_88_31.jpg">
<"alt="Fake Pic
صفحه 45:
"0 ee Sey
PC eae gov ce orn ee ete Ee gi Eg peace CENT ECPI Cw EPS]
پیش آید:
۱ eae Cree Se Tad (ae
.ديكر قرار دارد استفاده كنيد. در اين حالت از
: مانند »
img src="http://www.google.ca/images/hp0.g
< width=258 hei
Uwe we HOES oe ree ee ا ا De Te ene)
شما هم میخواهید از آن تصویر که در سایتی
211111111111110
٠ ب) تصوير روى هارد كامييوتر شما است و هنوز بروى وب منتقل نشده است. د
چون اغلب ل ا ل 0
IESE) ۱ 0 ۱ سرت سس حرط
مجانى براى ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و
۱ نا
مر رد۱۳ )0\-)0( a EOI NAO) ۱ ۳۱0 ۱۳۷
سپس در شناسه 5۲ از تگ ۳09] آدرس جدید تصویر را قید کنید.
صفحه 46:
اسف ولد 2
ا on Ee A ا ا ۱
فايل را لود كند.( خود صفحه به علاوه (00) تصوير)
استفاده از تصاویر» سرعت لود شدن صفحات را پایین می آورد.با احتیاط از
ا ا ا م
ا ل ا ۱
281005 استفاده میکند حداقل (SG ثانیه طول خواهد کشید.
براى ديدن مشخصات تصاوير در وب كافى است كه روى تصوير 58101
>اع1اع كرذه و سيس در بخش 106116165 آدرسءابعاد و ظرفيت تصوير
را
براى ذخيره تصاوير در وب كافى است كه روى تصوير >اءذاء غ8191 كرذه
و سيس در بخش "35 ©1لاأء01م 5317/6" أنرا ذخيره كنيد.
صفحه 47:
Bere ye
وت
img>Defines an>s.STagPurpose
6 0درج تصویر <51 6111165( << 11130
0 7306 أتعريف م03 ۱۲۳۱8۵96 يا؟؟؟
area>Defines an area inside an>
ورف تفر رت جزووز
map
صفحه 48:
رنك و تصوير زمينه در صفحات اجتمل:
Te yee Te hid elolo) eae) ی
|
(background color) 45 vy 54) vl: bgcolor 4ukt
شناسه 0900101 رنك يس زمينه را تعيين ميكند. مقدار رنك يس زمينه
try ل Wels eure lo) [CMe ل ا ل د كان
و يا حتى مقدار هكزادسيمال (731أع16«<306]) باشد.
body bgcolor="#000000"><body>
»<"bgcolor="rgb(0,0,0)"><body bgcolor="black
تمامی مثالهای بالا با کمک شناسه 06010۲ رنگ زمینه صفحه "سیاه" تعیین
eye)
صفحه 49:
تس رم سر رای زر 0 لكك
ن تصويرى كه به عنوان بس زمينه صفحه نمايش داده ميشود از شناسه 49/010500 63 استفاده
ار این شناسه 11 با آدر س تصویز Sree ee eee Sree Os
باشدء تصوير زمينه تكثير خواهد شد تا حدى كه تمام صفحه نمايش از تصوير زمينه بوشائده شود.
body background="bg.gif"><body>
0 ل aL ا etree ere
reed ا Bie eee ee nie eee re er ses
0.01 باد یک دابركتورى قرار گر در مقابل مثال دوم از أدرس دهى مطلق (ع]05010ق) براى تعيين
أدرس عقاف فده bed Sip SE Geetha es مره تلد از لحان ري ميكل لد 7
1
هرتصويرى با فرمت 911 و يا 00[ قابل استفاده به عنوان تصوير زمينه
به هیچ 100100100
۳
لا
eee icem yen myn
در رژولوشنهای مختلف به دیدن و آزمایش تصاویر پس زمینه بپر
پر مصرف ترین رنگهای زمینه وب سایتهاه رنگهای سفید؛ سیاه و خاکستری میباشند.
آغلب سایتهای وب از تصاویر پس زمینه استفاده نمی کنند! مثلا همین سایت!!1
صفحه 50:
0 ا MIpS IT Erte
XALTOL 5
background s bgcolor uls 4.45 = 53 3
</ا1001> در نسخه *6 اجتمل و 1111/1 يشتيبانى
نميشوند و در واقع از ريده خارج محسوب ميشوند. در
عوض كنسرسيوم 36 /الا استفاده از 517661 ©51[/1 ها
را توصیه میکند و در واقع در نسخه 6 اچتمل و استاندارد
جديد 1/1 111لا تمامى اطلاعات مربوط به نمايش يا
presentation و آنا0لا3| بايد درن style sheet
ها قرار كيرند.
صفحه 51:
<Pou> Si
* در نسخه هاى ©.2 و قبلى تر زبان اجتمل از تك <]8010> براى تعيين نام
قلم» رنگ و اندازه متون استفاده میشود. در ل 0
hi) م ا ا ا لك
eure را ا rece IED)
كد اجتمل نمايش كد روبرو توسط مروركر<"2"- 5126 101 > <م
face="Verdana">This is a
paragraph. </font></p>This is a paragraph. <p
dir: |"><font size="1" face="Times"
Ss) 52 j) 5 Times ab U&<"color="#FF9900
SPs Mil
FF9900 <p di
5 Tahoma ef & Li u!<"face="Tahoma" color="red
اندازه © و رنگ قرمز </0۳<>/۵]>متنی با قلم 13110702 و اندازه
9
صفحه 52:
شناسه های تگ <بم۳(>
size="number"siza-SAttributeExample
وك فار
ا و ل م دا ۱
jal sLS"size="-number"size="-1al4
er ain (1-1 ل
ox—"color="color-value"color="#eeff00.
oue—"color="color-name" color="red.
Ae my eee Tia ا ا ا
اطلاع بوده و استفاده از آنها در طراحى صفحات اجتمل توصيه
نمیشود.
صفحه 53:
eg IPL COPY استفاده نكنيد!
و ی
جهانی تعیین استانداردهای وب (۷۷6 ۷۷۱06 ۷۷۵۲۱۵
oL@ | ,11۳۱ [:20۳50۲)) این تگ را از مجموعه تگهای
استاندارد اجتمل كنار كذاشته است و اكيدا توصيه ميشود كه
ا CaP er Se
نمایشی و آرایشی (۳۳۵56۳۲۵10۳ 6 ]با ۱2۷)
المانها در اچتمل استفاده شود.
صفحه 54:
تگ حوووو>
و روا را(
TOE DWP Wales Nee و ۱
<50/> قرار خواهند گرفت خواص آنرا به ارت
خواهند برد» خواصى از قبيل استيل (©1/ا51) و يا سمت و
ees 0
بر. خلاف تگ های <م > و <0]۷> مرورگرها هیچ سطر
جدیدی به اول یا آخر المان <50۵۲۱> اضافه نمی کنند.
صفحه 55:
مثال:
| کد اچتمل نمایش کد روبرو و کی رون *
style="color:#0000AF;">another text</span> again
..text.,.</p> Some text another text again text
1309 ,03 ,عالان5 ,م11 ,355اء ,10 شناسه «اواستاندارد المان 50310
متالهائى از نحوه استفاده از المان 5030 و غ+©516 56/16 ها:روش قديميروش
ل لال font
styl color: 0
0,255)">Hello!</font><span 0
0,255)">Hello!</span><font ,255) و۲ ارات سفارقة
style="color: Fuchsia">Hello!</font><span
style="color:Fuchsia">Hello!</span><tfont
color="#FFOOFF" size="3">Hello!</font><span
<style="color:#FFOOFF;font-size:100%">Hello!</span
صفحه 56:
ا
1 ا ل reece nee eterna ol | red
تگهای <01۷> و <0[۷/> قرار خوا خواص آترا به ارث خواهند برد» خواصی از
۳0 استيل (©1/ا51) و يا سمت و جهت نمايش
ا ا ا ل اا ا ل ا Pere
كتند.
كه
ات رت لل
style="color: #0000AF;">another text</div> Seely
.text...</p> غ300 ۱ زور۱2 6 textagain text
۳ تا فا dir, Jang
نمایشمتون
Ae is Pen BEES Bry | ا ECON Petey Ce 10
div>Defines a division/section in>1-SStart TagPurpose
که DI ieee ۱0
تا 0 ۱3۱
صفحه 57:
چگونگی استفاده از استایل شیتها:
خش 0620] 1[ فوا اشر
در متال زیر با کمک شتاسه 8۳۵۴ از للدم ی ای میگردد:
BRE ct ea ase aga eco eco ee eee eee
(Chenery PREPS
Semene aireastane erin een
2 بدرد أن صفعه خواهد خورد. در اين حالت بايد #دهائ حاوى تعريف استايل درون
معمولا لتيجه درون بخش 630! صفحه اجتمل كذاشته ميشود.مكال:
ee eee Gee eed ناه ول دم بل وطح "دي لدعا"
ل UIC gL
SE ee renee eee reer ee
ra Cap ae eS ۱۳۳۳
<p style="color: ey ena ل
+ و معا برد و تال طراحی شده Be
ای <عا/ناک> ر <ها/زا5ا> قرار گرفته ر
جر >اردای> <۵ هط
صفحه 58:
ا 0
style>Defines a>a:-SStart TagPurpose ®
Sere emery aad (Mla me Kee len- lala
link>Defines the relationship between>a.
SS VONeN NOE UNDE oer eree= amon fa) تاره
font>Deprecated. Use stylesz.= 4
نار گذلشته شده.از لستایلشیتها لستفادم |50
basefont>Deprecated. Use styles>.s54
عکنار گذلشته شدم.از لستایلشیتها استفادم 0
center>Deprecated. Use styles>.2.+
اک نار گذاشته شدم.از لستایلشیتها لستفادم شود. 0
صفحه 59:
کت را 0
هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطلاعات محض بدون در
ثيات تَ وات Perc ee nea 000
emer OE Be )0 ا ۱ Align محتواو
نمایش در صفحات اجتمل ادغام گردیده و همین امر سبب بروز مشکلات عدیده ای برای
طراحان و برنامه نویسان re ete Co Nei es PSI ل ee enw)
جداسازی کامل این دو گروء از 0 20
era 0 Wee ty]
ee AE nee een PION 0
میباشده ساختار و محتوا (تگی از نوح پاراگراف با محتوای (‘This is a paragraph"
با اطلاعا نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترا ى در وسط ¢
Loin roe ie Sr ae errors
خواهد کرد
"center"><font color="red">This is a>
<paragraph</font></p
صفحه 60:
" كد معادل مثال فوق با استفاده ال استايل شيتها شرح داده
شده است.(هر جند كه اين مثال از تمامى امكانات استايل
شيتها و ايجاد فايلى كاملا مستقل براى تعريف استايل
استفاده نكرده است
صفحه 61:
مدیریت سایت
*-امیدوایم اموزیش-های فوق به شا گمکی کرده باشنه
" با تشكر سينا
آموزش کامل
برنامه نویسی
شرکت مودال
منظور از وب چیست
منظور از وب چيست؟
وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا،
شبکه ای از شبکه ها.
اينترنت ،وب WWW ، web ،يا World Wide
Webهمگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا
پروتوکل HTTPبا هم ارتباط برقرار ميکنند .
نحوه ی کار کرد وب چگونه است
نحوه کارکرد وب چگونه است؟
اطالعات وب داخل فايلهائی به نام Web Pagesو يا صفحات وب قرار
دارند.
اين فايلها يا صفحات روی Web Serverيا کامپيوترهای سرويس دهنده
وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web
Browserاستفاده ميشود.
دو مرورگر Internet Explorerو Netscape Navigatorجزو
معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorerمتعلق به شرکت مايکروسافت و مرورگر
Netscape Navigatorمتعلق به شرکت نت اسکيپ ميباشد
مروره گر ها چگونه به خواندن صفحات وب می
پردازند
يک مرورگر با کمک يک Requestدرخواستی برای خواندن
يک صفحه از وب سرور ميکند.
اين Requestيا درخواست بر اساس استاندارد ارتباطی يا
پروتوکل HTTPبوده و شامل آدرس صفحه مورد نظر ميباشد.
آدرس يک صفحه وب چيزی شبيه
http://www.internet.com/faq.htmlاست.
بخش http://نوع پروتوکل و يا استاندارد ارتباطی را تعيين
ميکند www.internet.com ،نام دومين يا Domainاست
و faq.htmlنام صفحه ای است که بايد خوانده شود.
مروره گر ها چگونه صفحات وب را نمایش
می دهند
چگونگی نمايش يک صفحه وب بصورت مستتر در آن
وجود دارد.
مرورگرها از روی دستورالعملهای داخل صفحات وب و با
کمک تگ ها به نمايش صفحات ميپردازند.
وظيفه اصلی تگ های اچتمل ( ) HTML tagsبيان
چگونگی نمايش اطالعات ميباشد.
يک تگ اچتمل چيزی شبيه < >pاين تگ پاراگراف است!
< >p/است
.
عناصر اچتمل
عناصر اچتمل ()HTML Elements
مثال بخش مقدمه را در نظر بگيريد:
<html><head><title>Title of
page</title></head><body>This is my first html page.
***><b>This text is bold</b></body></htmlنمونه ای از يک
عنصر اچتمل:
<>b>This text is bold</bعنصر اچتمل باال با تگ < >bشروع شده و با تگ
< >/bپايان می يابد .محتوای اين عنصر عبارت " "This text is boldاست .الزم به
ذکر است که کاربرد تگ < >bنمايش توپر يا boldمتون است.
*** مثال دوم يک عنصر اچتمل (معلوم الحال) :
<body>This is my first homepage. <b>This text is
>bold</b></bodyعنصر اچتمل باال با تگ < >bodyشروع شده و با تگ
< >/bodyپايان می يابد .همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر
ميباشد.وظيفه تگ < >bodyتعيين بدنه اصلی يا bodyيک متن اچتمل است.الزم به
يادآوری است که تنها اطالعات بخش < >bodyيک فايل اچتمل در صفحه مرورگر نمايش
داده خواهد شد.
شناسه های يک تگ ()Tag Attributes
تگ ها ميتوانند حاوی اطالعات اضافی ديگر باشند ،به اين اطالعات شناسه يا Attributeميگويند و
وظيفه آنها بيان ديگر اطالعات يک عنصر يا Elementميباشد .مثال در مورد تگ < >bodyشناسه
ای به نام bgcolorوجود دارد که رنگ زمينه متن ( )backgroundرا تعيين ميکند برای نمونه
اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :
<>"body bgcolor="black
در مثال زير تگ < >bodyدارای چهار شناسه مختلف با نامهای width، height ، alignو
borderو مقادير center، 60، 100و 0ميباشد.
< > "table border="0" width="100" height="60" align="center
......
></table
شناسه ها به صورت کلی "مقدار=نام" يا " "name=valueنوشته ميشوند و هميشه به تگ شروع
يک عنصر يا Elementاضافه ميشوند و نهايتا اگر در يک عنصر يا Elementشناسه ها قيد
نشوند از مقادير قراردادی يا defaultآنها استفاده خواهد شد مثال در تگ bodyاگر شناسه
bgcolorنوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی
که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.
سر تيترها ()Headings
سر تيترها با کمک تگ های < >h1تا < >h6تعيين ميشوند.
< >h1معرف بزرگترين سر تيتر و < >h6معرف کوچکترين
سر تيتر است .مرورگر به هنگام نمايش يک سر تيتر بصورت
اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد
کرد.
<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
پاراگرافها ()Paragraphs
پاراگرافها با کمک تگ < >pمعرفی ميشوند.مرورگر به
هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر
خالی قبل و بعد از آن اضافه خواهد کرد.
<>p>This is a paragraph</p
<p>This is another
>paragraph</pمثال
سطر جديد ()Line Breaks
برای رفتن سر سطر جديد از تگ < >brاستفاده ميشود.در
اينحالت يک پاراگراف جديد ايجاد نميشود .تگ < >brاز
نوع تگ های خالی بوده و دارای تگ انتهائی (مثال
< ) >/brنميباشد.
<p>This <br> is a para<br>graph
>with line breaks</p
کامنت ها در اچتمل (Comments
برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد
از تگ خاصی استفاده کنيد .برای اينکار بايد متن و
شرحتان را درون عالئم < --و >!--قرار دهيد .مرور تگ
های commentرا در نظر نگرفته و محتوی آنها را
نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه
نويس و ديگر افرادی که احتماال در آينده با کد اچتمل کار
خواهند کرد مفيد خواهد بود( .به محل نويسه "!" توجه کنيد!
فقط يکی و آنهم در ابتدا)
<!>-- This is a comment --
چند نکته کاربردی:
توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر ،نت اسکيپ ).. ،و به دليل تفاوت دقت نمايش صفحه
نمايش کامپيوترها ،صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که
صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای
مکينتاش چک کرده و همچنين در دقت های نمايش 800x600و 1024X768آن را امتحان کنيد.
از نظر فاصله و سطر بندی ،متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت
خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی ( )spaceو خطهای خالی متن در صفحه اديتور توسط
مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.
برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی ()None Breaking Space
استفاده کنيد.
فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک
فاصله ( )spaceخواهد شد .در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا spaceنمايش داده
خواهد شد.
برای ايجاد يک سطر جديد هيچگاه از يک تگ < >pخالی استفاده نکنيد و به جای آن از تگ < >brاستفاده کنيد..
مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند
داد .برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (< )>pو سرتيترها (< )>..hنام برد.
تگ < >hrيا Horizontal Rolerسبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين
صفحات با کمک اين تگ از هم جدا شده اند.
تگهای اصلی
در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر
آورده شده است .توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes
موجود است و همچنين به شناسه های کنارگذاشته شده ( )Deprecatedدر نسخه های آينده
اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.
:
Start TagPurposeک اربرد<html>Defines a html
documentن شانش روع متناچتمل<body>Defines the document's
bodyت عيينب دنه و ق سمتاصلیص فحه اچتمل<h1>-<h6>Defines heading
1 to heading 6ت ع ريفس ر ت يترهای h1ت ا h6 <p>Defines a
<br>Inserts a single line breakرفتنس ر
paragraphت ع ريفپ اراگراف
خط جديد<hr>Defines a horizontal ruleن مايشخط افقی<!-->Defines a
comment in the HTML source codeن وشتنش رح و comment
دو نکته بسيار مهم در مورد فارسی نويسی:
· روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8اسنفاده شود و اين روشی
است که مطالب اين سايت و اديتور آنالينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا
encoingصفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equivدر بخش headصفحات اچتمل به
شکل زير استفاده شود:
<>"meta http-equiv="Content-Type" content="text/html; charset=utf-8
در اينصورت مرورگر يا Browserقبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری ( )Encodingرا تشخيص داده و
ديگر مثال نيازی به تعيين دستی (دراکسپلورور ) View/Encoing/Unicode / UTF-8 : 5نوع Encoingتوسط
بازديدکننده سايت نخواهد بود.
· شناسه يا attributeی به نام dir
جهت نمايش متون التين به صورت پيش فرض و defaultاز چپ به راست ( )ltrميباشد.در مورد متون و جمالت فارسی بايد با
کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد .شناسه يا attributeی به نام dirيا همان direction
اين کار را برای شما انجام ميدهد .اين شناسه دارای دو مقدار ممکن ميباشد :
- .dir="ltr" , Left-to-right textچپب ه راست
- .dir="rtl" , Right-to-left textراستب ه چپ
مثال برای نمايش جمله فارسی "سالم بر دنيای وب!" با کمک عناصر pيا divکافی است که به يکی از شکلهای زير عمل شود:
< >"p dir="rtlسالم بر دنيای وب <p> /
>"<div dir="rtlسالم بر دنيای وب <>div/
در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dirميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:
< p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> ,
... , ><pre> , <select> , <span
نحوه ديدن سورس کدهای اچتمل (HTML
)Source
اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View
مرورگرتان حالت Sourceيا Page Sourceرا انتخاب کرده و مرورگر کد اچتمل را
درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
اگر صفحه مورد نظر از مجموعه فريمها ( )Framesetاستفاده کرده باشد برای ديدن
سورس کد اصلی فريمها کافی است که ابتدا با کمک روش باال به مشاهده سورس کدهای اچتمل
پرداخته (الزم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند ).و سپس
برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از " "Right Clickروی هر صفحه
" "View Sourceکرده و کد اچتمل هر فريم را جداگانه ببينيد.
اگر طراح سايت با کمک Java Scriptمانع ديدن سورس توسط شما ميشود ،ابتدا در منوی
Tools/Internet Options.../Security/Custom Levelمرورگرهای
اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده ( )disableو سپس مراحل باال
را تکرار کنيد!!!
چند نکته کاربردی:
در استفاده از Underlineدقت كنيد چون در اكثر
مرورگرها ،پيوندها با اين خطوط نشان داده مي شوند و اين
مساله ميتواند كاربران را دچار اشتباه كند .
به كارگيري تگهاي EMو STRONGكه جايگزين تگهاي I
و Bهستند ،اين اطمينان را مي دهد كه صفحه شما توسط همه
مرورگرها بصورت صحيح نمايش داده خواهد شد .
به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد ،همان
گونه كه مشاهده مي كنيد عنصر STRONGبعد از عنصر U
شروع شده است ،به همين خاطر تگ خاتمه دهنده آن قبل از
تگ خاتمه دهنده Uقرار مي گيرد.
<U>version
><STRONG>2.0</STRONG></U
تگهای فرمت دهی متون
<ن مايشت وپرb>Defines bold textک اربردStart TagPurpose
<em>Defines<ن مايشدر اندازه ب زرگbig>Defines big text
<i>Defines italic ن مايشب صورتت اک يد ش دهemphasized text
<ن مايشدر اندازه ک وچکsmall>Defines small textن مايشايتا ليکيا ک جtext
<sub>Defines!<ن مايشق وی؟strong>Defines strong text
<sup>Definesن مايشپ ايينت ر از خط افقیsubscripted text
<ins>Defines insertedن مايشب ا التر از خط افقیsuperscripted text
<ن مايشب ه ص ورتdel>Defines deleted textن مايشب ه ص ورتخط زيرtext
از ردهs>Deprecated. Use <del> instead< خط خورده
از ردهstrike>Deprecated. Use <del> instead<خارج
از رده خارجu>Deprecated. Use styles instead<خارج
<code>Defines computer codeک اربردStart TagPurpose
< ن مايشمتنkbd>Defines keyboard textن مايشک دهایب رنامه ن ويسیtext
<ن مايشsamp>Defines sample computer codeب صورتص فحه ک ليدی
<ن مايشت له ت ايپtt>Defines teletype textک دهاین مونه ب رنامه ن ويسی
<pre>Defines<ن مايشمتغييرهاvar>Defines a variable
ن مايشمتوناز ق بلف رمتش دهpreformatted text
Character Entities
در اچتملب عضیاز ن ويسه ها دارایمعنیخاصیب وده و ب راین مايشآنها در ص فحاتتانب ايد از
character entitiesها استفاده ک نيد .يک character entitiesاز س ه ق سمتت شکيل
ميشود:
-1ن ويسه )&( ampersand
-2ن ام entityيا ن ويسه #و س پسش ماره عددی entity
- 3و ن هايتا ن ويسه );( semicolon
ب رایمثا لب راین مايشن ويسه > دو روشوجود دارد ،ب ايد از & ;ltيا از & ;60#استفاده ک نيد.
در اينمثا ل ltن ام entityو 60ش ماره عددیآنميباشد.
مزيت استفاده از نام entityدر مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامش
ميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای Entityها را قبول ندارند
ولی در عوض همگی شماره های عددی entityها را بخوبی ميشناسند .توجه داشته باشيد که entity
ها به کوچک و بزرگي حروف حساس هستند و در واقع Case Sensitiveميباشند.
پر کاربردترين character entityدر اچتمل ،نويسه فاصله يا Spaceيا Blankميباشد و نام
رسمی آن non-breaking spaceميباشد .همانطور که ميدانيد مرورگرها فاصله های اضافی را
در نظر نگرفته ( )truncate spacesو مثال از 10نويسه فاصله 9 ،تای آنرا ناديده ميگيرند و
برای نمايش فاصله های اضافی بايد از & ;nbspاستفاده کنيد.
هاCharacter Entities فهرست پرکاربردترين
Entity Name) (ش رحDescription) (ن مايشResult
non-breaking عددی
)
(ش مارهEntity Number) (ن ام
space  <less than<<>greater
than>>&ersand&&"quotatio
;چندn mark""'apostrophe '
ب ا ک اربردهایک مترCharacter Entitie
ResultDescriptionEntity NameEntity Number
¢cent¢¢£pound££¥yen&
yen;¥§section§§©copyright&cop
y;©®registered
trademark®®×multiplication×&#
;215;÷division÷÷
تگ Anchorو شناسه href
برای ايجاد پيوند به صفحات ديگر از تگ < >aاستفاده ميشود .پيوندها ميتوانند به بخش
ديگری از همان صفحه ،صفحات ديگر وب ،تصاوير ،فايلهای صوتی يا حتی فيلم ها و ...
اشاره کنند.
فرم کلی يک پيوند به قرار زير است:
< >a href="url">Some Text</aدر مثال باال تگ < >aبرای ايجاد
پيوندی به صفحه ای ديگر که آدرس اينترنتی آن urlميباشد بکار رفته است .برای تعيين
مقصد و يا آدرس صفحه جديد از شناسه ای به نام hrefکه همان hyerlink
referenceميباشد ،استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه
مقصد است .بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر
نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای < >aو <>a/
قرار داده ميشود و هر چند که در مثال باال اين بخش متن " "Some Textاست ولی ميتواند
حتی يک تصوير باشد.
برای نمونه کد اچتمل زير پيوندی به سايت google.comايجاد خواهد کرد:
<a href="http://www.google.com/">Visit Google
>Site</a
شناسه targetدر پيوندها:
با کمک شناسه targetامکان تعيين مقصد پيوند جديد فراهم
ميشود .در مثال باال پس از کليک روی پيوند ،مرورگر سايت
google.comرا باز کرده و جايگزين سایت فعلی خواهد شد.
اگر ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد
از شناسه targetو مقدار "_ "blankبرای آن استفاده کنيد .
مثال زير سبب باز شدن سايت google.comدر پنجره جديدی
خواهد شد:
<"a href="http://www.google.com/
>target="_blank">Visit Google Site</a
شناسه : Name
با کمک شناسه nameميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای
مختلف يک صفحه يا pageرا فراهم ميکنند .در اينصورت مثال برای رفتن به آخر يک متن ديگر نيازی به
Scrool downکردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر صفحه اشاره ميکند
کليک کند.
استفاده از پيوندهای نامگذاری شده شامل دو مرحله است:
-1ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد: ).
فرم کلی يک پيوند نام گذاری شده به قرار زير است:
< >a name="label">Text to be displayed</aوظيفه شناسه nameتعيين نام برای
پيوند است و مقدارآن همان نام پيوند ميباشد .نام پيوند هم هر نام التينی ميتواند باشد .در فرم کلی باال ،نام پيوند label
و متنی که بعنوان پيوند نمايش داده ميشود عبارت " "Text to be displayedخواهد بود .مثال زير به ايجاد يک
پيوند نامگذاری شده با نام topميپردازد:
< -a name="top">Here is top of my page!</a> 2ايجاد يک پيوند به پيوند نامگذاری
شده ديگر:
برای دادن لينک به پيوندی نام گذاری شده ،کافی است که پيوندی معمولی ايجاد کرده و در قسمت hrefآن ابتدا url
مقصد و سپس نويسه #و در نهايت نام پيوند نامگذاری شده را درج کنيد .مثال زير ايجاد پيوندی است که به لينک
نامگذاری شده ای به نام topاشاره ميکند:
< >a href="default.aspx#top"> Goto Top! </aدر اثر کليک روی پيوند باال مرورگر
مستقيما به ابتدای بخش topصفحه index.htmخواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد urlنيست و فقط نويسه #و سپس نام پيوند کافی است:
<>a href="#top"> Goto Top! </a
چند نکته کاربردی در مورد پيوندها:
* يکی از کاربردهای رايج پيوندهای نام گذاری شده در
صفحات و متونی ميباشد که فهرست و يا ليستی از اقالم
نمايش داده شده است ،مانند بخش سرفصل مطالب ،فهرست
FAQو يا ...در همين صفحه در دو مورد از پيوندهای
نامگذاری شده استفاده شده است ،آيا ميتوانيد آنها را بيابيد؟!
* اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد
ابتدای صفحه مقصد را نمايش خواهد داد.
فريمها ()Frames
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در
پنجره مرورگر خواهيد شد .هر صفحه يا دريچه ،فريم ()frame
ناميده شده و فريمها کامال مستقل از هم ميباشند .محتوای هر فريم
هم ميتواند هر صفحه يا وب سايتی باشد .هر چند که فريمها طراحی
سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها
در کارهای حرفه ای توصيه نميشود(.به جز در موارد خاص)
معايب استفاده از فريمها:
موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.
چاپ و printصفحاتی که از فريمها استفاده ميکنند مشکل است.
صفحاتی که از فريمها استفاده ميکنند معموال مبتدی بودن طراح
سايت را نشان ميدهد!!
تگ فريم ست ()Frameset
تگ < >framesetبه تعريف فريمها و تقسيم بندی پنجره
مرورگر ميپردازد.
هر تگ < >framesetمجموعه ای از رديفها يا ستونها را
تعريف ميکند.
داخل هر فريم ميتواند framesetديگری قرار دهيد.
با کمک شناسه های rowsو colsابعاد و نسبت هر فريم تعيين
ميگردد.
تگ < >framesetدرون تگهای < >htmlو < >/htmlقرار
ميگيرد(.نيازی به قيد تگ bodyهنگام معرفی يک frameset
نيست).
تگ فريم ()Frame
کاربرد اصلی تگ < >frameتعيين sourceيا نام صفحه ای است که بايد
در فريم ها نمايش داده شود.
مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی
ميکند .از سمت چپ فريم اول 75درصد و فريم دوم 25درصد از عرض
پنجره مرورگر را به خود نمايش خواهند داد .در ادامه تعريف محتويات هر
فريم ،درون فريم اول فايل " "frame_left.htmlو درون فريم دوم فايل
" "frame_right.htmlنمايش داده خواهد شد.
<html><frameset cols="75%,25%"> <frame
src="frame_left.html"> <frame
>src="frame_right.html"></frameset></htmlبرای
نمايش مثال باال به سه فايل نياز داريد،
frame_left.html ،frame_right.htmlو فايل کد اچتمل باال.
شناسه های colsو rowsدر تگ frameset
شناسهمقدار شناسهکارکردcolsعرض پنجره بر اساس پيکسل ،درصد يا عالمت *تعيين تعداد
و اندازه ستونها در فريم ستrowsعرض پنجره بر اساس پيکسل ،درصد يا عالمت *تعيين
تعداد و اندازه رديفها در فريم ستمثالهای زير را در نظر بگيريد:
مثال 2مثال html><frameset cols="25%,50%,25%"> < 1
<frame src="frame_3.html"> <frame
src="frame_2.html"> <frame
src="frame_1.html"></frameset></html><html><frames
et cols="*,200"> <frame src="frame_2.html"> <frame
>src="frame_1.html"></frameset></htmlنمايش توسط مرورگر
مرورگر نمايش توسطدر مثال يک عرض فريم اول از سمت راست 200پيکسل تعيين شده
و بقيه عرض پنجره که با عالمت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.
در مورد شناسه rowsدقيقا قراردادهای باال برقرارند.
تگ های فريم
ک اربردStart TagPurpose
<frameset>Defines a set of
<frame>ت ع ريفمجموعه ایاز ف ريم هاframes
ت ع ريفDefines a sub window (a frame)
<noframes>Defines a noframe يکف ريم
section for browsers that do not
ت ع ريفجايگزينب رایمرورگرهائيhandle frames
<iframe>.ک ه از ف ريم ها پ شتيبانین ميکنند
Defines an inline sub window
)inline( (ت ع ريفف ريم هایدرجاframe)
فهرستهای نامرتب()unordered list
فهرستهائی هستند از يک يا چند قلم اطالعات که معموال با دايرهای کوچک و سياه رنگ در
شروع نمايش داده ميشوند .يک فهرست از نوع نامرتب با تگ < >ulشروع شده و هر رقم
اطالعات با تگ < >liمشخص ميگردد.
HTML codeن مايشت وسط
مرورگر<>ul><li>Red</li><li>Blue</li><li>Green</li></ul
Red
Blue
Green
<>ul dir="rtl" ><liقهوه<>li><li/شير<>li><li/چای<>li></ul/
قهوه
شير
چای
داخل تگهای < >liميتوانيد از پاراگرافها ،تگهای ، brتصاوير و حتي فهرستهای ديگر استفاده
کنيد .به شناسه dirدر مثال باال توجه کنيد ،امکان تعيين سمت و جهت نمايش متون در تمامی
تگهای مربوط به فهرستها ممکن ميباشد
فهرستهای مرتب()ordered list
اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقالم اطالعاتی از
اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند .يک فهرست از نوع مرتب با تگ <>ol
شروع شده و همانند فهرستهای نامرتب هر رقم اطالعات با تگ < >liمشخص ميگردد.
HTML codeن مايشت وسط
مرورگر< >ol><li>Red</li><li>Blue</li><li>Green</li></ol
Red
Blue
Green
<>ol dir="rtl" ><liقهوه<>li><li/شير<>li><li/چای<>li></ol/
قهوه
شير
چای
داخل تگهای < >liميتوانيد از پاراگرافها ،تگهای ، brتصاوير و حتي فهرستهای ديگر استفاده کنيد .به
شناسه dirدر مثال باال توجه کنيد ،امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به
فهرستها ممکن ميباشد.
فهرستهای تعريفی()definition list
فهرست تعريفی فهرستی است از اصطالح ها و تشريح و توصيف آنها.
فهرستهای تعريفی با < >dlشروع شده و هر ذوج اصطالح و تعريف مربوط به آن با تگهای
< >dtو < >ddتعريف ميشوند.
HTML codeن مايشت وسط
مرورگر<dl><dt>HTTP</dt><dd>Hypertext Transfer
Protocol</dd><dt>FTP</dt><dd>File Transfer
Protocol</dd><dt>IP</dt><dd>Internet
Protocol</dd></dl>HTTP Hypertext Transfer Protocol FTP
"File Transfer Protocol IP Internet Protocol <dl dir="rtl
> ><dtمقدمه <>dt><dd/خالصه ایاز مقدمه <>dd><dt/ف صل
>dt><dd/<2خالصه ایاز ف صل>dd><dt/<1ف صل>dt><dd/<2خالصه ای
از ف صل>dd></dl/<2مقدمه خالصه ایاز مقدمه ف صل 1خالصه ایاز ف صل 1ف صل
2خالصه ایاز ف صل 2داخلت گهایت شريح يعنی< >ddميتوانيد از پ اراگرافها ،ت گهای
، brت صاوير و حتيف هرستهایديگر استفاده ک نيد .ب ه ش ناسه dirدر مثا لب ا الت وجه
ک نيد ،امکانت عيينس متو جهتن مايشمتوندر ت مامیت گهایمربوط ب ه ف هرستها ممکن
ميباشد.
تگهای فهرست
تگهای فهرست
Start TagPurposeک اربرد<ol>Defines an
ordered listت ع ريفف هرستهایمرتب<ul>Defines an
unordered listت ع ريفف هرستهاین امرتب<li>Defines
a list itemت ع ريفيکآيتم و ق لم از يکف هرست><dl
Defines a definition listت ع ريفف هرستهایت ع ريفی
<dt>Defines a definition termت ع ريفاصطالح در
ف هرستهایت ع ريفی<dd>Defines a definition
descriptionت ع ريفمعنیو ش رح اصطالح در ف هرستهای
ت ع ريفی
فرمها ()Forms
تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطالعات
پرداخته اند و هيچکدام به گرفتن و اخذ اطالعات از کاربر نپرداخته
اند .فرمها که با تگ < >formمعرفی ميشوند ،طراح سايت را
قادر به جمع آوری و اخذ اطالعات از بازديدکننده سايت خواهند
کرد .عنصر فرم و گروهی از عناصر و تگهای درون آن به
دريافت و ارسال اطالعات به سمت وب سرور کمک خواهند کرد و
الزم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون
تگهای < >formو < >/formقرار ميگيرند.
درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده
هستند از قبيل عناصر ورود متن يک سطری(،)text fields
عناصر ورود متنهای چند سطری ( ،)Textareaمنوهای
drop-downو radio buttonsو ...
تگ Input
به عنوان پر مصرف ترين تگ مربوط به ورود اطالعات
بايد از تگ < >inputنام برد .در اين تگ شناسه ای به
نام typeبه تعيين نوع اطالعات ورودی اختصاص دارد.
مقادير ممکن برای اين شناسه به قرار زيرند:
text , checkbox , radio , password ,
hidden , submit , reset , button , file ,
image
در ادامه به شرح بعضی از typeهای کاربردی خواهيم
پرداخت:
وروديهای متن ()Text Fields
اگر ميخواهيد که بازديدکننده اطالعاتی از قبيل متن ،اعداد و ...را وارد کند از شناسه ای با
مقدار " "textاستفاده ميشود.
کد اچتملنمايش توسط مرورگر<"form>First name: <input type="text
"name="firstname"><br>Last name: <input type="text
name="lastname"></form>First name:
> "Last name: <form dir="rtlنـــــــــــــــامinput type="text"<:
>name="firstname"><brنام خانوادگیinput type="text"<:
>name="lastname"></formنـــــــــــــــام:
نام خانوادگی :توجه داشته باشيد که تگ < >formچيزی را به نمايش نخواهد گذاشت بلکه
تگهای درون آن توسط مرورگر نمايش داده خواهند شد .در مثال فارسی باال به شناسه dirو
مقدار rtlآن توجه داشته باشيد.الزم به يادآوری است که اغلب مرورگرها در حالت پيش
فرض برای وروديهای متن اندازه 20کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه
پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام sizeاستفاده کنيد.
Radio Buttons وروديهای
،اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند
: استفاده کنيدtype " برای شناسهradio" از مقدار
form><input type="radio"<کد اچتملنمايش توسط مرورگر
name="sex" value="male"> Male<br><input
type="radio" name="sex" value="female">
Female</form>Male
Female <form dir="rtl"><input type="radio"
br><input<"> مردname="sex" value="male
>"type="radio" name="sex" value="female
>مردform/<زن
زن همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر
.است
Checkboxes وروديهای
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود
: استفاده کنيدtype " برای شناسهcheckbox" از مقدار،انتخاب کند
form><input<کد اچتملنمايش توسط مرورگر
type="checkbox" name="bike">I have a
bike<br><input type="checkbox" name="car">I
have a car</form>I have a bike
I have a car <form dir="rtl"><input
">دوچرخهtype="checkbox" name="bike
">ماشينbr><input type="checkbox" name="car<دارم
>دوچرخه دارمform/<دارم
ماشين دارم
شناسه Actionو دکمه Submitدر فرمها
( Form's Action Attribute & Submit
)Button
در فرمها برای ارسال اطالعات کسب شده از دکمه ای به نام ارسال يا Submit Buttonاستفاده
ميشود و در اثر کليک کاربر بروی اين دکمه " ، "Submitاطالعات درون فرم به فايلی ديگر ارسال
خواهند شد .برای تعيين مقصد ارسال اطالعات بايد درون تگ formاز شناسه ای به نام action
استفاده کنيد .مقدار شناسه actionآدرس يا urlفايلی است که به دريافت و سپس پردازش اطالعات
دريافتی خواهد پرداخت .معموال فايلهای بخش actionبرنامه ها و اسکريپت هائی نوشته شده با
ربانهای cgiمانند ASP، Perl ، PHPو ...بوده و وظيفه آنها دريافت اطالعات فرمها و سپس
پردازش آنها ميباشد.
تعيين مقدار " "submitبرای شناسه typeسبب نمايش دکمه Submitيا ارسال خواهد گرديد.
کد اچتملنمايش توسط مرورگر<"form name="input
"action="form_action.cgi">Username: <input type="text
"name="user"><input type="submit
"value="Submit"></form>Username: <form name="input
>"action="form_action.cgi" dir="rtlنام کاربر<"input type="text
>name="user"><input type="submit" value="Submit"></formنام
کاربر در مثال باال در باکس ورودی متن ،کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد .مرورگر
به محض کليک دکمه ارسال ،اطالعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که
در شناسه actionتعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perlبا نام
form_action.cgiدر سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.
ورود متن فارسی در عناصری مانند Text field
يا :Text area
همانطور که در مثالهای باال مشاهده کردید در مورد المانهای Text fieldو
Textareaبا کمک شناسه dirمیتوان سمت و جهت ورود اطالعات را
"از راست به چپ" تعیین کنید .ولی اگر کاربری ویندوز فارسی نداشته باشد،
از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر
به ورود اطالعات به زبان فارسی نخواهد بود و نویسه های تایپ شده التین
خواهند بود! ،در اینگونه موارد چه باید کرد؟
معموال برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی
از دو روش زیر استفاده میکنند:
· استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی
قابل استفاده توسط دیگران نیست!!
· استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی
JavaScriptقابل مشاهده و استفاده توسط دیگران است!
تگهای فرم
form>Defines a form<ک اربردStart TagPurpose
input>Defines an<ت ع ريفف رم ورود اطالعاتfor user input
Input <textarea>Defines ت ع ريفورودیاز ن وعinput field
ت ع ريفa text-area (a multi-line text input control)
text-area<label>Defines a label ورودیمتنچند س طریيا
label <fieldset>Defines a ت ع ريفب رچسبياto a control
fieldset<legend>Defines a captionت ع ريفfieldset
fieldsetت ع ريفعنوانب رایfor a fieldset
select>Defines a selectable list (a drop-down<ها
drop-down ت ع ريفف هرستهایانتخابیياbox)
ت ع ريفbox<optgroup>Defines an option group
option>Defines an option in the< هاoption group
drop-down box ت ع ريفگ زينه ایازdrop-down box
ی
، ت ع ريفدک مه ف شارbutton>Defines a push button<ها
input ت گbutton متفاوتب ا
تگ imgو شناسه srcيا source
در زبان اچتمل تصاوير را با کمک تگ < >imgتعريف ميکنند.
تگ < >imgاز نوع تگهای خالی است ،بدين معنا که فقط دارای
يک يا چند شناسه و attributeبوده و دارای تگ انتهائی يا
< >/imgنيست.
مهمترين شناسه برای درج و تعريف يک تصوير srcيا source
نام دارد و مقدار اين شناسه آدرس يا URLتصوير ميباشد.
تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در
همان دايرکتوری صفحه اچتمل ،در ديگر دايرکتوريهای همان سايت
و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<>"img src="url
مقدار urlآدرس اينترنتی تصوير ميباشد و مثال اگر تصويری که
قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد
و نامش ، me.jpgکافی است که به جای urlفقط نام تصوير
يعنی me.jpgرا بنويسيد و اگر تصوير در سايتی ديکر قرار
دارد urlکامل آنرا بنويسيد .مثال تصوير لوگو سايت
google.comدارای urlی برابر
http://www.google.com/images/logo.gif
است.در اين urlنام تصوير logo.gifبوده ،در دايرکتوری
imagesقرار داشته و روی وب سايت google.comقرار
دارد.
شناسه های widthو heightدر تگ img
کاربرد شناسه های widthو heightتعيين عرض و ارتفاع نمايش تصوير
است .اگر از اين شناسه ها استفاده نکنيد ،مرورگر ابتدا تصوير را لود کرده و
سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد .با نوشتن مقاديری
غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن
بپردازيد و آنرا مثال کوچکتر ،بزرگتر و يا کشيده تر نمايش دهيد .مثال زير
نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد:
<img
src="http://www.google.com/images/logo.gi
> "f" width="276" height="110توصيه ميشود که حتما
ابعاد تصوير را با کمک شناسه های widthو heightقيد کنيد ،اينکار
سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد(.در واقع با
قيد ابعاد تصوير ،مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه
نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن
شناسه Altيا " "alternate textيا متن جايگزين
اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از
نوع مرورگرهائی باشد که فقط متن را نمايش ميدهند ،متن و textی که با
کمک شناسه altتعيين شده است نمايش داده خواهد شد .همچنين در اغلب
مرورگرها با قرارگرفتن ماوس بروی يک تصوير ،متن تعيين شده توسط
شناسه altنمايش داده خواهد شد .با کمک altاطالعات اضافی مربوط به
تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويری را با قيد متن
جايگزين آن شرح ميدهد:
<"img src="images/AkseAlaki_88_31.jpg
>"alt="Fake Pic
وبالگها و اضافه کردن تصاویر:
اگر وبالگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که
پیش آید:
· الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی
دیگر قرار دارد استفاده کنید .در این حالت از آدرس مستقیم تصویر در شناسه srcاستفاده
کنید ،مانند :
<"img src="http://www.google.ca/images/hp0.gif
> width=258 height=78
در این مثال تصویر روی سایت google.caقرار داشته و لزومی به ذخیره آن توسط شما
نیست.
· ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است .در این حالت
چون اغلب سیستم های وبالگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان
را با کمک FTPیا روشهای دیگر به روی سایتی دیگر منتقل کنید .شرکتهای مختلفی فضای
مجانی برای ساخت صفحات وب و ذخیره اطالعات و تصاویر در اختیار شما قرار میدهند و
در یکی از سؤالهای این FAQفهرست این شرکتها را میتوانید ببینید .بنابراین ابتدا فضائی در
وب تهیه کرده ،سپس تصویرتان را Uploadکرده (با کمک FTPیا روشهاس دیگر ) و
سپس در شناسه srcاز تگ imgآدرس جدید تصویر را قید کنید.
چند نکته مهم:
اگر در يک صفحه اچتمل از 10تصوير استفاده شده باشد ،مرورگر بايد 11
فايل را لود کند (.خود صفحه به عالوه 10تصوير)
استفاده از تصاوير ،سرعت لود شدن صفحات را پايين می آورد.با احتياط از
تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
لود تصويری با حجم 50کيلوبايت برای کسی که از مودمی با سرعت
28kbpsاستفاده ميکند حداقل 15ثانيه طول خواهد کشيد.
برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right
clickکرذه و سپس در بخش properitiesآدرس،ابعاد و ظرفيت تصوير
را ببينيد.
برای ذخيره تصاوير در وب کافی است که روی تصوير Right clickکرذه
و سپس در بخش " "Save picture asآنرا ذخيره کنيد.
تگ های تصاوير
Start
img>Defines an<ک اربردTagPurpose
map>Defines an<درج ت صويرimage
يا ؟؟؟Image mapت ع ريفimage map
area>Defines an area inside an<
Imageت ع ريفن احيه ایدر داخلimage map
map
رنگ و تصوير زمينه در صفحات اچتمل:
تگ < >bodyدارای دو شناسه مهم برای تعيين رنگ و تصوير پس زمينه
ميباشد .پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد.
شناسه bgcolorبرای رنگ پس زمينه ()background color
شناسه bgcolorرنگ پس زمينه را تعيين ميکند .مقدار رنگ پس زمينه
ميتواند نام رنگ (مثل redيا ، ) blueمقدار آن بر اساس استاندارد RGB
و يا حتی مقدار هگزادسيمال ( )Hexadecimalباشد.
<body bgcolor="#000000"><body
>"bgcolor="rgb(0,0,0)"><body bgcolor="blackدر
تمامی مثالهای باال با کمک شناسه bgcolorرنگ زمينه صفحه "سياه" تعيين
ميشود.
شناسه Backgroundبرای تصوير پس زمينه:
برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه backgroundاستفاده
ميشود.مقدار اين شناسه URLيا آدر س تصوير ( )imageميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر
باشد ،تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود.
<body background="bg.gif"><body
>"background="http://www.aviny.com/images/b_logo.gifدر مثال اول از آدرس دهی
نسبی ( )relativeبرای تعيين URLيا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير
bg.gifبايد در يک دايرکتوری قرار گيرند .در مقابل مثال دوم از آدرس دهی مطلق ( )absoluteبرای تعيين
آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضای وب ميتواند باشد.
نکات مهم :اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
هرتصويری با فرمت gifو يا jpgقابل استفاده به عنوان تصوير زمينه ميباشد.
از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد ،در غير اين صورت سرعت loadصفحه بشدت
پايين خواهد آمد.
از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
پر مصرف ترين رنگهای زمينه وب سايتها ،رنگهای سفيد ،سياه و خاکستری ميباشند.
اغلب سايتهای وب از تصاوير پس زمينه استفاده نمی کنند! مثال همين سايت!!!
نکته مهم در سازگاری با نسخه های جديد اچتمل
و XHTML
شناسه های bgcolorو backgroundدر تگ
< >bodyدر نسخه 4اچتمل و XHTMLپشتيبانی
نميشوند و در واقع از رده خارج محسوب ميشوند .در
عوض کنسرسيوم W3Cاستفاده از Style Sheetها
را توصيه ميکند و در واقع در نسخه 4اچتمل و استاندارد
جديد XHTMLتمامی اطالعات مربوط به نمايش يا
presentationو layoutبايد در style sheet
ها قرار گيرند.
تگ <>font
در نسخه های 3.2و قبلی تر زبان اچتمل از تگ < >fontبرای تعیین نام
قلم ،رنگ و اندازه متون استفاده میشود .در این تگ شناسه faceنام قلم ،
شناسه sizeانداره قلم و شناسه colorمعرف رنگ متن خواهد بود .مثالهای
زیر کاربرد تگ < >fontخدابیامرز را نشان میدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر<"p><font size="2
face="Verdana">This is a
paragraph.</font></p>This is a paragraph. <p
"dir="rtl"><font size="1" face="Times
>"color="#FF9900متنی با قلم Timesو اندازه 1و رنگ
>FF9900</font></pمتنی با قلم Timesو اندازه 1و رنگ
"FF9900 <p dir="rtl"><font size="2
>"face="Tahoma" color="redاین متنی با قلم Tahomaو
اندازه 2و رنگ قرمز <>font></p/متنی با قلم Tahomaو اندازه
2و رنگ قرمز
شناسه های تگ <>font
AttributeExampleک اربردsize="number"siz
"e="2ت عییناندازه
ق لم "size="+number"size="+1افزایشاندازه
ق لم "size="-number"size="-1ک اهشاندازه
ق لم "face="face-name"face="Timesت عیینن ام
ق لم "color="color-value"color="#eeff00ت عیین
رنگق لم "color="color-name"color="redت عیینرنگ
ق لم
*** بیان مختصر عملکرد تگ < >fontدر این دروس فقط جهت
اطالع بوده و استفاده از آنها در طراحی صفحات اچتمل توصیه
نمیشود.
دیگر از تگ < >fontاستفاده نکنید!
تگ < >fontاز رده خارج محسوب میشود و کنسرسیوم
جهانی تعیین استانداردهای وب (World Wide Web
)Consortium, W3Cاین تگ را از مجموعه تگهای
استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که
از Style Sheetها برای تعریف هر گونه خواص
نمایشی و آرایشی ()layout & Presentation
المانها در اچتمل استفاده شود.
تگ <>span
تگ < >spanسبب تعریف محدوده و گستره ای مشخص
میشود .تمامی المان هائی که درون تگهای < >spanو
< >/spanقرار خواهند گرفت خواص آنرا به ارث
خواهند برد ،خواصی از قبیل استیل ( )Styleو یا سمت و
جهت نمایش متون(.)dir
بر خالف تگ های < >pو < >divمرورگرها هیچ سطر
جدیدی به اول یا آخر المان < >spanاضافه نمی کنند.
:مثال
p>Some text <span<کد اچتمل نمايش کد روبرو توسط مرورگر
style="color:#0000AF;">another text</span> again
...text...</p> Some text another text again text
span ش ناسه هایاستاندارد ا لمانid, class, title, style, dir, lang
روش قدیمیروش: هاStyle sheet وspan مثالهائی از نحوه استفاده از المان
font color="#FF00FF">Hello!</font><span<صحیح
style="color:#FF00FF">Hello!</span><font
color="rgb(255,0,255)">Hello!</font><span
style="color:rgb(255,0,255)">Hello!</span><font
style="color:Fuchsia">Hello!</font><span
style="color:Fuchsia">Hello!</span><font
color="#FF00FF" size="3">Hello!</font><span
>style="color:#FF00FF;font-size:100%">Hello!</span
تگ <>div
تگ < >divسبب تعریف محدوده و گستره ای مشخص میشود .تمامی المان هائی که درون
تگهای < >divو < >/divقرار خواهند گرفت خواص آنرا به ارث خواهند برد ،خواصی از
قبیل استیل ( )Styleو یا سمت و جهت نمایش متون(.)dir
بر خالف تگ < >spanمرورگرها یک سطر جدید به اول و آخر المان < >divاضافه می
کنند.
مثال:
کد اچتمل نمايش کد روبرو توسط مرورگر<p>Some text <div
style="color:#0000AF;">another text</div> again
...text...</p> Some text another textagain text
id, class, title, style, dir, langش ناسه هایاستاندارد ا لمان divت عیینجهت
ن مایشمتون
مثا لیدر مورد استفاده از ت گ divو اعما ل"جهتن مایشمتون" ب ه ب خشیاز ص فحه اچتمل
Start TagPurposeک اربرد<div>Defines a division/section in
a documentت ع ریفب خشو ن احیه ایاز ص فحه اچتمل<span>Defines a
section in a documentت ع ریفب خشو ن احیه ایاز ص فحه اچتمل
چگونگی استفاده از استایل شیتها:
مرورگرها از روی استیلهای تعریف شده توسط استایل شیتها به فرمت دهی و نمایش اطالعات درون صفحه اچتمل میپردازند .تعریف
و استفاده از استایل ها در صفحات اچتمل به سه روش مختلف ممکن میباشد:
)1استایل شیتهای خارجی (: )external style sheet
در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی
به بیش از یک صفحه اچتمل اعمال شود .مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر
کلی در سایت کافی است که فایل استایل شیت کل سایت که معموال یک فایل واحد است تغییر داده شود( .باید توجه داشت که در این
حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند ).استایل شیتهای خارجی توسط تگ < >linkکه درون
بخش headصفحات اچتمل قرار میگیرد ،معرفی میشوند.
در مثال زیر با کمک شناسه hrefاز تگ linkنام و در حالت کلی urlفایل در برگیرنده استایلهای تعریف شده تعیین میگردد:
<)head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> 2استایل
شیتهای داخلی (: )Internal Style Sheet
کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط
بدرد آن صفحه خواهد خورد .در این حالت باید کدهای حاوی تعریف استایل درون تگ های < >styleو < >/styleقرار گرفته و
معموال نتیجه درون بخش headصفحه اچتمل گذاشته میشود.مثال:
< head><style type="text/css">body {background-color: red}p {margin-left:
)20px}</style></head>3استایل شیتهای درجا (: )Inline Styles
کاربرد این روش در مواردی است که باید برای یک المان (یا گروهی) خاص استایلی اعمال شود .در این حالت باید از شناسه ای به
نام styleکه تقریبا در تمامی تگها قابل اعمال است استفاده شود .مثال:
<>p style="color: red; margin-left: 20px">This is a paragraph</p
تگ های استایل
style>Defines a<ک اربردStart TagPurpose
ت ع ریفاستیلها درونی کstyle in a document
link>Defines the relationship between<س ند
ت عیینو ت ع ریفف ایلاستایلش یتtwo linked documents
font>Deprecated. Use styles<خارجی
از استایلش یتها استفاده. ک نار گ ذاشته ش دهinstead
basefont>Deprecated. Use styles<.ش ود
از استایلش یتها استفاده. ک نار گ ذاشته ش دهinstead
center>Deprecated. Use styles<.ش ود
.از استایلش یتها استفاده ش ود. ک نار گ ذاشته ش دهinstead
تغییرات در نسخه جدید اچتمل (: )4/0
هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطالعات محض بدون در
برداشتن جزئیات مربوط به فرمت و نمایش بود ولی با ایجاد نسخه 3/2زبان اچتمل و اضافه
شدن تگهای فرمت دهی مانند < >fontو یا شناسه هائی مانند colorو Alignمحتوا و
نمایش در صفحات اچتمل ادغام گردیده و همین امر سبب بروز مشکالت عدیده ای برای
طراحان و برنامه نویسان وب گردید .برای رفع این مشکل در نسخه 4/0اچتمل توصیه بر
جداسازی کامل این دو گروه از اطالعات بوده و در نسخه های آینده اچتمل این جداسازی
اجباری خواهد گردید و توصیه مدرسه وب نیز استفاده از استایل شیتها برای هر نوع تعریف
فرمت و ترازبندی میباشد .برای مثال در کد اچتمل زیر که بر اساس نسخه 3/2اچتمل
میباشد ،ساختار و محتوا (تگی از نوع پاراگراف با محتوای ")"This is a paragraph
با اطالعات نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترازبندی در وسط صفحه)
همزمان و در کنار هم آورده شده اند و این ادغام امکان تغییر و توسعه کد را بسیار محدود
خواهد کرد:
<p align="center"><font color="red">This is a
>paragraph</font></p
کد معادل مثال فوق با استفاده از استایل شیتها شرح داده
شده است(.هر چند که این مثال از تمامی امکانات استایل
شیتها و ایجاد فایلی کامال مستقل برای تعریف استایل
استفاده نکرده است
مدیریت سایت
امیدوارم اموزش های فوق به شما کمکی کرده باشد
با تشکر سینا