|
||||||
| معرض الصور و التصاميم و الفنون المتنوعة ( ممنوع وضع مواد خاضعة لحقوق الملكية والنشر ) |
 |
|
|
أدوات الموضوع | انواع عرض الموضوع |
|
#1
15-08-2010, 10:30 PM
|
||||
|
||||
(الدرس الأول ) ...دورات web design التدريبية... مدخل الى لغة الـ HTML
السلام عليكم ورحمة الله بوركاته
سنبدا بإذن الله اول دروس دورات 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 تعتمد في الاساس على حفظ وفهم الاوسمة ومعرفة دور كل وسم واستخدامه في المكان المناسب للحصول على المظهر المناسب .. لنقوم اذا بالتعرف على بعض هذه الاوسمة : الوسم <br> هو وسم لا يحتاج الى وسم نهاية .. وهو يكتب للنزول سطر رأسيا ( اضافة سطر ) .. فمثلا قم بكتابة المثال السابق كالآتي : كود:
<html> <head> <title>my site</title> </head> <body> this is my <br> first site </body> </html>  ... هل حصلت على نفس النتيجة ؟؟؟ ... يمكنك فعل هذا ايضا بالوسم <p>..</p> ولكن باضافة سطر فارغ بين السطرين .. فهو في الاساس خاص لكتابة الفقرات .. ويقوم تلقائيا بوضع سطر فارغ بين كل فقرتين كود:
<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 والآن لنرى كيف يمكننا تنسيق نص ...: اذا اردنا ان نكتب كلمة الله ونطبق عليها بعض التأثيرات في اللون والحجم . كود:
<font size="3" color="red">الله </font> والخواص size ,color ويتم كتابة الخواص كما هو موضح : attribute="value" وفي الوسم <font> تأخذ الخاصية size قيم من 1 الى 7 والخاصية color تكون قيمتها اسم اللون او الكود الخاص به ويكون عبارة عن علامة # متبوعة بستة حروف او ارقام او كلاهما .. ويمكن الحصول على اكواد الالوان من هنا : http://www.computerhope.com/htmcolor.htm لتغيير شكل النص : <b>YOUR TEXT</b> للكتابة بخط سميك .. .. <i>YOUR TEXT</i> للكتابة بخط مائل .. .. <u>YOUR TEXT</u> لوضع خط تحت النص .. لتحديد موقع الفقرة : نستخدم الوسم <p> والخاصية 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 وعند الضغط عليها سينتقل الى الصفحة التي كتبنا الرابط الخاص بها ... ........ ولهذا الوسم استخدامات اخرى كثيرة سنقوم بعرضها فيما بعد .. اذا فسنكتفي بهذا القدر اليوم فالهدف من هذا الدرس هو التعريف باللغة ومعرفة اساسياتها .. وباذن الله الدرس القادم سنتقدم اكثر ونتعرف على الكثير من الاوسمة والسمات واستخداماتهما .. ملحوظة : اذا اردت الاستفادة حقا من الدروس لا تقم بالقراءة فقط بل قم بالتطبيق والتدريب كثيرا .. فهو ليس موضوع فهم فقط .. فالتعود على كتابة الاكواد سيسهل عليك الامر كثيرا ويقربك اكثر للاحتراف باذن الله ... اذا ف المطلوب منكم اليوم والى يوم الاربعاء ان شاء الله التطبيق على ما تم شرحه .. ... لم اقم في هذا الدرس بوضع الكثير من التطبيقات والنتائج لان برغم اهمية ما قمت بشرحه الا فانه سهل وبسيط جدا و سنتفق جميعا في الناتج .. ولكن اهم شيء التدريب كثيرا ....  واذا اردت الوصول لاعلى السلم فسيجب عليك بالتأكيد صعود اول درجة مهما كانت في نظرك قليلة .. اليس كذلك ؟؟ في انتظار استفساراتكم .. 
|
|
#2
16-08-2010, 12:49 AM
|
|||
|
|||
|
بداية قوية اخي العزيز واتمني المزيد بارك الله فيك واتنمي التخطي من ال html الي اللغات الاحدث مثل اكسبرشن وب او دريم ويفر واعلم جيدا ان الاساس لهم جميعا فهملغة ال html فارجو الاستفاضة في هذه اللغة
|
|
#3
16-08-2010, 01:13 AM
|
|||
|
|||
|
لماذا درس واحد في المرة ؟ اقترح علي الاقل 3 دروس
لاننا في الدورة يومين فقط فأقترح اكثر من درس وشكرا علي هذا الدرس الرائع الذي افادني جدا
|
|
#5
16-08-2010, 02:25 AM
|
||||
|
||||
|
جزاك الله خيرا ممتاز
__________________
سبحان الله وبحمده سبحان الله العظيم
اتقوا الله وصلوا من قطعكم واعفوا عن من ظلمكم واعطوا من حرمكم حتى تدخلوا جنة ربكم رب اغفرلى ولوالدين وللمؤمنين يوم يقوم الحساب 
|
|
#6
16-08-2010, 01:22 PM
|
|||
|
|||
بارك الله فيك وزادك علما إلى علمك وعلمنا الله بما ينفعنا أمين
|
|
#7
16-08-2010, 09:37 PM
|
|||||
|
|||||
|
اقتباس:
بس اهم حاجة الجميع يوصل لدرجة الاحتراف في الهتمل والسي اس اس في الاول ان شاء الله وربنا يكرمكم على المتابعة الطيبة اقتباس:
بس باذن الله بعد كده الدروس هتكون مكثفة و الشرح فيها كتير وبحييك على حماسك ربنا يزيدك من علمه وينفعك بيه وينفع الناس بيك اقتباس:
اقتباس:
وجزاك كل خير يا غالي ياريت متابعتك الجميلة معانا تدوم على طول اقتباس:
آمين يارب .. تسلم على الدعاء الجميل ربنا يكرمك يا محمد ........
|
|
#8
17-08-2010, 11:43 PM
|
|||
|
|||
|
والله درس مفبد حدا وطريقه شرح حضرتك ماشاء الله جميله ومبسطه
جعله الله فى ميزان حسناتك وان شاء الله نوصل لدرجه الاحتراف مع حضرتك
|
|
#11
21-08-2010, 08:49 AM
|
||||
|
||||
|
اقتباس:
اقتباس:
يعني لو واحد عمل موقع بالبرامج دي وحب يعدل جزء معين في الكود مش هيعرف .. لانه مضطر يستخدم اللي بيتيحه ليه البرنامج بس .. انما اللي يكون عارف الكود وفاهمه ومتمكن منه يقدر يبني موقع كامل بنفسه من غير الاستعانة ببرامج .. ساعتها ممكن يستخدم البرامج دي عشان توفر عليه الوقت والتعب .. يعني تكون كـ مساعد عليه .. مش بديل ليه .. ودا رأيي واكيد لكل واحد مننا رأيه اقتباس:
ان شاء الله مش هتتكرر .. والدرس التاني موجود دلوقتي الحمد لله .. ربنا يكرمك .. وان شاء الله يكون مفيد ووافي ..
|
|
| العلامات المرجعية |
| الكلمات الدلالية (Tags) |
| css, html, photoshop |
«
الموضوع السابق
|
الموضوع التالي
»
العرض العادي
|
|
جميع الأوقات بتوقيت GMT +2. الساعة الآن 05:55 AM.
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
