تتم علمية كتابة عناصر HTML مع وسم البداية وعلامة النهاية محصور بينهما
المحتوى او النص .
<tagname>content</tagname>
مثال
<p>My first
paragraph.</p>
خصائص او سمات HTML
(HTML Attributes)
لكل عناصر HTML سمات توفر من خلالها معلومات اضافية حول العنصر
, يتم تحديد السمات دائما في وسم البداية , وتاتي السمات في ازواج (الاسم /القيمة)
<tagname Attribute=value>content</tagname>
مثال
<a href="http://www.w3schools.com">This is a link</a>
مثال2//
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
عناوين راس الصفحة HTML (HTML Heading)
1 عنصر <h1>
</h1>
يتم تعريف العناوين مع <h1> الى <h6> للكلمات
ابتدا من الوسم <h1> هو الاكثر اهمية حيث يكون حجم
الخط فيه كبير جدا ثم الاقل اهمية الاقل فالاقل <h2> ...<h6> .
تنبيه // الافضل استخدام الحروف الصغيرة لكتابة الوسم في HTML لان جمعية world wide
web consortium
توصي بذلك ضمن توصياتها لـ HTML و XHTML .
مثال3//
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
1 عنصر المسطرة الافقية (HTML Horizontal
Rules Element )
هذا العنصر يقوم باضافة خط
افقي <hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
عنصر الفقرة HTML Paragraphs
<P> هو وسم مفرد
لكنه يستخدم أيضاً كوسم مزدوج <P> ... </P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه
النص فيها حيث يستخدم معه الخصائص ALIGN, DIR.
مثال4//
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is another paragraph</p>
خاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة
التالية:
<P
Align="left"> This is a left-aligned paragraph </P>
This is left-aligned
paragraph
<P
Align="right"> This is right-aligned paragraph</P>
This is a right-aligned
paragraph
<P
Align="center"> This is a centered paragraph</P>
This is a centered
paragraph
------------------------------------------------------------------------------
أما الخاصية DIR والتي نستخدمها أيضاً مع <P> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم
|
LTR
|
إتجاه النص من اليسار إلى
اليمين (Left To Right)
|
|
RTL
|
إتجاه النص من اليمين إلى
اليسار (Right To Left)
|
(تذكر هذه الخاصية جيداً فهي
مهمة عند كتابة صفحات باللغة العربية)
ولتنسيق
الفقرات أيضاً يوجد الوسوم
<BLOCKQUOTE> ... </BLOCKQUOTE> أي وسوم الفقرات المقتبسة
ووظيفتها تمييز الفقرة من خلال إدراج مسافة
إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت
(باقتباسها)
مثال :
<!DOCTYPE
html>
<html>
<body>
<p>This
is a paragraph.
<p><BLOCKQUOTE>This
is a paragraph.</BLOCKQUOTE>
<p>Don't
forget to close your HTML tags!</p>
</body>
</html>
التنفيذ سيكون بهذا الشكل :
This is a paragraph.
This is a paragraph.
Don't forget to close your HTML tags!
----------------------------------------------------------------------------
الوسوم <br> يقوم هذا الوسم بعملية انزال
الفقرات التي تليها في سطر جديد
مثال :
<!DOCTYPE
html>
<html>
<body>
<p>
To break
lines<br>in a text,<br>use the br element.
</p>
</body>
</html>
التنفيذ سيكون بهذا الشكل :
To break lines
in a text,
use the br element.
in a text,
use the br element.
الوسم <pre> ينهي السطر الحالي وينقل النص إلى سطر
جديد
المثال التالي سيوضح الفرق بين الوسم <p> و الوسم <pre المثال
الاول يخص الوسم <p>
<!DOCTYPE
html>
<html>
<body>
<p>In
HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
التنفيذ سيكون على الشكل التالي :
In HTML, spaces and new lines are ignored:
My Bonnie lies over the ocean. My Bonnie lies
over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
المثال الثاني يخص الوسم <pre>
<!DOCTYPE
html>
<html>
<body>
<p>The
pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My
Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
التنفيذ سيكون على الشكل التالي :
The pre tag preserves both spaces and line
breaks:
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
عنصر< < meta
هي وسوم تدرج ضمن
صفحات الويب، وبالتحديد في أعلاها وضمن المقطع <HEAD> ... </HEAD> وتستخدم لوصف الصفحة أو الموقع بشكل عام، من حيث المحتويات والكلمات
الرئيسية أو المفتاحية والمؤلف وغيرها من المعلومات التي قد نعتبرها توثيقية. كما
أنها تفيد في عملية التصنيف التي تجرى من قبل محركات البحث.
مثال5//
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
ليست هناك تعليقات:
إرسال تعليق