Loading…

تعلم لغة html: عناصر تقسيم صفحة ويب

بعد تناولنا لجميع العناصر التي تستعمل في بناء محتوى صفحة ويب، لم يتبقى إلا الإشارة لبعض العناصر الأخرى المهمة والتي تساعد في تنظيم هذا المحتوى وتقديم معلومات حول الصفحة.

شرح درس بالفيديو:


نوع ال Doctype html

سابقا كان يجب دئاما تحديد نوع ال html المستعمل في الصفحة، إلا أنه تم تجاوز الأمر وكل صفحات الHTML تبدأ بهذا العنصر

<!DOCTYPE html>

التعليقات Comments

دورها يكمن في اضافة تعليقات داخل الكود تساعد في قراءته. صفحات الوسي يتم بناءها بالاف وملايين السطور من الأكواد. ودور التعليقات هو مساعدة المبرمجين في معرفة كل جزء من الكود. التعليقا لا تظهر على الصفحة عند فتحها على المتصفح. لإضافة تعليق يطفي وضعه كما يلي:
<!-- comments -->

خاصية id

لا تخلو اي صفحة ويب من id واستعماله ببساطة يكمن في تخصيص قسم من الصفحة بهوية محددة وفريدة. ولا يمكن تكرار نفس الid في نفس الصفحة مرتين. سنرى في CSS كيف يتم التحكم في id وإعطائه تصميم مختلف عن بقية أجزاء الصفحة. إضافة id يتم كما يلي:

<p id="idName">
paragraph
</p>

خاصية class

 بعكس id فخاصية class يمكن اضافتها لأكثر من جزء. ودورها يكمن في تسهيل التحكم في الجزء الذي يتم إضافة هذه الخاصية إليه.
مثلا لديك أربعة فقرات في مختلف الأماكن من النص وتريدها بالأحمر، فأنت تنشئ قاعدة CSS باللون الأحمر تم تضيف class  لتلك الفقرات كما يلي:

<ul class="className">
<li>elemnet</li>
</ul>
عناصر لا تجتمع في نفس السطر Block Elements

بعض عناصر html elements لا تجتمع في نفس السطر، إذ أنه بمجرد وضع عنصر بجانب عنصر تكون العودة للسطر ضرورية.
مثل:
h1 h2  العناوين
p الفقرات
li عناصر لائحة

عناصر تجتمع في نفس السطر Inline Elements

عكس block elements هذه العناصر يمكن أن تظهر في نفس السطر مثل:
b  لنص عريض
i لنص مائل

جمع العناصر  والنصوص باستعمال div

div هي من التقنيات المستعملة لإنشاء اقسام داخل الصفحة. مثلا div خاص براس الصفحة يوجد داخله شعار الموقع والقائمة. div  خاص بالجزء الجانبي....
سنرى كيفية التحكم ب css  في مربعات div وإعطائها الطول والعرض والألوان التي تنريد.
<div id="header">
<div class="logo">
</di>
<div class="menu">
</div>
</div>

span

تستعمل للتحكم في جزء داخل نص أو فقرة.
هنا اضفنا span داخل النص لتحديد جملة، ثم ربطناه ب class ,التي سيتم التحكم في شكلها باستعمال css

iframe

لإظهار صفحة ويب داخل صفحة ويب، يمكن إضافة iframe
وتتكون من 3 عناصر:
src رابط الصفحة
width العرض
height الطول

<iframe src="http://www.folfoly.com/" width="200px" height="300px" />

أشهر استعمال لهذه الخاصية هو اضافة تعليقات فيس بوك للموقع مثلا.


معلومات حول الصفحة

يتم استعمال مجموعة من العناصر لإعطاء معلومات غضافية حول صفحة الويب.

meta

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

description وصف صفحة الويب

<mete name="description" content="مدونة فولفولي تهتم بالانترنت والتدوين والبرامج"/>
نشرها بتاريخ