العبارات HTML Phrase Tags
تاجات العبارات Phrase قد صممت لأغراض محددة على الرغم
من أنها يتم عرضها بطريقة مماثلة مثل العلامات الأساسية الأخرى مثل <b>
و <i> و <per> و<tt> تعرفنا عليهم في دروس سابقة.
وهذا الدرس سوف نأخذك من خلالة جميع العلامات/تاجات عبارة Phrase
المهم.
تأكيد Emphasized Text
أي شيء يوضع بين تاج <em>…</em> يتم عرضه كنص تأكد ويشهر
بهذا الشكل.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The <em>emphasized</em> text example.</p>
</body>
</html>
النتيجة
The emphasized text
example
واضح Marked Text
أي شيء يوضع بين تاج <mark>…</mark> يتم عرضه كنص مُعلم وواضح باللون الاصفر.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>This is <mark>marked</mark> text with yellow color</p>
</body>
</html>
النتيجة
This
is marked text with yellow color
غامق/عريض Strong Text
أي شيء يوضع بين تاج <strong>…</strong> يتم عرضه كنص غامق/عريض.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>This text is showing a <strong>strong</strong> text</p>
</body>
</html>
النتيجة
This text is showing a strong text
اختصار Text Abbreviation
يمكنك اختصار النص من خلال وضعه داخل تاج < abbr>…</ abbr>إذا كان موجودا,
يجب أن تحتوي السمة title علي هذا
الوصف الكامل ولا شيء غير ذلك.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best book name is
<abbr title="Object Oriented Programming using C#">OOP C#</abbr>.</p>
</body>
</html>
</html>
النتيجة
اختصار Acronym Element
عنصر الاختصار <acronym>
يسمح للإشارة إلى نص اختصار.
ولكن في الوقت الحاضر، المتصفحات لا تغيير مظهر
أو مضمون العنصر <acronym >.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This tutorial explain about HTML <acronym>Phrase</acronym> Tags</p>
</body>
</html>
النتيجة
This tutorial explain about HTML Phrase Tags
اتجاه النص Text Direction
أي شيء يوضع بين تاج <dbo>…</dbo> ومستخدمين السمة dir معه سوف يتم استخدامه لتجاوز اتجاه النص الحالي.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
</html>
النتيجة
شروط خاصة Special Terms
تاج <dfn> HTML Definition
Element يستخدم عند تحديد شروط خاصة, استخدامة يشبة
الكلمات المائلة في وسط الفقرة, معظم المتصفحات الحديثة تجعل محتوى <dfn> خط مائل.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
</html>
النتيجة
The following word is a special term.
اقتباس Quoting Text
نريد اقتبس فقرة من مصدر آخر، يجب وضعها بين تاج <blockquote>...</blockquote> هو عادة مسافة بادئة من الحواف اليسرى واليمنى من النص المحيطة
بها، وأحيانا استخدام الخط المائل.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C
Web site:</p>
<blockquote>XHTML 1.0 was the W3C's first Recommendation for XHTML,
following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.
With a wealth of features, XHTML 1.0 is a reformulation of HTML 4.01 in XML,
and combines the strength of HTML 4 with the power of XML.</blockquote>
</body>
</html>
</html>
النتيجة
علامات الاقتباس Short Quotations
يتم استخدام تاج <q>…</q> عندما نريد إضافة اقتباس مزدوجة
داخل الجملة علامات " ".
مثال
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Tom will become a good soccer player<q> some day</q></p>
</body>
</html>
النتيجة
Tom
will become a good soccer player “some day”
استشهادات Text Citations
مثل منشور الطباعة، يتم تقديم محتوى <cite> كنص مائل بشكل افتراضي.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>
النتيجية
This
HTML tutorial is derived from W3 Standard for HTML.
كود Computer Code
اي كود البرمجة يظهور على صفحة الويب يجب أن يوضع داخل تاج
<code>…</code>.عادة ما يتم تقديم محتوى <code> في خط أحادي المسافة
monospaced
font تماما مثل كود معظم الكتب البرمجة.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code. function () { return o.nested.test
&& o.nested.test2===false; } </code> Regular text.</p>
</body>
</html>
النتيجة
Regular
text.
This is code. function
() { return o.nested.test && o.nested.test2===false; } Regular text.
Keyboard
Text
نفس الفقرة السابقة
مثال
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
النتيجة
Regular
text. This is inside kbd
element Regular text.
المتغيرات البرمجية Programming
Variables
عادة ما يستخدم هذا العنصر بالاشتراك مع تاج < pre>
و < code> يشير إلى أن محتوى هذا العنصر هو متغير Variable.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>userName</var>")</code></p>
</body>
</html>
النتيجة
document.write("userName")
مخرجات البرنامج Program Output
التاج < samp
>…</ samp >
عنصر يشير إلى مخرجات من البرنامج, مرة أخرى هو يستخدم بشكل
رئيسي عند التوثيقات البرمجة أو عند كتابة الكود البرمجي.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>if ($(element).val() ===
"") {
return false;
}</samp></p>
</body>
</html>
النتيجة
Result
produced by the program is if ($(element).val() === "") { return false;
}
نص عنوان Address Text
يستخدم عنصر تاج <address> ليحتوي علي اي عنوان.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>2205, Al-Nas road Nasr City, Cairo - Egypt</address>
<address>1078, Fahd Al-Salem st, Kuwait City - Kuwait</address>
</body>
</html>
النتيجة
2205, Al-Nas road Nasr
City, Cairo - Egypt
1078, Fahd Al-Salem st,
Kuwait City - Kuwait
ليست هناك تعليقات:
إرسال تعليق
يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم