تگ html چیست؟ | همه چیز در مورد تگ html
در بحث های گذشته به معرفی زبان برنامه نویسی HTML و ضرورت یادگیری آن و سپس به معرفی اعلان DOCTYPE پرداختیم. در این قسمت به معرفی و آموزش کامل تگ html که به نوعی والد کل و ریشه (root) یک صفحه اچ تی ام ال است، می پردازیم. پس بار دیگر با آموزش HTML5 از بلاگ ویتکس همراه شوید …
فهرست مطالب
معرفی تگ html
در یک توضیح ساده می توان گفت که تگ html به مرورگرهای وب می گوید که صفحه ای (سندی) که با آن مواجه شده اند، یک صفحه (سند) html است. این تگ به نوعی ریشه یک صفحه وب می باشد. یعنی اینکه تمامی عناصر و اِلمان های یک صفحه وب (به جز اعلان DOCTYPE) فرزند آن هستند و درون آن قرار می گیرند.
محل قرارگیری تگ html دقیقاً پس از اعلان DOCTYPE می باشد.
این تگ با تگِ بازِ <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> |
صفت 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; */ } |
مثال دوم : صفحه 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> |
در دو مثال فوق، برای کل صفحه وب یک زبان و جهت مشخص تعریف نمودیم که بر تمامی عناصر داخلی خود حاکم است (زیرا تگ html به جز اعلان DOCTYPE والد و نگه دارنده تمامی اِلمان های HTML است).
چون وب سایت ما فارسی زبان است، قطعا باید “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> |
همان طور که در مثال بالا مشاهده کردید، چون صفحه ما فارسی زبان است، به تگ html، صفت “dir=”rtl اضافه می کنیم. از طرفی نیز چون محتوای تگ p یک متن انگلیسی است، به آن صفت “dir=”ltr می افزاییم.
استایل پیشفرض CSS
به صورت پیشفرض، مرورگرهای وب تگ html را با استایل CSS زیر نمایش می دهند :
۱ ۲ ۳ ۴ ۵ ۶ ۷ | html { display: block; } html:focus { outline: none; } |
مرورگرهای سازگار با تگ html
این دستور در تمامی نسخه های مرورگرهای مطرح قابل پشتیبانی است :
| پلتفرم | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
 |
| نسخه | ۱۲+ | |||||||||||
امیدواریم از این مقاله نهایت بهره را برده باشید …
