HTML Basic Tags
العلامات الأساسية
Heading Tagsعلامات العنوان
تبدأ أي وثيقة بالعنوان. يمكنك استخدام أحجام مختلفة للعناوين الخاصة بك.HTML لديها أيضا ستة مستويات من العناوين، والتي تستخدم عناصر <H2>, <H1>, <H5>, <H4>, <H3>,و <H6>.
أثناء عرض أي عنوان المتصفح يضيف سطر واحد قبل وسطر واحد بعد ذلك العنوان.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
علامة الفقرة Paragraph Tag
<P> توفر هذه العلامة/التاج وسيلة لهيكلة النص الخاص بك إلى فقرات مختلفة. كل فقرة من فقرات النص يجب ان تكون بين فتح <P> والإغلاق </P> كما هو موضح أدناه في المثال:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
سوف تكون النتيجة كما بالصورة التالية:
علامة الخط الفاصل Line Break Tag
عند استخدام التاج <br/> اي شئ بعد ذلك يبدأ من السطر التالي. هذه العلامة هي مثال على عنصر فارغ، حيث لا تحتاج فتح وإغلاق العلامات، كما لا يوجد شيء يكتب بداخلة.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>
Hello<br />
This is a new line.<br />
Thanks<br />
Nader
</p>
</body>
</html>
النتيجة بكما بالصورة التالية:
توسيط المحتوى Centering Content
يمكنك استخدام علامة/تاج <center> لوضع أي محتوى في وسط الصفحة أو أي خلية جدول.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
النتيجة كما بالصورة التالية:
خطوط أفقية Horizontal Lines
تستخدم لعمل خط فاصل بين فقرتين او قطاعين داخل الوثيقة.
<hr> يقوم بإنشاء خط من الموضع الحالي في المستند إلى الهامش الأيمن.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph 1 on top</p>
<hr />
<p>This is paragraph 2 at bottom</p>
</body>
</html>
النتيجة كما بالصورة التالية:
مرة أخرى التاج </ hr > مثالا للعنصر فارغة، حيث لا تحتاج فتح وإغلاق العلامات، كما لا يوجد شيء يكتب بداخله بينهما.
</ hr > عنصر لديه مساحة بين hr و العلامة المائل slash.
إذا قمت بحذف هذه المساحة، في المتصفحات القديمة سوف تجد صعوبة في إدراج خط horizontal، في حين نسيت إدراج العلامة المائلة وقمت فقط بستخدام <hr> فذلك غير صحيح في XHTML
المحافظة على التنسيق Preserve Formatting
في بعض الأحيان تريد النص ان يتبع نفس التنسيق الدقيق كيف هو مكتوب في وثيقة HTML. في تلك الحالات، يمكنك استخدام العلامة المنسقة مسبقا <PRE>.
أي نص بين فتح < pre> العلامة و الإغلاق </ PRE> سوف تقوم العلامة بالحفاظ على تنسيق المستند المصدر.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
حاول استخدام نفس الرمز دون ابقائها داخل <PRE> ... </ PRE> علامات
النتيجة
لنحاول استخدام نفس الكود دون ابقائها داخل علامات <PRE> ... </ PRE>
Nonbreaking Spaces
بفترض أنك تريد استخدام عبارة "May 24 Birthday Nader". ولا تريد المتصفح تقسيمها إلى " May ، 24" و " Birthday Nader " على خطين:
An example of this technique "May 24 Birthday Nader"
في الحالات التي لا تريد مستعرض العميل ان يقوم بكسر النص، يجب عليك استخدام الكيان "مسافة غير منقسمة"
بدلا من المسافة العادية normal space. على سبيل المثال، عند تكويد " May 24 Birthday Nader" في فقرة، يجب عليك استخدام شيء مشابه للكود البرمجي التاليي:
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>Nonbreaking</p>
<p>An example of this technique "May 24 Birthday Nader"</p>
<p>normal space</p>
<p>An example of this technique "May 24 Birthday Nader"</p>
</body>
</html>
النتيجة بعد تصغير المتصفح تم كسر الفقرة الثانية إلى خطين.
ليست هناك تعليقات:
إرسال تعليق
يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم