بنية الصفحة
هناك العديد من الأوسمة في ال HTML التي تمكننا من تحديد بنية صفحات موقعنا وجعلها أكثر تنظيما وهي كالتالي:
- <header> : أو الترويسة
ويستعمل هذا الوسم لتحديد ترويسة الموقع فغالبية المواقع الأن تحتوي على ترويسة ويمكن أن تتضمن العديد من المعلومات كشعار الموقع أوإسمه أو بانر إعلاني وغيرها. وتتم إضافته على الشكل التالي:
- <footer> : أوذيل الصفحة
عكس الترويسة التي توجد في الأعلى فإن الفوتر أو ذيل الصفحة يوضع في أسفل الصفحة ويمكن أن يتضمن العديد من المعلومات مثل روابط الإتصال أو إسم صاحب الموقع وكذا إشعارات قانونية. ويكون كوده كالتالي:
<footer> <!-- هنا تضع محتوى ذيل الصفحة --> </footer>
- <article>: أو الفقرة
هذا الوسم يمكننا من تحديد جزء معين من الصفحة يحتوي على فقرة، و يكون كوده كالتالي:
<article>
<h1>عنوان الفقرة</h1>
<p>هنا يكون نص الفقرة</p>
</article>
- <section>: قسم
الوسم <section> يمكننا من تجميع عناصر عن نفس الموضوع.
<section>
<h1>عنوان القسم</h1>
<p>المحتوى</p>
</section>
- <aside>: أو قسم جانبي
يستعمل هذا الوسم من أجل إضافة معلومات تكميلية للصفحة التي نزوروها، ويمكن أن يكون هناك أكثر من قسم جانبي في الصفحة.
<aside> <!-- هنا تضع المعلومات --> </aside>
- <nav>: روابط تصفح الموقع
يتضمن هذا الوسم قائمة لأهم روابط التصفح والتنقل في الموقع، وكودها يكون كالتالي:
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
نموذج الصندوق
تتكون صفحات الويب من مجموعة من الصناديق التي تدعى Blocs أو لبنات وهناك العديد من اللبنات مثل الفقرات <p> والعناوين <h1> بالإضافة إلى الأوسمة التي تعرفنا عليها في هذا الدرس مثل <header> و<footer> وغيرها.
وهنا سنتعامل مع هذه اللبنات كصناديق وسنتعلم كيفية تعديل أبعادها وإضافة الهوامش وكذا محتواها.
هناك نوعين من الأوسمة inline و block
في لغة HTML تنقسم الأوسمة إلو نوعين وهي كالتالي:
- النوع block مثل (<article>, <p>, <h1>, <footer>…): هذا النوع من الوسمة ينشيء رجوعا إلى السطر، وبوضعها الإفتراضي تأخد كامل مساحة الصفحة المتوفرة وتتابع عموديا.
- النوع inline مثل (<strong>, <a>, <img />, <em>…): وهذا النوع من الأوسمة تكون داخل الوسم من نوع block وهي لا تنشيء رجوعا إلى السطر فالوسم الذي يليها يكون في نفس السطر وتتابع أفقيا.
الأبعاد
سنعمل على الأوسمة من النوع block فقط وهذا النوع من الأوسمة له بعدين العرض والإرتفاع وهناك خاصيتين لتعديلهم وهما:
- width: وتسمح لنا بالتحكم في عرض العنصر وتكون قيمتها إما بالبيكسل px أو بالنسبة المئوية %.
- height: وتسنح لنا بالتحكم في ارتفاع العنصر وتكون قيمتها أيضا إما بالبيكسل px أو بالنسبة المئوية %.
وتستعمل كما في المثال التالي:
p {
width: 50%;
}
يمكن استخدام النسبة المئوية كقيمة وهي تجعل عناصر الصفحة تتلاءم مع الشاشة الصغيرة، ويمكنك كذالك قيمة بالبيكسل px لتجعلها تابثة. ويمكننا أيضا تحديد حد أدنى وأقصى باستعمال الخصائص التالية:
- min-width: العرض الأدنى.
- min-height: الإرتفاع الأدنى.
- max-width: العرض الأفصى.
- max-height: الإرتفاع الأقصى.
وإليكم الكود التالي كمثال:
p {
width: 50%;
min-width: 200px;
}
يعنى أن العنصر سيأخد نسبة 50% من الصفحة لكنه مهما صغرت الشاشة فلن يقل عن 200px.
الهوامش
يتوفر كل عنصر من صفحة ويب من نوع block على نوعين من الهوامش وهي: الهوامش الداخلية والهوامش الخارجية والصورة التالية توضح هذا:
وللتعديل على حجم هذه الهوامش فإننا نستعمل الخاصيتين التاليتين:
- padding: وهي للهوامش الداخلية وعموما تكون قيمتها بالبيكسل.
- margin: وهي للهوامش الخارجية وتكون قيمتها كذالك عموما بالبيكسل.
تحديد مكان تموضع العناصر
في هذا الجزء سنتعرف على كيفيفة تغيير وتحديد مكان تموضع العناصر في صفحات موقعنا.
لفعل هذا فإننا نستخدم الخاصية float أو تعويم وهي تمكننا من وضع العناصر في اليسار أو في اليمين. ولها قيمتين وهما right التي تعني يمين وleft التي تعني يسار.
وإليكم الكود التالي كمثال والذي يجعل قائمة التصفح مثلا في اليسار:
nav {
float: left;
}
تحويل العناصر بخاصية display
هناك خاصية تمكننا من تحويل عناصر من نوع معين إلى عناصر من نوع أخر مثلا من block إلى inline أو العكس.
وإليكم الكود التالي كمثال:
a {
display: block;
}
هذا الكود سيجعل الروابط تتصرف كعنصر من النوع block وسيظهر كل واحد فوق الأخر وسيكون من الممكن تغيير أبعادها.
ومن الممكن أيضا استعمال هذه الخاصية من أجل إخفاء عنصر ما من الصفحة بإعطائها القيمة none ويكون الكود كما يلي:
.section {
display: none;
}
التموضع باستخدام inline-block
تمكننا هذه القيمة من جعل العناصر تتموضع جنبا إلى جنب وفي سطر واحد وتمكننا أيضا الخاصية vertical-align من تعديل تموضعهما العمودي.
- baseline : اصطفاف العناصر بالنسبة لقاعدتهما.
- top: إصطفاف العناصر في الأعلى.
- middle: عمودية في الوسط.
- bottom: إصطفاف العناصر في الأسفل.
- قيمة بالبيكسل أو النسبة المئوية: ترتيب واصطفاف العناصر على بعد مسافة معينة من سطر القاعدة (baseline).
التموضع المطلق والثابت والنسبي
هناك طرق أخرى يمكننا من خلالها تحديد تموضع العناصر على صفحة ويب وهي:التموضع المطلق absolute: ويمكننا من وضع العنصر في أي مكان على الصفحة، ومن أجل ذلك نكتب الكود التالي:
element
{
position: absolute;
}
ولكن هذا لا يكفي لذا يجب إضافة على الأقل واحدة من المحددات الأخرى التالية لتحديد مكان تموضع العناصر على الصفحة:
- left: التموضع بالنسبة ليسار الصفحة.
- right: التموضع بالنسسبة ليمين الصفحة.
- top: التموضع بالنسسبة أعلى الصفحة.
- bottom: التموضع بالنسسبة لأسفل الصفحة.
ويمكننا إعطاءها قيما بالبيكسل أو بالنسبة المئوية كما في المثال التالي:
element
{
position: absolute;
right: 0px;
bottom: 0px;
}
التموضع الثابت fixed: هو تقريبا مثله مثل التموضع المطلق، الإختلاف الوحيد بينهما هو أن التموضع الثابث يبقى ثابتا وظاهرا على الشاشة مهما حركنا الصفحة نحو الأسفل، وإليكم الكود التالي كمثال:
element
{
position: fixed;
right: 0px;
bottom: 0px;
}
التموضع النسبي relative: يمكننا من إعادة تموضع أي عنصر انطلاقا من وضعيته البدئية، فلو أردنا مثلا تحريك عنصر ما ب 100 بيكسل في اتجاه اليمين و50 بيكسل في اتجاه اليسار فسأكتب الكود التالي وسيتحرك العنصر ب 100 بيكسل في اتجاه اليمين و50 بيكسل في اتجاه اليسار انطلاقا من وضعيته البدئية المطلقة أي أعلى يسار الشاشة:
element
{
position: relative;
left: 55px;
top: 10px;
}