تصميم موقع بلغة xhtml وhtml

إن تصميم موقع بلغة xhtml وhtml ليس بالأمر الصعب، وقد بدأت بمقالين سابقين بتعليم أكواد xhtml، وسيكون في هذا الدرس (الدرس الثالث) تعليم هذه اللغة، وتصميم المواقع متاحًا بسهولة للمتعلم المبتدئ.

---

مؤثرات هامة عند تعليم أكواد xhtml

المؤثر ميتا

يتم استخدام المؤثر ميتا؛ من أجل إضافة معلومات لمحركات البحث، لكي يساعدها على تصنيف الوثيقة، وبناءً على ذلك توضع في فهارسها. عمومًا يكون للمؤثر واصفتين رئيسيتين وهما:

• <name> ويمكن أن تضاف الكلمة المفتاحية له.
• بالإضافة إلى الواصف <content> وفيه يذكر وصف الوثيقة مع محتوياتها الرئيسية. وسأبين في المثال الآتي طريقة استخدام المؤثر ميتا، بوثيقة تحوي معلومات تخص javascript وxhtml:

<meta name = “keywords” content = “XHTML ، JavaScript” />

الصور 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 لتحديد الأبعاد للصورة، مقاسة بالبكسل.

على سبيل المثال إليكم طريقة كتابة مؤثر الصورة مع واصفتيه:

<img src = “programming sites.png”  alt = “Teaching XHTML” width=”750″ height=”430″ />

حيث ان اسم الصورة programming sites، بلاحقة png، وهي تصف تعليم أكواد لغة xhtml، بالجملة Teaching XHTML.

اقرأ أيضًا: كم تبلغ أجور مصممي المواقع

---

مؤثرات تتعلق بالخط وصولاً إلى تصميم موقع ويب كامل

إن التخطيط الاستراتيجي للوثيقة يتطلب الاهتمام بتنسيق الخط، هذا وتتواجد المؤثرات التالية، والتي تتيح تنسيق الخط في xhtml:

• المؤثر <b> نص بخط غامق.
• أما المؤثر <i> لإظهار نص بخط مائل.
• بينما يظهر المؤثر<u> نص بخط مسطر.
• بالإضافة إلى المؤثر<big> يظهر النص بخط أكبر.
• أما <small> فهو مؤثر لإظهار نص بخط أصغر.
• <sup> نص بخط أعلى.
• وأخيرًا <sub> نص بخط أدنى.

وللفت الانتباه؛ تمتلك هذه المؤثرات تاغ للفتح وللإغلاق، وبإمكان المستخدم أن يستخدمها تباعًا وصولاً للخط بالتنسيق والحجم المناسبين، على سبيل المثال سأبين لكم هذه المؤثرات، وكيف تكتب بصفحة محرر النصوص:

<p><b> الرياضيات والمعلوماتية </b><hr /><big> المعادلات من الدرجةالأولى بمجهول واحد </big> <br /><hr /> <u>المعادلات من الدرجةالأولى بمجهولين </u> <br /></p> <p><small> الحد الجبري</small></p><br  /> <p><i> المعادلات من الدرجة الثانية</i></p><br /> <p> x<sup>2</ sup>+x<sub>2</sub></p> <br /> <p><tt> htmlو xhtmlتصميم موقع بلغة </tt> </p> <p>&frac14; &nbsp; + &frac14; </p>

هنا استخدمنا جميع المؤثرات لتعليم أكواد xhtml المتعلقة بالخط، بينما تظهر في المتصفح بالشكل التالي:

“اقرأ أيضًا: زراعة قطر الندى“

---

المحارف الخاصة عند تصميم موقع بلغة xhtml وhtml

بالطبع يحتاج كل من يستخدم تصميم المواقع؛ محارف characters ورموز خاصة، والتي لها كتابة خاصة، وتظهر في الجدول التالي:

الطريقة	المحرف
;&amp	&
;gt&	<
;spos&	،
;nbsp&	(soace)
;lt&	>
;frac14&	1/4
;deg&	°

لكن تنسيق الكسر  ينطبق على جميع الكسور، ليس فقط الكسر 1/4، على أي حال تم توضيح ذلك بالمثال السابق، حيث ذكرنا أن1/4+1/4)، وبيّنا طريقة الكتابة، وطريقة الإظهار.

“اقرأ أيضًا: متطلبات التجارة الالكترونية“

---

مؤثرات تتعلق بطريقة إظهار النص

إضافة مسطرة أفقية

على المستخدم أن يستخدم المؤثر </ hr>، إذا أراد أن يضيف مسطرة أفقية، بالإضافة إلى أن المؤثر هذا يكسر السطر الحالي.

كتلة الاقتباس من أجل تصميم موقع بلغة html وxhtml

في الحقيقة يستخدم المؤثر <plockquote> لكي يظهر نص تم تحديده، بصورة مغايرة عن باقي النص.

المؤثر <em> من أجل تصميم موقع بلغة html وxhtml

على وجه الخصوص نستخدم هذا المؤثر؛ من أجل إظهار نص معين أو جملة معينة بصورة مختلفة عن باقي النص، أيضًا مختلفة عن الطريقة التي يظهرها المؤثر<plockquote>

على سبيل المثال تدرج الفكرتين في صفحة محرر النصوص كما يلي:

<head> </title> The effect of the blockquote effect on the text</title> </head> <body> <p> تعتبر زراعة نباتات الزينة من الأمور المحببة لمعظم الأشخاص، كذلك لتزيين المنازل والمكاتب والحدائق </p><hr /> <blockquote> <p > “Aptinia cordifolia نبتة صبارية عصارية، بالإضافة إلى أن أوراقها قلبية لامعة سميكة تختزن الماء، كما تشكل سجادة سميكة ممتدة، بينما تزين حواف الأسورة والجدران، أو تتدلى من الأحواض المعلقة “ </blockquote> </p> <br /> <em>   أنسب طقس عند زراعة قطر الندى، هو الطقس معتدل الحرارة، كذلك الاستمرار للتعرض لأشعة الشمس المباشرة. </em><br /> </body>

أما الطريقة التي يظهر فيها هذا النص في المتصفح هي كما يلي:

 

“اقرأ أيضًا: عنوان الايبي (IP)“

---

وبنهاية المطاف أكون قد شرحت في هذا الدرس؛ آلية تصميم موقع بلغة xhtml وhtml، كما أكون قد أدرجت للمتعلم المبتدئ القسم الثالث من تعليم أكواد xhtml، وسأشرح في الدرس الرابع مؤثرات أخرى، حتى يتمكن المستخدم من تصميم موقع ويب كامل.