jt33
09-08-2007, 01:32 AM
السلام عليكم و رحمة الله وبركاته
أولاً أحب أن أعتذر عن الغياب خلال الأيام الماضية
لكن كان ذلك بسبب إنقطاع النت عندي وتغيير شكرة الإستضافة
لذا أرجو التماس العذر اخواني
اليوم إن شاء الله نستكمل دورة الـ HTML بالدرس الرابع
والذي سنتعلم فيه كيفية التعامل مع الصور وخلفية الصفحة
------------------------------------------------------------------------------
أحب فقط في البداية أوضح أمر مهم ارى بعض الأخوة مازال غير واضح لديهم
نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد
الكيفية أو الشكل الذي تعمل بها هذه الوسوم. يعني الوسم يقوم بإخبار المتصفح عن
العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
------------------------------------------------------------------------------
نبدأ الآن على بركة الله
كما لاحظتم في الدروس التي مرت معنا كان في كل مرة نطبق درس تكون خلفية الصفحة بيضاء !! لكن ماذا لو أردنا تغيير اللون ؟؟؟ طبعاً لغة HTML تسمح بذلك وبكل سهولة من خلال الخاصية BGCOLOR والتي تضاف إلى وسم الـ BODY الذي سيكون
محور شغلنا في الصور حيث ستظهر فيه بالطبع ...
ولتلوين خلفية الصفحة يكون الوسم بالشكل التالي
<"..." = Body Bgcolor >
.
.
.
<Body/>
حيث مكان الثلاث نقاط تضع اسم اللون أو الكود الخاص به
وهذا مثال عليه
<Body Bgcolor="#green">
والنتيجة
[Link nur für registrierte Benutzer sichtbar]
ملاحظة صغيرة : قد يسأل البعض عنها وهو رمز "#" هذا أستخدمته لأن بعض المتصفحات لا تتعرف على الألوان إلا بواسطة هذا الرمز
وطبعاً هنا أنا استعملت اسم اللون ولكن أيضاً يمكنكم وضع الكود الخاص
بالألوان التي من الممكن أن تحتاجوها وهي ليست أساسية
لأن كما تعلمون معظم الألوان ما هي إلا نتجية الدمج بين الأخضر والأزرق والأحمر
هذا بالنسبة للون خلفية الصفحة
طيب ماذا لو أردنا مثلاً وضع صورة كخلفية يعني ليس لون فقط ؟؟
أيضاً يمكنك ذلك من خلال الخاصية Background والتي تحدد من خلالها
أي صورة تحب أن تكون خلفية لصفحتك وشكلها يأتي هكذا
<BODY BACKGROUND="image.jpg">
ولكن يجب الإنتباه في قضية تحديد مسار الصورة فيجب أن تكون موجودة مباشرتاً في نفس الملف الذي توجد بها الصفحة الـ Html !!!
يعني مثلاً أريد أن أضع هذه الصورة خلفية للصفحة
[Link nur für registrierte Benutzer sichtbar]
واسمها jihad.jpg فيكون الكود <BODY BACKGROUND="jihad.jpg">
والنتيجة :
[Link nur für registrierte Benutzer sichtbar]
-----------------------------------------------------
الآن ننتقل إلى التحكم بالصور التي ستعرض بالصفحة
إن الوسم المستخدم للصور هو <IMG> وطبعاً لا بد من تدخيل عليه
بعض الخصائص لكي نزيد من التحكم في الصورة
أولاً شكل الكود الأصلي حيكون مع الوسم الهام جداً للصو SRC
حيكون على النحو التالي
<IMG SRC="...">
ومكان الثلاث نقاط كما هو ملعوم يوضع اسم الصورة ( jihad.jpg مثلاً )
ومثال عليها
<"IMG SRC="jihad.jpg>
[Link nur für registrierte Benutzer sichtbar]
هذا طبعاً إذا كانت الصورة مباشرتاً في الملف الذي توجد فيه صفحة الـ html
لكن في غالب الأحيان تكون الصور غير موجودة في نفس الملف
لذا فإنه يجب التعديل قليلاً على هذا الوسم
وهنا أريد التنبيه على نقطة مهمة وهي مكان وجود الصورة
الصورة ممكن تكون في ملف داخل ملف الأصلي لصفحة الـ html
انظروا هذه الصورة توضح ما أقوله
[Link nur für registrierte Benutzer sichtbar]
يعني الآن أصبح الوسم هكذا
<IMG SRC="Images/jihad.jpg">
أما الحالة التانية وهي وجود الصورة خارج ملف الصفحة الأصلي
وأيضاً صورة للتوضيح أكثر
[Link nur für registrierte Benutzer sichtbar]
ففي هذه الحالة كما تلاحظون قمت بزايادة ".." فقط وهذه النقطتين تعلم المتصفح
بأن يخرج من ملف الصفحة ويدخل الملف المحدد من قبلك , فيصير الكود
<IMG SRC="../Images/jihad.jpg">
يعني أينما وجدت الصورة بمجرد كتابتك للنقطتين مع تحديد المجلد الذي يحتويها
سيصل لها إن شاء الله ويعرضها مباشرتاً
------------------------------------------------------------------------
والآن سأعرض بعض الخصائص أو الإضافات التي من الممكن أن تحتاجوها
------------------------------------------------------------------------
عرض وطول الصورة
مثلاً ممكن في حد يحب يحدد عرض وطور للصورة يضعها وفقاً لطلبه
فعليه باستعمال HEIGHT و WIDTH العرض والطول وشكلها يأتي
<IMG SRC="jihad.jpg" HEIGHT="300" WIDTH="500">
وطبعاً مكان الثلاث نقاط حنحط القياس يلي نريده أو القيمة المطلوبة
تنسيق الكلام ومحاذاته للصورة
إن الخاصية المستعمل هنا هي Align وسبق ومرت معنا لو تذكرو
وهي تحدد مكان النص من الصورة بمعنا وشكلها يأتي هكذا
<IMG SRC="image.jpg" ALIGN="...">
ومكان الثلاث نقاط تأخذ القيم :
BOTTOM, TOP, MIDDLE, LEFT, RIGHT
فالـ Bottom تستعمل عندما نريد أن يبدأ سطر الكتابة من جانب الزاوية العلوية للصورة
أما الـ Top فتستعمل عندما نريد من الكلام أن يبدأ من جانب الزاوية السفلى للصورة
أما الـ Middle فالكلام بالتأكيد سيبدأ من جانب منتصف الصورة
و Right من يمين الصورة و Left من شمالها
هو أمر بسيط ممكن تجربوه وحتشوفو الفرق
حتوقف هنا وألقاكم في الدرس القادم إن شاء الله
ولأي استفسار أو سؤال نحن موجودي بإذنه تعالى
تحياتي وتقديري للجميع
أخوكم : جهاد
والسلام عليكم و رحمة الله و بركاته
أولاً أحب أن أعتذر عن الغياب خلال الأيام الماضية
لكن كان ذلك بسبب إنقطاع النت عندي وتغيير شكرة الإستضافة
لذا أرجو التماس العذر اخواني
اليوم إن شاء الله نستكمل دورة الـ HTML بالدرس الرابع
والذي سنتعلم فيه كيفية التعامل مع الصور وخلفية الصفحة
------------------------------------------------------------------------------
أحب فقط في البداية أوضح أمر مهم ارى بعض الأخوة مازال غير واضح لديهم
نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد
الكيفية أو الشكل الذي تعمل بها هذه الوسوم. يعني الوسم يقوم بإخبار المتصفح عن
العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
------------------------------------------------------------------------------
نبدأ الآن على بركة الله
كما لاحظتم في الدروس التي مرت معنا كان في كل مرة نطبق درس تكون خلفية الصفحة بيضاء !! لكن ماذا لو أردنا تغيير اللون ؟؟؟ طبعاً لغة HTML تسمح بذلك وبكل سهولة من خلال الخاصية BGCOLOR والتي تضاف إلى وسم الـ BODY الذي سيكون
محور شغلنا في الصور حيث ستظهر فيه بالطبع ...
ولتلوين خلفية الصفحة يكون الوسم بالشكل التالي
<"..." = Body Bgcolor >
.
.
.
<Body/>
حيث مكان الثلاث نقاط تضع اسم اللون أو الكود الخاص به
وهذا مثال عليه
<Body Bgcolor="#green">
والنتيجة
[Link nur für registrierte Benutzer sichtbar]
ملاحظة صغيرة : قد يسأل البعض عنها وهو رمز "#" هذا أستخدمته لأن بعض المتصفحات لا تتعرف على الألوان إلا بواسطة هذا الرمز
وطبعاً هنا أنا استعملت اسم اللون ولكن أيضاً يمكنكم وضع الكود الخاص
بالألوان التي من الممكن أن تحتاجوها وهي ليست أساسية
لأن كما تعلمون معظم الألوان ما هي إلا نتجية الدمج بين الأخضر والأزرق والأحمر
هذا بالنسبة للون خلفية الصفحة
طيب ماذا لو أردنا مثلاً وضع صورة كخلفية يعني ليس لون فقط ؟؟
أيضاً يمكنك ذلك من خلال الخاصية Background والتي تحدد من خلالها
أي صورة تحب أن تكون خلفية لصفحتك وشكلها يأتي هكذا
<BODY BACKGROUND="image.jpg">
ولكن يجب الإنتباه في قضية تحديد مسار الصورة فيجب أن تكون موجودة مباشرتاً في نفس الملف الذي توجد بها الصفحة الـ Html !!!
يعني مثلاً أريد أن أضع هذه الصورة خلفية للصفحة
[Link nur für registrierte Benutzer sichtbar]
واسمها jihad.jpg فيكون الكود <BODY BACKGROUND="jihad.jpg">
والنتيجة :
[Link nur für registrierte Benutzer sichtbar]
-----------------------------------------------------
الآن ننتقل إلى التحكم بالصور التي ستعرض بالصفحة
إن الوسم المستخدم للصور هو <IMG> وطبعاً لا بد من تدخيل عليه
بعض الخصائص لكي نزيد من التحكم في الصورة
أولاً شكل الكود الأصلي حيكون مع الوسم الهام جداً للصو SRC
حيكون على النحو التالي
<IMG SRC="...">
ومكان الثلاث نقاط كما هو ملعوم يوضع اسم الصورة ( jihad.jpg مثلاً )
ومثال عليها
<"IMG SRC="jihad.jpg>
[Link nur für registrierte Benutzer sichtbar]
هذا طبعاً إذا كانت الصورة مباشرتاً في الملف الذي توجد فيه صفحة الـ html
لكن في غالب الأحيان تكون الصور غير موجودة في نفس الملف
لذا فإنه يجب التعديل قليلاً على هذا الوسم
وهنا أريد التنبيه على نقطة مهمة وهي مكان وجود الصورة
الصورة ممكن تكون في ملف داخل ملف الأصلي لصفحة الـ html
انظروا هذه الصورة توضح ما أقوله
[Link nur für registrierte Benutzer sichtbar]
يعني الآن أصبح الوسم هكذا
<IMG SRC="Images/jihad.jpg">
أما الحالة التانية وهي وجود الصورة خارج ملف الصفحة الأصلي
وأيضاً صورة للتوضيح أكثر
[Link nur für registrierte Benutzer sichtbar]
ففي هذه الحالة كما تلاحظون قمت بزايادة ".." فقط وهذه النقطتين تعلم المتصفح
بأن يخرج من ملف الصفحة ويدخل الملف المحدد من قبلك , فيصير الكود
<IMG SRC="../Images/jihad.jpg">
يعني أينما وجدت الصورة بمجرد كتابتك للنقطتين مع تحديد المجلد الذي يحتويها
سيصل لها إن شاء الله ويعرضها مباشرتاً
------------------------------------------------------------------------
والآن سأعرض بعض الخصائص أو الإضافات التي من الممكن أن تحتاجوها
------------------------------------------------------------------------
عرض وطول الصورة
مثلاً ممكن في حد يحب يحدد عرض وطور للصورة يضعها وفقاً لطلبه
فعليه باستعمال HEIGHT و WIDTH العرض والطول وشكلها يأتي
<IMG SRC="jihad.jpg" HEIGHT="300" WIDTH="500">
وطبعاً مكان الثلاث نقاط حنحط القياس يلي نريده أو القيمة المطلوبة
تنسيق الكلام ومحاذاته للصورة
إن الخاصية المستعمل هنا هي Align وسبق ومرت معنا لو تذكرو
وهي تحدد مكان النص من الصورة بمعنا وشكلها يأتي هكذا
<IMG SRC="image.jpg" ALIGN="...">
ومكان الثلاث نقاط تأخذ القيم :
BOTTOM, TOP, MIDDLE, LEFT, RIGHT
فالـ Bottom تستعمل عندما نريد أن يبدأ سطر الكتابة من جانب الزاوية العلوية للصورة
أما الـ Top فتستعمل عندما نريد من الكلام أن يبدأ من جانب الزاوية السفلى للصورة
أما الـ Middle فالكلام بالتأكيد سيبدأ من جانب منتصف الصورة
و Right من يمين الصورة و Left من شمالها
هو أمر بسيط ممكن تجربوه وحتشوفو الفرق
حتوقف هنا وألقاكم في الدرس القادم إن شاء الله
ولأي استفسار أو سؤال نحن موجودي بإذنه تعالى
تحياتي وتقديري للجميع
أخوكم : جهاد
والسلام عليكم و رحمة الله و بركاته