شرح تفصيلي ل لغة html

أهلاً بك إلى مقدمة دروس لغة HTML أو كما يسميها البعض لغة الهتمل .

حسناً فلنبدأ الشرح ولكن أولاً أريد أن أجيب على بعض أسئلتك واتوقع أن أول سؤال يقول :

ما معنى لغة HTML ؟

لغة HTML هي اختصار لجملة (Hyper Text Markup Langauge ) وهي إحدى الطرق في تصميم صفحات على الانترنت أو تزيين الرسائل التي تبعث عبر البريدالالكتروني.

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

حسناً فلنبدأ الشرح تكتب لغة HTML برموز غريبة وكثيرة اسمها باللغة الانجليزية الـTags وتسمى باللغة العربية الوسوم .

و لكل وسم من وسوم لغة الـHTML وسم بداية ووسم نهاية وسوف امثله لك من خلال الرسم التالي :

<الوسم >

الكلام الذي يتمتع بخاصية الوسم

< الوسم السابق/ >

فلنبدأ بشرح أهم وسوم في لغة الـHTML

[b]وسم البداية[/b]

وسم النهاية

< HTML >

< / HTML >

< HEAD >

< /HEAD >

< TITLE >

< /TITLE >

< BODY >

< /BODY >

</B>

سوف أشرح كل وسم على حدى :

والوسم الأول هو الوسم < HTML > الذي كما ذكرت سابقاً أنه أهم الوسوم المستخدمة في بناء الصفحات المستخدم فيها لغة الـHTML ، لأنه يقوم بتعريف للمتصفح أن هذه الصفحة مصنوعة بلغة الـHTML ويوضع هذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة باهتة وغير مفهومة ، وسم النهاية هو < HTML/ > الذي يوضع أخر المستند المصنوع بلغة الـHTML .

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

فلنأتي الآن للوسم < HEAD > الذي يستخدم لتعريف صاحب الصفحة واللغة والعديد من الأشياء التي سوف نشرحها في دروس قادمة إنشاء الله . وأذكرك أن وسم النهاية الخاص به هو < HEAD/ >

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

نأتي الآن إلى الوسم < TITLE > الذي يمثل الكلام الذي يوضع أعلى الشاشة على اليسار ، ووسم النهاية الخاص به هو < TITLE/ > ، ملاحظة يوضع هذا الوسم بين الوسمين < HEAD > و < HEAD/ >

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

نأتي الآن إلى الوسم < BODY > الذي هو لب الدروس بأكملها ، حيث يمثل هذا الوسم محتويات الصفحة بأكملها حيث تضع فيه الجداول والصور و المواضيع وكل ماتريده أن يظهر على الصفحة . وسوف أبسط لك كل ما ذكرت في هذا الدرس داخل الجدول :

[b]الوسم < HTML >يوضع أول الملف المستخدم فيه لغة الـHTML والوسم < HTML/ > يوضع أخر الملف .[/b]

الوسم < HEAD > يوضع تحت الوسم < HTML > مباشرة ووظيفته هو تعريف بلغة الصفحة وكاتبها وتلخيص صغير عن محتويات الصفحة ووسم النهاية الخاص به هو < HEAD/ > .

الوسم < TITLE > هو الوسم الذي يوضع فيه عنوان الصفحة الذي سوف يظهر أعلى المتصفح على اليسار . ووسم النهاية الخاص به هو < TITLE/ >

الوسم < BODY > ويوضع هذا الوسم بعد نهاية الوسم < HEAD > ووظيفته هي إظهار محتويات الصفحة على المتصفح ، ووسم النهاية الخاص به هو < BODY/ >

</B>

أهم أمور لغة الـHTML

أهم أمور لغة الـHTML ألا وهي الألوان فبدون الألوان تصبح الصفحة باهتة وغير جميلة . هل تذكر الصفحة التي التي عملنها في الدرس الثاني ، كانت صفحة رمادية وخط بمقياس 3 ولونه أسود ، ما رأيك أن نغير خلفية الصفحة . فلنبدأ :

إذا اردت تغير خلفية الصفحة ما عليك إلا وضع هذا الوسم داخل الوسم < BODY >هكذا :

< "BODY BGCOLOR="008080 > وإذا اردت وضع الخلفية باللون الأحمر لوضعت الرقم FF0000 بدل من الرقم FFFFFF الذي يمثل الرقم الأبيض وهكذا . حسناً أنا أتوقع منك أن تسأل من أين جائت هذه الأرقام ، وكيف نستخرج اللون المناسب ؟

الجواب هو : أن كل رقم من هذه الأرقام هو مزيج من اللون الأزرق و الأخضر والأحمر . حيث يمثلان الرقمان الأولان على اليمين نسبة وجود اللون الأزرق ، والرقمين الذان في الوسط يمثلان نسبة وجود اللون الأخضر ، والرقمان الذان على اليسار يمثلان نسبة وجود اللون الأحمر .

أي لون هو مزيج وبنسبة معينة من هذه الألوان الثلاث

حيث تُمَكِنُكَ لغة الـHTML من وضع 16777216 لون في صفحتك . حسناً ولكن من أين جائت الرمز 000000 الذي يمثل اللون الأسود ؟

هي أرقام عادية مكتوبة بالنظام السداسي العشري ، فالرقم 255 بالنطام العشري يكافيء الرقم FF بالنظام السداسي العشري .

ولكن من الأفضل لك وضع الإشارة # قبل رقم اللون لأن بعض المتصفحات لا تتعرف على اللون إلى بوضع هذه الإشارة

ﻗﺪ ﻣــــــــﺂﺗﺖ ﺍﻟﻜَﺜﻴﺮ ﻣِﻦ ﺍﻷﺷَﻴﺂﺀ ﻓِﻲ ﺩﺁﺧَـــﻠﻲ , ﻭَ ﺃﺷتهـــي ﺍﻟّﻠﺤـــــــــﺂﻕ ﺑِﻬﺂ

ما فهمت شي
هههههههههههههههههههه

هههههههههههههههه

شكراا لنرورك

ﻗﺪ ﻣــــــــﺂﺗﺖ ﺍﻟﻜَﺜﻴﺮ ﻣِﻦ ﺍﻷﺷَﻴﺂﺀ ﻓِﻲ ﺩﺁﺧَـــﻠﻲ , ﻭَ ﺃﺷتهـــي ﺍﻟّﻠﺤـــــــــﺂﻕ ﺑِﻬﺂ

إذا اردت تغير خلفية الصفحة ما عليك إلا وضع هذا الوسم داخل الوسم < BODY >هكذا :

< "BODY BGCOLOR="008080 > وإذا اردت وضع الخلفية باللون الأحمر لوضعت الرقم FF0000 بدل من الرقم FFFFFF الذي يمثل الرقم الأبيض وهكذا . حسناً أنا أتوقع منك أن تسأل من أين جائت هذه الأرقام ، وكيف نستخرج اللون المناسب ؟

الجواب هو : أن كل رقم من هذه الأرقام هو مزيج من اللون الأزرق و الأخضر والأحمر . حيث يمثلان الرقمان الأولان على اليمين نسبة وجود اللون الأزرق ، والرقمين الذان في الوسط يمثلان نسبة وجود اللون الأخضر ، والرقمان الذان على اليسار يمثلان نسبة وجود اللون الأحمر .

إذاً :

أي لون هو مزيج وبنسبة معينة من هذه الألوان الثلاث

حيث تُمَكِنُكَ لغة الـHTML من وضع 16777216 لون في صفحتك . حسناً ولكن من أين جائت الرمز 000000 الذي يمثل اللون الأسود ؟

هي أرقام عادية مكتوبة بالنظام السداسي العشري ، فالرقم 255 بالنطام العشري يكافيء الرقم FF بالنظام السداسي العشري .

ولكن من الأفضل لك وضع الإشارة # قبل رقم اللون لأن بعض المتصفحات لا تتعرف على اللون إلى بوضع هذه الإشارة

ملاحظة : تستطيع كتابة الألوان الأساسية باستخدام أسماء هذه الألوان باللغة الانجليزية.

ولكن ماذا لو أردت إضافة صورة كخلفية للصفحة ؟؟؟؟

ما عليك إلى إضافة الوسم

< " BODY background="file:///C:\Program Files\my documentes\back.jpg>

...

< BODY/ >

الوصلات التشعيبية .

فلولا الله ثم هي لما كانت الانترنت كما هي الآن . فلنبدأ الآن بالشرح :

عندما نريد وضع وصلة تشعيبية فيجب عليك وضع هذا الوسم :

<A href="http://www.www.net">العنوان <A/>

فلنبدأ بالتفصيل ، جزء من الوسم هو A HREF وهو يخبر المتصفح بأن الوصلة توجد في عالم الشبكة ، وأما الجزء ="http://www.www.net" فهو عنوان الموقع ( يجب أن يكون بين هذين القوسين " " ) ، وأما كلمة العنزان فهي الكلمة اللتي إذا ضغطتها تذهب للموقع، والوسم ينهي هذه الكلمة وإذا لم تضع هذا الوسم تصبح كل الصفحة وصلة واحدة تؤدي لنفس الموقع .

ولكن ماذا لو أردت أن تضع وصلة لأحد الصفحات الموجودة في موقعك ؟؟

الجواب هو :

هكذا :

<A href="/index.htm" >الصفحة الرئيسية لشبكة المصمم </A>

والنتيجة هي :

الصفحة الرئيسية للموقع

ولكن ماذا لو أردت وصلة تشعيبية لفقرة ما ??

ما عليك إلا الذهاب لأول كلمة موجودة في الفقرة التي تريد أن يذهب إليها الزائر ووضعها بين الوسمين <a name="www">أول كلمة موجودة في الفقرة فمثلاً تريد أن تضع وصلة لتشعيبية لبداية كلامنا عن الوصلات التشعيبية

الوصلات التشعيبية

السؤال التالي هو كيف استطعت صنع هذا يا مصمم ؟؟

اولاً اذهب إلى الكلمة التي تريد الزائر أن يذهب إليها وضعها بين الوسمين

<A name="b">الكلمة المراد للزائر الذهاب إليها

ثم اذهب لمكان وضع الوصلة التشعيبية واكتب الوسم التالي :

<A href="#b">الكلمة المراد للزائر أن يضغطها

مبروك استطعت أن تصنع وصلتك . ملاحظة :

تستطيع تغير الحرف b إلى أي كلمة تريدها ولكن يجب أن تتذكر هذه الكلمة .

يجب عليك قبل وضع الاسم وضع الشارة # للوصلة .

.............................

مع تحيات

هديل بدر

CIS .. JUST

ﻗﺪ ﻣــــــــﺂﺗﺖ ﺍﻟﻜَﺜﻴﺮ ﻣِﻦ ﺍﻷﺷَﻴﺂﺀ ﻓِﻲ ﺩﺁﺧَـــﻠﻲ , ﻭَ ﺃﺷتهـــي ﺍﻟّﻠﺤـــــــــﺂﻕ ﺑِﻬﺂ