بعد إضافة الالوان إلى صفحاتنا وتميزها بالصور، البد وأن نتعلم كيفية ربط صفحاتنا مع بعضها البعض بحيث تكون مع بعضها موقع بسيطا ومميزا،
ا وفي درسنا اليوم سنقوم بإضافة القوائم ( Lists ) لتكون الصفحة
أكثر تنظيما.
وسومنا الجديدة في هذا الدرس:
وسم البداية <a> وسم النهاية </a>
وسومنا الجديدة في هذا الدرس:
وسم البداية <a> وسم النهاية </a>
مهمته لإضافة رابط لصفحة أو ملف موجود على مسار محدد.
وسم البداية <ul> وسم النهاية </ul>
وسم البداية <ol> وسم النهاية </ol>
وسم البداية <li> وسم النهاية </li>
وسم البداية <!--note --> وسم النهاية _____
لنأخذ مثالا عن إضافة رابط للصفحة:
لرفع الصفحات باللغة العربية إلى الموقع يجب إضافة السطر التالي في الموضع المحدد، لأن السيرفر لا يدعم اللغة العربية:
هذه الدورة من اعداد المهندس ابراهيم تامر
وسم البداية <hr> وسم النهاية _____
مهمته يستخدم لإضافة خط عرضان لتنسيق النص
وسم البداية <ul> وسم النهاية </ul>
مهمته لإدراج قائمة غير مرتبة ( تعداد نقطي ).
وسم البداية <ol> وسم النهاية </ol>
مهمته لإدراج قائمة مرتبة.
وسم البداية <li> وسم النهاية </li>
مهمته لإضافة عناصر للقائمتين المرتبة والغير مرتبة.
وسم البداية <!--note --> وسم النهاية _____
مهمته للكتابه الملاحظات المساعده (لا تظهرعلى الصفحة ).
لنأخذ مثالا عن إضافة رابط للصفحة:
< a href = "http://www.google.com">google</a>
في هذا الكود، ستظهر كلمة google ضمن الصفحة، وعند الضغط عليها سيتم الانتقال إلى الرابط الخاص بالموقع وهو:
https://www.google.com
لنأخذ مثالا آخر عن القائمة المرتبة:
<ol>
<li>Google</li>
<li>Youtube</li>
<li>Msn</li>
<li>Facebook</li>
</ol>
لناخذ مثال انشاء صفحة كاملة:
<html>
<head>
<title>My Third page</title>
</head>
<body bgcolor="#FFFF99">
<h1 style="color:#CC3300">The Best Features of the internet </h1>
<hr color="#000099">
<!-- create an unordered list -->
<p style=" color:#FF0000">my favorite websites:<p>
<ul>
<li><B><a href="http://www.google.com">google</a></B></li>
<li><B><a href="http://www.facebook.com">facebook</a></B></li>
<li><B><a href="http://www.youtube.com">youtube</a></B></li>
</ul>
<p style=" color:#Ff0000">My favorite Programming books:<p>
<ol>
<li>HTML</li>
<li>Java script</li>
<li>PHP</li>
</ol>
</body>
</html>
الخرج سيكون كما في الصورة التالية:
ملاحظات يجب أن تراعيها:
- يمكن تداخل القوائم مع بعضها البعض (أي يمكن وضع قائمة مرتبة ضمن قائمة غير مرتبة أو بالعكس) حسب الحاجة.
- يمكن إضافة الصور للروابط (أي أنه عند الضغط على الصورة يتم التوجه إلى رابط معين) كما يلي:
<a href = "links.html"><img src = "images/me.jpg" width="65" height="50" alt = "Links Page"></a>
ونلاحظ في هذا التوضيح أن الصورة ليست موجودة في نفس مكان وجود الصفحة، في مجلد سمه images وهو موجود (المجلد) في مكان وجود الصفحة وهذه ملاحظة هامة جدا.
لرفع الصفحات باللغة العربية إلى الموقع يجب إضافة السطر التالي في الموضع المحدد، لأن السيرفر لا يدعم اللغة العربية:
< HEAD >
< meta http-equiv=Content-Type content="text/html; charset=windows-1256 >"
< TITLE >My page < /TITLE >
< /HEAD>
لا تنسى إشارات التنصيص (") في الصفات الخاصة بالوسوم.
ومهمتك هذه المرة:
إنشاء صفحة خاصة بك, يكون فيها ثلاثة صور لروابط المواقع التالية: Facebook - Google - Yahoo بحيث يكون المستخدم قادرا على الانتقال للصفحة الرئيسية لكل منهم عن طريق الضغط على الصورة فقط.
وإضافة قائمة بإحصائيات استخدام هذه المواقع بالترتيب التنازل على نطاق العالم، وكما يمكنكم إضافة أية معلومات ترونها مناسبة للتطبيق العملي.
ومهمتك هذه المرة:
إنشاء صفحة خاصة بك, يكون فيها ثلاثة صور لروابط المواقع التالية: Facebook - Google - Yahoo بحيث يكون المستخدم قادرا على الانتقال للصفحة الرئيسية لكل منهم عن طريق الضغط على الصورة فقط.
وإضافة قائمة بإحصائيات استخدام هذه المواقع بالترتيب التنازل على نطاق العالم، وكما يمكنكم إضافة أية معلومات ترونها مناسبة للتطبيق العملي.
إرسال الوظائف:
ضع ملف الكود و الصور في ملجد ثم اضغطه باستخدام برنامج Winrar واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "k-alhumsi@hotmail.com" ولصقه في المتصفح الخاص بك
الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا
Tags:
دورة HTML