la rine
يوليو 04, 2018
موضوعنا اليوم من اهم دروس لغة HTML وهي عناصر تقسيم صفحات الويب وسنعرضها لكم اليوم
نوع ال Doctype html
كان في السابق لابد من تحديد نوع HTML والذي تم استخدامه في الصفحة ولكنه قد تم تجاوز ذلك الامر واصبحت كل صفحات HTML تبدأ بالعنصر التالي
<!DOCTYPE html>
التعليقات Comments
دور التعليقات يكمن في كيفية اضافة التعليقات داخل الكود حتى تستطيع قراءته ومن الجدير بالذكر ان صفحات الوسي مبنية على ملايين الاكواد والتي تجعل دور التعليقات الاهم حيث انها تساعد المبرمج على معرفة كل جزء من الكود ولكن لا تظهر التعليقات على الصفحة عندما نقوم بفتحها بل يجب لاضافة تعليق وضعه كمايلي
<!-- comments -->
خاصية id
استعمال خاصية ID يمكن بكل بساطة في كيفية تخصيص قسم من تلك الصفحة بهوية محددة ولكن لايمكن تكرار ال ID اكثر من مرة ومن خلال لغة CSS سنرى كيفية التحكم فيه وكيفية اعطائه تصميم مختلف يميزه عن باقي اجزاء الصفحة ويتم اضافة الخاصية كمايلي
paragraph
</p>
خاصية class
على العكس تماما من الخاصية السابقة يمكن اضافتها اكثر من مرة في الصفحة ويمكنك من خلالها تسهيل التحكم في كل جزء تضيف اليه الخاصية
على سبيل المثال لديك 4 فقرات من النص في اماكن مختلفة وتريد ان تكون باللون الاحمر فيمكنك انشاء قاعدة CSS باللون الذي تريده ثم اضافة CLASS لتلك الفقرات بالشكل التالي
<ul class="className">
<li>elemnet</li>
</ul>
عناصر لا تجتمع في نفس السطر Block Elements
توجد بعض عناصر html elements التي لا يتم جمعها في نفس السطر حيث أنه بمجرد وضع عنصر بجانب عنصر تكون العودة للسطربشكل ضروري.
على سبيل المثال:
h1 h2 وهي العناوين
p وهي الفقرات
li تمثل عناصر لائحة
b بمعنى لنص عريض
i بمعنى لنص مائل
سنعرض اليك كيف تقوم بالتحكم ب css في مربعات div وكذلك كيف تقوم بإعطائها الطول والعرض والألوان التي تريدها كما يلي
على سبيل المثال:
h1 h2 وهي العناوين
p وهي الفقرات
li تمثل عناصر لائحة
عناصر تجتمع في نفس السطر Inline Elements
وعلى عكس block elements هتكون ذه العناصر في نفس السطر مثالل:b بمعنى لنص عريض
i بمعنى لنص مائل
جمع العناصر والنصوص باستعمال div
ذلك العنصر من التقنيات التي يتم استعمالها لإنشاء اقسام داخل صفحة الويب على سبيل المثال div وهو الخاص براس الصفحة ويوجد بداخله شعار الموقع والقائمة وكذلك div خاص بالجزء الجانبي
سنعرض اليك كيف تقوم بالتحكم ب css في مربعات div وكذلك كيف تقوم بإعطائها الطول والعرض والألوان التي تريدها كما يلي
<div id="header">
<div class="logo">
</di>
<div class="menu">
</div>
</div>
span
من اهم العناصر التي يتم استخدامها للتحكم في جزء بداخل نص أو فقرة.iframe
من خصائص ذلك العنصر انه يمكنك إظهار صفحة ويب داخل صفحة ويب اخرى يمكن إضافة iframeوالذي يتكون من 3 عناصر وهي
src بمعنى رابط الصفحة
width العرض
height الطول
<iframe src="http://www.education-learning.com/" width="200px" height="300px" />
ومن أشهر استخدامات تلك الخاصية هي خاصية اضافة تعليقات فيس بوك للموقع على سبيل المثال
معلومات حول الصفحة
ويمكنك من خلال هذا العنصر استخدام عناصر تساعدك على عرض اي معلومات اصافية عن الصفحةmeta
وهو ذلك العنصر الذي يتم من خلاله إضافة داخل head ويحتوي كذلك على مجموعة من المعلومات مثل الكاتب او لغة الموقع وكذلك الوصف
description وصف صفحة الويب
<mete name="description" content="مدونة التعليم والتعلم تهتم بالانترنت والتدوين والبرامج"/>
مواضيع ذات صله
مواضيع ذات صله
تعلم تصميم المواقع html للمبتدئين 2018
المعلمات لمحتوى الصفحة بلغة html
