دروس HTML

صفحة HTML الرئيسية مقدمة HTML محرري HTML أساسيات HTML عناصر HTML سمات HTML عناوين HTML فقرات HTML أنماط HTML تنسيق HTML اقتباسات HTML تعليقات HTML ألوان HTML HTML CSS روابط HTML صور HTML رمز HTML المفضل جداول HTML قوائم HTML كتلة HTML ومضمنة فئات HTML معرف HTML إطارات HTML IFrame HTML جافا سكريبت مسارات ملفات HTML رئيس HTML تنسيق HTML مستجيب لـ HTML HTML Computercode دلالات HTML دليل نمط HTML كيانات HTML رموز HTML HTML Emojis أحرف HTML تشفير عنوان URL لـ HTML HTML مقابل XHTML

نماذج HTML

نماذج HTML سمات نموذج HTML عناصر نموذج HTML أنواع مدخلات HTML سمات إدخال HTML سمات نموذج إدخال HTML

رسومات HTML

قماش HTML HTML SVG

وسائط HTML

وسائط HTML فيديو HTML صوت HTML المكونات الإضافية لـ HTML HTML يوتيوب

واجهات برمجة تطبيقات HTML

HTML تحديد الموقع الجغرافي سحب / إسقاط HTML تخزين الويب HTML عمال ويب HTML HTML SSE

أمثلة HTML

أمثلة HTML مسابقة HTML تمارين HTML شهادة HTML ملخص HTML ولوجية HTML

مراجع HTML

قائمة علامات HTML سمات HTML سمات HTML العامة دعم متصفح HTML أحداث HTML ألوان HTML قماش HTML صوت / فيديو HTML أنماط HTML مجموعات أحرف HTML تشفير عنوان URL لـ HTML أكواد HTML لانج رسائل HTTP طرق HTTP PX to EM Converter اختصارات لوحة المفاتيح

HTML - العنصر الرئيسي


يعد عنصر HTML <head>حاوية للعناصر التالية: <title>، <style>، <meta>، <link>، <script>، و <base>.


العنصر <head>

العنصر <head>عبارة عن حاوية للبيانات الوصفية (بيانات حول البيانات) ويتم وضعه بين <html>العلامة <body>والعلامة.

بيانات HTML الوصفية هي بيانات حول مستند HTML. لا يتم عرض البيانات الوصفية.

تحدد البيانات الوصفية عادةً عنوان المستند ومجموعة الأحرف والأنماط والبرامج النصية ومعلومات التعريف الأخرى.


عنصر <title> في HTML

يحدد <title>العنصر عنوان المستند. يجب أن يكون العنوان نصيًا فقط ، ويظهر في شريط عنوان المتصفح أو في علامة تبويب الصفحة.

العنصر <title>مطلوب في مستندات HTML!

تعتبر محتويات عنوان الصفحة مهمة جدًا لتحسين محرك البحث (SEO)! يتم استخدام عنوان الصفحة بواسطة خوارزميات محرك البحث لتحديد الترتيب عند سرد الصفحات في نتائج البحث.

العنصر <title>:

  • يحدد العنوان في شريط أدوات المتصفح
  • يوفر عنوانًا للصفحة عند إضافتها إلى المفضلة
  • يعرض عنوان الصفحة في نتائج محرك البحث

لذا ، حاول أن تجعل العنوان دقيقًا وذا معنى قدر الإمكان!

مستند HTML بسيط:

مثال

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

عنصر <نمط> HTML

يستخدم <style>العنصر لتحديد معلومات النمط لصفحة HTML واحدة:

مثال

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>


عنصر <link> HTML

يحدد <link>العنصر العلاقة بين المستند الحالي والمورد الخارجي.

غالبًا ما يتم <link> استخدام العلامة للارتباط بأوراق الأنماط الخارجية:

مثال

<link rel="stylesheet" href="mystyle.css">

نصيحة: لمعرفة كل شيء عن CSS ، قم بزيارة دروسنا في CSS .


عنصر HTML <meta>

يُستخدم <meta>العنصر عادةً لتحديد مجموعة الأحرف ووصف الصفحة والكلمات الأساسية ومؤلف المستند وإعدادات منفذ العرض.

لن يتم عرض البيانات الوصفية على الصفحة ، ولكن يتم استخدامها بواسطة المستعرضات (كيفية عرض المحتوى أو إعادة تحميل الصفحة) ومحركات البحث (الكلمات الرئيسية) وخدمات الويب الأخرى.

أمثلة

حدد مجموعة الأحرف المستخدمة:

<meta charset="UTF-8">

تحديد الكلمات الأساسية لمحركات البحث:

<meta name="keywords" content="HTML, CSS, JavaScript">

حدد وصفًا لصفحة الويب الخاصة بك:

<meta name="description" content="Free Web tutorials">

حدد مؤلف الصفحة:

<meta name="author" content="John Doe">

قم بتحديث المستند كل 30 ثانية:

<meta http-equiv="refresh" content="30">

تعيين منفذ العرض لجعل موقع الويب الخاص بك يبدو جيدًا على جميع الأجهزة:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

مثال على <meta>العلامات:

مثال

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

إعداد منفذ العرض

منفذ العرض هو المنطقة المرئية للمستخدم لصفحة الويب. يختلف باختلاف الجهاز - سيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.

يجب عليك تضمين <meta>العنصر التالي في جميع صفحات الويب الخاصة بك:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

يوفر هذا إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.

يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).

يضبط الجزء initial-scale=1.0مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.

فيما يلي مثال لصفحة ويب لا تحتوي على العلامة الوصفية لإطار العرض ، ونفس صفحة الويب التي تحتوي على العلامة الوصفية لإطار العرض:

نصيحة: إذا كنت تتصفح هذه الصفحة بهاتف أو كمبيوتر لوحي ، فيمكنك النقر فوق الرابطين أدناه لمعرفة الفرق.



عنصر HTML <script>

يتم <script>استخدام العنصر لتعريف JavaScripts من جانب العميل.

JavaScript التالية تكتب "Hello JavaScript!" في عنصر HTML بالمعرف = "demo":

مثال

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

نصيحة: لمعرفة كل شيء عن JavaScript ، تفضل بزيارة برنامج JavaScript التعليمي .


عنصر <base> HTML

يحدد <base>العنصر عنوان URL الأساسي و / أو الهدف لجميع عناوين URL ذات الصلة في الصفحة.

يجب أن تحتوي <base>العلامة على سمة href أو سمة مستهدفة ، أو كلاهما.

يمكن أن يكون هناك عنصر واحد فقط <base> في المستند!

مثال

حدد عنوان URL افتراضيًا وهدفًا افتراضيًا لجميع الروابط على الصفحة:

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

ملخص الفصل

  • العنصر <head>عبارة عن حاوية للبيانات الوصفية (بيانات حول البيانات)
  • يتم <head>وضع العنصر بين <html>العلامة <body>والعلامة
  • العنصر <title>مطلوب ويحدد عنوان المستند
  • يستخدم <style>العنصر لتحديد معلومات النمط لمستند واحد
  • غالبًا ما يتم <link> استخدام العلامة للارتباط بأوراق الأنماط الخارجية
  • يُستخدم <meta>العنصر عادةً لتحديد مجموعة الأحرف ووصف الصفحة والكلمات الأساسية ومؤلف المستند وإعدادات منفذ العرض
  • يتم <script>استخدام العنصر لتعريف JavaScripts من جانب العميل
  • يحدد <base>العنصر عنوان URL الأساسي و / أو الهدف لجميع عناوين URL ذات الصلة في الصفحة

عناصر رأس HTML

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .