ترتيب عائلة (Html)

مازلنا نقدم لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.

في هذا المقال سوف نتحدث عن ترتيب الأوسمة في داخل الصفحة، حيث يسير الترتيب عن طريق مجموعتين المجموعة الأولى مجموعة (Block elements) والمجموعة الثانية تعرف بمجموعة (Inline Elements) فكل أوسمة (html) تندرج تحت المجموعة الأولى ما عداة وسامي <img>  و <a> .

سنلاحظ أن أوسمة مجموعة (Block elements) تحتاج إلى سطر كامل عند كتابتها ولا يتداخل معها أي وسام آخر، فلا نستطيع إضافة أي عنصر (element)  خارج الوسام، كما أنه يجب ترك سطر فارغ قبله وآخر بعده.

بالنسبة للمجموعة الثانية (inline elements) فبالنسبة للصور لوجائت أكثر من صورة متتالية وراء بعضها البعض فإنها ترتبها في الصفحة بعرض الصفحة وليس بالطول كما أنه لا يأخذ العرض كامل بل تأخذ كل صورة حسب عرضها، كذلك عن وضع إشارات الروابط باستخدام <a> فإنها تأخذ حجمها حسب النص المكتوب بعد هذا الوسام.

كيف نفصل بين وسامين من مجموعة (inline elements)؟

يتم ذلك بوضع أوسمة هذه المجموعة داخل وسام الفقرات (paragraph) وهذا مثال تطبيقي.

<a href=”linke”> your text </a>

<img src=”your picture”/>

الآن قمنا بعمل وسامين لرابط وصورة وحفظناها ثم فتحنا الصفحة وبالطبع تركت لك المجال لاختيار الصورة ووضع ما تشاء من نصوص وروابط، ستلاحظ عند فتح الصفحة أن الصورة ظهرات وبجوارها النص الذي يشير إلى رابط، الآن نريد أن نجعل الصورة في سطر والنص في سطر آخر، ولتطبيق ذلك سنضع ما نريد فصله داخل وسام <p> هكذا:

<p>

<a href=”link”>your text </a>

</p>

<img src=”your picture”/>

الآن احفظ التغييرات وارجع إلى الصفحة ستجد أن النص الذي يشير إلى رابط في سطر والصورة في سطر وبينهما سطر فارغ.

ملحوظة هامة: يعتقد البعض أن بعمل سطر جديد اثناء وضع أكواد (html) فإنه سيعطيه سطر في الصفحة وهذا خطأ لأن هذه اللغة لا تقرأ الفراغات والمسافات، ولهذا فإن هذه اللغة توفر وسام خاص لعمل الأسطر وهو <br> وهو بمثابة زر (enter) في لوحة المفاتيح ويستخدم هكذا:

<p> welcome in our website <br> you will learn more about web <br> take your tour </p>

الآن إرجع إلى الصفحة التي تصممها ستلاحظ أن كل جملة من الجمل التي كتبنها ووضعنا قبلها <br> أصبحت في سطر جديد.

من المصادر التي أشار إليها د. أيمن هذا الموقع http://htmldog.com/reference/htmltags/ وهو موقع مفهرس لكل أوسمة لغة (Html).

إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا