بعد أن قمنا بتعلم كيفية بناء صفحة بسيطة سنقوم بالتعرف على بعض الوسوم الجديدة ونتعرف أيضا على الخصائص التي يمكن إضافتها إلى الوسم ( TAG ) من أجل التحكم العام بالصفحة وجعلها أكثر جمال وخاصة فيما يتعلق بالألوان.
وسومنا الجديدة في هذا الدرس:
مهمته لتحديد الفقرات حيث يمثل كل وسم (بداية + نهاية) سطر جديد خلال العرض وحرف ال P هو اختصار لكلمة Paragraph بمعنى مقطع.
وسم البداية h1> <h2> <h3> <h4> <h5> <h6> وسم النهاية </h1> </h2> </h3> </h4> </h5> </h6>
وسم البداية h1> <h2> <h3> <h4> <h5> <h6> وسم النهاية </h1> </h2> </h3> </h4> </h5> </h6>
مهمته الأنماط الأساسية وهي عبارة عن عدة مستويات تحدد حجم الخط.
وسم البداية ____ وسم النهاية </br>
وسم البداية ____ وسم النهاية </br>
مهمته وهو وسم لبداية سطر جديد حيث يكون النص الذي يسبقه في سطر، والذي يليه في سطر الجديد وليس له وسم بداية.
وسم البداية <B> وسم النهاية </B>
وسم البداية <B> وسم النهاية </B>
مهمته لجعل النص الواقع بين الوسمين بالخط العريض.
وسم البداية <img> وسم النهاية _____
وسم البداية <img> وسم النهاية _____
مهمته لإضافة صور للصفحة ولها العديد من الصفات التي سنذكرها لاحقا وهي عبارة عن وسم واحد فقط من الشكل الموضح.
لنأخذ مثال عن ذلك: (الألوان)
هناك بعض الألوان الأساسية من الممكن استخدام أسمائها مباشرة بدل من الرموز ومن بعض هذه الألوان:
الوظيفة:
إنشاء صفحة خاصة بك، يكون فيها صورتين عن أي موضوع علمي أو تكنولوجي تختاره، بحيث يكون الشرح عن كل صورة أعلاها، واسمها أسفل منها مع استخدام الألوان المناسبة والمساعدة، وبحيث يكون العنوان في أعلى هذه الصفحة بالخط العريض.
خواص الوسوم:
يطلق على التعابير التي تضاف إلى الوسوم كلمة (خاصية) أو (Attribute) ، وهي تحدد خاصية العمل الذي يقوم به الوسم، ف حين تكون وظيفة الوسم هي إخبار المتصفح عن العمل الذي يجب القيام به.لنأخذ مثال عن ذلك: (الألوان)
<BODY BGCOLOR="#FFFFFF" >
تعرفنا على الوسم BODY في الدرس السابق ونلاحظ هنا وجود إضافة له وهي : BGCOLOR وهي التي تجعل خلفية الصفحة ملونة بلون محدد عوضا عن اللون الأبيض ونعبر عادةً عن لون محدد عن طريق شيفرة خاصة بكل لون على حدة كما هو موضح في الجدول:كيف نشأت هذه الشيفرات؟ وما دلالتها؟
يوجد ثلاث ألوان أساسية بشكل عام وهي الأحمر والأخضر والأزرق، ونحصل على الألوان الأخرى عن طريق مزجها بدرجاتها اللونية المختلفة، وتتمثل هذه الدرجة بخانتين لكل لون، أي أننا سنحصل على ست خانات كما هو موضح :
لنأخذ مثال آخر عن الخاصيات: (المحاذاة)
وبعد كل تلك الأمثلة الجزئية البسيطة، سنأخذ مثال شاملا لصفحة كاملة:
عند كتابة اسم الصورة يجب مراعاة وجود الصورة في نفس المكان الذي يوجد فيه ملف الصفحة أو كتابة المسار كاملا.
كما ذكرنا في الدرس السابق، يجب ألا تتداخل الوسوم (قاعدة: آخر وسم مفتوح يجب أن يكون أول وسم مغلق)، أي:
لا تنسى إشارات التنصيص( " ) في الصفات الخاصة بالوسوم.
<p align="left">Left aligned paragraph</p>
<p align="right">Right aligned paragraph</p>
<p align="center">Centered paragraph</p>
تعرفنا منذ قليل على وسم ال <p></p> وبجانبه نلاحظ الآن وجود كلمة align وهي تستخدم لتحديد محاذاة النص إلى اليمين أو اليسار أو المنتصف ولا ننسى بأن المستخدم لن يرى إلا النص الموجود ضمن الوسم أي أنه سيرى الكتابة الخضراء فقط.
ومثال آخر أيضا عنها: (الصور)
<img src = "myimage.jpg" width = "90" height = "120">
وهذا الوسم يقوم بإظهار صورة اسم الملف فيها هو myimage.jpg وتظهر على الصفحة بالأبعاد 90 عرضا و 120 ارتفاعا .وبعد كل تلك الأمثلة الجزئية البسيطة، سنأخذ مثال شاملا لصفحة كاملة:
<HTML>
<HEAD>
<TITLE>
My second page
</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00" >
<p><B>Hello<B></p>
<p style="color:#0033FF" >my name is: </p>
<p style="color:#FF0000">Tamer</P></br>
and this is my second webpage with image.</br>
<img src="myimage.jpg" width="400" height="300" >
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
</BODY>
</HTML>
وسيكون الخرج (ما يظهر للمستخدم عند فتح الصفحة) على النحو التالي:
ملاحظات يجب أن تراعيها:
بالنسبة للصور، يجب اختيار الأبعاد المناسبة ليتم عرض الصورة بأفضل طريقة، ويفضل استخدام الأبعاد النظامية للصورة، أي يجب أن تحافظ على النسبة الثابتة ما بين الطول والعرض.عند كتابة اسم الصورة يجب مراعاة وجود الصورة في نفس المكان الذي يوجد فيه ملف الصفحة أو كتابة المسار كاملا.
كما ذكرنا في الدرس السابق، يجب ألا تتداخل الوسوم (قاعدة: آخر وسم مفتوح يجب أن يكون أول وسم مغلق)، أي:
صح <p><B>Hello</B></p>
خطأ <p><B>Hello</p></B>
دائما نستطيع الوصول لنفس الهدف بأكثر من طريقة لذا اختر الطريقة التي تناسبك.
بعض المتصفحات لا تتعرف على الألوان إلا بوضع الإشارة # قبل رمز اللون، لذلك يفضل استخدامها دائما.لا تنسى إشارات التنصيص( " ) في الصفات الخاصة بالوسوم.
هناك بعض الألوان الأساسية من الممكن استخدام أسمائها مباشرة بدل من الرموز ومن بعض هذه الألوان:الوظيفة:
إنشاء صفحة خاصة بك، يكون فيها صورتين عن أي موضوع علمي أو تكنولوجي تختاره، بحيث يكون الشرح عن كل صورة أعلاها، واسمها أسفل منها مع استخدام الألوان المناسبة والمساعدة، وبحيث يكون العنوان في أعلى هذه الصفحة بالخط العريض.
إرسال الوظائف:
ضع ملف الكود و الصور في ملجد ثم اضغطه باستخدام برنامج Winrar واحفظ الملف باسمك الكامل ثم ارسله الى الايميل التالي: اضغط هنا
او يمكنك نسخ الايميل من هنا "k-alhumsi@hotmail.com" ولصقه في المتصفح الخاص بك
الشهادة تعطى فقط للاشخاص الذين أتموا الوظائف بغض النظر اذا فيها أخطاء ام لا
هذه الدورة من اعداد المهندس ابراهيم تامر
Tags:
دورة HTML