تنسيق HTML Formatting
إذا كنت تستخدم معالج النصوص،
يجب أن تكون على دراية مع القدرة على جعل النص عريض،
مائل،أو مسطر. هذه ليست سوى ثلاثة من عشرات الخيارات المتاحة للإشارة
إلى مدى ما يمكن أن يظهر أو يعرض علي النص في HTML و XHTML.
غامق Bold Text
يتم عرض أي شيء يظهر داخل تاج <b/>...<b>
بشكل غامق او عريض كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>This is <b>bold</b> Text Example</p>
</body>
</html>
</html>
النتيجة
This is bold Text Example
مائل Italic Text
يتم عرض أي شيء يظهر داخل تاج <i/>...<i>
بشكل مائل كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>This is <i>Italic</i> Text Example</p>
</body>
</html>
</html>
النتيجة
This is Italic Text Example
خط تحت Underlined Text
يتم عرض أي شيء يظهر داخل تاج <u/>...<u>
بشكل مائل كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>This is <u>underlined</u> Text Example</p>
</body>
</html>
</html>
النتيجة
This is underlined Text Example
خط بوسط النص Strike Text
يتم عرض أي شيء يظهر داخل تاج <strike/>...<strike>
بشكل خط يتوسط النص كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>This is <strike>strike</strike> Text Example</p>
</body>
</html>
</html>
النتيجة
This is strike Text Example
خط مرتفع Superscript
Text
يتم كتابة محتوى تاج <sup/>...<sup>بشكل
مرتفع نصف ارتفاع فوق الحروف المحيطة الأخرى كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>This is <sup>superscript</sup> Text Example</p>
</body>
</html>
</html>
النتيجة
This
is superscript Text Example
نص منخفض Subscript
Text
يتم كتابة محتوى تاج <sub/>...<sub>
بشكل منخفض نصف ارتفاع
فوق الحروف المحيطة الأخرى كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>This is <sub>superscript</sub> Text Example</p>
</body>
</html>
النتيجة
This
is superscript Text Example
نص مدرج Inserted
Text
يتم عرض أي شيء يظهر داخل تاج <ins/>...<ins>
كنص مدرجة بدلا من نص اخر.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to play <ins>football</ins> <ins>boxing</ins></p>
</body>
</html>
النتيجة
I want to play football boxing
حذف نص Deleted
Text
يتم عرض أي شيء يظهر داخل تاج <del/>...<del>
كنص محذوف.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to play <del>football</del> <ins>boxing</ins></p>
</body>
</html>
</html>
النتيجة
I want to play football boxing
نص كبير Larger
Text
محتوى تاج </big> ... <big>
يتم عرض العنصر بحجم خط واحد أكبر عن بقية النص المحيط به كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> text.</p>
</body>
</html>
</html>
النتيجة
The following word uses a big text.
نص صغير Smaller
Text
محتوى تاج </small> ... <small>
يتم عرض العنصر بحجم خط واحد أصغر عن بقية النص المحيط به كما هو مبين:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Samll Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> text.</p>
</body>
</html>
النتيجة
The following word uses a small text.
تجميع المحتوى Grouping
Content
العناصر
<div> و <SPAN> عناصر تسمح لك بجمع عدة عناصر معا لإنشاء
فروع أو أقسام فرعية من الصفحة.
على
سبيل المثال، قد ترغب في وضع حواشي الصفحة ضمن <div> تشير إلى أن جميع العناصر داخل تلك <div> هي عناصر مرتبطة بتلك الحواشي. ثم إرفاق
تصميم CSS علي عنصر الـ <div>.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="center">
<a href="/index.htm">Home</a> |
<a href="/about/contact_us.htm">Contact us</a> |
<a href="/about/index.htm">About</a>
</div>
<div id="content" align="left" style="background-color:gray">
<h5>Content Articles</h5>
<p>Actual content goes here...</p>
</div>
</body>
</html>
</html>
النتيجة
مثال علي عنصر <span>
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
</html>
النتيجة
This is the example of span tag and the div tag alongwith CSS
ليست هناك تعليقات:
إرسال تعليق
يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم