آموزش کار با عنصر Head در HTML
در جلسه شانزدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش کار با عنصر Head در HTML از وب سایت آموزش برنامه نویسی سورس باران.طراحی وب سایت استاندارد معمولا اصول و ترفندهایخود را دارد که هرچه با این ترفند و نکات ها بیشتر آشنا شوید قطعا در این زمینه می توانید بصورت حرفه ای تر عمل نمایید. لطفا تا انتها با ما همراه باشید…
عنصر Head در HTML
عنصر <head> در واقع محفظه‌ای برای متا دیتا (metadata) است و بین تگ <html> و تگ <body> قرار میگیرد. متا دیتا در HTML داده‌ای در مورد سند HTML است اما نمایش داده نمی‌شود. معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات متا را تعریف میکند. تگ‌های <title>، <style>، <meta>، <link>، <script> و <base> اجزایی هستند که متا دیتا را توصیف می‌کنند.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
عنصر <title> در HTML
عنصر <title> عنوان سند HTML را مشخص میکند و در تمام اسناد HTML و XHTML اجباری است.
عنصر <title> :
- عنوانی را برای تب مرورگر تعریف میکند.
- عنوانی را برای صفحه فراهم می آورد که در مورد علاقه ها در مرورگر ها استفاده میشود.
- عنوانی را برای صفحه تعریف میکند که در نتایج موتور های جستجو نمایش داده میشود.
یک سند ساده ی HTML را در زیر مشاهده می نمایید
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html> |
عنصر <style> در HTML
از عنصر <style> برای تعریف استایل یک صفحه ی HTML استفاده میشود :
|
1 2 3 4 5 |
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> |
عنصر <link> در HTML
|
1 |
<link rel="stylesheet" href="mystyle.css"> |
عنصر <meta> در HTML
عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود. متا دیتا ها به وسیله مرورگر ها (چطور محتوا را نمایش دهند) ، موتور های جستجو (کلمات کلیدی) ، و دیگر سرویس های وب استفاده میشوند.
تعریف charset در HTML که مورد استفاده قرار میگیرد :
|
1 |
<meta charset="UTF-8"> |
|
1 |
<meta name="description" content="Free Web tutorials"> |
|
1 |
<meta name="keywords" content="HTML, CSS, XML, JavaScript"> |
|
1 |
<meta name="author" content="John Doe"> |
متا refresh یا بارگذاری دوباره سند در هر 30 ثانیه در HTML
|
1 |
<meta http-equiv="refresh" content="30"> |
مثالی از تگ های متا در HTML
|
1 2 3 4 |
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> |
تنظیم Viewport در HTML
نسخه HTML5 روشی ارائه میدهد که طراحان وب با استفاده از آن می‌توانند از طریق تگ <meta> روی viewport کنترل داشته باشند. viewport ناحیه قابل مشاهده از یک صفحه وب توسط کاربر است که در دستگاه‌های مختلف فرق داشته و روی گوشی‌های موبایل کوچک‌تر از صفحات کامپیوتر شخصی است. شما باید عنصر <meta> مربوط به viewport که در زیر آمده است را در تمام صفحات وب خود وارد کنید:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.
قسمت width=device-width مشخص میکند که طول صفحه باید از طول صفحه نمایش دستگاه پیروی کند (که بسته به نوع دستگاهی که صفحه روی آن نمایش داده میشود تغییر میکند).
قسمت initial-scale=1.0 مشخص میکند که بزرگنمایی اولیه، هنگامی که صفحه برای بار اول در مرورگر لود میشود باید مقدار 1 باشد.
به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :
[alert color=”yellow” icon=””]
نکته : لینک 1 و لینک 2 رو باز نمایید تفاوت بین دو صفحه را میتوانید در موبایل و تبلت مشاهده کنید(در صفحه کامپیوتر خانگی تفاوتی را نخواهید دید). در صورتی که به موبایل و تبلت دسترسی ندارید از شبیه ساز موبایل و تبلت در Inspect مرورگر کروم استفاده کنید.
[/alert]
عنصر <script> در HTML
از عنصر <script> برای تعریف جاوااسکریپت های سمت کاربر استفاده میشود. کد جاوا اسکریپت زیر عبارت “Hello JavaScript!” در عنصری با شناسه ی “id=”demo قرار میدهد :
|
1 2 3 4 5 |
<script> function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> |
عنصر <base> در HTML
عنصر <base> ، URL و target پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.sourcebaran.com) :
|
1 |
<base href="https://www.sourcebaran.com/images/" target="_blank"> |
در مثال بالامرورگر تصویر html5.gif در آدرس https://www.sourcebaran.com/images/ جستجو خواهد کرد.
شاید برایتان جذاب باشد : فیلم آموزش کامل Html به زبان فارسی و بصورت رایگان
حذف تگ های <html> ، <head> و <body> از صفحه HTML
طبق استاندارد html5، تگ‌های <html>، <body> و <head> می‌توانند حذف شوند. کد زیر طبق استاندار html5 معتبر است:
|
1 2 3 4 5 |
<!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p> |
نکته مهم : حذف تگ های فوق از صفحه ممکن است باعث برور خطا در نسخه های قدیمی تر اینترنت اکسپلورر شود پس پیشنهاد میشود تا آنجای ممکن از حذف آنها اجتناب کنید.
[/alert]
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۲۷ شهریور ۱۳۹۸
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- رپورتاژ
- فروشگاه
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- Go
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
