تماس درباره   صفحه اصلی
  برنامه نويسی مبتنی بر وب > HTML  
 
 

HTML


طراحی صفحات وب نيازمند آشنائی با تگ های HTML می باشد. در اين درس با HTML و نحوه طراحی سايت های وب آشنا خواهيد شد.

تگ
ساختار مستند HTML
ايجاد يک وب سايت ساده
تگ های پايه


مستندات (Hyper Text Markup Language) HTML، يا به عبارت ديگر صفحات وب، فايل های متنی هستند که از عناصر HTML ساخته شده اند. HTML در حقيقت يک زبان نشانه گذاری (markup language) است که برای توصيف ساختار منطقی يک مستند استفاده می شود.

برازر يا مرورگر وب (web browser) برای خواندن مستندات HTML و نمايش آنها به صورت صفحات وب مورد استفاده قرار می گيرند.

به کمک HTML يک صفحه وب به صورتی طراحی می شود که توسط يک مرورگر وب روی هر ماشين يا سيستم عاملی خوانده و تفسير شود به عبارت ديگر مستقل از ماشين (device independent) باشد.

عناصر HTML با استفاده از تگ های HTML توصيف می شوند. وظيفه اصلی تگ ها تعيين چگونگی نمايش اطلاعات است. به اين وسيله نحوه نمايش يک صفحه وب به صورت مستتر در آن قرار می گيرد. مرورگرها با کمک تگ ها به نمايش صفحات وب می پردازند.


تگ

هر صفحه وب از مجموعه ای عناصر مانند سرتيتر، پاراگراف، ليست، تصوير و غيره تشکيل شده است. هر عنصر توسط اطلاعات کنترلی به نام تگ (tag) احاطه می شود. هر تگ بين دو کاراکتر < و > قرار می گيرد.

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

تگ ها معمولا به صورت جفت هستند مانند <b> و <b/>. تگ اول را تگ شروع (start tag) و تگ دوم را تگ پايان (end tag) می نامند. تگ های پايانی شامل يک علامت اسلش (/) هم هستند. به متن بين اين تگ ها عنصر محتوايی (element content) گفته می شود.


مثال. متن زير به صورت سرتيتر تعيين می شود.

<h1>Text in H1 style</h1>

مثال. تاکيد روی متن.

this text is not italic
<em>this text is italic</em>
this text is not italic


تگ های HTML حساس به متن (case-insensitive) نيستند.


مثال. هر دو تگ زير توسط برازر درک می شود.

<em>this text is italic</em>
this text is not italic
<EM>this text is italic</EM>


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


مثال. نحوه درست و نادرست تودرتو کردن تگ ها.

صحيح

<center><em>this text is bolded and centered correctly</em></center>

غلط

<em><center>this text is bolded and centered incorrectly</em></center>


صفت خاصه تگ

تگ ها علاوه بر تعيين فرمت يک عنصر HTML می توانند ويژگی های آن فرمت را هم مشخص کنند. ويژگی های يک تگ توسط صفات خاصه (attribute) آن مشخص می شود. صفات اطلاعات اضافه تری درباره عنصر می دهند و هميشه در تگ شروع قرار می گيرند.

صفت هميشه به صورت جفت نام و مقدار می آيد که به صورت زير نوشته می شوند:

name = "value"


مثال. تگ زير يک شيوه سرتيتر را راست چين می کند.

<h2 align = "left">
this text has a heading
level two style and is
aligned to the left </h2>


مقادير صفت هميشه در علامت کوتيشن (") قرار می گيرند. تک کوتيشن (') هم می تواند گذاشته شود اما معمولا از دوتا کوتيشن استفاده می شود. در مواردی که مقدار صفت خودش دارای کوتيشن است نياز به استفاده از تک کوتيشن است.


نکته. ضرورتی نيست مقادير خصوصيات را درون گيومه قرار دهيد مگر اينکه مقدار شامل کاراکتر space باشد.
نکته. بعد يا قبل از علامت مساوی گذاشتن فضای خالی الزامی نيست.
نکته. تنها تگ شروع دارای صفت خاصه است و اطلاعات خصوصيات در تگ پايانی ذکر نمی شود.


ساختار مستند HTML

هشت تگ وجود دارند که بايد در هر مستند HTML يا صفحه وب ظاهر شوند. اين هشت تگ با ترتيب زير در صفحه وب قرار می گيرند.

<html>
<head>
<title> Web Page Title </title>
</head>
<body>
Web Page Content
</body>
</html>

کل مستند توسط تگ <html> و </html> احاطه می شود. هر صفحه وب به دو قسمت سر و بدنه تقسيم می شود که توسط تگ های <head>…</head> و <body>…</body> مشخص می شوند.

بخش head اطلاعات کنترلی که توسط مرورگرها و سرورها مورداستفاده قرار می گيرند را دربر می گيرد. اين اطلاعات در مرورگر نمايش داده نمی شوند.

کليه صفحات وب دارای يک عنوان (title) هستند که در بالای پنجره مرورگر نمايش داده می شود. عنوان توسط موتورهای جستجو هم مورد استفاده قرار می گيرد.

بجز بخش عنوان که اجباری است تگ های ديگر در قسمت head ممکن هرگز توسط افراد عادی استفاده نشود.

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

يک صفحه وب را مشابه هر فايل متنی ديگر می توان در يک اديتور متنی ساده مانند Notepad توليد کرد ولی حتما بايد با پسوند htm يا html ذخيره شود.

مستند فوق در مرورگر به صورت زير ديده می شود:

Browser Title

نکته. اديتور های قديم اجازه تنها سه کاراکتر را برای پسوند می داد در اديتور های جديد بهتر است از پسوند .html استفاه شود.
نکته. فايل HTML را می توان بسادگی با استفاده از اديتورهائی مانند FrontPage يا DreamWeaver ايجاد کرد. اما اگر می خواهيد يک طراح وب حرفه ای شويد توصيه می شود که ابتدا از يک اديتور متنی ساده برای يادگيری HTML استفاده کنيد.
نکته. اگر فايل HTML را اصلاح کرديد ممکن است در برازر تغييرات مشاهده نشود چون برازر صفحات شما را cache می کند و مجدد نمی خواند. از دکمه Refresh/Reload برای بروز کردن صفحه وب خود استفاده کنيد.
نکته. می توانيد همه نوع مرورگری را برای ديدن صفحه خود انتخاب کنيد نظير Internet Explorer، Mozilla، Netscape يا Opera. البته بعضی مثال های پيشرفته احتياج به آخرين نسخه مرورگر دارد.
نکته. از منوی View در برازر خود گزينه Source يا Page Source را انتخاب نمائيد تا کد منبع يک صفحه وب را ببينيد.

توضيحات

توضيحات در HTML درون تگهای <!-- … --> يا قرار می گيرند. توضيحات برای شرح کد و کاری است که انجام می دهد و ممکن است هنگام ويرايش صفحه بکار بيايد. علاوه بر اين برای درج اطلاعاتی نظير نام و هدف صفحه، نام نويسنده و تاريخ توليد صفحه و اطلاعات کپی رايت در ابتدای فايل هم استفاده می شود.

مرورگر اطلاعات درون توضيحات را نديده می گيرد.


مثال. توضيحات مشابه زير نوشته می شوند. دقت کنيد که علامت تعجب(!) تنها در تگ شروع توضيح قرار می گيرد.

<!-- This is a comment -->

<! -- this is a comment --
-- Which is continued –-
-- here -->


نمايش کاراکترهای خاص

بعضی کاراکترها معنی خاصی برای مرورگر دارند و نمی توانند در متن استفاده شود مانند علامت کوچکتر (<) که برای مرورگر به معنی شروع يک تگ است و يا space که توسط مرورگر نديده گرفته می شود. اگر بخواهيم مرورگر واقعا اين کاراکترها را نمايش دهد مجبوريم از موجوديت های کاراکتری استفاده نمائيم. جدول زير برخی از اين کاراکترها را ليست می کند(ليست کامل موجوديت های کاراکتری ).

کاراکتر شرح نام کاراکتر کد کاراکتر
  non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
trademark &trade; &#8482;

نکته. موجوديت ها حساس به متن هستند.


مثال. برای نمايش علامت کوچکتر بايد بنويسيم : &lt; يا &#160;

مثال. در HTML دو تکه متن زير مشابه هم نمايش داده می شوند.

This is some text that is displayed
as you would expect


This     is   some       text
that is displayed in a way
you
would not expect:
exactly the same as the above


چند نکته هنکام استفاده از تگ ها بايد مورد توجه باشد.

• تگ ها حساس به متن نيستند.
• توصيه می شود که تگ های HTML با حروف کوچک نوشته شوند.
• تگ ها بين علائم < و > قرار می گيرند.
• تگ انتهائی را فراموش نکنيد.
• بعضی از کاراکترهای متنی بايد توسط موجوديت های کاراکتری جايگزين شوند .
• فضای خالی و خط جديد در برازر نديده گرفته می شود، بنابراين می توانند برای خوانائی فايل HTML استفاده شوند.
• اگر مرورگر تگی را نشناسد آنرا نديده می گيرد.


ايجاد يک وب سايت ساده

برای ايجاد يک سايت وب ساده سه فايل زير را روی کامپيوتر خود کپی کنيد (راست کليک کرده و save link as يا save target as) را انتخاب کنيد. بعد از کپی با دوبار کليک کردن روی فايل mainpage.html اولين وب سايت خود را در عمل روی برازر پيش فرض خود مشاهده خواهيد کرد.

mainpage.html
page1.html
page2.html

در هر اديتور متنی (مانند Notepad) می توانيد مستندهای HTML فوق را مشاهده و ويرايش کنيد. اگر تگی مشاهده کرديد که معنی آنرا نمی دانيد نگران نباشيد زيرا در بخش های آتی درباره آنها توضيح داده خواهد شد.


تگ های پايه

در اين قسمت تگ هائی که در صفحات وب به کرار استفاده می شوند توضيح داده می شود.

سرتيتر

هر مستند HTML به صورت مجموعه ای از بلوک های متنی ساخته می شود. هر بلوک می تواند مستقلا قالب بندی بشود. بلوک به صورت سرتيتر يا پاراگراف است. تقريبا باقی متن، تصاوير و لينکها درون يک بلوک قرار می گيرند. (به استثنای ليست ها و جداول که بعدا توضيح داده می شوند).

از سرتيتر ها برای مشخص کردن ساختار مستند و عناوين متن ها استفاده می شود. شش سطح سرتيتر وجود دارد. اگرچه در اکثر موارد سه سطح کافی به نظر می رسد.

سرتيتر توسط تگ های <h1> تا <h6> تعيين می شوند. <h1> بزرگترين و <h6> کوچکترين تيتر را مشخص می کند.

<h1>بزرگترين سرتيتر برای عنوان های اصلی بايد استفاده شود و اغلب مشابه متنی است که در تگ <head> ذکر می شود. تگ های <h2> و <h3> را برای زيربخش های مستند استفاده کنيد.


مثال.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>

تگ های فوق در مرورگر به صورت زير مشاهده می شوند.

Heading Example

نکته. مرورگر بعد از سرتيتر يک خط خالی اضافه می کند.
نکته. از آنجائيکه کاربران صفحه شما را توسط سرتيترها مرور می کنند استفاده از آنها برای نمايش ساختار مستند اهميت دارد.
نکته. اگر متوجه شديد به سطوح بيشتری از سرتيتر نياز داريد بهتر است صفحه وب خودتان را به صفحات کوچکتری بشکنيد تا اينکه آن را به صورت يک صفحه بزرگ شلوغ طراحی کنيد.
نکته. از سرتيتر ها تنها برای عناوين استفاده کنيد و برای پررنگ و بزرگ کردن متن استفاده نکنيد.
نکته. موتورهای جستجو از سرتيترها برای ايندکس زدن ساختار و محتوای صفحات وب استفاده می کنند.


پاراگراف

اطلاعات اغلب به صورت پاراگرافی از متن ها هستند. هر پاراگراف بايد به طور واضح در مستند تگ بخورد. هر پاراگراف می تواند اطلاعات فرمت بندی را داشته باشد.

تگ <p> يک پاراگراف را مشخص می کند.


مثال.

<p>This is a paragrap</p>
<p>This is another paragraph</p>


خط افقی

تگ <hr> برای ايجاد يک خط افقی استفاده می شود. خطوط افقی برای جدا کردن صفحه و سازماندهی ظاهر صفحه مفيد هستند.

<p>This is a paragraph</p>
<hr/>
<p>This a paragraph</p>
<hr/>
<p>This is a paragraph</p>

نتيجه تگ های فوق در مرورگر به صورت زير می باشد.

Paragraph and Line Example

لينک

قدرت صفحات وب در پيوند مستندات به يکديگر است. برای پيوند به سند ديگری در وب از هايپرلينک (hyperlink) استفاده می شود. هايپرلينک ها کلمات زيرخط داری هستند که وقتی روی آن کليد می کنيد شما را به صفحه ديگر يا قسمت ديگری در همان صفحه می برند.

انواع پيوند ها توسط تگ <a> تعريف می شود. آدرس مقصد توسط صفت href مشخص می شود.


مثال.

<a href="web0100.html">HTML Tutorial</a> This is a link to a page on this website.
<a href="http://www.google.com/">Google</a> This is a link to a website on the

لينک های فوق در مرورگر به صورت زير مشاهده می شوند.

Hyperlink Example

نکته. هايپرلينک ها را علاوه بر متن می توان روی تصاوير هم بکار گرفت.
نکته. برای بازکردن ايميل کلاينت با ايميل آدرس شما و عنوان تعريف شده به صورت زير می توانيد از هايپرلينک استفاده کنيد:

<a href="mailto:hpkasmaii@yahoo.com?subject=testing">Send E-Mail to me</a>


تصوير

بعد از پيوند تصاوير دومين بخش جذاب صفحات وب هستند.

تصاوير با تگ <img> مشخص می شوند. نام فايل، پهنا و ارتفاع کادر تصوير به ترتيب توسط صفات src، width و height تعيين می شوند.


مثال.

<img src="w3schools.jpg" width="104" height="142" >


نکته. دقت کنيد تگ های <img> و <hr> تگ پايانی ندارند.


جدول

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

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

جدول توسط تگ <table> تعريف می شوند. يک سطر در جدول با تگ <tr> مشخص می شود. هر سطر به چند سلول تقسيم می شود که با تگ <td> شروع می شود. يک سلول داده می تواند شامل متن، تصوير، پاراگراف، فرم، خط افقی، جداول و غيره باشد.


مثال. تگ های زير يک جدول با سه سطر و دو ستون رسم می کنند. تگ <th> سرستون ها را تعيين می کنند.

<table border="1">
<tr>
<th>Heading</th><th>Another Heading</th></tr>
<tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>


نکته. خصوصيت border برای رسم خطوط اطراف جدول است و اگر با صفر مقداردهی شود اطراف جدول خطی رسم نمی شود.


ليست

HTML از سه نوع ليست مرتب، نامرتب و تعريفی پشتيبانی می کند.

مثال. ليست مرتب.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

در مرورگر به صورت زير مشاهده می شود

  1. Coffee
  2. Milk

مثال. ليست بدون ترتيب.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

در مرورگر به صورت زير مشاهده می شود

  • Coffee
  • Milk

مثال. ليست تعريفی.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

در مرورگر به صورت زير مشاهده می شود

Coffee
Black hot drink
Milk
White cold drink

 

 


 

صفحه اصلی| PDF| درباره| تماس