تحدثنا في الدرس السابق عن الوسم a و كيفية و ضع الروابط التشعبية على الكلمات
وجعلها كزر و هنا بعض النقط الصغيرة لم أذكرها
إنشاء رابط الانتقال إلى علامة مرجعية bookmark مع الوسم a
أحياناً قد تجد في صفحة ويب بعض الأزرار ( روابط ) عند الضغط عليها يتم الانتقال إلى مكان في نفس الصفحة
ليكن لدينا صفحة انترنت تحوي سورة الفاتحة ثم سورة الكوثر
و في بداية الصفحة نريد وضع زر بعنوان انتقل إلى سورة الكوثر و عند الضغط على هذا الزر
فسيتم الانتقال إلى مكان بداية سورة الكوثر في نفس الصفحة
في مثالنا هذا يجب وضع علامة مرجعية bookmark عند المكان الذي سوف يتم الانتقال إليه
ولو أردنا وضع علامة مرجعية عند عبارة سورة الكوثر فإن الكود يكتب كالتالي:
<a name="kouthar">سورة الكوثر</a>
و لجعل زر انتقل إلى سورة الكوثر ينتقل إلى هذه العلامة المرجعية عند الضغط عليه فإنه يكتب كالتالي:
<a href="#kouthar" >انتقل إلى سورة الكوثر</a>
<a href="#kouthar" >انتقل إلى سورة الكوثر</a> <br/><br/> <br/><br/> سورة الفاتحة <p> بسم الله الرحمن الرحيم <br/><br/> الحمد لله رب العالمين <br/><br/> الرحمن الرحيم <br/><br/> ملك يوم الدين <br/><br/> إياك نعبد و إياك نستعين <br/><br/> اهدنا الصراط المستقيم <br/><br/> صراط الذين أنعمت عليهم <br/><br/> غير المغضوب عليهم <br/><br/> ولا الضالين <br/><br/> آمين <br/><br/> <br/><br/> <br/><br/> <a name="kouthar">سورة الكوثر</a> <br/><br/> بسم الله الرحمن الرحيم <br/><br/> إنا أعطيناك الكوثر <br/><br/> فصل لربك و انحر <br/><br/> ان شانئك هو الأبتر <br/><br/> صدق الله العظيم <br/><br/>
ملاحظة :
يمكن الانتقال إلى علامة مرجعية في صفحة أخرى بكتابة الكود كالتالي :
http://www.rhyshaden.com/wwlinks.htm#End
وضعنا الرابط في البداية ثم وضعنا الإشارة # و بعدها العلامة المرجعية
و الرابط في الكود أعلاه شغال جربوه
إنشاء رابط على صورة :
في الأمثلة السابقة كنا نضع نصاً و نجعله رابطاً ينفذ أمراً ما عند الضغط عليه
و الآن سأعرض مثالاً لوضع صورة بدل النص
مثال:
الزر التالي عند الضغط عليه يفتح موقع محترفي الكمبيوتر
و كود إنشاء مثل هذا الزر هو :
<a href="http://www.shabsug.blogspot.com"><img src="http://img691.imageshack.us/img691/3169/filef2.png"/><a>
وستكون الأمور أوضح عندما نتحدث عن وسم الصور
إدراج تعليق comment ضمن الكود:
كثيراً ما يحب المبرمجون وضع تعليقات ضمن الكود تسهل عليهم تعديل الكود لاحقاً
وكسائر لغات البرمجة فإن لغة html أيضاً يمكنها إضافة تعليقات على الكود
و طريقة وضع التعليق كالتالي:
<!-- التعليق -->
مثــال :
<p>بسم الله الرحمن الرحيم </p> <!-- بسلمة -->
إدراج سطر أفقي مع وسم hr
طريقة إدراج سطر ضمن الكود سهلة و بسيطة و يكتفي بكتابة التالي:
<hr/>
ملاحظة : عندما ندرس css لاحقاً بعد Html سنرى كيفية التحكم بأبعاد هذا السطر و لونه
طريقة إدراج صورة : وسم img
الصيغة العامة لكتابة وسم tag الخاص بإدارج صور هي:
<img src="الرابط" alt="نص بديل"/>
حيث بدل كلمة الرابط نضع رابط الصورة و بدل كلمة نص بديل نضع نصاً بحيث يظهر
مثال:
<img src="http://cdn.iconfinder.net/data/icons/Gifts/128/rose.png" alt="زهرة"/>
بالنسبة للنص البديل alt ليس ضروري و يمكن اختصاره ويصبح الكود كمايلي:
<img src="http://cdn.iconfinder.net/data/icons/Gifts/128/rose.png" />
ولكن في المعايير القياسية لكتابة لغة xhtml فيجب كتابته
و سأضع درس منفصل للتحدث عن الفرق بين Html و xhtml في القريب العاجل
ملاحظات:
فيما سبق من أكواد لاحظ أنه يجب إغلاق كل وسم تم فتحه
فمثلاً الوسم p
<p>محتوى الوسم</p>
وبينهما نضع المحتوى
إلا مع بعض الاستثناءات لهذا العمل مثل الوسم img مثلاً الخاص بالصور
ملاحظة أخرى :
بعض الوسوم لها خصائص مثلاً وسم الصورة Img له خاصة هي src لوضع مصدر الصورة
و أيضاً وسم الروابط a له خاصة هي href لوضع الروابط وله خاصة هي name لوضع الاسم على الاشارة المرجعية
نكتفي بهذا القدر حيث نتبع أسلوب معلومات قليلة و دروس سريعة في دورتنا هذه
و أذكر بأنه عليك أن تكون الآن على معرفة تامة بالوسوم التالية:
Html , head , body , h , p , b , a , img , hr ,br
و على فكرة الأكواد السابقة الشرح في الدروس عادة تكتب بين وسمتي body
نلتقي غداً و السلام عليكم
مع أطيب الأمنيات
ليست هناك تعليقات:
إرسال تعليق