إن تصميم موقع بلغة xhtml وhtml ليس بالأمر الصعب، وقد بدأت بمقالين سابقين بتعليم أكواد xhtml، وسيكون في هذا الدرس (الدرس الثالث) تعليم هذه اللغة، وتصميم المواقع متاحًا بسهولة للمتعلم المبتدئ.
مؤثرات هامة عند تعليم أكواد xhtml
المؤثر ميتا
يتم استخدام المؤثر ميتا؛ من أجل إضافة معلومات لمحركات البحث، لكي يساعدها على تصنيف الوثيقة، وبناءً على ذلك توضع في فهارسها. عمومًا يكون للمؤثر واصفتين رئيسيتين وهما:
- <name> ويمكن أن تضاف الكلمة المفتاحية له.
- بالإضافة إلى الواصف <content> وفيه يذكر وصف الوثيقة مع محتوياتها الرئيسية. وسأبين في المثال الآتي طريقة استخدام المؤثر ميتا، بوثيقة تحوي معلومات تخص javascript وxhtml:
الصور imags لتصميم موقع بلغة xhtml وhtml
تحسن الصور من مظهر الوثيقة، وتزيد من رغبة القارئ بالاستمرار بالإبحار بالموقع؛ لكن وبرغم ذلك فهي تبطئ التحميل لمن لا يمتلك نت سريع، أما تخزينها فيتم بملفات خاصة، يتم استدعاؤها من قبل xhtml، وهذا أمر يجب أن يفهمه هواة التعليم المنزلي وغيرهم، عند إضافة الصور للوثيقة.
كيف يتم تنسيق الصور بوثيقة xhtml؟
في الحقيقة يوجد ثلاثة طرق؛ من أجل تنسيق الوثيقة وهي:
- الملفات من النوع GIF (Graphic Interchange Format) لا تزال الصور من هذا النوع تستخدم 256 لون، أي (8 بت لكل بيكسل)، وقد تكون شفافة، كما أنه يفضل أن تستخدم؛ من أجل الصور التي تم تصميمها بواسطة برامج.
- الملفات من النوع JPEG (Joint Photographic Experts Group) تستخدم 16 مليون لون، أي (24 بت لكل بكسل)، وعلى عكس سابقتها لا يمكن أن تكون شفافة، بالإضافة إلى أنه يفضل استخدامها للصور الطبيعية.
- الملف من النوع PNG (Portable Network Graphics) على وجه الخصوص؛ تم تصميمه للدمج بين الملفين السابق ذكرهما.
المؤثر <img>
يستخدم هذا المؤثر؛ من أجل إدراج صورة داخل الوثيقة، ونميز فيه:
- نستخدم الواصفة src؛ من أجل اسم الصورة.
- أيضًا نستخدم الواصفة alt، من أجل وضع نص يظهر إذا لم يتم تحميل الصورة، أو مثلاً عند وضع المؤشر فوقها، كما أنها واصفة مطلوبة.
- بالإضافة إلى الواصفتين width وheigt لتحديد الأبعاد للصورة، مقاسة بالبكسل.
على سبيل المثال إليكم طريقة كتابة مؤثر الصورة مع واصفتيه:
حيث ان اسم الصورة programming sites، بلاحقة png، وهي تصف تعليم أكواد لغة xhtml، بالجملة Teaching XHTML.
مؤثرات تتعلق بالخط وصولاً إلى تصميم موقع ويب كامل
إن التخطيط الاستراتيجي للوثيقة يتطلب الاهتمام بتنسيق الخط، هذا وتتواجد المؤثرات التالية، والتي تتيح تنسيق الخط في xhtml:
- المؤثر <b> نص بخط غامق.
- أما المؤثر <i> لإظهار نص بخط مائل.
- بينما يظهر المؤثر<u> نص بخط مسطر.
- بالإضافة إلى المؤثر<big> يظهر النص بخط أكبر.
- أما <small> فهو مؤثر لإظهار نص بخط أصغر.
- <sup> نص بخط أعلى.
- وأخيرًا <sub> نص بخط أدنى.
وللفت الانتباه؛ تمتلك هذه المؤثرات تاغ للفتح وللإغلاق، وبإمكان المستخدم أن يستخدمها تباعًا وصولاً للخط بالتنسيق والحجم المناسبين، على سبيل المثال سأبين لكم هذه المؤثرات، وكيف تكتب بصفحة محرر النصوص:
هنا استخدمنا جميع المؤثرات لتعليم أكواد xhtml المتعلقة بالخط، بينما تظهر في المتصفح بالشكل التالي:
المحارف الخاصة عند تصميم موقع بلغة xhtml وhtml
بالطبع يحتاج كل من يستخدم تصميم المواقع؛ محارف characters ورموز خاصة، والتي لها كتابة خاصة، وتظهر في الجدول التالي:الطريقةالمحرف;&&;gt&<;spos&،;nbsp&(soace);lt&>;frac14&1/4;deg&°
لكن تنسيق الكسر ينطبق على جميع الكسور، ليس فقط الكسر 1/4، على أي حال تم توضيح ذلك بالمثال السابق، حيث ذكرنا أن1/4+1/4)، وبيّنا طريقة الكتابة، وطريقة الإظهار.
مؤثرات تتعلق بطريقة إظهار النص
إضافة مسطرة أفقية
على المستخدم أن يستخدم المؤثر </ hr>، إذا أراد أن يضيف مسطرة أفقية، بالإضافة إلى أن المؤثر هذا يكسر السطر الحالي.
كتلة الاقتباس من أجل تصميم موقع بلغة html وxhtml
في الحقيقة يستخدم المؤثر <plockquote> لكي يظهر نص تم تحديده، بصورة مغايرة عن باقي النص.
المؤثر <em> من أجل تصميم موقع بلغة html وxhtml
على وجه الخصوص نستخدم هذا المؤثر؛ من أجل إظهار نص معين أو جملة معينة بصورة مختلفة عن باقي النص، أيضًا مختلفة عن الطريقة التي يظهرها المؤثر<plockquote>
على سبيل المثال تدرج الفكرتين في صفحة محرر النصوص كما يلي:
أما الطريقة التي يظهر فيها هذا النص في المتصفح هي كما يلي:
وبنهاية المطاف أكون قد شرحت في هذا الدرس؛ آلية تصميم موقع بلغة xhtml وhtml، كما أكون قد أدرجت للمتعلم المبتدئ القسم الثالث من تعليم أكواد xhtml، وسأشرح في الدرس الرابع مؤثرات أخرى، حتى يتمكن المستخدم من تصميم موقع ويب كامل.