آموزش HTML - قسمت دوم (عناصر ، خصوصیات ، عنوان یا سرتیتر و پاراگراف ها)

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

عناصر (Element)

یک عنصر در HTML، هر چیزی از تگ شروع تا تگ پایان می باشد:

*تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.

نحوه نوشتن یک عنصر در HTML
  • یک عنصر با یک تگ شروع (تگ باز) آغاز می شود.
  • یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.
  • محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.
  • بعضی از عناصر در HTML تهی هستند.
  • عناصر تهی در همان تگ شروع بسته می شود.
  • بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.

توجه: در ادامه آموزش در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.

عناصر تو در تو در  HTML

بیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)

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

مثالی از یک سند HTML
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

مثال بالا شامل سه عنصر زیر می باشد:

1- عنصر <p>
<p>This is my first paragraph.</p>

عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.
این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.
محتوای این عنصر "This is my first paragraph" می باشد.

2- عنصر <body>
<body>
<p>This is my first paragraph.</p>
</body>

عنصر <body> بدنه یک سند HTML را توصیف می کند.
این عنصر دارای تگ شروع <body> و تگ پایان <body/> می باشد.

محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.

3- عنصر <html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

عنصر <html> تمام سند html را توصیف می کند.

این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.

محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.


* تگ پایان را فراموش نکنید

در بعضی عناصر HTML حتی اگر تگ پایان را فراموش کنید ممکن است آن عنصر درست عمل کند:

<p>This is a paragraph
<p>This is a paragraph

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

هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.


عناصر تهی

عناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.

عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)

نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.


نکته: تگ ها را با حروف کوچک بنویسید

تگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.


خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.

خصوصیت ها (Attributes) در HTML

  • تمام عناصر در HTML دارای خصوصیت هستند.
  • خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.
  • خصوصیت ها همیشه در تگ شروع نوشته می شوند.
  • خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)

مثال:

لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک به وسیله خصوصیت href مشخص می شود.

<a href=&quothttps://w3schools.com&quot>This is a link</a>


همیشه مقدار خصوصیت را در کوتیشن بنویسید

مقدار خصوصیت ها همیشه باید درون کوتیشن قرار بگیرد.

دابل کوتیشن رایج تر است، اما تک کوتیشن نیز مجاز است.

*نکته: در بعضی حالت های خاص، هنگامی که مقدار خصوصیتی خود حاوی کوتیشن نیز هست، ضروری است که از تک کوتیشن استفاده کنیم.

مثل: 'name='John "ShotGun" Nelson


نکته: از حروف کوچک برای خصوصیت ها استفاده کنید

نام خصوصیت و مقدار آن حساس به حروف نمی باشند.

اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.

در نسخه های جدید (HTML (X نوشتن حروف کوچک برای خصوصیت ها و مقادیرشان استاندارد شده است.


در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:


عنوان یا سرتیتر (Headings) در HTML

عنوان ها در سندهای HTML، عناصر مهمی هستند.

عنوان ها در HTML

عنوان یا سرتیتر در HTML به وسیله تگ های <h1> تا <h6> تعریف می شود.

تگ <h1> برای مهمترین سرتیتر استفاده می شود. تگ <h6> کم اهمیت ترین سرتیتر را تعریف می کند.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

نکته: مرورگرها به طور خودکار مقداری فضای خالی (یک حاشیه) را قبل و بعد از هر سرتیتری اضافه می کنند.


سرتیترها عناصر مهمی هستند

از عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.

موتورهای جستجو از سرتیترهای شما برای شاخص گذاری ساختار و محتوای صفحات وب شما استفاده می کنند.

از آنجایی که کاربران ممکن است صفحات وب شما را با نگاه کردن به سرتیترها از نظر بگذرانند، استفاده از سرتیترها برای اینکه ساختار سند را نشان دهید مهم است.

تگ h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.


ایجاد خطوط افقی در HTML

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

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

توضیحات (Comment ها) در HTML

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

توضیحات به صورت زیر نوشته می شوند:

<!-- This is a comment -->

نکته: علامت تعجب بعد از علامت باز نوشته می شود نه قبل از علامت بسته.


نکته: چگونه کدهای HTML را ببینیم

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

برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در  Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.


مثال - خودتان امتحان کنید

چگونه سرتیترها را در یک سند HTML نشان دهیم.

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>


چگونه توضیحی را در کد HTML درج کنیم.

<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body> 
</html>


چگونه خط افقی درج کنیم.

<html>
<body>

<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

</body>
</html>


منبعی از تگ ها در HTML

در فصل های بعد در مورد تگ های HTML و خصوصیت های آن ها بیشتر خواهید آموخت.


پاراگراف ها (Paragraphs) در HTML

پاراگراف ها، قسمت عمده ای از یک سند HTML را تشکیل می دهند.


پاراگراف ها در HTML

پاراگراف ها به وسیله تگ <p> تعریف می شوند.

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

نکته: مرورگرها به طور خودکار یک خط خالی را قبل و بعد از پاراگراف اضافه می کند.


تگ پایان را فراموش نکنید

اغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.

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

مثال بالا در بیشتر مرورگرها عمل می کند، اما به آن اطمینانی نیست. فراموش کردن تگ پایان می تواند نتایج غیر منتظره یا خطاهایی را ایجاد کند.

تذکر: نسخه های آینده HTML به شما اجازه نمی دهد که تگ پایان را فراموش کنید.


رفتن به خط جدید در HTML

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

<p>This is<br />a para<br />graph with line breaks</p>

عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.


<br> یا </ br>

در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.

اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.


خروجی HTML - نکات مفید

شما نمی توانید مطمئن شوید که کدهای HTML چگونه نمایش داده خواهد شد. صفحات نمایش بزرگ یا کوچک و تغییر اندازه پنجره ها نتایج متفاوتی را به همراه دارد.

هنگام نوشتن کدهای HTML، نباید انتظار داشته باشید که فاصله ها یا خط های اضافه در کدهای HTML در خروجی مرورگر نیز فاصله یا خط اضافه دیده شوند.

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

<html>
<body>

<p>شعر زیر، در مرورگر پشت سرهم و در یک خط نمایش داده خواهد شد</p>

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</p>

<p>Note that your browser ignores the layout!</p>

</body>
</html>

(اگر این مثال را اجرا کنید بعضی از مشکلات فرمت دهی را در HTML نشان می دهد.)


عنصر <pre> در HTML

با استفاده از عنصر <pre> می توانید فاصله ها و خط های اضافی داخل متن را به همان صورت در مرورگر نمایش دهید:

<p>فاصله و خط های اضافی در شعر زیر به همان صورت نمایش داده خواهد شد</p>

<p>The pre tag is needed for displaying poems:</p>

<pre>
 
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

</pre>


مثال - خودتان امتحان کنید

چگونه پاراگراف ها در مرورگر نشان داده می شود.

<html>
<body>

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

</body>
</html>


رفتن به خط جدید در سندهای HTML.

<html>
<body>

<p>This is<br />a para<br />graph with line breaks</p>

</body>
</html>


بعضی مشکلات در فرمت دهی در HTML.

<html>
<body>

<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>


<p>Note that your browser ignores the layout!</p>

</body>
</html>


رفتارهای پیش فرض در پاراگراف ها.

<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>


منبع تگ های HTML

منبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.