بوابة الثانوية العامة المصرية - (الدرس الأول ) ...دورات web design التدريبية... مدخل الى لغة الـ HTML

السلام عليكم ورحمة الله بوركاته

سنبدا بإذن الله اول دروس دورات Web Design التدريبية ...:)

وسنبدأ بلغة الـ Html ..:friendsxs3:

<<

أحب اولا ان اذكركم بنظام الدروس والدورات ...:excl:

وهتكون يومين في الاسبوع : أحد - أربعاء

سيتم وضع الدروس في الساعة الـ 11:00 مساءاً ان شاء الله

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

وسيتم وضع جميع لينكات الدروس في الموضوع الأساسي لسرعة الوصول ليها ..

وسيتم استقبال الاستفسارات والردود عليها يوميا من الساعة العاشرة مساءا حتى الواحدة بعد منتصف الليل ..

>>

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

فدوره يقتصر على استخدام البرنامج بما فيه من الوان ورسوم وجداول لانشاء صفحته

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

وسيكون تطبيقنا على محرر نصوص مثل الـ notepad في أنظمة تشغيل Windows ...

أو ما يماثله في أنظمة التشغيل الأخرى ..

حيث يتم حفظ العمل بامتدادhtml او htm >>

name.html

ويتم عرضها بمستعرض الانترنت مثل Internet Explorer

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

ولكن ماذا تعني HTML ??

http://files03.arb-up.com/i/00190/3n0xpd8e7646.jpg

هي اختصار لجملة :

http://files03.arb-up.com/i/00190/89st5qt0p1ed.gif

ومعناها : لغة الترميز للنصوص التشعبية ..

......

ولغة الـ html ليست لغة برمجة بالمعنى المتعارف عليه ..

فهي لا تحتوي على اوامر وعمليات معقدة مثل اوامر التحكم والدوران ..

ولا تحتاج الى مترجم خاص بها ..( compiler)

لذا فنستعين ببعض اللغات الاخرى الى جانبها لجعل الموقع اكثر حركة وحيوية واحترافية ..

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

لغة الـ Html تكتب على هيئة أوسمة ( tags )

ولكل تاج بداية ونهاية ..

<tag>...</tag>

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

وهناك ما يسمى بالسمات او الخواص attributes

وهي وسوم اضافية تضاف للوسم الاساسي لتحديد خواصه..

وسنقوم بالتوضيح فيما بعد

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

نبدأ معا بانشاء اولى صفحاتنا ..

>>

نفتح ملف Notepad

ونبدأ بكتابة الاوامر التالية

كود:

<html>

<head>

<title>my site</title>

</head>

<body>

this is my first site

</body>

</html>

ونقوم بحفظ العمل بإسم :
my site.html
..

سنجد النتيجة كالتالي ..:

http://files03.arb-up.com/i/00190/6cinks5ayxop.jpg

...

فلنقوم بتحليل ما كتبناه ..

<html>
هو وسم البداية لكل صفحات المواقع لذا فهو من الأوسمة الاساسية ..
وقمنا في النهاية بغلقه
</html>

..

<head>
ويتم فيه كتابة عنوان الصفحة ومعلومات عنها والميتاتاج..
وقمنا بغلقه ايضا..
</head>

..

<body>
وهذا هو جسم الصفحة او محتوى الصفحة وما سنكتبه هنا سيظهر عند استعراض الصفحة
سواء كان كلاما كما فعلنا في هذا المثال او وسم يظهر تطبيقه او كلاهما معا ..
وقمنا ايضا بغلقه ..
</body>

..

قم بمحاولة انشاء هذا المثال .. وهذه اول صفحة لك ..

لا تقول الكود بسيط والصفحة بسيطة ..

فهذا هو اساس بناء اضخم المواقع ..

والجبل الكبير أصله حجر صغير ..

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

ملحوظة :

في لغة الـ HTML
لا يوجد فرق اذا قمت بكتابة الاوسمة بحروف كبيرة او بحروف صغيرة .. فهي تقبل الحالتين ..

ملحوظة :

المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة الافقية او الرأسية ..

فهناك أوسمة خاصة لعمل سطر جديد ..

وكود خاص لعمل فراغ افقي زائد ..

للتوضيح أكثر :

حاول كتابة المثال السابق كالآتي :

كود:

<html><head><title>my site</title></head><body>this is my first site</body></html>

ستجد النتيجة واحدة

هل اتضحت الصورة الآن ؟؟

..

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

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

لنقوم اذا بالتعرف على بعض هذه الاوسمة :

الوسم 

هو وسم لا يحتاج الى وسم نهاية ..

وهو يكتب للنزول سطر رأسيا ( اضافة سطر ) ..

فمثلا قم بكتابة المثال السابق كالآتي :

كود:

 

<html>

<head>

<title>my site</title>

</head>

<body>

this is my <br> first site

</body>

</html>

ستجد النتيجة كالآتي :

http://files03.arb-up.com/i/00190/32sm1w3o87kd.jpg

...

هل حصلت على نفس النتيجة ؟؟؟

...

يمكنك فعل هذا ايضا بالوسم ..
ولكن باضافة سطر فارغ بين السطرين ..
فهو في الاساس خاص لكتابة الفقرات .. ويقوم تلقائيا بوضع سطر فارغ بين كل فقرتين

كود:

<html>

<head>

<title>my site</title>

</head>

<body>

<p>this is my </p><p> first site</p>

</body>

</html>

قم بالتجربة ولترى الناتج :)

.........

الكود

كود:

 

فانا اعتبره ايضا من اساسياتت بناء الصفحات
فهو لزيادة فراغ افقيا ..

مثلا لو أردنا ان نكتب

كود:

my site

لو كتبناها هكذا فستظهر لنا
my site

ان مستعرض الانترنت يقرا هذه الفراغات كفراغ واحد فقط ..

ولكي نقوم بصنع هذه الفراغات نكتب :

كود:

my    site

وهكذا سيقوم بوضع اربع فراغات بين الكلمتين ..

او يمكن كتابتها ثلاث مرات فقط + صنع الفراغ الاساسي الذي يقرأه المستعرض

كود:

my    site

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

والآن لنرى كيف يمكننا تنسيق نص ...:

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

كود:

الله 

هنا استخدمنا الوسم ..

والخواص size ,color

ويتم كتابة الخواص كما هو موضح :

attribute="value"

وفي الوسم 

تأخذ الخاصية size قيم من 1 الى 7
والخاصية color تكون قيمتها اسم اللون او الكود الخاص به ويكون عبارة عن علامة # متبوعة بستة حروف او ارقام او كلاهما ..
ويمكن الحصول على اكواد الالوان من هنا :
http://www.computerhope.com/htmcolor.htm

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

لتغيير شكل النص :

YOUR TEXT

للكتابة بخط سميك ..

..

YOUR TEXT

للكتابة بخط مائل ..

..

YOUR TEXT
لوضع خط تحت النص ..

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

لتحديد موقع الفقرة :

نستخدم الوسم 
والخاصية align
وتأخذ القيم : left , right , center
كالآتي :

كود:

 الله 

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

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

نستخدم الوسم <a>..</a>

وحرف a اختصار لكلمة anchor
وهذا الوسم لا يعمل بمفرده بل يحتاج لـ attributes

وأهمها الخاصية href

وهي اختصار لجملة :

Hypertext REFerence

...

وتكون طريقة الكتابة كالآتي :

كود:

<a href=".........">click here</a>

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

مثلا :

كود:

<a href="www.thanwya.com/vb">click here</a>

اذا ستظهر لنا كلمة
click here

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

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

اذا فسنكتفي بهذا القدر اليوم

فالهدف من هذا الدرس هو التعريف باللغة ومعرفة اساسياتها ..

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

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg

ملحوظة : اذا اردت الاستفادة حقا من الدروس لا تقم بالقراءة فقط بل قم بالتطبيق والتدريب كثيرا ..

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

اذا ف المطلوب منكم اليوم والى يوم الاربعاء ان شاء الله التطبيق على ما تم شرحه ..
...

لم اقم في هذا الدرس بوضع الكثير من التطبيقات والنتائج لان برغم اهمية ما قمت بشرحه الا فانه سهل وبسيط جدا و سنتفق جميعا في الناتج ..
ولكن اهم شيء التدريب كثيرا ....;)

واذا اردت الوصول لاعلى السلم فسيجب عليك بالتأكيد صعود اول درجة مهما كانت في نظرك قليلة .. اليس كذلك ؟؟

في انتظار استفساراتكم ..:)

http://files03.arb-up.com/i/00190/swttdul8oynm.jpg