کارگاه آموزشی

طراحی صفحات وب

مرکز فناوری اطالعات و ارتباطات دانشگاه الزهرا

1392تیر

وب سایت چیست ؟

سایت ی1ا وب س1ایت )وب گ1اه، تارگ1اه ، تارنم1ا (مجم1وعه ای از ص1فحات وب اس1ت ک1ه •

دارای1 ی1ک دا1من1ه اینترن1ت1ی اس1ت و ب1ه ص1ورت مجموع1ه ي س1اختاريافته اي از داده ه1ا در

این1ترنت ق1رار ق1ا1لب 1متن، ص1دا،1 تص1ویر1 و فیلم،1 روی آن ه1ا ارائ1ه می ش1ود و روی ش1بکه

می1 گیرد1.

H ب1ه ص1ورت • نوش1ته می ش1ود و هم1واره ب1ا اس1تفاده از HTMLاین ص1فحات معم1وًال

می 1توان ب1ه آن1 دسترسی پیدا کرد.HTTP1پروت1کل

ک1اربر منتق1ل می کن1د ت1ا این Browserب1ه WEBSERVERاین پروتک1ل اطالع1ات را از •

ب1رای کاربر نمایش داده شوند. URLاطالعات از 1طریق

طراحی سایت را می توان به انواع مختلفی دسته

بندی کرد. اما به طور کلی وب سایت ها به دو

( ( Static و استاتیک (Dynamic)صورت داینامیک

طراحی می شوند.

انواع وب سایت

این گون1ه وب س1ایت ه1ا در ح1د اطالع رس1انی و ایج1اد لین1ک و مش1اهده ی1ک س1ری مت1ون و تص1اویر ث1ابت می باش1د

وق1ا1بلی1ت ذ1خ1یره پ1ایگ1اه دا1ده 1، اع1م1ال مح1س1با1تی، عض1وگیری و 1... را ن1دارد. تغ1ی1یر اطالع1ات آن تو1س1ط ش1خص و ب1ا

نرم1 افز1ارهای وی1رایش صور1ت می گیرد.

بن1ابراین ث1ابت اس1تفاده می ش1ود از ک1د در ط1راحی س1ایتهای بارگ1ذاری )حجم کم1تری ب1اًالیی Loadingس1رعت )

و1ه 1ب1رای1ن می ش1ود 1از ی1ک 1ه1ا search Engineخوا1ن1ایی 1بیش1تر س1ایت1 توس1ط ک1ه 1ب1ا1عث 1ک1ا1ه1ش ح1جم1 ک1د1ها د1ارن1د. 1عال1

از س1و1ی 1د1یگ1ر1 س1بب 1ب1ه1تر1 1ش1دن 1و1ض1عی1ت1 آنه1ا 1ا1ز1 لح1اظ1 1امتی1از1 1دهی م1و1توره1ای 1جس1تجو 1ی1ا ک1ا1هش1 زم1ان1 1با1رگ1ذ1ار1ی1 س1و و1

" م1ی شود.رنکین1گهمان1 "

به1ره من1دی از س1بب اف1زایش ام1نیت عدم امک1ان ایج1اد تغی1یر در این ن1وع از س1ایتها توس1ط اف1راد ع1ادی عالوه ب1ر

می1 شود. گر1افیک 1و ظاهری زیب1ا

( :staticوب سایت استاتیک یا مانا یا ایستا)

H ب1ا ک1اربران اطالع1ات دادوس1تد می کن1د و اطالع1اتش ب1ه س1رعت وب س1ایتی ک1ه دایم1ا

ت1غی1یر م1ی1 کن1د1 .ا1ص1ل ک1ار 1ای1ن ن1وع 1وب1 س1ایت 1ه1ا روی1 ک1دنویس1ی و ب1رنام1ه نوی1س1ی

می باشد.

را htmlدر واق1ع این ک1د ه1ا ب1ه ص1ورت پش1ت پ1رده پ1ردازش می ش1وند و خ1روجی

نمایش می دهند.

زب1ان برنام1ه نویس1ی وب س1ایتهای پوی1ا میتوان1د براس1اس نی1از متف1اوت باش1د ام1ا عم1دتا

استف1اده می شود.Php و ASP ، ASP.Netاز1 زبانه1ای

Dynamicوب سایت داینامیک یا پویا

برای شروع کار باHTML:به موارد زیر آمده نیاز است

ب1رای ایج1اد و وی1رایش ص1فحات وب می ت1وان از ویرایش1گر متنNotePad ، Microsoft FrontPage و Macromedia Dreamweaver ... و

ک1ه در 1وین1دوز وج1ود د1ارد و ن1ر1م افزا1ره1ایی مانن1د WordPad ام1ا ای1ن نکت1ه 1را بای1د1 در نظ1ر د1اش1ت ک1ه ن1رم اف1زا1ر اس1تفاده ک1رد .

Microsoft Office Word و امث1ال آن ب1رای نوش1تن1 ک1ده1ای HTML منا1س1ب 1نیس1ت1ند چ1ون در هنگ1ا1م ذخ1ی1ره ک1ر1دن متن ای1ن ن1رم

Accessories را1 می 1ت1وان 1از طری1ق من1وی اس1تارت1 در قس1مت Notepadاف1ز1اره1ا1 ک1دهایی1 را ب1ه1 آن اض1ا1فه1 می1 کن1ن1د. ن1ر1م1 اف1زار 1

پیدا کرد.Enter1 1و 1فشار دادن دکمهOpen در ک1اد1ر notepad با تایپRun 1یا1 از 1طریق ف1رم1ان

می ت1وان از مرورگ1ر وب.Microsoft Internet Explorer اس1تفاده ک1رد ک1ه ب1ا وین1دوز نص1ب می ش1ود ی1ا از Opera, Mozilla

Firefox.1دارن11د وج11و1د ای1ن11ترنت در ب11رای 11دانل11ود ر1ایگ11ان ص11ورت ا1غلب 11ب11ه ک11ه مش11اب1ه1 اف1زار1ه11ا1ی ن11رم1 و1

قس1متهایی وج1ود دارد ک1ه مختص ب1ه ی1ک HTMLبه1تر اس1ت ص1فحاتی ک1ه 1نوش1ته می 1ش1ود ب1ا چن1د1 مرورگ1ر 1آزم1ایش ک1رد. زی1را در

مرور1گر خ1اص است و1 با سایر 1مرورگره1ا کار ن1می کند1.

ک1ه می توان1د ج1ایی روی ه1ارد دیس1ک، ی1ک فالپی دیس1ک ی1ا ی1ک س1رور باش1د. البت1ه ب1رای اس1تفاده از فض1ایی ب1رای ذخ1یره ک1ردن فایله1ا

HTML1 از ک1ام1پیوتر در ی1ک1 مرورگ1ر وب1 ا1ز اس1تف1اده ب1ا ت1وان1 و1 می ن1یس1ت1 ب1ه1 1ای1ن1تر1نت اتص1ال1 ب1ه نی1از HTML.اس1تفاده ک1رد

را انتخ1اب ک1رده و مس1یری را Save As گزین1ه File نوش1ته ش1ده ک1افی اس1ت از من1وی Notepadب1ر1ای ذخ1یر1ه1 ک1ردن ف1ایلی ک1ه ب1ا

بنویس1یم. در آخ1ر هم html ن1ام فای1ل را ب1ا پس1و1ند Save As در پ1ا1یین پنج1ره File Nameب1ر1ای ذخ1یره ف1ای1ل ا1نت1خ1اب 1ک1نی1م 1و در ک1ادر

1را کلی1ک کنیم.Save1د1ک1مه

HTMLشروع به کار با

عب1ارتHTML( مخف1ف Hyper Text Markup Language . اس1ت )Html زب1ان

است1اندارد طراحی صفحات وب است.

در ي1ک ص1فحهHTML می ت1وان ان1واع عناص1ر از قبي1ل متن ، تي1تر ، عکس ، ج1دول

و ... را 1قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد.

( دس1تورعمل های این زب1ان، برچس1بTag ن1ام دارن1د ک1ه محت1وای ی1ک ص1فحه وب، ب1ا )

آن1 ه1ا، نش1ا1نه گذاری ش1ده و ب1دین ترتیب، نح1وه� نم1ایش آن ص1فحه ب1رای مرورگره1ای

و1ب، توصی1ف م1ی شود1.

HTMLزبان

تگ ه1ایHTML ب1اعث می ش1وند ک1ه و ک1ار می رون1د ب1ه گ1ذاری محتوي1ات ص1فحات نش1انه ب1رای

م1رور1گر بتواند1 تشخي1ص دهد هر1 بخش 1چه نوع 1عنصری ا1ست.

هر ت1گHTML توس1ط دو ک1اراکتر > و ، ي1ک بخش ابت1دايی و ي1ک بخش انته1ايی دارد ک1ه هم ن1ام ب1وده

>1 ت1گ ان1ته1ا / <    ب1ه1 ص1و1رت 1اس1تاند1ارد1 ب1ه ای1ن1 ص1ورت1 1ب1ه1 ک1ا1ر م1ی ر1ون1د : 1 < 1مح1اط1 م1ی1 ش1و1ند1 1

م1حتويا1ت  1  > تگ1 ابتدا<

<  label < ..... > /labelمثال : >

هر ت1گ دارای مجموع1ه از خ1واص اس1ت ک1ه وي1ژگی ه1ای مختل1ف آنه1ا را تع1يين می کن1د . ه1ر ي1ک از اين خ1واص را می

محتویاتتوا1ن در در1ون تگ ابت1دايي 1معر1فی و مقدار1 دهی کرد . 1

" <table border = "1< محتوی1ات > tableمث1ال : > /

تگ ه1ایHTML< نس1بت ب1ه ح1روف کوچ1ک و ب1زرگ حس1اس نیس1تند مثال b< 1 معادل >B.1 است >

:HTMLمفهوم تگ های

<HTML> صفحه اصلی محدوده< HEAD > صفحه عنوان سر<TITLE >صفحه عنوان<BODY >صفحه بدنه

فایل یک ای پایه :HTMLقالب است صورت این به

>html< >head<>title< صفحه >title/< عنوان>/head<>body<…. The content of the page    مرورگر توسط نمايش قابل محتويات صفحه اصلی بدنه…… >/body<>/html<

:HTMLعناصر اصلي يك صفحه

تگ<head اطالع1ات اين ک1ه اس1ت وب س1ند درب1اره کلی ااطالع1ات گيرن1ده ب1ر -Meta<در Information توس1ط ت1گ درون اطالع1ات .کليه نامي1ده می ش1ود درب1اره( )اطالع1ات ب1ه معن1ای

ف1ق1ط ت1گ1 ه1ای 1زی1ر 1قاب1ل اس1تفاده در HTMLمر1ورگ1ر نم1ايش داد1ه نمی ش1وند .بر1اساس اس1تاندارد 1 هستند :headبخش

> base < , > link < , > meta < , > title < , > style < , > script <

<title> عن1وان ص1فحه را ک1ه مرورگ1ر در هنگ1ام ب1از ک1ردن ص1فحه در ن1وار عن1وان نم1ايش می ده1درا مشخص می کند

>title< عنوان صفحه >/title<

<meta> ه1ای واژه و توض1يحات ض1روری ، درون ص1فحه وب درب1اره مط1الب کلی اطالع1ات کليدی مرتبط با موضوع صفحه جهت استفاده موتورهای جستجو را شامل می شود .

تعيين کليدواژه ها برای موتورهای جستجو :- <meta name ="keywords" content=“profile,staff,Alzahra university >/ "

تعيين يک توضيح درباره مطالب صفحه :- <meta name ="discription" content=“This is the Home page of Dr. Hasani >/ "…

<head>تگ

را مع1رفی می کن1د و ش1امل کلي1ه محتوي1ات قاب1ل نم1ايش در ص1فحه ازقبي1ل HTMLاين ت1گ بدن1ه اص1لی ص1فحه نوش1ته1 ه1ا ،1 عکس1 ه1ا ، لين1ک ه1ا و 1...1 اس1ت . فق1ط1 محتوي1ات اين 1قس1مت توس1ط1 مرورگ1ر ب1ه عن1وان1 خ1رو1جی

<تعر1ي1ف می ش1وند . این bodyن1م1ايش د1ا1ده می 1ش1وند و 1ک1دهای 1م1حتوي1ات1 خ1رو1جی ب1ين1 ت1گ 1ب1از 1و ب1س1ته1 >برچسب می تواند دارای جزئیات گرافیکی صفحه باشد:

Background آدرس عکس ي1ا ف1ایلی ک1ه ب1ه عن1وان پس زمين1ه ص1فحه م1ورد اس1تفاده ق1رار می گ1يرد راتعيين می کند .

bgcolor. می توان توسط اين خاصيت يک رنگ را به عنوان رنگ پس زمينه صفحه قرار داد text . رن1گ پيش ف1رض نوش1ته ه1ای درون ص1فحه را تع1يين می کن1د ک1ه ب1ه ص1ورت اس1تاندارد مش1کی اس1ت link . مشخص کننده رنگ کليه لينک های صفحه است vlink رن1گ لين1ک ه1ايی در ص1فحه ک1ه قبال يکب1ار کلي1ک ش1ده ان1د را مش1خص می کن1د و ب1ه اين منظ1ور

استفاده می شود که کاربر متوجه شود آن لينک را قبال مشاهده کرده است . alink. مشخص کننده رنگ لينک های فعال در صفحه است Dir که می تواندrtl راست به چپ( و(ltr.باشد)چپ به راست( مثال

<body background="pic/image1.jpg" bgcolor=#009933 dir="rtl>"

...

/<body>

<body>تگ

برچسNب هNایی هسNتند کNه سNر تیNتر هNا ، پNاراگراف هNا و پNرش بNه خNط HTMLاز مهمNترین برچسNب هNا در بعد را معرفی می کنند.

سر تیتر ها< بی1انگر h6< بی1انگر بزرگ1ترین س1رتیتر  و>h1 مع1رفی می ش1وند><h6>ت1ا<h1>سر تیتره1ا ب1ا برچس1ب ه1ای

1بطور خودک1ا1ر فضا1ی 1خا1لی 1اض1اف1ی  به 1قب1ل و 1بعد1 1از سر 1تیترها1 اضافه 1می کند. HTMLکوچ1ک1ترین س1ر 1تیتر ا1ست. 1<h1< This is a heading >/h1مثال >

پاراگراف ها بطور خودکار فضای خالی اضافی به قبل و بعد از یک HTMLمعرفی می شوند.< p>پاراگراف ها با برچسب

پاراگراف اضافه می کند.<p< This is a paragraph >/p>

پرش به خط بعد<br>هنگ1امی اس1تفاده می ش1ود ک1ه بخ1واهیم ی1ک خ1ط را پای1ان دهیم ام1ا نمی خ1واهیم ی1ک پ1اراگراف جدی1د را آغ1از کنیم.برچس1ب

<br1< 1را ا1ز1 ه1ر ج1ا ک1ه ق1ر1ا1ر د1هیم1 ب1ه1 ی1ک 1خ1ط 1پ1ای1ین 1ت1ر 1می 1ب1رد.1 ب1ر1چس1ب >br ی1ک 1ب1رچس1ب 1تکی1 اس1ت و1 هیچ برچس1ب >پایانی ندارد.

همچنین ...

توضیحات درHTML> --!< توضیحات توسط مرورگرها نادیده گرفته می شوند و برای وارد کردن توضیحات در بین کد استفاده می شوند. می توان از

توضیحات برای تشریح کد ها استفاده کرد که در آینده هنگام ویرایش صفحات کمک کننده است.>!-- This is a comment --<

< خط افقیhr >>hr width="250" size="20" color="yellow" noshade<

HTMLبرچسب های پایه

<B> پر این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت ( دیده شوند. Bold )رنگ و بولد

>b< متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود >/b<

( زیرخطUnderline:)>u<این متن با زیر خط مشاهده می شود >/u<

حروف کجItalic):)

>i< این متن به صورت مورب دیده می شود>/i<

:این مثال را در نظر بگیرید>b<>i<>u< این متن پر رنگ، کج و دارای زیرخط است >/u<>/i<>/b<

:این نتیجه را به ما می دهداین متن پر رنگ، کج و دارای زیرخط است

نوشتن متن ها به صورت ضخیم، مورب، زیر خط دار

اندازه فونت را می توان با دستور زیر تعیینکرد:

>font size="x"<متنی که می خواهیم اندازه آنرا تعیین کنیم >/font<

برای تغییر رنگ متنها نیز می توانیم به روشزیر عمل کنیم، با این فرمان :

>font color="red"<متن مورد نظر >/font<

فونتها و رنگ و اندازه آنها

جداول بوس1یله برچس1ب<table مع1رفی می ش1وند.هر ج1دول ب1ه س1طرها) بوس1یله برچس1ب ><<tr< ( و ه1ر س1طر ب1ه س1لول ه1ای داده تقس1یم می ش1ود )بوس1یله برچس1بtd ی1ک س1لول.)>

داده می توان1د ح1اوی متن ، عکس ، لیس1ت ه1ا ، پ1اراگراف ه1ا ، ف1رم ه1ا ، خ1ط ه1ای افقی و ج1دول ها و... باشد.

<table border="1"<>tr<>td<row1,cel1>/td<>td<row1,cel2>/td<>/tr<>tr<>td<row1,cel1>/td<>td<row1,cel1>/td<>/tr<

>/table>

و همچنین , background ، bgcolor,height,width,align,borderعناصر جدول شامل Cellspacing ایجاد فاصله بین سلولها و cellpadding افزودن فضا به داخل یک سلول می

باشد.

قالب بندی صفحاتHTML.توسط جدول ها می تواند صورت گیرد

جدول ها

مشخص hrefنشانه لینک است. شناسه <a> استفاده می شود. تگ tagبرای ایجاد لینک به صفحات دیگر از این نشانه بسته شدن تگ است.<a>/کننده آدرس لینک می باشد،

)a : اگر همه فایلها مانند صفحه ای که لینک در آن قرار دارد در یک پوشه باشند می توان به جای آدرس لینک به یک فایلکامل صفحه مقصد از روش میانبری استفاده کرده و فقط نام فایل مورد نظر را به جای آدرس کامل آن را نوشت:

/< a<لینک به فایل >a href=“x.pdf >“

)b : اگر هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند ، برای ایجاد یک لینک در این صفحه لینک به یک صفحهمی توان به اینگونه عمل کرد

:/<a<لینک به صفحه >a href=“photo.htm >“

)c بلینک ه یکURL :

/< a<لینک به سایت >a href=“http://www.yahoo.com >“

H از آدرس کامل استفاده کنید. چون در این روش توجه! اگر شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتمامهم نیست که صفحات مربوط به چه سایتی باشند.

/<a< لینک به فایل در پوشه دیگر >a href=“http://www.alzahra.ac.ir/article/x.pdf>“

اس1ت. ب1ا اس1تفاده از این شناس1ه می ت1وان عن1وانی را ب1رای لین1ک انتخ1اب ک1رد ت1ا titleشناس1ه دیگ1ری ک1ه می ت1وان در ت1گ لین1ک ب1ه ک1ار ب1ردهنگامی که بازدید کننده ماوس خود را روی لینک قرار می دهد به نمایش درآید:

>a href=/amoozesh/index.htm” title=“آموزش وب”< آموزش طراحی صفحات وب >/a<

HTMLپیوندهای >/a< متن لینک >a href="url >“

برای اینکه یک لینک را وادار کنیم که در یک صفحه جدید باز شود، باید این شناسه را به تگ لینک

target="_blank" اضافه کنیم:

>a href="http://www.alzajhra.ac.ir" target="_blank"<دانشگاه الزهرا >/a<

جدید پنجره در شده لینک صفحات مشاهده

لین1ک بای1د از ت1گ اس1تاندارد ب1ه ف1رد ایمی1ل بفرس1تد بتوان1د ب1ا آن بینن1ده لین1ک ک1ه برای ایج1اد ی1ک اس1تفاده ک1نیم. ام1ا تف1اوت این لین1ک ب1ا لین1ک ب1ه ی1ک ص1فحه در آدرس1ی اس1ت ک1ه ب1ه عن1وان مقص1د لین1ک نوش1ته می ش1ود. ب1رای اینک1ه مرورگ1ر را مجب1ور ک1نیم لین1ک را ب1ه عن1وان ی1ک لین1ک ایمی1ل بشناس1د، بای1د

در آغ1از آدرس اس1تفاده ک1نیم و بع1د از آن آدرس ایمی1ل را http ب1ه ج1ای //:mailtoاز این عب1ارت :بنویسیم.

>a href="mailto:example@example.com?subject=this is the subject"<متن لینک >/a<

با کلیک کردن بر روی این لینک صفحه ای برای فرستادن ایمیل باز می شود که قسمت( در آن کامل شده است و آماده ارسال است.subject( و قسمت موضوع )toآدرس)

ساختن لینک برای آدرس ایمیل >a href="mailto:example@example.com"<متن لینک >/a<

آدرس محل قرار SRC و ...( در صفحه و png و gif و jpg نشانه قرار گرفتن تصویر با هر فرمتی )IMGدر این تگ گرفتن فایل عکس است.

<img src="http://www.example.com/images/image.gif>"

و عکس هر دو در یک پوشه باشند می توان برای راحتی در تایپ کردن از این تگ استفاده کرد:htmlاگر فایل

<img src="image.gif>"

برای Microsoft Office picture managerمی توانید از برنامه های ویرایش عکس از قبیل فتوشاپ و یا نرم افزار تغییر اندازه ،حجم و فرمت تصاویر استفاده کرد. همچنین در جزئیات این تگ می توان به موارد ذیل اشاره کرد:

Boderحاشیه تصویر Align وضعیت قرار گرفتنAlt عنوان تصویرHspace فاصله عمودیVspaceفاصله افقی Width عرض تصویرHeight ارتفاع تصویر

مثال

>img align=left alt="نام عکس" border="0" hspace="2" vspace="5"<

اگر بخواهیم از یک عکس به عنوان یک لینک استفاده کنیم باید تگ عکس را به جای متن لینک استفاده کنیم. یعنی به

صورت زیر:

<a href="url"<>img src="image.gif"<>/a>

HTMLتصاویر در صفحات >img src="image.gif>"

تگ<marquee> .یک متن را به دلخواه در صفحه به حرکت در می آورد مثال

>marquee loop="infinite"<متن مورد نظر خود را اینجا بنویسید>/marquee<

شناسه"loop="infinte باعث می شود که متن تا هنگامی که صفحه باز است به حرکت هم استفاده کرد. loop="-1"خود ادامه دهد. می توان به جای این شناسه از

به جایinfinite در شناسه  loop" می توان از اعداد استفاده کرد. برای مثال loop="2 به  مرورگر می گوید که حرکت متن را پس از دو بار چرخش متوقف کند.

می توان با وارد کردن شناسه= "bgcolor   رنگ زمینه محلی را که متن در آن در حالچرخش است تغییر داد و برای تغییر رنگ زمینه از نام رنگ یا معادل هگزادسیمال آنها استفاده

کرد.

>marquee loop="infinite" bgcolor="yellow"<

HTMLایجاد متن های متحرک در صفحه

دو نمونه از پر استفاده ترین لیستها درHTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی

شود.

در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی لیستهای نامرتبH با یک دایره تو پر مشخص می شوند. تگ ابتدای آن> < است و تگ پایانی آن ulشود. عناصر این معموًال

/<ulست. برای جدا کردن هر بخش لیست در ابتدای آن از تگ < ا<liده می شود. بهتر است <استفابسته شود.<li >/که باز می شود با<li>هر تگ

برای مشخص کردن شکل عالمت مشخص کننده هر بخش استفاده می شودtypeشناسه •Circle با قرار دادن این مقدار برای لیست عالمت ابتدایی هر بخش به شکل یک دایره تو خالی در می

آید.•Disc .این مقدار شکل عالمت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد •square.این مقدار شکل عالمت لیست را به صورت یک مربع تو پر در می آورد

>li type="circle"< قسمت اول لیست >/li< مثال

لیست های نامرتب

بخش اول لیست •بخش دوم لیست •بخش سوم لیست•

>ul<>li< لیست اول >li/<بخش>li< لیست دوم >li/<بخش>li< لیست سوم >li/<بخش>/ul<

می توان در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کرد فقط کافیست به جای استفاده کرد.مثال:<ol>/و <ol>از تگهای <ul>/و <ul>استفاده از

شناسهstart .شماره های لیست از چه عددی شروع شود شناسهtype

این شناس1ه در لیس1تهای م1رتب هم مانن1د لیس1تهای ن1امرتب ب1رای تغی1یر عالمت ابت1دایی ه1ر بخش از لیس1ت اس1ت1ف1اد1ه1 1می1 ش1ود ک1ه1 در1 1این1ج1ا ش1ما1ره 1ای 1اس1ت ک1ه 1ب1ر1ا1ی ه1ر ق1س1م1ت ا1ز1 لی1س1ت اس1ت1ف1اد1ه1 می ش1ود. از 1این

شناسه می توان به صورت زیر استفاده کرد:•"type="1

با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند. •"type="A

با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند. •"type="a

با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند. •"type="I

با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند. •"type="i

با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.

لیستهای مرتب

بخش اول لیست 1.

بخش دوم لیست 2.

بخش سوم لیست 3.

>ol<>li< لیست اول >li/<بخش>li< لیست دوم >li/<بخش>li< لیست سوم >li/<بخش>/ol<

CSS ی1ا هم1ان Cascading Style Sheet روش1ی اس1ت ب1رای ق1الب بن1دی و ط1راحی H ه1ر چ1یزی ک1ه در اج1زای ص1فحه از قبی1ل متن، تص1ویر، زمین1ه ص1فحه، کادره1ا و تقریب1ا

. HTMLطراحی صفحه استفاده می شود بدون استفاده از کدهای ک1دهای نویس1ی دوب1اره از ت1وانیم اس1تایل ش1یتها می این ب1اعث HTMLاز طری1ق ک1ه

مش1کل ش1دن ک1د نویس1ی و همچ1نین کن1د ش1دن س1رعت بارگ1ذاری ص1فحه در این1ترنت می ش1ود جلوگ1یری ک1نیم. ب1رای مث1ال می ت1وانیم ی1ک ب1ار ن1وع ف1ونت م1ورد اس1تفاده در ی1ک ص1فحه را تع1یین ک1نیم و دیگ1ر مجب1ور نباش1یم ک1د مرب1وط ب1ه ف1ونت را در ص1فحه ب1ه ج1اوا ج1ای ب1ه م1واردی در قدرتمن1د اب1زار این از ت1وانیم می همچ1نین ب1بریم. ک1ار H غ1یر فع1ال ب1ودن ج1اوا اس1کرپت ن1یز اس1تفاده ک1نیم و چ1ون مش1کالت ج1اوا اس1کرپت مثال

اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم. و این امک1ان را می ده1د ک1ه از ی1ک فای1ل اس1تایل خ1ارجی ب1رای تع1یین خ1واص بخش1های مختل1ف ص1فحه ه1ای ی1ک س1ایت اس1تفاده ک1نیم. در این ص1ورت می ت1وانیم ظ1اهر هم1ه

صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم.

(CSSآموزش کار با استایل )

اس1تایلهای متف1اوتی را تعری1ف ک1نیم. ب1رای HTMLبا اس1تفاده از کالس می ت1وانیم ب1رای ی1ک ت1گ

ن1مون1ه ف1رض ک1نیم 1می 1خ1واه1یم در ص1ف1حه دو ن1وع 1پ1اراگراف1 داش1ته باش1یم: ی1کی ب1ا 1متن مش1کی

از1 س1لکتور ت1وانیم پ1اراگراف می1 ن1وع1 ای1ن دو1 ب1ا مت1ن ق1رم1ز.1 1ب1رای1 1مش1خص1 ک1رد1ن و د1یگ1ری1

ک1الس استفاده 1کنیم. ابتد1ا استایل را ب1ه صورت 1زیر می ن1ویسیم1:p.black {color: black}p.red {color:red}

شناس1ه از باش1د مش1کی رن1گ ب1ه خ1واهیم می ک1ه پ1اراگرافی ه1ر ب1رای بای1د بع1د مرحل1ه در

"class="black< در ت1گ p اس1تفاده ک1نیم و ب1رای پ1اراگراف قرم1ز از شناس1ه>"class="red

البت1ه ن1ام کالس1ها1 اخ1تی1اری ا1س1ت ولی 1به1تر ا1س1ت آنه1ا 1را ط1و1ری ان1تخ1اب ک1نیم ک1ه م1فه1وم داش1ته باش1ند

ت1ا1 وق1ت1ی ک1ه 1حجم1 اس1تایل 1ب1یش1ت1ر1 ش1د1 1گن1گ 1ن1باش1د. د1ر1 مث1ال1 ز1ی1ر م1ی ت1و1انی1م ک1د 1مرب1و1ط 1ب1ه 1نوش1تن دو

مالحظه کنید:HTMLپاراگراف باًال را در متن

>p class="black"<این متنی است که به رنگ مشکی نمایش داده می شود>/p<>p class="red"<این متن به رنگ قرمز نمایش داده می شود. >/p<

cssاصول نوشتن کدهای

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری در متن HEAD را در بخش Styleکنیم. برای انجام این کار ما می توانیم یک

HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با/<STYLE >.به پایان می رسد

>head<>style<>!--span { color:red; font-style:italic }--<>/style<>/head<

آغ1از می ش1ود. س1پس ی1ک ک1امنت < STYLE>هم1انطور ک1ه دی1ده می ش1ود اس1تایل ب1ا ت1گ از ت1ا مرورگره1ایی ک1ه ک1نیم نادی1ده CSSرا ش1روع می را پش1تیبانی نمی کنن1د اس1تایل

بگیرند و در صفحه به نمایش در نیاورند. متن خ1ود ب1رای ی1ک ت1گ خ1اص تعری1ف می ک1نیم ب1رای HEADوق1تی م1ا اس1تایلی را در بخش

محتوی1ات هم1ه تگه1ایی ک1ه اس1تایل ب1رای آن تعری1ف ش1ده در ص1فحه م1ورد اس1تفاده ق1رار می گیرد.

>spanاین متن قرمز و ایتالیک است،>>/span<

صفحه headتعریف کردن استایل در بخش HTML

گاهی در هنگام مشاهده صفحاتی که به زبان فارسی نوشته شده اند،،با کلماتی به هم ریخته و غیر

انتخاب شده در مرورگر Encodingقابل فهم مواجه می شویم. دلیل این مشکل ناسازگار بودن

با زبان فارسی است.

ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی

Encoding در طراحی صفحه هیچ گزینه ای H متناسب با زبان فارسی انتخاب نشده باشد یا اصال

صفحه در نظر گرفته نشده باشد.Encodingبرای

به )Arabic)Windows و یا UTF-8بر روی Encodingدر اکثر مواقع می توان صفحه مورد نظر را با تنظیم

صورت فارسی مشاهده کرد.

برای طراحی صفحه باید به این موارد توجه کرد:

راست به چپ بودن صفحه

<html در تگ >dir="rtlاستفاده از شناسه "•

تنظیم Encodingدر هنگام طراحی صفحه

متن استفاده کنیم. این متاتگ برای HEAD صفحه باید از یک متاتگ در بخش Encodingبرای تنظیم

که بیشترین سازگازی را با صفحات فارسی دارد به صورت زیر است:utf-8کد پیج >meta http-equiv="Content-Type" content="text/html; charset=utf-8"<

تنظیم پیج کد مورد استفاده در صفحه

را ق1رار دهی1د. این ت1گ ب1ه مرورگرت1ان می فهمان1د ک1ه ش1ما از DOCTYPE ت1گ HTMLدر ط1راحی وب س1ایت، بای1د قب1ل از ت1گ ا1س1تف1ا1ده1 م1ی کنی1د و1 این1 ک1ار 1کم1ک 1م1ی1 کن1د ک1ه م1ر1ور1گ1ره1ا ا1طالع1ات 1و1 ک1د1 ه1ای 1د1اخ1ل1 س1ایت1 1را به1تر HTMLچ1ه و1رژن1ی1 1از

ب1فمهمند 1و در نتی1جه 1بهتر کار کنند.

استف1ا1ده شده 1ا1س1تHTML1:1 ۴مثال ک1د زی1ر مش1خص می کن1د ک1ه در این سایت ازورژن >!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”<

.Strictو Transitional، Frameset ها می توان به این موارد اشاره کرد: DOCTYPEاز انواع

Frameset ها استفاده می کنند.Frameمناسب طراحان و برنامه نویسانی است که از

>!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"<

Transitional

مناس1ب کس1انی اس1ت ک1ه از روش ق1دیمی ک1د نویس1ی اس1تفاده می کنن1د و نمی خواهن1د از ک1د نویس1ی جدی1د اس1تفاده کن1ن1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111د1.1

HTML 4.01 Transitional

>!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"<

Strict به جای تگهای CSS پشتیبانی می کند، در این روش حتما باید از CSSبهترین روش است و از روش جدید کد نویسی و

HTML برای Style.دادن استفاده می شود

>!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"<

Doctype

: بدترين چيز وجود لينك هاي شكسته در سايت است . زمينه سياهPAGE UNDER CONSTRUCTION :ن می باش1د از ت1ا وق1تي ص1فحه در ح1ال س1اختاس1تبهتر

تلف شدن وقت بیننده سایت می شود.. چون باعث برای آن خودداری کرد.لينك ایجاد : اس1تفاده از متن ه1اي ن1امفهوم و پ1اراگراف ه1اي ط1وًالني ذهن را خس1ته ميكن1د . متن ناخوان1ا

ه1اي خوان1ا و ب1ا ان1دازه مناس1ب اس1تفاده كني1د ت1ا چش1م در خوان1دن خس1ته فNونتهميش1ه از نش1ود . اس1تفاده از ح1الت ه1اي بول1د و زي1ر خ1ط دار در ج1اي مناس1ب ب1اعث خوان1اتر ش1دن متن

و در ص1فحات ًالتین Times New RomanوTahomaبهترین ف1ونت ه1ای فارس1ی ش1ما ميش1ود .Arial.می باشد

: اس1تفاده از تص1وير در ط1راحي س1ايت اهميت وي1ژه اي دارد . ام1ا گ1اهي عكس ه1اي بس1يار ب1زرگاين عكس ه1ا بعلت حجم زي1اد م1انع ل1ود ش1دن س1ريع ص1فحه س1ايت ش1ما ميش1ود و بينن1ده را ت1رغيب ب1ه بس1تن پنج1ره س1ايت ش1ما ميكن1د ! هنگ1ام اس1تفاده از عكس حتم1ا آن را ب1ا برنام1ه ه1ايي

براي استفاده در وب بهينه كنيد تا از كمترين حجم ممكن بهره بگيريد .photoshopمانند : اين م1ورد خيلي اهميت دارد . چ1ون هم1ه ع1ادت عرض ص1فحه س1ايت بزرگ1تر از ع1رض مرورگ1ر

دارن1د ب1راي دي1دن ادام1ه مط1الب س1ايت بس1مت پ1ايين ح1ركت كنن1د . ن1ه چپ و راس1ت . ح1اًال اگ1ه ميخواهيد بيننده خود را زجركش كنيد عرض سايتتون رو تنظيم نكنيد .

: ل1ود نش1دن تص1اویر در س1ایت ،ب1ه ه1ر دلیلی ،ب1اعث پ1ایین آم1دن عكس ه1ايي ك1ه ل1ود نميش1ونداعتبار ان سایت می شود.

مواردی که باید در طراحی صفحات از آنها پرهیز کرد

- نحوه بارگزاری فایل ها بر روی سرور وب1

- نحوه بارگزاری فایل ها بر روی سرور وب2

- نحوه بارگزاری فایل ها بر روی سرور وب3

- نحوه بارگزاری فایل ها بر روی سرور وب4

- نحوه بارگزاری فایل ها بر روی سرور وب5

توجه!Host Name/Server =217.218.56.24

- نحوه بارگزاری فایل ها بر روی سرور وب6

- نحوه بارگزاری فایل ها بر روی سرور وب7

تهیه و تنظیم

فاطمه عسگری

مسئول وب سایت و پورتال های دانشگاه الزهرا