آموزش اچ تی ام ال 4 html4 pdf
DESCRIPTION
TRANSCRIPT
آموزش جامع زبان
HTML4
نویسنده: وحید ولی زاده
9889تیرماه –مشهد
http://www.Pasargad-Graphic.com/blog
2 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
به نام خدانوشته شده و همه حقوق www.w3schools.comاین کتاب توسط آقای " وحید ولی زاده " و براساس سرفصل های سایت
متعلق به ایشان می باشد. استفاده از محتوای این کتاب با ذکر نام نویسنده آزاد است.
هم آن متعدد های ازمثال توانید می شما است وب طراحی دنیای به ورود مقدمه که HTML زبان آموزش ضمن کتاب این در
روند سریعتر شما شود می باعث اینترنت با مختصر آشنایی و ندارید خاصی دانش به نیاز کتاب این مطالعه برای .کنید استفاده
.کنید طی را یادگیری
دعتبى ثشای اػالم ظشات پیؾبدات خد توبط ثب هلف هیتاذ اص
الذام وبیذ [email protected]آدسط ایویل
HTML4آهزظ جاهع زتاى یغذ: زیذ لی صاد
w3schoolsبی عبیت عشفقلاعبط ثش
تعظ پیب فبدلی PDFطشازی یشایؼ
1330یشایؼ دم / تیشهب
www.Pasargad-Graphic.com/blog
http://www.Pasargad-Graphic.com/blog
8 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
http://www.Pasargad-Graphic.com/blog
4 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
آغاز ته کار
HTML هقذه ای تر ب هعرفی
: ب گطترد جایک هؼوال فمظ ة گفت هیؾد؛ ؽجک ای اعت ک توبم سایب ب هتقل ث آى سا (World Wide Web) ة گغتش خبی
.استجبط داؽت ثبؽذ دس عشاعش خبى ث ن فل هیکذ. توبم سایب ب هیتاذ دس ة ثب ن
WWW چگ کار هیکذ ؟ لشاس داسذ سایب Web Server لشاس هیگیشذ ک آى ب یض دس سایب بیی ث بم Web Page اطالػبت ة دس فبیل بیی ث بم
ت، عؼ اهخفف HTTP ک (Hyper Text Transfer Protocol) ب ثشای دیذى ففسبت ة اص اعتبذاسدی استجبطی ث بم Web) ب سا اص طشیك ثشبه بیی ث بم هشسگش ة Web Page اعتفبد هیکذ. سایب بی هتقل ث ة اطالػبت هخد دس
Browser) ،ؾبى هیذذ. سایح تشیي هشسگشبیی ک هسد اعتفبد لشاس هیگیشذInternet Explorer FireFox هیجبؽذ.
شاى هیذذ ؟چگ هررگرا صفحات ب را و ففسبت ة ؽبهل دعتسالؼول بیی ثشای وبیؼ تعظ هشسگشب غتذ. هشسگشب ثب خاذى ایي دعتسالؼول ب
.ففسبت ة سا ؾبى هیذذ .بهیذ هیؾذ HTML دعتسالؼول بی ففسبت ة، تگ بی
HTML چیطت ؟
HTML تفیف ة اعتیک صثبى ثشای ؾب گزاسی فشا هتی اعت ک کبسػ.
HTML ثشگشفت اص کلو Hyper Text Markup Language اعت.
HTML یک صثبى ثشبه یغی یغت ثلک یک صثبى ؾب گزاسی اعت.
HTML اص تگ بی ؾب گزاسی اعتفبد هیکذ ک اص طشیك آى ب ففسبت ة سا تفیف هیکذ.
یک فبیل HTML بد عبخت ؽدهی تاذ تعظ یک یشایؾگش هتی ع.
: HTML تگ ای
تگ بی ؾب گزاسی هؼوال تگ بی HTML خاذ هیؾذ.
ثشچغت بیی غتذ ک هتي ب سا تعظ کلوبت کلیذی ازبط هیکذ هبذ : <html>
تگ ب ث فست خفت غتذ ک الی تگ ؽشع دهی تگ پبیبى بهیذ هیؾد.
بی ثبص ؽذى ثغت ؽذى ن خاذ هیؾذ وچیي تگ بی ؽشع پبیبى تگ.
صفحات ب = HTML اضاد
اعبد HTML ففسبت ة سا تفیف هیکذ.
اعبد HTML ؽبهل هتي تگ بی HTML اعت.
اعبد HTML ففسبت ة یض خاذ هیؾذ.
http://www.Pasargad-Graphic.com/blog
5 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
عپظ وبیؼ آب ث فست ففسبت ة HTML خاذى اعبد… ( ذف یک هشسگش ة )هبذ ایتشت اکغپلسس فبیش فبکظ
.سا ؾبى ویذذ، ثلک ثب اعتفبد اص تگ ب ث تفغیش هستای ففسبت هیپشداصد HTML اعت. هشسگش تگ بی
)در این کتاب برای مشخص کردن شماره کد ها از اعداد استفاده شده است( : صیش تخ کیذ HTML ث هتي
1 <html>
2 <body>
3 <h1>My First Heading</h1>
4 <p>My first paragraph.</p>
5 </body>
6 </html>
: تضیح هثال تاال
هتي ثیي<html> <html/> ففس ة سا تفیف هیکذ.
هتي ثیي<body> <body/> هتي لبثل وبیؼ دس ففس ة سا هؾخـ هیکذ.
هتي ثیي<p> <p/> یک پبساگشاف سا ؾبى هیذذ.
! یذشرع ک
ت چ چیس ایی یاز داریذ ؟
ؽوب ثشای یبدگیشی HTML دس هدیذ آالیي ث یچ اثضاسی یبص ذاسیذ !
ؽوب یشایؾگش HTML یبص ذاسیذ!
ؽوب ث ة عشس یبص ذاسیذ !
ؽوب ث ة عبیت یبص ذاسیذ!
: HTML یرایشگر ای
.یذص اعتفبد هیکین Notepad کب دس ایي آهصػ ب اص یک ادیتس عبد هتي هبذسا یشایؼ HTML فبیل بی WYSIWY(“what you see is what you get”) ؽوب هی تایذ ث عبدگی ثب اعتفبد اص یک یشایؾگش
Dreamweaver یب FRONT PAGE کیذ ، هثلب اص یک یشایؾگش هتی عبد اعتفبد کیذ اگش ؽوب هی خایذ یک تعؼ دذ ة تاب ثبؽیذ هب تفی اکیذ هی کین ک ؽو
.سا یبد ثگیشیذ HTML تب افل الی
؟ HTM یا HTML پطذ
سا اتخبة کیذ.هب دس هثبل .html یب .htm سا رخیش هی کیذ ؽوب هی تایذ شکذام اص پغذبی HTML گبهی ک ؽوب یک فبیلي اعت یک سفتبس ثذ هسثی اص گزؽت ثبؽذ ک ثیؾتش شم افضاسبیی ک اعتفبد هی کین. ایي هوک .htm بیوبى اص پغذ
اعتفبد .html اعتفبد هی ؽذ فمظ پغذ ع زشفی سا لجل هی کذ.ثب شم افضاس خذیذتش هب فکش هی کین ک اگش اص پغذ .کین ثغیبس ایوي تش خاین ثد
آیا هیخایذ یک تار اهتحاى کیذ ؟
.سا اخشا کیذ. هتي صیش سا تبیپ کیذ note pad کبس ثب یذص غتیذ ثشبهاگش دس زبل
1 <html>
2 <head>
3 <title>title of page </title>
4 </head>
5 <body>
6 This is my first home page.<b> This text is bold </b>
7 </body>
8 </html>
.رخیش کیذ”mypage.htm“ فبیل سا تست ػاى سا اتخبة کیذ. یک خؼج گفتگ ظبش خاذ ؽذ .گضی ”open page“ یب ”open“ هشسگش ایتشت خد سا ثبص کیذ، اص هی فبیل گضی
“brows” یب “choose file” سا اتخبة کیذ دس هکبی ک فبیل HTML ضیخد سا عبخت ایذ لشاس گیشیذ. آى سا اتخبة کیذ سی گ
http://www.Pasargad-Graphic.com/blog
6 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
“open” کلیک کیذ.زبال ؽوب یک آدسط دس خؼج گفتگی خد هؾبذ خایذ کشد. ثؼاى هثبل “C:\mypage.html” گضی ok سا .کلیک کیذ هشسگش ففس سا ث ؽوب ؾبى خاذ داد
! اص طشیك لیک صیش هیتایذ آالیي کبس کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
http://www.Pasargad-Graphic.com/blog
7 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
HTMLعناصر
: HTML عاصر HTML ثب اعتفبد اص تگ بی HTML ؽبخت ؽذ اذ. ػبفش HTML فبیل بی هتی غتذ ک ثب ػبفش HTML پشذ بی
.تؼشیف هیؾذ
HTML تگ )ترچطة( ای
ثشچغت بی HTML ثشای ؾب گزاسی ػبفش HTML اعتفبد هی ؽذ
ثش چغت بی HTML هسبط هی ؽذ < >تعظ د کبساکتش
ایي کبساکتش بی هسبط کذ لالة بهیذ هی ؽذ
ثش چغت بی HTML هؼوال ثقست خفت هی آیذ<b> , <b/>
الیي ثشچغت دتبیی ثشچغت ؽشع دهی ثشچغت پبیبی اعت
ی هستای ػبفش غتذهتي بی ثیي ثشچغت اثتذایی اتبی
ثشچغجبی HTML ث زشف کچک ثضسگ زغبط یغتذ<b> هؼبدل<B> اعت.
HTML عاصر
: HTML و یک ضذ
1 <html>
2 <body>
3 <p>This is my first paragraph</p>
4 </body>
5 </html>
1 <html>
2 <body><p>This is my first paragraph</p></body>
3 </html>
. <html> <body> <p> : ثشچغت اعتفبد ؽذ اعت یؼی 3دس ایي هثبل اص
:تضیح کاهل هثال تاال : پاراگراف <p>عصر
1 <p>This is my first paragraph</p>
هتي ثبال یک ػقش HTML اعت.
ثشچغت<p> ث هب ؾبى هیذذ ک هتي ثبال یک پبساگشاف دس یک عذ HTML اعت.
ایي ػقش ثب تگ<p> ؽشع هیؾد ثب تگ<p/> پبیبى هی یبثذ.
هستای ػقش : This is my first paragraph
http://www.Pasargad-Graphic.com/blog
8 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: تذ <body>عصر
1 <body>
2
3 <p>This is my first paragraph</p>
4
5 </body>
ػقش<body> ثذ فبیل HTML سا ث هب ؾبى هیذذ.
ایي ػقش ثب تگ<body> ؽشع ثب تگ<body/> پبیبى هی یبثذ.
هستای ایي ػقش ؽبهل یک ػقش دیگش HTML اعت، یؼی پبساگشاف.
<html>عصر
1 <html>
2
3 <body>
4
5 <p>This is my first paragraph</p>
6
7 </body>
8 </html>
ػقش<html> ؾبى هیذذ ک توبم عذ html اعت.
ایي ػقش ثب تگ<html> ؽشع ثب تگ<html/> پبیبى هی یبثذ
هستای ایي ػقش ؽبهل یک ػقش دیگش html اعت، یؼی body یب ثذ عذ
چرا ها از تگ ایی تا حرف کچک اضتفاد هیکین ؟سا هی دذ.گبهی ک ؽوب ث <b>وبى هؼی <B>زغبط ث زشف کچک ثضسگ یغتذ HTML هب فمظ گفتین ک تگ بی
اعتفبد هی کذ.هب HTML ة گشدی هی پشداصد، هتخ خایذ ؽذ ک ثیؾتش آهصػ ب دس هثبل بیؾبى اص زشف ثضسگ تگ بی ویؾ اص ثشچغت بی زشف کچک اعتفبد هی کین. چشا؟
ؽشع کیذ اص ثشچغجبی زشف کچک اعتفبد آهبد کیذؽوب ثبیذ HTML اگش ؽوب هی خایذ خد سا ثشای غل بی ثؼذی XHTML دس خد ثشچغت بی زشف کچک سا تفی کشد HTML4 دس ظشی (W3C) ة کیذ.کغشعیم ؽجک گغتشد خبی
.ؽت هی ؽذزشف کچک ثب ثشچغجب( HTML غل ثؼذی)
: عاصر تگدس ففس ؽوب سا فشان HTML بفش هی تاذ اطالػبت اضبفی دس ثبس ػبفشثبؽذ ، ػ شچغجب خد هی تاذ ؽبهل ػبفشث
:کذ.ایي ثشچغت ػقش ثذ سا دس ففس ؽوب هؼشفی هی کذ<body>
:ؽوب هی تایذ ث هشسگش ثگییذ ک سگ پظ صهی ؽوب ثبیذ لشهض ثبؽذ هثل ایي<bgcolor>ثب اضبف کشدى ػقش
<body bgcolor=”red”>
ثب اضبف کشدى ػقش زبؽی ؽوب هی تایذ ث هشسگش ثگییذ ک خذل .<table>:سا هؼشفی هی کذ HTML ي ثشچغت یک خذلای
<”table border=”0> :جبیذ یچ لج زبؽی ای داؽت ثبؽذ ”همذاس”ػبفش ویؾ دس یک صج بم/همذاس هی آیذ، هثل ایي: بم=
اضبف هی ؽذ HTML بفشػبفش ویؾ ث ثشچغت ؽشع ػ
!رگس تگ پایای رافراهظ کیذ .ساث دسعتظ وبیؼ هیذذ زتی اگش ؽوب تگ پبیبی سا فشاهػ کیذ HTML ثیؾتش هشسگش بی ة عذ
1 <p>This is a paragraph
2 <p>This is a paragraph
http://www.Pasargad-Graphic.com/blog
9 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
لی ث آب اػتوبد کیذ.فشاهػ کشدى تگ پبیبی هدش ث اتفبلبت هثبل ثبال دس ثیؾتش هشسگش ب ث دسعتی وبیؼ داد هیؾد !پیغبم خطببی غیش هتظش هیؾد
.ث ؽوب اخبص ویذذ تب ایي هشزل سا سب کیذ ادبم ذیذ HTML تخ! : سژى )غخ( ثؼذی
: HTML عاصر خالی
ػبفش html ک ثذى هستی ثبؽذ ػبفش خبلی html ذ هیؾذبهی.
ػبفش خبلی سا هیتاى دس تگ آغبصیي ثغت!
<br> یک ػقش خبلی اعت صیشا تگ پبیبی ذاسد.)ک آى سا خظ ؽکغت یبد هیکذ(
دس XHTML XML سژى ثؼذی HTML و ی ػبفش ثبیذ داسای تگ پبیبی ثبؽذ.
اضبف کشدى یک اعلؼ ) / ( هبذ<br /> سیسی اعت تب ػبفش خبلی ثغت ؽذ.ایي کبس ث تگ آغبصیي یک سا ف .تبییذ ؽذ اعت XML ،XHTML HTml تعظ
زتی اگش<br> دس و ی هشسگش ب کبس کذ، ثبص ن ؽتي<br /> هطوئي تش دس آیذ ثبثجبت تش اعت.
: ”RED“ یا ‟RED„حالت ای کتیشي ، ، اص ش د زبلت کتیؾي دثل کتیؾي هی تاى اعتفبد کشد لی هستای ػبفش ثبیذ ویؾ دس کتیؾي ب هسذد ؽذ
اعتفبد اص دثل کتیؾي ب هتذال تش اعت. دس ثؼضی هلؼیت بی بدس هثل گبهی ک هستای ػبفش خد داسای کتیؾي :غتذ الصم اعت ک اص تک کتیؾي اعتفبد کین
Name='john "shotgun" Nelson'
html ا دریژگی ا شا
.ایي اهکبى سا هیذذ تب اطالػبتی سا ث یک ػقش اضبف کین HTML یژگی ب یب ؾب ب دس
: HTML شا ا در
ػبفش HTML هیتاذ ؽبهل خاؿ یژگی بیی ثبؽذ.
ؾب ب ایي اهکبى سا هیذذ تب اطالػبتی سا ث یک ػقش اضبف کین.
گ آغبصیي هسد اعتفبد لشاس هیگیشذؾب ب ویؾ دس ت.
ؾب ب ث فست خفت بم همذاس هی آیذ هثل : name=”value”
: هثال ترای شا ا
:تؼشیف هیؾذ، آدسط لیک ث فست یک ؾب)یژگی( ؽبخت هیؾد <a>تعظ تگ HTML لیک بی دس
">This is a link</a>http://www.w3schools.comhref=" <a
!دس آهصػ بی ثؼذی دس هسد لیک ب تضیر خاین داد. ػدل کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link : اص طشیك لیک سثش توشیي کیذ
: یک یژگی را قل کیذ (value) ویش هقذار .اسصػ همذاس یک یژگی ویؾ ثبیذ دس مل لل ب لسبظ ؽد
)ش هشسگشبعجک دثل اعتبیل دس مل لل ب سایح تش اعت لی عجک تک اعتبیل دس مل لل ب هسد لجل تش اعت.)اص ظ : ؽبهل مل لل هیؾد؛ الصم اعت ک ؽوب اص مل لل یک گب اعتفبد کیذ (value) دس ثیؾتش ضؼیت بی بدس، ک خد همذاس
name='John "ShotGun" Nelson'
http://www.Pasargad-Graphic.com/blog
91 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
تیتر و پاراگراف
.اص اویت یژ ای ثشخسداسذ HTML تیتش ب دس
: HTML تیترا در
تعظ تگ تیتش ب<h1> تؼشیف هیؾذ <6>تب.
<h1> ثضسگتشیي تیتش سا تؼشیف هیکذ<h6> یض کچکتشیي تیتش سا تؼشیف هیکذ.
: هثبل
1 <h1>This is a heading</h1>
2 <h2>This is a heading</h2>
3 <h3>This is a heading</h3>
. ثؼذ اص تیتش ایدبد هیکذکت : هشسگشب ث طس خدکبس یک فبفل خبلی لجل
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers : توشیي دس لیک سثش
: تیتر ا تطیار هن طتذ
تش فمظ ثشای تیتش ب اعتفبد کیذاص تگ بی تی.
ثضسگ تش ثشای (BIG) پشسگ تش ؾبى دادى یب (BOLD) دادى هتي اص تگ تیتش اعتفبد کیذ ؾبى.
ثشای عبختي فشعتی اص اطالػبت هستای ة عبیت ؽوب اص تیتش ب … ( هتس بی خغتد )هثل گگل یب .اعتفبد هیکذ
اعت کبسثشاى ففسبت ة ؽوب سا ث طس عطسی ثخاذ، اعتفبد اص تیتش ب ثشای عبصهبذی کشدى اص آى خب ک هوکي .هتي وچیي هظن ؾبى دادى آى هن اعت
تگ<h1> ثبیذ ثشای تیتش افلی اعتفبد ؽد، ثؼذ تگ<h2> ثؼذ <h3> … یؼی تگ<h1> هؼشفی کذ هوتشیي .اویتؼ کوتش اص ثمی اعت <h6>ک <h6>ؼ کوتش اعت ث تشتیت تب ک اویت<h2>تیتش اعت، ثؼذ
http://www.Pasargad-Graphic.com/blog
99 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
:قایي
تگ<hr> ثشای عبختي )لشاس دادى ( خظ افمی اعتفبد هیؾد.
: هثبل
1 <p>This is a paragraph</p>
2 <hr />
3 <p>This is a paragraph</p>
4 <hr />
5 <p>This is a paragraph</p>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr یي دس لیک سثشتوش
: HTML تضیح تفطیر در
.دسج ؽذ تب ؽت سا خاذی تش لبثل فن تش کذ HTML تضیسبت هیتاذ دس کذ بی .یوبیؼ داد خاذ ؽذتضیسبت تعظ هشسگشب بدیذ گشفت هیؾذ پظ دس تید دس هشسگش ب
: تضیسبت هبذ هثبل صیش ؽت هیؾذ
1 <!-- This is a comment -->
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment توشیي هثبل ثیؾتش دس لیک سثش !ایي ػالهت یغت (<) لجل اص ثشاکت ثغتثبص خد داسد لی (< ) کت : یک ػالهت تؼدت )!( ثؼذ اص ثشاکت
را تثیین ؟ HTML چگ کذ ای
” !!!چطسی ای عبخت ؟ !ی” زتوب ؽوب تب ث زبل یک ففس ی ة سا دیذ ایذ تؼدت کشد ایذ ؛ : ثشای فویذى ایي ک چگ آى سا عبخت ایي کبس سا ادبم دیذ
سا ثضیذ؛ ”View Page Source“ سا ثضیذ )دس ایتشت اکغپلسس( دس فبیشفبکظ ”View Source“ دس ففس ساعت کلیک کیذ گضی یففس ة هسد HTML دس هشسگشبی دیگش ن ث ویي تشتیت. .لتی ایي کبس سا ادبم دیذ یک ففس ثبص خاذ ؽذ ک کذ بی
.ظش ؽوب سا ؾبى خاذ داد
: HTML هرجع تگ ای
.الیي هشخغ تگ ب سا هؾبذ خایذ کشد ک ایي تگ ب ؽبهل ػبفش یک عشی اطالػبت اضبفی اعتؽوب دس هدیذ آ .دس آهصػ ثؼذی تگ بی دس هسد تگ بی ثیؾتشی فسجت خاین کشد
: دس صیش هوتشیي تگ ب سا هؾبذ خایذ کشد
: تضیسبت تگ
<html> یک عذ HTML سا تؼشیف هیکذ <body> ثذ افلی فبیل HTML سا تؼشیف هیکذ <h1> to.<h6> تؼشیف هیکذ 6تب 1تیتش سا اص عبیض <hr /> یک خظ افمی سا تؼشیف هیکذ سا تؼشیف هیکذ HTML تضیسبت دس <–!>
HTML Paragraphs :: پاراگراف ا
.ث پبساگشاف بیی تمغین هیؾذ HTML عذ بی
http://www.Pasargad-Graphic.com/blog
92 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: HTML اگراف ا درپار
پبساگشاف ب تعظ تگ<p> تؼشیف هیؾذ.
1 <p>This is a paragraph</p>
2
3 <p>This is another paragraph</p>
.کت : هشسگش ب ث طس اتهبتیک ی فضبی خبلی لجل ثؼذ اص پبساگشاف ایدبد هیکذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1 هثبل توشیي ثیؾتش دس لیک سثش
: تگ پایای را فراهظ کیذ
:سا ث طس فسیر وبیؼ هیذذ؛ هبذ هثبل صیش HTML اگش ؽوب تگ پبیبی سا فشاهػ کیذ، ثیؾتش هشسگشب کذبی
1 <p>This is a paragraph
2
3 <p>This is another paragraph
هثبل ثبال دس ثیؾتش هشسگش ب ث دسعتی وبیؼ داد هیؾد لی ث آب اػتوبد کیذ.فشاهػ کشدى تگ پبیبی هدش ث اتفبلبت !پیغبم خطببی غیش هتظش هیؾد
: HTML درشکطت خطط
اعتفبد <br>اگش ؽوب هیخایذ خظ سا ثؾکیذ )یک خظ خذیذی سا ایدبد کیذ( ثذى ایي ک پبساگشاف خذیذی سا ؽشع کیذ اص تگ .کیذ
1 <p>This is<br />a para<br/>graph with line breaks</p>
.اعت، ثبثشایي تگ پبیبی ذاسد HTML یک تگ خبلی دس </ br> : کت http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs شیي هثبل ثیؾتش دس لیک سثشتو
<br> یا </br> ؟
.، ػبفشی ثذى تگ پبیبی غیش لبثل لجل خاذ ثدHTML سژى بیی XHTML XML دس .هطوئي تش دس آیذ ثبثجبت تش اعت </ br>تي دس و ی هشسگش ب کبس کذ، ثبص ن ؽ <br>زتی اگش
: کت ای هفیذ – HTML خرجی ای
ؽوب دس وبیؾگش بی کچک ثضسگ چگ وبیؼ داد خاذ ؽذ سیغبیض کشدى آى تبیح HTML ؽوب ویذایذ ک ففس .هختلفی خاذ داؽت
صیبد یب خظ بی صیبدی، هتي خد سا هشتت کیذ فبیل خشخیتبى سا تغییش ؽوب ویتایذ ثب اضبف کشدى فبفل بی خبلی HTML دس .دیذ
.هشسگشب خظ ب فبفل بی اضبفی سا صهبى وبیؼ پبک هیکذ وبیؼ ویذذ .تؼذاد فبفل بی خبلی شچ لذس ثبؽذ فمظ یک فبفل خبلی دس هشسگش وبیؼ داد خاذ ؽذ. ثشای خظ ب ن ویطس
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_poem خدتبى اص طشیك لیک سثش اهتسبى کیذ ؽوب ثب توشیي کشدى دیذى هثبل بی صیبد هیتایذ اؽکبالت خد سا ثشطشف کیذ
: HTML هرجع تگ ای
<p> …………… یک پبساگشاف سا تؼشیف هیکذ <br />…………. خظ سا ایدبد هیکذ یک ؽکغت .
http://www.Pasargad-Graphic.com/blog
98 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
قالة تنذی و استایل
صثبى HTML اص تگ بیی هثل<b> دس آیذ پررنگ اعتفبد هیکذ تب هتي خشخی ث فست.
ایي تگ ب دس HTMLتگ بی لبلت ثذی هتي بهیذ هیؾذ ،.
: تگ های قالب بندی متن
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting مثال و تمرین بیشتر
http://www.Pasargad-Graphic.com/blog
94 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: تگ های خروجی کامپیوتر
: تگ های نقل قول ، کتیشن و توضیحات
: مثال های بیشتر
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch
.دس ایي هثبل، وبیؾبی گبگى هتي سا هی ثییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre
.، لبلت ثذی الی هتي خد سا)ؽبهل فبفل ب عشخظ ب(، زفع کیذpre ث کوک تگ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_computeroutput
ث کوک تگ ب، هتي ؽت ؽذ سا ث آى زبلتب وبیؼ داد. هثبل سا ؽت بی کبهپیتشی، زبلتبی خبفی داسذ ک هی تاى .ثجییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_address
.، زبلت خبؿ وبیؼ آدسط سا ث هتي هب هی دذ. ثجییذaddress تگ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_abbr
.اگش ثخاین هخفف یب هتشادف یک کلو سا دس هتي ؾبى دین چ هی کین؟ هثبل سا ثجییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bdo
.هثبل صیش ؾبى هی دذ ک چگ هی تاى هتي ؽت ؽذ سا عشت ؾبى داد
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_q
.مل لل دس هتي، ثب تخ ث ایک کتب یب ثلذ ثبؽذ، ث فست بی هختلف ؾبى داد هی ؽد. ایي هثبل سا ثجییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_del
.ثشای وبیؼ کلوبت ززف یب اضبف ؽذ ث هتي افلی، هثبل سا ثجییذ
HTML Style :: استایل ها
http://www.Pasargad-Graphic.com/blog
95 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
This text is in Times and blue . ؽت ؽذ اعت Times هتي سثش آثی اعت ثب فت
: HTML عنصر استایل در
: ذف اص ػقش اعتبیل ایي اعت .یک اعتبیل سایح هؼولی )پیؾفشك( سا ثشای و ی ػبفش پیبد کذ
.تشخیر داد ؽذ HTML ی خذیذی ک ثشای اعتبیل ب دسهؼشفی ؽذ. سا HTML 4 اعتبیل دس !ایي هغبئل سا ث ؽوب آهصػ هیذم CSS ػدل کیذ دس آهصػ
.آؽب ؽیذ HTML دس ایي عشی آهصػ ب فمظ ذف آؽبیی ػقش اعتبیل سا ث ؽوب داسم تب ؽوب ال اعتبیل ب دس
: HTML مثال هایی برای استایل در
1 style="background-color:yellow"
2 style="font-size:10px"
3 style="font-family:Times"
4 style="text-align:center"
: مثال های استایل : رنگ پس زمینه
1 <body style="background-color:yellow">
.تؼشیف هیکذ <body>یک اعتبیل سا ثشای ػقش style هؾخق http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle سگ پظ صهی ثب اعتفبد اص اعتبیل
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol سگ پظ صهی ثب اعتفبد اص سػ لذیوی
: فونت، رنگ و سایس متن
1 <p style="font-family:courier new; color:red; font-size:20px">
.تؼشیف هیکذ <p>یک اعتبیل سا ثشای ػقش style هؾخق http://www.w3schools.com/html/tryit.asp?filename=tryhtml_newfont فت،سگ عبیض ثب اعتفبد اص اعتبیل
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_font فت،سگ عبیض ثب اعتفبد اص سػ لذیوی
: تنظیم متن
1 <h1 style="text-align:center">
.تؼشیف هیکذ <h1>یک اعتبیل سا ثشای ػقش style هؾخق http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headeralign تیتش دس هشکض ثب اعتفبد اص اعتبیل
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_header تیتش دس هشکض ثب اعتفبد اص سػ لذیوی
http://www.Pasargad-Graphic.com/blog
96 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
لینک ها
.یک لیک آدسط یک عذ یب یک هجغ دس ة اعت : هثال
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links ایدبد فشاپیذ .ایي هثبل ؾبى هی دذ ک چگ هی تاى، دس هتي ؽت ؽذ، فشاپیذی ایدبد کشد
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_target ػکظ، ث ػاى فشاپیذ .ایي هثبل ػکغی سا ث یک فشاپیذ تجذیل هی کذ
)هثبلبی ثیؾتش، دس اتبی ایي پغت آهذ اعت(
Hyperlinks ،Anchors لیک ا در HTML HTML اص ثشچغت<a> ثشای عبخت یک پیذ ث پشذ بی دیگش اعتفبد هی کذ. یک anchor هی تاذ ث ش هجؼی دس ة
. … ، یک ػکظ ، یک فبیل فتی ، یک فیلن HTML اؽبس کذ.یک ففس :Anchor دعتسالؼول عبخت یک
1 <a href="url"> می شود کو نمایش داده متنی </a>
ثبیذ هکبی ک پیذ ث آى پشذ اؽبس هیکذ سا هؾخـ کشد. ثشای وبیؼ آدسط پشذ اص هخدیت Anchor دس گبم عبختي یکhref اعتفبد هی ؽد.کلوبت ثیي ثش چغت آغبص پبیبى Anchor ث ػاى فشا پیذ وبیؼ داد هی ؽد.
:سا هؼشفی هی کذ html.ir ذ ثیک پی Anchor ایي
1 <a href="http://www.pasargad-graphic.com/blog/"> کپاسارگاد گرافی </a>
پبعبسگبد گشافیک : خظ ثبال ؽجی ایي ؾبى داد خاذ ؽذ
: HTML یک لیک در : کلبػذ عبخت یک لی
1 <a href="url">Link text</a>
.تگ آغبصیي ؽبهل ػقشی دس هسد لیک اعت .هستای ػقش )هتي پیذ ( لغوتی اعت ک وبیؼ داد خاذ ؽذ
.کت : هستای ػقش زتوب جبیذ ؽبهل هتي ثبؽذ! هیتاذ ؽبهل لیک یک ػکظ یب ش چیض دیگشی ثبؽذ
http://www.Pasargad-Graphic.com/blog
97 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: href هشخص .یک لیک سا تؼشیف هیکذ آدسط href ػقش : صیش، یک لیک ث عبیت هدیذ آالیي سا تؼشیف هیکذ <a>ػقش
1 <a href="http://www.google.com">Visit Google!</a>
!Visit Google: کذ ثبال ث فست سثش وبیؼ داد هیؾد
: target صهشخ .ؽوب هیتایذ هؾخـ کیذ ک فبیل لیک داد ؽذ ث آى کدب ثبص ؽد target تعظ
:ث ػاى هثبل، کذ صیش عبیت هدیذ آالیي سا دس ففس خذیذی ثبص هیکذ
1 <a href="http://www.google.com" target="_blank">Visit Google!</a>
target هقادیر هجاز ترای
ضیحتو مقدار
_blank لینک در یک پنجره/تب جدید باز میشود
_self لینک در فریم/صفحه جاری باز می شود
_parent لینک در فریم والد باز می شود
_top لینک در در همان صفحه باز می شود/خروج از فریم
: name هشخصسای بم ؽوب هیتایذ لیکی ثغبصیذ ک ث لغوت ثشای عبخت یک لیک داسای بم اعتفبد هیؾد.تعظ لیک دا name هؾخق
.خبفی اص ففس هغتمیوب خؼ داؽت ثبؽذ ث خبی ایي ک کبسثش سا هدجس ث پیودى ففس کیذ تب ث لغوت هسد ظش ثشعذ : لبػذ عبخت یک لیک داسای بم ث فست صیش اعت
1 <a name="label">Any content</a>
: named anchor لبػذ عبخت یک
1 <a href="#label">Any content</a>
.سا تؼشیف هیکذ named anchor یک href دس ػقش #
: هثال HTML :داخل یک عذ anchor named ػقش
1 <a name="tips">Useful Tips Section</a>
http://www.Pasargad-Graphic.com/blog
98 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: لیک ث لغوت هسد ظش اص وبى عذ
1 <a href="#tips">Jump to the Useful Tips Section</a>
: لیک ث لغوت هسد ظش اص یک عذ دیگش
<a href="http://www.pasargad-graphic.com/blog/download-apple-safari-5/#comment-40"> مربوط بو مرورگر سافاری پرش بو بخش دیذگاه ىای </a>
: اطالعات هفیذ –کات پای ای ب اضبف کیذ. اگش ؽوب پیذی هثل ایي دسعت کیذث هبثغ صیش پؽ / ویؾ یک ػالهت
href="http://www.pasargad-graphic.com/blog"
ث اتبی آدسط اضبف کشد یک تمبضبی خذیذ دسعت هی / ت کشد ایذ ، چى عشس یک ػالهت ؽوب د تمبضب ثشای عشس دسع :کذ. هثل ایي
href="http://www.pasargad-graphic.com/blog/"
بم داس هؼوال ثشای عبخت یک خذل اص هستیبت دس اثتذای یک پشذ ثضسگ اعتفبد هی ؽد. ث ش ثخؼ دس هیبى Anchor اص ب دس ثبالی پشذ لشاس داد ؽذ اعت. اگش یک هشسگش تاذ Anchor بم داس داد ؽذ پیذ ث شکذام اص ایي Anchor پشذ یکAnchor بم داسی سا ک هؾخـ ؽذ اعت سا پیذا کذ ث اثتذای آى پشذ سفت یچ خطبیی اتفبق وی افتذ.
: هثال ای تیشتر http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations لیک ث هسلی دس ویي هتي
فشك کیذ دس اثتذای هتي، فشعتی اص هستای هتي ؽت ایذ. اگش ثخاین ثب کلیک سی ش یک اص عشفقلب، ث آى عشفقل .هشاخؼ کین، چگ ػول هی کین؟ لیک بی ایي هثبل، چگگی ایي کبس سا ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_getfree ؽکغتي زقبس لبة
سا تغییش هی دذ. ثشای ؽکغتي ایي هسذدیت اگش ففس ؽوب، داخل یک لبة وبیؼ داد هی ؽد، لیک بی آى، هستای لبة . تغییش هستای کل پدش هبذ ایي هثبل ػول کیذ
Email tml_mailtohttp://www.w3schools.com/html/tryit.asp?filename=tryhلیک ث
اعتفبد کذ، چ هی ؽد. ایي هثبل و ای ftp یب mailto ، هبذhttp دس فستیک آدسط لیک ؽوب، اص ؽوببی دیگشی غیش اص .سا وبیؼ هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto2 (ػی دیگش) Email لیک ث
.سا هی ثییذ mailto دس ایي هثبل و دیگشی اص لیک ع
http://www.Pasargad-Graphic.com/blog
99 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
تصاویر
! کلیک کیذ .ذف هب ایي اعت ؽوب خدتبى یبد ثگیشیذ! پظ سی لیک بی صیش کلیک کیذ تب زذدی ثب ایي ػقش آؽب ؽیذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images ! قرار دادى عکص
(!دس لیک ثبال هیتایذ ثفویذ چگ ػکظ ب سا دس ففسبت ة لشاس هیگیشذ )توشیي کیذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images2 ! قرار دادى عکص از ضرر دیگر
.دس لیک ثبال، س لشاس دادى ػکظ اص عشس بی دیگش سا هی ثییذ
: src تگ عکص ا هشخص .تؼشیف هیؾذ <img>ػکظ ب تعظ تگ HTML دس
.ذاسدخبلی اعت، ث ایي هؼی ک هیتاذ ؽبهل ػبفشی ثبؽذ تگ پبیبی <img>تگ .اعتفبد کیذ src ثشای ؾبى دادى یک ػکظ دس ففس، ؽوب ثبیذ اص ػقش
Src هخفف source (اعت )هجغ. .تقیشی اعت ک ؽوب هی خایذ دس ففس تبى وبیؼ دیذ url ،src هستای ػقش
:س هؼشفی یک تقیش
1 <img src="url">
url لشاس داسد . تقیشی کث هسلی اؽبس هی کذ ک تقیش دس آدب “logo1w.png” بهیذ ؽذ دس هغیش “/intl/en_ALL/images/srpr/” دس “http://www.google.com” داسای ایي url اعت:
1 <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />
دس آدب لشاس گشفت اعت.اگش ؽوب تگ تقیش سا ثیي د پبساگشاف لشاس HTML هشسگش تقیش سا خبیی لشاس هی دذ ک تگ تقیش عذ .دیذ ، هشسگش اثتذا پبساگشاف ال ، عپظ تقیش ثؼذ پبساگشاف دم سا ؾبى هی دذ
: alt هشخص :اعت یک هتي تفیفی alt ثشای هؼشفی هتي خبیگضیي ث خبی یک تقیش اعتفبد هی ؽد. هستای ػقش alt ػقش
http://www.Pasargad-Graphic.com/blog
21 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
1 <img src="boat.gif" alt="Big Boat" />
ث خاذ هی گیذ ک آى سا دس ففس اص دعت داد اعت ، عپظ هشسگش alt اگش هشسگش تاذ تقیشی سا ثبسگیشی وبیذ ، ػقش هتي خبیگضیي سا ثدبی آى ؾبى خاذ داد
وشا کیذ تب ثشای کغبی ک هدجسذ دس هشسگشبیؾبى فمظ هتي alt ایي یک ػبدت خثی اعت تب ش ػکظ سا دس ففس ثب ػقش .سا هؾبذ کذ ففس ؽوب ثتش هفیذ تش وبیؼ داد ؽذ
: اطالعات هفیذ –کات پای ای ، ثبثش فبیل ازتیبج اعت. ثبسگیشی تقبیش لت گیش اعت 11تقیش ثبؽذ ، ثشای وبیؼ کبهل ففس ث 10زبی HTML اگش یک فبیل
.ایي تفی هي ایي اعت ک اص تقبیش ث دلت اعتفبد کیذ
: هثال ای تیشتر
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgimg ػکظ صهی .ایي هثبل، سػ وبیؼ ػکغی ث ػاى صهی سا ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align هسل وبیؼ ػکظ
.هثبل هی تاى هسل وبیؼ ػکظ، غجت ث هتی ک ػکظ دسى آى لشاس داسد، سا تؼییي کشدث کوک ایي
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_float تؼییي هسل وبیؼ ػکظ دس پبساگشاف
.هی خایذ ػکغی سا دسى یک پبساگشاف وبیؼ دیذ. ثشای تؼییي هسل آى غجت ث هتي پبساگشاف، ث ایي هثبل تخ کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_adj تغییش اذاص ػکظ
.ایي هثبل سػ تؼییي اذاص ػکظ سا ثشای وبیؼ، ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_alt وبیؼ هتي خبیگضیي
چگ هی تاى ثشای یک ػکظ هتي خبیگضیي اتخبة کشد. صهبیک ػکظ داخل ففس کبهل ثبس ؾذ یب صهبیک کبسثش ػالل ای ث .ثش داد هی ؽد. ث ایي هثبل تخ کیذدیذى ػکغبی ففس ذاسد، ث کوک تؼییي هتي خبیگضیي، ؽشزی دسثبس ی ػکظ ث کبس
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink ػکظ، ث ػاى فشاپیذ
.ذ تجذیل هی کذایي هثبل ػکغی سا ث یک فشاپی
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap مؾ
دذ. ش یک اص ایي ازی، یک فشاپیذ ایي هثبل، سػ تمغین یک ػکظ ث ازی هختلف)وبذ یک مؾ( سا ؾبى هی .غتذ
: تگ ای عکص
http://www.Pasargad-Graphic.com/blog
29 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
جذول
جذل ا
.هثال ای زیر را تثییذ خدتاى توریي کیذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables ب خذل
.ایي هثبل ث هب ؾبى هی دذ ک چگ هی تاین یک خذل ثکؾین http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_borders زبؽی خذل
.ایي هثبل زبؽی بی هختلف خذل سا ؾبى هی دذ
: جذل ا
خذال ثعیل تگ<table> هؼشفی هی ؽذ.
ثعیل تگ( ش خذل ث عطشب <tr>) ثعیل تگ ش عطش ث علل بی داد( تمغین هی ؽد <td> )
زشف td ثیبگش داد خذلی (table data) غتذ ک زبی علل داد اعت.
ثبؽذ… یک علل داد هی تاذ زبی هتي ، ػکظ ، لیغت ب ، پبساگشاف ب ، فشم ب ، خظ بی افمی خذل ب.
01 <table border="1">
02 <tr>
03 <td>row 1, cell 1</td>
04 <td>row 1, cell 2</td>
05 </tr>
06 <tr>
07 <td>row 2, cell 1</td>
08 <td>row 2, cell 2</td>
09 </tr>
10 </table>
: چگگی وبیؼ دس هشسگش
http://www.Pasargad-Graphic.com/blog
22 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: border جذل ا عصر .زبؽی وبیؼ داد خاذ ؽذ زبؽی سا تؼییي کشد ایذ، خذل ؽوب ثذى (border) اگش ؽوب ثشای خذل ػقش
.ثؼضی اص هالغ ایي کبس هفیذ اعت لی ثیؾتش البت ؽوب یبص داسیذ تب زبؽی دیذ ؽد : اعتفبد کیذ border ثشای وبیؼ یک خذل ث وشا زبؽی ؽوب ثبیذ اص ػقش
1 <table border="1">
2 <tr>
3 <td>Row 1, cell 1</td>
4 <td>Row 1, cell 2</td>
5 </tr>
6 </table>
: ضر تیتر ا در جذل ا .تؼشیف هیؾذ <th>عشتیتشب دس یک خذل ثب تگ
01 <table border="1">
02 <tr>
03 <th>Heading</th>
04 <th>Another Heading</th>
05 </tr>
06 <tr>
07 <td>row 1, cell 1</td>
08 <td>row 1, cell 2</td>
09 </tr>
10 <tr>
11 <td>row 2, cell 1</td>
12 <td>row 2, cell 2</td>
13 </tr>
14 </table>
http://www.Pasargad-Graphic.com/blog
28 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: چگگی وبیؼ دس هشسگش
: ضلل ای خالی در جذل ا .علل بی خذال ثب هستای خبلی دس ثیؾتش هشسگشب خة ؾبى داد وی ؽذ
01 <table border="1">
02 <tr>
03 <td>row 1, cell 1</td>
04 <td>row 1, cell 2</td>
05 </tr>
06 <tr>
07 <td>row 2, cell 1</td>
08 <td></td>
09 </tr>
10 </table>
: چگگی وبیؼ دس هشسگش
خذل اص ثیي سفت اعت)هصیال ایي کذب دس هشسگش ثذیي فست ؾبى داد هی ؽذ.تخ کیذ ک زبؽی بی اطشاف علل خبلی
ث علل داد خبلی اضبف کیذ ( )زبؽی سا ؾبى هی دذ.(.ثشای خلگیشی اص آى یک فبفل ب همطع (Fire Fox)فبیش فبکظ .تب زبؽی سا هؾخـ عبصیذ
01 <table border="1">
02 <tr>
03 <td>row 1, cell 1</td>
04 <td>row 1, cell 2</td>
05 </tr>
06 <tr>
07 <td>row 2, cell 1</td>
08 <td> </td>
09 </tr>
10 </table>
http://www.Pasargad-Graphic.com/blog
24 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: چگگی وبیؼ دس هشسگش
: اطالعات هفیذ –کات پای د ک دس ث دلیل پؾتیجبی ثذ هشسگش ب ث ذست هسد اعتفبد لشاس هی گیشذ. اتظبس هی س<thead> ،<tbody> <tfoot>ػبفش
.ایي سذ تغییش کذ XHTML غخ بی ثؼذی
: هثال ای تیشتر http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables3 خذل ثذى زبؽی
.ایي هثبل یک خذل ثذى زبؽی سا هی ثییذدس http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers عشتیتشبی خذل
.شتیتشب سا دس خذل هی ثییذچگگی وبیؼ ع
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_nbsp علل خبلی
.بیؼ فسیر عللبی خبلی سا ؾبى هی دذ، ثشای و”;nbsp&“ ایي هثبل طشیك اعتفبد اص http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2 ػاى خذل
.ا ؾبى هی دذایي هثبل چگگی ػاى داس کشدى خذل س
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span تعؼ علل خذل ث ثیؼ اص یک عطش یب عتى
.ثیؼ اص یک عتى یب عطش سا هی پؽبذ سا هی ثییذدس ایي هثبل چگگی عبخت عللی ک http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements خذل دس خذل
.دسى یک خذل دیگش، ث ایي هثبل تخ کیذثشای عبخت خذلی،
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding زبؽی خبلی علل
.سػ لشاس دادى زبؽی خبلی ثیي هستای علل زبؽی اى سا هی آهصین دس ایي هثبل، http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing فبفل عللب
.ثشای تؼییي فبفل ثیي عللب ث ایي هثبل تخ کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_background صهی خذل
.ی خذل هی تاى یک سگ یب یک ػکظ سا اتخبة کشد. ث ایي هثبل تخ کیذثشای صه
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellbackground صهی ثشای یک علل
.وبذ هثبل لجل اعت ثب ایي تفبت ک ایي ثبس صهی فمظ ثشای یک علل اتخبة هی ؽد
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_align هسل وبیؼ هستای یک علل
.، هی تاى هسل وبیؼ هستای یک علل سا تؼییي کشد. ثشای ایي هظس ث ایي هثبل تخ کیذ”align“ ثب اعتفبد اص ػقش
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_frame تؼیي لبة دس خذل
.، هیتاى ع لبة دس خذل سا تؼییي کشد. گب کیذ”frame“ ث کوک ػقش
http://www.Pasargad-Graphic.com/blog
25 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
فهرست ها
HTML اص فشعت بی )لیغت بی( هشتت، بهشتت تؼشیفی پؾتیجبی هیکذ.
: هثال http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4 لیغت ثذى تشتیت
.ایي هثبل فشعتی ک دس آى تشتیت اویت ذاسد سا وبیؼ هی دذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists لیغت ثب تشتیت
.دس ایي هثبل ؽوب فشعتی، داسای تشتیت هی ثییذ ت(هثبلبی ثیؾتش، دس اتبی ایي ففس آهذ اع)
: ای اهرتة فرضت
یک فشعت بهشتت ، لیغتی اص الالم اعت.
(الالم فشعت ث عیل گلل ؾبى گزاسی هی ؽذ )هؼوال یک دایش عیب کچک
یک فشعت بهشتت ثب یک تگ<ul> آغبص هی ؽذ.
ش کذام اص الالم فشعت ثب تگ<li> آغبص هی ؽذ.
1 <ul>
2 <li>Coffee</li>
3 <li>Milk</li>
4 </ul>
: چگگی وبیؼ دس هشسگش
Coffee
Milk
.لشاس دیذ… داخل الالم فشعت هی تایذ پبساگشاف ب، پشػ ث خظ ثؼذ ، ػکظ ب، پیذ ب ، لیغت بی دیگش
http://www.Pasargad-Graphic.com/blog
26 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: فرضت ای هرتة
یک فشعت هشتت ؽذ یض لیغتی اص الالم اعت.
ؾبى گزاسی هی ؽذالالم فشعت ثعیل ؽوبس.
یک فشعت هشتت ثب تگ<ol> آغبص هی ؽد.
شکذام اص الالم فشعت ثب تگ<li> آغبص هی ؽذ.
1 <ol>
2 <li>Coffee</li>
3 <li>Milk</li>
4 </ol>
: چگگی وبیؼ دس هشسگش
1. Coffee 2. Milk
.لشاس دیذ… ب، پیذ ب ، لیغت بی دیگش داخل الالم فشعت هی تایذ پبساگشاف ب، پشػ ث خظ ثؼذ ، ػکظ
: فرضت ای تعریفی
یک فشعت تؼشیفی ، فشعتی اص الالم یغت.
ایي فشعت ، فشعتی اص ػجبسات تضیسبت آى ػجبسات اعت.
یک فشعت تؼشیفی ثب ثشچغت<dl> آغبص هی ؽد.
ش کذام اص الالم فشعت تؼشیفی ثب تگ<dt> آغبص هی ؽد.
تؼشیف دس فشعت تؼشیفی ثب تگ ش<dd> آغبص هی ؽد
1 <dl>
2 <dt>Coffee</dt>
3 <dd>Black hot drink</dd>
4 <dt>Milk</dt>
5 <dd>White cold drink</dd>
6 </dl>
: چگگی وبیؼ دس هشسگش
Coffee o Black hot drink
Milk o White cold drink
ؽوب هی تایذ پبساگشاف ب، پشػ ث خظ ثؼذ ، ػکظ ب، پیذ ب ، فشعت بی (<dd>داخل تؼبسیف یک فشعت تؼشیفی )تگ .لشاس دیذ… دیگش
http://www.Pasargad-Graphic.com/blog
27 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: هثال ای تیشتر /:www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_orderedhttp/ فشعت بی هشتت tوبیؾبی گبگى
.دس ایي هثبل فستبی هختلف فشعت بی هشتت سا هی ثییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered وبیؾبی گبگى فشعت بی دى تشتیت
.ایي هثبل وبیؾبی هختلف فشعت بی ثذى تشتیت سا ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2 فشعت بی ت دس ت
.چگگی عبخت فشعت بی ت دس ت سا دس ایي هثبل هی ثییذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_nestedlists2 فشعت بی ت دس ت
.ایي هثبل یض گ بی دیگشی اص فشعت بی ت دس ت سا ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists3 فشعت تؼشیفی
.ایي هثبل سػ عبخت فشعت ، ک دس آى همذاس هستای ش ػقش فشعت تؼشیف هی ؽذ سا ؾبى هی دذ
: تگ ای فرضت
http://www.Pasargad-Graphic.com/blog
28 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
فرم
.ث هظس اتخبة ااع هختلف سدی بی کبسثش اعتفبد هی ؽذ HTML فشم بی ! کوک هثال ا خدتاى توریي کیذت
.ایي هثبل طشیك عبخت یک فیلذ هتی سا ؾبى هی دذ. کبسثش هی تاذ اطالػبت خد سا دس ایي فیلذ ثیغذ فیلذ هتیhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_input
گبی یبص اعت ک همذاسی ک کبسثش اسد هی کذ، دیذ ؾد. ثشای ایدبد چیي فیلذ سدی، اص فیلذ سهض ػجس فیلذ سهضػجس
.اعتفبد هی کین. ایي هثبل سػ عبخت ایي فیلذ سا ؾبى هی دذhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputpassword
Forms :: فرم ا
.یک فشم ، هطم ای زبی ػبفش فشم اعت، لیغت بی text area فیلذبی هتی ، فیلذبیػبفش فشم ، ػبفشی غتذ ک ث کبسثش اخبص هی دذ تب اطالػبت سا )هثل
.دس فشم اسد کذ…( پبییي افتبى، دکو بی سادییی ، چک ثبکظ ب .هؼشفی هی ؽد <form>یک فشم ثب تگ
1 <form>محتویات فرم</form>
Input .دثیؾتشیي اعتفبد سا داسد.ع سدی ثب خاؿ آى تؼییي هی ؽ <input>تگ <form>دس تگ
.ااع پش کبسثشد سدی ب دس پبییي تضیر داد ؽذ اذ
فیلذ ای هتی .سا تبیپ کذ… فیلذ هتی گبهی اعتفبد هی ؽد ک ؽوب هی خایذ کبسثش ، زشف ، اػذاد
: چگگی وبیؼ دس هشسگش
1 <form action="">
2 First name:
3 <input name="firstname" size="20" type="text">
4 <br>
5 Last name:
6 <input name="lastname" size="20" type="text">
7 </form>
20تخ کیذ ک خد فشم لبثل سیت یغت ، وچیي تخ داؽت ثبؽیذ ک دس ثیؾتش هشسگشب طل فیلذ هتی ثطس پیؼ فشك .کبساکتش اعت
http://www.Pasargad-Graphic.com/blog
29 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
دکو ای رادییی .ییی صهبی اعتفبد هی ؽذ ک ؽوب هی خایذ کبسثش اص ثیي تؼذاد هسذدی اتخبة، یکی سا اتخبة کذدکو بی ساد
: چگگی وبیؼ دس هشسگش
1 <form>
2 <input type="radio" name="***" value="male" /> Male
3 <br />
4 <input type="radio" name="***" value="female" /> Female
5 </form>
.تخ کیذ ک فمظ یک گضی هی تاذ اتخبة ؽد چک تاکص ا
.چک ثبکظ ب صهبی اعتفبد هی ؽذ ک ؽوب ثخایذ کبسثش اص هیبى تؼذاد هسذدی اتخبة ، یک یب چذ گضی سا اتخبة کذ : چگگی وبیؼ دس هشسگش
01 <form>
02 I have a bike:
03 <input type="checkbox" name="vehicle" value="Bike" />
04 <br />
05 I have a car:
06 <input type="checkbox" name="vehicle" value="Car" />
07 <br />
08 I have an airplane:
09 <input type="checkbox" name="vehicle" value="Airplane" />
10 </form>
http://www.Pasargad-Graphic.com/blog
81 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: Submit فرم دکو Action عصر .کلیک هی کذ ، هستیبت فشم ث یک فبیل دیگش فشعتبد هی ؽذ ”Submit“ گبهی ک کبسثش سی دکو .هؼوال کبسی سا ثب اطالػبت سدی دسیبفتی ادبم هی دذ Action فبیل هؼشفی ؽذ دس ػقش : چگگی وبیؼ دس هشسگش
1 <form name="input" action="html_form_submit.asp" method="get">
2 Username:
3 <input type="text" name="user" />
4 <input type="submit" value="Submit" />
5 </form>
سا کلیک کیذ ؽوب سدی خد سا ث ففس ای ک ”Submit“ اگش ؽوب تؼذادی کبساکتش دس فیلذ هتی ثبال تبیپ کیذ دکو“action1.asp” بم داسد خایذ فشعتبد.آى ففس ث ؽوب سدی بی دسیبفتی سا ؾبى خاذ داد.
هثال ای تیشتر
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_checkbox چک ثبکظ ب
.سػ عبخت فیلذ چک ثبکظ)اتخبة( دس ایي هثبل تضیر داد ؽذ اعت. کبسثش هی تاذ هاسد هسد ظش خد سا اتخبة کذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio دکو سادییی
.دکو بی سادییی هبذ ایي هثبل عبخت هی ؽذ. اص ایي دکو ب ثشای اتخبة یک هسد اص چذ هسد اعتفبد هی ؽد
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 اتخبة کشکش ای عبد
ایي فیلذ اتخبثی، وبذ دکو سادییی، ثشای اتخبة یک هسد اص چذ هسد، ث کبس هی سد. ثب ایي تفبت ک فشعت ػبفش ثقست .قش اتخبثی فمظ دیذ هی ؽدکشکش، ثبص ثغت هی ؽذ؛ ػ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3 2فیلذ کشکش ای
ثب ایي تفبت ک ثشای ایي فیلذ، یکی اص همبدیش فشعت اتخبثف ث ػاى همذاس پیؼ ایي هثبل یض فیلذ کشکش ای سا وبیؼ هی دذ. .فشك تؼییي ؽذ اعت
http://www.w3schools.com/html/showit.asp?filename=tryhtml_textarea بزی هتی
تفبت ایي فیلذ ثب فیلذ هتی ایي اعت ک دس ایي فیلذ، خطبی ب هسذدی هی تاى اسد کشد. یک سدی چذ خطی. سػ عبخت .ایي فیلذ دس ایي هثبل آهذ اعت
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button دکو
.ایي هثبل سػ عبخت دکو سا تضیر هی دذ. ؽت سی دکو سا هی تایذ خدتبى تؼییي کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_legend هدوػ فیلذب
http://www.Pasargad-Graphic.com/blog
89 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
ث کوک ایي عبص هی تاى زبؽی ػای سا ثشای یک یب چذ فیلذ سدی تؼییي کشد. ایي دعت ثذی ث کبسثش کوک هی کذ ک .هدوػ اطالػبت هشتجظ ثب ن سا ثتش تؾخیـ دذ
Forms Example :: فرم اهثال ترای http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit (submit)فشم، فیلذبی سدی دکو تبییذ
.هی فشعتذ action دى فشم فیلذبی داخل آى سا ؾبى هی دذ. دکو تبییذ هستییبت فشم سا ث آدسطایي هثبل طشیك اضبف کش
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_checkbox فشم ث وشا چک ثبکظ
.ایي هثبل، فشهی ث وشا فیلذ چک ثبکظ داخل آى تؼشیف هی کذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio فشم ث وشا دکو بی سادییی
.ثبص ن هثبلی دیگش ثشای فشم. فشهی ک دس آى فیلذ سادییی خد داسد
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_mail اسعبل به الکتشیکی ث کوک فشم
.فشم تخ کیذ action ث کوک فشم، ؾبى داد ؽذ اعت. ث هخدیت email دس ایي هثبل سػ اسعبل
: تگ ای فرم
http://www.Pasargad-Graphic.com/blog
82 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
رنگ ها و فىنت ها
.سگ ب ثب تشکیت هبثغ سی لشهض ، عجض آثی هؼشفی هی ؽذ
Color Values :: هحتای رگ ا
.ثشای تشکیت همذاس سگ لشهض عجض آثی هؼشفی هی ؽذ 16سگ ب ثب اعتفبد اص ؾبى گزاسی هجبی .(hex #fff)اعت 255 ثبالتشیي همذاس (hex #000) پبییي تشیي همذاس سگی ک هی تاى ث یک هجغ سگی داد ففش اعت
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_colorhex هثبل توشیي دس لیک سثش
Web Standard Color Names :: ام رگ ا .یک کلکغیى اص بم سگ ب ثعیل ثیؾتش هشسگشب پؾتیجبی هی ؽد
پؾتیجبی هی ؽد W3C HTML4.0 سگ تعظ اعتبذاسدبم 16 تخ: فمظ ( aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , yellow )
.سگب اعتفبد کیذ 16ثشای توبم سگ بی دیگش ، ؽوب ثبیذ اص همذاس ؽوب ثبیذ اص همذاس هجبی
Web Safe Colors : رگ ای ایوي بسگ ایوي ة ثؼاى اعتبذاسد ة 216سگ هتفبت سا پؾتیجبی هی کشدذ ، لیغتی اص 256 چذیي عبل پیؼ ک کبهپیتشب فمظ
.پیؾبد ؽذسگ ثبثت اص پیؼ تؼییي ؽذ عیغتوی اعتفبد هی 40اص Mac دلیل ایي پیؾبد آى ثد ک عیغتن ػبهل بی هبیکشعبفت
.کشدذ
یغت ایي هسذدیتازتیبخی ث هیلیى سگ، 16 پؾتیجبی اکثش عیغتن ػبهل ب وبیؾگشب اصثب اهشص
: رگ 612جذل هتقاطع
http://www.Pasargad-Graphic.com/blog
88 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
http://www.Pasargad-Graphic.com/blog
84 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
:سا ؾبى هیذذ… گ ب ، همذاس خذل صیش بم س
aliceblue
240,248,255
F0F8FF
darkslategray
47,79,79
2F4F4F
lightsalmon
255,160,122
FFA07A
palevioletred
219,112,147
DB7093
antiquewhite
250,235,215
FAEBD7
darkturquoise
0,206,209
00CED1
lightseagreen
32,178,170
20B2AA
papayawhip
255,239,213
FFEFD5
aqua
0,255,255
00FFFF
darkviolet
148,0,211
9400D3
lightskyblue
135,206,250
87CEFA
peachpuff
255,239,213
FFEFD5
aquamarine
127,255,212
7FFFD4
deeppink
255,20,147
FF1493
lightslategray
119,136,153
778899
peru
205,133,63
CD853F
azure
240,255,255
F0FFFF
deepskyblue
0,191,255
00BFFF
lightsteelblue
176,196,222
B0C4DE
pink
255,192,203
FFC0CB
beige
245,245,220
F5F5DC
dimgray
105,105,105
69,69,69
lightyellow
255,255,224
FFFFE0
plum
221,160,221
DDA0DD
bisque
255,228,196
FFE4C4
dodgerblue
30,144,255
1E90FF
lime
0,255,0
00FF00
powderblue
176,224,230
B0E0E6
black
0,0,0
000000
firebrick
178,34,34
B22222
limegreen
50,205,50
32CD32
purple
128,0,128
800080
blanchedalmond
255,255,205
FFFFCD
floralwhite
255,250,240
FFFAF0
linen
250,240,230
FAF0E6
red
225,0,0
FF0000
http://www.Pasargad-Graphic.com/blog
85 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
blue
0,0,255
0000FF
forestgreen
34,139,34
228B22
magenta
255,0,255
FF00FF
rosybrown
188,143,143
BC8F8F
blueviolet
138,43,226
8A2BE2
fuchsia
255,0,255
FF00FF
maroon
128,0,0
800000
royalblue
65,105,225
4169E1
brown
165,42,42
A52A2A
gainsboro
220,220,220
DCDCDC
mediumaquamarine
102,205,170
66CDAA
saddlebrown
139,69,19
8B4513
burlywood
222,184,135
DEB887
ghostwhite
248,248,255
F8F8FF
mediumblue
0,0,205
0000CD
salmon
250,128,114
FA8072
cadetblue
95,158,160
5F9EA0
gold
255,215,0
FFD700
mediumorchid
186,85,211
BA55D3
sandybrown
244,164,96
F4A460
chartreuse
127,255,0
7FFF00
goldenrod
218,165,32
DAA520
mediumpurple
147,112,219
9370DB
seagreen
46,139,87
2E8B57
chocolate
210,105,30
D2691E
gray
128,128,128
808080
mediumseagreen
60,179,113
3CB371
seashell
255,245,238
FFF5EE
coral
255,127,80
FF7F50
green
0,128,0
008000
mediumslateblue
123,104,238
7B68EE
sienna
160,82,45
A0522D
cornflowerblue
100,149,237
6495ED
greenyellow
173,255,47
ADFF2F
mediumspringgreen
0,250,154
00FA9A
silver
192,192,192
C0C0C0
cornsilk
255,248,220
FFF8DC
honeydew
240,255,240
F0FFF0
mediumturquoise
72,209,204
48D1CC
skyblue
135,206,235
87CEEB
http://www.Pasargad-Graphic.com/blog
86 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
crimson
220,20,60
DC143C
hotpink
255,105,180
FF69B4
mediumvioletred
199,21,133
C71385
slateblue
106,90,205
6A5ACD
cyan
0,255,255
00FFFF
indianred
205,92,92
CD5C5C
midnightblue
25,25,112
191970
slategray
112,128,144
708090
darkblue
0,0,139
00008B
indigo
75,0,130
4B0082
mintcream
245,255,250
F5FFFA
snow
255,250,250
FFFAFA
darkcyan
0,139,139
008B8B
ivory
255,240,240
FFF0F0
mistyrose
255,228,225
FFE4E1
springgreen
0,255,127
00FF7F
darkgoldenrod
184,134,11
B8860B
khaki
240,230,140
F0D58C
moccasin
255,228,181
FFE4B5
steelblue
70,130,180
46,82,B4
darkgray
169,169,169
A9A9A9
lavender
230,230,250
E6E6FA
navajowhite
255,222,173
FFDEAD
tan
210,180,140
D2B48C
darkgreen
0,100,0
006400
lavenderblush
255,240,245
FFF0F5
navy
0,0,128
000080
teal
0,128,128
008080
darkkhaki
189,183,107
BDB76B
lawngreen
124,252,0
7CFC00
oldlace
253,245,230
FDF5E6
thistle
216,191,216
D8BFD8
darkmagenta
139,0,139
8B008B
lemonchiffon
255,250,205
FFFACD
olive
128,128,0
808000
tomato
253,99,71
FF6347
darkolivegreen
85,107,47
556B2F
lighblue
173,216,230
ADD8E6
olivedrab
107,142,35
6B8E23
turquoise
64,224,208
40E0D0
http://www.Pasargad-Graphic.com/blog
87 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
darkorange
255,140,0
FF8C00
lightcoral
240,128,128
F08080
orange
255,165,0
FFA500
violet
238,130,238
EE82EE
darkorchid
153,50,204
9932CC
lightcyan
224,255,255
E0FFFF
orangered
255,69,0
FF4500
wheat
245,222,179
F5DEB3
darkred
139,0,0
8B0000
lightgoldenrodyellow
250,250,210
FAFAD2
orchid
218,112,214
DA70D6
white
255,255,255
FFFFFF
darksalmon
233,150,122
E9967A
lightgreen
144,238,144
90EE90
palegoldenrod
238,232,170
EEE8AA
whitesmoke
245,245,245
F5F5F5
darkseagreen
143,188,143
8FBC8F
lightgrey
211,211,211
D3D3D3
palegreen
152,251,152
98FB98
yellow
255,255,0
FFFF00
darkslateblue
72,61,139
483D8B
lightpink
255,182,193
FFB6C1
paleturquoise
175,238,238
AFEEEE
yellowgreen
154,205,50
9ACD32
فونت ها
.ززف ؽد HTML دیگش تفی وی ؽد زذط هیضن ک اص غخ بی ثؼذی HTML دس <font>تگ .اعتفبد کیذ style ثدبی آى اص آى اعتفبد کذ ، ؽوب ثبیذ عؼی کیذ ک اص آى اختبة کیذ شچذ تؼذاد صیبدی اص هشدم اص
<font>تگ
:هثل ایي ؽوب هی تایذ اذاص ع خشخی هشسگش سا تؼییي کیذ HTML ثب کذ بی
01 <p>
02 <font size="2" face="Verdana">
03 This is a paragraph.
http://www.Pasargad-Graphic.com/blog
88 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
04 </font>
05 </p>
06
07 <p>
08 <font size="3" face="Times">
09 This is another paragraph.
10 </font>
11 </p>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_font خدتبى ثیبصهبییذ
Font Attributes :/ عاصر فت
The <font> Tag Should NOT be Used :: تگ فت ثایذ اضتفاد شد .(HTML4.0,XHTML) تفی وی ؽد HTML دس آخشیي غخ بی font ثشچغت
W3C ثشچغت font سا اص لیغت تفی بیؼ ززف کشد اعت. .اعتفبد خاذ ؽذ HTML ثشای ظبش ثذی وبیؼ هخدیت بی اخضا CSS اص HTML س غخ بی آیذصیشا د
The Right Way to Do It – With Styles :: اضت style رظ درضت، اضتفاد از
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_font-family اتخبة ع فت هتي
.ایي هثبل چگگی اتخبة فت هتي سا ؾبى هی دذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_font-size ؽت ب تغییش اذاص
.ثب ایي هثبل، سػ تغییش اذاص هتي سا هی آهصین
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_color تغییش سگ هتي
.سگ هتي یض وبذ اذاص ع آى هی تاذ تغییش کذ. ث ایي هثبل گب کیذ
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_fontall تظین ع، اذاص سگ هتي
.یک هثبل خبهغ ثشای وبیؼ چگگی تغییش ظبش یک هتي. ثجییذ
http://www.Pasargad-Graphic.com/blog
89 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
ها قاب
.ؽوب هی تایذ ثیؼ اص یک ففس ة سا دس یک پدش هشسگش ؾبى دیذ (Frame) ث عیل لبة ب
هثال ا http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols لبثبی ػودی
.دسایي هثبل ؽوب ع لبة ػودی ثب هستای هختلف، هی ثییذ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_rows لبثبی افمی
.ایي هثبل، لبثبی افمی سا وبیؼ هی دذ
Frames :: قاب ا : د ، ش لبة یض هغتمل اص دیگش لبة بعت. ثذی اعتفبد اص لبة ب ایي اعت کیک لبة بهیذ هی ؽ HTML ش پشذ
تعؼ دذ ة ثبیذ پیعت سد ثیؾتش پشذ بی HTML سا داؽت ثبؽذ.
چبپ کشدى کل ففس هؾکل اعت
: Frameset تگ
تگ<frameset> هؼشفی هی کذ ک چگ هی ؽد پدش سا ث لبثب تمغین کشد.
ش frameset یک هدوػ اص عطشب یب عتى ب سا هؼشفی هی کذ.
: Frame تگ
تگ<frame> پشذ HTML ای سا هؼشفی هی کذ ک دس ش لبة لشاس هی گیشد.
.ثب د عتى داسین frameset دس هثبل پبییي یک .پدش هشسگش عت ؽذ اعت% اص 75% اص پدش هشسگش عت ؽذ اعت.عتى دم ثب پبی 25عتى ال ثب پبی
.دس عتى دم لشاس داد ؽذبعت HTML “frame_b.html“ دس عتى ال لشاس گشفت پشذ HTML “frame_a.html“ پشذ
1 <frameset cols="25%,75%">
2 <frame src="frame_a.htm">
3 <frame src="frame_b.htm">
4 </frameset>
اطالعات هفیذ-کات پای ای
اگش یک لبة زبؽی پذیذاس داؽت ثبؽذ کبسثش هی تاذ ثب کؾیذى زبؽی آى ، اذاص آى سا تغییش دذ. ثشای خلگیشی اص ایي ػول کبسثش سا اضبف کین ، هشسگش لبة سا <noframes>اضبف کیذ. اگش تگ <frame>سا ث تگ ”noresize=”noresize ، ؽوب هی تایذ
.ی وی کذپؾتیجبسا ثب ن اعتفبد کیذ. ش چذ اگش ؽوب تگ <body> </body> <frame> </frame>ؽوب وی تایذ تگ بی :هن
http://www.Pasargad-Graphic.com/blog
41 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
<noframes> سا دس هشسگش بیی ک لبثب سا پؾتیجبی وی کذ زبی همذاسی هتي یض ثبؽذ اضبف کیذ ؽوب ثبیذ هتي سا ثیي تگ .س دیذلشا <body> </body>بی
More Examples :: هثال ای تیشتر noframes http://www.w3schools.com/html/tryit.asp?filename=tryhtml_noframes تگ
.ذاؽت، ث کوک ایي تگ، هی تاى وبیؼ هبعجی سا اسای کشددس فستیک هشسگش، اهکبى وبیؼ لبثب سا http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_mix )لبثبی پیچیذ)تشکیجی اص لبثبی ػودی افمی
.ایي هثبل، ففس ای ک دس آى لبثبی ػودی افمی، ثب ن خد داسذ سا ؾبى هی دذ noresize=”noresize” http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_noresize لبثی ثب هخدیت
.ثب کتشل ایي هخدیت، اص تغییش اذاص لبثب هی تاى خلگیشی کشد http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_navigation لبة هستا
ایي هثبل سػ عبخت یک لبة هستایی سا ؾبى هی دذ. ففس اص د لبة افلی عبخت ؽذ ک یکی اصآب، فشعت دیگشی ش فشا traget هستای عشفقل اتخبثی سا وبیؼ هی دذ. دس لبة فشعت، ع فشاپیذ ث فست صیش تؼشیف ؽذ ک هخدیت
.پیذ ث بم لبة هستا اؽبس هی کذ
1 <a href ="frame_a.htm" target ="showframe">Frame a</a><br>
2 <a href ="frame_b.htm" target ="showframe">Frame b</a><br>
3 <a href ="frame_c.htm" target ="showframe">Frame c</a>
.ک اص ایي فشاپیذب سا وبیؼ هی دذلبة هستا، هستای ش ی
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe لبة دسخب
اعتفبد کشد دیگش html ی دذ)ایي لبثب سا هی تاى ث طس هغتمین، داخلایي هثبل سػ اعتفبد اص لبثبی دسخب سا ؾبى ه یبصی ث لبة ثذی کل ففس یغت
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_jump پشػ ث لغوت خبفی دس داخل یک لبة
ث کوک ایي سػ هی تاى ث لغوتی اص هستای لبة، دس گبم وبیؼ پشػ کشد. ثشای ایي هظس پظ اص آدسط هستای لبة، .فشاپیذ هسل هسد ظش سا لشاس هی دین. ث هثبل تخ کیذ
پشػ ث هسل خبؿ دس ففس داسای لبة هستا
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_navigation2
.اعت” پشػ“ هثبل ” لبة هستا“ایي هثبل تشکیجی اص هثبل
: تگ ای قاب
http://www.Pasargad-Graphic.com/blog
49 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
استایل
.ثشد ؽذ HTML خذاگب ث خبسج اص پشذ CSS و لبلت ثذی ب هی تاذ ث یک HTML4.0 ثب
Examples :: هثال ا
Style ب دسHtml http://www.w3schools.com/html/tryit.asp?filename=tryhtml_style
.اضبف ؽذ اعت سا ؾبى هی دذ <head>ای ک ث لغوت style ث کوک html ایي هثبل چگگی آسایؼ یک
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_linknoline فشاپیذ، ثذى صیشخظ
.ؾبى هی دذ style ایي هثبل سػ عبخت یک فشاپیذ، ک صیش خظ ذاسد سا ث کوک ػقش بی
lename=tryhtml_linkhttp://www.w3schools.com/html/tryit.asp?fi خبسخی styleاعتفبد اص
ففس دس style هخد دس یک فبیل خبسخی، ث ػاى styleسا ؾبى هی دذ. ثب ایي سػ، <link>ایي هثبل سػ اعتفبد اص تگ .ظش گشفت هی ؽد
چگ از اضتایل ا اضتفاد کین ؟ .خد داسد CSS سا ثشای اسد کشدى یک 3اذ کشد. سا هی خاذ، پشذ سا ثش طجك آى لبلت ثذی خ CSS یک هشسگش گبهی ک
CSS خارجی :: External Style Sheet .دس ثیؾتش ففسبت اعتفبد ؽد style خبسخی صهبی ایذ آل اعت ک آى CSS یک
.خبسخی ؽوب هی تایذ ظبش یک عبیت سا ثب تغییش دادى یک فبیل تغییش دیذ CSS ثب یک .پیذ داد ؽد CSS ث <link> اص تگ ش ففس ثبیذ ثب اعتفبد
.لشاس هی گیشد head دس داخل ثخؼ <link>تگ
http://www.Pasargad-Graphic.com/blog
42 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
1 <head>
2 <link rel="stylesheet" type="text/css" href="mystyle.css">
3 </head>
CSS داخلی :: Internal Style Sheet .ازذ داسد style کداخلی ثبیذ گبهی اعتفبد ؽد ک یک تک پشذ ی CSS یک
هی تایذ هؼشفی کیذ head دس لغوت style داخلی سا ثب تگ style ؽوب
1 <head>
2 <style type="text/css">
3 body {background-color: red}
4 p {margin-left: 20px}
5 </style>
6 </head>
Style درى خطی :: Inline Styles .ذ گبهی اعتفبد ؽد ک ازذ ثشای یک سیذاد ػقش ازذی خاعت ؽددسى خطی ثبی style یک
.دس تگ بی هبعت اعتفبد کیذ style دسى خطی ؽوب اص ػقش بی style ثشای اعتفبد اص .ثبؽذ CSS هی تاذ زبی ش خبفیت style ػقش
: کیذهثبل ؾبى هی دذ ک چگ سگ چپ چیي ثدى پبساگشاف سا تؼییي
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
تگ ای اضتایل
http://www.Pasargad-Graphic.com/blog
48 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
حروف نهادی
.هؼی خبفی داسذ. ثبثشایي ویتاى اص آب دس هتي اعتفبد کشد HTML دس ”<“ ثؼضی اص زشف هبذ .اعتفبد کشد دس هتي ثبیذ اص زشف بدی <ثشای وبیؼ زشفی هبذ
: یک زشف بدی اص ع لغوت تؾکیل هیؾد
&یک بم بدی ; &#یک ػذد بدی ;
: هثبل
.سا ثیغین ;60#& یب ;lt& ثبیذ HTML دس فبیل < ث خبی ؽي هشسگش دس < ثشای وبیؼ ذ. ضشس آى ایي اعت ک و هشسگش ب بم فبیذ اعتفبد اص بم ث خبی ػذد ایي اعت ک واس بم ثتش اص ػذد دس خبطش هیوب
.بی بدی سا پؾتیجبی ویکذ لی اکثش آى ب اػذاد بدی سا پؾتیجبی هیکذ .دس ضوي تخ داؽت ثبؽیذ ک بم بی بدی ث ثضسگی کچکی زشف زغبط هیجبؽذ
: ث ػاى هثبل : ، ث ؽی صیش ػول کیذؾد bold لی ؽت دس هشسگش وبیؼ داد ؽد <b> This Text Is Bold </b>اگش ثخایذ ػجبست
<b> This Text Is Bold </b>
.تبی آى ب بدیذ گشفت هیؾذ 3فبفل دس هتي داؽت ثبؽیذ 10فبفل ب سا بدیذ هیگیشد؛ هثال اگش HTML ث طس هؼول : کت .اعتفبد کیذ ;nbsp& شف بدیثشای لشاس دادى چذیي فبفل دس هتي ثبیذ اص ز
: حرف ادی رایج
http://www.Pasargad-Graphic.com/blog
44 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: تعذادی دیگر از حرف ادی هرد اضتفاد
56کامل در صفحه جدول *
http://www.Pasargad-Graphic.com/blog
45 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
اسکریپت
.اعکشیپت ب سا ث ففسبتتبى اضبف کیذ تب آب سا پیبتش فؼبل تش ثغبصیذ
: هثال ا http://www.w3schools.com/html/tryit.asp?filename=tryhtml_script اعکشیپت دس ففس
.سا ؾبى هی دذ html ایي هثبل سػ لشاس دادى یک اعکشیپت، داخل ففس http://www.w3schools.com/html/tryit.asp?filename=tryhtml_noscript .کبس ثب هشسگشی ک اعکشیپت سا پؾتیجبی وی کذ
ب کین؟اگش هشسگش، اعکشیپت سا پؾتیجبی کشد، چگ کبسثش سا آگ
: HTMLوارد کردن یک اسکریپت در یک صفحه
معرفی می شود. SCRIPTبا تگ HTML یک اسکریپت در
استفاده خواهید کرد. TYPEتوجه کنید که برای تعیین زبان اسکریپت نویسی از
1 <html>
2 <body>
3
4 <script type="text/javascript">
5 document.write("Hello World!")
6 </script>
7
8 </body>
9 </html>
:اعکشیپت ثبال ایي خشخی سا خاذ داؽت!Hello World
ای قذیوی را را تیذازین ؟هررگر چگسا تؾخیـ دذ ، آى سا ثؼاى هتي دس ففس وبیؼ خاذ داد. ثشای خلگیشی اص هشسگش اص <script>یک هشسگش ک وی تاذ تگ
سا تؾخیـ دذ تضیسبت script سا دس تگ بی تضیر هخفی کیذ. یک هشسگش لذیوی ک وی تاذ script ادبم ایي کبس ؽوب ثبیذسا بدیذ خاذ گشفت هستیبت آى ثشچغت سا ؾبى خاذ داد.دسزبلیک یک هشسگش خذیذ هی فوذ ک اعکشیپت ب ثبیذ اخشا
.بت هسذد ؽذ ثبؽذؽذ زتی اگش ثب تگ تضیس
http://www.Pasargad-Graphic.com/blog
46 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
01 <script type="text/javascript">
03 document.write("Hello World!")
05 </script> VBScript:
06 <script type="text/vbscript">
08 document.write("Hello World!")
10 </script>
: <noscript>تگ .اضبف کیذ < noscript>ضیسبت ؽوب هی تایذ یک تگ دس هدوع ثشای هخفی کشدى اعکشیپت دسى ت
.ایي تگ ثشای ؾبى دادى یک هتي دسفستیک اعکشیپت اخشا ؾد ثکبس هی سد .سا تؾخیـ وی دذ اعکشیپت بی دسى سا پؾتیجبی وی کذ script ایي تگ ثشای هشسگشبیی ثکبس هی سد ک ثشچغت
.سا ؾبى هی دذ < noscript>ی آى ، هتي داخل تگ ثبثشایي ایي هشسگشب ثدب
01 <script type="text/javascript">
02 document.write("Hello World!")
03 </script>
04 <noscript>Your browser does not support JavaScript!</noscript>
05 <script type="text/vbscript">
06 document.write("Hello World!")
07 </script>
08 <noscript>Your browser does not support VBScript!</noscript>
: Script تگ ای
http://www.Pasargad-Graphic.com/blog
47 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
مشخصه ها و رویذاد ها
(HTML Attributes) هشخص ای اضتاذارد
:هی تاذ هؾخق داؽت ثبؽذ. هثل HTML تگ بی
<div title="some text">I have a TITLE attribute</div>
. هؾخق بی خبؿ ش ثشچغت دس صیش لیغت ؽذ
: هشخص ای طت
: هشخص ای زتاى
: هشخص ای کلوات کلیذی
(Event Attributes) هشخص ای ریذاد
دس یک هشسگش اعت، HTML خذیذ اعت تابیی ادبم سیذادبی HTML4.0 چیضی ک دس .کلیک هی کذ HTML خبا اعکشیپت لتی ک یک کبسثش سی ػقشهثل ؽشع یک
: دس صیش یک لیغت اص هؾخق ب اعت ک ثشای تؼشیف ػولیبت یک سیذاد هی تاذ دس یک تگ اسد ؽذ
http://www.Pasargad-Graphic.com/blog
48 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
: ریذادای پجر .هؼتجش اعت bodyframeset فمظ دس
: ریذادای عاصر فرم .فمظ دس فشم هؼتجش اعت
: ای صفح کلیذریذاد
: ریذادای هاش
http://www.Pasargad-Graphic.com/blog
49 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
متاتگ ها
.هتب تگ ب ثشای اسای اطالػبت ث هشسگش یب هتسبی خغتد اعتفبد هی ؽذ : لشاس هی گیشد <head>دس داخل تگ (metatag) هتبتگ
1 <head>
2 <title>Page Title</title>
3 <META NAME="AUTHOR" CONTENT="author's name here">
4 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
5 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
6 <META NAME="DESCRIPTION" CONTENT="...summary of web page...">
7 <META NAME="KEYWORDS" CONTENT="first keyword, second keyword">
:ااع هتاتگ ا
1 <META NAME="AUTHOR" CONTENT="author's name here">
ثشای لشاسگشفتي بم یغذ ففس
1 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
2
3 <!-- OR -->
4
5 <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
گیشی اص کؼ ؽذى تعظ هشسگشثشای خل
http://www.Pasargad-Graphic.com/blog
51 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
1 <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en-US">
ثشای هؾخـ کشدى صثبى ففس
1 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
اعتفبد هیکین UTF-8 ثشای هؾخـ کشدى ییکذ. ثشای وبیؼ فسیر فت فبسعی اص
1 <META NAME="COPYRIGHT" CONTENT="© 2010 pasargad-graphic.com">
ثشای هؾخـ کشدى کپی سایت
1 <META NAME="DESCRIPTION" CONTENT="...summary of web page...">
یک یب د خول تضیسی دسثبس ففس
1 <META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2011 11:12:01 GMT">
هؾخـ کشدى تبسیخ امضبی هطلت
1 <META NAME="KEYWORDS" CONTENT="first keyword, second keyword">
ثشای لشاس دادى ػجبسات کلیذی ففس
1 <META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.http://www.pasargad-graphic.com">
ث ففس دیگش.شگض اص ایي کذ اعتفبد کیذ. ثبػث تسشین عبیت ؽوب تعظ هتس بی ثشای ثبسگزاسی هدذد ففس اتمبل خغتد هی ؽد
1 <META NAME="ROBOTS" CONTENT="ALL">
.اخبص دادى ث سثبت هتسبی خغتد ثشای ایذکظ کشدى ففس دجبل کشدى لیک ب
. پظ ثدى یب جدى ایي کذ تبثیشی ذاسدث فست پیؾفشك سثبت ب ایي کبس سا ادبم هی دذ
1 <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">
.سثبت ب ففس سا ایذکظ کذ لی لیک ب سا اهتیبص ثذی کذ
تج ثذی دلت کیذ ک سثبت ب دس شفست لیک ب سا دجبل هی کذ لی ثب ایي کذ لیک بی ففس تبثیشی دس پیح سک س .ففسبت ذاسذ
http://www.Pasargad-Graphic.com/blog
59 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
1 <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
سثبت ب لیک ب سا هسبعج کذ لی ففس سا ایذکظ کذ
1 <META NAME="ROBOTS" CONTENT="NONE">
2
3 <!-- OR -->
4
5 <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
یک ب سا هسبعج کذ ففس ن ایذکظ ؾدسثبت ب ل
1 <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
سثبت گگل ففس سا آسؽی کذ
.ثشای ش ففس ثبیذ هتفبت ثبؽ <title> تگ keyword description تگ بی*کیذ هستای تگ ب س هتبعت ثب هستای ففس تؼییي اعپن keyword description کیذ ک دس اعتفبد اص تگ بی دلت*
کیذ
http://www.Pasargad-Graphic.com/blog
52 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
HTML 4مرجع تگ های
تگ بی اعبعی :
اضبف هیکذ html< ........................................... تضیسبتی سا ث فبیل دس --...-->!
!<doctype..................................... >تؼشیف ع عذ ..
<bodyتؼشیف ثذ عذ ............................................ >
<br تؼشیف ؽکغت خطط .............................................. >/
<hr تؼشیف یک خظ افمی ............................................... >/
<p.......................... >تؼشیف یک پبساگشاف .. ........................
<h1> to <h6 تؼشیف تیتشب دس ................................... >HTML
<html تؼشیف یک عذ ............................................... >HTML
تگ بی لبلت ثذی هتي :
<abbr.................................... >تؼشیف زشف اختقبسی .........
<acronymتؼشیف هخفف ....................................... >
<addressاطالػبت توبط ثشای یغذ/عذ ........................................ >
<bتؼشیف هتي ثشخغت ................................................. >
<bdo......... >تؼشیف خت هتي ....................................
<bigتؼشیف ثضسگتش هتي ............................................... >
<blockquoteتؼشیف مل لل طالی ................................... >
<centerد. تؼشیف هتي دس عظ< ........................................... تفی ویؾ
<citeهؼشفی اعتبد ............................................... >
<codeتؼشیف کذ هتي کبهپیتشی ............................................. >
<delتؼشیف ززف هتي ................................................ >
<dfn................. >هؼشفی تؼشیف ..............................
http://www.Pasargad-Graphic.com/blog
58 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
<emهؼشفی هتي هسة ................................................ >
<fontتفی وی ؽد. تؼشیف فت، سگ عبیض ثشای هتي .............................................. >
<i....................................... >تؼشیف یک هتي ایتبلیک ... ...........
<insتؼشیف یک هتي آذسالیي ................................................. >
<kbdتؼشیف هتي ففس کلیذ ................................................ >
<labelثشای ػبفش سدی < .............................................. تؼشیف ثشچغت
<preتؼشیف ؽت تظین ؾذ ................................................. >
<qتؼشیف یک مل لل کتب .. .................................................. >
<s یک هتي خظ خسد< .................................................. .. تفی وی ؽد.تؼشیف
<sampتؼشیف و کذ کبهپیتشی ............................................... >
<smallتؼشیف یک هتي کچک تش ............................................... >
<strikeخظ خسد < ............................................... تفی وی ؽد.تؼشیف یک هتي
<strongتؼشیف هتي لی تش ............................................. >
<subتؼشیف هتي صیش یظ ................................................. >
<supتؼشیف هتي ثبال یظ ................................................. >
<tt.................. >تؼشیف هتي هبؽیي تسشیش . ................................
<u تفی وی ؽد. تؼشیف هتي .. .................................................. >underline
<varتؼشیف هتغیش ثخؾی اص هتي .................................................. >
<xmp................... >تفی وی ؽد. تؼشیف ؽت تظین ؾذ ..............................
تگ بی اعتبیل :
<styleتؼشیف اعتبیل ثشای اطالػبت عذ ............................................... >
<divتؼشیف یک ثخؼ اص عذ ................................................ >
<span.. >تؼشیف یک ثخؼ دس عذ ..............................................
تگ بی خذل :
<tableتؼشیف یک خذل ............................................... >
<captionتؼشیف ػاى خذل ......................................... >
<td.............................. >تؼشیف یک علل دس خذل . ....................
<thتؼشیف علل ذس دس خذل . .................................................. >
<trتؼشیف یک سدیف دس خذل . .................................................. >
<tbody.......................................... >تؼشیف گش بی ثذ عذ دس یک خذل .....
<tfootتؼشیف گش بی هطبلت ثبال پبییي ففس دس خذل ............................................... >
http://www.Pasargad-Graphic.com/blog
54 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
<theadتؼشیف گش بی هطبلت ذس دس خذل .............................................. >
<col ................ >/ تؼشیف هؾخق .............................values ثشای یک یب چذ عتى دس خذل
<colgroupتؼشیف گشی اص عتى دس خذل ثشای لبلت ثذی ....................................... >
تگ بی لیغت ) فشعت ( :
<ulؼشیف یک لیغت بهشتت< .................................................. .. ت
<olتؼشیف یک لیغت هشتت .. .................................................. >
<liتؼشیف لیغت آیتن .. .................................................. >
<ddفی< ................................................ هؼشفی ؽشذ افطالذ دس لیغت تؼشی
<dirتفی وی ؽد. هؼشفی یک لیغت دایشکتسی ................................................ >
<dlتؼشیف یک لیغت تؼشیفی .................................................. >
<dtتؼشیفی < ................................................. هؼشفی افطالذ )هسد( دس لیغت
<menuتؼشیف یک لیغت ه ............................................. >
تگ بی لیک :
<aتؼشیف یک لیک ................................................. >
<link تؼشیف ساثط ثیي عذ هبثغ خبسخی .............................................. >/
بی ػکظ :تگ
<area /تؼشیف یک فضب دس کبس ػکظ ........................................... >/map
<img تؼشیف یک ػکظ ............................................. >/
<mapتؼشیف مؾ یک تقیش ............................................... >
تگ بی لبة :
<frame >/تؼشیف یک پدش )یک لبة( دس یک لبة .........................................
<framesetهؼشفی هدوػ اص لبة ب ....................................... >
<iframeتؼشیف فشین بی دسى خطی ........................................... >
<noframes.................. >.تؼشیف یک هستای فشػی ثشای کبسثشایی ک لبة ب سا پؾتیجبی ویکذ .....................
تگ بی فشم :
<input تؼشیف کتشل سدی .......................................... >/
<formدس < ............................................. تؼشیف یک فشم سدی ثشای کبسثشHTML
<textareaتؼشیف کتشل سدی چذ خظ هتي ........................................... >
http://www.Pasargad-Graphic.com/blog
55 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
<buttonتؼشیف دکو ......................................... >
<select)تؼشیف لیغت اتخبة )لیغت کؾیی .............................................. >
<optgroup... >تؼشیف گشی اص گضی بی اثغت دس یک لیغت ........................................
<optionتؼشیف یک گضی دس یک لیغت .............................................. >
<fieldsetتؼییي هشص دس اطشاف ػبفش دس فشم ......................................... >
<legend تؼشیف یک ػاى ثشای ........................................... >fieldset ػقش
<isindexتفی وی ؽد. تؼشیف ؽبخق خغت خ دس عذ .......................................... >
: metaتگ بی اطالػبت
<headؼشیف اطالػبت یک عذ< .............................................. ت
<meta تؼشیف ........................................... >/
<titleتؼشیف ػاى یک عذ ................................................. >
<base وبم پیذب دس ففس/< ......................................... هؼشفی آدسط پیؼ فشك یب ذف ث طس پیؼ فشك ثشای ت
<basefont تفی ویؾد. تؼشیف سگ، فت عبیض یک هتي دس عذ .................................... >/
تگ بی ثشبه ب :
<scriptتؼشیف اعکشیپت بی عوت عشیظ گیشذ ............................................... >
<noscript............ > تؼشیف هتبة هستا ثشای کبسثشای ک کبس پؾتیجبی وی کذ اعکشیپتبی ............................. عوت عشیظ گیشذ
<objectتؼشیف یک ؽیء خبیگزاسی ؽذ .............................................. >
<param ف یک پبساهتش ثشای یک ؽیء/< ............................................ تؼشی
<applet تفی ویؾد. تؼشیف یک ........................................... >applet خبعبصی ؽذ
http://www.Pasargad-Graphic.com/blog
56 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
نىیسه ها
Math Symbols Supported by HTML
Character Entity Number Entity Name Description
∀ ∀ ∀ for all
∂ ∂ ∂ part
∃ ∃ ∃ exists
∅ ∅ ∅ empty
∇ ∇ ∇ nabla
∈ ∈ ∈ isin
∉ ∉ ∉ notin
∋ ∋ ∋ ni
∏ ∏ ∏ prod
∑ ∑ ∑ sum
− − − minus
∗ ∗ ∗ lowast
√ √ √ square root
∝ ∝ ∝ proportional to
∞ ∞ ∞ infinity
∠ ∠ ∠ angle
∧ ∧ ∧ and
∨ ∨ ∨ or
∩ ∩ ∩ cap
∪ ∪ ∪ cup
∫ ∫ ∫ integral
∴ ∴ ∴ therefore
∼ ∼ ∼ similar to
≅ ≅ ≅ congruent to
≈ ≈ ≈ almost equal
≠ ≠ ≠ not equal
≡ ≡ ≡ equivalent
≤ ≤ ≤ less or equal
≥ ≥ ≥ greater or equal
⊂ ⊂ ⊂ subset of
⊃ ⊃ ⊃ superset of
⊄ ⊄ ⊄ not subset of
⊆ ⊆ ⊆ subset or equal
⊇ ⊇ ⊇ superset or equal
⊕ ⊕ ⊕ circled plus
⊗ ⊗ ⊗ cirled times
⊥ ⊥ ⊥ perpendicular
⋅ ⋅ ⋅ dot operator
http://www.Pasargad-Graphic.com/blog
57 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
Greek Letters Supported by HTML
Character Entity Number Entity Name Description
Α Α Α Alpha
Β Β Β Beta
Γ Γ Γ Gamma
Γ Δ Δ Delta
Δ Ε Ε Epsilon
Ε Ζ Ζ Zeta
Ζ Η Η Eta
Θ Θ Θ Theta
Η Ι Ι Iota
Θ Κ Κ Kappa
Ι Λ Λ Lambda
Κ Μ Μ Mu
Λ Ν Ν Nu
Μ Ξ Ξ Xi
Ν Ο Ο Omicron
Ξ Π Π Pi
Ο Ρ Ρ Rho
undefined Sigmaf
Π Σ Σ Sigma
Ρ Τ Τ Tau
Υ Υ Upsilon
Φ Φ Φ Phi
Σ Χ Χ Chi
Τ Ψ Ψ Psi
Υ Ω Ω Omega
α α α alpha
β β β beta
γ γ γ gamma
δ δ δ delta
ε ε ε epsilon
δ ζ ζ zeta
ε η η eta
ζ θ θ theta
η ι ι iota
θ κ κ kappa
ι λ λ lambda
κ μ μ mu
λ ν ν nu
μ ξ ξ xi
ν ο ο omicron
π π π pi
http://www.Pasargad-Graphic.com/blog
58 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
ξ ρ ρ rho
ο ς ς sigmaf
ζ σ σ sigma
η τ τ tau
π υ υ upsilon
θ φ φ phi
ρ χ χ chi
ς ψ ψ psi
σ ω ω omega
ϑ ϑ ϑ theta symbol
ϒ ϒ ϒ upsilon symbol
ϖ ϖ ϖ pi symbol
Other Entities Supported by HTML
Character Entity Number Entity Name Description
ΠΠΠcapital ligature OE
œ œ œ small ligature oe
Š Š Š capital S with caron
š š š small S with caron
Ÿ Ÿ Ÿ capital Y with diaeres
ƒ ƒ ƒ f with hook
ˆ ˆ ˆ modifier letter circumflex accent
˜ ˜ ˜ small tilde
    en space
    em space
    thin space
‌ ‌ zero width non-joiner
‍ ‍ zero width joiner
‎ ‎ left-to-right mark
‏ ‏ right-to-left mark
Ŕ – – en dash
ŕ — — em dash
Ř ‘ ‘ left single quotation mark
ř ’ ’ right single quotation mark
‚ ‚ ‚ single low-9 quotation mark
Ŗ “ “ left double quotation mark
ŗ ” ” right double quotation mark
„ „ „ double low-9 quotation mark
† † † dagger
‡ ‡ ‡ double dagger
• • • bullet
… … … horizontal ellipsis
‰ ‰ ‰ per mille
http://www.Pasargad-Graphic.com/blog
59 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
′ ′ ′ minutes
″ ″ ″ seconds
‹ ‹ ‹ single left angle quotation
› › › single right angle quotation
‾ ‾ ‾ overline
€ € € euro
™ ™ ™ trademark
← ← ← left arrow
↑ ↑ ↑ up arrow
→ → → right arrow
↓ ↓ ↓ down arrow
↔ ↔ ↔ left right arrow
↵ ↵ ↵ carriage return arrow
⌈ ⌈ ⌈ left ceiling
⌉ ⌉ ⌉ right ceiling
⌊ ⌊ ⌊ left floor
⌋ ⌋ ⌋ right floor
◊ ◊ ◊ lozenge
♠ ♠ ♠ spade
♣ ♣ ♣ club
♥ ♥ ♥ heart
♦ ♦ ♦ diamond
http://www.Pasargad-Graphic.com/blog
61 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
ASCIIجذول
ASCII Character HTML Entity Code Description
  space
! ! exclamation mark
" " quotation mark
# # number sign
$ $ dollar sign
% % percent sign
& & ampersand
' ' apostrophe
( ( left parenthesis
) ) right parenthesis
* * asterisk
+ + plus sign
, , comma
- - hyphen
. . period
/ / slash
0 0 digit 0
1 1 digit 1
2 2 digit 2
3 3 digit 3
4 4 digit 4
5 5 digit 5
6 6 digit 6
7 7 digit 7
8 8 digit 8
9 9 digit 9
: : colon
; ; semicolon
< < less-than
= = equals-to
> > greater-than
? ? question mark
@ @ at sign
A A uppercase A
B B uppercase B
C C uppercase C
D D uppercase D
E E uppercase E
F F uppercase F
G G uppercase G
http://www.Pasargad-Graphic.com/blog
69 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
H H uppercase H
I I uppercase I
J J uppercase J
K K uppercase K
L L uppercase L
M M uppercase M
N N uppercase N
O O uppercase O
P P uppercase P
Q Q uppercase Q
R R uppercase R
S S uppercase S
T T uppercase T
U U uppercase U
V V uppercase V
W W uppercase W
X X uppercase X
Y Y uppercase Y
Z Z uppercase Z
[ [ left square bracket
\ \ backslash
] ] right square bracket
^ ^ caret
_ _ underscore
` ` grave accent
a a lowercase a
b b lowercase b
c c lowercase c
d d lowercase d
e e lowercase e
f f lowercase f
g g lowercase g
h h lowercase h
i i lowercase i
j j lowercase j
k k lowercase k
l l lowercase l
m m lowercase m
n n lowercase n
o o lowercase o
p p lowercase p
q q lowercase q
r r lowercase r
s s lowercase s
http://www.Pasargad-Graphic.com/blog
62 HTML4آهصػ خبهغ صثبى
زیذ لی صاد
t t lowercase t
u u lowercase u
v v lowercase v
w w lowercase w
x x lowercase x
y y lowercase y
z z lowercase z
{ { left curly brace
| | vertical bar
} } right curly brace
~ ~ tilde
HTML4آهزظ جاهع زتاى یغذ: زیذ لی صاد
w3schoolsبی عبیت عشفقلاعبط ثش
تعظ پیب فبدلی PDFطشازی یشایؼ
1330یشایؼ دم / تیشهب
www.Pasargad-Graphic.com/blog