الخميس، 12 نوفمبر 2015
في هذا الدرس سنحاول فهم آلية التحكم بطريقة عرض وتنظيم النصوص والعناوين داخل صفحة الويب باستخدام html5 .
على أن نتناول في الدرس القادم طريقة التحكم في النصوص والعناوين بـ CSS3 من خلال درس مصور فيديو .
تتكون الصفحات عادة من مجموعة من الفقرات والعناوين , ولذالك وفرت لنا HTML5 ست درجات من العناوين يمكننا ملاءمتها مع مختلف درجات الأهمية التي تحتلها العناوين الرئيسية أو الفرعية في صفحة ويب ما , حيث تتدرج من "عنوان بالغ الأهمية" إلى أقل أهمية فأقل أقل أهمية ... إلخ .
<h1> </h1> عنوان بالغ الأهمية
<h2> </h2> عنوان مهم جدا
<h3> </h3> عنوان مهم
<h4> </h4> عنوان قليل الأهمية
<h5> </h5> عنوان غير مهم
<h6> </h6> عنوان بدون أي أهمية
عنوان بالغ الأهمية h1 أكثر بروزا من العنواين الأخرى , أي أن حجم الخط أكبر .. وهكذا فكلما زاد الرقم المصاحب لـ h كلما قل حجم الخط وبالتالي قل بروز العنوان.
سنشاهد في الدرس القادم أن خصائص العناوين يمكن التحكم بها أكثر باستخدام css3 .
على أن نتناول في الدرس القادم طريقة التحكم في النصوص والعناوين بـ CSS3 من خلال درس مصور فيديو .
العناوين
تتكون الصفحات عادة من مجموعة من الفقرات والعناوين , ولذالك وفرت لنا HTML5 ست درجات من العناوين يمكننا ملاءمتها مع مختلف درجات الأهمية التي تحتلها العناوين الرئيسية أو الفرعية في صفحة ويب ما , حيث تتدرج من "عنوان بالغ الأهمية" إلى أقل أهمية فأقل أقل أهمية ... إلخ .
<h1> </h1> عنوان بالغ الأهمية
<h2> </h2> عنوان مهم جدا
<h3> </h3> عنوان مهم
<h4> </h4> عنوان قليل الأهمية
<h5> </h5> عنوان غير مهم
<h6> </h6> عنوان بدون أي أهمية
عنوان بالغ الأهمية h1 أكثر بروزا من العنواين الأخرى , أي أن حجم الخط أكبر .. وهكذا فكلما زاد الرقم المصاحب لـ h كلما قل حجم الخط وبالتالي قل بروز العنوان.
سنشاهد في الدرس القادم أن خصائص العناوين يمكن التحكم بها أكثر باستخدام css3 .
النصوص
لكتابة نص في صفحة ويب , فإن html5 وفرت لنا الوسم <p> الذي يمكن استخدامه بالطريقة المعتادة لاستخدام الوسوم الثنائية :
<p> النص </p>
عند كتابة نص في أحد محررات النصوص يجب الإنتباه إلى أن تخطي سطر في أحد تلك البرامج لايعني نهاية السطر والإنتقال الى السطر آخر , فلإنهاء سطر ما للإنتقال الى رأس السطر الآخر يجب استخدام </ br > وهو وسم أحادي سبق وتعرضنا له في أحد الدروس السابقة .
<p> </p> لكتابة نص .
<br /> للإنتقال إلى سطر جديد .
مثال
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>النصوص والعناوين</title>
</head>
<body>
<h1> رابعة العدوية </h1>
<p> هي رابعة بنت اسماعيل العدوي , شخصية عراقية ولدت في مدينة
البصرة عام 100 للهجرة من أب عابد فقير , وهي إبنته الرابعة
وهذا سبب تسميتها رابعة .
</p>
</body>
</html>
لكن ... تصورو مثلا أننا نريد إبراز بعض الكلمات الموجودة في النص السابق للفت الإنتباه لها ... مثلا كلمة "عراقية" وتاريخ الميلاد.
نستطيع ذالك باستخدام الوسوم التالية :
<em> </em> لجعل الكلمة مائلة .<strong></strong> لجعل الكلمة أكثر أهمية , مكتوبة بالخط الغلي
<mark> </mark> لإبراز الكلمة بجعل خلفيتها صفراء .
في الدرس القادم إن شاء الله ... سوف نتناول طريقة التحكم أكثر في العناوين والنصوص باستخدام css3 .
ليست هناك تعليقات:
إرسال تعليق