وسوم HTML الأساسية

elmasrySoftWareمنذ 7 سنوات

وسوم HTML الأساسية

الوسوم الأكثر أهمية في لغة الـ HTML هي الوسوم التي تحدد العناوين و الفقرات و فواصل الأسطر.
أفضل طريقة لتعلم الـ HTML يكون من خلال الأمثلة ... لقد قمنا بوضع أكثر من 100 مثال في هذا المنهج يمكنك نقل تلك الأمثلة إلى جهازك و تعديلها لتشاهد التأثيرات على طريقة عرض الصفحة، لا شك أنها طريقة جيدة للتعلم.

العناوين

يتم تحديد العناوين من خلال الوسوم من <h1> إلى <h6> ، حيث يعد الوسم <h1> هو أكبر مقاس للعنوان بينما نجد أن الوسم <h6> هو أصغر مقاس للعناوين ، كما يتضح من الكود التالي:

<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
<h4>عنوان 4</h4>
<h5>عنوان 5</h5>
<h6>عنوان 6</h6>

و من خلال الوسم <h> نجد أن العناوين في الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد العنوان.

الفقرات

يتم تحديد الفقرات من خلال الوسم <p> ، كما يتضح من خلال الكود التالي:

<p>بسم الله الرحمن الرحيم</p>
<p>الحمد لله رب العالمين</p>

و من خلال الوسم <p> نجد أن الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد الفقرة.

من أول السطر

يستخدم الوسم <br> في حالة الرغبة في إنهاء السطر الحالي ، و بالبدء من أول السطر و لكن دون بداية فقرة جديدة ،

<p>This <br> is a para<br>graph with line breaks</p>

لاحظ أن:

الوسم <br> لا يحتاج إلى وسم إغلاق <br/>مثل الوسوم الأخرى.

الملاحظات والتعليقات داخل ملفات HTML

يستخدم وسم التعليقات <-- --!> لإدارج تعليقات داخل أكواد HTML ، تلك الملاحظات سوف يتم تجاهلها من قبل المتصفح بمعنى أنها لن تظهر أثناء عرض الصفحات.
يمكنك استخدام التعليقات أو الملاحظات لشرح الكود إذا كان هناك من يساعدك في تحرير صفحات الـ HTML ، أو لتذكرك بعمل الكود إذا أردت العودة إليه بعد فترة.

لاحظ أن:

لا تنسى وضع علامة التعجب في بداية الكود ، كما أنه لا يجب وضعها في نهاية الكود .

لا حظ أن " معلومات مفيدة "

عندما تقوم بكتابة نص HTML ، فلن تكون متأكداً من الكيفية التي سيتم عرض النص بها في المتصفح.
يجب عليك دائما التأكد من أن النص سوف يتم عرضه من خلال المتصفحات المختلفة بصورة جيدة ... بعض المستخدمين لديهم شاشات كبيرة و البعض الأخر لديه شاشات صغيرة كما أن يمكن للمستخدم أن يتحكم في درجة وضوح الشاشة وفقاً لاحتياجاته ... سيتم إعادة تنسيق النص في كل مرة يقوم المستخدم فيها بتغيير حجم النافذة ... لا تقم مطلقاً بتنسيق النص في المحرر لديك بإضافة أسطر فارغة و مسافات إلى النص.
يقوم الـ HTML باقتطاع المسافات الموجودة في النص ... أي عدد للمسافات سوف يعد مسافة واحدة ... و كذلك سوف يتم اعتبار السطر الجديد مسافة واحدة.
من العادات السيئة استخدام فقرات فارغة <p> لإدراج أسطر فارغة ... استخدم الوسم <br> ( لكن لا تستخدمه لإنشاء قوائم انتظر حتى تتعلم " القوائم في HTML " ) قد تكون لاحظت أنه يمكن كتابة الفقرات دون وسم النهاية " وسم الإقفال " </p>.
الإصدار القادم من HTML لن يسمح لك بترك وسم الإقفال ... يضيف الـ HTML تلقائياً سطراً فارغاً إضافياً قبل و بعد بعض العناصر مثل قبل و بعد الفقرة و العنوان ... نحن نستخدم المسطرة الأفقية ( من خلال الوسم <hr> ) لفصل الأقسام في المثال المذكور.

Tag	Description
<html>	هذا الوسم يحدد أن الملف المستخدم هو ملف HTML
<body>	هذا الوسم يحدد منطقة جسم الملف
<h1> to <h6>	لتحديد مقاس العنوان من 1 إلى 6
<p>	لتحديد الفقرات
<br>	لتحديد بداية سطر جديد
<hr>	لعرض خط أفقي
<!-->	للتعليقات و الملاحظات

عدد من الامثلة

مثال لصفحة HTML بسيطة تحتوى على الحد الأدنى من الوسوم ، ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح.

الظهور عبر المتصفح	كود HTML
ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح.	<html> <body dir="rtl"> ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح. </body> </html>

هذا المثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.

الظهور عبر المتصفح

كود HTML

مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.

عنصر الفقرة يتم تحديده من خلال الوسم p .

<p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p>
<p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p>
<p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p>

<p>عنصر الفقرة يتم تحديده من خلال الوسم p .</p>

</body>
</html>
</td>
</tr>
</tbody>
</table>
</body>
</html>

هذا المثال يوضح بعض الأساليب الافتراضية لعناصر الفقرة في ملف الـ HTML.

الظهور عبر المتصفح

كود HTML

تلك الفقرى تحتوي على عدد من من السطور داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك

تلك الفقرة تحتوى على عدد من المسافات داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك

عدد سطور الفقرة يتوقف على حجم نافذة المتصفح ، إذا قمت بتغيير حجم النافذة ... فإن عدد سطور الفقرة سوف يتغير.

<p>
تلك الفقرى تحتوي
على عدد من من السطور
داخل كود المصدر لملف الـ HTML.
و لكن المتصفح سوف يتجاهل ذلك
</p>

<p>
تلك الفقرة تحتوى على عدد من المسافات داخل كود المصدر لملف الـ HTML.
و لكن المتصفح سوف يتجاهل ذلك
</p>

<p>
عدد سطور الفقرة يتوقف على حجم نافذة المتصفح ، إذا قمت بتغيير حجم النافذة ... فإن عدد سطور الفقرة سوف يتغير.
</p>

</body>
</html>

هذا المثال يوضح كيفية بداية سطر جديد داخل ملف HTML دون بداية فقرة جديدة.

الظهور عبر المتصفح

كود HTML

عندما ترغب في إنهاء السطر الحالي
و بداية سطر جديد
في نفس الفقرة و دون بداية فقرة جديدة
استخدم الوسم br .

<p>
عندما ترغب في إنهاء السطر الحالي<br>و بداية سطر جديد<br>في نفس الفقرة و دون بداية فقرة جديدة<br>استخدم الوسم br .
</p>

</body>
</html>

هذا المثال يوضح بعض المشاكل مع ملفات HTML.

الظهور عبر المتصفح

كود HTML

كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون.

لاحظ أن متصفحك سوف يتجاهل هذا التنسيق!

<p>
كل عام و انتم طيبون.
كل عام و انتم طيبون.
كل عام و انتم طيبون.
كل عام و انتم طيبون.
</p>

<p>لاحظ أن متصفحك سوف يتجاهل هذا التنسيق!</p>

</body>
</html>

هذا المثال يوضح الوسوم التي تتحكم في عرض العناوين في ملفات HTML.

الظهور عبر المتصفح

كود HTML

عنوان رقم 1

عنوان رقم 2

عنوان رقم 3

عنوان رقم 4

عنوان رقم 5

عنوان رقم 6

استخدم وسوم العناوين للعناوين فقط، و لا تستخدمها لعمل خط عريض ... يمكن استخدام وسوم أخرى لذلك سنوضحها فيما بعد.

<h1>عنوان رقم 1</h1>
<h2>عنوان رقم 2</h2>
<h3>عنوان رقم 3</h3>
<h4>عنوان رقم 4</h4>
<h5>عنوان رقم 5</h5>
<h6>عنوان رقم 6</h6>

<p> استخدم وسوم العناوين للعناوين فقط، و لا تستخدمها لعمل خط عريض ... يمكن استخدام وسوم أخرى لذلك سنوضحها فيما بعد.</p>

</body>
</html>

هذا المثال يوضح كيفية عرض العنوان في وسط صفحة HTML.

الظهور عبر المتصفح

كود HTML

عنوان الفقرة

في هذه الصفحة تم محازاة العنوان إلى وسط الصفحة

<h1 align="center">عنوان الفقرة</h1>

<p>في هذه الصفحة تم محازاة العنوان إلى وسط الصفحة</p>

</body>
</html>

هذا المثال يوضح كيفية إدراج rule رأسي.

الظهور عبر المتصفح

كود HTML

الوسم hr يحدد rule رأسي:

موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي

<html>
<body dir="rtl">
<p>الوسم hr يحدد rule رأسي:</p>
<hr>
<p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p>
<hr>
<p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p>
<hr>
<p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p>
</body>
</html>

هذا المثال يوضح كيفية إدراج تعليق " ملاحظة " مخفية داخل أكواد ملف HTML.

الظهور عبر المتصفح

كود HTML

<p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p>

</body>
</html>

هذا المثال يوضح كيفية إضافة لون كخلفية لصفحة HTML.

الظهور عبر المتصفح

كود HTML

لاحظ لون الخلفية!

الون الاصفر

<html>
<body dir="rtl" bgcolor="yellow"> <h3>لاحظ لون الخلفية!</h3> </body>
</html>

كلمات دليلية:

إعجاب

أعجبني

29888

مشاهدات