مازلنا نقدم
لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة
التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.
في هذه المحاضرة سوف نتحدث عن (Semantic website) وهو وصف المحتوى بدون محتوى، أو بمعنى آخر هو ويب ذو دلالة
لفظية. فعندما ترى وسام <header> فأنت تعرف أنه يشير إلى شيئ ما بالصفحة، أما مثلاً وسام <nav> فهو يشير إلى زر موجود في الصفحة.
كما نرى في الشكل السابق هذا هو التصميم العام لصفحة ويب مقسمة إلى 4 مناطق:
رقم 1: (Header): تحتوي هذه المنطقة على اسم الموقع واللوجو الخاص بالموقع وفي
بعض الأحيان تحتوي على بعض أزرار الـ (Navigation) أو ما يعرف في لغة Html بوسام <nav> كما في الشكل التالي:
رقم 2: هذه المنطقة ربما تحتوي على معلومات عامة أو معلومات عن الشركة أو
أخبار أي كان فهي تحتوي على (Section) أي مقطع أو
أكثر، وفي حالة احتواء المقطع على أكثر من مقطع ففي هذه الحالة نسمي كل مقطع صغير
(Articles)
رقم3،4: هذه منطقة الجوانب وتحتوي على أزرار أو إعلانات فهي تتميز بوجود (navigation)، وكذلك تحتوي على الوسام <aside> حتى يفهم المتصفح أن هذه مناطق جانبية منفصلة عن بقية الموقع.
رقم5: حتى نعرف المتصفح بنهاية الصفحة فنسميها (footer) كما في الشكل التالي:
أي كان هناك محتوى في هذه الأماكن أو ليست تحتوي
على أي محتوى فالمهم أن المتصفحة سيقراء الصفحة التي صممتها بهذا الشكل وسيقسمها
بهذه الطريقة.
التكامل بين أفراد عائلة (Html):
كل الأوسمة التي تعلمناها في المحاضرات السابقة
تكتب جميعها داخل وسام الـ (body)، أما منطقة الـ (head) فسوف نتعلم فائدتها عندما نتعامل مع لغات (css) و(Java script)، وفي المثال التالي سوف نقوم بتقسيم الموقع ووضع صور فيه ليصبح
بالشكل التالي:
لاحظ أننا سنقوم بتقسيم هذه الصفحة إلى صور كل مقطع أو جزء في صورة وللحصول على المرفقات من هنا
<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
هنا فتحنا رأس الصفحة ووضعنا الصورة الخاصة به
|
<header>
|
هنا وضعنا الصورة الخاصة به
|
<img src="mh.jpg"/>
|
هنا أغلقنا رأس الصفحة
|
</header>
|
هنا فتحنا مقطع جديد ولاحظ أننا أعطينا له وصف (attribute) وهو (id) يميزه عن بقية المقاطع الموجودة في نفس الصفحة ولاحظ الـ (id) لا يتكرر مرتين في نفس الصفحة
|
<section id="up section">
|
هنا وضعنا صورة المقطع العلوي
|
<img src="ms1.jpg"/>
|
هنا أغلقنا المقطع سالف الذكر
|
</section>
|
هنا فتحنا وسام لمنطقة جانبية وأعطيناه توصيف
خاص بها.
|
<aside id="left side">
|
هنا صورة المنطقة الجانبية
|
<img src="ma.jpg"/>
|
هنا أغلقنا وسام المنطقة الجانبية
|
</aside>
|
هنا فتحنا مكان للمقطع الثاني مع إعطائه توصيف
خاص به
|
<section id="right section">
|
هنا صورة المقطع الثاني
|
<img src="ms2.jpg"/>
|
هنا أغلقنا المقطع
|
</section>
|
</body>
|
|
</html>
|
بعد تطبيق هذه الأكواد وحفظها سوف نلاحظ أن الصور
جائت متتالية وأن صورة المقطع الجانبي جائت أسفل صورة الجانب الأيسر وهذه ليست
مشكلة إنما سنحتاج إلى بعض الأكواد لضبط هذا الأمر وهو ما سيأتي في المحاضرات
التالية
ليست هناك تعليقات:
إرسال تعليق