الفرق بين المراجعتين ل"HTML/h1-h6"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
(إضافة قسمين ومثالين)
 
سطر 3: سطر 3:
  
 
المثال الآتي يعرض جميع مستويات الترويسات:<syntaxhighlight lang="html">
 
المثال الآتي يعرض جميع مستويات الترويسات:<syntaxhighlight lang="html">
−
<h1>Heading level 1</h1>
+
<h1>العنوان من المستوى 1</h1>
−
<h2>Heading level 2</h2>
+
<h2>العنوان من المستوى 2</h2>
−
<h3>Heading level 3</h3>
+
<h3>العنوان من المستوى 3</h3>
−
<h4>Heading level 4</h4>
+
<h4>العنوان من المستوى 4</h4>
−
<h5>Heading level 5</h5>
+
<h5>العنوان من المستوى 5</h5>
−
<h6>Heading level 6</h6>
+
<h6>العنوان من المستوى 6</h6>
 
</syntaxhighlight>أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:<syntaxhighlight lang="html">
 
</syntaxhighlight>أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:<syntaxhighlight lang="html">
−
<h1>Heading elements</h1>
+
<h1>العناوين</h1>
−
<h2>Summary</h2>
+
<h2>الخلاصة</h2>
−
<p>Some text here...</p>
+
<p>بعض النص الذي يلخص العناوين</p>
  
−
<h2>Examples</h2>
+
<h2>أمثلة</h2>
−
<h3>Example 1</h3>
+
<h3>المثال الأول</h3>
−
<p>Some text here...</p>
+
<p>نص المثال الأول</p>
  
−
<h3>Example 2</h3>
+
<h3>المثال الثاني</h3>
−
<p>Some text here...</p>
+
<p>نص المثال الثاني</p>
  
−
<h2>See also</h2>
+
<h2>مصادر</h2>
−
<p>Some text here...</p>
+
<p>موسوعة حسوب</p>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
 
+
 
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 67: سطر 68:
 
*لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية <code>font-size</code> في CSS استعمالًا صحيحًا.
 
*لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية <code>font-size</code> في CSS استعمالًا صحيحًا.
 
*تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <code><nowiki><h1></nowiki></code> ثم استخدام <code><nowiki><h2></nowiki></code> وهكذا.
 
*تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <code><nowiki><h1></nowiki></code> ثم استخدام <code><nowiki><h2></nowiki></code> وهكذا.
 +
 +
== التنسيق الافتراضي ==
 +
تعرض أغلبية المتصفحات العناصر من <code><nowiki><h1></nowiki></code> إلى <code><nowiki><h6></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وتحديد قيم الخاصيات <code>[[CSS/font-size|font-size]]</code> (حجم الخط) و <code>[[CSS/font-weight|font-weight]]</code> (وزن أو ثخانة الخط)، إضافة إلى الهوامش (<code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code>). سنعرض قواعد [[CSS]] لهذه العناصر هنا تباعًا:<syntaxhighlight lang="css">
 +
h1 {
 +
  display: block;
 +
  font-size: 2em;
 +
  margin-top: 0.67em;
 +
  margin-bottom: 0.67em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
 +
h2 {
 +
  display: block;
 +
  font-size: 1.5em;
 +
  margin-top: 0.83em;
 +
  margin-bottom: 0.83em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
 +
h3 {
 +
  display: block;
 +
  font-size: 1.17em;
 +
  margin-top: 1em;
 +
  margin-bottom: 1em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
 +
h4 {
 +
  display: block;
 +
  font-size: 1em;
 +
  margin-top: 1.33em;
 +
  margin-bottom: 1.33em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
 +
h5 {
 +
  display: block;
 +
  font-size: .83em;
 +
  margin-top: 1.67em;
 +
  margin-bottom: 1.67em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
 +
h6 {
 +
  display: block;
 +
  font-size: .67em;
 +
  margin-top: 2.33em;
 +
  margin-bottom: 2.33em;
 +
  margin-left: 0;
 +
  margin-right: 0;
 +
  font-weight: bold;
 +
}
 +
</syntaxhighlight>
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==

المراجعة الحالية بتاريخ 04:01، 18 فبراير 2018

تُمثِّل عناصر <h1>‏-<h6> ستة مستويات من ترويسات الأقسام، ويكون العنصر <h1> أعلى مستوى والعنصر <h6> أدنى مستوى.

المثال الآتي يعرض جميع مستويات الترويسات:

<h1>العنوان من المستوى 1</h1>
<h2>العنوان من المستوى 2</h2>
<h3>العنوان من المستوى 3</h3>
<h4>العنوان من المستوى 4</h4>
<h5>العنوان من المستوى 5</h5>
<h6>العنوان من المستوى 6</h6>

أما المثال الآتي فيبيّن استعمال عدد من مستويات الترويسات مع بعض المحتوى بعدها:

<h1>العناوين</h1>
<h2>الخلاصة</h2>
<p>بعض النص الذي يلخص العناوين</p>

<h2>أمثلة</h2>
<h3>المثال الأول</h3>
<p>نص المثال الأول</p>

<h3>المثال الثاني</h3>
<p>نص المثال الثاني</p>

<h2>مصادر</h2>
<p>موسوعة حسوب</p>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح المحتوى الفعلي (phrasing content).
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.

لا تستخدم هذه العناصر ضمن العنصر <hgroup> لأن ذلك أصبح مهملًا (deprecated).

واجهة DOM HTMLHeadingElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصية align قديمة ومهملة وغير مدعومة في HTML5، فلا تستعملها.

ملاحظات الاستخدام

  • يمكن استخدام معلومات الترويسات من المتصفحات (وغيرها من البرمجيات) لتوليد جدول محتويات للمستند تلقائيًا
  • لا تستعمل المستويات الدنيا من الترويسات لتصغير الخط، وإنما استعمل خاصية font-size في CSS استعمالًا صحيحًا.
  • تجنّب تخطي مستوى من مستويات الترويسات، أي ابدأ دومًا من <h1> ثم استخدام <h2> وهكذا.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العناصر من <h1> إلى <h6> مع ضبط الخاصية display إلى block، وتحديد قيم الخاصيات font-size (حجم الخط) و font-weight (وزن أو ثخانة الخط)، إضافة إلى الهوامش (margin-top و margin-bottom و margin-left و margin-right). سنعرض قواعد CSS لهذه العناصر هنا تباعًا:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/h1-h6&oldid=2584"