طراحی وب سایت

درباره سایت

آخرین مطالب

امکانات وب

ساخت اولين صفحه وب سايت

در هر جاي کامپيوتر که دوست داريد فلدري به نام my-first-webpage بسازيد.

textEditor خودتان را که در جلسات قبل توضيح داديم باز کنيد کد زير را در آن کپي کنيد

طراحی وب سایت

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>The Most Basic Web Page in the World</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>The Most Basic Web Page in the World</h1>

<p>This is a very simple web page to get you started.

Hopefully you will get to see how the markup that drives

the page relates to the end result that you can see on

screen.</p>

<p>This is another paragraph, by the way. Just to show how it

works.</p>

</body>

</html>

از textEditor گزينه file>save as را بزنيد پنجره اي مانند زير نمايش مي يابد:

design-web-15.gif

مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.

نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html

از منوي کشويي save as type گزينه all files را انتخاب نماييد

حالا در فلدر مورد نظر فايلتان را با مرورگر باز نماييد . تبريک شما اولين صفحه وب خودتان را ساختيد!

design-web-16.gif

اهميت UTF-8

اين کاراکتر ست (Character Set) اجازه مي دهد زبان هاي ديگر هم بتوانند به درستي صفحه شما را ببينند. فرض کنيد يک کاربر کره اي که زبان انگليسي ندارد بخواهد صفحه شما را ببيند ، اين کاراکتر ست است که اجازه ميدهد شما با مشکلي مواجه نشويد.

اولين آناليز شما

يک مقايسه و يک آناليز ساده بين کد شما و ظاهري که در مرورگر مي بينيد ، مي تواند در يادگيري شما کمک شاياني کند:

design-web-17.gif

زمان مناسبي است که در مورد 2 تگ p و h1 و البته عناصر ديگر صحبت کنيم.

تيترها و سلسله مراتب آن (H)

تيترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند.

از h1 براي مهم ترين تيتر از h2 براي تيتر کم ارزش تر و از h3 براي تيتر کم ارزش تر از h2 و به همين ترتيب تا h6

پاراگراف (p)

يک تگ بلاک و بسته شونده (container) است و براي يک بلوک متني استفاده مي شود اين بدان معني است که متن هاي خوتان را بايد داخل اين تگ قرار دهيد.

ليست (list)

فرض کنيد مي خواهيد ليست وب سايت هاي طراحي شده خودتان را نمايش دهيد ، به ليستي که من درسايت خودم استفاده کردم يک سري بزنيد.

اينجا:

design-web-18.jpgو اما ليست ها دو گونه اند:

Ol-order list : براي ليست هاي ترتيبي

Ul-unorder list: براي ليستهاي غير ترتيبي

به مثال زير دقت کنيد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists - an introduction</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>Lists - an introduction </h1>

<p>Here's a paragraph. A lovely, concise little paragraph.</p>

<p>Here comes another one, followed by a subheading.</p>

<h2>A subheading here</h2>

<ul>

<li>This is a bulleted list</li>

<li>No order applied</li>

<li>Just a bunch of points we want to make</li>

</ul>

<p>And here's an ordered list:</p>

<ol>

<li>This is the first item</li>

<li>Followed by this one</li>

</ol>

</body>

</html>

و حالا خروجي کار رو در مرورگر ببينيد تا تفاوت هاي دو نوع ليست را ببينيد

design-web-19.gif

ظاهر همه ليست ها به همين سادگي نيستند و امروزه در طراحي وب سايت حرفه اي استفاده زيادي دارد. براي نمونه مي توانيد به فوتر وب سايت شرکت طراحي سايت وب اسکالا نگاهي بياندازيد تا ديدتان نسبت به استفاده از اين عنصر بازتر شود.

نظرات (0)

در هر جاي کامپيوتر که دوست داريد فلدري به نام my-first-webpage بسازيد.

textEditor خودتان را که در جلسات قبل توضيح داديم باز کنيد کد زير را در آن کپي کنيد

طراحی وب سایت

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>The Most Basic Web Page in the World</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>The Most Basic Web Page in the World</h1>

<p>This is a very simple web page to get you started.

Hopefully you will get to see how the markup that drives

the page relates to the end result that you can see on

screen.</p>

<p>This is another paragraph, by the way. Just to show how it

works.</p>

</body>

</html>

از textEditor گزينه file>save as را بزنيد پنجره اي مانند زير نمايش مي يابد:

design-web-15.gif

مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.

نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html

از منوي کشويي save as type گزينه all files را انتخاب نماييد

از منوي کشويي Encoding گزينه UTF-8 را انتخاب نماييد.

و حالا دکمه save را بزنيد.

design-web-16.gif

اهميت UTF-8

اولين آناليز شما

يک مقايسه و يک آناليز ساده بين کد شما و ظاهري که در مرورگر مي بينيد ، مي تواند در يادگيري شما کمک شاياني کند:

design-web-17.gif

زمان مناسبي است که در مورد 2 تگ p و h1 و البته عناصر ديگر صحبت کنيم.

تيترها و سلسله مراتب آن (H)

تيترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند.

از h1 براي مهم ترين تيتر از h2 براي تيتر کم ارزش تر و از h3 براي تيتر کم ارزش تر از h2 و به همين ترتيب تا h6

پاراگراف (p)

ليست (list)

اينجا:

design-web-18.jpgو اما ليست ها دو گونه اند:

Ol-order list : براي ليست هاي ترتيبي

Ul-unorder list: براي ليستهاي غير ترتيبي

به مثال زير دقت کنيد:

طراحی وب سایت

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists - an introduction</title>

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>Lists - an introduction </h1>

<p>Here's a paragraph. A lovely, concise little paragraph.</p>

<p>Here comes another one, followed by a subheading.</p>

<h2>A subheading here</h2>

<ul>

<li>This is a bulleted list</li>

<li>No order applied</li>

<li>Just a bunch of points we want to make</li>

</ul>

<p>And here's an ordered list:</p>

<ol>

<li>This is the first item</li>

<li>Followed by this one</li>

</ol>

</body>

</html>

برچسب: طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده: pooyesh تاريخ: يکشنبه 16 تير 1392 ساعت: 13:01

درباره سایت

آخرین مطالب

امکانات وب

ساخت اولين صفحه وب سايت

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه