تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 2

ملفي الشخصي · [ **09-04-2008** ]

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

الخطوة الاولى :
الخطوة الاولى هنا اخترتها ان تكون عملية ويتبعها الشرح التعليمي ..
اذهب فورا الى start ومنه الى Programs ومنه الى Accessories واختر ال Notepad
والصورة المرفقة للتوضيح

اضغط على ال Notepad وقم بنسخ الكود التالي كما هو والصقه في المتصفح

كود HTML:

<html> <head> </head> <body> </body> </html>

الان اذهب الى علامة ال x اعلى الصفحة لاغلاقها واضغط عليها ستخرج لك ملاحظة تسألك عن حفظ هذه الصفحة كالتالي اضغط على yes

الحفظ الان يحتاج الى خطوتين

رقم واحد : حدد المسار الذي تريد ان تحفظ الفايل به
ورقم 2 file name او اسم الفايل مهم جدا جدا فهو اول خطوة صحيحة نحو الاتجاه الصحيح للعمل نلاحظ ان اسم الفايل الموجود هو *.txt طبعا هنا سنغير الاسم والامتداد لكن اذا حفظناه كما هو سنجد ان الملف حفظ txt عادي .
قم بمسح العبارة وضع اسم الفايل أي اسم او احرف تريدها مثال انا وضعت اسم الملف : yasminah.html لاحظ الدوت بعد اسم ياسمينة وقبل ال html فالمهم هو html.

اترك باقي الخيارات كما هي واضغط على save

الان توجه الى المكان الذي حفظت به الملف ستجده على الشكل التالي

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

ملفي الشخصي · [ **09-04-2008** ]

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

كود HTML:

<html> <head> </head> <body> </body> </html>

ابتدأنا كتابة المستند بكلمة html داخل قوسين زاوية < > لتصبح <html> هذا يسمى بمعرّف البداية اي اننا اخبرنا هنا متصفح الويب انه هنا يبدأ عنصر ال html .. وكنا قد انهينا المستند بنفس الكلمة ولكن زدنا قبلها داخل القوسين الشحطة المائلة / <html/> وهي علامة اقفال المعرّف وهنا نخبر متصفح الويب انه انتهى هذا العنصر بعد ان اقفلناه

ما معنى كلمة html

يتم انشاء كافة صفحات ويب باستخدام لغة النص التشعيبي (Hypertext Markup Language)
واختصارها هو html وهي تماما لاصق تلتصق فيها صفحات الويب مع بعضها البعض ..
لغة ال html تعد لغة مرتة وقوية و في نفس الوقت هي لغة سهلة الفهم وليست معقدة ولا تحتاج الى ادوات خاصة بل يكفينا كما راينا في مثالنا استخدام برنامج المفكرة Notepad الذي يخص نظام الويندوز .
ولغة ال html تحتاج في داخلها الى مجموعة من المعرفات تصف كيفية تنظيم العناصر على الصفحة مثلا تنظيم النص الصور الخ .. والتي سنأتي علي اهمها بالتفصيل لاحقا ان شاء الله..

في داخل العنصر html وضعنا معرّفين اساسيين وهما head و body هما الرأس والجسد لصفحة الويب
فالمعرف head يتضمن معلومات العنوان الذي يصف المستند ويصف بالتالي محتويات صفحة الويب هذه التي اقوم بانشائها "سنأتي على شرحها بالتفصيل .. فأنا مثلا عندما اقوم بتصميم صفحة اقوم بتصنيفها انها موقع شخصي فيه شعر وموسيقى وتصميم الخ واسم الصفحة وهذه لا تظهر للعيان وانما احتاجها للارتباط على مواقع البحث
وعنصر ال body وفيه تكون كافة محتويات صفحة الويب التي تظهر للعيان كالخطوط والصور وتنظيم الصفحة والجداول الخ .. ايضا سناتي على شرحها بالتفصيل .
ولا حظ ايضا اننا كتبنا المعرفين داخل اقواس زاوية .. ووضعنا لهما معرّف البداية <head> ومعرف النهاية
</head> وكذلك الامر ينطبق على المعرف head
نستنج مما سبق ان
-المعرف html هو الذي يحيط بكامل المستند
-المعرف head هو الذي يتضمن معلومات عنوان المستند
-المعرف body هو الذي يحيط بمكونات صفحة ويب .
لنعد الان الى الصفحة البيضاء الخالية التي قمنا بتأسيسها لا يحزنك انها فارغة فقريبا ستمتلىء وتصبح صفحة البداية لموقعك القادم ان شاء الله ..
غدأ ان شاء الله نكمل مع تطبيق جديد .
تحياتي

ملفي الشخصي · [ **09-04-2008** ]

اشكرك بداية موفقة وسلسة ,,

ونحن بانتظار المزيد..

ملفي الشخصي · [ **09-04-2008** ]

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

ملفي الشخصي · [ **09-04-2008** ]

الاخ MotasemCom اشكر متابعتك ..
الاخ موسى لم افهم تماما كلمة " عندي نماذج" هل تقصد انها صفحات من تصميمك انت ؟ ان كانت كذلك نعم نحب ان نطلع على بعض منها بالنسبة للجافا سكريبت هي من ضمن اللغات التي سأعرج عليها من ضمن هذا الموضوع مع بعض الشروحات لها ومازال الوقت مبكرا عليها .. بالنسبة لموضوع الجداول لا اعلم اين الصعوبة التي تجدها فيها ولكن للجداول اسرار ان عرفتها واتقنتها طوعتها لك وبالتاكيد ان اي تصميم لا يخلو ابدا من الجداول ولنا وقفة مطولة معها ان شاء الله بالنسبة لملف التصميم الخاص بك عليك ان ترفعه على اي موقع مجاني خاص للتصميم وهنا سازودك بلينك لموقع مجاني وهو اكثر من رائع بامكانك ان تقيم عليه موقع خاص بك وكنت ساطرحه ايضا في فقرات اخرى واشرح طريقة التسجيل به وكيفية رفع الملفات اليه ولكن بامكانك الان استخدامه
http://www.freewebtown.com

ملفي الشخصي · [ **09-04-2008** ]

الخطوة الثانية
توجه الى المكان الذي قمت بحفظ الصفحة السابقة فيه "اي الصفحة التي أنشاتها في التمرين السابق " والتي اسميتها انا على سبيل المثال yasminah افتح الصفحة توجه الى view في اعلى الصفحة ومنه الى source اضغط سيفتح لك المستند النصي الخاص بهذه الصفحة والذي قمت بإنشائه في التمرين السابق

الان قم بتظليل المحتويات الموجودة بالمستند ومن ثم ديليت وانسخ الكود التالي والصقه مكانه

كود HTML:

<html> <head> <title>my web</title> </head> <body bgcolor=blue> </body> </html>

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

http://www.freewebtown.com/jordan_am/yasminah.html

ملفي الشخصي · [ **09-04-2008** ]

شكرا لكي
هدا النموذج العندي لعبة صغيرة او مجرد تسلية ...
عليك ادخال الاسم بحروف صغيرة وتضغط ارسال سوف يظهر مربع انه اسم جيد واذا ادخلت اسم بحروف كبيرة يظهر لك انه غير فعال ... للمبتدئين فقط
http://www.freewebtown.com/mousa909/name.html

والكود في المرفقات
تصميم موسى

ملفي الشخصي · [ **09-04-2008** ]

بداية موفقة اختي ياسمينة ..... وفي إنتظار التالي
مع التحية

ملفي الشخصي · [ **09-04-2008** ]

بسم الله الرحمن الرحيم

موضوع رائع اخت ياسمينة

ملفي الشخصي · [ **09-04-2008** ]

اهلا بكم جميعا مرة اخرى
شرح الخطوة الثانية

لنلقي نظرة مرة اخرى على الكود :

كود HTML:

<html> <head> <title>my web</title> </head> <body bgcolor="blue"> </font> </body> </html>

اضفنا للمعرف head احد عناصره الاساسية وهو title ولشرحه بطريقة بطريقة مبسطة هو معرف عنوان الصفحة ف head لابد ان يتضمن هذا المعرف ولاحظ ايضا اننا ابتدئنا العنصر title بمعرف بداية ونهاية <> </>

اضفنا في داخل معرف title عنوان الصفحة على سبيل المثال كتبت عنوان لهذه الصفحة my web انظر الى الشريط العلوي للمتصفح حتى ان اسم الصفحة قد ظهر لك كذلك في الشريط السفلي فهذا عمل title

من ثم لاحظ اننا اضفنا ضمن العنصر body عنصر وجعلناه في داخله وهو عنصر bgcolor وهي اختصار ل background color اي الخلفية الملونة هنا اعطينا امر ل body ان يلون خلفية الصفحة واسمينا اللون باسمه وهو الازرق blue ولا حظ اننا وضعنا اشارة = ( bgcolor= blue)..
بالنسبة لقيم الوان سواء في الخلفية او في النصوص او في اي مكان في الصفحة تستطيع ان تسمي اللون بعينه كما فعلنا الان مع اللون الازرق او ان تعطي قيمة رقمية بدلا عنه والقيم الرقمية للالوان تعطيكي مساحة اوسع من ناحية مشتقات الالوان فمثلا الازرق القيمة الرقمية له 3333FF ويجب ان نسبق القيمة الرقمية بإشارة #

كود HTML:

<html> <head> <title>my web</title> </head> <body bgcolor=#3333FF> </body> </html>

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

http://www.freewebtown.com/jordan_am/color.htm

لكن ماذا لو اردت ان تكون خلفية الصفحة صورة وليس لونا .. انظر الى الصفحة :

http://www.freewebtown.com/jordan_am/yasminah.html

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

كود HTML:

<html> <head> <title>my web</title> </head> <body background="b5.jpg"> </font> </body> </html>

هنا اعطيت ال body امرا بأني اريد ال background صورة ولاحظ ايضا اني استبدلت كلمة bgcolor ب كلمة background فالاولى خاصة بالالوان والثانية خاصة بالصورة ولاحظ ايضا ان وضعت قوسين وفتحت علامة اقتباس وضعت في داخلها اسم الصورة + الامتداد ثم اغلقت قوسين الاقتباس ولمعرفة امتداد الصورة اضغط كليك يمين على الصورة ثم الخصائص properties فيظهر لك اسم الصورة وامتدادها مثلا b5.jpg والافضل دائما استعمال الصور ذات الامتداد اما jpg او gif ولكل منهما اختصاص سناتي على ذكره لاحقا ان شاء الله .
للحصول على الخلفيات ال background تجدها في كثير من المواقع فقط اعمل عملية بحث في جوجل او غيره ليخر ج لك الكثير من المواقع التي تقدم ال background

يوجد على كل لينك background قم بتحميلهما على جهازك واجري فيهما تمرينا في متصفحك ..
http://fwt.txdnl.com/4-10/j/o/jordan_am/background2.jpg

http://fwt.txdnl.com/4-10/j/o/jordan_am/yellowback.gif

في الفقرة التالية ان شاء الله ننتقل الى الخظة الثالثة .
تحياتي

الاخبــــار
إضافة خبر