PDA

عرض الاصدار الكامل : :: الدرس الرابع :: سلسلة تعلم لغة Html ::


Eng. LeQaTaR
01-02-2006, 03:38:59 PM
السلام عليكم ورحمه الله وبركاته

اليوم راح نكمل مشوارنا مع سلسلة دورة HTML ومع الدرس الرابع

اليوم الدرس خفيف وراح نتكلم عن :

- خلفية الصفحة ( تلوينها ، وضع صورة للخلفية )

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

احنا الحين بتنحكم في خلفية الصفحة وراح نستعين بالأمر

<body>

مع مجموعه من الخصائص والاوامر واللي تساعدني في تغيير الخلفية.
الخلفية الافتراضية هي اللون الابيض بشكل عام.

هنالك طريقتين لتغيير الخلفيه
1- تغيير لونها
2- وضع صورة للخلفية

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

1- تغيير لون الخلفية
اذا نبي نغير لون خلفيه نستخدم الامر

bgcolor

وهي معناها ( حتى يساعدنا في حفظ الكود )
BackGround COLOR= حروف الكابيتال هي نفسها الكود

وراح يكون استخدامها بهاذا الشكل

<body bgcolor=red >


يعني انه الصفحه لها خلفية ملونه وهي اللون الاحمر
بدل كلمة Red نقدر نستخدم اكواد الالوان والمعروفه باسم النظام الست العشري للألوان ( حسب مااذكر )
وهنا عندنا أمثلة على بعض الاكواد ( مو لازم نحفظها )
الأصفر FFFF00 #
الأحمر FF0000 #
الأزرق 0000FF #
...الخ ونقدر نطلعه بواسطة برنامج الفرونت بيج أو الادوب فوتوشوب عن طريق هالخطوه
http://img231.imageshack.us/img231/5487/17pz2.png
طبعا نحط في بالنا انه الكود يتكون من 6 خانات وتبدأ بعلامة ال#
كثير ناس تسأل عن الفايده
الفائده بشكل عام هو الحصول على اللون المناسب للصفحه لانه مانقدر نسوي كل الموقع بلونين
حلاته الموقع بلونين ( لكن بتدرجات اللونين ) حتى يظهر الابداع.
:)
معلومه اضافيه : بامكاننا نللون النص ( الكلام ) عن طريق استخدام الكود بدل كتابة اسم اللون .

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2- الحين اذا نبي نسوي خلفية نحط فيها صورة كيف تصير الحركة .؟؟
الحركة سهله ومايبيلها شي :)

بدل مانستخدم الامر

bgcolor

كما بالسابق
نستخدم الامر

background


قبل لأبدا بشرح مثال اولا يفضل دائما وضع ملف الصفحة والصورة في نفس المجلد
حتى يسهل علينا تنظيم الروابط :)
يعني الصور والصفحات خلوها في فولدر واحد احنا الحين مبتدئين بعدين لما نتطور لك الحريه تخليهم في فولدر ولا برع

اوكي^_^

مثال:
نضيف الامر :

< body background="image.jpg">

بحيث image.jpg هي اسم الصورة بالكامل مع الامتداد
كثير ناس تغلط وماتكتب الامتداد وهاي اهم خطوه ^_^
ولاتنسون ال" " يكون افضل وبشكل مرتب :)

واهم شي ماتنسون انه يكون في الbody مو في الHeader لاني شايف بعض الناس يحطونه في الheader فحتى مانكرر الخطا ^_^

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

اتمنى كان الدرس جميل وحلو وتطبيق اليوم تصمم صفحتين نيهاهاهاهااااا << مصخها
لا بس اليوم لانه فيه خلفية بالصور وخلفيه باللون حتى نتأكد انه انتو فاهمين شسالفه

تطبيق 1

اعمل صفحة مثل هاي ، وهاي الملاحظات المساعده:
( ركز على العنوان فوق وعلى تنسيق الكلام )
( حجم النص = 7 )
( الخط = افترضي Times New Roman)
( لون الخلفية : FFCC66 # ، لون الجملة الثالثة : CC0066 # )

http://www.qatarp.com/files/18/222a.PNG

.

تطبيق 2

نفس الشي بالضبط حتى مااتعبكم بس خلو الخلفيه بدل ماتكون لون
خلوها نفس هالصورة
ولون جملة السلام خلوها باللون بالاسود
http://www.qatarp.com/files/18/Untitledd-1.gif
http://www.qatarp.com/files/18/Untitledd-1.gif

.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

اتمنى انه الدرس جميل ^_^
الدرس القادم ان شاء الله راح نتعلم كيف نحط صورة
ونحدد طولها وارتفاعها وأمر border و alt ..الخ

الملتاع
01-02-2006, 07:00:37 PM
الله يعطيك العافيه اخوي لي قطر ع الدرس :biggrinch


وهذا هو التطبيق

http://members.lycos.nl/leqatarforum/upload/les4-a.gif
http://9q9q.com/get.php?filename=1138813198.txt


http://members.lycos.nl/leqatarforum/upload/les4.gif
http://9q9q.com/get.php?filename=1138813243.txt


:smartass:

Eng. LeQaTaR
01-02-2006, 09:55:39 PM
ما شاء الله عليك الملتاع ممتاز

والتطبيق :nn:

10/10:biggrinth

princess_of_cedar
02-02-2006, 11:38:20 AM
مشكور اخوي لي قطر على الدرس ويعطيك الف عافية

وهيدا التطبيق1

الصفحة

http://members.lycos.nl/leqatarforum/upload/LEQATAR5.JPG

والكود في المرفقات باسم (LEQATAR5)

التطبيق2

الصفحة

http://members.lycos.nl/leqatarforum/upload/LEQATAR4.JPG

والكود في المرفقات باسم (LEQATAR4)

Eng. LeQaTaR
02-02-2006, 11:45:06 AM
ما شاء الله عليج princess_of_cedar ممتازه :):):)
والتطبيق رائع ^_^
الله يعطيج العافيه

Eng. LeQaTaR
02-02-2006, 11:47:00 AM
على فكره فيه ملاحظه يمكن ماانبتهتوا لها
وهو يفضل وضع كل ملفات الموضوع تحت مجلد واحد
يعني ملاحظ في الحلول كالتالي
<body background="C:\********s and Settings\user\My ********s\word ********s\forums\html less\Untitledd-1.gif">

<body background="C:\********s and Settings\HHH\Untitledd-1.gif">

لما نعملهم في فولدر واحد اقصد ملف الصفحه والصورة بيكون بهذا الشكل
<body background="Untitledd-1.gif">

<body background="Untitledd-1.gif">
وهذا الافضل طبعا ^_^ حتى بعدين لما ترفعه على السايت ماراح يكون فيه أي مشكله في اظهار الصور للاجهزه غير جهازك الشخصي

:) اتمنى وصلت الفكره واذا ماوصلت خبروني

الملتاع
02-02-2006, 01:17:45 PM
اهاااااااااااااااااااااا

وانا اقووووووووووووووول شالحكمه في ان احنا نخزن الصور في نفس الفولدر!!

ترى انا مخزن في الفولدر نفسه

لكني ما انتبهت اني المفروض اخذ بس اسم الصوره
فحطيت الامتداد كامل :nosweat:


وشكرا ع التنبيه :biggrinch

princess_of_cedar
02-02-2006, 10:17:53 PM
مشكور اخوي على الملاحظة

Eng. LeQaTaR
03-02-2006, 03:08:55 PM
اهم شي توصل المعلومه

والله يوفقكم

:)

][جمال الروح][
10-02-2006, 08:05:22 PM
وهذا تطبيقي على الدرس..

(1)
http://tk.files.storage.msn.com/x1pc_jqddVOWRlFI-dIDOviTPo3ggitUI_ifmmnbJK_z17JenMicVINNYz93ioOKL83 yJps_Y9iDlyzP4pPKZw5qb1vJBWZ_nCq2jkZS0t9OQadtcRwS_ PAKxv69K-EDNg9yka_VWotKrk

..الـتطبيق.. (http://www.sitesled.com/process/easyhost.cgi?command=manager/files/file&file=LeQatar1..txt)

(2)
http://tk.files.storage.msn.com/x1pc_jqddVOWRlFI-dIDOviTG0tFlhjgSDCVUOmE8bta17YNcbb77ofE1p_pxKC6jDb CIVI4Xi3NUvpa3HIORJQB07wH2_9WjP-E3IBVqni2VaSlS2xtBilhCmmjQ3FJKWHcNEvihcxzK0

..التـطـبيق.. (http://www.sitesled.com/process/easyhost.cgi?command=manager/files/file&file=LeQatar2.txt)

ان شاء الله تمام :smartass: ..

Eng. LeQaTaR
10-02-2006, 09:35:09 PM
ممتاز التطبيق
الله يوفقج ويعطيج العافية
:)