شروع آموزش طراحی صفحات وب با اچ تی ام ال 5 و سی اس اس 3 for see video, please visit: https://www.mihanlearn.net

1. ‫ق‬‫عش‬‫نده‬‫ین‬‫رف‬‫آ‬‫انم‬‫هب‬
‫کبر‬ ‫ثبسار‬ ‫سب‬ ‫قذم‬ ِ‫ث‬ ‫قذم‬ ‫ّبی‬ ‫آهَسش‬ ‫سزی‬ ‫اس‬‫ٍة‬ ‫عزاضی‬
:‫قذم‬ ‫اٍلیي‬
‫آموزش‬‫محور‬ ‫پروژه‬‫با‬ ‫وب‬ ‫طراحی‬ ‫صد‬ ‫تا‬ ‫صفر‬HTML5‫و‬CSS3
/ ‫لزى‬ ‫هیْي‬www.MihanLearn.net

2. ‫فهرست‬
ِ‫هقذه‬
‫کبهل‬ ‫ثغَر‬ ‫سبیز‬ ‫یک‬ ًَِ‫زگ‬‫ضَد‬ ‫هی‬ ‫ایدبد‬
‫آهَخز‬ ‫خَاّن‬ ِ‫ز‬ ِ‫هدوَػ‬ ‫ایي‬ ‫در‬
ِ‫ز‬‫ضزٍرسی‬‫دارد‬ِ‫ک‬‫ثب‬‫ٍخَد‬‫فزین‬‫ٍرک‬‫ّبیی‬‫هثل‬‫ثَر‬،‫اسشزح‬‫سی‬‫اس‬‫اس‬‫را‬‫یبد‬‫ثگیزیذ‬
‫سبخشبر‬ِ‫غفط‬‫ٍة‬‫عجق‬‫اسشبًذارد‬‫اذ‬‫سی‬‫ام‬‫ال‬5
!‫خْبى‬ ‫سالم‬

3. ‫مقدمه‬
ِ‫درخ‬ ‫آهَسضی‬ ‫ثب‬ ِ‫ک‬ ‫خَضطبلین‬ ‫ثسیبر‬1‫آهَسی‬ ‫ػلن‬ ُ‫را‬ ‫ّوسفز‬ ‫دیگز‬ ‫ثبر‬ ‫رٍاى‬ ٍ.‫ّسشین‬ ‫هبى‬ ‫گزاهی‬ ‫ّوَعٌبى‬
‫ایي‬ .‫ایذ‬ ُ‫کزد‬ ُ‫هطبّذ‬ ‫را‬ ‫آًْب‬ ‫هغوئٌب‬ ِ‫ک‬ ‫اسز‬ ُ‫ضذ‬ ‫هٌشطز‬ ‫ٍة‬ ُ‫ضَس‬ ‫در‬ ‫هخشلفی‬ ‫ّبی‬ ‫آهَسش‬ ‫لزى‬ ‫هیْي‬ ‫سبیز‬ ‫در‬ ‫دیطشز‬
ٍ ‫اسز‬ ‫دٍسشبى‬ ‫اضکبالر‬ ‫رفغ‬ ٍ ‫قجلی‬ ‫ّبی‬ ‫آهَسش‬ ‫ثبسثیٌی‬ ‫ضبغل‬ ‫ضذ‬ ‫خَاّذ‬ ‫سَلیذ‬ ‫دس‬ ‫ایي‬ ‫اس‬ ِ‫ک‬ ‫ّبیی‬ ‫آهَسش‬ ٍ ‫آهَسش‬
‫ّوسٌیي‬‫ثب‬‫ّبی‬ ‫ًیبس‬ ‫ثزرسی‬‫ّبی‬ ُ‫دٍر‬ ‫اس‬ ُ‫ضذ‬ ‫کست‬ ‫سدبرة‬ ِ‫ث‬ ِ‫سَخ‬ ‫ثب‬ ‫هیذّین‬ ‫ضوب‬ ِ‫ث‬ ‫را‬ ‫اعویٌبى‬ ‫ایي‬ ‫اکٌَى‬ ‫ّن‬ ،‫کبر‬ ‫ثبسار‬
‫آى‬ ‫کبهل‬ ُ‫هطبّذ‬ ‫اس‬ ‫دس‬ ٍ ‫ثَد‬ ‫خَاّذ‬ ٌِ‫سهی‬ ‫ایي‬ ‫آهَسضی‬ ‫دکیح‬ ‫ثْشزیي‬ ‫ضَد‬ ‫هی‬ ‫سقذیوبى‬ ‫رایگبى‬ ِ‫ک‬ ‫آهَسضی‬ ُ‫دٍر‬ ‫ایي‬ ‫دیطیي‬
‫خَاّیذ‬ ُ‫خجز‬ ٌِ‫سهی‬ ‫ایي‬ ‫در‬ ‫ضوب‬‫ضذ‬.
َ‫ثش‬ ‫ضوب‬ ِ‫ایٌک‬ ‫ثزای‬ ‫قذم‬ ‫اٍلیي‬‫یبدگیزی‬ ،‫ضَیذ‬ ُ‫ضَس‬ ‫ایي‬ ‫کبر‬ ‫ثبسار‬ ‫ٍارد‬ ِ‫ایٌک‬ ‫یب‬ ٍ ‫ضَیذ‬ ‫ٍة‬ ‫غفطبر‬ ‫عزاضی‬ ‫اسشبد‬ ‫یک‬ ‫اًیذ‬
‫ایي‬ ِ‫ک‬ ‫اسز‬ ‫هْن‬ ‫ثسیبر‬ ٍ ‫ثبضذ‬ ‫هی‬ ‫اس‬ ‫اس‬ ‫سی‬ ٍ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫سَسظ‬ ‫سبیز‬ ‫کلی‬ ‫زْبرزَة‬ ‫سَلیذ‬ ٍ ‫سبیز‬ ‫ظبّزی‬ ‫عزاضی‬
‫ثز‬ ٍ ‫فزاثگیزیذ‬ ‫ثخَثی‬ ‫را‬ ‫قذم‬‫هجبضث‬.‫ضَیذ‬ ‫هسلظ‬ ‫آى‬

4. ‫ایج‬ ‫کامل‬ ‫سایت‬ ‫یک‬ ‫چگووه‬‫شود؟‬ ‫می‬ ‫اد‬
( ‫دَیب‬ ‫ثػَرر‬ ُ‫اهزٍس‬ ‫اکثزا‬ ِ‫ک‬ ‫ایسشب‬ ‫یب‬ ٍ ‫ثبضذ‬ ‫دَیب‬ ‫یب‬ ‫سَاًذ‬ ‫هی‬ ‫کٌیذ‬ ‫هی‬ ُ‫هطبّذ‬ ‫ایٌشزًز‬ ‫در‬ ِ‫ک‬ ‫سبیشی‬ ‫ٍة‬ ‫ّز‬Dynamic‫هی‬ )
.‫دارد‬ ‫سؼبهل‬ ‫کبرثزاى‬ ‫ثب‬ ‫یؼٌی‬ ‫ثبضذ‬
‫ثبضٌذ‬ ‫هی‬ ‫ثخص‬ ٍ‫د‬ ‫ضبهل‬ ‫ّب‬ ‫سبیز‬ ‫ٍة‬،:‫اول‬ ‫مرحله‬‫یا‬ ‫سایت‬ ‫ظاهر‬Front-end‫ضَد‬ ‫هی‬ ُ‫داد‬ ‫ًوبیص‬ ‫کبرثزاى‬ ِ‫ث‬ ِ‫ک‬‫سک‬ ،
‫عزاش‬ ‫یک‬ ُ‫ثزػْذ‬ ‫آى‬ ‫عزاضی‬ ‫یب‬ ‫دیشایي‬ ِ‫ک‬ ‫ثبضذ‬ ‫هی‬ ‫قسوز‬ ‫ّویي‬ ‫هیکٌیذ‬ ُ‫هطبّذ‬ ‫سبیز‬ ‫ٍة‬ ‫یک‬ ‫اس‬ ‫ضوب‬ ِ‫ک‬ ‫غفطبسی‬ ‫سک‬
.‫اسز‬ ‫ٍة‬ ‫غفطبر‬
‫اسز‬ ‫خالقیز‬ ‫دارای‬ ِ‫ک‬ ‫گزافیسز‬ ‫یک‬ ‫گبم‬ ‫اٍلیي‬ ‫در‬ ‫ثزٍین‬ ‫دیص‬ ‫را‬ ‫ٍة‬ ‫غفطبر‬ ‫سَلیذ‬ ‫هزاضل‬ ‫اسشبًذارد‬ ‫ثغَر‬ ‫ثخَاّین‬ ‫اگز‬‫در‬
،‫هب‬ ُ‫درثبر‬ ،‫هب‬ ‫ثب‬ ‫سوبس‬ ‫هثل‬ ‫فزػی‬ ‫غفطبر‬ ‫سیخ‬ ،‫اغلی‬ ِ‫غفط‬ :‫(هبًٌذ‬ ‫غفطبر‬ ‫سوبهی‬ ‫فشَضبح‬ ‫هبًٌذ‬ ‫گزافیکی‬ ‫ّبی‬ ‫افشار‬ ‫ًزم‬
‫کذ‬ ِ‫ث‬ ‫را‬ ‫آًْب‬ ‫ػکس‬ ‫قبلت‬ ‫در‬ ٍ ‫هیکٌذ‬ ‫عزاضی‬ ‫را‬ )..ٍ ‫هذیزیز‬ ‫دٌل‬ ،‫کبرثزاى‬ ‫دٌل‬ ِ‫غفط‬ ،‫ًظزار‬ ‫ثجز‬ ٍ ‫هغبة‬ ‫ًوبیص‬ ِ‫غفط‬
ُ‫ضذ‬ ‫عزاضی‬ ‫ّبی‬ ‫ػکس‬ ‫ایي‬ ِ‫ک‬ ‫دّذ‬ ‫هی‬ ‫ًَیس‬‫را‬‫سک‬ ‫سک‬ ‫ٍاقغ‬ ‫در‬ ،‫گَیٌذ‬ ‫هی‬ ‫هکبح‬‫در‬ َ‫ده‬ ٍ ‫ػکس‬ ‫قبلت‬ ‫در‬ ‫سبیز‬ ‫غفطبر‬
ِ‫ث‬ ‫ّب‬ ‫ػکس‬ ‫سجذیل‬ ‫ّوبى‬ ِ‫ک‬ ‫کذًَیسی‬ ٍ ‫ضَد‬ ُ‫داد‬ ‫ًَیس‬ ‫کذ‬ ِ‫ث‬ ‫سبییذ‬ ‫درغَرر‬ ‫سب‬ ‫هیگیزد‬ ‫قزار‬ ‫هطشزی‬ ‫یب‬ ُ‫دزٍص‬ ‫هذیز‬ ‫اخشیبر‬
‫سبس‬ ُ‫دیبد‬ ٍ ‫هطخع‬ ِ‫هزضل‬ ‫ایي‬ ‫در‬ ‫سبیز‬ ِ‫ًقط‬ ‫گفز‬ ‫سَاى‬ ‫هی‬ ‫کلی‬ ‫ثغَر‬ .‫ضَد‬ ‫اًدبم‬ ‫اسز‬ ‫ٍة‬ ‫غفطبر‬‫سبیز‬ ‫ایي‬ ِ‫ک‬ ‫هیطَد‬ ‫ی‬
.‫ثبضذ‬ ِ‫داضش‬ ‫اهکبًبسی‬ ِ‫ز‬ ٍ ‫دّذ‬ ‫اًدبم‬ ‫کبری‬ ِ‫ز‬ ‫اسز‬ ‫قزار‬
‫ّبی‬ ‫سثبى‬ ‫اس‬ ‫سَاًذ‬ ‫هی‬ ‫ٍة‬ ‫عزاش‬ ‫کذًَیسی‬ ِ‫هزضل‬ ‫در‬HTML5،CSS3‫خی‬ ،‫اسشزح‬ ‫ثَر‬ ‫هبًٌذ‬ ‫ّبیی‬ ‫ٍرک‬ ‫فزین‬ ،‫خبٍااسکزیذز‬ ،
‫د‬ ِ‫ّو‬ ‫در‬ ِ‫ک‬ ‫کٌذ‬ ‫خلق‬ ‫را‬ ‫ٍاکٌطگزایی‬ ‫یب‬ َ‫ریسذبًسی‬ ‫غفطبر‬ ‫سب‬ ‫کٌذ‬ ُ‫اسشفبد‬ ..ٍ ‫کَئزی‬.‫ثبضذ‬ ‫ًوبیص‬ ‫قبثل‬ ‫ّب‬ ‫یَایس‬
:‫دوم‬ ‫مرحله‬)‫غفطبر‬ ‫سوبم‬ ‫ثزای‬ ‫سبیز‬ ‫ظبّز‬ ‫(ّوبى‬ ‫ضذ‬ ‫اًدبم‬ ‫سبیز‬ ‫غفطبر‬ ‫عزاضی‬ ِ‫ایٌک‬ ‫اس‬ ‫دس‬ِ‫ک‬ ‫اسز‬ ُ‫رسیذ‬ ‫آى‬ ‫ًَثز‬
،‫ًیسز‬ ‫کبفی‬ ‫سٌْب‬ ‫ظبّز‬ ‫یک‬ ‫فقظ‬ ‫زَى‬ ‫کٌین‬ ‫ثزقزار‬ ‫سؼبهل‬ ‫خَد‬ ‫کبرثزاى‬ ‫ثب‬ ‫سب‬ ‫ثذّین‬ ‫را‬ ‫دَیبیی‬ ‫ّوبى‬ ‫یب‬ ‫رٍش‬ ‫غفطبر‬ ‫ایي‬ ِ‫ث‬
ً‫اهکب‬ ِ‫ث‬ ‫ًیبس‬ ‫سبیز‬.‫دارد‬ ‫هخبعت‬ ‫ثب‬ ‫ارسجبط‬ ٍ ‫بر‬
‫ًَیس‬ ِ‫ثزًبه‬ ‫یب‬ ‫ٍة‬ ‫سطز‬ ‫ًَیسی‬ ِ‫(ثزًبه‬ ‫سبیز‬ ‫ًَیسی‬ ِ‫ثزًبه‬ ‫آى‬ ِ‫ث‬ ِ‫ک‬ ِ‫هزضل‬ ‫ایي‬ ‫در‬Back-end‫اهکبى‬ ،‫ضَد‬ ‫هی‬ ِ‫گفش‬ )
‫سب‬ ‫اسز‬ ‫ثْشز‬ ‫ًَیسی‬ ِ‫ثزًبه‬ ‫ثزای‬ ‫ضَد‬ ُ‫اسشفبد‬ ‫سثبًی‬ ِ‫ز‬ ‫اس‬ ‫اهکبًبر‬ ‫ایي‬ ‫ثب‬ ‫سبیز‬ ‫ایي‬ ‫ثزای‬ ِ‫ک‬ ‫ضَد‬ ‫هی‬ ‫ثیٌی‬ ‫دیص‬ ٍ ‫سٌدی‬
‫ثب‬ ‫دائن‬ ‫دبسخگَی‬ِ‫ث‬ ‫ًَیسی‬ ِ‫ثزًبه‬ ‫اس‬ ‫دس‬ ‫اسز‬ ‫قزار‬ ِ‫ک‬ ‫سزٍری‬ ‫ّوسٌیي‬ .‫ضَد‬ ‫سبهیي‬ ‫آى‬ ‫اهٌیز‬ ِ‫ایٌک‬ ‫ضوي‬ ‫ثبضذ‬ ‫سدیذکٌٌذگبى‬
‫زٌیي‬ ‫ایب‬ ٍ ‫دی‬ ‫اذ‬ ‫دی‬ ‫یب‬ ‫داضز‬ ‫خَاّذ‬ ‫را‬ ‫دبیشَى‬ ‫اس‬ ‫دطشیجبًی‬ ‫قبثلیز‬ ‫هب‬ ‫سزٍر‬ ‫هثبل‬ ‫ثؼٌَاى‬ ‫ضَد‬ ‫هی‬ ‫هطخع‬ ‫کٌین‬ ِ‫هزاخؼ‬ ‫آى‬
‫یب‬ ‫کٌین‬ ِ‫سْی‬ ُ‫ضذ‬ ‫ثزآٍرد‬ ٌِ‫ّشی‬ ‫ثب‬ ‫سَاًین‬ ‫هی‬ ‫را‬ ‫سزٍری‬‫هی‬ ِ‫گفش‬ ‫اف‬ ‫دی‬ ‫دی‬ ‫ایي‬ ُ‫ّوزا‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬ ‫خشئیبر‬ ‫سبیز‬ ِ‫ک‬ ‫خیز‬
.‫اسز‬ ‫داًلَد‬ ‫قبثل‬ ‫لزى‬ ‫هیْي‬ ‫سبیز‬ ‫اس‬ ِ‫ک‬ ‫ضَد‬
‫ضبهل‬ ُ‫ضذ‬ ِ‫گفش‬ ‫ثخص‬ ٍ‫د‬ ‫ثز‬ ٍُ‫ػال‬ ‫سبیز‬ ‫ایدبد‬ ‫ضوٌب‬‫اطالعاتی‬ ‫بانک‬ ‫طراحی‬‫ثبًک‬ ‫گفز‬ ‫سَاى‬ ‫هی‬ ِ‫زًَک‬ ،‫ضَد‬ ‫هی‬ ‫ّن‬
ُ‫اضبر‬ ‫ّب‬ ‫اهَسش‬ ‫عَل‬ ‫در‬ ٍ ‫ًذادین‬ ‫خبی‬ ‫ثٌذی‬ ِ‫دسش‬ ‫ّیر‬ ‫در‬ ‫خبظ‬ ‫ثغَر‬ ‫اًزا‬ ‫هب‬ ‫دیگز‬ ‫ثبضذ‬ ‫هی‬ ‫دخص‬ ٍ‫د‬ ‫ّز‬ ِ‫ث‬ ‫هزثَط‬ ‫اعالػبسی‬
.‫ثؼذی‬ ‫ّبی‬ ِ‫هدوَػ‬ ‫در‬ ‫یؼٌی‬ ‫کزد‬ ‫خَاّین‬ ‫ایدبد‬ ‫آًزا‬ ‫ًَیسی‬ ِ‫ثزًبه‬ ‫سهبى‬ ‫در‬ ِ‫ک‬ ‫زٌذ‬ ‫ّز‬ ،‫کزد‬ ‫خَاّین‬

5. ‫چه‬ ‫مجموعه‬ ‫ایه‬ ‫در‬‫آموخت؟‬ ‫خواهیم‬
‫ّبی‬ ‫سثبى‬ ‫ٍرصى‬ ‫خذیذسزیي‬ ‫کبهل‬ ‫ثغَر‬ ‫دارین‬ ‫قػذ‬ ‫ایٌدب‬ ‫در‬ ‫اسز‬ ‫هطخع‬ ِ‫هدوَػ‬ ‫ػٌَاى‬ ‫اس‬ ِ‫ک‬ ‫ّوبًغَر‬HTMLٍCSSِ‫ث‬ ‫را‬
ِ‫ث‬ ‫کبرثزدی‬ ٍ ‫ػولی‬ ‫غَرر‬ِ‫ث‬ ‫سب‬ ‫دّین‬ ‫آهَسش‬ ‫ضوب‬‫زْبرزَة‬ ‫ثشَاًیذ‬ ‫ّب‬ ‫سثبى‬ ‫ایي‬ ‫کوک‬.‫کٌیذ‬ ‫عزاضی‬ ‫را‬ ‫خَد‬ ‫سبیز‬ ‫اغلی‬
‫ثؼذی‬ ‫ّبی‬ ‫گبم‬ ٍ ‫ّب‬ ِ‫هدوَػ‬ ‫در‬ ‫سذس‬‫عزاضی‬ ٍ ‫ًَیسی‬ ِ‫ثزًبه‬ ‫کٌیذ‬ ‫دقز‬ .‫دزداخز‬ ‫خَاّین‬ ‫ًَیسی‬ ِ‫ثزًبه‬ ٍ ‫ثؼذی‬ ‫هجبضث‬ ِ‫ث‬
.‫رسین‬ ‫هی‬ ‫سز‬ ِ‫دیطزفش‬ ‫هزاضل‬ ِ‫ث‬ ‫سذریح‬ ِ‫ث‬ ٍ ُ‫کزد‬ ‫ضزٍع‬ ‫عزاضی‬ ‫هجبًی‬ ‫اس‬ ‫ایٌدب‬ ‫در‬ ‫هب‬ ِ‫ک‬ ‫ّسشٌذ‬ ‫هشفبٍر‬
‫بگیرید‬ ‫یاد‬ ‫را‬ ‫اس‬ ‫اس‬ ‫سی‬ ،‫استرپ‬ ‫بوت‬ ‫مثل‬ ‫هایی‬ ‫ورک‬ ‫فریم‬ ‫وجود‬ ‫با‬ ‫که‬ ‫دارد‬ ‫ضرورتی‬ ‫چه‬
‫سط‬ ‫کوی‬ ‫اگز‬ِ‫ک‬ ‫دارًذ‬ ‫ٍخَد‬ ‫اسشزح‬ ‫ثَر‬ ‫هبًٌذ‬ ‫قذرسوٌذی‬ ‫ّبی‬ ‫ٍرک‬ ‫فزین‬ ‫اکٌَى‬ ‫ّن‬ ِ‫ک‬ ‫ضذ‬ ‫خَاّیذ‬ ِ‫هشَخ‬ ‫ثبضیذ‬ ُ‫کزد‬ ‫قیق‬
‫ثغَر‬ ‫ّب‬ ‫دیَایس‬ ِ‫ّو‬ ‫در‬ ِ‫ک‬ ‫داضز‬ ‫خَاّین‬ ‫را‬ ‫سز‬ ٌِ‫ثْی‬ ‫عزضی‬ ‫هب‬ ِ‫ایٌک‬ ‫ضوي‬ ‫هیذٌّذ‬ ‫افشایص‬ ‫را‬ ‫عزاضی‬ ‫سیجبیی‬ ٍ ‫سزػز‬
‫دی‬ ‫ثزایشبى‬ ‫سَال‬ ‫ایي‬ ‫ضبیذ‬ ،‫ثَد‬ ‫خَاّذ‬ ُ‫هطبّذ‬ ‫قبثل‬ ‫اسشبًذارد‬‫ًیش‬ ‫را‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ثبیذ‬ ‫هب‬ ‫ّب‬ ‫ٍرک‬ ‫فزین‬ ‫ٍخَد‬ ‫ثب‬ ‫ززا‬ ِ‫ک‬ ‫ثیبیذ‬ ‫ص‬
‫قغغ‬ ِ‫ک‬ ‫ثگَین‬ ‫ثبیذ‬ ‫دبسخ‬ ‫در‬ .‫هیذّذ‬ ‫اًدبم‬ ‫سز‬ ‫قَی‬ ‫خیلی‬ ‫ضکل‬ ِ‫ث‬ ‫را‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫کبر‬ ‫اسشزح‬ ‫ثَر‬ ‫ٍرک‬ ‫فزین‬ ِ‫زًَک‬ ‫ثگیزین‬ ‫فزا‬
‫هی‬ ‫ثیطشزی‬ ‫سزػز‬ ‫ثب‬ ‫ثبضیذ‬ ِ‫داضش‬ ‫کبفی‬ ‫سسلظ‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫یؼٌی‬ ‫ٍرک‬ ‫فزین‬ ‫سثبى‬ ‫اغل‬ ‫ثز‬ ِ‫ک‬ ‫سهبًی‬ ‫ضوب‬‫آى‬ ‫دسشَرار‬ ‫سَاًیذ‬
‫سزیؼب‬ ‫داضز‬ ‫خَاّیذ‬ ‫را‬ ‫قذرر‬ ‫ایي‬ ٍ ‫ثَد‬ ‫ًخَاّیذ‬ ‫هطکالر‬ ‫درگیز‬ ‫سیبد‬ ‫یبثی‬ ‫ػیت‬ ‫ثطث‬ ‫در‬ ‫آى‬ ‫اس‬ ‫هْوشز‬ ٍ ‫ثیبهَسیذ‬ ‫را‬ ‫ٍرک‬ ‫فزین‬
‫هبًَر‬ ‫سَاًیذ‬ ‫هی‬ ٍ ‫داد‬ ‫خَاّذ‬ ‫ضوب‬ ِ‫ث‬ ‫را‬ ‫ثیطشزی‬ ‫قذرر‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫داضشي‬ ‫یبد‬ ِ‫ایٌک‬ ‫ضوي‬ ‫کٌیذ؛‬ ‫ػیت‬ ‫رفغ‬ ‫را‬ ‫هطکالر‬
‫اًدبم‬ ‫عزاضی‬ ‫در‬ ‫ثیطشزی‬.‫اسز‬ ‫خبرج‬ ‫ٍرک‬ ‫فزین‬ ‫دسز‬ ‫اس‬ ‫قذرر‬ ِ‫ک‬ ‫هَاقؼی‬ ‫در‬ ‫دّیذ‬

6. ‫ال‬ ‫ام‬ ‫تی‬ ‫اچ‬ ‫استاودارد‬ ‫طبق‬ ‫وب‬ ‫صفحه‬ ‫ساختار‬5
‫اسز‬ ‫هخشلفی‬ ‫ّبی‬ ‫ثخص‬ ‫دارای‬ ‫ٍة‬ ِ‫غفط‬ ‫یک‬‫سوبهی‬ ِ‫ک‬ ‫فَسز‬ ٍ ‫ثبر‬ ‫سبیذ‬ ،‫هطشَا‬ ‫ًوبیص‬ ‫ثزای‬ ‫قسوشی‬ ،‫سبیز‬ ‫ّذر‬ ‫ثخص‬ ‫یک‬ ،
:‫کٌیذ‬ ُ‫هطبّذ‬ ‫سَاًیذ‬ ‫هی‬ ‫سیز‬ ‫سػَیز‬ ‫در‬ ‫را‬ ‫ّب‬ ‫قسوز‬ ‫ایي‬
‫هفَْهی‬ ٍ ‫سوبًشیک‬ ‫سبخشبر‬ ،‫هیکٌیذ‬ ُ‫هطبّذ‬ ِ‫ک‬ ‫سبخشبری‬HTML5‫قبثل‬ ‫کبهال‬ ‫ًیش‬ َ‫خسشد‬ ‫ّبی‬ ‫هَسَر‬ ‫ثزای‬ ِ‫ک‬ ‫ثبضذ‬ ‫هی‬
.‫دزداسین‬ ‫هی‬ ‫قسوز‬ ‫ّز‬ ‫کبهل‬ ‫سَضیص‬ ِ‫ث‬ ِ‫اداه‬ ‫در‬ .‫اسز‬ ‫درک‬
Header‫غفطب‬ ‫سوبهی‬ ‫ثبالی‬ ‫در‬ ‫قسوز‬ ‫ایي‬ ،‫هیطَد‬ ُ‫داد‬ ‫ًوبیص‬ ‫آى‬ ‫در‬ ‫سبیز‬ ‫کلی‬ ‫سَضیطبر‬ ٍ ‫سبیز‬ ‫ػٌَاى‬ ِ‫ک‬ ‫قسوشی‬ :‫ر‬
.‫ثبضذ‬ ‫سَاًذ‬ ‫هی‬ ‫ًیش‬ ‫ػکس‬ ‫ضبهل‬ ِ‫ک‬ ‫دارد‬ ‫ٍخَد‬
Nav‫ایٌدب‬ ‫در‬ ‫را‬ ‫هب‬ ‫ثب‬ ‫سوبس‬ ،‫هب‬ ُ‫درثبر‬ ،‫اغلی‬ ِ‫غفط‬ ‫قجیل‬ ‫اس‬ ‫ّبیی‬ ‫لیٌک‬ ‫سَاًین‬ ‫هی‬ ٍ ‫ضَد‬ ‫هی‬ ‫سبیز‬ ‫اغلی‬ ‫هٌَی‬ ‫ضبهل‬ ‫ًبٍثبر‬ :
.‫دّین‬ ‫قزار‬

7. Aside:‫عزاش‬ ‫ًظز‬ ِ‫ث‬ ِ‫ثسش‬ ‫را‬ .. ٍ ‫هغبلت‬ ‫آخزیي‬ ،‫ّب‬ ‫لیٌک‬ ،‫سَاًذ‬ ‫هی‬ ِ‫ک‬ ‫ثبضذ‬ ‫هی‬ ‫سبیز‬ ‫کٌبری‬ ٌَ‫ه‬.‫ضَد‬ ‫ضبهل‬ ‫را‬‫ّوسٌیي‬
‫درٍى‬ ‫سَاًٌذ‬ ‫هی‬ ‫ًیش‬ ‫هزسجظ‬ ‫ّبی‬ ‫لیٌک‬ ‫یب‬ ‫دسز‬ ُ‫ًَیسٌذ‬ ‫درهَرد‬ ‫سَضیطبر‬ ‫هثل‬ ‫دسز‬ ‫یک‬ ‫در‬ ‫دارًذ‬ ‫کوشزی‬ ‫اّویز‬ ِ‫ک‬ ‫هغبلجی‬
.‫ضًَذ‬ ‫سبسی‬ ‫خبی‬ ‫سگ‬ ‫ایي‬
Section( ‫هطشَا‬ ‫سوبم‬ ِ‫ک‬ ‫کلی‬ ‫سٌذ‬ ‫یک‬ ‫یب‬ ‫کبدر‬ ‫یک‬ ‫ایدبد‬ ‫ثزای‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫قجلی‬ ‫ٍرصى‬ ‫در‬ :Content‫ثگیزًذ‬ ‫قزار‬ ‫آى‬ ‫درٍى‬ )
‫اس‬div‫یک‬ ‫خَد‬ ‫هطشَای‬ ‫ثزای‬ ‫هب‬ ‫ٍة‬ ‫غفطبر‬ ‫ضذى‬ ‫سز‬ ‫سوبًشیک‬ ‫ثزای‬ ‫اکٌَى‬ ‫ّن‬ ‫اهب‬ ،‫هیکزدین‬ ُ‫اسشفبد‬section‫سؼزیف‬ ‫کلی‬
ُ‫هطبّذ‬ ‫رًگ‬ ‫سجش‬ ‫قسوز‬ ‫ثبال‬ ‫ضکل‬ ‫در‬ ِ‫ک‬ .‫کٌین‬ ‫سؼزیف‬ ‫را‬ ‫دیگزی‬ ‫هخشلف‬ ‫ّبی‬ ‫سکطي‬ ‫سَاًین‬ ‫هی‬ ‫ًیش‬ ‫آى‬ ‫درٍى‬ ٍ ‫هیکٌین‬
‫ًی‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬ ٍ ‫هیکٌیذ‬.‫ضَد‬ ‫هی‬ ِ‫ارائ‬ ‫ثیطشزی‬ ‫سَضیطبر‬ ‫ش‬
Article:‫ػٌػز‬ ‫ایي‬‫ثَخَد‬ )ِ‫غفط‬ ‫ثَدى‬ ‫(سوبًشیک‬ ‫ضذى‬ ‫سز‬ ‫هفَْهی‬ ‫خْز‬ ‫فقظ‬ ٍ ‫ًذارد‬ ‫کبرثزدی‬ ‫خَد‬ ‫خَدی‬ ِ‫ث‬ )‫سگ‬ ‫(یب‬
‫اغلی‬ ‫قسوز‬ ‫ضًَذ‬ ِ‫هشَخ‬ َ‫خسشد‬ ‫ّبی‬ ‫هَسَر‬ ‫سب‬ ‫ثگیزًذ‬ ‫قزار‬ ‫سگ‬ ‫ایي‬ ‫درٍى‬ ‫سبیز‬ ‫هغبلت‬ ِ‫ک‬ ‫هیکٌین‬ ‫هطخع‬ ‫هب‬ ،‫اسز‬ ُ‫آهذ‬
‫کد‬ ‫قبلت‬ ‫در‬ ‫هب‬ ‫هغلت‬.‫بسز‬
Footer‫اعالػبسی‬ ‫ضبهل‬ ِ‫ک‬ ‫ضَد‬ ‫هی‬ ُ‫داد‬ ‫ًوبیص‬ ‫سبیز‬ ‫غفطبر‬ ‫سوبم‬ ‫دبییي‬ ‫در‬ ‫فَسز‬ ،‫ثبضذ‬ ‫هی‬ ‫سٌذ‬ ‫یک‬ ‫فَسز‬ ُ‫دٌّذ‬ ‫ًطبى‬ :
.‫اسز‬ ..ٍ ‫هب‬ ‫ثب‬ ‫سوبس‬ ،‫رایز‬ ‫کذی‬ ‫ّوسَى‬

8. !‫جهان‬ ‫سالم‬
‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫هقذهبسی‬ ٍ ُ‫سبد‬ ‫سٌذ‬ ‫یک‬ ‫کذ‬ ًَِ‫ًو‬ ‫ایٌدب‬ ‫در‬5‫هؼزٍف‬ ‫هثبل‬ ‫ّوبى‬ ٍ ‫ًَیسین‬ ‫هی‬ ‫را‬Hello World!‫ًوبیص‬ ‫را‬
.‫دّین‬ ‫هی‬
<!DOCTYPE html>
<html>
<head>
<title>MihanLearn</title>
</head>
<body>
<h1>Hello World!</h1>
<p>My first paragraph.</p>
</body>
</html>
‫قزار‬ ‫آى‬ ‫درٍى‬ ‫هطشَای‬ ٍ ‫ضَد‬ ‫هی‬ ‫ثبس‬ ‫ٍقشی‬ ‫سگ‬ ‫ّز‬ ،‫هیکٌین‬ ‫کبر‬ ‫ّب‬ ‫سگ‬ ‫یب‬ ‫ػٌبغز‬ ‫ثب‬ ‫هب‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫در‬‫ثبیذ‬ ‫ًْبیز‬ ‫در‬ ‫هیگیزد‬
(‫سگ‬ ‫اس‬ ‫ثؼضی‬ ‫ثدش‬ ‫ضَد‬ ِ‫ثسش‬Tag.‫ضًَذ‬ ‫هی‬ ‫هؼزفی‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬ ٍ ‫ّسشٌذ‬ ‫اسشثٌب‬ ِ‫ک‬ ‫)ّب‬‫سی‬ ‫اذ‬ ِ‫غفط‬ ِ‫ک‬ ‫سگ‬ ‫سزیي‬ ‫هْن‬
‫سگ‬ ‫گیزًذ‬ ‫هی‬ ‫قزار‬ ‫آى‬ ‫درٍى‬ ‫ػٌبغز‬ ‫سوبهی‬ ٍ ُ‫کزد‬ ‫ایدبد‬ ‫را‬ ‫ال‬ ‫ام‬<html>‫سگ‬ ‫ثیي‬ ‫در‬ ‫سذس‬ .‫اسز‬head‫قزار‬ ‫ػٌبغزی‬
‫آًْب‬ ‫ًذارین‬ ‫قػذ‬ ِ‫ک‬ ‫هیگیزًذ‬‫اس‬ ‫سی‬ ‫یب‬ ‫خبٍا‬ ‫ّبی‬ ‫کذ‬ ‫هثل‬ ‫ّسشٌذ‬ ‫کبر‬ ِ‫ث‬ ‫هطغَل‬ ٌِ‫غط‬ ‫دطز‬ ‫در‬ ‫ٍلی‬ ‫دّین‬ ‫ًطبى‬ ‫کبرثزاى‬ ِ‫ث‬ ‫را‬
‫سگ‬ ‫ثیي‬ ‫در‬ ‫ّوسٌیي‬ .‫ّب‬ ‫هشبسگ‬ ٍ ‫اس‬body.‫آهذ‬ ‫خَاٌّذ‬ ‫در‬ ‫ًوبیص‬ ِ‫ث‬ ‫کبرثز‬ ‫هزٍرگز‬ ‫در‬ ‫یک‬ ِ‫ث‬ ‫یک‬ ِ‫ک‬ ‫هیگزًذ‬ ‫قزار‬ ‫ػٌبغزی‬
‫ثب‬ ِ‫ک‬ ‫هیکٌیذ‬ ُ‫هطبّذ‬ ‫کذ‬ ‫در‬DOCTYPE‫سٌذ‬ ‫یک‬ ‫ایي‬ ‫یؼٌی‬ ،‫اسز‬ ُ‫ضذ‬ ‫ضزٍع‬‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬5:‫اسز‬
.‫ضَد‬ ‫هی‬ ُ‫داد‬ ‫سَضیص‬ ‫کبهل‬ ‫ثغَر‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬ ‫ّب‬ ‫کذ‬ ِ‫اداه‬

9. ‫دوم‬ ‫قسمت‬
‫تگ‬ ‫درون‬Head‫گیرد‬ ‫می‬ ‫قرار‬ ‫چه‬
‫هزٍرگز‬ ‫در‬ ‫اهب‬ ‫ضًَذ‬ ‫هی‬ ‫هزثَط‬ ‫هب‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫سٌذ‬ ِ‫ث‬ ِ‫ک‬ ‫هیگزد‬ ‫قزار‬ ‫ػٌبغزی‬ ‫سگ‬ ‫ایي‬ ‫درٍى‬ ِ‫ک‬ ‫کزدین‬ ُ‫اضبر‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬
‫ضًَذ‬ ‫ًوی‬ ُ‫داد‬ ‫ًوبیص‬ِ‫ث‬ ..‫کٌیذ‬ ِ‫سَخ‬ ‫سیز‬ ‫ّبی‬ ًَِ‫ًو‬
‫ها‬ ‫متاتگ‬:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web Tutorials">
<meta name="keywords" content="HTML,CSS,PHP,JavaScript">
<meta name="author" content="Saeed Hakimi">
</head>
ُ‫کزد‬ ‫هطخع‬ ‫ایٌدب‬ ‫در‬ ‫هشبسگ‬ ‫اٍلیي‬‫اسز‬‫اسشبًذارد‬ ‫عجق‬ ِ‫غفط‬ ‫ایي‬ ِ‫ک‬UTF-8‫ثز‬ ‫هطکل‬ ‫ایي‬ ِ‫ث‬ ‫سیبد‬ ِ‫گذضش‬ ‫در‬ ،‫ثبضذ‬ ‫هی‬
‫ّبی‬ ِ‫ًَضش‬ ‫هشبسگ‬ ‫ایي‬ ‫دادى‬ ‫قزار‬ ‫اس‬ ‫دس‬ ‫اهب‬ ‫ثَد‬ ِ‫ریخش‬ ‫ثْن‬ ٍ ‫ضذ‬ ‫ًوی‬ ُ‫داد‬ ‫ًوبیص‬ ِ‫غفط‬ ‫در‬ ‫فبرسی‬ ‫ّبی‬ ِ‫ًَضش‬ ِ‫ک‬ ‫خَردم‬ ‫هی‬
!‫هیطذ‬ ‫درسز‬ ِ‫غفط‬ ‫سوبم‬
‫هشبسگ‬ ِ‫ک‬ ‫هشبسگ‬ ‫دٍهیي‬description‫کوشز‬ ‫اسشبًذارد‬ ‫عجق‬ ٍ ُ‫کَسب‬ ‫ثػَرر‬ ِ‫ک‬ ‫دّذ‬ ‫هی‬ ‫ًطبى‬ ‫را‬ ‫سبیز‬ ‫سَضیطبر‬ ‫ثبضذ‬ ‫هی‬
‫اس‬160‫ػٌَاى‬ ‫سیز‬ ‫قسوز‬ ‫در‬ ‫ضَد‬ ‫هی‬ ُ‫داد‬ ‫ًوبیص‬ ‫ضَد‬ ‫هی‬ َ‫خسشد‬ ‫هب‬ ‫سبیز‬ ‫ٍقشی‬ ‫گَگل‬ ‫در‬ ‫سَضیطبر‬ ‫ایي‬ .‫ثبضذ‬ ‫ثبیذ‬ ‫کبراکشز‬
َ‫خ‬ ‫سبیز‬ ‫کلیذ‬ ‫کلوبر‬ ‫هْوشزیي‬ ‫سَاًین‬ ‫هی‬ ‫هب‬ ٍ ‫اسز‬ ‫هَثز‬ ‫سبیز‬ َ‫سئ‬ ‫در‬ ‫ثسیبر‬ ٍ ‫سبیز‬‫ثزای‬ ،‫کٌین‬ ‫خبسبسی‬ ‫ایٌدب‬ ‫در‬ ‫را‬ ‫د‬
.‫ضذ‬ ‫خَاّذ‬ ِ‫ارائ‬ ‫ثیطشزی‬ ‫سَضیطبر‬ ‫آهَسضی‬ ‫فیلن‬ ‫در‬ .‫اسز‬ ‫هْن‬ ‫ثسیبر‬ ‫ًیش‬ ‫گَگل‬
‫هشبسگ‬Keywords‫هثل‬ ‫دارین‬ ‫ثیطشزی‬ ‫ّبی‬ ‫هشبسگ‬ ‫ّب‬ ‫ایي‬ ‫ثز‬ ٍُ‫ػال‬ .‫هیکٌذ‬ ‫هطخع‬ ‫را‬ ِ‫غفط‬ ‫ثب‬ ‫هزسجظ‬ ‫کلیذی‬ ‫کلوبر‬ ‫ًیش‬
‫هشب‬Geo‫ّوگی‬ ‫اهب‬ ‫اسز‬ ‫سبیز‬ ‫فؼبلیز‬ ‫هطل‬ ُ‫کٌٌذ‬ ‫هطخع‬ ِ‫ک‬‫ثدش‬ ‫ًیسشٌذ‬ ‫هْن‬ ٍ ‫ضزٍری‬ ‫هب‬ ‫ثزای‬charset،
descriotionٍkeywords.‫دّین‬ ‫قزار‬ ِ‫غفط‬ ‫در‬ ‫ضشوب‬ ‫اسز‬ ‫ثْشز‬ ِ‫ک‬
:‫سیز‬ ًَِ‫ًو‬ ‫هثل‬ ‫ّب‬ ‫هشبسگ‬ ‫اس‬ ‫ثزخی‬
<meta http-equiv="refresh" content="30">
ِ‫ث‬‫سبیز‬‫ّز‬ ‫ضَد‬ ‫هی‬ ‫ثبػث‬ ‫هشب‬ ‫ایي‬ ‫هثبل‬ ‫ثؼٌَاى‬ ،‫دارًذ‬ ‫کبر‬ ‫سٌظیوبر‬00‫کبرثز‬ ِ‫ث‬ ‫دادى‬ ‫ًوبیص‬ ‫ضبل‬ ‫در‬ ِ‫ک‬ ‫ای‬ ِ‫غفط‬ ‫یکجبر‬ ِ‫ثبًی‬
.‫ضَد‬ ‫ثبرگذاری‬ ‫هدذد‬ ‫یب‬ ‫ضَد‬ ‫رفزش‬ ‫اسز‬

10. ‫عنوان‬ ‫تگ‬:
<title> Title – Welcome MihanLearn.net</title>
‫ّبی‬ ‫سگ‬ ‫ثیي‬ ‫در‬ ِ‫ک‬ ‫دیگزی‬ ‫ػٌػز‬Head‫ػٌػز‬ ،‫هیگیزد‬ ‫قزار‬title‫هطخع‬ ‫را‬ ِ‫غفط‬ ‫ػٌَاى‬ ‫سَاًین‬ ‫هی‬ ‫آى‬ ‫کوک‬ ِ‫ث‬ ِ‫ک‬ ‫اسز‬
( ‫هزٍرگز‬ ‫سزثزگ‬ ‫در‬ ِ‫ک‬ ‫ػٌَاًی‬ ،‫کٌین‬browser tabِ‫ث‬ َ‫خسشد‬ ‫ّبی‬ ‫هَسَر‬ ‫در‬ ِ‫ک‬ ‫ػٌَاًی‬ ٍ ‫هیطَد‬ ُ‫داد‬ ‫ًوبیص‬ ‫کبرثز‬ ِ‫ث‬ )
.‫آهذ‬ ‫خَاّذ‬ ‫در‬ ‫ًوبیص‬
‫اس‬ ‫اس‬ ‫سی‬ ‫نویسی‬ ‫کد‬:
<style>
body {background-color: blue;}
h1 {color: red;}
p {color: blue;}
</style>
‫ثیي‬ ‫ّبیی‬ ‫زیش‬ ِ‫ز‬ ِ‫ک‬ ‫کٌین‬ ُ‫اضبر‬ ‫هغلت‬ ‫ایي‬ ِ‫ث‬ ِ‫ک‬ ‫ثَد‬ ‫ضزٍری‬ ‫آهَسش‬ ‫اس‬ ‫قسوز‬ ‫ایي‬ ‫در‬head‫ایي‬ ‫اغل‬ ًِ‫گز‬ ٍ ‫هیگیزًذ‬ ‫قزار‬
.‫ضَد‬ ‫هی‬ ُ‫داد‬ ‫آهَسش‬ ٍ ‫ػٌَاى‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ثطث‬ ‫ضزٍع‬ ‫در‬ ٍ ‫آسی‬ ‫ّبی‬ ‫قسوز‬ ‫در‬ ‫هغلت‬
‫ّب‬ ‫کذ‬ ‫سَاًین‬ ‫هی‬ ‫رٍش‬ ‫زٌذیي‬ ِ‫ث‬ ‫هب‬ ِ‫ک‬ ‫گفز‬ ‫خَاّین‬‫اس‬ ‫یکی‬ ،‫کٌین‬ ‫فزاخَاًی‬ ‫خَد‬ ‫ٍة‬ ِ‫غفط‬ ‫در‬ ٍ ‫ثٌَیسین‬ ‫را‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ی‬
‫در‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ّبی‬ ‫کذ‬ ‫ًَضشي‬ ‫ّب‬ ‫رٍش‬ ‫ایي‬Head‫سگ‬ ‫ثیي‬ ٍ<style></style>‫قسوز‬ ‫در‬ ‫خػَظ‬ ‫ایي‬ ‫در‬ .‫ثبضذ‬ ‫هی‬
.‫ضذ‬ ‫خَاّذ‬ ُ‫داد‬ ‫سَضیص‬ ‫کبهل‬ ‫ثغَر‬ ِ‫هزثَع‬
‫لینک‬ ‫تگ‬:
<link rel="stylesheet" href="mystyle.css">
‫سگ‬link‫فبیل‬ ‫فزاخَاًی‬ ‫خْز‬.css‫ثٌَیسین‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫فبیل‬ ‫درٍى‬ ‫را‬ ‫ّب‬ ‫کذ‬ ‫ثبال‬ ‫رٍش‬ ‫ّوبًٌذ‬ ِ‫ایٌک‬ ‫ثدبی‬ ،‫هیطَد‬ ُ‫اسشفبد‬
ُ‫اسشفبد‬ ِ‫غفط‬ ‫در‬ ‫آًْب‬ ‫اس‬ ٍ ‫هیکٌین‬ ‫فزاخَاًی‬ ‫خَد‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ِ‫غفط‬ ِ‫ث‬ ًَِ‫ایٌگ‬ ٍ ِ‫ًَضش‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫فبیل‬ ‫یک‬ ‫در‬ ‫را‬ ‫اًْب‬
‫کذًَیس‬ ‫ّبی‬ ‫رٍش‬ ‫اس‬ ‫یکی‬ ‫ًیش‬ ‫رٍش‬ ‫ایي‬ .‫هیکٌین‬‫ضذ‬ ِ‫گفش‬ ِ‫ک‬ ‫ّوبًغَر‬ ‫خػَظ‬ ‫ایي‬ ‫در‬ ٍ ‫اسز‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ی‬ٍ ‫اش‬ ‫هَقغ‬ ِ‫ث‬
.‫کزدین‬ ‫هی‬ ُ‫اضبر‬ ‫ثبیذ‬ ‫آهَسش‬ ‫اسشبًذارد‬ ‫ثزضست‬ ‫ایٌدب‬ ‫در‬ ٍ ‫ضذ‬ ‫خَاّذ‬ ُ‫داد‬ ‫کبهل‬ ‫سَضیطبر‬ ‫ثؼذی‬ ‫ّبی‬ ‫قسوز‬ ‫در‬
‫جاوا‬ ‫نویسی‬ ‫کد‬:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Welcome to MihanLearn.NET!";
}
</script>

11. ‫کذ‬ ‫سَاًین‬ ‫هی‬ ‫ّن‬ ٍ ‫ضَد‬ ‫فزاخَاًی‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ِ‫غفط‬ ‫در‬ ٍ ِ‫ًَضش‬ ‫خبرخی‬ ‫فبیل‬ ‫در‬ ‫سَاًذ‬ ‫هی‬ ‫ّن‬ ‫اس‬ ‫اس‬ ‫سی‬ ‫ّوبًٌذ‬ ‫ًیش‬ ‫خبٍا‬
‫سگ‬ ٍ ‫ِذ‬ّ ‫درٍى‬ ‫را‬ ‫خبٍا‬ ‫ّبی‬<script></script>.‫ثٌَیسین‬
‫ًبم‬ ِ‫ث‬ ‫دارد‬ ‫ٍخَد‬ ‫ًیش‬ ‫دیگز‬ ‫ػٌػز‬ ‫یک‬ ‫ّوسٌیي‬baseٍ‫در‬ ِ‫ک‬ٍ ‫ًذارد‬ ‫زٌذاًی‬ ‫کبرثزد‬ ‫ػٌػز‬ ‫ایي‬ ِ‫الجش‬ ،‫ضَد‬ ‫هی‬ ‫سؼزیف‬ ‫ِذ‬ّ ‫ى‬
‫داخل‬ ِ‫ک‬ ‫ّبیی‬ ‫سگ‬ ‫سوبم‬ ‫هدوَع‬ ‫در‬ .‫ام‬ ُ‫ًکزد‬ ُ‫اسشفبد‬ ‫ضبل‬ ِ‫ث‬ ‫سب‬ ُ‫ثٌذ‬<head>.‫ضذ‬ ‫هؼزفی‬ ‫آیٌذ‬ ‫هی‬ ‫سبیز‬
ِ‫ک‬ ‫ثبضیذ‬ ُ‫ضذ‬ ِ‫هشَخ‬ ‫کبهال‬ ‫کٌن‬ ‫فکز‬ ‫اکٌَى‬Head‫سٌذ‬ ‫در‬ ‫را‬ ‫ػولی‬ ِ‫ز‬ ‫دقیقب‬html.‫دارد‬ ‫کبرثزدی‬ ِ‫ز‬ ٍ ‫دّذ‬ ‫هی‬ ‫اًدبم‬

12. ‫در‬ ‫خصوصیت‬ ‫یا‬ ‫صفت‬HTML
‫سگ‬ ‫یک‬ ‫سَسظ‬ ‫هیکٌذ‬ ُ‫هطبّذ‬ ‫کبرثز‬ ِ‫ک‬ ‫هزٍرگز‬ ِ‫غفط‬ ‫رٍی‬ ‫ػٌػز‬ ‫ّز‬ ِ‫ک‬ ‫هیذاًین‬ ‫اکٌَى‬ ‫ّن‬ ٍ ‫ضذین‬ ‫آضٌب‬ ‫ػٌبغز‬ ‫یب‬ ‫ّب‬ ‫سگ‬ ‫ثب‬
..ٍ ‫سػبٍیز‬ ،‫ّب‬ ‫کبدر‬ ،‫ّب‬ ‫فزم‬ ‫هثبل‬ ‫ثؼٌَاى‬ ‫اسز؛‬ ُ‫ضذ‬ ‫ایدبد‬ ‫ًَیسی‬ ‫کذ‬ ‫در‬
‫سگ‬ ‫هثبل‬ ‫(ثؼٌَاى‬ ‫سگ‬ ‫یک‬ ‫ثب‬ ‫فقظ‬ ‫آیب‬ ‫کٌین‬ ‫ایدبد‬ ‫کبدر‬ ‫یک‬ ‫هیخَاّین‬ ِ‫ک‬ ‫کٌیذ‬ ‫فزؼ‬ ‫ضبال‬Section‫ًظز‬ ‫هَرد‬ ‫کبدر‬ ‫سَاًین‬ ‫هی‬ )
‫کٌین؟‬ ‫ایدبد‬ ‫را‬
ٍ ‫خیز‬ ‫یب‬ ‫دارد‬ ِ‫ضبضی‬ ‫ایب‬ ،‫رًگ‬ ،‫ػزؼ‬ ،‫ارسفبع‬ ‫هثبل‬ ‫ثؼٌَاى‬ ‫دارد‬ ‫خػَغیبسی‬ ‫یک‬ ‫کبدر‬ ‫ّز‬ ‫زَى‬ ،‫اسز‬ ‫خیز‬ ‫خَاة‬ ِ‫ک‬ ‫اسز‬ ‫ٍاضص‬
‫د‬ ‫ثبیذ‬ ‫آى‬ ‫هطخػبر‬ ‫سبیز‬‫ّز‬ ‫ثذاًین‬ ‫ثبیذ‬ ِ‫ک‬ ‫ایٌدبسز‬ ‫دس‬ .‫کٌذ‬ ‫سزسین‬ ‫را‬ ‫ًظز‬ ‫هَرد‬ ‫کبدر‬ ‫ثشَاًذ‬ ‫هزٍرگز‬ ‫سب‬ ‫ضَد‬ ‫هطخع‬ ‫قیقب‬
Tag.‫دارد‬ ‫غفبر‬ ‫یب‬ ‫خػَغیبر‬ ‫سزی‬ ‫یک‬
<a href="http://www.mihanlearn.net" target="_blank">MihanLearn.net</a>
‫سگ‬ ‫ایٌدب‬ ‫در‬aِ‫ًَضش‬ ‫هب‬ ‫ثبال‬ ‫در‬ ‫یؼٌی‬ ،‫اسز‬ ‫لیٌک‬ ُ‫کٌٌذ‬ ‫ایدبد‬ ‫سگ‬ ِ‫ک‬ ‫ثیٌیذ‬ ‫هی‬ ‫را‬MihanLearn.net‫این‬ ُ‫کزد‬ ‫لیٌک‬ ‫را‬
‫آدرس‬ ِ‫ث‬www.MihanLearn.net‫در‬ ِ‫ک‬ ‫قسوشی‬ .‫ضَد‬ ‫هٌشقل‬ ‫هب‬ ‫ادرس‬ ِ‫ث‬ ‫کزد‬ ‫کلیک‬ ِ‫ًَضش‬ ‫رٍی‬ ‫کبرثز‬ ِ‫ک‬ ‫درغَرسی‬ ‫سب‬
‫سگ‬ ‫خػَغیبر‬ ‫یب‬ ‫ّب‬ ‫غفز‬ ‫ّوبى‬ ‫این‬ ُ‫کزد‬ ‫درضز‬ ‫ثبال‬ ‫کذ‬a‫ثگَیین‬ ‫ثخَاّین‬ ‫سز‬ ‫ٍاضص‬ .‫ثبضٌذ‬ ‫هی‬a‫هیخَاّین‬ ِ‫ک‬ ‫گَیذ‬ ‫هی‬
‫غفز‬ ‫سذس‬ ٍ ‫کٌین‬ ‫ایدبد‬ ‫لیٌک‬ ‫یک‬href‫غفز‬ ٍ ‫ای‬ ِ‫غفط‬ ِ‫ز‬ ِ‫ث‬ ِ‫ک‬ ‫هیکٌذ‬ ‫هطخع‬target‫هی‬‫ثبس‬ ‫ضکل‬ ِ‫ز‬ ِ‫ث‬ ِ‫ک‬ ‫گَیذ‬
‫هثل‬ ‫کٌین‬ ‫هطخع‬ ‫سَاًین‬ ‫هی‬ ِ‫ک‬ ‫غفبسی‬ ‫سبیز‬ ٍ ،‫هزٍرگز‬ ‫در‬ ‫ای‬ ًِ‫خذاگب‬ ‫سزثزگ‬ ‫در‬ ‫یب‬ ِ‫غفط‬ ‫ّویي‬ ‫در‬ ،‫لیٌک‬ ‫ایي‬ ‫ضَد‬title
.ُ‫غیز‬ ٍ
:‫هثبل‬ ‫ثؼٌَاى‬ ،‫کٌین‬ ‫سؼزیف‬ ‫را‬ ‫غفبسی‬ ‫سَاًین‬ ‫هی‬ ‫ال‬ ‫ام‬ ‫سی‬ ‫اذ‬ ‫در‬ ‫سگ‬ ‫ّز‬ ‫ثزای‬
<img src="http://www.mihanlearn.net/images/logo.png" height="130px" width="100px">
‫سگ‬ ‫یب‬ ‫ػٌػز‬ ‫ایٌدب‬ ‫در‬img‫را‬ ‫ػکس‬ ‫هسشقین‬ ‫ادرس‬ ،‫دّذ‬ ‫ًوبیص‬ ‫ٍة‬ ِ‫غفط‬ ‫در‬ ‫را‬ ‫سػَیز‬ ‫یک‬ ‫هیخَاّذ‬ ِ‫ک‬ ‫کٌیذ‬ ‫هی‬ ُ‫هطبّذ‬ ‫را‬
‫غفز‬ ‫در‬src‫غفز‬ ‫در‬ ‫را‬ ‫آى‬ ‫ارسفبع‬ ٍ ‫این‬ ُ‫داد‬ ‫قزار‬height‫غفز‬ ‫در‬ ‫را‬ ‫آى‬ ‫ػزؼ‬ ٍ ‫دیکسل‬ ‫ثزضست‬widthُ‫کزد‬ ‫هطخع‬
.‫این‬
َ‫الگ‬ ‫ّب‬ ‫هثبل‬ ‫ّویي‬ ‫اس‬ ‫ضبال‬ .‫کٌین‬ ُ‫اسشفبد‬ ‫آًْب‬ ‫اس‬ ‫ثبیذ‬ ًَِ‫زگ‬ ٍ ‫ضَد‬ ‫هی‬ ُ‫اسشفبد‬ ِ‫ز‬ ‫غفبر‬ ‫اس‬ ِ‫ک‬ ‫افشبد‬ ‫خب‬ ‫ثزایوبى‬ ‫کبهال‬ ‫دس‬
‫سگ‬ ‫اس‬ ُ‫اسشفبد‬ ‫ثب‬ ‫هثبل‬ ‫ثؼٌَاى‬ ‫کٌیذ‬ ُ‫اسشفبد‬ ‫ّب‬ ‫سگ‬ ‫سبیز‬ ‫در‬ ٍ ‫ثگیزیذ‬sectionُ‫اًذاس‬ ِ‫ث‬ ‫کبدر‬ ‫یک‬500‫در‬ ‫دیکسل‬500
‫سج‬ ٌِ‫سهی‬ ‫رًگ‬ ‫ثب‬ ‫کٌیذ‬ ‫ایدبد‬ ‫دیکسل‬.‫ش‬