الدرس الثاني في تعلم لغة HTML

الدرس الثاني في تعلم لغة HTML *** تلوين أو اضافة صورة كخلفية صفحة الويب ***

*** *** *** *** *** ***

في هذا الدرس سنقوم بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم

الكود:: <BODY>

من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان
طبعاً أنت لا زلت تتذكر الصفحة التي قمنا بكتابتها في الدرس الأول. صفحة بسيطة بخلفية رمادية وخط صغير نسبياً لونه أسود. وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى. (ربما تقول: أهذه صفحة إنترنت! أين الألوان والرسومات والخطوط الجميلة والتنسيقات التي نراها في صفحات الإنترنت؟ معك حق لكن مهلاً فما زلنا في البداية).
سوف نستمر باستخدام صفحتنا هذه لتوضيح أمثلة هذا الدرس أيضاً، لكن لن أقوم بتكرار كتابة وسوم البداية طالما أن عملنا يتركز في الجزء المخصص لمحتويات الصفحة نفسها أي ضمن الوسمين

الكود:: <BODY>...</BODY>

إذن لنبدأ العمل!

نطلق كلمة خاصية (Attribute) على التعبيرات التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل

تأمل الشيفرة التالية :

الكود:: <BODY BGCOLOR="FFFFFF">‎
...
<‎/BODY>

لقد قمت بإضافة الخاصية
BGCOLOR
إلى الوسم

الكود:: <BODY>

، وهي تقوم بتحديد لون الخلفية للصفحة. أما
#FFFFFF
فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، لاحظ أنها مكتوبه بين إشارتي " " ولو أردت تمثيل اللون الأسود لكتبت الرمز
#000000
أو الرمز
#6699CC
للون الأزرق الفاتح

وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري

	#ABCDEF		#FFFF00
	#FEDCBA		#336699
	#773466		#112233
	#FF1122		#666666
	#0033FF		#663333
	#AABBAA		#00FF00
	#800800		#FF6600
	#008008		#993366
	#020769		#123456
	#111111		#654321

ومن الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية.
وهذا جدول يوضح هذه الألوان ومسمياتها :

	Black		White
	Red		Green
	Marron		Purple
	Navy		Blue
	Teal		Lime
	Gray		Silver
	Olive		Aqua
	Fuchsia		Yellow

وهناك طريقتان لتلوين خلفية صفحة الويب هما :
الاولى باضافة لون
والثانية باضافة صورة
لاضافة لون نستخدم الآتي :

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BGCOLOR="هنا نضع اسم اللون او كوده كابتل او اصمول">
 mohamed ali ramadan
 </BODY>
 </HTML>

مثال ذلك
لو جعلنا الخلفية حمراء نكتب الآتي في منطقة بداية الــ
BODY
بوضع اسم اللون

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BGCOLOR="red">
 mohamed ali ramadan
 </BODY>
 </HTML>

أو بكتابة كود اللون الاحمر هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BGCOLOR="#FF1122">
 mohamed ali ramadan
 </BODY>
 </HTML>

او هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BGCOLOR="#ff1122">
 mohamed ali ramadan
 </BODY>
 </HTML>

أما لاضافة صورة نكتب الآتي في منطقة بداية الــ
BODY
هكذا

الكود:: <BODY BACKGROUND="هنا رابط الصورة">‎
...
<‎/BODY>

مثال ذلك
سنضع مثلا رابط صورة علم مصر كخلفية لصفحة الويب هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif">
 mohamed ali ramadan
 </BODY>
 </HTML>

تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية من خلال الخاصية
BGCOLOR
والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات القديمة توصف بأنها متصفحات نصية
Text-Based Browsers
أي ليس بإمكانها عرض الصور). أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن لم يستطيعوا مشاهدة الصور
إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة

والآن نكمل باقي الخصائص في وسم

الكود:: <BODY>

ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية الروابط
Links
التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص :

‎TEXT="#rrggbb"‎	تحديد لون النص الأساسي للصفحة
‎LINK="#rrggbb"‎	تحديد لون الوصلات التشعبية
‎VLINK="#rrggbb"‎	تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
‎ALINK="#rrggbb"‎	تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links

والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة هذه الخصائص داخل العبارة ونكتبها هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif"
BGCOLOR="#ffff00"‎
TEXT="#000066"‎
LINK="#00ff00"‎
VLINK="#ff0000"‎
ALINK="#999999">
 mohamed ali ramadan https://marmar.mam9.com
 </BODY>
 </HTML>

أو هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 marmar 7bebty
 </TITLE>
 </HEAD>
 <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif" BGCOLOR="#ffff00"‎ TEXT="#000066"‎ LINK="#00ff00"‎ VLINK="#ff0000"‎ ALINK="#999999">
 mohamed ali ramadan https://marmar.mam9.com
 </BODY>
 </HTML>

الآن تعالى نحلل مايحتويه الكود السابق

1 - وضعنا رابط صورة علم مصر كخلفية لصفحة الويب
2 - اخترت اللون الأصفر لكي يكون لونا للخلفية في حالة عدم عرض الصورة السابقة كخلفية
3 - وضعنا اللون الازرق القاتم للنص
4 - وضعنا اللون الأخضر للوصلات التشعيبية الروابط التي لم يتم النقر عليها
5 - وضعنا اللون الأحمر للوصلات التي تمت زيارتها
6 - وضعنا اللون الرمادي لوصلة الفعالة في لحظة النقر عليها بالفأرة

*** *** *** *** *** ***

الى اللقاء مع الدرس الثالث في تعلم لغة
HTML
إن شاء الرحمن وإن كان في عمري بقية

السلام عليكم
عاشت ايدك اخي الحبيب على الدرس الممتع حقا لدي سؤال لو سمحت هل ضروري ترتيب الوسوم التالية ام لا اي لا يهم ايهما الاول
<"BACKGRAUND=" URL >
URL رابط صوره
<"BGCOLOR="RED >

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

السلام عليكم
اخي الحبيب طبقت الدرس ووضعت خلفية والحمد لله نجحت واردت وضع صورة وهذا رابط الصورة ولم تظهر ! ما السبب اخي

رابط الصورة

وصورة الاكواد هي هذه :
[img] الدرس الثاني في تعلم لغة HTML 107tl69

[/img]
وهذا صورة للرابط لانه لم يظهر كاملا في الصورة

http://www.google.iq/imgres?imgurl=http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg&imgrefurl=http://www.swalfna.net/vb/showthread.php?t%3D19264&h=600&w=800&tbnid=uEX6f_pcVRPsdM:&docid=KkZfz4OZDGz7fM&hl=ar&ei=mSROVrnNJ8aksAGN67HoDg&tbm=isch&ved=0CHQQMyg6MDpqFQoTCPn95e-dnckCFUYSLAodjXUM7Q

شكرا لك اخي الغالي .

احذف
body
الثانية
يااخي الحبيب نحن نضع صورة الخلفية ولون الخلفية ولون النص والروابط في منطقة
BODY
اللي بدون شرطه كما في الكود التالي

الكود:: <BODY هنا نضع صورة الخلفية ولون الخلفية ولون النص والروابط‎>

مع ملاحظة وجود مسافة بالمسطرة بعد الــ
BODY
واذا وضعت صورة الخلفية ولون الخلفية ولون النص والروابط متجاورين فلابد من وجود مسافة بالمسطرة بعد كل لون
أما اذا اردت وضع صورة الخلفية ولون الخلفية ولون النص والروابط كل واحدة منهم في سطر فلا تضغط على المسطرة لأخذ مسافة بل بعد انتهاء كل سطر اضغط على انتر
وبالنسبة لرابط الصورة اللي وضعته فهذا ليس برابط الصورة المباشر وكان يجب عليك الضغط على " عرض الصورة " في صفحة الصورة التي وضعتها ليذهب بك الى صفحة الصورة وبعدها قم بنسخ رابطها من التولبار العلوي
وهاهو رابط الصورة المباشر بدون ان يكون جوجل وسيطا لها

http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg

سأضع لك في الرد القادم الكود بعد تصحيح الاخطاء

الكود بعد تصحيح الاخطاء

الكود:: <HTML>
<HEAD>
<TITLE>
WWW.ALAMALBRAMIJ.COM
</TITLE>
</HEAD>
<BODY BACKGROUND="http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg"
BGCOLOR="Aqua"‎>
welcome to my new web sit intristing
</BODY>
</HTML>

السلام عليكم
اخي الغالي
هل استطيع وضع اسماء الالوان للنص او للروابط التشعبية بدل رموزها لانها يصعب حفظها ؟

رفعت عبد الكريم كتب:: السلام عليكم
اخي الغالي
هل استطيع وضع اسماء الالوان للنص او للروابط التشعبية بدل رموزها لانها يصعب حفظها ؟

وعليكم السلام
اكيد اخي الغالي يمكن وضع اسم اللون بدلا من كوده لاي شيئ تريد تلوينه
واحب اعرفك ان اكواد الالوان لا نحفظها بل ننسخها من مواقعها وتوجد بعض البرامج التي تولد اكواد هذه الالوان
وممكن نسخها
من الموضوع التالي
https://marmar.mam9.com/t5374-topic

رجاءا راجع ردودي في هذا الموضوع لاني اضفت اشياء تفيدك لم اكن قد تعرضت لها
راجع الردود من هنا
https://marmar.mam9.com/t5390-topic
وتقبل تحياتي

Post Number: 9موضوع: سؤال السبت 21 نوفمبر 2015, 1:58 pm

السلام عليكم
اخي الغالي ولو اتعبك لم تظهر لي الخلفية وهذه هي الاكواد

الكود:: <html>
<head>
<titel>
WWW.ALAMALBRAMIJ.COM 
</TITEL>
</HEAD>
<BACKGRUND="http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg">
welcome to my new web sit intristing
</HTML>

ظهرت هكذا

بالمناسبة لا اذكر ان سالتك هذا السؤال وهو :
بالنسبة الى الوسم

الكود::

هل اضعه نهاية كل سطر لاجل كتابة سطر جديد وكيف يمكنني ان اضع وسم واحد يفهم المتصفح انني كتبت اسطر متعدده ؟ اعتقد فهمت قصدي اخي الغالي .

السلام عليكم
اخي الغالي ممكن امثلة على تلوين النص ثم بعد ذلك اضافة تاثيرات عليه ام ان الوقت مبكرا على اضافة تاثيرات على النص ؟

السلام عليكم
اخي الغالي وضعت هذا الكود ما وجه الخطا فيه

الدرس الثاني في تعلم لغة HTML 0010

اخي العزيز
ارجو ان تسامحني في تأخري بالرد عليك وذلك بسبب سفري خمسة ايام
وكنت بعيد عن الكمبيوتر
وان شاء الرحمن سوف ارد على استفسارك غدا
لاني وصلت اليوم واشعر بالاجهاد والتعب
وتقبل تحياتي

اخي العزيز
ارجو ان تسامحني في تأخري بالرد عليك وذلك بسبب سفري خمسة ايام
وكنت بعيد عن الكمبيوتر
وان شاء الرحمن سوف ارد على استفسارك غدا
لاني وصلت اليوم واشعر بالاجهاد والتعب
وتقبل تحياتي

الف الحمد لله على سلامتك اخي الغالي
على راحتك اخي متى ما تحب اجب اتمنى لك الصحة والعافيه اللهم امين

رفعت عبد الكريم كتب:: السلام عليكم
اخي الغالي وضعت هذا الكود ما وجه الخطا فيه

وعليكم السلام
يااخي الغالي لا نضع في منطقة التايتل اي العنوان
سوى العنوان فقط دون اي اضافات من الوان وغيرها

اما الالوان او الصور كخلفية لصفحة الويب تكون هكذا

الكود:: <BODY نضع هنا الالوان والصور وحجم الخط وجميع التاثيرات التي تريدها>

الكود:: <BODY >

الكود بعد التصحيح

الكود:: <HTML>
<HEAD>
<TITLE>
WWW.ALAMALBRAMIJ.COM
</TITLE>
</HEAD>
<BODY BGCOLOR="red">
welcome to my new web sit intristing
</BODY>
</HTML>

رفعت عبد الكريم كتب:

السلام عليكم
اخي الغالي ولو اتعبك لم تظهر لي الخلفية وهذه هي الاكواد

الكود:: <html>
<head>
<titel>
WWW.ALAMALBRAMIJ.COM 
</TITEL>
</HEAD>
<BACKGRUND="http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg">
welcome to my new web sit intristing
</HTML>

ظهرت هكذا

بالمناسبة لا اذكر ان سالتك هذا السؤال وهو :
بالنسبة الى الوسم

الكود::

هل اضعه نهاية كل سطر لاجل كتابة سطر جديد وكيف يمكنني ان اضع وسم واحد يفهم المتصفح انني كتبت اسطر متعدده ؟ اعتقد فهمت قصدي اخي الغالي .

وعليكم السلام
يااخي الغالي لا نضع في منطقة التايتل اي العنوان
سوى العنوان فقط دون اي اضافات
وحضرتك اخطأت حين وضعت الوسم الاتي بعد العنوان

الكود::

هذا اول خطأ
اما ثاني خطأ فقد حذفت
body
وحذفت
body/
والكود بعد التصحيح يكون هكذا

الكود:: <HTML>
 <HEAD>
 <TITLE>
 WWW.ALAMALBRAMIJ.COM
 </TITLE>
 </HEAD>
 <BODY BACKGROUND="http://www.girls-ly.com/vb/storeimg/img_girls-ly1364048366_227.jpg"
 BGCOLOR="Aqua"‎>
 welcome to my new web sit intristing
 </BODY>
 </HTML>

اما

الكود::

فيوضع في نهاية كل سطر في منطقة البودي فقط كما في الكود التالي

الكود:: <BODY>
نضع هنا
 
في نهاية كل سطر
</BODY>

السلام عليكم
اشكرك اخي الغالي على التوضيح
بالنسبة للخلفية والتي اخترتها كمنظر طبيعي ظهرت صورتين متجاورتين كيف اجعلها صورة واحدة واريد ايضا تكبير الخط في العنوان اذا لم يكن عندك مانع اخي الغالي .

السلام عليكم
اخي الغالي هل يمكن ان لا نضع وسم بداية الرأس ونهاية الرأس طبعا انا كتبت هيد بالانكليزي ولكن لا تظهر عند ارسال الرسالة لك اخي الغالي

الكود:

<head> <head/>

السلام عليكم
اخي الحبيب ما رايك بهذا
http://www.4shared.com/document/qcHBLs4qba/3_online.html
وهذا هو الكود الخاص به هل توجد ملاحظات عليه اخي الغالي ام انه تمام ؟
http://www.4shared.com/office/jM8OvL78ba/3_online.html

رفعت عبد الكريم كتب:: السلام عليكم
اشكرك اخي الغالي على التوضيح
بالنسبة للخلفية والتي اخترتها كمنظر طبيعي ظهرت صورتين متجاورتين كيف اجعلها صورة واحدة واريد ايضا تكبير الخط في العنوان اذا لم يكن عندك مانع اخي الغالي .

هل هذه هي صورة الخلفية
الدرس الثاني في تعلم لغة HTML 1110

اذا كانت هي فهي تظهر عندي كاملة
اما اذا كنت اخترت صورة صغيرة فصفحة الويب تكرر الصورة الصغيرة لكي تملأ صفحة الويب

وبخصوص تكبير العنوان
فاذا كنت تقصد هذا العنوان
WWW.ALAMALBRAMIJ.COM
الموجود في منطقة التايتل
فلا يمكن تكبيره او تلوينه

رفعت عبد الكريم كتب:

السلام عليكم
اخي الغالي هل يمكن ان لا نضع وسم بداية الرأس ونهاية الرأس طبعا انا كتبت هيد بالانكليزي ولكن لا تظهر عند ارسال الرسالة لك اخي الغالي

الكود:: <head> <head/>

لكي تظهر الوسوم ضعها هكذا

الكود:: [code]
نضع هنا الوسوم المختلفة لكي تظهر
[/code]

السلام عليكم
نعماخي الغالي هي الصورة التي اعنيها
هل السبب في تجاور الصورة هو المتصفح ؟
ما رايك الكود الذي كونته وخلفية علم العراق على غرار علم مصر ((( ام الدنيا )))

رفعت عبد الكريم كتب:: السلام عليكم
اخي الحبيب ما رايك بهذا
http://www.4shared.com/document/qcHBLs4qba/3_online.html
وهذا هو الكود الخاص به هل توجد ملاحظات عليه اخي الغالي ام انه تمام ؟
http://www.4shared.com/office/jM8OvL78ba/3_online.html

الله ينور عليك ميه على ميه برافو

رفعت عبد الكريم كتب:: السلام عليكم
نعماخي الغالي هي الصورة التي اعنيها
هل السبب في تجاور الصورة هو المتصفح ؟
ما رايك الكود الذي كونته وخلفية علم العراق على غرار علم مصر ((( ام الدنيا )))

عمل رائع اخي الحبيب
وعلم العراق الحبيب منور صفحة الويب
استمر على هذا المنوال

» الدرس الأول في تعلم لغة HTML
» تعلم كيف تجعل الكلام متحرك ببرنامج Easy Gif Animator
» مقدمة في لغة HTML