[size=18]دروس في html[/size]

Admin المساهمات : 68 تاريخ التسجيل : 22/05/2008

.:: مقدمة الدرس ::.

أولا لغة الـ html لغه سهله جداً , وهي تمثل عالم واسع ,, حيث يمكنك الغوص والإبداع فيها .

طبعا البرامج التي سنستعملها هي :

1. المفكره - وهي متواجده في كل حاسب ,,, يتم كتابة الأوامر فيها .

2. الإنترنت إكسبلولر - أيضاً أظن أنه متواجد في كل حاسب - يتم رؤية العمل الذي قمنا به من خلاله .

(إمكانية تغيير )

يمكنك إستبدال المفكره بالعديد من البرامج لكتابة أوامرك , وأنا أنصح بإستعمال الـ EditPlus 3

برنامج سهل الإستعمال , يسهل عليك الكثير , ,, ,

لتحميل الـ EditPlus 3

,,,,,,,

بالنسبة لـِ الإنترنت إكسبلولر يمكنك إستبداله بالعديد من المتصفحات مثل :

الأوبرا والفايرفوكس

لكن من جهتي أفضل الإنترنت إكسبلولر .

+--------------+

.:: بداية الدرس ::.

بسم الله نبدأ

تتبع الخطوات بشكل جيّد لتفهم الموضوع ..

أولا , قم بالدخول إلى برنامجك الذي ستبدأ به , وبالنسبة لي سأستخدم برنامج الـ EditPlus

>>

واجهة البرنامج

https://i.servimg.com/u/f48/11/08/81/06/210.gif
قم بإتباع المسار لإفتتاح صفحة عمل جديده ( بالنسبة للمفكره , ستبدأ العمل مباشرةً)

>>

https://i.servimg.com/u/f48/11/08/81/06/310.gif

مع البداية سيتكون لديك أوتوماتيكياً هذه الأوامر ... قم بحذف الأوامر التي محاطه بالأحمر.

>>

النتيجه هي :

https://i.servimg.com/u/f48/11/08/81/06/410.gif

الآن بدأ العمل .. سأقوم بشرح الأوامر التي نمتلكها.

بالنسبة للأمر الأول وهو

<html>

هذا الأمر يتوجب أن يكون في بداية كل صفحه ,

هذا الأمر يُعلم ببداية إنشاء صفحة ويب جديده

طبعا كلنا نلاحظ بأن الأمر نفسه تكرر في نهاية الصفحة مع إضافة العارضة المائله (السلاش).

</html>

>>

من هنا نستنتج بأن كل أمر نبدؤه , سننهيه بالسلاش .

+--------+

هنا أحب أن أوضح فكرة الأولوية

نلاحظ بأن الأمر الذي فتحناه أولا أنهيناه آخراً

وهذه النقطه هي تعد من أهم النقط التي نركز عليها لنجاح الصفحة

>>

بالنسبة للأمر الثاني وهو

<head></head>

>>

هذا الأمر يُعرِّف رأس الصفحه

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

+--------+

بداخل هذا الأمر نجد أن هناك أمر آخر وهو :

<title></title>

هذا الأمر يحوي عنوان الصفحة الذي سيكتب في الشريط العلوي للمتصفح

** طبعاً هذا الأمر يجب أن يكون داخل الأمر <head>

>>

بالنسبة للأمر الثالث وهو :

<body></body>

>>

هذا الأمر يُعرِّف فحوى الصفحة

وغالباً ما تقسم الصفحة إلى :

عنوان الصغحة في الشريط العلوي = <title>

عنوان الصفحة الذي نريد تواجده أعلى الصغحة = <head>

النص الذي تريده في الصفحة (صُلب الموضوع ) = <body>

كل هذه الأوامر تتواجد داخل = <html>

>>

بالنسبة إلى هنا , هذه هي الأوامر الأساسية, التي غالباً ما سنستخدما في كل مشروع (" غالباً "( تذكر هذا في المواضيع القادمة)) .

,,,,,,,

في محرر النصوص إن كان الـ editplus أو المفكره أو أي برنامج , إذا نزلت سطر بعد نص كتبته , لن يعبر ذلك عن شيء عند عرض الصفحة في المتصفح , حتى لو نزلت 100 سطر لن يفيد ذلك شيئاً , لذلك نستعمل الأوامر مخصصه لذلك .

,,,,,,,,,

بالإضافه إلى هذه الأوامر سنستخدم بكثرة

<br>= يؤدي إلى بناء سطر جديد.

<hr> = يؤدي إلى بناء سطر جديد مع إضافة سطر أفقي بعد النص المكتوب قبله .

,,,,

نشير هنا أن الأمران أعلاه لا يغلقان !!

أي نكتب الأمر دون إغلاقه .!.

** نستنتج أن ليس جميع الأوامر تغلق , الأوامر المتعلقة بالنصوص فقط هي التي تغلق ؛ مثال :

الأمر <body> يقوم بتعريف أن النص المتواجد داخله هو يعبر عن صلب الموضوع , لذلك نغلق الأمر بعد النص المراد تعريفه , لكي يتعرف الحاسب أن النص المتواجد بين الأمر <body> هو صُلب الموضوع .

أما بالنسبة للأمر <br> فهذا يقوم ببناء سطر جديد , ليس له علاقة بالنصوص . (بل هو تغيير في مبنى الصفحة) .

,,,,,,

<h1> = يؤدي إلى تغيير حجم الخط , ويتناسق ذلك مع تغيير الرقم ( 1-7) أكبر حجم (1) وأصغر حجم (7).

(هذا الأمر يغلق! )

>>

نعود إلى الموضوع لعمل تطبيق خفيف مع بداية السلسه .

قم بالذهاب إلى EditPlus قم بعمل صفحة جديده .

وإتبع الخطوات الأولى .

بالنسبه للعاملين على المفكره قم بنسخ الأوامر :

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

>>

بالنسبة للأمر <title>

قم بكتابة عنوان الصفحة الذي تريده في الشريط العلوي للمتصفح.

=,,,,=

الأمر <head> ,, أكتب عنوان الصفحة الرئيسي , أعلى الصفحة .

أضف الأمر <br> بعد نص العنوان , أو إن كنت تريد سطر ضع الأمر <hr>

=,,,,=

الأمر <body> أكتب موضوع الصغحة .

بإضافة <br> عندما تريد بناء سطر جديد , وأيضا يمكنك إستخدام <hr> لسطر أفقي , والأمر <h1> لتكبير حجم الخط .

** طبعاً لا تنسى أن كل هذا موجود داخل الأمر <html>.

>>

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

** طبعاً النص المدوّن , هو إختياري , كل واحد حر في كتابته .

لاحظ كيفية إستخدام الأوامر ,, بالنسبة للسطر 13 لاحظ أنّ الأمر <br> متكرر , هذا يدل على أني أريد أن أنزل سطران .

الآن قم بحفظ العمل >>

وأضف في آخر إسم الصفحة كلمة html ليتم تعريفها أنها صفحة ويب .

** إنتبه للملاحظه , بالنسبة للخانة الأخيره قم بتغييرها إلى

Unicode

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

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

>>

الآن إذهب للمكان الذي قمت بحفظ الصفحة فيه , وإضغط على الصفحه لرؤية الناتج ...

الناتج ,,

لاحظ تناسق الخطوط , حسب الحجم !!

ولاحظ أيضا عنوان الشريط العلوي .

+-------+

.:: الخاتمة ::.