طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
خدمت همه علاقه مندان به يادگيري طراحي سايت. با قسمت سوم آموزش طراحي وب سايت از پايه در خدمت شما هستيم. در اين قسمت شما نحوه سازمان دادن وب سايت و ساخت اولين صفحه وب خودتان را تجربه خواهيد كرد . اميدوارم همانند مقاله هاي گذشته نظر خودتان را براي ما ارسال نماييد.
در هر جاي كامپيوتر كه دوست داريد فلدري به نام my-first-webpage بسازيد.
textEditor خودتان را كه در جلسات قبل توضيح داديم باز كنيد كد زير را در آن كپي كنيد
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv="Content-Type"
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 را بزنيد پنجره اي مانند زير نمايش مي يابد:
مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.
نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html
از منوي كشويي save as type گزينه all files را انتخاب نماييد
از منوي كشويي Encoding گزينه UTF-8 را انتخاب نماييد.
و حالا دكمه save را بزنيد.
حالا در فلدر مورد نظر فايلتان را با مرورگر باز نماييد . تبريك شما اولين صفحه وب خودتان را ساختيد!
يك مقايسه و يك آناليز ساده بين كد شما و ظاهري كه در مرورگر مي بينيد ، مي تواند در يادگيري شما كمك شاياني كند:
زمان مناسبي است كه در مورد 2 تگ p و h1 و البته عناصر ديگر صحبت كنيم.
تيترها و سلسله مراتب آن (H)
تيترها عناصر بلاك و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند.
از h1 براي مهم ترين تيتر از h2 براي تيتر كم ارزش تر و از h3 براي تيتر كم ارزش تر از h2 و به همين ترتيب تا h6
پاراگراف (p)
يك تگ بلاك و بسته شونده (container) است و براي يك بلوك متني استفاده مي شود اين بدان معني است كه متن هاي خوتان را بايد داخل اين تگ قرار دهيد.
ليست (list)
فرض كنيد مي خواهيد ليست وب سايت هاي طراحي شده خودتان را نمايش دهيد ،
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists - an introduction</title>
<meta http-equiv="Content-Type"
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>
<p>And now for a list or two:</p>
<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>
<li>And one more for luck</li>
</ol>
</body>
</html>
و حالا خروجي كار رو در مرورگر ببينيد تا تفاوت هاي دو نوع ليست را ببينيد
ظاهر همه ليست ها به همين سادگي نيستند و امروزه در طراحي وب سايت حرفه اي استفاده زيادي دارد. براي نمونه مي توانيد به فوتر وب سايت شرکت طراحي سايت وب اسکالا نگاهي بياندازيد تا ديدتان نسبت به استفاده از اين عنصر بازتر شود.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: ramin