Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
مرجع کاربرديCSS & HTML
براي طراحی وب سایت
مؤلفان: Craig GrannellVictor Sumner
Dionysios Synodinos
فاطمه فاتحیمترجم:
مقدمههرد در ای طزاحاى ب ت رس یغتد. ب، یک تکلصی در حال تغییز اعت هؼوال داغت
ای ختی غتد اها دارد تا ایک تغیاری اس آا کتاب ای سیادی جد طزاحی ب کتاب
تاد در کارای رسهز خد هرد اعتفاد قزار دد. طزاحاى تؼداد کوی اس آا را هی
ار اد قزاردادى ػافز ک ای طزاحی ب هتوزکش ؽد ا تز ری یکی اس جث تغیاری اس کتاب
گذارد. یکدیگز را ت ػد طزاح هی
ااای کاهاا رػ "عااایت تاازای طزاحاای ب HTML & CSS هزجااغ کااارتزدی"کتاااب
اای کتااب تا یکای اس کاد. زیاک اس ت اؼ ای را تزای طزاحی ب ت ؽوا هؼزفی های یکپارچ
چیادهاى فافحات اای ااتزی کار تا تقایز، ایجاد ه ای طزاحی ففحات ب هاد جث
درعات هااد -ای هزتثط در جای خد در سهاى هاعة پزداسد. در ز ت ؼ تکلصی هی
CSS تا وازا کادای HTMLکدای طر هثال تاد. آهسػ داد ؽد -ای اقؼی پزص
JavaScript د، یاک جاا در ؽ ای جداگا آهسػ داد هزتثط ت آا ت جای ایک در ت ؼ
کار یکدیگز آهسػ داد ؽد اعت تا تتاید تاثیز ز کاد را ری عااختار کا فافح تثییاد.
ای کاارتزدی اعاتفاد ؽاد اعات. ایاي کاار تاػا تزای درک تتز هطالة در ز قغت اس هثال
د یش تتایاد ؽد در ز سهاى ک ت اید تتاید تتزیي تز را اس ایي کتاب تثزید در آی هی
ای دیگز یش هرد اعتفاد قزار دید. ػافز ففحات را در عایت
سیازا توااهی ؛کار ن تزای افزاد هت قـ تغیار هاعة اعت ایي کتاب ن تزای افزاد تاس
داد. اگاز تا تااسگی کاار طزاحای ب را آ ااس پؽاؼ های -اس پای تا پیؾزفت -ا را هارت
اایی کا در ایاي اب تزای ؽوا تتزیي قط ؽزع اعت. اس طزفی ظزات رػاید، ایي کت کزد
ان CSSتا وایي دلیا ان طزاحااى غاتد، کتاب هرد اعتفاد قزار گزفت اعات تا رس
تاد اس آى تز تثزد. ا تزای ایجاد یک عایت خب هی گزافیغت
کارتزدی تدى (accessibility)قاتلیت دعتزعی تج کافی کتاب ت اعتاداردای ب هاد
(usability) اا گیازی اس تکلاصی در کار ظاز طزح تاػ ؽاد کا ازکظ تتااد تاا تاز
اای ایاي کتااب تا هغاائ هزتا تا ای ختی ارائ دد. یکی اس ت ؼ ای آى عایت طزاحی
،دى درظزگزفتي تظیوات هزرگز کارتزتاید ت هزرگزا اختقاؿ دارد ؽوا ت راحتی هی
عایت ختی طزاحی کید. گای هوکي اعت ک یک تگ خاؿ یاا هقادار یاک یضگای را فزاهاػ
اای ، اصHTML5اای هان کید. در اتای کتاب هزجغ کاهلی ؽاه توام ػافز خقیقا
HTML5 ،ای ای تحت ب یضگی رگCSS3 .قزار داد ؽد اعت
در اتتادای از فقا یاش ای کتاب عی دی وزا کتاب قزار داد ؽد ای هزت ت توزیيکد
فزعت هطالة ز ت ؼ ؽت ؽد اعت.
[email protected]آدرط گ اؽکال یاا پیؾااد اتقااد، اس طزیا در فرت جد ز
.ی خد را هطزح وایید ظزات ارسد
فاطو فاتحی
هغبلت فطؾت
12 .................................................................................. ة یعطاح ثط یا هقسه8 اول فصل
11 .............................................................................. تتطیا هضز زض یکتب ی هقسه
12 ................................................................................ ؿت؟یچ تیؾب ة دبزیا ضطضت
14 .................................................................................................. هربعجبى یبظبی
15 ............................................................................................. ة یطاحع ثط یهطض
17 .................................................. قز؟ یو اؾتفبز WYSIWYGاثعاض اظ کتبة يیا زض چطا
HTML5 ................................................................................................. 17هؼطفی
HTML .................................................................................. 03 ػبصط ب تگ یهؼطف
02 ..................................................................................................... تزضت یب تگ
HTML ..................................................................................... 00 ة اؾتبساضزبی
02 ....................................................................... (Semantic Markup) ییهؼب یؿیکس
CSS ........................................................................................................ 02 یهؼطف
03 .......................................................................................... عطح اظ هحتا یخساؾبظ
CSS ................................................................................................... 04 زؾتضبی
CSS ........................................................................................... 06 یباتربثگط ااع
07 ................................................................................................ کالؼ یباتربثگط
ID.................................................................................................... 23 یباتربثگط
23 ............................................................................................... یگط یباتربثگط
22 ..............................................................................................یهفه یباتربثگط
21 ................................................................................................ کبشة اتربثگطبی
20 ............................................................................................. ذصیص اتربثگطبی
20 .................................................................................. ة ی صفح ث لیاؾتب افعزى
23 .................................................................................... (Cascade) آثكبضی یب ثطگ
CSS ............................................................................................ 25 زض یا خؼج هسل
26 ......................................................................................... الی کسبی الگی ایدبز
32 .......................................................... ة صفح کی هدسز فیطای یزلیاؾتب دبز،یا
34 .........................................................................................ة صفح یهحتا ثب کبض
34 ............................................................................ تیؾب یب قك اعالػبت یهؼوبض
36 ........................................................................... ة ی صفح ی یال ؾبذتبض یظه
43 .......................................................................... ة یعطاح زض هخز یبتیهحسز
HTML & CSS 5مرجع کاربردی
40 ................................................................................ ة صفح کی یب الظه8 دوم فصل
42 ..................................................................................... ة صفحبت ثب کبض یب الظه
XHTML ..................................................................................... 42 ثب HTML هقبیؿ
43 ............................................................................................... ؾس بی فطض پیف
DOCTYPE ........................................................................................... 45 بی اػالى
45 .............................................................................................. (Head) ػاى ثرف
45 .................................................................................... (Page Titles) صفح يیػب
47 ................................................................................... خؿتد یهتضب ب هتبتگ
52 .............................................. (Keywords and Description) ب حیتض یسیکل بی کلو
Robots , Author Revist-After .............................................................................. 52
51 ..................................................................................... یذبضخ اؾبز ث سیپ زدبیا
Link ............................................................... 51 ضـ8 یذبضخ CSS یب لیفب سیپ دبزیا
import ................................................................... 52@ ضـCSS 8 یب لیفب سیپ دبزیا
CSS 8media queries ............................................................................... 52 فبیل اتصبل
JavaScript ........................................................................ 54 یؾسب favicon سیپ
55 ............................................................................................. طبیهؿ زهدس ثطضؾی
body ........................................................................................................... 56 تگ
CSS ..................................................................................... 56 زض ب یحبق ب فبصل
57 ................................ ػبصط توبم زض( margins and paddings) ب فبصل ب یقحب کطزى صفط
CSS ............................................................................ 57 زض ب کبزض یثطا یؿیهرتصط
62 ................................................................................... فطض فیپ ضگ فت يییتؼ
61 ....................................................................................... ة صفحبت یب یظه پؽ
CSS ........................................................................................ 60 زض یظه پؽ طیتصب
60 ..................................................................................................... یظه پؽ ضگ
60 ................................................................................................... یظه پؽ طیتص
Background-Repeat .................................................................................... 62 یػگی
Background-Attachment .............................................................................. 63 یػگی
Background – Position ................................................................................ 63 یػگی
فهرست مطالب 6
65 ...................................................................... ب یظه پؽ یثطا CSS زض یؿیهرتصط
65 ............................................................................................................ گطازیبت
66 ........................................................................ ة ی صفح یظه پؽ ث هطثط کبت
67 .......................................................................................... یظه پؽ یالگ افعزى
73 ....................................................................................................... ب یؾب دبزیا
72 .................................................................... طزیگ قطاض هتي یاتب زض ک ای یؾب دبزیا
CSS3 .................................................................................................. 72زض ب ؾبی
73 ............................................................................................ تصیطی بی گطازیبت
Watermarks....................................................................................................... 73
CSS3 .................................................................................................... 76الگبی
77 .......................................................................................................... ؾس ثؿتي
233 ................................................................................................. ب لیفب یگصاضبم
232 ..................................................................................................... یگصاض کبهت
231 .............................................................................................. کسب ؾطیغ ثطضؾی
232 ................................................................................ ة ی صفح ؾبذت یب الظه
233 ............................................................................................. هتى ثب کبض8 سوم فصل
234 ................................................................................... یتپگطاف هضز زض یا هقسه
236 ............... (ن؟یساض زؾت اض فت یب تگ هب چطا) یویقس یب ضـ ث هتى یثطا ؾجک دبزیا
223 .............................................................................. تبظ یقطػ8 ییهؼب یگصاض كب
222 ............................................................................................. تطبیت بپبضاگطاف
221 ................................................................................... یهغق یکیعیف بی ؾجک
221 ..................................................................... (Bold and Italic) هتي سیتأک بی ؾجک
220 ...................................................................... طاؾتبساضزیغ قس هؿخ یب لیاؾتب
Big Small ........................................................................................... 220 یب تگ
Subscript Superscript ..................................................................................... 220
222 .......................................................................... یؿی ثطبه یثطا یهغق بی ؾجک
HTML & CSS 7مرجع کاربردی
222 ........................................................................................... ب قل قل ب حیتض
223 .......................................................................................................... 8ب هرفف
224 ................................................................... هتي کطزى اضبف حصف ث هطثط ػبصط
225 .......................................................................... کسب حیصح فطم اظ اؾتفبز تیاو
225 .......................................................................................... یبیپب یب تگ تیاو
CSS ........................................................................ 226 اظ اؾتفبز ثب هتي ث یز لیاؾتب
227 ............................................................................................. ب فت ضگ يییتؼ
213 .................................................................................................... ب فت يییتؼ
212 ........................................................................... (web-safe) ة زض ويیا یبفت
211 ...........................................................................................ة ثؿتط ثط بی فت
210 .................................................................................. ة زض Sans-Serif یبفت
212 ......................................................................................... ة زض Serif یبفت
212 ................................................................................. تطبیت یثطا هبؾت یب فت
Anti-Alising ........................................................................................... 213 یػگی
214 .................................................................................. هتى یثطا طیتصب اظ اؾتفبز
215 ........................................................................... طیتصب کطزى يیگعیخب یب کیتک
203 ............................................................................... ذظ اضتفبع قلن ی اساظ يییتؼ
203 ................................................................................ کؿلیپ ثطحؿت ب اساظ يییتؼ
202 ..................................................... یسیکل بتکلو زضصس ثطحؿت هتى ی اساظ يییتؼ
em ................................................................. 201 زضصس حؿت ثط هتي یب اساظ يییتؼ
rem ........................................................................... 202 اظ اؾتفبز ثب هتي اساظ تؼییي
202 ................................................................................................ ذظ اضتفبع يییتؼ
font- weight , font- style font-variant ............................................... 204 طیهقبز يییتؼ
CSS ..................................................................... 204 زض فت یب یػگی یؿیهرتصط
205 ......................................................................................... هتي یب یحبق کتطل
206 ......................................................................... ب پبضاگطاف یثطا یتضفتگ اظ اؾتفبز
223 .................................................................................. کلوبت حطف يیث ی فبصل
Text-Transform .................................. 223 یػگی اظ اؾتفبز ثب حطف یکچک یثعضگ کتطل
فهرست مطالب 8
classes spans ....................................................... 222 اظ اؾتفبز ثب گطیز یب یگع دبزیا
220 .............................................................................. صفح کی ث ییهؼب یز ؾجک
223 ........................................ ذغط یثطا هبؾت اضتفبع يییتؼ یثطا یهثبل8 ییهؼب یزؾجک
Sans-Serif .......................................... 226 یبفت یثطا سیخس هثبل کی8 ییهؼب یزؾجک
232 ................................. هجب ذغط Serif یبفت یثطا ؾبز هثبل کی8 ییهؼب یزؾجک
CSS ................................................... 233 زض قل قل پبضاگطاف یاثتسا ثعضگ حطف دبزیا
CSS .............. 233 زض ػصط قج کی اظ اؾتفبز ثب (Drop Cap) پبضاگطاف یاثتسا ثعضگ حطف دبزیا
CSS ............................................................................ 235 اظ اؾتفبز ثب ب قل قل دبزیا
CSS .................................. 242 زض ب کالؼ اظ اؾتفبز ثب فطضفیپ يیگعیخب یب قل قل دبزیا
240 .......................................................................................... قل قل هطخغ افعزى
240 ........................................................................................................... بؿتیل
242 ........................................................................................... یجیطتطتیغ یب ؿتیل
242 ............................................................................................... یجیتطت یبؿتیل
243 .............................................................................................. یفیتص یبؿتیل
244 ................................................................................................ تزضت یبؿتیل
CSS ................................................................................... 244 زض ب ؿتیل یز ؾجک
list-style-image........................................................................................ 245 یػگی
246 .............................................................................. ب ؿتیل قلن ی اساظ زض یثط اضث
list-style-position ..................................................................................... 247 یػگی
list-style-type .......................................................................................... 247 یػگی
253 ...................................................................................... ب ؿتیل زض یؿی ذالص
253 .................................................................................... ب ؿتیل زض یحبق فبصل
252 ......................................................... یبثط ثرف یثطا( inline lists) یزاذل یب ؿتیل
251 .................................................................................... 8 ب ؿتیل هضز زض تیذالق
251 .................................................................................... تط پیكطفت یب ؿتیل دبزیا
254 ...................................................................................... ة زض کسب ثلک فیوب
HTML & CSS 01مرجع کاربردی
257 ......................................................................................... طیتصب ثب کبض8 چهارم فصل
263 ............................................................................................................. هقسه
263 ....................................................................................................... ضگ یتئض
263 .................................................................................................... ضگ ی چطذ
262 ........................................................................... کبس سیافعا یب ضگ ؿتنیؾ
261 .............................................................ب ضگ ی چطذ اظ اؾتفبز ثب یضگ فیع سیتل
263 ...............................................................................................وبلیگعازؾ اػساز
265 ........................................................................................... ة زض ويیا یب ضگ
266 ....................................................................................... طیتصب یب فطهت اتربة
JPEG ............................................................................................................. 266
GIF ............................................................................................................... 273
GIF89 8271 .............................................................................................. قفبف ع
PNG .............................................................................................................. 271
270 ......................................................................................... طیتصب یب فطهت طیؾب
272 ............................................................................. طیتصب هضز زض هتسال اقتجببت
272 .............................................................. ی اصلی صفح اؾتفبز اظ تصبیط ثطای ثس ـ2
272 .............................................................................. یاصل طیتصب یض کطزى کبض ـ1
273 ................................................................................... یاصل یؾسب یؿیثبظ ـ0
273 ......................................................................................... قلؽ یب یظه پؽ ـ2
273 ................................................................. ب ضگ زض تضبز بی کتطاؾت خز ػسم -3
274 ................................................................... طیتصب یثطا بزضؾت فطهت اظ اؾتفبز -4
HTML .............................................................................. 274 زض طیتص اثؼبز طییتغ -5
275 .............................................................. آى تیفیک ث ؿجت لیفب عیؾب تؼبزل ػسم -6
276 ........................................................................ آب خساکطزى طیتصب یض هتى -7
277 .............................................................................................. طیتصب ؾطقت -23
HTML ....................................................................................... 277 زض طیتصب ثب کبض
Accessibility ............................................................ 133 یػگی زض Alt اظ اؾتفبز یبیهعا
133 ................................................................................ زاض کیل طیتصب یثطا Alt هتي
فهرست مطالب 00
132 ..................................................................................... طیتصب یثطا یت altیػگی
Tooltip .............................................................. 132 هتى فیوب یثطا Alt Title کبضثطز
131 ........................................................................................ ب ػکؽ زض CSS کبضثطز
131 .............................................................................. طیتصب یثطا یهطظ ذغط دبزیا
CSS......................................................... 133 اظ اؾتفبز ثب طیتصب اعطاف زض تيه زازى قطاض
134 ......................................................................................... یتصبزف طیتصب فیوب
JavaScript ......................................................................... 134 زض یتصبزف طیتصب دبزیا
PHP ...................................................................... 123اظ اؾتفبز ثب یتصبزف طیتصب دبزیا
image sprites زض CSS ......................................................................................... 122
123 ............................................................ یبثط یهب دبزیا ب کیل کبضثطز 8پنجم فصل
124 ........................................................................................ یبثط زضهضز یا هقسه
124 ....................................................................................................... یبثط ااع
125 .................................................................................................... یزاذل یبثط
125 ..................................................................................................... تیؾب یبثط
126 .................................................................................................. 8خؿتد یبثط
127 ............................................................... ة صفحبت زض ب کیل ث یز ؾجک دبزیا
127 ..................................................... هجسأ یب کیل یؿج یب کیل هغلق، یب کیل
113 ............................................................................................... هغلق یب کیل
113 ................................................................................................. یؿج یب کیل
112 ................................................................................................... هجسأ یب کیل
111 ................................................................................................ یاذلز یب کیل
110 ...................................................... هدعا ی قبؾ ثب هطضگطب یقجل یب ؿر یؾبظگبض
112 ......................................................................................... صفح یثبال یب کیل
113 ..................................................................................................... ب کیل ااع
CSS ............................................................................... 114 زض ب کیل تیضؼ يییتؼ
115 .................................................................... ب کیل تیضؼ يییتؼ زض حیصح تیتطت
a a: link ............................................................................................... 116 تفبت
HTML & CSS 01مرجع کاربردی
CSS ........................................................................ 117اظ اؾتفبز ثب ب کیل ؾجک طییتغ
focus8 ................................................................................ 102 کبشة کالؼ گط فیگع
102 .......................................................................... یآثكبض8 ب کیل چسگب یب حبلت
101 ................................................................ ب کیل هرتلف یب حبلت یثطا ؾجک دبزیا
103 ............................................................. ب کیل زض یزؾتطؾ تیقبثل ییکبضا ثطزى ثبال
Title ................................................................................................. 103 ی صیذص
Accesskey Tabindex ............................................................................... 104 کبضثطز
105 ........................................................................................ یپطق یبثط یب کیل
105 ............................................................................................... یپطق کیل دبزیا
107 ................................................................................. یپطق کیل یثطا ؾجک دبزیا
122 ........................................................ یظه پؽ طیتص اظ اؾتفبز ثب یپطق کیل ی تؾؼ
Link Targeting ................................................................................................. 120
120 ................................................................................................ طیتصب ب کیل
123 ................................................................ طیتصب ث pop-up کچک یب پدط افعزى
123 ...................................................................... طیتص کی ث pop-upی پدط افعزى
132 ............................................................................................... یطیتص یب قك
CSS ..................................................................... 132 زض یطیتص یب قك هكبث دبزیا
CSS ................................... 133 اظ اؾتفبز ثب rollover حبلت زض یطیصت یب قك هكبث دبزیا
JavaScript ................................................................... 143 اظ اؾتفبز ثب ب کیل ی تؾؼ
pop-up.......................................................................................... 142 ی پدط دبزیا
140 .................................................................................................... طیتصب یگبلط
143 ........................................................................... ب ػکؽ ث ؽیطیظ ػجبضت افعزى
145 ......................................................................................... کیاتهبت طیتصب یگبلط
146 ................................................................................................ ثبظقس صفحبت
147 ........................................................................................ یثبظقس کبزض کی دبزیا
152 .................................................................. یثبظقس صفحبت ضز یزؾتطؾ حس فیافعا
151 ....................................................................یثبظقس صفحبت یثطا ثتط ؾبذتبض دبزیا
153 ............................................................................................ یبثط یهب دبزیا
فهرست مطالب 02
154 .................................................................. ب ؿتیل اظ اؾتفبز ثب یبثط یهب دبزیا
Nav ........................................................................................................ 154 ػصط
HTML CSS ............................................. 155زض قکل یا زکو یػوز یبثط یه دبزیا
161 ............................................ ثبقس ییکك یبثرف یزاضا ک یػوز یبثط یه دبزیا
163 ................................................................................................ یزاذل یب ؿتیل
163 ............................................................................... طیهؿ یزاضا یبثط یه دبزیا
165 ............................................................................ ؾبز یافق یبثط یه کی دبزیا
CSS ............................. 171 اظ اؾتفبز ثب سز كبى ضا فؼبل صفح ک یؾطثطگ یه کی دبزیا
Rollover ...................................................... 174 یب خل ثب یطیتص یبثط یهب دبزیا
CSS .......................................... 175 زض یظهپؽ طیتصب اظ اؾتفبز ثب یبثط یه کی دبزیا
032 ............................ هكجک طیتص کی اظ اؾتفبز ثب هتفبت اقکبل ب ضگ ثب ییب کیل دبزیا
033 ............................................. .کس طییتغ هتي عیؾب طییتغ ثب آى اثؼبز ک یبثط یه دبزیا
035 .................................................................................. ؾتی ز بثطی هی ایدبز
021 ........................................................................................... ییکك یهب دبزیا
023 ............................................................................... ؾت چس ییکك یه دبزیا
013 .................................................................. یبثط یهب یعطاح زض ب سیجب ب سیثب
010 ....................................................................... خسال ث یز ؾجک دبزیا8 ششم فصل
012 ....................................................................................... خسال هضز زض یا هقسه
013 ..................................................................................................... خسال ثب کبض
014 ................................................................................... خسل زض یهطظ ذظ افعزى
cellspacing cellpadding ..................................................................... 014 یب یػگی
015 ...........................................................................خسل یب فیضز ب ذب گؿتطـ
017 ................................................................................. خسال یتطاظثس اثؼبز يییتؼ
017 ......................................................................... خسل یب ذب یهحتا یػوز تطاظ
003 ........................................................... (accessibility) یزؾتطؾ تیقبثل ثب لخسا دبزیا
captions) (summaries ......................................... 002 خسال طیظ یب ذالص ب ؽیطیظ
HTML & CSS 03مرجع کاربردی
002 ................................................................................................. یخسل یتطبیت
000 ................................................................................................. یؾغط یب گط
SCOPE HEADERS ........................................................................................ 000
003 ................................................................................................. خسل کی دبزیا
004 ...................................................................................................... خسل دبزیا
007 ............................................................................................. خسل ث یز ؾجک
007 ............................................................................... خسال ث یهطظ ذغط افعزى
023 ........................................................................................ خسل یثطا ؾجک دبزیا
022 .......................................................................... خسل ث خساکس یاضب افعزى
022 ........................................................................................ خساکس یاضب دبزیا
php ................................................................. 025 اظ اؾتفبز ثب خساکس یاضب افعزى
nth-child8 ........................................................... 025 اتربثگط ثب خساکس اضبی افعزى
026 ........................................................................ ة ی صفح ؾبذتبض زض خسل کبضثطز
CSS ........................................................... 032 اظ اؾتفبز ثب ة صفحبت سهبىیچ8 هفتم فصل
031 .............................................................................................. ة صفح سهبىیچ
031 ...................................................................................... هكجک بی قبلت کبزضب
030 .................................................................................................... ب ؾتى ثب کبض
033 ..........................................................................................قبض ثبثت یب عطح
033 ................................................................................................... ثبثت بی قبلت
034 ................................................................................................. قبض بی قبلت
035 ........................................................................ صفح ػبصط ث یهغق یز تیهقؼ
CSS ...................................................................................... 035 زض صفحبت چیسهبى
035 ........................................................................... ة صفح یک اصلی ؾبذتبض ایدبز
036 ............................................................................................ کبزضب ث یز فطهت
043 .................................................... یال کبزض کیCSS 8 زض صفح ی یال ؾبذتبض یعطاح
043 ........................................................................... ثبثت ػطض ثب Wrapper کبزض دبزیا
فهرست مطالب 04
041 .............................................................. الی کبزض ث ظهی پؽ تصیط فبصل افعزى
043 .................................................................. ثبقس ػطض حساکثط یزاضا ک یکبزض دبزیا
044 ................................. صفح ؾظ زض کبزض کی قطاضزازى یثطا هغلق یزتیهقؼ اظ اؾتفبز
BOXOUT ................................................................... 053- ،یفطػ کبزض8 تزضت یکبزضب
float ....................................................................................................... 052یػگی
051 ................................................................................................. یفطػ کبزض دبزیا
055 ..................................... ؾتى کبزض يیچس اظ اؾتفبز ثب صفحبت ی كطفتیپ یب سهبىیچ
056 .......................................................................................... ییزتب یکبزضب ثب کبض
056 ............................................ .ؿتس ثبثت ػطض یزاضا ک یصفحبت زضdiv ز یطیکبضگث
063 .............................................................. قبض صفحبت دبزیا یثطاdiv ز یطیکبضگ ث
066 .............................. قبضقس یهحتا کطزى پبک Wrapper کبزض زضى ب ؾتى زازى قطاض
Wrapper ................................................................ 067 کبزض کی زاذل ب ؾتى زازى قطاض
Clear 072 .............................................................................. قبضقس یهحتا کطزى
073 ................................................................ یػفط کبزض يیچس یخبج یب ؾتى ثب کبض
074 ......................... یؾبذتگ یب ؾتى زض یظه پؽ طیتصب اظ اؾتفبز ثب یخبج یه کی دبزیا
076 ........................... یخبج ؾتى کی لزاذ یفطػ کبزض يیچس دبزیا8 یفطػ یکبزضب ثط یهطض
232 ............................................................................................ یخبج یهب دبزیا
231 ............................................................................................ هدبض یهب دبزیا
236 ............................................................................... ذزکبض یب سهبىیچ ااع دبزیا
236 ................................. ذزکبض یبسهبىیچ دبزیا یثطا body کالؼ طیهقبز CSS اظ اؾتفبز
222 ............................................................................................. فیوبیپ قبثل یاح
221 ..................................................................................................... ب نیفط ثب کبض
223 ................................................................................................. یزاذل یب نیفط
CSS ................................................................................. 224زض فیوبیپ قبثل یهحتا
226 ........................................................................................ ای قجک ؾیبل بی قبلت
227 .................................................................................... بلیؾ یب قبلت ثط یا هقسه
212 .......................................................................................... یاکك تیؾب یعطاح
210 ......................................................................................... یاکك یعطاح هؼطفی
HTML & CSS 05مرجع کاربردی
213 ......................................................................... کبضثطاى اظ اعالػبت بفتیزض8 هشتم فصل
mailto: URLs ................................................................................................... 214
215 ........................................................................................... ب آزضؼ رتيیض ن ث
215 .............................................................................................................. ب فطم
216 ......................................................................................................... فطم دبزیا
217 ................................................................................................. ب کتطل افعزى
202 ...................................................................................... ب فطم زض یزؾتطؾ تیقبثل
legend، fieldset label ............................................................................... 202 ػبصط
tabindex ............................................................................................ 200 ی صیذص
202 .............................................................................. کبضثط ؾوت یب فطم یهؼتجطؾبظ
204 ................................................................................. اػساز یب فطهت ظهبى د،یتبض
HTML5 ........................................................................... 205زض input یب فطهت طیؾب
HTML5 .................................................................................. 206زض فطم ػبصط طیؾب
CSS ................................................................................. 207 زض ب فطم ث یز لیاؾتب
223 ............................................................................................. ب فطم ث یز ؾجک
CSS ............................................................................... 222 زض كطفتیپ یب فطم دبزیا
226 .............................................................................................. فطم اعالػبت اضؾبل
nms FormMail ....................................................................... 226 پتیاؾکط یکطثسیپ
233 ....................................................................................... هتؼسز یب کس بفتیزض
233 ...............................................................................ؾطض ؾوت پتیاؾکط یهدظب
PHP ....................................................................... 232 اظ اؾتفبز ثب فطم اعالػبت اضؾبل
234 ........................................................................ اعالػبت اضؾبل یثطا لیویا اظ اؾتفبز
235 ............................................................................................ توبؼ صفحبت دبزیا
236 ...................................................... توبؼ اعالػبت اضتقبی یثطا ب کطفطهتیه اظ اؾتفبز
237 ............................................................. توبؼ اعالػبت اضتقبی زض ب کطفطهتیه کبضثطز
242 .......................................................................... کطفطهتیه یب توبؼ يیآال هبثغ
فهرست مطالب 06
243 ................................................................... توبؼ ی صفح کی بتیخعئ ؾبذتبض دبزیا
247 ...................................................................................... هطضگطب هكکالت8 نهم فصل
253 .................................................................................................... ییب آظهبیف
253 ................................................................................... حیضا یذغبب کطزى ثطعطف
254 ........................................................................................ هتؼسز یهطضگطب صت
Internet Explorer ................................................................................... 255 یب ثبگ
255 ...............................................................................................یقطع یب کبهت
257 ............................................................................... حیصح اػساز ث هطثط یذغبب
title ................................................................................ 263 ث ؿجت Alt ػجبضت تقسم
262 .......................................................... (peekaboo ی حفط) hasLayout بی هكکل ضفغ
260 .............................................................................................. هطضگطب پكتیجبی
Modernizer ..................................................................................................... 260
Normalize.css .................................................................................................. 262
HTML5 shim .................................................................................................. 262
263 ............................................................................ گطیکسی کبض ػبصط سىیچ8 دهم فصل
264 .................................................................................. گطیکسی کبض زض ػبصط سىیچ
264 ......................................................................................... ب تیق لیاؾتب تیطیهس
portfolio ....................................................................... 265 سهبىیچ ثب صفح کی دبزیا
266 ....................................................................یگبلط ی صفح اخعای زازى قطاض ن کبض
273 ........................................................................................ یگبلط یثطا ؾجک دبزیا
270 ........................................................................................... يیآال فطقگب دبزیا
272 ........................................................................................ بظی هضز طیتصب عطح
273 ....................................................................... گطیکسی کبض زض فطقگب یاخعا سىیچ
276 .............................................................................. يیآال فطقگب یثطا ؾجک دبزیا
332 ......................................................... يیآال فطقگب ی صفح زض ثبثت طیهقبز ب فت
HTML & CSS 07مرجع کاربردی
332 .............................................................................................. یتدبض تیؾب دبزیا
333 ........................................................................................ بظی هضز طیتصب عطح
334 ..................................................................... گطیکسی کبض یتدبض تیؾب یاخعا سىیچ
335 ................................................................................ یتدبض تیؾب یثطا ؾجک دبزیا
322 .................................................................................. یچبپ آثكبضی ی ب ثطگ ثب کبض
325 ............................................................................................................. ها مهیضم
A ...................................................................................................... 326 ی مهیمض
HTML5 .................................................................................................. 326 هطخغ
326 .......................................................................................... اؾتبساضز یب صیذص
327 ............................................................................................. یذلزا یب صیذص
313 ....................................................................................... سیکل صفح یب صیذص
312 ............................................................................................. ضذساز یب صیذص
Event311 ........................................................................................... فطم صطػ یب
310 ................................................................................................ پدط یضذسازب
HTML5 ............................................................................... 312 بی ذصیص ػبصط
B ...................................................................................................... 345 ی مهیضم
CSS ....................................................................................................... 345 هطخغ
CSS .............................................................................................. 345 یاخؼج هسل
CSS ......................................................................................... 346 زض هتسال طیهقبز
CSS ...................................................................................... 353 یب یػگی طیهقبز
373 ...................................................................................................... کبشة ػبصط
371 ....................................................................................................... ػبصط قج
CSS ................................................................................. 371 ی یال یالگب تیطیهس
C ..................................................................................................... 373 ی مهیضم
373 ............................................................................................. ة یب ضگ هطخغ
373 .................................................................................................... ب ضگ طیهقبز
فهرست مطالب 08
374 ........................................................................................................ ب ضگ بم
C ................................................................................................ 374 ب یؿ هطخغ
D...................................................................................................... 375 ی مهیضم
375 ..................................................................................................... اغگبى هطخغ
HTML5 .......................................................................................... 375 زض کبضاکتطب
376 ........................................................................... یگصاضقغ یبػالهت کبضاکتطب
433 ..................................................................................................... یبی حطف
ASII ........................................................................................ 431 یچبپ یکتطباکبض
ISO 8859-1 ..................................................................................... 433 یبػالهت
ISO 8859-1 ....................................................................................... 434 یکبضاکتطب
فصل اول
ای بر طراحی وب مقدمه
:نایذ هی فصلآچ زض ایي
؛زضٲٹضزایٷشطٶزٸطاحیٸةایٲ٣سٲٻ
؛اؾشبٶساضزټبیٸة
٦بضثبHTML؛
زؾشٹضټبیCSS؛
؛٦سټبیاٮ٫ٹیاٸٮیٻایؼبز
؛ٸةیؾبظٲبٶسټیٲحشٹاینحٻ
HTML & CSS 11مرجع کاربردی
کتبی زض هضز ایتطت ي هقسه
زاؾشبٴ زاؾشبٴـټبیٯٳیٶٹیؿٷس٪بٴ ثٽشطیٵ زض حشی ٶٳیټسریٯی سهٹض ٦ٻبیذٹز ٦طزٶس
اٲطٸظٺټؿز٪ٹٶٻضٸظیایٷشطٶزثٻ ای٦ٻ ثٻثطای، .آیسٸػٹزسجبز٬االبرزضؾطسبؾطزٶیب
ټٱ سؼبضرٸ زض بزیاثعاضیيطٸضیثٻایٷشطٶزټٱ ضٸزٲیقٳبضثطایاطاز ثب. قٳب ظیطا
ایٵأاٲبٲٷك.ػٽبٴٲطی٦ٷیسسٳبٲیاثعاضیباٲ٧بٶبرذٹزضاثٻؾطاؾطیسسٹاٶٲیاؾشبزٺاظآٴ
.ٲشبٸراؾز،٦ٻاٲطٸظٺٸػٹززاضزس٧ٷٹٮٹغیثؿیبضثبآٶچٻ
ثـٹز٦ـٻیټـبیضٸـثطضٸیټبسح٣ی١ؾطیی٥اضسفآٲطی٧بٲكٹ٬اٶؼب،1960یزضزټٻ
ضاٺحـ٭،آٲطی٧بییثباؾشبزٺاظآٶٽبثشٹاٶٷسزضٲٹضزٹا٢تحٳالراسٳیٲـصا٦طٺ٦ٷٷـسټبیٲ٣ب
ٸایٵثـساٴٲٷـبثـٹزاؾشبزٺقٹزایقج٧ٻنٹضرثٻدیكٷٽبزیایٵثٹز٦ٻاظٲصا٦طارٲؿش٣یٱ
قـج٧ٻاظ٦ـبضاشـبزٺیذبنیاظټبثرفحشیا٪طقسٲیػبیزی٫طٲٷش٣٭ثٻ٦ٻاالبراظػبیی
.ثبقٷس
بٶـسٸاٲبؾـبذشبضآٴثـٻ٢ـٹرذـٹزثـب٢یٲ،سٹؾدٷشب٪ٹٴدصیطشٻٶكسدطٸغٺثبایٷ٧ٻایٵ
.ٸػٹزآٲس٦ٻچٷسیٵزاٶك٫بٺآٲطی٧بییضاثٻی٧سی٫طٲشه٭٦طزثٻایؾطاٶؼبقج٧ٻ
زض.ٲیبٴٳـٹثـبظ٦ـطز٦ٱػبیذٹزضازضٶٹدبػٽبٶیقسٸ٦ٱیثسایٵقج٧ٻیزضزټٻ
Transmission Control،دیسایفدطٸس٧ـ٭ی٦ٷٷسٺایٷشطٶزثٻٸػٹزآٲس٦ٻاالیٸاغٺ،1980ؾب٬
(Protocol/Internet Protocol (TCP/IP)ایـٵدطٸس٧ـ٭.ٶیعثـٹز، ثـٹز٦ـٻسجـبز٬ایاـعاضقـج٧ٻٶـط
1980یټٳچٷـیٵزضزټـٻ.٦ـطزدصیطٲـییٲرشٯاٲ٧بٴټبؾیؿشٱضازضټبثیٵ٦بٲذیٹسطاالبر
٦ـطزثـبایؼـبزدیٹٶـسیـ٥اثـطٲشٵٸیسـالـٲـی.ثـٹزHTMLٲكـٹ٦٬ـبضضٸی"سیٱثطظٶٯی"
(Hypertext)سـطآؾـبٴاٲ٧بٴثط٢طاضیاضسجبثیٵذٹزٸټٳ٧بضاٶفضا،٪صاضیثٻی٥ظثبٴٶكبٶٻ
.٦ٷس
.االثٹزٶساظٸػٹزایٷشطٶزثی1990سبؾب٬ٲطزیبٲٻ،ٯیطٱ٪ؿشطز٪یایٵس٧ٷٹٮٹغی
یظثـبٶ،ؾطی٢ٹاٶیٵؾبزٺزضآٴظٲبٴاظی٥ ییضاٲطٸض٪طټـب٦ـسټب.آٲـسدسیـسHTMLثـٻٶـب
ؾـطیٶـس٦ـٻثـسټبثـٻیـ٥زازٲـیٸثطآٴاؾبؼذطٸػیٲٹضزٶطضااضائٻ٦طزٶسٲیزضیبز
اـعاضیاضظاٴایفایـٵظثـبٴزض٦ٷـبضاٲ٧بٶـبرؾـرزدیس.سجسی٭قسسطزٸٲحسٸسط٢ٹاٶیٵدیچیسٺ
اي ثط عطاحی ة هقسه: فصل اول 12
ٸ(ثیٷیـسٲـیضاآٴسهـٹیطثـسینـحٻ٦ـٻزض)٢Mosaicیٳزٸٲطٸض٪طټـبی٦ـبضثطزیٲبٶٷـس
٦ـٻآطـبضآٴآیـسایـٵظٲیٷـٻدسیـسس٧ٷٹٮٹغیاضسجببرثبضقس٦ٻاٶ٣الثیزضییٵسٹؾٻټٳچٷ
.٦ٷٹٴازاٲٻزاقشٻاؾزسب
اٲـبدـؽاظٲـسر،سضشٷـ٨سؼبضیؾـطاایـٵس٧ٷٹٮـٹغیػسیـسټبیثعضزضاثشسا٣اض٪بٴ
ٷـسزضثشٹاٶٲكشطیبٶكـبٴزسـبػٽـبٶیٸة٢ـطاض٪طـی٦ٹسبټیټعاضاٴقط٦زثـطضٸیقـج٧ٻ
.آٶالیـٵذطیـس٦ٷٷـسنـٹضرثٻؾطاؾطػٽبٴثٻاالبرآٶٽبزؾشطؾیدیسا٦ٷٷسٸؾذؽاظآٶٽب
طاحـییـبز٪یطیٹٮیٶ٧كیس٦ـٻٲٯـٹقـس.٦بضقسٶسذبٶ٫یٶیعزؾزثٻدؽاظآٴ٦بضثطاٴ
سٳـبآٶچـٻٲـٹضزٶیـبظ.آٴثطآیسیضاحشیاظٽسٺثٻسسٹاٶٲیٶیؿزٸټط٦ؽ٦بضزقٹاضی،ٸة
ٲـسرظٲـبٴزض.ٸٲ٣ـساضیـبیٸةثـٹزFTPی٪یطٶسٺی٥ؾطٸیؽ،ٲشٷی٪طٸیطایفی٥،ثٹز
ٸ٦HTMLبض٦طزٶـسٸثیكـشطاظټـطچیـعال٢ٳٷـسثـٻٷبنـطػسیـس٦ٹسبټیطاحبٴقطٸثٻ
سٸٶسـبایـٵٷبنـطثـبٲطٸض٪طټـبٲٷجـ١قـٹٲسسیٹ٦٬كـیس.قسٶسCSSآثكبضیټبیثط٪ٻ
ٸة٪طزیـسٸسـطؾطیٸةٸدیٹٶسټبیییایؼبزنحبرثؿیبضدیكطشٻثطاایؾطاٶؼبٸؾیٯٻ
ثسٸٴایٷ٧ٻٲؼجٹضثبقٷس،دیكطشٻزؾشطؾیدیسا٦ٷٷسټبییؾبیزٲطزثشٹاٶٷسثٻثبضقسٳٹ
.ٲسرظیبزیثطایزاٶٯٹزنحبرنجط٦ٷٷس
اـطازیطای٦ٯیـٻزی٫طاثعاضیٲٷبؾتثټبیضؾبٶٻثطذال،زضثؿیبضیاظ٦كٹضټبایٷشطٶز
ایـٵظٲیٷـٻثطایثؿیبضیاظاطاز٦ٻاٲـطٸظٺزض.زضټٳٻػبٸػٹززاضزس٣طیجبٸضٸزٲیقٳبضثٻ
حشـیاظٸػـٹزایٷشطٶـز٦ٳشـط٦ؿـی1990یاٸاؾزټٻثبٸض٦طزٶیٶیؿز٦ٻزضزاضٶسبٮیز
!آ٪بټیزاقز
HTML & CSS 13مرجع کاربردی
ثٻٲصا٦طارٶبٲیاؾزسجسی٭ثٻٲطثٹاـضیكٻ:٪زقٹزٲیاٶؼبایٷشطٶزاظػبیی٦ٻؾط
ثـٻ،ثبی٧سی٫طاضسجبثط٢طاض٦ٷٷسزازٲیټبٶطقس٦ٻثٻآٶٽباٲ٧بٴاثعاضیيطٸضیثطایٲیٯیٹٴ
زضذبٶٻثٷكیٷٷسٸثـبزـبسط٦بضقـبٴاضسجـب،ٶٳبیٷس٦ؿتٸاالبرثذطزاظٶسسح٣ی١ٸدػٸټف
یټـبیزی٫ـطزضؾطسبؾـطقـج٧ٻبٮیـزضیاظٸزضثؿیباٶؼبزټٷسثبظیٸذطیس،طاض٦ٷٷسثط٢
.ػٽبٶیقط٦ز٦ٷٷس
چیؿت؟ ؾبیت ة ضطضت ایجبز
ثبیس٧ط٦ٷیس٦ٻزٮی٭ایؼبزی٥ؾبیزچیؿز؟زضحب٬ٶٳبییس٢ج٭اظایٷ٧ٻقطٸثٻطاحیؾبیز
زاضحبيطٲیٯیٹٴ ؾبیزٸػٹز الظاؾزٶټب .ذٹزسبٴی٥ؾبیززضؾز٦ٷیسثطایسدؽچطا
اي ثط عطاحی ة هقسه: فصل اول 14
ثطایقط٦شی٦بضټٳچٷیٵ ثذطؾیس٦ٷیسٲیا٪ط ذٹز ثطایثبظاضیبثیاظ ضاٺ ایٵټٳٻ ٸػٹز ،ثب
زاضز؟یيطٸضسچٻؾبیزٸةؾبذزی٥
ی٦ٷـیٱ٦ـٻزضټـطدـطٸغٺٲـیسأ٦یـساٲب،٢هسٶساضیٱقٳبضااظؾبذزؾبیزٲٷهط٦ٷیٱ
٦بضزضٲـٹضزاظټطثٷبثطایٵ٢ج٭.ٲؿئٯٻاؾزسطیٵٲٽٱضیعیٸسییٵټسثطٶبٲٻ،طاحیؾبیز
ٸاـطازټـبقـط٦ز.ثطؾیس٧ـط٦ٷیـسذٹاټیسٲیچٻچیعیایٷ٧ٻچطاثبیسی٥ؾبیزثؿبظیسٸثٻ
قـٳبسسٹاٶٲیی٥ؾبیز.زاضٶسظیبزی٦بضثطزیٸسؼبضیاټساؾبیزٸةٲرشٯثطایایؼبزی٥
زاقـشٻثبقـیسا٪ـطشټـٵذال٢ـی.ضاثباطازٸیبٲكشطیبٴزی٫ـطزضؾطاؾـطػٽـبٴٲـطسج٦ٷـس
زاٶٯـٹز،آٶالیـٵیټب٧ؽیاضائٻ،ذٹزټبیٲحهٹ٬ثطایٶٳبیفزازٴؾبیزٸةاظی٥یسسٹاٶٲی
سبٲبٮتذٹز٦ٷسٲیا٪طذجطٶ٫بضټؿشیسی٥ٸثال٨ثٻقٳب٦ٳ٥.ٲٹظی٥ٸیبقطاؾشبزٺ٦ٷیس
ایؼبزیـ٥ؾـبیز،ذٹزسبٴنبحتسؼبضرټؿشیس٦ٻنٹضسیزض.ضازضاذشیبضزی٫طاٴ٢طاضزټیس
یـ٥،حشیا٪ط٣ؾط٪طٲیذبنیزاضیس.ثٽشطیٵٸؾیٯٻثطایثبظاضیبثیقط٦زقٳبؾزٲٳٹال
٦ٷیـسقـٳبسهٹض.قٳبضازاضٶسټبیؾبیزثٽشطیٵٸؾیٯٻثطاییبشٵاطاززی٫طیاؾز٦ٻال٢ٻ
ټـعاضاٴٶـطاٲـب،ثبقیسٲیسٷٽبطزیټؿشیس٦ٻزضقٽطسبٴال٢ٳٷسثٻی٥یٯٱیبؾٹبرذبل
.قٳبضازض٦ٷبضټـٱ٢ـطاضزټـسسسٹاٶٲیٸی٥ؾبیز٦ٷٷسٲیزی٫طزضؾطاؾطزٶیبٲبٶٷسقٳب٧ط
،زټـسٲـیضشـٻػـبیذـٹزضاثـٻایٷشطٶـزټبزالیٯیاؾز٦ٻاٲـطٸظٺ٦بـصثبظیضشـٻایٵیټٳٻ
یـ٥.ؾـزٸاٶشكبضـزضؾطاؾطػٽـبٴ٦ـبضیؾـبزٺاقٹزٲیظیبزآٴٶبزیسٺ٪طشٻټبیټعیٷٻ
٦بصټٳیكٻٸ٦ٻنٹضسیزض.ثبقسٲیآٶالیٵزضاذشیبضټٳ٫بٴنٹضرثٻزضسٳبضٸظؾبیزٸة
.ٲٳ٧ٵاؾزضٸظیٶعزٲبثبقسٸضٸظزی٫طزضؾ٭ظثبٮـٻثـطٸز،ٶیؿزټطضٸظزضزؾشطؼٲب
1000یـ٥ؾـبیز)اظاضؾـب٬ٲبٮـتٶٹقـشبضیاؾـزسـطټعیٷـٻټٳچٷیٵاٶشكبضنحبرٸة٦ٱ
نحٻ1000اٲباضؾب٬،زالضزضٲبٺیب٦ٳشطزضاذشیبضټٳ٫بٴ٢طاض٪یطز10ثبسسٹاٶٲیاینحٻ
ا٪طثرٹاټیسزضی٥ثطٸقٹضچـبحقـسٺسییـطیٲظال.(ټبټعیٷٻزاضز٦بصثٻی٥ٶطثیفاظایٵ
ٲٳـٹالاٲبثطایانالحثركـیاظیـ٥ؾـبیز،طاحیٸچبح٦ٷیسضاآٴایؼبز٦ٷیسثبیسزٸثبضٺ
اؾززضچٷسبی٭٦ٳیسییطایؼـبز٦٣بی .قـسٶیاؾـز٦ٷیـس٦ـٻاٮجشـٻ٦ـبضیٲیـسٸاٶؼـب
ټبیثعض٨ٸټٱثطایاقربل٦بضټٱثطایقط٦ز،ضؾبٶیاالبرآٶالیٵضٸظثٷبثطایٵاٲ٧بٴثٻ
HTML & CSS 15مرجع کاربردی
ٺقـسیطزضاالبرچـبحضؾبٶیٸسیضٸظاٲبثٻ،اؾز٦ٻ٣چٷسز٢ی٣ٻٸ٢زالظزاضزایؾبزٺ
.سطاؾز٦ٳیزقٹاض
یبظبي هربعجبى ٦ٷسٲیسأ٦یسټبیطاحیٸةطاحیٸس٧ٷٹٮٹغیٲرشٯټبیایٵ٦شبةثطضٸیػٷجٻ ثبیس، اٲب
قٳبثٻزی٫طاٴزضطاحیثبضٶطټبیسحٳی٭٦طزٴ.ٶیبظټبیٲربجبٴٶیعزضٶط٪طشٻقٹز
ٶبٲٷبؾت نحبسی ایؼبز ا٦ٮیٷ٥، ثطای اؾشبزٺ ٦بضثطاٴټبیثسٸٴ ٲشرهمٸػعثٻظط اطاز
اظطاحیؾبیزاثشساثبیسٲكرم٦ٷیسٶیبظټبیٲربت٢ج٭.قٹزٲیٹالٶیقسٴظٲبٴزاٶٯٹز
طح اظ ٸ چیؿز قٳب ٶحٹٺ، ٸ اٶشبضیٲحشٹا چٻ ؾبیز زاضیبټ٦بض٦طز سٶی ٦بض. ایٵ ثطای
ثطضٸیزټسٲیقٳباػبظٺی٦ٻثٹزػٻټٳچٷیٵسبػبیی.ثباقربلٲطسج٪ش٫ٹ٦ٷیسیسسٹاٶٲی
اٳب٦٬ٷیسٶطټبیالظٶیؿزسٳب.ټبیٲرشٯٲربجیٵؾبیزسح٣ی٦١ٷیس٪طٸٺ ٲربجیٵضا
اٲبؾی٦ٷیسسسازیاظ،(يسٸٶ٣ییٶیعزاقشٻثبقٷسٶطټبیچٹٴاطازٲرشٯٲٳ٧ٵاؾز)
ا٪طٲربجیٵقٳبطاحبٴ.یسٷیضازٸثبضٺثطضؾی٦ٷټبیایسٺ.ٲبٮتٲكشط٤ضازضٶطث٫یطیس
٦ٷٷسٲیثبیسزضٶطزاقشٻثبقیس٦ٻایٵاطازاظٲبٶیشٹضټبییثبز٢زسهٹیطثبالاؾشبزٺ،ټؿشٷس
ثٷبثطایٵثبیسثطاؾبؼآٶٽبطاحی،ثیٷٷسظیبزاؾزیی٦ٻزضٲبٶیشٹضټبیذٹزٲیټبضٶ٩ٸسساز
٦ٻثبیسثٻذبطزاقشٻثبقیس،ؼبضیټؿشٷسا٪طٲربجیٵؾبیزقٳباطازس.ذٹزضااٶؼبزټیس
ـثؿ اظ آٶٽب اظ ٦بٲذسبحٮخیبضی یٹسطـیب اؾشبزٺټبی آٶٽب٦ٷٷسٲی٢سیٳی سهٹیط ز٢ز ٦ٻ
768B1024ٲطٸض٪طټبییاؾز٦ٻ،ٲٽٱزی٫طی٦ٻثبیسزضٶطث٫یطیسیٲؿئٯٻ.سطاؾزیبدبییٵ
٦ٷٷسٲیاؾشبزٺ٦بضثطاٴقٳب ایٷ٧. اؾشبزٺ)ٻاؾشبٶساضزټبیٸةثب ٦ٻزضایٵ٦شبةٶیعاظآٶٽب
اؾز قسٺ ایؼبز( ثبض ظیبزی حس اؾزټبییؾبیزسب قسٺ ی٧ذبضچٻ ٲطٸض٪طټب، ټٷٹظ اٲب
اظی٦٥ساثٷبثطایٵټٳیكٻسٹػٻزاقشٻثبقیس٦ٻ.٦ٷٷسٲیثیٷیضاایؼبزیط٢بث٭دیفټبیٲك٧٭
٦ب ثیٵ٦بضثطاٴؾبیزقٳب زض ثیكشطیزاضٲطٸض٪طټب آٶٽبٶضثطز ا٦ظط زض ضا ٸنحبرذٹز س
٪بټیٲٳ٧ٵاؾزثٻچٷیٵآٲبضیزؾشطؾیٶساقشٻثبقیسٸیبٶشٹاٶیس.ٲٹضزآظٲبیف٢طاضزټیس
.اؾزضاثیبثیسٲطؾٹآٶچٻ٦ٻ
اي ثط عطاحی ة هقسه: فصل اول 16
زضاذشیـبضػٽـبٴؾطاؾـطزضطٸض٪طټبٲٲٹضزآٲبضذٹثیزضٷسسٹاٶٲیٲیس٦ٻؾبیزٸةزٸ
:ٷساظجبضس،سٷزټقٳب٢طاض
www.w3schools. com/browsers/browsers_stats. asp ٸ
http: //www. upsdell. com/BrowserNews/index. htm
اٲـب،آٲبضز٢یـ١یـب٢ـیٶیؿـشٷسثیٷیسٲیآٶالیٵنٹضرثٻاٲبسٹػٻزاقشٻثبقیسآٲبضی٦ٻ
اؾـشبزٺزضحـب٬حبيـطضاٲیسثبقٷس٦ٻثٻقٳبسـسازٲطٸض٪طټـبیٲـٹضزایٶٳٹٶٻٷسسٹاٶٲی
زؾـزٻٸثطاؾـبؼٶشـبیغثـ٦ٷیـسٲیثطضؾی٦ٻقٳب٦بضثطزٲطٸض٪طټبضاثبٸػٹزی.ٶكبٴزټٷس
زضایــٵ٦شــبةسٳــبٶیــعٲــب،زټیــسٲــیآٲــسٺطاحــیذــٹزضاضٸیآٴٲطٸض٪ــطذــبلاٶؼــب
آ٪بټیزاقـشٻشٯٲطٸض٪طټبیٲرټبیسبٸر٦ٻاظسبظٲبٶی.٦ٷیٱٲیاؾشبٶساضزټبیٸةضاضبیز
ذـٹزټـبیؾبیزاٮجشٻقٳبٶیعثبیس.قٹزٲی@ٳٻػباؾشبزٺزضټ،ی٧جبضطاحیAثبقیس٦بضقٳب
٦ٻٲٹضزٶطٹضیٷبٴحبن٭٦ٷیس٦ٻټٳٻچیعآٴسباٳیف٦ٷیسضازضٲطٸض٪طټبیٲرشٯآظٲب
.ضٸزٲیؾزدیفاقٳب
هطضي ثط عطاحی ة زضاثشساٲطٸض٪طټبثؿیبضؾبزٺثٹزٶس.٪یطیزاقشٻاؾزٱټبیاذیطضقسچكطاحیٸةزضؾب٬
ثٻټٳیٵزٮی٭.٦طزٶسٲیسٹاٶبییطاحبٴضازضطاحیٲحسٸز،ٶیعHTMLیاٸٮیٻټبیٸٶؿرٻ
زاقشٷسټبیؾبیزثؿیبضیاظ ٢سیٳیبټطیؾبزٺ ایٵ. ثط الٸٺ ، اثشسا یشذیطٺٲح٭ٸةزض
ټٳچٷیٵ.٦ٷٷسٺثٹزٶسؾبزٺٸذؿشٻ1990یٸاؾزټٻزضاټبؾبیزاالبرثٹزٸثؿیبضیاظ
ٸٲربجیٵٶیعچٷیٵچیعټبییضا٦طزٶسٲیاؾٷبزٸٲساض٤ثٻٶسضرٶیبظثٻٸیطایفدیسا،آٲبض
٦ٱضاٺذٹزذیٯیظٸزسییط٦طزٸ٦ٱ،زی٫طیاٲبٸةٶیعٲبٶٷسټطضؾبٶٻ.٦طزٶسٶٳیزضذٹاؾز
٦طز دیسا ضا ٯتقسسٹػٻٳٹثٻآٴػٸ، ټبؾبیزثطایٸة. زی٫ط٣زاقشٵٲٷبثاالبسی،
ٲشٷی٦بیٶجٹزٸ٦بضثطاٴسبحسظیبزی ټبضٶ٩، ،سهبٸیط، .٦طزٶسٲیٲبٮجٻاٶیٳیكٵٸسٷٹضا
ایٷشطٶز اعایفؾطز ٸ دیكطز ثب حشی ، ٸیسئٹ ٸ ٶیعنٹر ٸ ٦طزٺ دیسا ٢بثٯیزسٹؾٻ
.٪یطیقسٺثٹزچكٱټبیؾبیزٴػسیسٲهبزثبدیسایفآبظ٢ط.ؾبظیدیسا٦طزٺثٹزكطزٺ
ټطؾبیزی٥ٲ٣سٲٻ ٲییزض ٸاغٺٯفزیسٺ ٸ ٢طاضثٻSkip Introیقس اؾشبزٺ ٢سضیٲٹضز
HTML & CSS 17مرجع کاربردی
قسٺثٹزټبؾبیزس٣ٯیسیزضی٪طز٦ٻسجسی٭ثٻی٥ٸاغٺ ثطایؾبیزایٵضٸظټبطاحیٸة.
اؾشبزٺاظاٶٹاس٧ٷٹٮٹغی طاحبٴٸةثب ٸقٳباؾز٪طشٻٲٹضزسٹػٻ٢طاضاظدیفثیفټب
ټٳچٷیٵثباعایف.دیسا٦ٷیسزض٦ٷبضٯفCSSٸXHTMLظیجبییثطاؾبؼټبیؾبیزیسسٹاٶٲی
ٲیHTML5ٸCSSټبیٸػٯٹٺJavaScriptٲحجٹثیز ٦ٷسظیطاٯف٦بضثطز٦ٳشطی٦ٳشطیدیسا
٦ٷس.شیجبٶیٶٳیټبیٲٹثبی٭اظٯفدكزضزؾش٫بٺadobeقط٦ز
ٸزضزؾـشطؼثـٹزٴ(Usability)ظیبزیثط٢بثـ٭اؾـشبزٺثـٹزٴسأ٦یسطاحیٸةاذیطازض
(Accessibility)٦ٻٲحشٹااٶسطاحبٴزضثؿیبضیاظٲٹاضزثٻایٵٶشیؼٻضؾیسٺ.قسٺاؾزټبؾبیز
ٲٷبٶیؿز٦ٻطاحیثساٴٸزضزؾشطؼثٹزٴ٢بث٭اؾشبزٺثٹزٴاٲب.ثبیسزضاٸٮٹیز٢طاض٪یطز
ضبیـزاؾـشبٶساضزټبیٸةآیٷسٺذٹاټیـسزیـسټبیه٭٦ٻزضٹضټٳبٴ.ثبیس٦ٷبض٪صاقشٻقٹز
زضٸا٢ـزاٶؿـشٵاؾـشبٶساضزټبیٸةثـٻ.٪صاقشٵطاحـیذـٹةسٳـبقـٹزٶجبیسثٻ٢یٳز٦ٷبض
ضؾبٶیضٸظٵثٻټٳچٷی.٦ٷسٲیقسٺ٦ٳ٥ضٸظټبیٲسضٴٸثٻٸایؼبزچیسٲبٴټبؾبیزٸةیسٹؾٻ
.زټسٲیٲٷؿٹخقسٺضاثٻقٳبٶكبٴټبیضٸـٸ٦ٷسٲیسطضاؾبزٺټبؾبیز
اعاضیایسٲٳ٧ٵاؾززضیبشٵٲحییبٶطا٪طسبظٺٸاضززٶیبیطاحیٸةقسٺ
ثبقیس ؾطزض٪ٱ ٸة طاحی ثطای ظٲبٶی. ثطایسب ٲطٸض٪طټب ػسیسسطیٵ اظ ٦ٻ
اټٳیشیٶساضز٦ٻاظچٻٲحیی،٦ٷیسٲیؾبیزذٹزاؾشبزٺآظٲبیفنحبرٸة
،Opera،Firefox:ثطایطاحیاؾشبزٺ٦ٷیس)ٲطٸض٪طټبیػسیسسب٦ٷٹٴجبضسٷساظ
Internet ExplorerٸSafari ).
اي ثط عطاحی ة هقسه: فصل اول 18
قز؟ وی اؾتفبز WYSIWYG 1چطا زض ایي کتبة اظ اثعاضٶط ټعاضاٴ ایٷ٧ٻ زضثب ٶیع ٦شبة ایٵ اؾزٸ طاحیٸةٲٹػٹز ػٽزطاحیٸة٪باعاض
زاضزثطٲی زضایٵ٦شبةاظاثعاضإٲٳ٧ٵاؾزؾ. ؟اؾشبزٺٶكسٺاؾزWYSIWYGا٦٬ٷیسچطا
اظایٵٶٹٶطزٮی٭ایٵٲ اػشٷبةؿئٯٻایٵٶیؿز٦ٻ ٦ٷیٱٲیاعاضټب ثٯ٧ٻثٻایٵزٮی٭اؾز٦ٻ،
ایؼبز٦سټبضااظیٶحٹٺاعاضټبثؿیبضیاظایٵٶط.ثطاییبز٪یطیثٽشطثبیساظدبیٻقطٸ٦ٷیس
.٦ٷٷسٲیسٹػٻ٪طای٧ی٦بضټبیٸزضٶشیؼٻا٦ظططاحبٴ٣ثٻػٷجٻ٦ٷٷسٲیچكٱقٳبٲری
ثبٲك٧٭ٲٹاػٻ٦ٻنٹضسیزض.ثبقیسذٹضزٶ٧طزٺؾز٦ٻقٳبثٻٲك٧ٯیثطاایٵسبظٲبٶیذٹة
اعاضټبزٺاظٶطساؾشبټٳچٷیٵ.یسٲك٧٭ضاثططؾبظیسسٹاٶٶٳیقٹیسثسٸٴزاٶؿشٵ٦سټب
ٶحٹٺ ثط ٲب سٳط٦ع آٶ٣سض ٶیؿز٦ٻ ٲٷب ٦شبةثساٴ ایٵ ػٷجٻیزض ٸ ٦سټب ایدبیٻټبیٶٹقشٵ
اؾز٦ٻٶٳی اٶؼبایزاٶیٱچٻز٦ٳٻطاحیٸة زټسٲیچٻ٦بضیضا زضایٵ٦شبة. ،٣ قٳب
زاٶؿشٻ ٲیټبیٲش٧یثٻ ٶطذٹز ٶٹ ایٷ٧ٻ ثسٸٴ ٲیعاٴٸ٦ٷیسٲیاؾشبزٺاعاضی٦ٻثبقیس یب
ثبقس زاقشٻ اټٳیشی آٴ ثٻ قٳب سؿٯ سٳطیٵ٦ٷیٱٲیدیكٷٽبز. اٶؼب ی٥ثطای ٦شبة ایٵ ټبی
.اعاضطاحیٸةاؾشبزٺ٦ٷیسٶطزضCodeٲشٷیذٹةٶهت٦ٷیسٸیبایٷ٧ٻاظٶٳبی٪طٸیطایف
ضازضټطٲحییثطایطاحیٸةآٶٽبیسسٹاٶٲی،٦ٻثبٲبټیٱٸ٦سټبی٦شبةآقٷبقسیسٸ٢شی
زټیس ٢طاض اؾشبزٺ ٲٹضز اټٳیزاؾز. حبئع ٢بثٯیزاٶبثؿیبض ایٵٲ٣ساض زاقشٵ قٳ، بظیطا
٪بټیزاٶؿشٵطاحیٸةٸ.اعاضی٦بضذٹزضاسییطزټیسٲٳ٧ٵاؾزٲؼجٹضثبقیسٲحیٶط
.٦ٷسٲیسطبضؾبزٺ٦بضقٳبضاثؿیCSSٸHTMLاظػٳٯٻټبییس٧ٷٹٮٹغیاؾشبزٺاظ
HTML5هعطفیٶكبٶٻ نحبرٸةثطاؾبؼظثبٴ ؾٻٲیHyper Text markup Language٪صاضیا٦ظط ٦ٻ ثبقٷس
زضآٲسٺاؾز.یبز٪یطیایٵظثبٴثؿیبضؾبزٺاؾز.ټط٦ؽ٦ٻثٻHTMLحطاٸ٬آٴثهٹضر
_آٸضیسزؾزٲیثیٷیسټٳبٴاؾز٦ٻثٻآٶچٻٲی_What You See Is What You GetٲرWYSIWYGیٸاغٺ .1
ای٦ٻٶٳبیفؾبیزټؿشٷسٸزضٸا٢ثٻایٵٲٷیاؾز٦ٻسٳبنحٻبٲرهٹلطاحیٸةټثبقس.ایٵثطٶبٲٻٲی
زازٺذٹاټسقس،ټٳبٴذٹاټسثٹز٦ٻطاحیقسٺاؾز.
HTML & CSS 21مرجع کاربردی
ضاحشیٲی ثٻ ثبقس آقٷبییزاقشٻ آٴسٹاٶس٦بٲذیٹسط زازٴ ٢طاض س٩ٸ یبز٪یطیچٷس ٦ٷبضثب ټب
اٶب ٢سضی ثٻ ظثبٴ ایٵ ټٳچٷیٵ ٦ٷس. ایؼبز ٸة ی٥نحٻ طاحبٴ،ی٧سی٧ط ٦ٻ اؾز دصیط
ټبیثبثط٪ٻHTMLقٹٶس.ثٻذهٹلظٲبٶی٦ٻال٢ٳٷسثٻیبز٪یطیٸآظٲبیفآٴنحبرٲی
زټیٱازبقٹز.آثكبضی٦ٻثسازضٲٹضزآٶٽبسٹيیحٲی
HTML5ؾبذشبض ؾبزٺXHTMLٸHTML4ثٻٶؿجز ثب ٸ ظیجبسط سییطدصیطسط، ٲطٸض٪طټبیسط،
زض اؾز. ؾبظ٪بضسط ٢بثٯیزٸیػ٪یHTML5ٲرشٯ ٲشحط٤، سهبٸیط ٲبٶٷس ػسیسی ټبیټبی
سٹدٹ٪طایٸ دیكطشٻ، سهبٸیط نسا، حط٦زاٶش٣بٮیآٶالیٵ، ثبض1ػٯٹٺ اؾز٦ٻ قسٺ ايبٻ
ػسیس اؾشبٶساضزټبیٸةٲییایؼبزقبذٻ ٸػبی٫عیٵٷبٸضیاظ قٹز Flashټبیذبنیٲبٶٷس
ټبیٲٹثبی٭قسٺاؾز.دٯزط
HTML عبصط ب تگ هعطفی
٦ٻټبیبی٭HTMLاؾٷبز ټؿشٷس س٩ٲشٷی ثطHTMLټبی زض ٪یطٶسٲیضا ٷبنطټبس٩ایٵ.
HTMLثبدؿٹٶسټببی٭ایٵٲٳٹال.زټٷسٲیضاسك٧ی٭htmlایثبایٵحب٬سٺ.قٹٶسٲیشذیطٺ
htmدؿٹٶس سطػیح. زټٷسٲیضا اٲب، زضٲحیټبیٲحسٸزیزټٳبٴایٵدؿٹٶس DOSٶببی٭ضا
ٸازاض٦ٷسٲیایؼبز ضا ثطایٶببی٭٣ؾبظزٲیٸقٳب 3آٴاظ٦بضا٦شطٸثطایدؿٹٶس8سب
ټبثطایٶٳبیف٦ٻٲطٸض٪طټؿشٷسټبییس٩ثطزٺقسظآٶٽبٶب٦ٻاټبییس٦.٩ٷیساؾشبزٺ٦بضا٦شط
نحبرثبیسثط،ضٸظثبقٷسػسیسٸثٻ،ثبطوایٷ٧ٻٲطٸض٪طټب.٦ٷٷسٲینحبراظآٶٽباؾشبزٺ
٦بضټبٸایٵؾبظٲبٴضاٺ.ٶٳبیفزازٺقٹٶس(W3C)اؾبؼاؾشبٶساضزټبی٦ٷؿطؾیٹػٽبٶیٸة
.زټسٲیټبیسحزٸةضاسٹؾٻثؿیبضیاظس٧ٷٹٮٹغیټبیزذهٹنی
W3Cزاضایؾبیزwww.w3c.org اؾزٸاٲ٧بٶبرثؿیبضٲیسیاظػٳٯٻؾطٸیؽ
ٲی (validation)اشجبضؾٷؼی آٴ اظ اؾشبزٺ ثب قٳب ٦ٻ نحبرزاضز سٹاٶیس
.ؾبیزذٹزضاثطضؾی٦ٷیسٸة
1. Transition