بداية ً أذكركم بصفحة تجريب الأكواد الخاصة بنا على الرابط التالي:
http://www.tahasoft.com/code.htm

تحدثنا في الدرس السابق عن الوسم a و كيفية و ضع الروابط التشعبية على الكلمات
وجعلها كزر و هنا بعض النقط الصغيرة لم أذكرها

إنشاء رابط الانتقال إلى علامة مرجعية bookmark مع الوسم a

أحياناً قد تجد في صفحة ويب بعض الأزرار ( روابط ) عند الضغط عليها يتم الانتقال إلى مكان في نفس الصفحة
ليكن لدينا صفحة انترنت تحوي سورة الفاتحة ثم سورة الكوثر
و في بداية الصفحة نريد وضع زر بعنوان انتقل إلى سورة الكوثر و عند الضغط على هذا الزر
فسيتم الانتقال إلى مكان بداية سورة الكوثر في نفس الصفحة
في مثالنا هذا يجب وضع علامة مرجعية bookmark عند المكان الذي سوف يتم الانتقال إليه
ولو أردنا وضع علامة مرجعية عند عبارة سورة الكوثر فإن الكود يكتب كالتالي:

سورة الكوثر

حيث هنا كلمة kouthar هي اسم اختياري نسمي العلامة المرجعية به
و لجعل زر انتقل إلى سورة الكوثر ينتقل إلى هذه العلامة المرجعية عند الضغط عليه فإنه يكتب كالتالي:

انتقل إلى سورة الكوثر

و يكون الكود الكامل :

انتقل إلى سورة الكوثر









سورة الفاتحة



بسم الله الرحمن الرحيم





الحمد لله رب العالمين





الرحمن الرحيم





ملك يوم الدين





إياك نعبد و إياك نستعين





اهدنا الصراط المستقيم





صراط الذين أنعمت عليهم





غير المغضوب عليهم





ولا الضالين





آمين













سورة الكوثر





بسم الله الرحمن الرحيم





إنا أعطيناك الكوثر





فصل لربك و انحر





ان شانئك هو الأبتر





صدق الله العظيم

مع ملاحظة أن نتائج التطبيق على صفحة محرر أكواد Html الموجودة في الموقع قد لا تكون النتائج صحيحة تماماً لذلك ينصح بأن تجرب على جهاز الكمبيوتر عندك

ملاحظة :
يمكن الانتقال إلى علامة مرجعية في صفحة أخرى بكتابة الكود كالتالي :

http://www.rhyshaden.com/wwlinks.htm#End

وضعنا الرابط في البداية ثم وضعنا الإشارة # و بعدها العلامة المرجعية
و الرابط في الكود أعلاه شغال جربوه

إنشاء رابط على صورة :

في الأمثلة السابقة كنا نضع نصاً و نجعله رابطاً ينفذ أمراً ما عند الضغط عليه
و الآن سأعرض مثالاً لوضع صورة بدل النص
مثال:
الزر التالي عند الضغط عليه يفتح موقع tahasoft.com

و كود إنشاء مثل هذا الزر هو :

حيث وضعنا بدلا النص وسم خاص لإدراج صورة
وستكون الأمور أوضح عندما نتحدث عن وسم الصور

إدراج تعليق comment ضمن الكود:

كثيراً ما يحب المبرمجون وضع تعليقات ضمن الكود تسهل عليهم تعديل الكود لاحقاً
وكسائر لغات البرمجة فإن لغة html أيضاً يمكنها إضافة تعليقات على الكود
و طريقة وضع التعليق كالتالي:

مثــال :

بسم الله الرحمن الرحيم 
 

هذا التعليق لإراحة المستخدم أثناء العودة للتصميم و لا ينظر المتصفح لما هو ضمن التعليق

إدراج سطر أفقي مع وسم hr

طريقة إدراج سطر ضمن الكود سهلة و بسيطة و يكتفي بكتابة التالي:

ملاحظة : عندما ندرس css لاحقاً بعد Html سنرى كيفية التحكم بأبعاد هذا السطر و لونه

طريقة إدراج صورة : وسم img

الصيغة العامة لكتابة وسم tag الخاص بإدارج صور هي:

حيث بدل كلمة الرابط نضع رابط الصورة و بدل كلمة نص بديل نضع نصاً بحيث يظهر
مثال:

ملاحظة :
بالنسبة للنص البديل alt ليس ضروري و يمكن اختصاره ويصبح الكود كمايلي:

ولكن في المعايير القياسية لكتابة لغة xhtml فيجب كتابته
و سأضع درس منفصل للتحدث عن الفرق بين Html و xhtml في القريب العاجل

ملاحظات:

فيما سبق من أكواد لاحظ أنه يجب إغلاق كل وسم تم فتحه
فمثلاً الوسم p

محتوى الوسم

حيث وضعنا وسم مفتوح ووسم مغلق منه
وبينهما نضع المحتوى
إلا مع بعض الاستثناءات لهذا العمل مثل الوسم img مثلاً الخاص بالصور

ملاحظة أخرى :
بعض الوسوم لها خصائص مثلاً وسم الصورة Img له خاصة هي src لوضع مصدر الصورة
و أيضاً وسم الروابط a له خاصة هي href لوضع الروابط وله خاصة هي name لوضع الاسم على الاشارة المرجعية

نكتفي بهذا القدر حيث نتبع أسلوب معلومات قليلة و دروس سريعة في دورتنا هذه
و أذكر بأنه عليك أن تكون الآن على معرفة تامة بالوسوم التالية:
Html , head , body , h , p , b , a , img , hr ,br
و على فكرة الأكواد السابقة الشرح في الدروس عادة تكتب بين وسمتي body

نلتقي غداً و السلام عليكم
مع أطيب الأمنيات