آموزش اچ تی ام ال 4 Html4 pdf

2,156 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,156
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

آموزش اچ تی ام ال 4 Html4 pdf

  1. 1. ‫آموزش جامع زبان‬‫4‪HTML‬‬ ‫نویسنده: وحید ولی زاده‬ ‫مشهد – تیرماه 9889‬
  2. 2. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫2‬ ‫ّزیذ ّلی صادٍ‬ ‫آهْزظ جاهع زتاى 4‪HTML‬‬ ‫ًْیغٌذٍ: ّزیذ ّلی صادٍ‬ ‫ثش اعبط عشفقلُبی عبیت ‪w3schools‬‬ ‫ّیشایؼ ّ طشازی ‪ PDF‬تْعظ پْیب فبدلی‬ ‫ّیشایؼ دّم / تیشهبٍ 0331‬ ‫‪www.Pasargad-Graphic.com/blog‬‬ ‫به نام خدا‬ ‫این کتاب توسط آقای " وحید ولی زاده " و براساس سرفصل های سایت ‪ www.w3schools.com‬نوشته شده و همه حقوق‬ ‫متعلق به ایشان می باشد. استفاده از محتوای این کتاب با ذکر نام نویسنده آزاد است.‬ ‫در این کتاب ضمن آموزش زبان ‪ HTML‬که مقدمه ورود به دنیای طراحی وب است شما می توانید ازمثال های متعدد آن هم‬ ‫استفاده کنید. برای مطالعه این کتاب نیاز به دانش خاصی ندارید و آشنایی مختصر با اینترنت باعث می شود شما سریعتر روند‬ ‫یادگیری را طی کنید.‬ ‫دّعتبى ثشای اػالم ًظشات ّ پیؾٌِبدات خْد ّ توبط ثب هْلف هیتْاًٌذ اص‬ ‫آدسط ایویل ‪ v.valizadeh9@gmail.com‬الذام ًوبیٌذ‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  3. 3. HTML4 ‫آهْصػ خبهغ صثبى‬8 ٍ‫ّزیذ ّلی صاد‬ http://www.Pasargad-Graphic.com/blog
  4. 4. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫4‬ ‫ّزیذ ّلی صادٍ‬ ‫آغاز ته کار‬ ‫هقذهَ ای تر ّب ّ هعرفی‪HTML‬‬ ‫ّب گطتردٍ جِاًی:‬ ‫ّة گغتشٍ خِبًی )‪ (World Wide Web‬کَ هؼوْال فمظ ّة گفتَ هیؾْد؛ ؽجکَ ای اعت کَ توبم سایبًَ ُب هتقل ثَ آى سا‬ ‫دس عشاعش خِبى ثَ ُن ّفل هیکٌذ. ّ توبم سایبًَ ُب هیتْاًٌذ دس ّة ثب ُن استجبط داؽتَ ثبؽٌذ.‬ ‫‪WWW‬چگًَْ کار هیکٌذ ؟‬ ‫اطالػبت ّة دس فبیل ُبیی ثَ ًبم ‪ Web Page‬لشاس هیگیشًذ کَ آى ُب ًیض دس سایبًَ ُبیی ثَ ًبم ‪ Web Server‬لشاس داسًذ ّ سایبًَ‬ ‫ُب ثشای دیذى ففسبت ّة اص اعتبًذاسدی استجبطی ثَ ًبم )‪ (Hyper Text Transfer Protocol‬کَ ‪ HTTP‬هخففؼ اعت،‬ ‫اعتفبدٍ هیکٌٌذ. سایبًَ ُبی هتقل ثَ ّة اطالػبت هْخْد دس ‪ُ Web Page‬ب سا اص طشیك ثشًبهَ ُبیی ثَ ًبم هشّسگش ّة ‪(Web‬‬ ‫)‪ًBrowser‬ؾبى هیذٌُذ. سایح تشیي هشّسگشُبیی کَ هْسد اعتفبدٍ لشاس هیگیشًذ، ‪ FireFox ّInternet Explorer‬هیجبؽٌذ.‬ ‫چگًَْ هرّرگرُا صفحات ّب را ًشاى هیذٌُذ ؟‬ ‫ُوَ ففسبت ّة ؽبهل دعتْسالؼول ُبیی ثشای ًوبیؼ تْعظ هشّسگشُب ُغتٌذ. هشّسگشُب ثب خْاًذى ایي دعتْسالؼول ُب‬ ‫ففسبت ّة سا ًؾبى هیذٌُذ.‬ ‫دعتْسالؼول ُبی ففسبت ّة، تگ ُبی ‪ً 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. 5. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫5‬ ‫ّزیذ ّلی صادٍ‬ ‫ُذف یک هشّسگش ّة (هبًٌذ ایٌتشًت اکغپلْسس ّ فبیش فبکظ ّ … ) خْاًذى اعٌبد ‪ ّ HTML‬عپظ ًوبیؼ آًِب ثَ فْست ففسبت ّة‬ ‫اعت. هشّسگش تگ ُبی ‪ HTML‬سا ًؾبى ًویذُذ، ثلکَ ثب اعتفبدٍ اص تگ ُب ثَ تفغیش هستْای ففسبت هیپشداصد.‬ ‫(در این کتاب برای مشخص کردن شماره کد ها از اعداد استفاده شده است)‬ ‫ثَ هتي ‪ HTML‬صیش تْخَ کٌیذ:‬ ‫>‪1 <html‬‬ ‫>‪2 <body‬‬ ‫>1‪3 <h1>My First Heading</h‬‬ ‫>‪4 <p>My first paragraph.</p‬‬ ‫>‪5 </body‬‬ ‫>‪6 </html‬‬ ‫تاال:‬ ‫تْضیح هثال‬ ‫هتي ثیي >‪<html/> ّ<html‬ففسَ ّة سا تْفیف هیکٌذ.‬ ‫‪‬‬ ‫هتي ثیي >‪<body/> ّ<body‬هتي لبثل ًوبیؼ دس ففسَ ّة سا هؾخـ هیکٌذ.‬ ‫‪‬‬ ‫هتي ثیي >‪<p/> ّ<p‬یک پبساگشاف سا ًؾبى هیذُذ.‬ ‫‪‬‬ ‫کٌیذ!‬ ‫شرّع‬ ‫تَ چَ چیس ُایی ًیاز داریذ ؟‬ ‫ثشای یبدگیشی ‪ HTML‬دس هدیذ آًالیي ثَ ُیچ اثضاسی ًیبص ًذاسیذ!‬ ‫ؽوب‬ ‫‪‬‬ ‫ّیشایؾگش ‪ً HTML‬یبص ًذاسیذ!‬ ‫ؽوب‬ ‫‪‬‬ ‫ثَ ّة عشّس ًیبص ًذاسیذ!‬ ‫ؽوب‬ ‫‪‬‬ ‫ثَ ّة عبیت ًیبص ًذاسیذ!‬ ‫ؽوب‬ ‫‪‬‬ ‫ّیرایشگر ُای: ‪HTML‬‬ ‫کب دس ایي آهْصػ ُب اص یک ادیتْس عبدٍ هتي هبًٌذ ‪ّ Notepad‬یٌذّص اعتفبدٍ هیکٌین.‬ ‫ؽوب هی تْاًیذ ثَ عبدگی ثب اعتفبدٍ اص یک ّیشایؾگش )”‪ WYSIWY(“what you see is what you get‬فبیل ُبی ‪ HTML‬سا ّیشایؼ‬ ‫کٌیذ ، هثل ‪ FRONT PAGE‬یب ‪Dreamweaver‬‬ ‫اگش ؽوب هی خْاُیذ یک تْعؼَ دٌُذٍ ّة تْاًب ثبؽیذ هب تْفیَ اکیذ هی کٌین کَ ؽوب اص یک ّیشایؾگش هتٌی عبدٍ اعتفبدٍ کٌیذ‬ ‫تب افْل اّلیَ ‪ HTML‬سا یبد ثگیشیذ.‬ ‫پطًْذ ‪ HTML‬یا ‪ HTM‬؟‬ ‫ٌُگبهی کَ ؽوب یک فبیل ‪ 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‬یب ”‪ “open page‬سا اًتخبة کٌیذ. یک خؼجَ گفتگْ ظبُش خْاُذ ؽذ .گضیٌَ‬ ‫”‪“brows‬یب ”‪ “choose file‬سا اًتخبة کٌیذ ّ دس هکبًی کَ فبیل ‪ HTML‬خْد سا عبختَ ایذ لشاس گیشیذ. آى سا اًتخبة کٌیذ ّ سّی گضیٌَ‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  6. 6. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫6‬ ‫ّزیذ ّلی صادٍ‬ ‫”‪“open‬کلیک کٌیذ.زبال ؽوب یک آدسط دس خؼجَ گفتگْی خْد هؾبُذٍ خْاُیذ کشد. ثؼٌْاى هثبل ”‪ “C:mypage.html‬گضیٌَ ‪ ok‬سا‬ ‫کلیک کٌیذ ّ هشّسگش ففسَ سا ثَ ؽوب ًؾبى خْاُذ داد.‬ ‫اص طشیك لیٌک صیش هیتْاًیذ آًالیي کبس کٌیذ!‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  7. 7. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫7‬ ‫ّزیذ ّلی صادٍ‬ ‫عناصر ‪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‬‬ ‫دس ایي هثبل اص 3 ثشچغت اعتفبدٍ ؽذٍ اعت یؼٌی >‪<p> . ّ<body> ّ : <html‬‬ ‫تْضیح کاهل هثال تاال:‬ ‫عٌصر >‪<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. 8. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫8‬ ‫ّزیذ ّلی صادٍ‬ ‫عٌصر >‪<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‬یب ثذًَ عٌذ‬ ‫‪‬‬ ‫چرا ها از تگ ُایی تا حرّف کْچک اضتفادٍ هیکٌین ؟‬ ‫هب فمظ گفتین کَ تگ ُبی ‪ HTML‬زغبط ثَ زشّف کْچک ّ ثضسگ ًیغتٌذ ّ >‪ُ<B‬وبى هؼٌی >‪<b‬سا هی دُذ.ٌُگبهی کَ ؽوب ثَ‬ ‫ّة گشدی هی پشداصد، هتْخَ خْاُیذ ؽذ کَ ثیؾتش آهْصػ ُب دس هثبل ُبیؾبى اص زشّف ثضسگ تگ ُبی ‪ HTML‬اعتفبدٍ هی کٌٌذ.هب‬ ‫ُویؾَ اص ثشچغت ُبی زشّف کْچک اعتفبدٍ هی کٌین. چشا؟‬ ‫اگش ؽوب هی خْاُیذ خْد سا ثشای ًغل ُبی ثؼذی ‪ HTML‬آهبدٍ کٌیذؽوب ثبیذ ؽشّع کٌیذ ّ اص ثشچغجِبی زشّف کْچک اعتفبدٍ‬ ‫کٌیذ.کٌغشعیْم ؽجکَ گغتشدٍ خِبًی ّة )‪ (W3C‬دس ًظشیَ 4‪ HTML‬خْد ثشچغت ُبی زشّف کْچک سا تْفیَ کشدٍ ّ دس ‪XHTML‬‬ ‫(ًغل ثؼذی ‪) HTML‬ثشچغجِب ثب زشّف کْچک ًْؽتَ هی ؽًْذ.‬ ‫عٌاصر تگ:‬ ‫ثشچغجِب خْد هی تْاًٌذ ؽبهل ػٌبفش ثبؽٌذ ، ػٌبفش هی تْاًٌذ اطالػبت اضبفی دس ثبسٍ ػٌبفش ‪ HTML‬دس ففسَ ؽوب سا فشاُن‬ ‫کٌٌذ.ایي ثشچغت ػٌقش ثذًَ سا دس ففسَ ؽوب هؼشفی هی کٌذ:‬ ‫>‪<body‬‬ ‫ثب اضبفَ کشدى ػٌقش >‪<bgcolor‬ؽوب هی تْاًیذ ثَ هشّسگش ثگْییذ کَ سًگ پظ صهیٌَ ؽوب ثبیذ لشهض ثبؽذ هثل ایي:‬ ‫>”‪<body bgcolor=”red‬‬ ‫ایي ثشچغت یک خذّل ‪ HTML‬سا هؼشفی هی کٌذ .>‪:<table‬ثب اضبفَ کشدى ػٌقش زبؽیَ ؽوب هی تْاًیذ ثَ هشّسگش ثگْییذ کَ خذّل‬ ‫ًجبیذ ُیچ لجَ ّ زبؽیَ ای داؽتَ ثبؽذ>”0”=‪: <table border‬‬ ‫ػٌبفش ُویؾَ دس یک صّج ًبم/همذاس هی آیٌذ، هثل ایي: ًبم=”همذاس”‬ ‫ػٌبفش ُویؾَ ثَ ثشچغت ؽشّع ػٌبفش ‪ HTML‬اضبفَ هی ؽًْذ‬ ‫ُرگس تگ پایاًی رافراهْظ ًکٌیذ!‬ ‫ثیؾتش هشّسگش ُبی ّة عٌذ ‪ HTML‬ساثَ دسعتظ ًوبیؼ هیذٌُذ زتی اگش ؽوب تگ پبیبًی سا فشاهْػ کٌیذ.‬ ‫‪1 <p>This is a paragraph‬‬ ‫‪2 <p>This is a paragraph‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  9. 9. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫9‬ ‫ّزیذ ّلی صادٍ‬ ‫هثبل ثبال دس ثیؾتش هشّسگش ُب ثَ دسعتی ًوبیؼ دادٍ هیؾْد ّلی ثَ آًِب اػتوبد ًکٌیذ.فشاهْػ کشدى تگ پبیبًی هٌدش ثَ اتفبلبت ّ‬ ‫پیغبم خطبُبی غیش هٌتظشٍ هیؾْد!‬ ‫تْخَ! : ّسژى (ًغخَ) ثؼذی ‪ HTML‬ثَ ؽوب اخبصٍ ًویذُذ تب ایي هشزلَ سا سُب کٌیذ ّ اًدبم ًذُیذ.‬ ‫عٌاصر خالی: ‪HTML‬‬ ‫ػٌبفش ‪ html‬کَ ثذّى هستْی ثبؽٌذ ػٌبفش خبلی ‪ً html‬بهیذٍ هیؾًْذ.‬ ‫‪‬‬ ‫ػٌبفش خبلی سا هیتْاى دس تگ آغبصیي ثغت!‬ ‫‪‬‬ ‫>‪<br‬یک ػٌقش خبلی اعت صیشا تگ پبیبًی ًذاسد.(کَ آى سا خظ ؽکغتَ یبد هیکٌٌذ(‬ ‫‪‬‬ ‫دس ‪ّ ّ XML ّ XHTML‬سژى ثؼذی ‪ُ HTML‬وَ ی ػٌبفش ثبیذ داسای تگ پبیبًی ثبؽٌذ.‬ ‫‪‬‬ ‫اضبفَ کشدى یک اعلؼ ( / ) هبًٌذ >/ ‪<br‬ثَ تگ آغبصیي یک ساٍ فسیسی اعت تب ػٌبفش خبلی ثغتَ ؽًْذ.ایي کبس‬ ‫‪‬‬ ‫تْعظ‪ HTml ّXHTML ، XML‬تبییذ ؽذٍ اعت.‬ ‫زتی اگش >‪<br‬دس ُوَ ی هشّسگش ُب کبس کٌذ، ثبص ُن ًْؽتي >/ ‪<br‬هطوئي تش ّ دس آیٌذٍ ثبثجبت تش اعت.‬ ‫‪‬‬ ‫حالت ُای کتیشي ، ‟‪„RED‬یا: ”‪“RED‬‬ ‫هستْای ػٌبفش ثبیذ ُویؾَ دس کتیؾي ُب هسذّد ؽًْذ ، اص ُش دّ زبلت کتیؾي ّ دّثل کتیؾي هی تْاى اعتفبدٍ کشد ّلی‬ ‫اعتفبدٍ اص دّثل کتیؾي ُب هتذاّل تش اعت. دس ثؼضی هْلؼیت ُبی ًبدس هثل ٌُگبهی کَ هستْای ػٌبفش خْد داسای کتیؾي‬ ‫ُغتٌذ الصم اعت کَ اص تک کتیؾي اعتفبدٍ کٌین:‬ ‫‪Name=john "shotgun" Nelson‬‬ ‫ّیژگی ُا ّ ًشاًَ ُا در‪html‬‬ ‫ّیژگی ُب یب ًؾبًَ ُب دس ‪ HTML‬ایي اهکبى سا هیذٌُذ تب اطالػبتی سا ثَ یک ػٌقش اضبفَ کٌین.‬ ‫ًشاًَ ُا در: ‪HTML‬‬ ‫ػٌبفش ‪ HTML‬هیتْاًٌذ ؽبهل خْاؿ ّ ّیژگی ُبیی ثبؽٌذ.‬ ‫‪‬‬ ‫ًؾبًَ ُب ایي اهکبى سا هیذٌُذ تب اطالػبتی سا ثَ یک ػٌقش اضبفَ کٌین.‬ ‫‪‬‬ ‫ًؾبًَ ُب ُویؾَ دس تگ آغبصیي هْسد اعتفبدٍ لشاس هیگیشًذ.‬ ‫‪‬‬ ‫ًؾبًَ ُب ثَ فْست خفت ًبم ّ همذاس هی آیٌذ هثل”‪: name=”value‬‬ ‫‪‬‬ ‫هثال ترای ًشاًَ ُا:‬ ‫لیٌک ُبی دس ‪ HTML‬تْعظ تگ >‪<a‬تؼشیف هیؾًْذ، آدسط لیٌک ثَ فْست یک ًؾبًَ(ّیژگی) ؽٌبختَ هیؾْد:‬ ‫>‪<a href="http://www.w3schools.com">This is a link</a‬‬ ‫دس آهْصػ ُبی ثؼذی دس هْسد لیٌک ُب تْضیر خْاُین داد. ػدلَ ًکٌیذ!‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link‬‬ ‫اص طشیك لیٌک سّثشّ توشیي کٌیذ :‬ ‫ُویشَ هقذار )‪ (value‬یک ّیژگی را ًقل کٌیذ:‬ ‫اسصػ ّ همذاس یک ّیژگی ُویؾَ ثبیذ دس ًمل لْل ُب لسبظ ؽْد.‬ ‫عجک دّثل اعتبیل دس ًمل لْل ُب سایح تش اعت ّلی عجک تک اعتبیل دس ًمل لْل ُب هْسد لجْل تش اعت.(اص ًظش هشّسگشُب(‬ ‫دس ثیؾتش ّضؼیت ُبی ًبدس، کَ خْد همذاس )‪ (value‬ؽبهل ًمل لْل هیؾْد؛ الصم اعت کَ ؽوب اص ًمل لْل یک گبًَ اعتفبدٍ کٌیذ:‬ ‫‪name=John "ShotGun" Nelson‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  10. 10. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫19‬ ‫ّزیذ ّلی صادٍ‬ ‫تیتر و پاراگراف‬ ‫تیتش ُب دس ‪ HTML‬اص اُویت ّیژٍ ای ثشخْسداسًذ.‬ ‫در: ‪HTML‬‬ ‫تیترُا‬ ‫تیتش ُب تْعظ تگ >1‪<h‬تب >6<تؼشیف هیؾًْذ.‬ ‫‪‬‬ ‫>1‪<h‬ثضسگتشیي تیتش سا تؼشیف هیکٌذ ّ >6‪ً<h‬یض کْچکتشیي تیتش سا تؼشیف هیکٌذ.‬ ‫‪‬‬ ‫هثبل:‬ ‫>1‪1 <h1>This is a heading</h‬‬ ‫>2‪2 <h2>This is a heading</h‬‬ ‫>3‪3 <h3>This is a heading</h‬‬ ‫ًکتَ : هشّسگشُب ثَ طْس خْدکبس یک فبفلَ خبلی لجل ّ ثؼذ اص تیتش ایدبد هیکٌٌذ.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers‬‬ ‫توشیي دس لیٌک سّثشّ :‬ ‫ُطتٌذ:‬ ‫تیتر ُا تطیار هِن‬ ‫اص تگ ُبی تیتش فمظ ثشای تیتش ُب اعتفبدٍ کٌیذ.‬ ‫‪‬‬ ‫( ًؾبى دادى ّ یب پشسًگ تش )‪ً (BOLD‬ؾبى دادى هتي اص تگ تیتش اعتفبدٍ ًکٌیذ.‬ ‫ثشای ثضسگ تش )‪BIG‬‬ ‫‪‬‬ ‫هْتْس ُبی خغتدْ (هثل گْگل ّ یبُْ ّ … ) ثشای عبختي فِشعتی اص اطالػبت ّ هستْای ّة عبیت ؽوب اص تیتش ُب‬ ‫‪‬‬ ‫اعتفبدٍ هیکٌٌذ.‬ ‫اص آى خب کَ هوکي اعت کبسثشاى ففسبت ّة ؽوب سا ثَ طْس عطسی ثخْاًٌذ، اعتفبدٍ اص تیتش ُب ثشای عبصهبًذُی کشدى‬ ‫‪‬‬ ‫هتي ّ ُوچٌیي هٌظن ًؾبى دادى آى هِن اعت.‬ ‫تگ >1‪<h‬ثبیذ ثشای تیتش افلی اعتفبدٍ ؽْد، ثؼذ تگ >2‪ ّ<h‬ثؼذ >3‪ … ّ<h‬یؼٌی تگ >1‪<h‬هؼشفی کٌٌذٍ هِوتشیي‬ ‫‪‬‬ ‫تیتش اعت، ثؼذ >2‪<h‬کَ اُویتؼ کوتش اعت ّ ثَ تشتیت تب >6‪<h‬کَ >6‪<h‬اُویتؼ کوتش اص ثمیَ اعت.‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  11. 11. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫99‬ ‫ّزیذ ّلی صادٍ‬ ‫قْاًیي :‬ ‫تگ >‪<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 Source‬سا ثضًیذ (دس ایٌتشًت اکغپلْسس) ّ دس فبیشفبکظ”‪ “View Page Source‬سا ثضًیذ؛‬ ‫دس هشّسگشُبی دیگش ُن ثَ ُویي تشتیت. .لتی ایي کبس سا اًدبم دُیذ یک ففسَ ثبص خْاُذ ؽذ کَ کذ ُبی ‪ HTML‬ففسَ ّة هْسد‬ ‫ًظش ؽوب سا ًؾبى خْاُذ داد.‬ ‫هرجع تگ ُای: ‪HTML‬‬ ‫ؽوب دس هدیذ آًالیي هشخغ تگ ُب سا هؾبُذٍ خْاُیذ کشد کَ ایي تگ ُب ؽبهل ػٌبفش ّ یک عشی اطالػبت اضبفی اعت.‬ ‫دس آهْصػ ثؼذی تگ ُبی دس هْسد تگ ُبی ثیؾتشی فسجت خْاُین کشد.‬ ‫دس صیش هِوتشیي تگ ُب سا هؾبُذٍ خْاُیذ کشد:‬ ‫تْضیسبت تگ:‬ ‫>‪<html‬‬ ‫سا تؼشیف هیکٌذ ‪ HTML‬یک عٌذ‬ ‫>‪<body‬‬ ‫سا تؼشیف هیکٌذ ‪ HTML‬ثذًَ افلی فبیل‬ ‫>6‪<h1> to.<h‬‬ ‫تیتش سا اص عبیض 1 تب 6 تؼشیف هیکٌذ‬ ‫>/ ‪<hr‬‬ ‫یک خظ افمی سا تؼشیف هیکٌذ‬ ‫>–!<‬ ‫سا تؼشیف هیکٌذ ‪ HTML‬تْضیسبت دس‬ ‫ُا‪:: HTML Paragraphs‬‬ ‫پاراگراف‬ ‫عٌذ ُبی ‪ HTML‬ثَ پبساگشاف ُبیی تمغین هیؾًْذ.‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  12. 12. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫29‬ ‫ّزیذ ّلی صادٍ‬ ‫در: ‪HTML‬‬ ‫پاراگراف ُا‬ ‫پبساگشاف ُب تْعظ تگ >‪<p‬تؼشیف هیؾًْذ.‬ ‫‪‬‬ ‫>‪1 <p>This is a paragraph</p‬‬ ‫2‬ ‫>‪3 <p>This is another paragraph</p‬‬ ‫ًکتَ : هشّسگش ُب ثَ طْس اتْهبتیک یَ فضبی خبلی لجل ّ ثؼذ اص پبساگشاف ایدبد هیکٌٌذ.‬ ‫1‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs‬‬ ‫هثبل ّ توشیي ثیؾتش دس لیٌک سّثشّ‬ ‫تگ پایاًی را فراهْظ ًکٌیذ :‬ ‫اگش ؽوب تگ پبیبًی سا فشاهْػ کٌیذ، ثیؾتش هشّسگشُب کذُبی ‪ 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‬‬ ‫ًکتَ >/ ‪ : <br‬یک تگ خبلی دس ‪ HTML‬اعت، ثٌبثشایي تگ پبیبًی ًذاسد.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs‬‬ ‫توشیي ّ هثبل ثیؾتش دس لیٌک سّثشّ‬ ‫>‪<br‬یا >‪</br‬؟‬ ‫دس ‪ّ ّ XML ّ XHTML‬سژى ًِبیی‪ ، HTML‬ػٌبفشی ثذّى تگ پبیبًی غیش لبثل لجْل خْاُذ ثْد.‬ ‫زتی اگش >‪<br‬دس ُوَ ی هشّسگش ُب کبس کٌذ، ثبص ُن ًْؽتي >/ ‪<br‬هطوئي تش ّ دس آیٌذٍ ثبثجبت تش اعت.‬ ‫خرّجی ُای – ‪ً HTML‬کتَ ُای هفیذ :‬ ‫ؽوب ًویذاًیذ کَ ففسَ ‪ HTML‬ؽوب دس ًوبیؾگش ُبی کْچک ّ ثضسگ چگًَْ ًوبیؼ دادٍ خْاٌُذ ؽذ ّ سیغبیض کشدى آى ًتبیح‬ ‫هختلفی خْاُذ داؽت.‬ ‫دس ‪ HTML‬ؽوب ًویتْاًیذ ثب اضبفَ کشدى فبفلَ ُبی خبلی صیبد یب خظ ُبی صیبدی، هتي خْد سا هشتت کٌیذ ّ فبیل خشّخیتبى سا تغییش‬ ‫دُیذ.‬ ‫هشّسگشُب خظ ُب ّ فبفلَ ُبی اضبفی سا صهبى ًوبیؼ پبک هیکٌٌذ ّ ًوبیؼ ًویذٌُذ.‬ ‫تؼذاد فبفلَ ُبی خبلی ُشچَ لذس ثبؽذ فمظ یک فبفلَ خبلی دس هشّسگش ًوبیؼ دادٍ خْاُذ ؽذ. ثشای خظ ُب ُن ُویٌطْس.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_poem‬‬ ‫خْدتبى اص طشیك لیٌک سّثشّ اهتسبى کٌیذ‬ ‫ؽوب ثب توشیي کشدى ّ دیذى هثبل ُبی صیبد هیتْاًیذ اؽکبالت خْد سا ثشطشف کٌیذ‬ ‫ُای: ‪HTML‬‬ ‫هرجع تگ‬ ‫یک پبساگشاف سا تؼشیف هیکٌذ …………… >‪<p‬‬ ‫.یک ؽکغت خظ سا ایدبد هیکٌذ .…………>/ ‪<br‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  13. 13. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫89‬ ‫ّزیذ ّلی صادٍ‬ ‫قالة تنذی و استایل‬ ‫صثبى ‪ HTML‬اص تگ ُبیی هثل >‪<b‬اعتفبدٍ هیکٌذ تب هتي خشّخی ثَ فْست پررنگ دس آیذ.‬ ‫‪‬‬ ‫ایي تگ ُب دس‪ ، HTML‬تگ ُبی لبلت ثٌذی هتي ًبهیذٍ هیؾًْذ.‬ ‫‪‬‬ ‫تگ های قالب بندی متن:‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting‬‬ ‫مثال و تمرین بیشتر‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  14. 14. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫49‬ ‫ّزیذ ّلی صادٍ‬ ‫تگ های خروجی کامپیوتر:‬ ‫تگ های نقل قول ، کتیشن و توضیحات:‬ ‫مثال های بیشتر:‬ ‫‪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‬‬
  15. 15. HTML4 ‫آهْصػ خبهغ صثبى‬95 ٍ‫ّزیذ ّلی صاد‬ . 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
  16. 16. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫69‬ ‫ّزیذ ّلی صادٍ‬ ‫لینک ها‬ ‫یک لیٌک آدسط یک عٌذ یب یک هٌجغ دس ّة اعت.‬ ‫هثال:‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links‬‬ ‫ایدبد فشاپیًْذ‬ ‫ایي هثبل ًؾبى هی دُذ کَ چگًَْ هی تْاى، دس هتي ًْؽتَ ؽذٍ، فشاپیًْذی ایدبد کشد.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_target‬‬ ‫ػکظ، ثَ ػٌْاى فشاپیًْذ‬ ‫ایي هثبل ػکغی سا ثَ یک فشاپیًْذ تجذیل هی کٌذ.‬ ‫)هثبلِبی ثیؾتش، دس اًتِبی ایي پغت آهذٍ اعت(‬ ‫‪ ّAnchors ،Hyperlinks‬لیٌک ُا در ‪HTML‬‬ ‫‪HTML‬اص ثشچغت >‪<a‬ثشای عبخت یک پیًْذ ثَ پشًّذٍ ُبی دیگش اعتفبدٍ هی کٌذ. یک ‪ anchor‬هی تْاًذ ثَ ُش هٌجؼی دس ّة‬ ‫اؽبسٍ کٌذ.یک ففسَ ‪ ، HTML‬یک ػکظ ، یک فبیل فْتی ، یک فیلن ّ. …‬ ‫دعتْسالؼول عبخت یک:‪Anchor‬‬ ‫>"‪1 <a href="url‬‬ ‫می شود‬ ‫>‪</a‬متنی کو نمایش داده‬ ‫دس ٌُگبم عبختي یک ‪ Anchor‬ثبیذ هکبًی کَ پیًْذ ثَ آى پشًّذٍ اؽبسٍ هیکٌذ سا هؾخـ کشد. ثشای ًوبیؼ آدسط پشًّذٍ اص هْخْدیت‬ ‫‪href‬اعتفبدٍ هی ؽْد.کلوبت ثیي ثش چغت آغبصّ پبیبى ‪ Anchor‬ثَ ػٌْاى فشا پیًْذ ًوبیؼ دادٍ هی ؽْد.‬ ‫ایي ‪ Anchor‬یک پیًْذ ثَ ‪ html.ir‬سا هؼشفی هی کٌذ:‬ ‫>‪</a‬پاسارگاد گرافیک>"/‪1 <a href="http://www.pasargad-graphic.com/blog‬‬ ‫خظ ثبال ؽجیَ ایي ًؾبى دادٍ خْاُذ ؽذ : پبعبسگبد گشافیک‬ ‫یک لیٌک در: ‪HTML‬‬ ‫لبػذٍ عبخت یک لیٌک:‬ ‫>‪1 <a href="url">Link text</a‬‬ ‫تگ آغبصیي ؽبهل ػٌقشی دس هْسد لیٌک اعت.‬ ‫هستْای ػٌقش (هتي پیًْذ ) لغوتی اعت کَ ًوبیؼ دادٍ خْاُذ ؽذ.‬ ‫ًکتَ : هستْای ػٌقش زتوب ًجبیذ ؽبهل هتي ثبؽذ! هیتْاًذ ؽبهل لیٌک یک ػکظ یب ُش چیض دیگشی ثبؽذ.‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  17. 17. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫79‬ ‫ّزیذ ّلی صادٍ‬ ‫هشخصَ: ‪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‬‬ ‫#دس ػٌقش ‪ href‬یک ‪ named anchor‬سا تؼشیف هیکٌذ.‬ ‫هثال:‬ ‫ػٌقش ‪ anchor named‬داخل یک عٌذ ‪: HTML‬‬ ‫>‪1 <a name="tips">Useful Tips Section</a‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  18. 18. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫89‬ ‫ّزیذ ّلی صادٍ‬ ‫لیٌک ثَ لغوت هْسد ًظش اص ُوبى عٌذ:‬ ‫>‪1 <a href="#tips">Jump to the Useful Tips Section</a‬‬ ‫لیٌک ثَ لغوت هْسد ًظش اص یک عٌذ دیگش:‬ ‫-‪<a href="http://www.pasargad-graphic.com/blog/download-apple-safari‬‬ ‫>‪</a‬پرش بو بخش دیذگاه ىای مربوط بو مرورگر سافاری>"04-‪5/#comment‬‬ ‫ًکات پایَ ای – اطالعات هفیذ:‬ ‫ُویؾَ یک ػالهت / ثَ هٌبثغ صیش پْؽَ ُب اضبفَ کٌیذ. اگش ؽوب پیًْذی هثل ایي دسعت کٌیذ‬ ‫"‪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‬‬ ‫ؽکغتي زقبس لبة‬ ‫اگش ففسَ ؽوب، داخل یک لبة ًوبیؼ دادٍ هی ؽْد، لیٌک ُبی آى، هستْای لبة سا تغییش هی دٌُذ. ثشای ؽکغتي ایي هسذّدیت‬ ‫ّ تغییش هستْای کل پٌدشٍ هبًٌذ ایي هثبل ػول کٌیذ.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryh tml_mailto‬‬ ‫لیٌک ثَ‪Email‬‬ ‫دس فْستیکَ آدسط لیٌک ؽوب، اص ؽوبُبی دیگشی غیش اص‪ ، http‬هبًٌذ ‪ ّ mailto‬یب ‪ ftp‬اعتفبدٍ کٌذ، چَ هی ؽْد. ایي هثبل ًوًَْ ای‬ ‫سا ًوبیؼ هی دُذ.‬ ‫2‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto‬‬ ‫لیٌک ثَ ‪ًْ( Email‬ػی دیگش)‬ ‫دس ایي هثبل ًوًَْ دیگشی اص لیٌک ًْع ‪ mailto‬سا هی ثیٌیذ.‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  19. 19. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫99‬ ‫ّزیذ ّلی صادٍ‬ ‫تصاویر‬ ‫ُذف هب ایي اعت ؽوب خْدتبى یبد ثگیشیذ! پظ سّی لیٌک ُبی صیش کلیک کٌیذ ّ تب زذّدی ثب ایي ػٌقش آؽٌب ؽْیذ .کلیک کٌیذ!‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images‬‬ ‫قرار دادى عکص!‬ ‫دس لیٌک ثبال هیتْاًیذ ثفِویذ چگًَْ ػکظ ُب سا دس ففسبت ّة لشاس هیگیشًذ (توشیي کٌیذ)!‬ ‫2‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images‬‬ ‫قرار دادى عکص از ضرّر دیگر!‬ ‫دس لیٌک ثبال، ًسٍْ لشاس دادى ػکظ اص عشّس ُبی دیگش سا هی ثیٌیذ.‬ ‫تگ عکص ُا ّ هشخصَ: ‪src‬‬ ‫دس ‪ HTML‬ػکظ ُب تْعظ تگ >‪<img‬تؼشیف هیؾًْذ.‬ ‫تگ >‪<img‬خبلی اعت، ثَ ایي هؼٌی کَ هیتْاًذ ؽبهل ػٌبفشی ثبؽذ ّ تگ پبیبًی ًذاسد.‬ ‫ثشای ًؾبى دادى یک ػکظ دس ففسَ، ؽوب ثبیذ اص ػٌقش ‪ src‬اعتفبدٍ کٌیذ.‬ ‫‪ Src‬هخفف ‪( source‬هٌجغ) اعت.‬ ‫هستْای ػٌقش ‪src ، url‬تقْیشی اعت کَ ؽوب هی خْاُیذ دس ففسَ تبى ًوبیؼ دُیذ.‬ ‫ًسٍْ هؼشفی یک تقْیش:‬ ‫>"‪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‬‬
  20. 20. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫12‬ ‫ّزیذ ّلی صادٍ‬ ‫>/ "‪1 <img src="boat.gif" alt="Big Boat‬‬ ‫اگش هشّسگش ًتْاًذ تقْیشی سا ثبسگیشی ًوبیذ ، ػٌقش ‪ alt‬ثَ خْاًٌذٍ هی گْیذ کَ آى سا دس ففسَ اص دعت دادٍ اعت ، عپظ هشّسگش‬ ‫هتي خبیگضیي سا ثدبی آى ًؾبى خْاُذ داد‬ ‫ایي یک ػبدت خْثی اعت تب ُش ػکظ سا دس ففسَ ثب ػٌقش ‪ُ alt‬وشاٍ کٌیذ تب ثشای کغبًی کَ هدجْسًذ دس هشّسگشُبیؾبى فمظ هتي‬ ‫سا هؾبُذٍ کٌٌذ ففسَ ؽوب ثِتش ّ هفیذ تش ًوبیؼ دادٍ ؽًْذ.‬ ‫ًکات پایَ ای – اطالعات هفیذ:‬ ‫اگش یک فبیل ‪ HTML‬زبّی 01 تقْیش ثبؽذ ، ثشای ًوبیؼ کبهل ففسَ ثَ 11 فبیل ازتیبج اعت. ثبسگیشی تقبّیش ّلت گیش اعت ، ثٌبثش‬ ‫ایي تْفیَ هي ایي اعت کَ اص تقبّیش ثَ دلت اعتفبدٍ کٌیذ.‬ ‫هثال ُای تیشتر:‬ ‫‪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‬‬
  21. 21. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫92‬ ‫ّزیذ ّلی صادٍ‬ ‫جذول‬ ‫جذّل ُا‬ ‫هثال ُای زیر را تثیٌیذ ّ خْدتاى توریي کٌیذ.‬ ‫‪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‬غتٌذ کَ زبّی علْل دادٍ اعت.‬ ‫‪‬‬ ‫یک علْل دادٍ هی تْاًذ زبّی هتي ، ػکظ ، لیغت ُب ، پبساگشاف ُب ، فشم ُب ، خظ ُبی افمی ّ خذّل ُب ّ… ثبؽذ.‬ ‫‪‬‬ ‫>"1"=‪01 <table border‬‬ ‫>‪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. 22. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫22‬ ‫ّزیذ ّلی صادٍ‬ ‫جذّل ُا ّ عٌصر: ‪border‬‬ ‫اگش ؽوب ثشای خذّل ػٌقش )‪ (border‬زبؽیَ سا تؼییي ًکشدٍ ایذ، خذّل ؽوب ثذّى زبؽیَ ًوبیؼ دادٍ خْاُذ ؽذ.‬ ‫ثؼضی اص هْالغ ایي کبس هفیذ اعت ّلی ثیؾتش اّلبت ؽوب ًیبص داسیذ تب زبؽیَ دیذٍ ؽْد.‬ ‫ثشای ًوبیؼ یک خذّل ثَ ُوشاٍ زبؽیَ ؽوب ثبیذ اص ػٌقش ‪ border‬اعتفبدٍ کٌیذ:‬ ‫>"1"=‪1 <table border‬‬ ‫>‪2 <tr‬‬ ‫>‪3 <td>Row 1, cell 1</td‬‬ ‫>‪4 <td>Row 1, cell 2</td‬‬ ‫>‪5 </tr‬‬ ‫>‪6 </table‬‬ ‫ضر تیتر ُا در جذّل ُا:‬ ‫عشتیتشُب دس یک خذّل ثب تگ >‪<th‬تؼشیف هیؾًْذ.‬ ‫>"1"=‪01 <table border‬‬ ‫>‪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‬‬
  23. 23. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫82‬ ‫ّزیذ ّلی صادٍ‬ ‫چگًْگی ًوبیؼ دس هشّسگش:‬ ‫ضلْل ُای خالی در جذّل ُا:‬ ‫علْل ُبی خذاّل ثب هستْای خبلی دس ثیؾتش هشّسگشُب خْة ًؾبى دادٍ ًوی ؽًْذ.‬ ‫>"1"=‪01 <table border‬‬ ‫>‪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‬زبؽیَ سا ًؾبى هی دُذ.).ثشای خلْگیشی اص آى یک فبفلَ ًب همطْع )&‪(;nbsp‬ثَ علْل دادٍ خبلی اضبفَ کٌیذ‬ ‫تب زبؽیَ سا هؾخـ عبصیذ.‬ ‫>"1"=‪01 <table border‬‬ ‫>‪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>&nbsp;</td‬‬ ‫>‪09 </tr‬‬ ‫>‪10 </table‬‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬
  24. 24. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫42‬ ‫ّزیذ ّلی صادٍ‬ ‫چگًْگی ًوبیؼ دس هشّسگش:‬ ‫ًکات پایَ – اطالعات هفیذ:‬ ‫ػٌبفش >‪<tfoot> ّ<tbody> ،<thead‬ثَ دلیل پؾتیجبًی ثذ هشّسگش ُب ثَ ًذست هْسد اعتفبدٍ لشاس هی گیشًذ. اًتظبس هی سّد کَ دس‬ ‫ًغخَ ُبی ثؼذی ‪ XHTML‬ایي سًّذ تغییش کٌذ.‬ ‫هثال ُای تیشتر:‬ ‫3‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables‬‬ ‫خذّل ثذّى زبؽیَ‬ ‫دس ایي هثبل یک خذّل ثذّى زبؽیَ سا هی ثیٌیذ.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers‬‬ ‫عشتیتشُبی خذّل‬ ‫چگًْگی ًوبیؼ عشتیتشُب سا دس خذّل هی ثیٌیذ.‬ ‫‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_nbsp‬‬ ‫علْل خبلی‬ ‫ایي هثبل طشیك اعتفبدٍ اص”;‪ ، “&nbsp‬ثشای ًوبیؼ فسیر علْلِبی خبلی سا ًؾبى هی دُذ.‬ ‫2‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables‬‬ ‫ػٌْاى خذّل‬ ‫ایي هثبل چگًْگی ػٌْاى داس کشدى خذّل سا ًؾبى هی دُذ.‬ ‫تْعؼَ علْل خذّل ثَ ثیؼ اص یک عطش یب عتْى ‪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. 25. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫52‬ ‫ّزیذ ّلی صادٍ‬ ‫فهرست ها‬ ‫‪HTML‬اص فِشعت ُبی (لیغت ُبی) هشتت، ًبهشتت ّ تؼشیفی پؾتیجبًی هیکٌذ.‬ ‫هثال:‬ ‫4‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists‬‬ ‫لیغت ثذّى تشتیت‬ ‫ایي هثبل فِشعتی کَ دس آى تشتیت اُویت ًذاسد سا ًوبیؼ هی دُذ.‬ ‫‪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. 26. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫62‬ ‫ّزیذ ّلی صادٍ‬ ‫فِرضت ُای هرتة:‬ ‫یک فِشعت هشتت ؽذٍ ًیض لیغتی اص الالم اعت.‬ ‫‪‬‬ ‫الالم فِشعت ثْعیلَ ؽوبسٍ ًؾبى گزاسی هی ؽًْذ.‬ ‫‪‬‬ ‫یک فِشعت هشتت ثب تگ >‪<ol‬آغبص هی ؽْد.‬ ‫‪‬‬ ‫ُشکذام اص الالم فِشعت ثب تگ >‪<li‬آغبص هی ؽًْذ.‬ ‫‪‬‬ ‫>‪1 <ol‬‬ ‫>‪2 <li>Coffee</li‬‬ ‫>‪3 <li>Milk</li‬‬ ‫>‪4 </ol‬‬ ‫چگًْگی ًوبیؼ دس هشّسگش:‬ ‫‪Coffee‬‬ ‫1.‬ ‫‪Milk‬‬ ‫2.‬ ‫داخل الالم فِشعت هی تْاًیذ پبساگشاف ُب، پشػ ثَ خظ ثؼذ ، ػکظ ُب، پیًْذ ُب ، لیغت ُبی دیگش ّ … لشاس دُیذ.‬ ‫فِرضت ُای تعریفی:‬ ‫یک فِشعت تؼشیفی ، فِشعتی اص الالم ًیغت.‬ ‫‪‬‬ ‫ایي فِشعت ، فِشعتی اص ػجبسات ّ تْضیسبت آى ػجبسات اعت.‬ ‫‪‬‬ ‫یک فِشعت تؼشیفی ثب ثشچغت >‪<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. 27. ‫آهْصػ خبهغ صثبى 4‪HTML‬‬‫72‬ ‫ّزیذ ّلی صادٍ‬ ‫هثال ُای تیشتر:‬ ‫ًوبیؾِبی گًْبگْى‪ t‬فِشعت ُبی هشتت ‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered‬‬ ‫دس ایي هثبل فْستِبی هختلف فِشعت ُبی هشتت سا هی ثیٌیذ.‬ ‫ًوبیؾِبی گًْبگْى فِشعت ُبی دّى تشتیت ‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered‬‬ ‫ایي هثبل ًوبیؾِبی هختلف فِشعت ُبی ثذّى تشتیت سا ًؾبى هی دُذ.‬ ‫2‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists‬‬ ‫فِشعت ُبی تْ دس تْ‬ ‫چگًْگی عبخت فِشعت ُبی تْ دس تْ سا دس ایي هثبل هی ثیٌیذ.‬ ‫2‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_nestedlists‬‬ ‫فِشعت ُبی تْ دس تْ‬ ‫ایي هثبل ًیض گًَْ ُبی دیگشی اص فِشعت ُبی تْ دس تْ سا ًؾبى هی دُذ.‬ ‫3‪http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists‬‬ ‫فِشعت تؼشیفی‬ ‫ایي هثبل سّػ عبخت فِشعت ، کَ دس آى همذاس ّ هستْای ُش ػٌقش فِشعت تؼشیف هی ؽًْذ سا ًؾبى هی دُذ.‬ ‫تگ ُای فِرضت:‬ ‫‪http://www.Pasargad-Graphic.com/blog‬‬

×