آموزش طراحی وب سایت قسمت یازدهم

قسمت یازدهم آموزش طراحی سایت از پایه را شروع می کنیم.
کدام یک از کدهای زیر بر روی عناصر تاثیر میگذارند؟
وقتی به یک عنصر
یکسری خصوصیات نسبت می دهیم، و در یک استایل دهی گروهی یا در جای دیگری
یکسری خصوصیات دیگر برای آن می نویسیم، از بین خصوصیات یکسان تمامی آنها به
ارث برده میشود و از بین سایر خصوصیات آن ویژگی هایی به ارث می روند که
نسبت به سایر دستورات دیرتر و یا به عبارتی بعد تر نوشته شده اند و در صفحه
استایل دهی پایین تر قرار گرفته اند. با هم به بررسی مثال زیر می پردازیم :
h2
{
color: blue;
font-size: medium;
font-weight: normal;
}
h1, h2, h3
{
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
در
دستورات ابتدایی رنگ نسبت داده شده به تگ h2 آبی است، اما در استایل دهی
گروهی رنگ نسبت داده شده به آن سفید است، به همین دلیل رنگ فونت انتخابی
برای آن سفید خواهد بود. مهم نیست که در دستورات قبلی  100 بار رنگ آبی به
h2 نسبت داده شود پرا که آخرین دستور  css رنگ سفید را به این تگ نسبت می
دهد.
استایل دهی به لینک ها:
لینک ها در سراسر دنیای وب وجود
دارند، اگر به لینک های اولیه با استایل پیش فرض نگاهی بیندازیم می بینیم
که لینک ها دارای یک خط در زیر نوشته لینک (underline)  هستند. به صورت پیش
فرض مرورگرها از رنگ های زیر برای لینک ها استفاده می کنند:
آبی :    لینکی که مشاهده نشده باشد.
بنفش :  لینکی که شما آن را قبلا مشاهده کرده اید.
قرمز:   لینکی که فعال است و شما در حال کلیک کردن بر روی آن هستید.
در بیشتر مواقع استایل دهی به لینک ها ممکن است به شکل زیر باشد:
A
{
font-weight: bold;
color: black;
}
با این دستور به جای اینکه لینک های آبی رنگ با سایز فونت نرمال داشته باشیم، لینک های شما به رنگ آبی و ضخیم خواهد بود.
همانطور
که قبلا اشاره کردیم تا کنون یک نوع حالت برای لینک ها معرفی کردیم، لینک
های مشاهده شده، لینک های فعال و لینک هایی که هنوز بر روی آنها کلیک نشده
است، اما نوع چهارمی وجود دارد که hover نامیده می شود، این حالت برای وقتی
است که نشانه گر موس بر روی لینک می آید که با استایل دهی در css نیز
میتوان خصوصیات این لینک را نیز تغییر داد.
در اینجا به برخی از استایل هایی که می توان به لینک ها داد نگاهی می اندازیم:
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}

پاک کردن پیشینه مرورگر:
مرورگرها به صورت پیش فرض مقداری
از پیشینه صفحات وب سایت را در خود ذخیره می کنند و از این اطلاعات استفاده
می کنند که بدانند آیا لینکی بازدید شده است یا نه، اما این کار برای
زمانیکه طراح وب سایت در حال تست کردن صفحه سایتی است کمی مشکل ساز می شود
به خصوص وقتی که طراح می خواهد لینکی که بازدید نشده است را استایل بدهد،
اما چون صفحه سایت را چندین بار refresh  کرده مرورگر وی به اصطلاح cache
کرده و به همین دلیل لینک های بازدید نشده را بازدید شده می پندارد که به
همین دلیل می بایست cache یا اطلاعات ذخیده شده را پاک کرد. برای این منظور
به این صورت عمل می کنیم:
در مرورگر اینترنت اکسپلورر : تب  tools
راانتخاب کرده، internet option  را کلیک می کنید، زیر browser history
دکمه delete  را بزنید، در پنجره باز شده check box مربوط به history  را
فعال کنید، انتخاب سایر گرینه ها با توجه به نظر خودتان می تواند صورت
گیرد. در نهایت دکمه delete  را زده و پنجره internet option را ok میکنیم
تا بسته شود و cache مرورگرمان پاک شود.
سایر مرورگرها نیز روشی مشابه دارند که آدرس دسترسی به history  آنها نیز به صورت زیر است:
Tools > Options یا   Preferences > Privacy
کلاس های انتخابگر  :
تا
اینجا یاد گرفتیم که چگونه در یک فایل CSS خصوصیات مختلفی برای تگها
بنویسیم و آموختیم که میتوان خصوصیات یک کلاس را برای تگهای مختلفی اعمال
کرد یعنی میتوان کلاس را چندین بار استفاده کرد. به عنوان مثال بیایید کلاس
زیر را دریک پاراگراف اعمال کنیم :
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
به
این ترتیب 3 خصوصیت برای پاراگرافمان تعریف کرده ایم،که خصوصیت سوم
letter-spacing  به معنای اینست که فاصله بین کلمات موجود درمتن 0.05em
باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگیرید 5% این مقدار برابر با
0.05em خواهد بود).
حال برای این که این خصوصیات که در css نوشتیم
برروی پاراگراف مدنظر اعمال شود کافیست که نام کلاس موجود در css رابه تگ
مورد نظر مان درصفحه html نسبت دهیم:
<p class=”fun”>
A man walks into a bar; you would’ve thought he’d see it coming!
</p>
حال
در نظربگیرید تگ  <blockquote>درون صفحه html تان وجود دارد و درون
این تگ میخواهید یک پاراگراف قرار دهید که کلاس fun داشته باشد ، همانند کد
زیر:
<blockquote>
<p class=”fun”>
Happiness is a dip in the ocean followed by a
int or two of Old Speckled Hen. You can quote me on that!”
</p>
</blockquote>
به نظر شما اگر بخواهید چند پاراگراف درون این تگ قراردهید چه کارمیتوان کرد؟ میتوان راه حل زیر را اعمال کرد:
<blockquote>
<p
class=”fun”>”Happiness is a dip in the ocean followed by a pint or
two of Old Speckled Hen. You can quote me on that! </p>
<p
class=”fun”>”Join us for a weekend away at some of our favorite dive
spots and you’ll soon be making new friends. </p>
<p class=”fun”>”Anyway, about time I got on with some <em>proper</em> work!” </p>
</blockquote>
اما
همانطور که می بینید تکرار نام کلاس در تگها ی بالا زیاد صورت گرفته ، پس
به جای استفاده از روش بالا میتوان روش بهتری را به کار برد   :
<blockquote class=”fun”>
<p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>
<p>”Join us for a weekend away at some of our favorite dive spots and you’ll soon be making new friends. </p>
<p>”Anyway, about time I got on with some <em>proper</em> work!” </p>
</blockquote>
ID & CLASS
یاد
گرفتید که چگونه میتوان از ID  و کلاس برای تگهای موجود در HTML خود
استفاده نمایید ، به عنوان مثال برای کلاس از نماد “.” قبل از نام کلاس در
نظر گرفته شده در فایل سی اس اس استفاده می کنیم و برای ID از نماد “#” .
نکته
دقت نمایید برای استایل دهی هم از کلاس استفاه میشود و هم از
ID. اما تفاوت هایی هم در استفاده دارد وآن اینکه از ID  برای استایل دهی و
مشخص کردن عناصر اصلی صفحه مانند هدر  فوتر و منو و غیره استفاده میکنیم و
یا برای استفاده در موارد برنامه نویسی .
تنها نکته در این باره این
است که در یک صفحه HTML از نام یک ID  فقط می شود یکبار استفاده نمود اما
از نام یک کلاس می توان به هر تعداد استفاده کرد.
در نظر بگیرید برای چند تگ درون صفحه تان از یک کلاس یکسان استفاده کرده اید، مثلا:
.fun {
font-family: Georgia, Times, serif;
color: #339999;
letter-spacing: 0.05em;
}
اما برای یکی از تگ ها علاوه بر خصوصیات فوق یک یا چند خصیصه دیگر نیز اضافه کنید، به این روش این کار را انجام می دهیم:
blockquote.fun {
font-style: italic;
}
بدین
ترتیب چنانچه کلاس fun درون تگ  blockquote قرار گیرد خصوصیت italic  را
نیز می خواند ، اما اگر به سایر تگ هایی که می خواهیم تنها کلاس fun را
بخوانند تگ blockquote را قرار ندهیم خصیصه italic  شدن فونت اعمال نمی
شود.
برای روشن تر شدن این موضوع مثال دیگری می زنم:
فرض کنید می خواهیم تمامی متون قرار گرفته درون تگ  p صفحه مان به رنگ آبی نفتی درآیند بنابراین کافیست که در CSS بنویسیم :
p {
color: navy;
}
اما
حالا اگر بخواهیم یکی از متون قرار گرفته درون تگ p مان به رنگ دیگری
درآید کافیست ، به این تگ p یه کلاس بدهیم و سپس به آن کلاس رنگ مورد
نظرمان را نسبت دهیم:
.p.gre {
color: green;
}
استایل دهی قسمتی از متن با استفاده از span  :
فرض کنید که چنین متنی دارید:
<p>Bubble
Underis a group of diving enthusiasts based in the south-west UK who
meet up for diving trips in the summer months when the weather is good
and the bacon rolls are flowing. We arrange weekends away as small
groups to cut the costs ofaccommodation and travel and to ensure that
everyone gets a trustworthy dive buddy.</p>
و می خواهید دو کلمه
اول این متن یعنی Bubble Underis  به صورت bold  (پر رنگ) نمایش داده شود.
برای این کار برای این کلمات یک تگ span به کار می بریم و سپس به این span
استایل دیگری را اعمال می کنیم و آن را آبی رنگ می کنیم:
<p><span
class=” blue “>Bubble Under</span> is a group of diving
enthusiasts based in the south-west UK who meet up for diving trips in
the summer months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the costs
ofaccommodation and travel and to ensure that everyone gets a
trustworthy dive buddy.</p>
.blue
{
Color: # a3c2fa;
}
فصل 4
استایل دهی عناصر با استفاده از css
طی
سالهای گذشته توسعه دهندگان وب سایت با استفاده  از css تنها می توانستند
به متون موجود در سایت استایل بدهند و در پاره ای از مواقع رنگی را به متنی
اختصاص می دادند، این تنها کاری بود که می شد با استفاده ازcss انجام داد
چون در آن زمان مرورگر ها بسیار ضعیف بود و نمی توانستند خصوصیات بیشتری از
css  را پشتیبانی کنند. اما با گذشت زمان این امر میسر شد و مرورگر ها
پیشرفت کردند.
در این فصل از طراحی سایت به بررسی زوایای دیگری از css می پردازیم و امکانات بیشتری از آن را معرفی می کنیم. از جمله:
تغییر ظاهر و اندازه فضای مشخصی از وب سایت
تغییر پس زمینه و کناره های اشکال
موقعیت عناصر در هر جای صفحه وب سایت
قبل
از شروع کار، ابتدا برای ایجاد تغییر در ظاهر و اندازه عناصر در وب سایت
می بایست با مفهوم block-level elements  و inline elements آشنا شوید.
block-level elements  و inline elements
block-level
elements:  به عناصر یا تگ هایی می گوییم که توسط آن می توان کل سطر یا
فضایی که آن عنصر در اختیار خود دارد را  مسدود یا به اصطلاح block کرد، هر
عنصر block  می تواند درون خود عنصر و یا عناصر inline و یا block  را جای
دهد.
inline elements : به عناصر یا تگ هایی می گویند که آنها تنها
می توانند به اندازه متنی که درون آن جای گرفته قسمتی از سطر را اشغال
نمایند، این عناصر خطی یا به اصطلاح inline نامیده می شوند، توجه داشته
باشید که درون تگ های inline تنها عنصر Inline جای میگیرد.
نحوه تشخیص
عناصر  inline  بدین صورت است که اگر عنصری دوم در کنار عنصر اول در امتداد
یک خط قرار گیرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد
عنصر دوم در بالا یا پایین عنصر اول قرار خواهد گرفت و نه در امتداد عنصر
اول.
در اینجا چند عنصر block را معرفی می کنیم:
تگ های h1, h2,…و h6
P
div
Blockquote
Ul  و  ol
Form
وقتی
که شما یک پاراگراف ایجاد می کنید، نیازی نیست که بعد از پایان پاراگراف
اول با استفاده از <br /> به خط بعد بروید تنها کافیست یک
تگ<p> را باز کرده متن خود را بنویسید و سپس آن تگ را
ببندید.</p>
بذین ترتیب چون تگ p بلاک است خود به خود متنی که در تگ دوم P  قرار می گیرد از ابتدای سطر بعد شروع می شود.

آموزش طراحی وب سایت قسمت دهم

در این مقاله در خصوص طراحی سایت نیز راجع به سی اس اس ( css) و نحوه استایل دهی (Font-size  ,…. color, Background-color,) و گزینش گر متنی و سبک دهی گروهی صحبت خواهم کرد .
تا اینجای کار به چند مثال ساده اما کاربردی  با CSS  برای استفاده در وب سایت نگاهی انداختیم. برای استایل دهی خصوصیات بسیار زیادی وجود دارد که البته من قصد دارم آنها را اینجا لیست کنم، هرچند ممکن است شما تا به حال بعضی از این استایل ها و مقدار دهی آنها را تجربه کرده باشید.
نکته :  توجه داشته باشید که این استایل ها کل css نیست و در فصل های آینده به این مقادیر اضافه خواهد شد.
Color
همانطور که قبلا هم دیدید برای رنگ دادن به عناصر استفاده می شود.
Background-color
به دو صورت مقدار دهی می شود یا نام رنگ (blue, red, green,..)  یا با اعداد دسیمال،  مانند: #3acbef
Font-family
با این خصیصه هر فونتی را که بخواهید می توانید به متون سایت خود اعمال کنید، تنها توجه کنید که نحوه مقدار دهی آن همانند مثال های قبلی است که به طور مفصل راجب به آن توضیح داده ام.
Font-size
مقدار دهی آن می تواند مثل یکی از گزینه های زیر باشد:
1-    نام های آماده برای سایز دادن به فونت ؛
•    XX-small
•    X-small
•    Small
•    Medium
•    Large
•    X-large
•    Xx-large
2-    فونت دهی به صورت نسبی؛
•    به صورت درصدی : %120
•     به صورت  1.2em     : em
3-    فونت دهی به صورت مطلق؛
•    به صورت pixel  ، مانند:  px12
•    به صورت  point، مانند:  pt12
قطعاً زمانیکه بخواهیم این امکان را به خوانندگان مطالب وب سایتمان بدهیم که با تغییر سایز صفحه مرورگر خود ( مثلا سایز %150 به جای %100) بتوانند سایز فونت متناسب با آن را ببینند فونت دهی به صورت نسبی را مد نظرمان قرار می دهیم.
Font-weight
ضخامت فونت است که به دو صورت normal  یا  bold مقدار دهی می شود.
Font-style
سبک فونت است که به دو صورت normal   یا  italic مقدار دهی می شود.
Text-decoration
مدل دهی به متن به صورت: none, underline, overline  و یا line-through  است.
نکته : قبل از شروع به کار و استفاده از css های متنوع، ابتدا از css ای که تا کنون آن را ساخته اید یک back up بگیرید و سپس با استایل های مختلفی که در بالا یاد گرفتید استایل های مختلفی را بسازید.
تمامی موارد بالا را می بایست در مرورگر خود تست کنید تا با آنها آشنا شوید ولی حالا بیائید استایل دهی بیشتری برروی عناصر موجود در سایتمان اعمال کنیم.
–    ابتدا فایل about.html  را باز کنید (در تمرین های قبلی ساخته شده است)
<!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>About Bubble Under: who we are, what this site is
for</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”bodycontent”>
<h2>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
buddy.</p>
<p>Although we’re based in the south-west, we don’t stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta’s
numerous wreck sites.</p>
<p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</div> <!– end of bodycontent div –>
</body>
</html>
–    پاراگراف زیر را پیدا کرده و تگ  em را که جهت نمایش بیشتر یا به عبارتی تاکید بهتر بر روی آن کلمه بکار رفته است را اضافه کنید.
<p>And when we’re not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
–    فایل را ذخیره کرده و در مرورگر خود به صورت local  مشاهده کنید
–    حالا فایل css خود را باز کرده و استایل زیر را به آن اضافه نمایید.
em {
Font-style: normal;
Text-transform:uppercase;
{
حالا فایل css را ذخیره کرده، سپس صفحه نمایش خود را refresh  نمایید
اگر از تگ em  در متون انگلیسی استفاده نماییم استایل آن به صورت پیش فرض italic خواهد بود، که اگر بخواهید استایل آم متن هم مانند سایر متون در آم پاراگراف باشدبه آن استایل normal  می دهیم و اگر بخواهیم با حروف بزرگ ( به جز زبان فارسی )نمایش یابد از uppercase  استفاده می کنیم.
نکته :
برخی از تگ های و عناصر HTML هستند که به مرور زمان با تگهای دیگری جایگزین می شوند و از استفاده از آنها صرف نظر می گردد، به عنوان مثال تا چند وقت پیش تگی که برای bold کردن یا ضخیم کردن متون یه کار می رفت <b>  بود که به جای آن هم اکنون از تگ strong  استفاده می شود. اهمیت این موضوع زمانی است که افراد نابینا برای کار با وب سایت ها از نرم افزارهایی استفاده میکنند که بجای نمایش صفحات وب آن را برای کاربر خود می خوانند که به اصطلاح به آن ها screen reader  می گویند.در اینجاست که آنها در هنگام خوانندن مطلب متنی را که با تگ em  مشخص شده است را مهمتر میدانند  تا متنی را که درون تگ i قرار گرفته همچنین موتورهای جستجو در گوگل به متنی که با تگ strong  ضخیم شده است بیشتر توجه میکنند و به عنوان متن مهمی که در یک متن استفاده شده است می نگرند تا به متنی که با تگ b ضخیم شده باشد.
نگاهی به عناصر درون صفحه:
در پاراگراف زیر همانطور که ملاحظه می کنید، برای استایل دهی به پاراگراف ها استایل زیر تعریف شده است،  که توسط تگ body نوع فونت این متون مشخص گردیده است.
Body{
Font-family:  verdana, Helvetica, Arial, San-serif;
}
P{
Font-size: small;
Color: navy;
}
خط بالا به ما میگه که هر تگ p  که در صفحه بود استایل بالا را بگیرد.
اما دلیل ما از به کاربردن این مثال برای این است که می خواهیم پاراگرافی را متمایز از سایر متون وب سایتمان کنیم و آن اولین پاراگراف متن ما است. حالا برای متمایز کردن این پاراگراف برای آن به صورت زیر عمل می کنیم:
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a splash! </p>
< /div>
متن درون این تگ از خصوصیات گرفته شده سایر متون پیروی نمی کند و در عوض خصوصیت مربوط به div خود را می گیرد که شامل خصیصه خاصی است که با id ای به نام tagline تعریف شده است که این خصوصیت تنها به برای همین تگ خواهد بود. حالا برای تعریف درون فایل css برای آن خصوصیات زیر را تعریف می کنیم:
#tagline p {
Font-style:  italic;
Font-family:  Georgia, Times, Serif;
}
فایل css  را ذخیره کرده و سپس پنجره مرورگرتان را refresh  کنید
برای هر متنی که درون تگ p  قرار گرفته باشد و id  آن tagline  باشد، نوع فونت آن italic  و از نوع Georgia  یا Times و یا Serif خواهد بود.
یعنی هر تگ p   که داخل آی دی tagline  قرار گرفته است  و نه p های دیگر .
علامت # در CSS به عنصری اشاره می کند که شامل یک  Id خاص با خصوصیات مربوط به خود است. در مورد  Id در قسمت های جلوتر به طور کامل خواهیم پرداخت.
گزینشگر متنی
#tagline p یک گزینشگر متنی است، در اینجا چند مثال دیگر برایتان مطرح می کنم.
Navigation a{#
Text-decoration: none;
}
برای هر تگ a ای که درون تگی با  navigation  =id است، آن لینک فاقد زیر خط در هنگام کلیک کردن آن لینک خواهد بود.
#footer {
line-height: 150%;
}
درون تگی که id  footer  دارد، تمامی متون دارای %150 فاصله میان خطوط خواهند بود.
h1  strong {
color: red;
}
هر  تگ strong  ی که درون تگ  h1 قرار گیرد رنگ آن قرمز خواهد بود.
سبک دهی گروهی
گاهی اوقات می بینید که در هنگام استایل دهی یکسری از تگ ها هستند که خصوصیات یکسانی دارند اما در فایل CSS برای هر یک از آنها کلاس و یا تگ جداگانه ای در نظر گرفته شده مثلا:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
این کار باعث می شود تا علاوه بر اینکه حجم فایل CSS  تان زیاد شود فایلتان نیز کثیف به نظر برسد، به همین دلیل در این مواقع بهتر است مانند زیر عمل نمایید:
h1, h2, h3 {
color: yellow;
background-color: black;
}
توجه داشته باشید که برای جداکردن تگ ها از همدیگر از کاراکتر ( ,)    کاما ، استفاده کردیم که این علامت را می توانید به معنای یا تعبیر کنید.
حالا بیایید تا در پروژه مان دسته بندی کردن عناصر را انجام دهیم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ایم اما به زودی این کار را خواهیم کرد.
فایل css تان را با اضافه کردن css زیر به انتهای آن ویرایش کنید.
h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
حالا فایل css را ذخیره کرده و پنجره مرورگر خود را ویرایش نمایید

یک سوال ؟
به مثال زیر دقت کنید
h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
h3 {
color: red;
}
تگ h3  چه رنگی می گیرد ؟
یک بار تگ h3  سفید شده و بعد از آن رنگ آن قرمز شده پس رنگ قرمز به خود می گیرد .
البته ارجعیت دستورات سی اس اس بحث خود را دارد که در دوره های بعدی طراحی سایت حتما به آن می پردازیم

آموزش طراحی وب سایت قسمت نهم

با قسمت نهم آموزش طراحی سایت از پایه در خدمتتون هستم. در این
مقاله راجع به سی اس اس ( css) و نحوه استایل دهی به آن صحبت خواهم کرد .
برای اینکه بتوان به صفحه وب سایتمان ظاهری زیبا بدهیم می بایست با css این
کار را انجام داده و یا به عبارتی به عناصر وب سایتمان سبک بدهیم.

اولین مورد در طراحی، فونت یا typeface استفاده شده در سایت می باشد، که به
صورت پیش فرض فونت مورد استفاده برای اکثر مرورگرها Times New Roman است.
اما از نظر کاربران این فونت باعث ایجاد یکنواخت شدن سایت ها شده به همین
دلیل در طراحی یک وب سایت می توان با استفاده از خصوصیت font-family سبک
فونت استفاده شده در سایت را تغییر داد.
بهترین حالت استفاده از آن در تگ body می باشد.
Body{
Font-family: verdana;
}
فونت استفاده شده در اینجا verdana است و اگر درون تگ body قرار گیرد باعث
می شود که تمامی متن های مورد استفاده در سایت، از این فونت استفاده کنند.
حال اگر بخواهیم تگی در سایتمان با فونت دیگری نمایش یابد، به طریقی
جداگانه به آن استایل می دهیم که البته کمی جلوتر آن را توضیح خواهم داد.
در نظر بگیرید که کاربری از سایت شما دیدن کند و فونت verdana روی سیستم خود نصب نکرده باشد، حالا چه اتفاقی میافتد؟
در این حالت مرورگر خودش حدس می زند و بهترین فونتی را که به فونت انتخاب
شده شما نزدیک است انتخاب می کند. اما ما می توانیم خودمان این کار را
انجام دهیم و آن را از حیطه حدس زدن مرورگر خارج نماییم. این کار از طریق
همان font-family انجام می گیرد، به مثال زیر توجه کنید :
Body{
Font-family: verdana, Helvetica, Arial, San-serif ;
}
این خط به مرورگرها اعلام می کند که اگر فونت verdana بر روی سیستم کاربر
نصب نبود و لود شدن این فونت برای عناصر موجود در درون صفحه سایت موفقیت
آمیز نبود، از فونت Helvetica استفاده کن، اگر Helvetica نیز نصب نبود از
Arial برای لود شدن متون صفحه استفاده کن، در غیر اینصورت از یکی از فونت
های San-serif که بر روی سیستم کاربر نصب است استفاده کن.
این css را به فایل css خود اضافه کنید و سپس آن را ذخیره نمایید، صفحه وب
سایت را با مرورگر روی سیستم تان باز کنید، خواهید دید که فونت های موجود
در صفحه همگی verdana شده اند.
فونت San-serif :
این فونت از جمله فونت هایی است که برای مطالعه کردن و پرینت گرفتن بسیار
مناسب می باشد و خوانایی آن به دلیل آنکه فونت آن( بدون لبه) ساده است و
کلمات را با حداقل شکستگی در فونت نمایش می دهد بسیار آسان است.
اگرچه استفاده از این فونت برای پرینت گرفتن بسیار مناسب است اما توجه
داشته باشید که گاهی اوقات برای وب سایت ها این فونت پیشنهاد نمی شود چرا
که اگر سایز فونت کوچک باشد نمی توان در سایز کوچک ظرافت فونت را به خوبی
نمایش داد، پس این فونت برای سایت هایی که سایز فونت آنها کوچک است توصیه
نمی گردد.
مطلب آخر اینکه توجه کنید که حتما بین دو کلمه san و serif حتما ” – ” را قرار دهید.
سبک دهی به عناوین :
اولین عنصری که در سایت به آن استایل می دهیم تیتر موجود در صفحه است که آن
را با تگ h1 مشخص می کنیم، حالا بیایید چند استایل به این تگ مان اضافه
کنیم.
h1 {
Font-family: ” Trebuchet MS “, Arial, Helvetica, San-serif;
}
این خط css بیان می کند که تمامی عناوین صفحه Trebuchet MS می شوند در حالیکه سایر متون صفحه verdana خواهند بود.
h2 {
Font-family: byekan, Arial, Sans-Serif;
}
تمامی تیتر های سایت و عناوین از خط فوق استایل خود را می گیرند در حالی که سایر متون سایت فونت تگ body یعنی tahoma را می خوانند.
body {
Font-family: Tahoma,Serif,Sans-Serif;
}
همانطور که می بینید برای فونت Trebuchet MS از دبل کتیشن استفاده شد، اما
برای سایر فونت ها استفاده نکردیم، به طور کلی اگر اسم فونت انتخابی مان تک
کلمه ای باشد نیازی به استفاده از کتیشن نیست در غیر اینصورت برای نام
فونت هایی که دو یا سه کلمه ای هستند(

چند نکته :
اگر مرورگر خود را refresh کردین و تغییرات را مشاهده نکردین، ابتدا بررسی
کنید و ببینید که آیا پس از اعمال تغییرات CSS خود را ذخیره کرده اید یا
نه. اگر این مورد درست بود بررسی کنید و ببینید که آیا لینک CSS خود را
درست داده اید و اسم آن را درست تایپ کرده اید، آخرین مورد نیز ممکن است به
دلیل cache کردن مرورگرتان باشد، که در این صورت برای مرورگر IE از دکمه R
+ Ctrl استفاده می نمایید و برای مرورگر فایر فاکس Ctrl + F5 کمک می
گیرید، تا cache مرورگر خود را پاک نمایید.
حالا بیایید کمی ظاهر سایت را عوض کنیم، در این قسمت ویژگی های بیشتری به
تگ body مان می افزاییم و ظاهر منو را نیز تغییر می دهیم، CSS زیر را به
فایل CSS خود اضافه کنید.
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1{
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
font-size: x-large;
}
li{
font-size: small;
}
h2{
color: blue;
font-size: medium;
font-weight: normal;
}
p{
font-size: small;
color: navy;
}
حالا پس از ذخیره کردن فایل css تان مرورگر خود را یکبار دیگر refresh نمایید
حالا توضیح خصوصیات اضافه شده در بالا:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
خصوصیت background-color برای اکثر تگ های HTML کاربرد دارد و با روشهای
گوناگونی می توان رنگ دهی به پیش زمینه سایت را اعمال کنیم. برای تعیین
کردن رنگ پیش زمینه دو روش وجود دارد، یکی اینکه نام رنگ را بنویسیم، مثل؛
yellow, blue, white, red,…. و روش دیگر استفاده از اعداد دسیمال مانند؛
4ab390# است. بهترین روش و راحت ترین آن برای انتخاب و استفاده از رنگ مورد
دلخواه خود در سایت استفاده از color picker نرم افزار photoshop است که
به راحتی رنگ را به صورت عددی در اختیار شما قرار می دهد.
نحوه استفاده از این ارقام نیز بدین صورت است:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12…
خصوصیت بعدی line-height است که با افزایش دادن مقدار آن می توان فواصل بین
خطوط متن را بیشتر کرد و خصوصیت padding نیز برای ایحاد فاصله میان تگ
مورد نظر و عنصر خارجی آن که درون تگ body قرار دارد می باشد. این فاصله را
می توان برای هر چهار جهت بالا، پایین، چپ و راست و با یک یا دو و یا تنها
سه جهت آن قرار داد. انشالله در فصل بعدی در مورد padding در طراحی سایت به طور کامل
توضیح خواهم داد.
تنها نکته باقی مانده مقدار دهی به padding است که به صورت عددی در مبنای
پیکسل استفاده می کنیم، مانند px15 و این مقدار باعث ایجاد فاصله برای body
می شود که مطالب سایت از هر چهار جهت به اندازه px15 فاصله یابد. همانطور
که قبلا نیز اشاره کردیم، واحد پیکسل برای سایز دهی به تصاویر نیز به کار
می رود، اصولا پیکسل کوچکترین واحد موجود در صفحه نمایش است.
همانطور که گفتیم به متون سایت نیز می توان هم رنگ و هم سایز داد،
p{
font-size: small;
color: navy;
}
برای منو نیز سایز فونت را small در نظر گرفتیم که با توجه به نوع مرورگر
سایز پیش فرض small آن ، در مرورگرهای مختلف تفاوت دارد، محدوده مقدار دهی
آن small, medium, large, x-large و xx-large است.
برای تگ h1 نیز سبک جدیدی از استایل دهی را قرار می دهیم، چون این تگ برای
تیتر اصلی صفحه استفاده می شود، سایز آن را بسیار بزرگ یا همان x-large
انتخاب کردیم.
h1{
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
font-size: x-large;
}
و برای تگ h2 سایز فونت را متوسط برگزیدیم.
و تگ p تنها سایز و رنگ گرفته است .

آموزش طراحی وب سایت قسمت هشتم

با قسمت هشتم آموزش طراحی سایت در خدمتتان هستیم . در این قسمت  برای درج استایل (css style ) به سایت 2 روش  embedded  و externalرا کاملا توضیح خواهم داد.  به یقین این قسمت آموزش می تواند تحولی در روش طراحی شما ایجاد کند
 Embedded Style
در جلسه قبل با استایل inline  آشنا شدید. اما این، روش مناسبی برای دادن ظاهر به سایت نیست و میبایست از روش دیگری استفاده کرد. به طور مثال می بایست استایل را در جایی نوشت و به همه تگ ها گفت از آن استایل خاص برای ظاهر خودشان استفاده کنند.
برای این کار کافی است داخل تگ head  در بالای صفحه عنصر style را اضافه کنیم:
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
<style type=”text/css”>
p {
font-size: 12px;
}
</style>
</head>
در مثال بالا گفته شد برای همه تگ های p  سایزفونت 12px  را در نظر بگیر. دقت نمایید p  یک selector  است و اعلان ها داخل {} قرار می گیرد.
در این مثال selector  ما یک تگ  p  را هدف قرار داده است و می تواند تگ های دیگری و یا کلاس های و یا آی دی های دیگری را هدف قرار دهد. همچنین برای یک selector   میتوان چندین اعلان تعریف کرد مانند مثال زیر :
<style type=”text/css”>
p {
font-weight: bold;
color: blue;
}
</style>
چرا embedded style  از  inline style  بهتر است؟
فرض کنید در صفحه 10 تگ  p  دارید که می خواهید به آن رنگ قرمز بدهید. در صورتی که از inline style   استفاده نمایید می بایست 10 مرتبه این کار را انجام دهید و اما اگر از  embedded  استفاده نمایید تنها کافی است یک بار آن را بالای صفحه اضافه نمایید تا همه ی تگ های  p ازآن تبعیت کنند.
اهمیت این انتخاب در زمان تغییرات استایل نمایان تر است زیرا در صورت استفاده از inline  مجبور خواهید بود تمامی 10 مورد را تغییر دهید اما در embedded تنها تغییرات در یک مکان صورت می گیرد .
<style type=”text/css”>
p {
font-weight: bold;
color: red;
}
</style>
پس تا اینجا embedded برنده شده است!
حالا فرض کنید صفحات بسیار زیادی دارید و می خواهید در تمامی صفحات رنگ همه ی p  ها را قرمز کنید . آیا استفاده از embedded  مقرون به صرفه است ؟
Extended Style
این همان جواب سوال بالاست . با external می توانید یک استایل را برای تمام صفحات داشته باشید و فقط کافی است این فایل را به صفحه مورد نظر وصل کنید .
البته دلایل بیشتری هم برای انتخاب external   وجود دارد که در دوره پیشرفته خواهم گفت .
نحوه ساخت یک External CSS:
ادیتور خود را باز نمایید و متن css  خود را در آن بنویسید
/*
CSS for Bubble Under site
*/
p {
font-weight: bold;
color: blue;
}
سپس فایل را با نام style1.css  ذخیره کنید همان طوری که فایل html   را ذخیره نمودید . حالا می بایست فایل ساخته شده را به صفحه متصل نمایید.
نکته : فواید استفاده از کامنت در css  همانند  html   می باشد و برای تفکیک کد های  css  در پروژه های بزرگ و گروهی استفاده می شود. برای این منظور از عبارت زیر استفاده می کنیم :
/* comment hear */
اضافه کردن external css به صفحات html:
برای این کار از عنصر link  داخل تگhead   استفاده می کنیم بدین ترتیب:
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
<link href=”style1.css” rel=”stylesheet” type=”text/css”/>
</head>
Href  به فایل css  شما اشاره می کند . عناصر rel , type  به مرورگر بیان می کند نوع لینک شما چیست تا مرورگر محتوای صفحه را طبق آن تنظیم کند .
نکته : عنصر لینک یک تگ empty   است و نمی توان آن را در Xhtml به صورت container نوشت .
پس نتیجه می گیریم که external css   در طراحی سایت از همه مناسب تر است و تنها در مواردی مجبوریم که از inline  و یا embedded  استفاده کنیم .

آموزش طراحی وب سایت قسمت هفتم

با قسمت هفتم آموزش طراحی وب سایت از پایه در خدمتتون هستم در این مقاله
ابتدا تگ های خاص و تگ هایی که طراحان سایت کمتر از آن ها استفاده می کنند
را ذکر کرده و سپس کمی راجع به سی اس اس (css) صحبت می کنیم.
عنصر  blockquote:
این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است  این تگ  برای نمایش یک گفته شخصی استفاده می شود.
ولی در جا های دیگر به تگ های  Quotes  اشارات متنوعی شده است.  Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است.
تگ های  Quotesبه 3 بخش زیر تقسیم می شود :
1.    <blockqoute>< /blockqoute>
2.    <q>< /q>
3.    <cite>< /cite>
q :
این تگ ، یک تگ container  و inline  است  و برای نقل و قول برای یک یا دو کلمه استفاده می شود.
یادآوری :  تگ های block  کل سطر را می پوشاند و تگ های inline  تنها دور عنصر را می گیرند .
<p>
I’m said <q>font</q>but my friend said <q> font face </q>
</p>
cite  :
این تگ ، یک تگ container  و inline  است  و برای نام نویسنده و یا نویسنده کامنت استفاده می شود
<p>
but then <cite> ali</cite>said <q> no think these font work betfer </q>
<p>
blockquote  :
این تگ ، یک تگ container  و block  است  و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص  معمولا برای یک جمله استفاده می شود.
تگ های   strong و  em :
این تگ ها ، تگ های container  و inline  هستند و برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold  و  تگem   کلمه را italic می کند.
این نکته را اضافه کنم که  این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است .
    <p>
this is a <strong>bold text</strong> this is a <em>italic text</em>
</p>
خط فاصله بین متون p :
فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ <br /> استفاده می کنیم.
این تگ ، یک تگ empty  است  و در ساختار xhtml  به صورت <br />  نوشته می شود .
نکته مهم : از br اضافی پرهیز کنید
<p>
this is a test
<br />
this line show after break
</p>
تعریف تگ های خاص:
این قسمت نیز شامل تگ هایی است که کمتر استفاده می شود ولی میتوانند کاربردی باشند :
<abbr>
برای توصیف یک عبارت اختصار به کار می رود
<p>
The<abbr titile=”search engine optimization”>seo</abbr> is good for your site
<p>
<acronym>   
برای توصیف نامها ی محاوره ای اختصار
<p>
Can I get this <acronym title=”as soon as possible”>AsAp </acronym>
<p>
<address>
برای نوشتن اطلاعات تماس
<address>
Behzad alibeigi
<br/>
<a href =mailto:.. >email</a><br/>
Phone :…
</address>
<dfn>
برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم .
<p>
The <dfn title=”microsaft web browser”>Internet explorer </dfn> is the most popular browser used undermater.
<p>
همانطوری که از مثال های بالا مشخص است این 4 تگ container  و  inline  هستند.
تگ های  ناشناخته تری هم وجود دارند مانند kdb , samp , var  که بهتراست در اینترنت کمی راجع به آنها تحقیق کنید فصل سوم
Adding some style
همان طوری که قبلا اشاره کردیم لایه دوم وب  ، لایه ظاهر آن است که با  CSS اعمال می شود.
در گذشته  برای اضافه کردن ظاهر به سایت  از ترکیب دستورات CSS وHtml استفاده می شد ولی امروزه برای این کار می بایست فقط از css استفاده کرد تا وب سایتی استاندارد داشته باشیم.
CSS یا همان (Cascading style sheets) زبانی است که برای تغییر ظاهر عناصر صفحات استفاده می شود.  که می تواند شامل رنگ ، سایز ویا موقعیت عناصر باشد .
برای اعمال css 3 روش وجود دارد:
•    Inline
•    Embedded
•    External
: inline
در این روش از خصوصیت  style  داخل  تگ های html  استفاده می کنیم بدین صورت :
   <p style=”color:Red;font-weight: bold;”>
this is a test
</p>
خصوصیت  style  می تواند شامل چندین اعلان باشد . اعلان ها با ; از اعلان کناری جدا می شود. به مثال بالا دقت کنید :  اعلان رنگ و نوع فونت با ; از هم جدا شده اند
هر اعلان شامل یک property و یک value است .
عنصر span :
یک تگ inline است و تگ جادویی دوم بعد از div برای من به حساب می آید span موارد استفاده زیادی دارد و برای استایل متفاوت یک و یا چند کلمه و پاراگراف از این تگ استفاده می کنیم.
مورد استفاده دیگر span مربوط به طراحی های پیچیده با تعداد تگ div  زیاد است که در دوره های بعدی توضیح خواهیم داد.
روش های embedded , external  در جلسه بعدی تشریح می شوند  و خواهیم گفت که کدام روش در طراحی وب سایت مناسب تر است .

آموزش طراحی وب سایت قسمت ششم

با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.
آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک workshop برای جمع آوری اندوخته های شماست .
در ابتدا صفحه ای با نام index.html  می سازیم:
<!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>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src=”divers-circle.jpg”
alt=”A circle of divers practice their skills”
width=”200″ height=”162″/></p>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and
successfully found your way to the start point – or in
this case, our home page.</p>
</div> <!– end of bodycontent div –>
</body>
</html>
نحوه ساخت و تگهای استفاده شده در مثال فوق قبلا توضیح داده شده است . (سورس تگ  img را با تصویری در کامپیتر خود پر کنید)
حالا در فلدری که صفحه شما وجود دارد از فایل index.html می بایست 2 بار کپی بگیرید . بدین ترتیب:
بعد از انتخاب فایل
edit > copy
و سپس  2 بار
Edit > paste
را می زنید حالا 3 فایل مشابه دارید که می بایست 2 تای کپی شده را تغییر نام دهیم برای همین روی آنها کلیک راست ماوس را فشار می دهیم و گزینه یrename  را می زنیم تا بتوانیم نام دلخواه را به آن ها بدهیم.  یکی را  contact.html  و دیگری را  about.html  نام گذاری می کنیم .
محتوای 3 صفحه فوق یکسان است و می بایست محتوای صفحات را ویرایش کنید تا با هم یکی نباشد برای این کار صفحات دوم وسوم را با ابزار هایی که توضیح داده شده است مثل NotePad باز کنید و تایتل و محتوای هر صفحه را نسبت به نام آن تغییر دهید . به طور مثال عبارت contact us را برای تگ تایتل در صفحه contact.html انتخب نمایید.
بعد از تغییرات در 2 صفحه موجود آن ها را  save  کنید . ( روش save کردن در جلسات گذشته توضیح داده شده است)
لینک کردن صفحات به هم:
صفحه اول یا همان index را باز کنید و سعی کنید از آن به صفحه contact  بروید!
بله این امکان در حال حاضر وجود ندارد و برای حرکت بین صفحات مختلف شما می بایست از link و یا anchor استفاده نمایید.
<a href=”filename.html”>Link text here</a>
href  :  یک attribute است و بیان کننده آدرسی است که قرار است به آنجا لینک شود
filename.html: نام صفحه ایست که قرار است به آنجا لینک شود
Link text here: چیزی که در صفحه html دیده می شود و نام لینک مورد نظر است
این نکته را هرگز فراموش نکنید که از کلمات با معنی برای لینک دهی استفاده نمایید و از کلماتی مانند “اینجا را کلیک نمایید” پرهیز کنید.
حالا باید برای لینک دهی بین صفحات یک منو و یا navigation سایت را بسازیم . دقت نمایید نحوه ساخت navigation سایت بسیار مهم است و ساختاری که در ادامه توضیح داده می شود ساختاری مناسب و استاندارد برای منوی سایت می باشد و بهتر است الان نگران ظاهر آن نباشید در ادامه مقالات ظاهر آن را زیبا می کنیم!
ساخت یک منویnavigation
<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div> <!– end of navigation div –>
حالا کد زیر را در بالای همه صفحات بعد از تگ div  با آی دی header    اضافه نمایید . به طور مثال برای صفحه index
<!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>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div> <!– end of navigation div –>
<div id=”bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src=”divers-circle.jpg” width=”200″ height=”162″
alt=”A circle of divers practice their skills”/></p>
<p>Glad you could drop in and share some air with us!
You’ve passed your underwater navigation skills and
successfully found your way to the start point – or in
this case, our home page.</p>
</div> <!– end of bodycontent div –>
</body>
</html>
حالا به راحتی می توانید بین 3 صفحه حرکت نمایید.
نکته نویسنده: بهترین مکان برای قرارگیری منوی سایت هم از لحاظ ظاهر و هم در ساختار html بالاترین نقطه صفحه است. مطمئن باشید این به نفع شماست!
و در آخر 3 صفحه خواهید داشت که به راحتی قابلیت حرکت بین یکدیگر را دارند.
در جلسه بعد در باره تگ های blockquote  strong , em , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه در طراحی وب سایت است .