در جلسه شانزدهم از مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش کار با عنصر 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 را در زیر مشاهده می نمایید
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html>پیشنمایش
عنصر <style> در HTML
از عنصر <style> برای تعریف استایل یک صفحه ی HTML استفاده میشود :
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>پیشنمایش
عنصر <link> در HTML
<link rel="stylesheet" href="mystyle.css">پیشنمایش
عنصر <meta> در HTML
عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود. متا دیتا ها به وسیله مرورگر ها (چطور محتوا را نمایش دهند) ، موتور های جستجو (کلمات کلیدی) ، و دیگر سرویس های وب استفاده میشوند.
تعریف charset در HTML که مورد استفاده قرار میگیرد :
<meta charset="UTF-8">
تعریف متا description یا توضیحی برای صفحه در HTML
<meta name="description" content="Free Web tutorials">
تعریف متا keywords یا کلمات کلیدی برای موتور های جستجو در HTML
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
تعریف متا author یا نوسنده صفحه در HTML
<meta name="author" content="John Doe">
متا refresh یا بارگذاری دوباره سند در هر 30 ثانیه در HTML
<meta http-equiv="refresh" content="30">
مثالی از تگ های متا در HTML
<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 که در زیر آمده است را در تمام صفحات وب خود وارد کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.
قسمت width=device-width مشخص میکند که طول صفحه باید از طول صفحه نمایش دستگاه پیروی کند (که بسته به نوع دستگاهی که صفحه روی آن نمایش داده میشود تغییر میکند).
قسمت initial-scale=1.0 مشخص میکند که بزرگنمایی اولیه، هنگامی که صفحه برای بار اول در مرورگر لود میشود باید مقدار 1 باشد.
به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :
عنصر <script> در HTML
از عنصر <script> برای تعریف جاوااسکریپت های سمت کاربر استفاده میشود. کد جاوا اسکریپت زیر عبارت “Hello JavaScript!” در عنصری با شناسه ی “id=”demo قرار میدهد :
<script> function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>پیشنمایش
عنصر <base> در HTML
عنصر <base> ، URL و target پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.sourcebaran.com) :
<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 معتبر است:
<!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p>پیشنمایش
نکته مهم : حذف تگ های فوق از صفحه ممکن است باعث برور خطا در نسخه های قدیمی تر اینترنت اکسپلورر شود پس پیشنهاد میشود تا آنجای ممکن از حذف آنها اجتناب کنید.
لیست جلسات قبل آموزش 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
- انتشار: ۲۷ شهریور ۱۳۹۸
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس