HTML الهيدر
الهيدر هو وعاء للبيانات الوصفية ويتم وضعها بين <html> و <body>.
بيانات تعريف HTML هي بيانات حول مستند HTML. لا يتم عرض البيانات التعريفية.
تحدد البيانات التعريفية عادةً عنوان المستند ومجموعة الأحرف والأنماط والبرامج النصية ومعلومات التعريف الأخرى.
العلامات التالية تصف الفوقية: <title>، <style>، <meta>، <link>، <script>، و <base>.
HTML <title> العنصر
<title>يحدد عنوان الوثيقة، ومطلوب في جميع وثائق HTML.
<title>:
- يحدد عنوانًا في علامة تبويب المتصفح
- يوفر عنوانًا للصفحة عند إضافتها إلى المفضلة
- يعرض عنوان الصفحة في نتائج محرك البحث
مستند HTML بسيط:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <style> العنصر
<style> تستخدم لتحديد نمط المعلومات لصفحة HTML واحدة:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> العنصر
<link> تستخدم لتصل إلى أوراق الأنماط الخارجية:
<link rel="stylesheet" href="mystyle.css">
HTML <meta> العنصر
<meta> تستخدم لتحديد مجموعة الأحرف التي يتم استخدامها، وصف الصفحة، والكلمات الرئيسية، والمؤلف، وغيرها من البيانات الوصفية.
يتم استخدام البيانات التعريفية بواسطة المستعرضات (كيفية عرض المحتوى) ، ومحركات البحث (الكلمات الرئيسية) ، وخدمات الويب الأخرى.
<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">
قم بتحديث المستند كل 30 ثانية:
<meta http-equiv="refresh" content="30">
مثال على <meta>:
<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
قدم HTML5 طريقة للسماح لمصممي الويب بالسيطرة على منفذ العرض ، من خلال <meta>.
إطار العرض هو المساحة المرئية للمستخدم بصفحة الويب. يختلف مع الجهاز ، وسيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.
يجب عليك تضمين <meta> منفذ العرض التالي في جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">العرض يعطي تعليمات متصفح على كيفية السيطرة على أبعاد الصفحة والتحجيم.
يقوم العرض = جزء عرض الجهاز بتعيين عرض الصفحة لمتابعة عرض شاشة الجهاز (والذي سيختلف حسب الجهاز).
يعين الجزء الأولي = 1.0 مستوى التكبير / التصغير الأولي عندما يتم تحميل الصفحة لأول مرة بواسطة المستعرض.
عنصر HTML <script>
<script> تستخدم لتحديد جافا سكريبت من جانب العميل.
يكتب JavaScript هذا “Hello JavaScript!” في عنصر HTML مع id = “demo”:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
HTML <base> العنصر
<base>يحدد عنصر عنوان URL الأساسي والهدف الأساسي لجميع عناوين URL النسبية في الصفحة:
<base href="https://www.platformspot.com/images/" target="_blank">
هل تريد حذف <html> و <head> و <body>؟
وفقا لمعيار HTML5 ؛ <html>، و <body>، و <head> يمكن حذفها.
سيتم التحقق من صحة الرمز التالي كـ HTML5:
<!DOCTYPE html><title>Page Title</title><h1>This is a heading</h1><p>This is a paragraph.</p>
ملحوظة: منصة لا توصي بحذف <html>و <body>. يمكن أن يؤدي حذف هذه العلامات إلى تعطل برنامج DOM أو XML وإنتاج أخطاء في المتصفحات القديمة (IE9).
ومع ذلك ، فإن حذف <head> ممارسة شائعة.
العلامات
| السمة | الوصف |
|---|---|
| <head> | يحدد معلومات حول الوثيقة |
| <title> | يحدد عنوان الوثيقة |
| <base> | يحدد عنوانًا افتراضيًا أو هدفًا افتراضيًا لجميع الروابط على الصفحة |
| <link> | يحدد العلاقة بين وثيقة ومورد خارجي |
| <meta> | يعرف البيانات الأولية عن وثيقة HTML |
| <script> | يحدد البرنامج النصي من جانب العميل |
| <style> | يحدد معلومات النمط للمستند |
One Comment