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

~: Zac :~ · #1 15-08-2010, 10:30 PM

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

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

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

<<

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

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

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

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

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

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

>>

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

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

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

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

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

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

name.html

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

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

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

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

......

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

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

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

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

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

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

<tag>...</tag>

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

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

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

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

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

>>

نفتح ملف Notepad

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

كود:

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

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

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

...

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

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

..

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

..

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

..

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

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

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

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

ملحوظة :

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

ملحوظة :

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

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

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

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

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

كود:

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

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

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

..

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

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

الوسم 

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

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

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

كود:

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

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

...

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

...

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

كود:

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

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

.........

الكود

كود:

&nbsp;

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

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

كود:

my    site

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

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

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

كود:

my&nbsp;&nbsp;&nbsp;&nbsp;site

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

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

كود:

my &nbsp;&nbsp;&nbsp;site

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

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

كود:

<font size="3" color="red">الله </font>

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

والخواص size ,color

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

attribute="value"

وفي الوسم 

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

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

YOUR TEXT

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

..

YOUR TEXT

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

..

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

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

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

كود:

<p align="center"> الله </p>

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

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

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

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

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

Hypertext REFerence

...

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

كود:

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

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

مثلا :

كود:

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

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

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

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

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

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

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

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

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

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

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

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

abdelrahim666 · #2 16-08-2010, 12:49 AM

بداية قوية اخي العزيز واتمني المزيد بارك الله فيك واتنمي التخطي من ال html الي اللغات الاحدث مثل اكسبرشن وب او دريم ويفر واعلم جيدا ان الاساس لهم جميعا فهملغة ال html فارجو الاستفاضة في هذه اللغة

Mahmoud3129 · #3 16-08-2010, 01:13 AM

لماذا درس واحد في المرة ؟ اقترح علي الاقل 3 دروس

لاننا في الدورة يومين فقط

فأقترح اكثر من درس وشكرا علي هذا الدرس الرائع الذي افادني جدا

أ/أحمدجاد · #4 16-08-2010, 01:25 AM

درس مفيد جدا
لقد قمت بالتنفيذ بالفعل
شكرا لك

~: Zac :~ · #5 16-08-2010, 09:37 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة abdelrahim666

بداية قوية اخي العزيز واتمني المزيد بارك الله فيك واتنمي التخطي من ال html الي اللغات الاحدث مثل اكسبرشن وب او دريم ويفر واعلم جيدا ان الاساس لهم جميعا فهملغة ال html فارجو الاستفاضة في هذه اللغة

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

اقتباس:

المشاركة الأصلية كتبت بواسطة medowebhost.com

لماذا درس واحد في المرة ؟ اقترح علي الاقل 3 دروس

لاننا في الدورة يومين فقط

فأقترح اكثر من درس وشكرا علي هذا الدرس الرائع الذي افادني جدا

والله يا غالي انا هعمل اللي ربنا هيقدرني عليه .. بس المرة دي كان طبيعي يكون درس بسيط عشان اكيد فيه ناس لسه دا اول عهد ليها بالهتمل فلو الكمية كبيرة اعتقد هيكون فيه " توهان ولخبطة " ..

بس باذن الله بعد كده الدروس هتكون مكثفة و الشرح فيها كتير وبحييك على حماسك ربنا يزيدك من علمه وينفعك بيه وينفع الناس بيك

اقتباس:

المشاركة الأصلية كتبت بواسطة أ/أحمدجاد

درس مفيد جدا
لقد قمت بالتنفيذ بالفعل
شكرا لك

رأي حضرتك شرف ليا استاذ احمد ربنا يكرمك وباذن الله تكون كل الدروس عند حسن ظن حضرتك

اقتباس:

المشاركة الأصلية كتبت بواسطة ahmeddeep

جزاك الله خيرا ممتاز

وجزاك كل خير يا غالي ياريت متابعتك الجميلة معانا تدوم على طول

اقتباس:

المشاركة الأصلية كتبت بواسطة mohamed romio

بارك الله فيك وزادك علما إلى علمك وعلمنا الله بما ينفعنا أمين

آمين يارب .. تسلم على الدعاء الجميل ربنا يكرمك يا محمد

........

ahmeddeep · #6 16-08-2010, 02:25 AM

جزاك الله خيرا ممتاز

mohamed romio · #7 16-08-2010, 01:22 PM

بارك الله فيك وزادك علما إلى علمك وعلمنا الله بما ينفعنا أمين

smsma_2020 · #8 17-08-2010, 11:43 PM

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

~: Zac :~ · #9 21-08-2010, 08:49 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة smsma_2020

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

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

اقتباس:

المشاركة الأصلية كتبت بواسطة flower25

شكرا لك على هذا الدرس
ولكن عندى استفسار لماذا لغة html ففى البرامج الحديثة لسنا فى حاجة الى معرفة اللغة وكتابة الاكواد بمجرد التعامل مع الازرار والقوائم تضاف الاكواد تلقائيا فما الفائدة منها الان؟؟

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

ودا رأيي واكيد لكل واحد مننا رأيه

اقتباس:

المشاركة الأصلية كتبت بواسطة flower25

فين الدرس الثانى انا من يوم الاربعاء وانا متظرة الدرس ولم يتم اضافته مش مفروض ان فى درس يومين فى الاسبوع لعل المانع خير ان شاء الله

اسف جدا والله فيه اسباب اضطرتني ااجل معاد الدرس ..
ان شاء الله مش هتتكرر .. والدرس التاني موجود دلوقتي الحمد لله ..

ربنا يكرمك .. وان شاء الله يكون مفيد ووافي ..

flower25 · #10 18-08-2010, 08:38 PM

شكرا لك على هذا الدرس
ولكن عندى استفسار لماذا لغة html ففى البرامج الحديثة لسنا فى حاجة الى معرفة اللغة وكتابة الاكواد بمجرد التعامل مع الازرار والقوائم تضاف الاكواد تلقائيا فما الفائدة منها الان؟؟

flower25 · #11 19-08-2010, 11:04 PM

فين الدرس الثانى انا من يوم الاربعاء وانا متظرة الدرس ولم يتم اضافته مش مفروض ان فى درس يومين فى الاسبوع لعل المانع خير ان شاء الله