تعلم لغة html: عناصر تقسيم صفحة ويب
بعد تناولنا لجميع العناصر التي تستعمل في بناء محتوى صفحة ويب، لم يتبقى إلا الإشارة لبعض العناصر الأخرى المهمة والتي تساعد في تنظيم هذا المحتوى وتقديم معلومات حول الصفحة.
شرح درس بالفيديو:
مثلا لديك أربعة فقرات في مختلف الأماكن من النص وتريدها بالأحمر، فأنت تنشئ قاعدة CSS باللون الأحمر تم تضيف class لتلك الفقرات كما يلي:
بعض عناصر html elements لا تجتمع في نفس السطر، إذ أنه بمجرد وضع عنصر بجانب عنصر تكون العودة للسطر ضرورية.
مثل:
h1 h2 العناوين
p الفقرات
li عناصر لائحة
b لنص عريض
i لنص مائل
سنرى كيفية التحكم ب css في مربعات div وإعطائها الطول والعرض والألوان التي تنريد.
هنا اضفنا span داخل النص لتحديد جملة، ثم ربطناه ب class ,التي سيتم التحكم في شكلها باستعمال css
وتتكون من 3 عناصر:
src رابط الصفحة
width العرض
height الطول
أشهر استعمال لهذه الخاصية هو اضافة تعليقات فيس بوك للموقع مثلا.
يتم استعمال مجموعة من العناصر لإعطاء معلومات غضافية حول صفحة الويب.
شرح درس بالفيديو:
نوع ال 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="مدونة فولفولي تهتم بالانترنت والتدوين والبرامج"/>
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله