دروس في لغة الـ HTML
2 مشترك
صفحة 1 من اصل 1
دروس في لغة الـ HTML
من طرف M.H.A.T 25/11/2007, 4:08 am
الدرس الأول
السلام عليكم ورحمة الله وبركاته
أحبابي في الله..
على فترات متباعدة قمت بالإحتفاظ بالكثير من التعليمات التي تعنى بهذه اللغة المهمة والمستخدمة في تصميم المواقع بكثرة وأحببت أن يطلع عليها الأعضاء والزوار ممن يحبوزن أن يصممون مواقع لهم بأستخدامها
وسأقوم لاحقا بأضافة بعض الكودات المشهورة والمستخدمة بكثرة.والتي سأقوم بأنتقائها من بعض المواقع التي تقدم هذه الكودات وأرجو ممن لديهم الخبرة في هذا المجال أن لا يبخلوا بعلمهم فكلنا نتعلم من بعضنا الأخر
وشكرا
********
في البداية ما معنى لغة HTML ؟
لغة HTML هي اختصار لجملة (Hyper Text Markup Langauge ) وهي إحدى الطرق في تصميم صفحات على
الانترنت أو تزيين الرسائل التي تبعث عبر البريدالالكتروني.
و تكتب لغة HTML برموز غريبة وكثيرة اسمها باللغة الانجليزية الـTags وتسمى باللغة العربية الوسوم .
و لكل وسم من وسوم لغة الـHTML وسم بداية ووسم نهاية وسوف امثله لك من خلال الرسم التالي :
<الوسم >
الكلام الذي يتمتع بخاصية الوسم
< الوسم السابق/ >
فلنبدأ بشرح أهم وسوم في لغة الـHTML
وسم البداية وسم النهاية
< HTML > < / HTML >
< HEAD > < /HEAD >
< TITLE > < /TITLE >
< BODY > < /BODY >
سوف أشرح كل وسم على حدى :
والوسم الأول هو الوسم < HTML > الذي كما ذكرت سابقاً أنه أهم الوسوم المستخدمة في بناء الصفحات المستخدم
فيها لغة الـHTML ، لأنه يقوم بتعريف للمتصفح أن هذه الصفحة مصنوعة بلغة الـHTML ويوضع هذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة باهتة وغير مفهومة ،
وسم النهاية هو < HTML/ > الذي يوضع أخر المستند المصنوع بلغة الـHTML .
فلنأتي الآن للوسم < HEAD > الذي يستخدم لتعريف صاحب الصفحة واللغة والعديد من الأشياء الأخرى.
وأذكرك أن وسم النهاية الخاص به هو < HEAD/ >
نأتي الآن إلى الوسم < TITLE > الذي يمثل الكلام الذي يوضع أعلى الشاشة على اليسار ،
ووسم النهاية الخاص به هو < TITLE/ > ، ملاحظة يوضع هذا الوسم بين الوسمين < HEAD > و < HEAD/ >
نأتي الآن إلى الوسم < BODY > الذي هو أهم ما في الدروس بأكملها ، حيث يمثل هذا الوسم محتويات الصفحة بأكملها
حيث تضع فيه الجداول والصور و المواضيع وكل ماتريده أن يظهر على الصفحة .
الوسم < HTML >يوضع أول الملف المستخدم فيه لغة الـHTML والوسم < HTML/ > يوضع أخر الملف .
الوسم < HEAD > يوضع تحت الوسم < HTML > مباشرة ووظيفته هو تعريف بلغة الصفحة وكاتبها وتلخيص صغير عن محتويات الصفحة ووسم النهاية الخاص به هو < HEAD/ > .
الوسم < TITLE > هو الوسم الذي يوضع فيه عنوان الصفحة الذي سوف يظهر أعلى المتصفح على اليسار . ووسم النهاية الخاص به هو < TITLE/ >
الوسم < BODY > ويوضع هذا الوسم بعد نهاية الوسم < HEAD > ووظيفته هي إظهار محتويات الصفحة على المتصفح ، ووسم النهاية الخاص به هو
< BODY/ >
و للحديث بقيه .............
السلام عليكم ورحمة الله وبركاته
أحبابي في الله..
على فترات متباعدة قمت بالإحتفاظ بالكثير من التعليمات التي تعنى بهذه اللغة المهمة والمستخدمة في تصميم المواقع بكثرة وأحببت أن يطلع عليها الأعضاء والزوار ممن يحبوزن أن يصممون مواقع لهم بأستخدامها
وسأقوم لاحقا بأضافة بعض الكودات المشهورة والمستخدمة بكثرة.والتي سأقوم بأنتقائها من بعض المواقع التي تقدم هذه الكودات وأرجو ممن لديهم الخبرة في هذا المجال أن لا يبخلوا بعلمهم فكلنا نتعلم من بعضنا الأخر
وشكرا
********
في البداية ما معنى لغة HTML ؟
لغة HTML هي اختصار لجملة (Hyper Text Markup Langauge ) وهي إحدى الطرق في تصميم صفحات على
الانترنت أو تزيين الرسائل التي تبعث عبر البريدالالكتروني.
و تكتب لغة HTML برموز غريبة وكثيرة اسمها باللغة الانجليزية الـTags وتسمى باللغة العربية الوسوم .
و لكل وسم من وسوم لغة الـHTML وسم بداية ووسم نهاية وسوف امثله لك من خلال الرسم التالي :
<الوسم >
الكلام الذي يتمتع بخاصية الوسم
< الوسم السابق/ >
فلنبدأ بشرح أهم وسوم في لغة الـHTML
وسم البداية وسم النهاية
< HTML > < / HTML >
< HEAD > < /HEAD >
< TITLE > < /TITLE >
< BODY > < /BODY >
سوف أشرح كل وسم على حدى :
والوسم الأول هو الوسم < HTML > الذي كما ذكرت سابقاً أنه أهم الوسوم المستخدمة في بناء الصفحات المستخدم
فيها لغة الـHTML ، لأنه يقوم بتعريف للمتصفح أن هذه الصفحة مصنوعة بلغة الـHTML ويوضع هذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة باهتة وغير مفهومة ،
وسم النهاية هو < HTML/ > الذي يوضع أخر المستند المصنوع بلغة الـHTML .
فلنأتي الآن للوسم < HEAD > الذي يستخدم لتعريف صاحب الصفحة واللغة والعديد من الأشياء الأخرى.
وأذكرك أن وسم النهاية الخاص به هو < HEAD/ >
نأتي الآن إلى الوسم < TITLE > الذي يمثل الكلام الذي يوضع أعلى الشاشة على اليسار ،
ووسم النهاية الخاص به هو < TITLE/ > ، ملاحظة يوضع هذا الوسم بين الوسمين < HEAD > و < HEAD/ >
نأتي الآن إلى الوسم < BODY > الذي هو أهم ما في الدروس بأكملها ، حيث يمثل هذا الوسم محتويات الصفحة بأكملها
حيث تضع فيه الجداول والصور و المواضيع وكل ماتريده أن يظهر على الصفحة .
الوسم < HTML >يوضع أول الملف المستخدم فيه لغة الـHTML والوسم < HTML/ > يوضع أخر الملف .
الوسم < HEAD > يوضع تحت الوسم < HTML > مباشرة ووظيفته هو تعريف بلغة الصفحة وكاتبها وتلخيص صغير عن محتويات الصفحة ووسم النهاية الخاص به هو < HEAD/ > .
الوسم < TITLE > هو الوسم الذي يوضع فيه عنوان الصفحة الذي سوف يظهر أعلى المتصفح على اليسار . ووسم النهاية الخاص به هو < TITLE/ >
الوسم < BODY > ويوضع هذا الوسم بعد نهاية الوسم < HEAD > ووظيفته هي إظهار محتويات الصفحة على المتصفح ، ووسم النهاية الخاص به هو
< BODY/ >
و للحديث بقيه .............
M.H.A.T- المدير
-
عدد الرسائل : 238
العمر : 36
المدينة : مدينة الحب
العمل : المدير
المزاج : very cool
احترام قوانين المنتدى :
السٌّمعَة : 0
تاريخ التسجيل : 05/11/2007 -
دروس في لغة الـ HTML
من طرف M.H.A.T 25/11/2007, 4:13 am
الدرس الثاني
كيف أستطيع أن أقوم بحفظ ملف بلغة HTML?
إذا اردت حفظ ملف في لغة الـHTML احفظه بأي اسم تريده ولكن
يجب عليك أن يكون امتداد هذا الاسم هو htm أو html ولا يوجد فرق في أي هذين الامتدادين ولكن يجب عليك أن تختار أحدهما وترفقه خلف الاسم الذي اخترته
ملاحظة:
من الأفضل أن تقوم بإنشاء مجلد على القرص الصلب لكي تحفظ به ملفاتك لتسهل عملية استرجاعها أو تحديثها .
مثال للتوضيح :
قم بإنشاء مجلد باسم C:\oman وسميت الملف بـ
Muscat.htm وكتبت هذه الشفرة :
<HTML>
<HEAD>
<TITLE>
الله اكبر
<TITLE/>
<HEAD/>
<BODY>
سبحانك الله
<BODY/>
<HTML/>
إذا اردت رؤية النتيجة وكان متصفحك MS intrernet explorer اختر الأمر Open من القائمة FILE
ثم حدد مسار الملف وهذا يتم بطريقتين ، الطريقة الأولى هي كتابة المسار والطريقة الثانية هي بالضغط على
زر browse ثم تحديد الملف والضغط على Open .
أما إذا كان متصفحك Netscape Navigator اختر الأمر Opaen File من القائمة FILE ثم حدد المسار الذي
يوجد به الملف ، أنا شخصياً حددت المسار التالي :
C:\my documents\&_temp1.htm
ملا حظات مهمة:
1- لافرق إذا كتبت الوسوم بالأحرف الكبيرة أو الأحرف الصغيرة .
2-لافرق إذا كتبت الوسوم متباعدة أو متقاربة ، يعني : تستطيع كتابة الملف السابق هكذا :
<HTML> <HEAD> <TITLE> الله اكبر ولا إله لإ الله<TITLE/> <HEAD/> <BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد <BODY/> <HTML/>
او كذا :
<HTML>
<HEAD>
<TITLE>
الله أكبر ولا إله لإ الله
<TITLE/>
<HEAD/>
<BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد
<BODY/>
<HTML/>
والسبب أن المتصفحات لا تأخذ بعين الاعتبار المسافات ولاالفراغات الزائدة ، فإذا اردت أن تبدأ سطر جديد عليك وضع
الوسم
وإذا اردت ادراج فراغ عليك وضع الوسم ;nbsp&
وسنكمل إن شاء الله في مرة قادمة
كيف أستطيع أن أقوم بحفظ ملف بلغة HTML?
إذا اردت حفظ ملف في لغة الـHTML احفظه بأي اسم تريده ولكن
يجب عليك أن يكون امتداد هذا الاسم هو htm أو html ولا يوجد فرق في أي هذين الامتدادين ولكن يجب عليك أن تختار أحدهما وترفقه خلف الاسم الذي اخترته
ملاحظة:
من الأفضل أن تقوم بإنشاء مجلد على القرص الصلب لكي تحفظ به ملفاتك لتسهل عملية استرجاعها أو تحديثها .
مثال للتوضيح :
قم بإنشاء مجلد باسم C:\oman وسميت الملف بـ
Muscat.htm وكتبت هذه الشفرة :
<HTML>
<HEAD>
<TITLE>
الله اكبر
<TITLE/>
<HEAD/>
<BODY>
سبحانك الله
<BODY/>
<HTML/>
إذا اردت رؤية النتيجة وكان متصفحك MS intrernet explorer اختر الأمر Open من القائمة FILE
ثم حدد مسار الملف وهذا يتم بطريقتين ، الطريقة الأولى هي كتابة المسار والطريقة الثانية هي بالضغط على
زر browse ثم تحديد الملف والضغط على Open .
أما إذا كان متصفحك Netscape Navigator اختر الأمر Opaen File من القائمة FILE ثم حدد المسار الذي
يوجد به الملف ، أنا شخصياً حددت المسار التالي :
C:\my documents\&_temp1.htm
ملا حظات مهمة:
1- لافرق إذا كتبت الوسوم بالأحرف الكبيرة أو الأحرف الصغيرة .
2-لافرق إذا كتبت الوسوم متباعدة أو متقاربة ، يعني : تستطيع كتابة الملف السابق هكذا :
<HTML> <HEAD> <TITLE> الله اكبر ولا إله لإ الله<TITLE/> <HEAD/> <BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد <BODY/> <HTML/>
او كذا :
<HTML>
<HEAD>
<TITLE>
الله أكبر ولا إله لإ الله
<TITLE/>
<HEAD/>
<BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد
<BODY/>
<HTML/>
والسبب أن المتصفحات لا تأخذ بعين الاعتبار المسافات ولاالفراغات الزائدة ، فإذا اردت أن تبدأ سطر جديد عليك وضع
الوسم
وإذا اردت ادراج فراغ عليك وضع الوسم ;nbsp&
وسنكمل إن شاء الله في مرة قادمة
M.H.A.T- المدير
-
عدد الرسائل : 238
العمر : 36
المدينة : مدينة الحب
العمل : المدير
المزاج : very cool
احترام قوانين المنتدى :
السٌّمعَة : 0
تاريخ التسجيل : 05/11/2007 -
دروس في لغة الـ HTML
من طرف M.H.A.T 25/11/2007, 4:15 am
الدرس الثالث
كيف يمكننا إضافة الخطوط وبأحجام مختلفة ؟
كما هو معلوم فإن الخطوط تعتبر مهمة جدا حيث أنها هي الأساس في كل موقع لأنها وعبرها يتمكن صاحب الموقع من توصيل أفكاره الى زوار موقعه.
طبعا لكل نوع من الخطوط امر خاص.
---------------------------------------------------------------------
حسنا سنتعلم الأن كيفية كتابة عنوان ما بحيث يكون في وسط الصفحة
لكي تظهر لك العبارة في الوسط
اكتب الأمر التالي
هذه العبارة ستظهر في الوسط
تذكر أنه يمكنك أن تكتب هذه الأمر على الشكل التالي
هذه العبارة ستظهر في الوسط
--------------------------------------------------------------------
بالنسبة للخط المائل
ولكي يظهر لك ذلك اكتب الامر التالي
الخط المائل
--------------------------------------------------------------------
وهذه انواع اخرى من الخطوط مع اوامرها
هذا المر يمكنك من أدراج خط بشكل عادي( يمكنك أن تكتب من خلاله مقالة)
خط عادي
بإستخدام الأمر التالي ستظهر العبارة وكأنها مشطوبة بخطعبارة مشطوبة بخط
بإستخدام المر التالي ستظهر العبارة وتحتها خط
هنا سوف اتعلم كيفية إدراج الخطوط
--------------------------------------------------------------------
ماذا عن احجام هذه الخطوط؟!
أنه أسهل مما تتصورون
فقط كل ما عليك أن تستخدم هذا الأمر
<h2>هذا الحجم رقم اثنين</h2>
<h3>هذا الحجم رقم ثلاثة</h3>
<h4>هذا الحجم رقم أربعة</h4>
كيف يمكننا إضافة الخطوط وبأحجام مختلفة ؟
كما هو معلوم فإن الخطوط تعتبر مهمة جدا حيث أنها هي الأساس في كل موقع لأنها وعبرها يتمكن صاحب الموقع من توصيل أفكاره الى زوار موقعه.
طبعا لكل نوع من الخطوط امر خاص.
---------------------------------------------------------------------
حسنا سنتعلم الأن كيفية كتابة عنوان ما بحيث يكون في وسط الصفحة
لكي تظهر لك العبارة في الوسط
اكتب الأمر التالي
تذكر أنه يمكنك أن تكتب هذه الأمر على الشكل التالي
هذه العبارة ستظهر في الوسط
--------------------------------------------------------------------
بالنسبة للخط المائل
ولكي يظهر لك ذلك اكتب الامر التالي
الخط المائل
--------------------------------------------------------------------
وهذه انواع اخرى من الخطوط مع اوامرها
هذا المر يمكنك من أدراج خط بشكل عادي( يمكنك أن تكتب من خلاله مقالة)
خط عادي
بإستخدام الأمر التالي ستظهر العبارة وكأنها مشطوبة بخط
بإستخدام المر التالي ستظهر العبارة وتحتها خط
هنا سوف اتعلم كيفية إدراج الخطوط
--------------------------------------------------------------------
ماذا عن احجام هذه الخطوط؟!
أنه أسهل مما تتصورون
فقط كل ما عليك أن تستخدم هذا الأمر
<h2>هذا الحجم رقم اثنين</h2>
<h3>هذا الحجم رقم ثلاثة</h3>
<h4>هذا الحجم رقم أربعة</h4>
M.H.A.T- المدير
-
عدد الرسائل : 238
العمر : 36
المدينة : مدينة الحب
العمل : المدير
المزاج : very cool
احترام قوانين المنتدى :
السٌّمعَة : 0
تاريخ التسجيل : 05/11/2007 -
دروس في لغة الـ HTML
من طرف M.H.A.T 25/11/2007, 4:17 am
الدرس الرابع
سيكون درس اليوم بأذن الله تعالى عن أستخدام الألوان في تصميم الصفحات.
نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
تأمل الشيفرة التالية:
<BODY BGCOLOR="FFFFFF">
...
</BODY>
لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح......
فمن أين جاءت هذه القيم، وكيف؟... تابع القراءة وسوف تعرف
القليل عن الألوان...
كما هو معروف هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
وبشكل أخر فأن إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة *
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.
وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط ( هذه المعلومات كي تفهمون وتستطيعون تحليل وفهم أي شفرة مكتوبة بلغة HTML).
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.
وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.
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
( ولهذا فكثير من المواقع تجدها لا تحتوي على أكثر من هذه الألوانوذلك بسبب أن مصمم الموقع لا يعرف شئ عن الأرقام العشرية للألوان ولهذا ففي حالة الرغبة في أستخدام ألوان اخرى لا بدمن معرفة الأرقام العشرية )
وعموما لنعود إلى الوسوم و خصائصها ...
<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">
...
</BODY>
تقوم الخاصية BACKGROUND بتحديد صورة كخلفية للصفحة .
إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع يسمى التجانب ( أي يجعل من الصورة الصغيرة تبدو في حجم كبير ).
ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأحمرأو الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
TEXT="#rrggbb" تحديد لون النص الأساسي للصفحة
LINK="#rrggbb" تحديد لون الوصلات التشعبية
VLINK="#rrggbb" تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
ALINK="#rrggbb" تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links
ربما من المفيدلكم يا اعزائي أن اكون بها شفرة حتى تفهمونها بشكل أسهل:
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
قد حددت الصورة backimag.jpg كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.
أرجو أن اكون قد وفقت في شرح خاصية أستخدام الألوان
سيكون درس اليوم بأذن الله تعالى عن أستخدام الألوان في تصميم الصفحات.
نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
تأمل الشيفرة التالية:
<BODY BGCOLOR="FFFFFF">
...
</BODY>
لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح......
فمن أين جاءت هذه القيم، وكيف؟... تابع القراءة وسوف تعرف
القليل عن الألوان...
كما هو معروف هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
وبشكل أخر فأن إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة *
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.
وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط ( هذه المعلومات كي تفهمون وتستطيعون تحليل وفهم أي شفرة مكتوبة بلغة HTML).
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.
وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.
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
( ولهذا فكثير من المواقع تجدها لا تحتوي على أكثر من هذه الألوانوذلك بسبب أن مصمم الموقع لا يعرف شئ عن الأرقام العشرية للألوان ولهذا ففي حالة الرغبة في أستخدام ألوان اخرى لا بدمن معرفة الأرقام العشرية )
وعموما لنعود إلى الوسوم و خصائصها ...
<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">
...
</BODY>
تقوم الخاصية BACKGROUND بتحديد صورة كخلفية للصفحة .
إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع يسمى التجانب ( أي يجعل من الصورة الصغيرة تبدو في حجم كبير ).
ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأحمرأو الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
TEXT="#rrggbb" تحديد لون النص الأساسي للصفحة
LINK="#rrggbb" تحديد لون الوصلات التشعبية
VLINK="#rrggbb" تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
ALINK="#rrggbb" تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links
ربما من المفيدلكم يا اعزائي أن اكون بها شفرة حتى تفهمونها بشكل أسهل:
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
قد حددت الصورة backimag.jpg كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.
أرجو أن اكون قد وفقت في شرح خاصية أستخدام الألوان
M.H.A.T- المدير
-
عدد الرسائل : 238
العمر : 36
المدينة : مدينة الحب
العمل : المدير
المزاج : very cool
احترام قوانين المنتدى :
السٌّمعَة : 0
تاريخ التسجيل : 05/11/2007 -
سمو الأمير- شخصيات مهمة جداً
-
عدد الرسائل : 29
العمر : 39
المدينة : الرقة
العمل : بين طيات القلوب والمشاعر أعمل وأسكن
المزاج : مروووووووووووووق ع طول
الدولة : القمر
احترام قوانين المنتدى :
السٌّمعَة : 0
تاريخ التسجيل : 11/04/2008
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى