للمبتدئات .... تصميم صفحه على الانترنت ...مع هدهد

  • بادئ الموضوع بادئ الموضوع هدهد
  • تاريخ البدء تاريخ البدء
هدهد

هدهد

New member
إنضم
2007/02/04
المشاركات
1,478





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

سوف ابدأ باذن الله تعالى في شرح طريقه تصميم صفحه على النت..خطوه بخطوه ....سوف تكتبن صفحتك بنفسك...
هذه الدروس للمبتدئات ...
سوف تتسع هذه الدروس لعشره مشتركات فقط .....حفاظا على الوقت والجهد ...
اريد من كل عضوه ترغب في الاشتراك ان تدخل وتسجل ...
ثم تعطيني فكره عن خلفيتها عن الموضوع ... ماذا تعرف عن هذا الموضوع ... وان كنتي لا تعرفين شيئا فلا يهم ....انتي هنا لكي تعرفي!!​

وقبل ان ابداء الدروس...سوف اكتب نبذه بسيطه مبسطه جدا عن لغه كتابه صفحات النت..... تابعوني .​
 
التعديل الأخير بواسطة المشرف:
HTML
Hypertext Markup >
****************
<
هي اللغه التي تستخدم في كتابه صفحات النت ...فهي المسؤله عن عرض النص ومعالجه خصائصه من حيث اللون ...الحجم ...الشكل ... بالاضافه الى عرض الجداول ...القوائم ...الصور ...ملفات الصوت ...وكل ما يمكن عرضه على صفحات النت ...​

تكتب هذه اللغه​


على شكل ملصقات ​

Tags​


محاطه باقواس زاويه​


<tag>​


قد يحتوي ملف الHTML​


على بعض احد الاكواد​

Scripts​


والتي تؤثر على سلوك المتصفح>> ​

نحن هنا بصدد تعلم لغه الhtml​
 
اتمنى من الاخوات المشرفات نقل موضوعي الى قسم التصاميم
وشكرا​
 
هــاجر قال:
وأنا أيضا بكون معكم
أنقر للتوسيع...
هــاجر قال:

عندي خلفية بسيطة عن برنامج فرونت بيج

تسلمي أختي الهدهد
أنقر للتوسيع...

اختي هاجر ....سوف نقوم في هذه الدوره بتصميم صفحه النت بانفسنا دون الحاجه الى برنامج الفرونت بيج ...
الفرق انه في برنامج الفرونت بيج تعطيه الاوامر ويقوم تلقائيا بكتابه السورسsource
اما في دورتنا فسوف اكون معكن في تصميم كل جزء من الصفحه بايديكن ...​
 
مرحبا بكل المشتركات ...واحب ان انبه كل مشتركه انها لن تكون بحاجه الى اي خلفيه عن تصميم الصفحات ..سوف ابداء معكن من الصفر ...
​
 
في البدايه احب ان اوضح انواع صفحات الويب ...
هناك نوعين من صفحات الويب ...
الاول static اي صفحه ثابته لا تتلقى اي اوامر .. تقومي بتصفحها فقط ..وقد تحتوي على روابط لصور او مواقع اخرى ...
النوع الثاني : Dynamic اي موقع متحرك او نشط وهو الموقع الذي تستطيعي ان تعطيه اوامر وبالتالي تتلقي منه نتائج لاوامرك ...وتستطيعي ان تضيفي وتستخرجي منه معلومات data ..وتسمى هذه المواقع web based information system او صفحات نظم معلومات ...
مثال على صفحات الويب النشطه الدايناميك : صفحات الشراء اون لاين ...فانتي باستطاعتك ان تقومي بعمليه الشراء اون لاين بادخال معلومات الى الموقع ...
مثال اخر التسجيل في الجامعه او الحصول على النتائج اون لاين ...
مثال اخر المنتديات ...فابمكانك ان تضيفي معلومه او مشاركه الى المنتدى ...
هذه المواقع المتحركه ..بامكانك التفاعل معها وهي عاده تستخدم لغه الSQL كوسيط بين اوامرك وبين ردود السيرفر ...
هذه المواقع معقده وتحتاج الى دراسات متخصصه والكثير من الوقت ...​

في هذه الدوره سوف نقوم بتصميم صفحه ثابته static تصمميها بالطريقه التي تريدين ...فقد ترغبي بتصميم صفحه للطبخ... او لاطفالك وضعي بها صور لاطفالك ...او لمدينتك ...او اي نشاط اة هوايه تحبيها ...​
 
التعديل الأخير:
المحرر الذي سوف نستخدمه هو ال Notepad
كيف اصل الى النوت باد؟
start> program>accessories >Notepad​



وسوف تظهر لك النوت باد ​


66.jpg​
 
سوف نقوم بكتابه السورس ..
ما هو السورس Source؟
السورس هو مجموعه من الرموز المكتوبه بلغه ال HTML والمسؤوله عن الطريقه التي تعرض بها الصفحه ... فالسورس يحدد ترتيب الصفحه ...نوع ولون وحجم الخط ...
ترتيب الصور والجداول ...ترتيب العناوين الاساسيه والجانبيه ...
فقد يكون لديك موضوع واحد ...لكن بامكانك اخراجه باكثر من طريقه حسب الطريقه التي ترغبي بها...وذلك باستخدام لغه ال Html
انظرو الى هذه الصفحه كمثال ..
http://www.msu.edu/user/algarnim/makkah.htm​

اذهبي الى كلمهview ثم اختاري منها كلمه source ​

777.jpg
سوف تظهر لك نافذه ...
ما هذه النافذه ؟
انها سورس الصفحه ... السورس الذي تم كتابته لتخرج الصفحه بذلك الشكل ...
88888.jpg

هذا هو السورس الذي سوف نقوم بكتابته من اجل تصميم الصفحه ...
تابعوني ...​
 
تستخدم لغه ال html مجموعه من الاشارات تسمى tags
لكل منها وظيفه معينه تعالج بها الطريقه التي يصنف ويعرض بها النص
تحاط هذه الاشرات باقواس من نوع <> ...
كل ملف html يبداء باشاره : <html>...
وينتهي باشاره <html/>
<html> : تعني بدايه ملف الhtml...
<html/> : تعني نهايه الملف ...
لابد لكل ملف ان يبدأ وينتهي بهاتين الاشارتين ...
اي ان ما بين تلك الاشارتين سوف يظهر على الصفحه ...
وما هو خارج عنهما لن يظهر ...
العلامه / تستخدم للدلاله على نهايه عمل اي اشاره ...
الاشاره الثانيه هي :
<title> ...وهي تشير الى النص الذي سوف يظهر في الشريط العلوي من الصفحه ..​

تمرين :​

اكتبي في النوت باد التالي :​

999.jpg

ثم قومي بحفظ الملف بامتداد htm
111.jpg

قومي باغلاق النوت باد ...​

ثم اذهبي للملف الذي حفظتيه وافتحيه ...

هذه هي النتيجه ...​

2222.jpg​

اذا وظيفه الاشاره <title> هي وضع اي نص يقع بينهما في الشريط العلوي للصفحه ...​

تابعوني ..​
 
التعديل الأخير:
الدرس الثاني
b.gif

كتابه العناوين
b.gif

تستخدم الاشاره <h> من اجل كتابه العنوان ....
وتتدرج هذه الاشاره من <h1> الى <h6> تنازليا من حيث حجم الخط ...
وتستخدم هذه الخاصيه من اجل تنسيق العناوين في الصفحه حسب اهميتها ...​

33016272.png




v56.gif

التمرين :
تطبيق الدرس السابق ..
بانتظار تطبيقاتكن..​

v56.gif
 
التعديل الأخير:
تمرين :​

قومي بكتابه الكود التالي ..​

40988765.png
​

القي نظره على النتيجه التي سوف تحصلين عليها ...ماذا لاحظتي ؟؟؟....ماذا استنتجتي؟؟​
 
انا طبقت التدريب ولاحظت انه نفس نتيجه الدرس الثاني ..​


واستنتجت انه ..html , والعنوان الفرعي لا تحتاج الى /​

لكن title ضروري انا نحدد نهايتها بــ /​

هذا استنتاجي ..​
أنقر للتوسيع...


مثل ما قالت أم أبرار​


نفس التطبيق السابق طلع,, واللي استنتجته
إنه بعض الأكواد مو ضروري أقفلها حتى أحصل على نتيجة
يكفي فقط كتابتها لتعطيني التأثير المطلوب وعند الرغبة في تغييره
فقط أبدأ بكتابة الكود الجديد​
أنقر للتوسيع...


تجاهل وضع نهايه"/" لبعض الاشارات لا تشكل اي مشكله في بعض محررات ملفات ال html فالمحرر يقوم اتوماتيكيا بتعويضها للمتصفح ...
لكن بعض النسخ من محررات ملفات ال html لا تتقاضى عن هذه النهايات ...
على الناحيه الاخرى فان ال Notepad غير متشدد من من ناحيه حجم الخط ... فان كتبتيه كبير او صغير فهو بالنسبه له ذات الشيء !!​
​
​
​
 
الدرس الثالث
21.gif

كتابه الفقرات
21.gif

تستخدد الاشاره <p> من اجل كتابه الفقرات ....

p=Paragraphs


68263809.png

النتيجه ​



42744950.png

نلاحظ انه رغم اننا كتبنا في المحرر الفقره على شكل اسطر متقطعه ...الا ان المتصفح لم يلتفت للطريقه التي رتبنا بها الاسطر ...وقام بعرضها بطريقه مختلفه وهي عرض الاسطر بشكل متصل ....​

1.gif

تمرين ....​

1.gif

1-قومي بتطبيق الدرس الثالث ...​

2-لماذا كانت كتابه <h1/>
الزاميه في النص السابق ؟​

...جربي ان تكتبي الكود بدون استخدام<h1/> ....​

ماذا لاحظتي ؟ ماذا استنتجتي؟​

3-ماهي اذا الوظيفه الاساسيه لل <h1/> ؟​
 
التعديل الأخير:
الدرس الرابع...
b.gif

الكتابه في وسط الصفحه​

b.gif

لاحظنا في الدروس السابقه ان المتصفح يظهر الفقرات النصيه والعناوين على جانب الصفحه ...
ماذا لو اردنا ان نجعل المتصفح يظهر العنوان في منتصف السطر ..ويظهر الفقره في منتصف الصفحه وليس على الجوانب..
بامكاننا ان نستخدم عباره "align=center" .. ونضعها بعد اشاره العنوان او الفقره مباشره قبل ان نقفل القوس ...​

align = اصطف..
center= وسط ..​


16626174.png
​


النتيجه ​


38533746.png
​




1.gif

تمرين
1.gif
​

كتابه فقرتين منفصلتين ...كل فقره لها عنوانها المستقل ...​

الفقره الاولى وعنوانها ذات عرض وسط الصفحه ...​

بينما الفقره الثانيه وعنوانها ذات عرض جانبي ...​
 
اجابه تمرين الدرس الثالث تجديه في المشاركه التاليه
 
التعديل الأخير:
هدهد قال:
1.gif

تمرين ....​

1.gif

2-لماذا كانت كتابه <h1/>
الزاميه في النص السابق ؟​

...جربي ان تكتبي الكود بدون استخدام<h1/> ....​

ماذا لاحظتي ؟ ماذا استنتجتي؟​


3-ماهي اذا الوظيفه الاساسيه لل <h1/> ؟​
أنقر للتوسيع...





تستخدم الاشاره - <h> من اجل كتابه العنوان كما اسلفنا ...
ومن الطبيعي ان يكون العنوان اكبر واغمق من بقيه النص ...
من الاخطاء الشائعه ان يتم استخدام الاشاره <h> من اجل تغميق خط النص ...هذه الاشاره مخصصه للعنوان فقط!
عندما قمنا باقفال <h> ...فاننا قد وضعنا حدا لتأثيره على غمق اللون وحدننا الجمله- العنوان- التي نريد <h> ان يؤثر عليها بحيث تعطي نصا غامقا ...
اما بالنسبه للفقره التي تلت <h/> فانها كانت خارج حدود المنطقه المتأثره ب<h> ....فكان حجم خطها عاديا ...
هناك اشارات متخصصه من اجل تغميق الخط سوف اشير اليها في دروس لاحقه ...​


اذا.. عند كتابه عنوان يليه نص ...فمن الخطاء التقاضي عن استخدام <h/> لان هذا سوف يلغي التمييز بين النص وعنوانه ...ويصبح العنوان والنص شيئا واحدا من الصعب التمييز بينهما ......​
 
اهلين هدهد

الله يجزاك الخير بالدنيا ووالجنة بالاخرة

اذا تعلمت على يديك

انا عندي عربي ما ادري انتي تقصدي المفكرة

وللعلم انا فتحت المفكرة وبحثت عنن اللي تقولي عنه ما لقيت شي

وكتبت الكلمة بالانجليزية في البحث طلع نفس البرنامج المفكرة

ما ادري كيف
 
اعناب قال:
اهلين هدهد

الله يجزاك الخير بالدنيا ووالجنة بالاخرة

اذا تعلمت على يديك

انا عندي عربي ما ادري انتي تقصدي المفكرة

وللعلم انا فتحت المفكرة وبحثت عنن اللي تقولي عنه ما لقيت شي

وكتبت الكلمة بالانجليزية في البحث طلع نفس البرنامج المفكرة

ما ادري كيف
أنقر للتوسيع...
مرحبا اختي ...
انا لم استخدم الويندوز العربي في حياتي ...ولا اعلم ان كانت المفكره هي النوت باد ...يمكن الاخوات يفيدوك ...لكن
بامكانك استخدام الوورد ...ثم حفظ الملف بصيغه ال htm...ثم فتح الملف المحفوظ لتظهر لك الصفحه التي قمتي بتصميمها ...
ومرحبا بك
 
التعديل الأخير:
مشكوووره غلاي
هدهد00موضع رائع

ومتميز
138.gif
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى أسفل