صفحه 1:
HTML & CSS
صفحه 2:
۴
صفحه 3:
. تمام صفحات وب با نوعی از 3111۷1 ساخته ميشود.
همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگر ها هستند. و مرورگر ها با
خواندن این دستورالعمل ها صفحات را نشان می دهند. دستورالعمل های نمایش صفحات وب»
برجسبهاى 1111/1
(hyper text markup language) ناميده ميشود.
صفحه 4:
Head, Body, Title and Meta Tags
صفحه 5:
به هر یک از < > تگ گفته ميشود.
در داخل اين تكّ ها كلماتى با مشخصات ee 01
قرار میگیرند. 5 0 5
بايد توجه داشت كه بعد از قرار كرفتن محتوا ان تىّ بايد ان
تگ بسته شود.(به جز در برخی موارد)
5 oe
۳
ا ان رين
صفحه 6:
Opening tag:
<tag name[attribute =“valu”]>
closing tag:
</tag name>
closing and opening tag:
container tag
صفحه 7:
:ججم کندها براعلینکه صفحه داراعساختار باشند زیاد استدٌ
اعت فیر دادن‌ساختارها شما باید رندستی_غییرانوا در کدها.2
«لنجام دهید که هم زمانبر استو هم درصد خطاءآزی ا لست
عض‌موارد کاملا ضعفدارد و به هیچ عنوانن میتوانت_غییرعدر لینکد.3
bold بودن تک گ5۲۳009 لنجام داد.مانند
پس برای رفع اين مشکلات طراحان وب ازوی.استفاده میکنند
صفحه 8:
<br>
<b> <strong>
<i> <em>
<u>
<super> <sub>
<big> <small>
<strike>
>HR>
<img>
<center>
<H1>,<H2>,<H3>,<H4>
<P>
صفحه 9:
> تا<0>,
<h6<
is a heading
This is a heading
‘This is a heading
This is
Thisis a hesding
een
ees
هط د 15 135
ees
۳
ene
1ط هه
This
صفحه 10:
:پاراگراف
پاراگراف توسط نگ <۳>:ایجاد مین و2
oy eee
0
صفحه 11:
@ htmintmi
¢
this
is
sample test
eas at
thiscbr
0
صفحه 12:
چند تک ایسای oT
برحسب ابتدابی | کاربرد
<html>
<body>
<hi>-<h6>
<p>
<bo>
<hr>
<I>
| یک فایل ۲۷۲۳۸ را ais guested
ax | قایل ۲۲۳۱۱ را ایجاد می کند .
| عتوات با اتدازه یک تا شش را ایجاد می کند ۰
| يك ياراكراق را ایجاد می کند .
| یک شکست در یک خط قرار می دهد .
| یک خط اققی در متن قرار می دهد .
| تعضیحاتی به قایل ۲۷۲۲۷ فضاقه می کید .
صفحه 13:
امه و
0
this text is bold
this text is stro
this text is em
this toxt is it
this text is big
pata Rey
۳-0
cory
00 eee Cle
9
1
0 ا
۱
ee ee eae
iat 15 عبرم علط
صفحه 14:
<small>
<strong>
<sub>
<sup>
<ins>
<del>
کاربرد
یک متن با حروق پررنگ را انجاد می کند .
یک متن با حروق بزرگتراز اندازه پیش فرض را ایجاد می کند .
یک متن با حروق ابتالیک را ایجاد می کند .
یک متن با حروق ایتالیک را ابچاد مج , کند
یک متن با حروف کوچکتراز اندازه پیش قرض را ایجاد می کند =
یک متن با حروق پررنگ را ایجاد می کند .
یک متن زیرنویس را ایجاد می کند .
یک متن بالانویس را ابجاد می کند .
یک متن زبرخطدار را انجاد می کند .
یک متن با خطی بر روی آن را ایجاد می کند .
صفحه 15:
با نوشتن»5۲.ادرس عکس ذخیره شده را مینویسیم
صفحه 16:
:ارجاع به اسناد ديكّر
Pr eee ا ا
<۱۳۵-۱۲۲۲۲۴:/۷/۷/۷/۵6۵۵6۱۶۴6۵۲۲ ه>
> ۱۳۵
“EMAIL_ADDRESS@YAHOO.COM">
SEND YOUR ASSIGNMENT.
</a>
دستور فوق به اين صورت ظاهر مید ۳۱۰۰
صفحه 17:
:نام كدارى و ارجاع به نقاط دیگر سند
<A NAME="top">Top of Page</A>
<A HREF="#top">Retum to the top</A> return to the top
صفحه 18:
target="_blank"
target="_self”
target="_parent"
target="_top"
کاربرد
یک فایل یا آدرس جدید را دریک بنجره جدید باز خواهد کرد.
یک فایل یا آدرس جدید را در بنجره فعلی باز خواهد کرد.
یک فایل یا آدرس جدید aaly> jl (parent frame). sLol OB 3 by
کرد. (راحع به قابها در مىاحث بعدی صحبت خواهیم کرد)
یک فایل یا آدرس جدید را در کل بنجره فعلی باز خواهد کرد ( راه
جالبی برای خارح شدت از قاب ها)
صفحه 19:
1.Tea
2.milk
صفحه 20:
۰ 8
+ milk
صفحه 21:
tr, td
® ۲ Th: table header
> Td: table data
صفحه 22:
LOM tela bse SVep verry Maral BWW Pe CF SEV ae a Uv) De mad
Tat vane eur me DUES CO VERO (soy vente) er نا
صفحه 23:
data) قاتا
صفحه 24:
Ae PCO SECM PPE فرم ها
عناصر فرم به کاربر اجازه می دهند که اطلاعاتی را وارد صفحه ما کند؛ و ما با دریافت آن
.اطلاعات به اهدافی که داریم برسیم
یک فرم توسط تگ <0۳۳0]> ایجاد ميشود.
form > <input> تى
پرکاربرد ترین برجسب درفرمها تك ]111211 ميباشد كه در اينجا با انواع آن را شرح میدهیم:
صفحه 25:
از این جعبه هنگامی استفاده می شود که بخواهیم کاربر کلمات یا اعدادی را در فرم بنویسید.
و از مشخصه 1626" ۲506 تعیین میشود.
بر renin ©
مسورمم‌ست |۲۴ ۵ و
fsrname
lastname
صفحه 26:
Checkboxes:
صفحه 27:
Radio Button:
صفحه 28:
Attribute and the Submit
Button:
صفحه 29:
Audio & video:
Video:
<video>
nad تت سوت توا ارت
<0ع۷۱0>
Audio:
<audio>
<source src="address film">
</audio>
صفحه 30:
<video controls>
<source src="webdesign_chapter.mp4">
<0ع۷۱۵>
با نوشتن کلمه 60۳۲0۱5 باکس زیر ایجاد میشود:
pre a a | ككل
صفحه 31:
> ۷0 ted>
<source src="webdesign_chapter.mp4">
SNe [old
prev ube Wel PES TM cee ee CMU Peter Clem
060ز۷> ۱۵۵
<source src="webdesign_chaper>
<video/>
۰ ا ار Pa
0
000 ل ecie) oy
<video/>
با اضافه کردن کلمه 00516۳ مینوان با آفرودن عکس مورد نظر از آن به عنوان پوستر فیلم
استفاده كرد.
صفحه 32:
صفحه 33:
اسناد ۲۱۲۸/۱ می توانند با 566۷ 51/۱6 هایی که نحوه نمایش قسمت های مختلف آن را
تعبین می کنتد ترکیب شوند.
* زبان توصیف این صفحات 655 نام دارد.
* نحوه نمايش توسط 5۱۷۱۵ ها تعیین می شود.
۴ 50۱6 ها در 5066 56۷۱6 ارلثه می‌شوند.
استفاده از سبک مناسب نمایش برای کاربران مختلف
Css: cascading style sheet
صفحه 34:
کی ی ار نب ارس اه سر ی را ۱ ۳
1 ار
1 : در اين حالت شما دستورات 695 را داخل هر نگ و به وسیله 5/۱6
bootie
Pree reae A boron Setar greet] We OCC ey pe Pod bere ioe mS kOe ape
میشود که از اين روش استفاده نشود.
Aelia
<"tag style=“css>
صفحه 35:
embeded ving) .2
ا ی Peectren
0 ل 7
به همين دليل بهتر است دستورات مربوط به يى صفحه به صورت 670260060
نوشته شود.
(0
>۳680<
۳
<head/>
صفحه 36:
3. روش 66۲۳۵۱ :
در این روش دستورات 55 یک فایل متنی نوشته میشود و با پسوند
5 ذخيره ميشود حال هر كجا لازم باشد كافى است اين فايل 055
را به وسیله !۱۱۱۱ به صفحه خود متصل كنيم و در داخل صفحه از ان
SLC Tert]| 0
external
<head>
<"link rel=“stylesheet” type=“text/css” href="“css>
>680/<
صفحه 37:
در صورتی که از خصوصیت 54/۱6 بیش از یکبار استفاده شود اخرین دستورات اعمال میشود و دستورات
قبلی در نظر گرفته نميشود.
در صورتی از تگ 5۷۱6 در حالت 6۳۸۵60۵060 بیش از یکبار استفاده شود مجموعه دستورات اعمال
ميشود.
از نظر 0 تبايد بيشتر از 7 تگ لینک اضافه شود
شکل دستورات 655 به این صورت میباشد:
Css command : css valu ;
در انتها تمام دستورات 55> حتما باید علامت ز داشته باشد.
صفحه 38:
60۳0۳0۵۲00 55) ها هیچ گاه دارای‌کارکتر فاصله نیستند و به جای
1ض نان سداس Ri
9 7 ا LU)
داخل" " قرار د در غير مبنرصورتفيازويه " " نيست
; font_family:arial
; "font-family: “time new
aaly ub «bh sy5 ojlail azly slo CSS VALU aS wiyg2 > *
Eevee Ya] DUP Sr] P|
0 3
صفحه 39:
7
رن
رت ی رن
1 را ۳
0
Renn met ee ce one
550 ا ROC)
اا ل يات مر 0 Br
[al areecy ا ۱
color : red! important
صفحه 40:
ت۱3
صفحه 41:
Right/left/center/justify code:
صفحه 42:
(border) y2)5 jlo j,olS
0 ره از (-lar eee Cae ee Cane
Border_width : 3px
و |
۳ es
(3پیکسل برای سمت راست/چپ/بالا/بایین)
PARIS EN ROS
صفحه 43:
Border-width : 8px 2px 4px 5px
411 1
Top right bottom left
1.Valu
2. نااقلا ناولا
(top,bottom) (left, right)
3.Valu valu valu
(top) (left,right) bottom
نااقلا اقلا بالقلا بااقلا.4
right bottom left ممع
صفحه 44:
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
*dotted - Defines a dotted border
“dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
“groove - Defines a 3D grooved border. The effect depends on the border-color value
*ridge - Defines a 3D ridged border. The effect depends on the border-color value
*inset - Defines a 3D inset border. The effect depends on the border-color value
*outset - Defines a 3D outset border. The effect depends on the border-color value
*none - Defines no border
“hidden - Defines a hidden border
صفحه 45:
Example for border style:
۱
A
bpp ARISEN ROS! be ARISEN ROS! PARISIEN ROSE
as - wig
صفحه 46:
فاصله بین دو object را گویند :
مثلا فاصله قرار گرفتن عکس از صفحه اصلی و اینطور نوشته میشود:
; Margin : 10px
از 4 طرفساخته شده است 20
margin_top
margin_bottom
margin_left
vvvy
margin_right
margin: 25px 50px 75px 100px;
top margin is 25px /right margin is 50px/bottom margin is 75px/ left margin is 100px
صفحه 47:
Padding:
به فاصله بين محتوا از لبه جعبه 03001۴9 گفته میشود
مانند ۳۱۵۲9۳ از 4 طرف ۵0/00۲0۳۱/۲۱9۳/۱6۲۲ تشکیل میشود.
صفحه 48:
The difference between margin & padding:
Padding Margin
صفحه 49:
Right
Border , margin , padding :
Margin
Border
Padding
Content
