اچ تی ام ال (HTML)برنامه نویسی طراحی سایت فرانت اند (Front-end)

تگ html چیست؟ | همه چیز در مورد تگ html

۰ 289 زمان تقریبی مطالعه 2 دقیقه

در بحث های گذشته به معرفی زبان برنامه نویسی HTML و ضرورت یادگیری آن و سپس به معرفی اعلان DOCTYPE پرداختیم. در این قسمت به معرفی و آموزش کامل تگ html که به نوعی والد کل و ریشه (root) یک صفحه اچ تی ام ال است، می پردازیم. پس بار دیگر با آموزش HTML5 از بلاگ ویتکس همراه شوید …

فهرست مطالب

معرفی تگ html

در یک توضیح ساده می توان گفت که تگ html به مرورگرهای وب می گوید که صفحه ای (سندی) که با آن مواجه شده اند، یک صفحه (سند) html است. این تگ به نوعی ریشه یک صفحه وب می باشد. یعنی اینکه تمامی عناصر و اِلمان های یک صفحه وب (به جز اعلان DOCTYPE) فرزند آن هستند و درون آن قرار می گیرند.

محل قرارگیری تگ html دقیقاً پس از اعلان DOCTYPE می باشد.

این تگ با تگِ بازِ <html> شروع و با تگِ بستهِ ی <html/> پایان می یابد و ساختار دستوری آن به صورت زیر است :

<html>
.
.
</html>

<html>

</html>

مثال اول : صفحه HTML5 با محتوای فارسی

کد زیر یک مثال از صفحه ای است که محتوای آن فارسی بوده و با HTML5 طراحی شده است. به کد زیر و توضیحاتی که در ادامه خواهیم داد توجه فرمایید :

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه HTML5 با محتوای فارسی</title>
</head>

<body>
    <p>سلام دنیا!</p>
</body>

</html>

۱۰

۱۱

۱۲

۱۳

۱۴

<!DOCTYPE html>

<head>

<title>صفحه HTML5 با محتوای فارسی</title>

</head>

<body>

سلام دنیا!

</body>

</html>

نمایش خروجی!

صفت lang

صفت lang و مقدار آن به زبان اصلی صفحه وب شما اشاره دارند :

در کد فوق مقدار “fa” برای صفحه ایست که محتوای آن به زبان فارسی (ایران) است.

پس برای وب سایتی با محتوای انگلیسی ، مقدار صفت lang می بایست برابر با “en” باشد.

صفت dir

صفت dir با دو مقدار رایج rtl (راست به چپ) و ltr (چپ به راست)، برای تعیین جهت نوشته های یک صفحه وب به کار می رود.

از آنجایی که زبان فارسی به صورت راست به چپ (Right To Left) و زبان انگلیسی به صورت چپ به راست (Left To Right) نوشته و خوانده می شوند، برای وب های فارسی از “dir=”rtl و برای وب های انگلیسی از “dir=”ltr می بایستی استفاده کنید.

همچنین صفت dir در زبان سی اس اس به صورت زیر قابل پیاده سازی است :

elementName {
    direction: rtl;  /* OR direction: ltr; */
}

elementName {

direction: rtl; /* OR direction: ltr; */

}

مثال دوم : صفحه HTML5 با محتوای انگلیسی

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Page With English Content</title>
</head>

<body>
    <p>Hello World!</p>
</body>

</html>

۱۰

۱۱

۱۲

۱۳

۱۴

<!DOCTYPE html>

<head>

<title>HTML5 Page With English Content</title>

</head>

<body>

Hello World!

</body>

</html>

نمایش خروجی!

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

پرسش : چگونه dir (یا direction) یک وب سایتِ فارسی زبان را که شامل جملات بلند انگلیسی نیز می باشد، تشخیص دهیم؟
چون وب سایت ما فارسی زبان است، قطعا باید “dir=”rtl استفاده نماییم! زیرا تمرکز ما روی کلیّت زبان یک وب سایت است. حال اگر قصد قراردادن محتوای ltr را در صفحه وب فارسی خود داشته باشیم، کافیست که به تگ مربوطه صفت “dir=”ltr یا استایل ;direction: ltr را بدهیم.

مثال سوم : استفاده از جملات انگلیسی در یک صفحه فارسی زبان توسط HTML5

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه HTML5 با محتوای فارسی و جملات انگلیسی</title>
</head>

<body>
    <h2>متن آهنگ Shape Of My Heart از Sting</h2>
    <p dir="ltr">
        He deals the cards as a meditation
        <br>
        And those he plays never suspect
        <br>
        He doesn't play for the money he wins
        <br>
        He don't play for respect
        <br>
        ...
    </p>
</body>

</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

<!DOCTYPE html>

<head>

<title>صفحه HTML5 با محتوای فارسی و جملات انگلیسی</title>

</head>

<body>

<h2>متن آهنگ Shape Of My Heart از Sting</h2>

He deals the cards as a meditation

And those he plays never suspect

He doesn't play for the money he wins

He don't play for respect

...

</body>

</html>

نمایش خروجی!

همان طور که در مثال بالا مشاهده کردید، چون صفحه ما فارسی زبان است، به تگ html، صفت “dir=”rtl اضافه می کنیم. از طرفی نیز چون محتوای تگ p یک متن انگلیسی است، به آن صفت “dir=”ltr می افزاییم.

استایل پیشفرض CSS

به صورت پیشفرض، مرورگرهای وب تگ html را با استایل CSS زیر نمایش می دهند :

html {
  display: block;
}

html:focus {
  outline: none;
}

html {

display: block;

}

html:focus {

outline: none;

}

مرورگرهای سازگار با تگ html

این دستور در تمامی نسخه های مرورگرهای مطرح قابل پشتیبانی است :

مرورگرهای دسکتاپ

گوگل کروم	موزیلا فایرفاکس	اینترنت اکسپلورر	مایکروسافت اج	اپرا	سافاری
همه نسخه ها	همه نسخه ها	همه نسخه ها	نسخه ۱۲ و بالاتر	همه نسخه ها	همه نسخه ها

مرورگرهای موبایل

گوگل کروم	موزیلا فایرفاکس	اپرا	سافاری	سامسونگ اینترنت
همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها