HTML چیست؟ قسمت اول

  • October 7, 2022 12:05 pm
  1. مقدمه
  3. مثال های پایه HTML
  4. عناصر HTML
  5. Attributes (ویژگی ها) در HTML
  6. Headings (عناوین) در HTML
  7. پاراگراف در HTML

–

۱. مقدمه

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

HTML چیست؟

  • HTML مخفف Hyper Text Markup Language است
  • HTML زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است
  • HTML ساختار یک صفحه وب را توصیف می کند
  • HTML از یک سری عناصر تشکیل شده است
  • عناصر HTML به مرورگر می گویند که چگونه محتوا را نمایش دهد
  • عناصر HTML به قطعاتی از محتوا مانند “این یک عنوان است”، “این یک پاراگراف است”، “این یک پیوند است” و غیره برچسب (tag) می زنند.

یک سند HTML ساده

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
flesh
html

توضیح مثال بالا:

  • اعلان <DOCTYPE html!> تعریف می کند که این سند یک سند HTML5 است.
  • عنصر <html> عنصر اصلی یک صفحه HTML است.
  • عنصر <head> حاوی اطلاعات متا در مورد صفحه HTML است.
  • عنصر <title> عنوانی را برای صفحه HTML مشخص می کند (که در نوار عنوان مرورگر یا در برگه صفحه نشان داده می شود)
  • عنصر <body> بدنه سند را تعریف می کند و محفظه ای برای تمام محتویات قابل مشاهده مانند سرفصل ها، پاراگراف ها، تصاویر، لینک ها، جداول، لیست ها و غیره است.
  • عنصر <h1> یک عنوان تیتر را تعریف می کند.
  • عنصر <p> یک پاراگراف را تعریف می کند.

عنصر HTML چیست؟

یک عنصر HTML با یک تگ شروع، مقداری محتوا و یک تگ پایان تعریف می شود:
<tagname> Content goes here... </tagname>
در عنصر HTML همه چیز بین تگ شروع و تگ پایان قرار دارد:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
تگ شروع محتوای عنصر تگ پایان
<h1> My First Heading <h1/>
<p> My first paragraph. <p/>
<br> none none

توجه: برخی از عناصر HTML فاقد محتوا هستند (مانند عنصر <br>). به این عناصر عناصر خالی می گویند. عناصر خالی برچسب (tag) پایانی ندارند!

مرورگرهای وب

وظیفه مرورگر وب (Chrome، Edge، Firefox، Safari) خواندن اسناد HTML و نمایش صحیح آنهاست.
 
یک مرورگر تگ های HTML را نمایش نمی دهد، اما از آنها برای تعیین نحوه نمایش سند استفاده می کند:

ساختار صفحه HTML

در زیر تصویری از ساختار صفحه HTML آمده است:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

توجه: محتوای داخل بخش <body> (ناحیه سفید بالا) در یک مرورگر نمایش داده می شود. محتوای داخل عنصر <title> در نوار عنوان مرورگر یا در صفحه tab نمایش داده می شود.

برو بالا 🡱

–

۲. ویرایشگرهای HTML

یک ویرایشگر متن ساده تمام چیزی است که برای نوشتن کدهایHTML نیاز دارید!
 
صفحات وب را می توان با استفاده از ویرایشگرهای حرفه ای HTML ایجاد و اصلاح کرد.
با این حال، برای یادگیری HTML یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه می کنیم زیرا استفاده از یک ویرایشگر متن ساده راه خوبی برای یادگیری HTML است.
 
برای ایجاد اولین صفحه وب خود با Notepad مراحل زیر را دنبال کنید.
 
  1. برنامه Notepad را باز کنید
  2. کدهای HTML خود را درون آن بنویسید:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

مانند زیر:

  1. فایل را با فرمت HTML ذخیره کرده و Encoding را روی UTF-8 قرار دهید.

نکته: می توانید از htm. یا .html. به عنوان پسوند فایل استفاده کنید.

  1. فایل را در مرورگر خود باز کنید.
فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید یا راست کلیک کنید – و “Open with” را انتخاب کنید).
برو بالا 🡱

–

۳. مثال های پایه HTML

در این فصل چند مثال اولیه HTML را ایجاد می کنیم.
اگر از برچسب هایی استفاده می کنیم که هنوز آن ها را یاد نگرفته اید، نگران نباشید.
 
  • همه اسناد HTML باید با یک اعلان نوع سند شروع شوند: <DOCTYPE html!>.
  • خود سند HTML با <html> شروع می شود و با </html> به پایان می رسد.
  • قسمت قابل مشاهده سند HTML بین <body> و </body> است.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

flesh
html

اعلان <!DOCTYPE>

  • اعلان <DOCTYPE!> نوع سند را نشان می دهد و به مرورگرها کمک می کند تا صفحات وب را به درستی نمایش دهند.
  • <DOCTYPE!> فقط باید یک بار، در بالای صفحه (قبل از هر تگ HTML) ظاهر شود.
  • اعلان <DOCTYPE!> به حروف کوچک و بزرگ حساس نیست.
  • اعلان <DOCTYPE!> برای HTML5 به صورت زیر است:
<!DOCTYPE html>

عنوان ها در HTML

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

مثال:

<!DOCTYPE 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>
flesh

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

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

پاراگراف های HTML با تگ <p> تعریف می شوند:
 
مثال:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
flesh

This is a paragraph.

This is another paragraph.

لینک در HTML

پیوندهای HTML با تگ <a> تعریف می شوند:
 
مثال:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.ra.com">This is a link</a>

</body>
</html>
flesh

HTML Links

HTML links are defined with the a tag:

This is a link
  • مقصد لینک در ویژگی href مشخص شده است.
  • از ویژگی ها (Attributes) برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.

در قسمت های بعد در مورد ویژگی ها (Attributes) بیشتر خواهید آموخت.

تصاویر در HTML

تصاویر در HTML با تگ <img> تعریف می شوند.
 
فایل منبع (src)، متن جایگزین (alt)، عرض و ارتفاع به عنوان ویژگی ارائه شده است:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="raiatec.jpg" alt="raiatec.com" width="150" height="53">

</body>
</html>
flesh
raiatec.com

نحوه مشاهده کد منبع HTML

در یک صفحه HTML کلیک راست کرده و “View Page Source” (در کروم) یا “View Source” (در Edge) یا موارد مشابه را در سایر مرورگرها انتخاب کنید. با این کار پنجره ای باز می شود که حاوی کد منبع HTML آن صفحه است.
 
همچنین می توانید روی یک عنصر (یا یک ناحیه خالی) کلیک راست کرده و “Inspect” یا “Inspect Element” را انتخاب کنید تا ببینید از چه المان هایی تشکیل شده است (هم HTML و هم CSS را خواهید دید). همچنین می‌توانید HTML یا CSS را در پانل Elements یا Styles ویرایش کنید.
برو بالا 🡱

–

۴. عناصر HTML

یک عنصر یا المان HTML با یک تگ شروع، مقداری محتوا و یک تگ پایان تعریف می شود.
 
مثال:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
تگ پایان محتوای عنصر تگ شروع
<h1/> My First Heading <h1>
<p/> .My first paragraph <p>
none none <br>

توجه: برخی از عناصر HTML فاقد محتوا هستند (مانند عنصر <br>). به این عناصر عناصر خالی می گویند. عناصر خالی تگ پایانی ندارند!

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

عناصر HTML را می توان تو در تو قرار داد (به این معنی که عناصر می توانند عناصر دیگری را نیز در بر گیرند).
 
تمام اسناد HTML از عناصر HTML تو در تو تشکیل شده اند.
مثال زیر شامل چهار عنصر HTML است (<html>، <body>، <h1> و <p>):
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
flesh

My First Heading

My first paragraph.

توضیح:

عنصر <html> عنصر ریشه است و کل سند HTML را تعریف می کند.
دارای یک تگ شروع <html> و یک تگ پایان <html/> است.
سپس در داخل عنصر <html> یک عنصر <body> وجود دارد:
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
عنصر <body> بدنه سند را تعریف می کند.
دارای یک تگ شروع <body> و یک تگ پایان <body/> است.
سپس در داخل عنصر <body> دو عنصر دیگر وجود دارد: <h1> و <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
عنصر <h1> یک عنوان را تعریف می کند.
دارای یک تگ شروع <h1> و یک تگ پایان <h1/> است:
<h1>My First Heading</h1>
عنصر <p> یک پاراگراف را تعریف می کند.
دارای یک تگ شروع <p> و یک تگ پایان <p/> است:
<p>My first paragraph.</p>

هرگز تگ پایان را نادیده نگیرید

برخی از عناصر HTML به درستی نمایش داده می شوند، حتی اگر تگ پایان را فراموش کنید:
<!DOCTYPE html>
<html>
<body> 

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

</body>
</html>
flesh

This is a paragraph.

This is a paragraph.

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

عناصر HTML خالی

عناصر HTML بدون محتوا عناصر خالی نامیده می شوند.
تگ <br> یک شکست خط را تعریف می کند و یک عنصر خالی بدون تگ بسته است:
<p>This is a <br> paragraph with a line break.</p>
flesh

This is a
paragraph with a line break.

HTML به حروف بزرگ و کوچک حساس نیست

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

–

۵. Attributes (ویژگی ها) در HTML

ویژگی های HTML یا attributes اطلاعات بیشتری در مورد عناصر HTML ارائه می دهند.

HTML Attributes

  • همه عناصر HTML می توانند دارای ویژگی یا attribute باشند
  • ویژگی ها اطلاعات بیشتری در مورد عناصر ارائه می دهند
  • ویژگی ها همیشه در تگ شروع مشخص می شوند
  • مشخصه ها معمولاً به صورت جفت نام/مقدار مانند: “name = “value می آیند

ویژگی href

تگ <a> یک هایپرلینک را تعریف می کند. ویژگی href URL صفحه ای را که پیوند به آن می رود مشخص می کند:
 
مثال:
<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link 
     address is specified in the href attribute:</p>

<a href="https://www.raiatec.com">Visit raiatec</a>

</body>
</html>
flesh

The href Attribute

HTML links are defined with the a tag. The link address is specified in the href attribute:

Visit raiatec

ویژگی src

تگ <img> برای جاسازی یک تصویر در صفحه HTML استفاده می شود. ویژگی src مسیر تصویر نمایش داده شده را مشخص می کند:
<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename 
     of the image source is specified in the src attribute:</p>

<img src="img_layers.png" width="520" height="270">

</body>
</html>
flesh

The src Attribute

HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:

language layers

ویژگی عرض و ارتفاع

تگ <img> همچنین باید دارای ویژگی های width و height باشد که عرض و ارتفاع تصویر را (بر حسب پیکسل) مشخص می کند.

ویژگی alt

ویژگی alt لازم برای تگ <img> یک متن جایگزین برای یک تصویر مشخص می کند. اگر تصویر به دلایلی بارگذاری نشود این متن نمایش داده می شود. همچنین این متن در دستگاههای صفحه خوان قابل استفاده است.
<img src="img_girl.jpg" alt="Girl with a jacket">

ویژگی style

ویژگی style برای افزودن سبک به یک عنصر مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شود.
 
مثال:
<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add 
     styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>
</html>
flesh

The style Attribute

The style attribute is used to add styles to an element, such as color:

This is a red paragraph.

ویژگی lang (زبان)

همیشه باید ویژگی lang را در تگ <html> قرار دهید تا زبان صفحه وب را اعلام کنید. این برای کمک به موتورهای جستجو و مرورگرها است.
 
مثال زیر انگلیسی را به عنوان زبان مشخص می کند:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
کدهای کشور همچنین می توانند به کد زبان در ویژگی lang اضافه شوند. بنابراین، دو کاراکتر اول زبان صفحه HTML و دو کاراکتر آخر کشور را مشخص می‌کنند.

مثال زیر انگلیسی را به عنوان زبان و ایالات متحده را به عنوان کشور مشخص می کند:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

ویژگی title

ویژگی title ( عنوان ) اطلاعات اضافی در مورد یک عنصر را تعریف می کند.
 
هنگامی که ماوس را روی عنصر قرار می دهید، مقدار ویژگی title به عنوان یک tooltip نمایش داده می شود:
<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to 
     display the title attribute as a tooltip.</p>

</body>
</html>
flesh

The title Attribute

Mouse over this paragraph, to display the title attribute as a tooltip.

مقادیر ویژگی را درون علامت نقل قول قرار دهید

HTML استاندارد نیازی به نقل قول در اطراف مقادیر ویژگی ندارد ولی توصیه می شود از علامت نقل قول استفاده کنید.
good:
<a href="https://www.raiatec.com/html/">Visit our HTML tutorial</a>

bad:

<a href=https://www.raiatec.com/html/>Visit our HTML tutorial</a>

نقل قول تکی استفاده کنیم یا دو تایی؟

نقل قول های دوتایی در اطراف مقادیر مشخصه رایج ترین در HTML هستند، اما می توان از نقل قول های تکی نیز استفاده کرد.
 
در برخی شرایط، زمانی که مقدار مشخصه خود دارای گیومه های دوگانه است، لازم است از نقل قول های تکی استفاده شود:
<p title='John "ShotGun" Nelson'>

یا برعکس:

<p title="John 'ShotGun' Nelson">

خلاصه این قسمت:

  • همه عناصر HTML می توانند دارای ویژگی باشند
  • ویژگی href از تگ <a> نشانی اینترنتی صفحه ای را که پیوند به آن می رود مشخص می کند
  • ویژگی src از تگ <img> مسیر تصویری را که قرار است نمایش داده شود را مشخص می کند
  • ویژگی های width و height از تگ <img> اطلاعات اندازه را برای تصاویر فراهم می کند
  • ویژگی alt از تگ <img> یک متن جایگزین برای یک تصویر فراهم می کند
  • ویژگی style برای افزودن سبک به یک عنصر مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شود
  • ویژگی lang تگ <html> زبان صفحه وب را اعلام می کند
  • ویژگی title اطلاعات اضافی در مورد یک عنصر را تعریف می کند
برو بالا 🡱

–

۶. Headings (عناوین) در HTML

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


مثال:
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
flesh

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

عنوان ها مهم هستند

موتورهای جستجو از عنوان ها برای ایندکس ساختار و محتوای صفحات وب شما استفاده می کنند.
 
کاربران اغلب یک صفحه را بر اساس عناوین آن مرور می کنند. استفاده از سرفصل ها برای نشان دادن ساختار سند اهمیت دارد.
عنوان های <h1> باید برای تیترهای اصلی و بعد از آن <h2> برای تیتر های کم‌اهمیت تر و سپس <h3> و غیره استفاده می شوند.

توجه: از عنوان های HTML فقط برای سرفصل ها استفاده کنید. از Heading برای بزرگ یا بولد کردن متن استفاده نکنید.

عناوین بزرگتر

هر عنوان HTML یک اندازه پیش فرض دارد. با این حال، می توانید اندازه هر عنوان را با ویژگی style با استفاده از ویژگی font-size در CSS مشخص کنید:
 
مثال:
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the 
    style attribute, using the font-size property.</p>

</body>
</html>
flesh

Heading 1

You can change the size of a heading with the style attribute, using the font-size property.

برو بالا 🡱

–

۷. پاراگراف در HTML

یک پاراگراف همیشه از یک خط جدید شروع می شود و معمولاً یک بلوک متن است.
 
عنصر یا المان <p> یک پاراگراف را تعریف می کند.
 
یک پاراگراف همیشه از یک خط جدید شروع می شود و مرورگرها به طور خودکار مقداری فضای سفید (حاشیه) قبل و بعد از پاراگراف اضافه می کنند.
 
مثال:
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
flesh

This is a paragraph.

This is a paragraph.

This is a paragraph.

نمایش پاراگراف ها در صفحه HTML

صفحه نمایش های بزرگ یا کوچک و یا تغییر اندازه پنجره مرورگر ، نتایج متفاوتی در نمایش پاراگراف ها ایجاد می کند.
 
با HTML، نمی‌توانید نحوه نمایش پاراگراف را با افزودن فاصله یا خطوط اضافی در کد HTML خود تغییر دهید.
 
هنگامی که صفحه HTML نمایش داده می شود، مرورگر به طور خودکار هر فاصله و خط اضافی را حذف می کند.
 
مثال:
 
<!DOCTYPE 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 the browser window. If you resize the browser 
window, the number of lines in this paragraph will change.
</p>

</body>
</html>
flesh

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

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

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

خط افقی در HTML

از تگ <hr> برای جدا سازی محتوا در یک صفحه HTML استفاده می شود.
 
 
مثال:
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>
flesh

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

نکته: تگ <hr> یک تگ خالی است، به این معنی که تگ پایانی ندارد.

شکست خط در HTML

تگ <br> یک شکست در خطوط متن  ایجاد می کند.
 
اگر می‌خواهید بدون شروع یک پاراگراف جدید، یک خط جدید ایجاد کنید، از تگ <br> استفاده کنید.
 
مثال:
<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>
flesh

This is
a paragraph
with line breaks.

نکته: تگ <br> یک تگ خالی است، به این معنی که تگ پایانی ندارد.

استفاده از تگ <pre>

از تگ <pre> برای متن از پیش فرمت شده استفاده می شود.
متن داخل عنصر <pre> با یک فونت با عرض ثابت (معمولاً Courier) نمایش داده می‌شود، و هم فاصله‌ها و هم خطوط شکسته را حفظ می‌کند.
 
در مثال زیر چند بیت شعر را یک بار با تگ پاراگرف <p> و یک بار با تگ <pre> نمایش می دهیم:
<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</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>


<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>

</body>
</html>
flesh

In HTML, spaces and new lines are ignored:

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.

   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.
برو بالا 🡱

منبع:

w3schools.com

❮ بعدی
html