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

السلام عليكم ...

و أهلا بكم في الدرس الثاني من دورة عالم حواء لتصميم المواقع بلغة الأتش تي أم إل ..

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

* أفتحي الصفحة التي حفظتيها على هيئة صفحات الأنترنت ..

* اذهبي في متصفحك إلى view >> source

* ستظهر صفحة النوت باد التي كتبتيها و التي هي أساس الصفحة ..

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

* سنكتب الأكواد التالية :

<html dir=rtl>

<title>صفحتــــــي الشخصيـــــة الأولــــــى</title>

ما معنى هذا الذي كتبناه ؟؟

html : بما أن الصفحة مكتوبة بلغة الأتش تي أم إل , فإن أول ما نفعله أن نعرّف المتصفح بهذا الأمر ..
هذا الكود يحتاج إلى إغلاق .. و لكننا لن نغلقه إلا عندما ننتهي تماما من كتابة كل الصفحة ..

dir=rtl : اختصار للجملة الأنجليزية direction = right to left , إتجاه الصفحة من اليمين إلى اليسار و نحن نحتاج لهذا الأمر كوننا نكتب باللغة العربية ...

title : أنظري الآن إلى أعلى متصفحك هنا في المنتدى , فوق , فوق , ستجدين الجملة التالية على شريط أزرق : دورة عالم حواء لتصميم المواقع ... هذا هو الـtitle .. أي شي تكتبينه هنا سيظهر على الشريط الأزرق في أعلى المتصفح .. الأمر هذا يحتاج لإغلاق ..

س : و إذا لم أغلقه ؟؟

ج : كل ما ستكتبينه من جمل سيظهر في الشريط و لن يظهر في مكانه الصحيح في الصفحة ..

***********

بعد الأكواد السابقة سنكتب التالي :

* <head> </head>

هذا الكود لن نحتاجه حاليا , لكن من الضروري أن تتعودي على كتابته حتى لو تركتيه فارغا في الوقت الحالي . هذا الكود هو مكان الجافا سكربيت ( لو سمعت بها و هي مجموعة أوامر مفيدة جماليا و تفاعليا للصفحة ) , كما أنها مكان ملف الستايل شيت , و هي ملفات تحوي كل الأمور التنظيمية للصفحة و يستعملها المحترفون ..

***********

بعدها سنكتب الكود التالي :
* <body> </body>

بين رمزي هذا الأمر , ستأتي الصفحة التي كتبناها سابقا .. هذا الأمر يمثل جسم الصفحة , و كل ما ستكتبيه داخله من نصوص سيظهر للزائر و يمثل الصفحة نفسها .. يحتاج لإغلاق .. بعد ما نكتب كل نما نريده ..

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

* لتحديد لون خلفية الصفحة نكتب الكود كالتالي :

<body bgcolor=ffc0c0>

للحصول على أكواد الألوان هناك طريقتين :

إما من برنامج الرسم الخاص بك ... و هنا أقدم نموذج من برنامج البينت شوب برو :



أو من الجدول في هذه الصفحة :

http://www.htmlgoodies.com/tutors/colors.html

احفظيها في حال أردت استخدامها ...

* لتحديد صورة كخلفية , نكتب الكود كالتالي :

<body background=img.jpg> ( تضعي اسم الصورة )

**** ملاحظة هامة ****

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

<body background=images/img.jpg>

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

***************


س : ممكن نستعمل الكودين مع بعض , اللون و الصورة ؟؟

ج : ممكن .. لو تشوفوا موقع خلاد

http://www.khalaad.net

, فهو استعمل الكودين مع بعض .. أول يظهر لك اللون الأخضر .. و تلاقي بعدين تحولت الصفحة عند تمام تحميلها للون الأبيض .. كيف ..؟؟

هو عمل صور خلفية بلون أبيض و استعمل الأمر التالي :

<body bgcolor=60AE85 background=white.jpg>

كود الألوان و الصور معا ...



س : لماذا فعل ذلك ؟؟

ج : الأمر نفسي بحت . هو يجعلك تدخلي في جو الموقع ريثما يتم تحميل كامل صور الصفحة ..



الآن لنرى كيف سيكون شكل أكواد صفحتنا :


<html dir=rtl>
<title>صفحتــــــي الشخصيــــــة الأولــــــى</title>

<head>


</head>

<body bgcolor=ffc0c0>

<b> السلام عليكم و رحمة الله و بركاته </b>

<br>

<i>هذا هو درسنا الأول</i>

<br>

<tt>و قد تعلمنا اليوم ثلاثة أكواد لكتابة النصوص</tt>

<br>

<b><i>و أن بامكاننا إضاقة أكثر من مؤثر على الجملة الواحدة مع مراعاة الترتيب</i></b>


</body>

</html>

إذا كتبتي الأكواد بشكل صحيح فيجب أن تظهر الصفحة مثل هذه الصفحة :

http://www.estrahacards.net/test1.html

طبعا لك مطلق الحرية بالألوان المختارة ...

******************

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

موعدنا الخميس بإذن الله ..

السلام عليكم ...

و عذرا على تأخري في طرح الدرس نتيجة للخطوط السيئة أمس ..

********

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

* افتحي مستند جديد من new مقاس 300 * 300 .. ممكن يكون مستطيل .. مو ضروري مربع .. حسب التصميم اللي بخاطرك .. بس ضروري أنه يكون أكبر بنسبة 30% على الأقل من الحجم الأصلي الذي تريدينه لأننا سنقص منه لاحقا ..

* أشتغلي على الخلفية كما تحبين .. أنا هنا كتبت إسم سيرينا بالأنجليزي و ميّلته .. لكن احرصي كما قلنا على ترك مسافة لا تقل عن 50 بيكسل من جميع الأطراف .. يعني عملك يكون بالمنتصف من الخلفية و يكون صغير و ليس كبير ..





* بعد ما تنتهي من عمل الخلفية تماما .. أختاري أداة التحديد ( المستطيل ) .. و حددي بالمستطيل حول الشغل اللي عملتيه تاركة مسافة 50 بيكسل علىالأقل من كل الأطراف ..



* مع وجود التحديد أختاري من selection > convert to seamlees patterns



* ستظهر صورة جديدة ..



احفظي هذه الصورة بصيغة الـjpg لألا تقفد ألوانها .. ثم أدرجيها كخلفية لصفحتك بالكود التالي :

<body background=img.jpg> مع مراعاة وضع المسار الصحيح للصورة في حال وضعتيها في مجلد أو في مكان بعيد عن الصفحة .

س : بعد ما أشتغلت و اتعذبت .. البرنامج عطاني رسالة :
your selection is too close to the edge of the image to complete this operation . please move your selection fearther away from the image edge . ( يعني أنه لازم أترك مسافة أكثر للأطراف حتى تتم العملية .. و أنا لا أستطيع عمل ذلك و إلا تخربت الخلفية .. أيش العمل ؟؟

ج : و لا يهمك .. روحي image > add borders .. سيظهر لك مستطيل مثل الصورة ..



ضعي علامة صح أمام المربع و ضعي رقم في أول خانة فقط .. و هو سيكتب بقية الخانات بنفس الرقم .. هذه ستضيف مزيد من المساحة على عملك من دون تخريب أي شيئ . حاولي من جديد مع conver to seamless paterne .. إذا أعطاك نفس الرسالة , زيدي الحدود .. إلى أن تنجحي و يعطيك الخلفية ..

******** طبعا أتوقع بعض الأسئلة في كيفية عمل البرنامج و بعض آلياته .. لذلك أنصح بزيارة الموقع التالي : http://www.arabpsp.net و هو الموقع العربي المتكامل لشرح آلية عمل هذا البرنامج و الطرق الفنية المستخدمة فيه و طرح الكثير من أدواته و أضافاته و فلاتره ...**********


*******************

سنأخذ اليوم كود واحد فقط اللي هو كود الخطوط .. و سنلاحظ أن كود الخطوط سيشمل 3 أوامر مع بعض :

<font color=008000 size=3 face=tahoma>

font طبعا تعني خط ..
color تعني اللون
size تعني الحجم
face تعني النوع

و الكود لا يحتاج إلى إغلاق ..

س : أريد مثلا لجملة واحدة فقط أن تتميز يلونها عن باقي ألوان الصفحة .. ماذا أفعل ؟؟

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

<font color=c0000 size=2 face=tahoma>السلام عليكم و رحمة الله<font color=008000 size=2 face=tahoma>و أهلا بكم في صفحتي الشخصية

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



س : أخترت نوع الخط كوفي , لكني لا أراه من جهاز آخر .. فقط على جهازي .. ليش ؟؟

ج : لأن الخط مركب على جهازك فقط و غير موجود على الجهاز الآخر .. و هذا شيئ يجب وضعه في الحسبان .. مو كل الخطوط ستظهر على كافة أجهزة زوار صفحتك .. فقط الخطوط الموجودة على أجهزتهم ستظهر لديهم .. لذلك من الأفضل أختيار الخطوط التي تتوافر مع ويندوز و المضمون وجودها على كل الأجهزة ..مثل tahoma , arial , verdana ..



س : أنا مختارة حجم 2 للخط .. لكن على جهاز آخر شفته كبير مو مثل اللي أنا أختره .. أيش اللي صار ؟؟

ج : روحي فوق في متصفحك و اختاري fonts .



. و شوفي الحجم اللي موجود عندك .. لازم تشتغلي أثناء تصميم صفحتك على medium و تحاولي يكون الخط واضح قدر الأمكان لكل الزوار ..

الآن صفحتنا بهذا الشكل :

<html dir=rtl>
<title>صفحتــــــي الشخصيــــــة الأولــــــى</title>

<head>


</head>

<body bgcolor=ffc0c0 background=test.jpg>
<font color=ffffff size=4 face=tahoma>

<b> السلام عليكم و رحمة الله و بركاته </b>

<br>

<i>هذا هو درسنا الأول</i>

<br>

<tt>و قد تعلمنا اليوم ثلاثة أكواد لكتابة النصوص</tt>

<br>

<b><i>و أن بامكاننا إضاقة أكثر من مؤثر على الجملة الواحدة مع مراعاة الترتيب</i></b>


</body>

</html>

و هذه صفحتنا بصيغة الحفظ html :

http://www.estrahacards.net/test1.html


أنتهى درس اليوم .. و أي أسئلة أنا حاضرة ( في تصميم المواقع مو تصميم الخلفيات :) ).. حتى يوم الأحد بإذن الله .. و سيكون الدرس القادم عن وحد من أهم الأشياء في تصميم الصفحة :

الروابـــــــــــــط ..

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

تحية طيبة .. و بعد

نظرا لغياب الأخت ( سيرينا ) راح نستكمل معاكم دورة تعلم لغة صفحات الويب ( HTML )

و راح أتوقف أنا عن كتابة الدروس متى ما رجعت الأخت ( سيرينا ) بالسلامة اللي راح تواصل معاكم المشوار بإذن الله حتى تتقنون اللغة و تكونون على معرفة تامة بهذه اللغة الهامة



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

• نظرة عامة حول العناوين Heading و الفقرات و المسافات و المحاذاة و علامات الاقتباس
• القوائم بأنواعها ( Lists ) و التعاريف ( Definitions )
• الخطوط الأفقية و الأوامر المؤثرة على النصوص و التعليقات
• الروابط Link
• الصور Images
• النصوص و الألوان و الخلفيات
• الجداول Tables
• الإطارات Frames
• الملتميديا مثل إدراج مقاطع الفيديو أو المقاطع الصوتية على صفحات الويب
• الشكل Style
• النماذج Forms
• مقدمة إلى الجافا سكريبت JavaScript و DHTML
• البرمجة و استخداماتها في تصميم لغات الويب : JAVA و Active X

و أهم شئ تطبيق الدرس بعد الانتهاء منه

لأننا ما راح نتعلم هذه اللغة بالشكل الصحيح إلا بتطبيق هذه الدروس

نطبق هذه الدروس و ربما نخطئ .. نتعلم من الخطأ حتى نتقن الدرس بشكل جيد .. بعدها يمكننا الانتقال إلى الدرس التالي

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

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

و فيه نقطة ثانية حبيت أنبه لها .. و هي أنه هناك اختلاف بسيط بين Microsoft Internet Explorer و بين Netscape

كذلك .. في هناك اختلاف بين أصدارات Internet Explorer نفسها .. فالإصدارات ما قبل الإصدار 4.0 تختلف قليلا عن الاصدارات الجديدة

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

إن شاء الله نوفق في هذا المشوار ..

و لكم تحياتنا

العناوين و الفقرات و المسافات و المحاذاة و علامات الاقتباس




مثل ما تعلمنا أن هذا الكود <b> خط سميك </b> يجعل الخط عريض ( سميك )

و ما فيه أي فرق لو كتبناه كذا :

<B> خط سميك </B>
<B> خط سميك </b>
<b> خط سميك </B>

فالنتيجة واحدة .. معنى هذا الكلام أن لغة HTML ما تهتم بحالة الأحرف اللي نكتب بها الأوامر سواءً كانت كبيرة Capital أو صغيرة Small

و ممكن تجربون هذا الشئ بنفسكم علشان تتأكدوا


-------------------------------------------------------------------


أحيانا لما نكتب .. نجعل العناوين ( Heading ) بشكل كبير و بارز عن بقية النص

نفس الشئ فيه هذه اللغة .. هناك كود خاص بالعناوين و للعناوين ستة أحجام من الحجم 1 إلى الحجم 6 .. مثال على كود عنوان حجم 1 :

<h1>عنوان - الحجم 1</h1>

و كلما كبر الرقم . كلما كان العنوان أصغر حجما .. فالعنوان اللي حجمه 1 أكبر من العنوان اللي حجمه 2 و هكذا

مثال بسيط على عنوان - حجم 1:

<html>
<head>
<title>Test Page</tilte>
</head>
<body>
<h1>HEADING 1</h1>
</html>


مثال آخر على عنوان - حجم 4 :

<html>
<head>
<title>Test Page</tilte>
</head>
<body>
<h4>عنوان حجم 4</h4>
</html>


-------------------------------------------------------------------


بالنسبة للفقرة ..

كل فقرة نكتبها لازم نضعها بين هذين الكودين <p> ...... </p> و عندما نضع هذه الفقرة بين هذين الكودين .. فإننا نعطي دليلا على بداية الفقرة و نهايتها .. شوفوا المثال البسيط التالي :

<html>
<head>
<title>Test Page</tilte>
</head>
<body>
<p>منتديات</p>
<p>عالم</p>
<p>حواء</p>
</body>
</html>

فالناتج راح يكون بالضبط كاتالي :

منتديات

عالم

حواء


لكن في المثال التالي :

<html>
<head>
<title>Test Page</tilte>
</head>
<body>
<p>منتديات
عالم
حواء</p>
</body>
</html>

راح يكون الناتج مثل كذا :

منتديات عالم حواء


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


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


-------------------------------------------------------------------


بالنسبة للمسافات أو بالأصح الفواصل بين السطور نستخدم الكود <br> و لا يحتاج هذا الكود إلى الإغلاق .. و وظيفة هذا الكود أنه ينقلك إلى السطر التالي
لغة الويب هي <br>
لغة سهلة التعلم


راح يكون الناتج هكذا :

لغة الويب هي
لغة سهلة التعلم


و ذلك بسبب أن عند نهاية الكلمة ( هي ) كان هناك الكود <br> و الذي نقلنا إلى سطر جديد و بالتالي انقسمت الجملة إلى جزأين



بينما لو أزلنا هذا الكود فراح يصير الناتج هكذا :

لغة الويب هي لغة سهلة التعلم



و لو جعلنا الكود بهذا الشكل


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

لغة الويب هي <br>
لغة سهلة التعلم

راح يصير الناتج :

لغة الويب هي

لغة سهلة التعلم

لاحظوا أننا تركنا سطر فاضي و ذلك بسبب وجود كودين من نوع <br> .. فول كانت هناك ثلاثة أكواد متتالية ، كان تركنا سطرين بين الجملتين .. و لو كان أربع أكواد متتالية ، كان تركنا ثلاثة أسطر فارغة بين الجملتين و هكذا .


و ممكن نذكر بأن الفرق بين كود <p> ...... </p> و كود <br> هو أن كود <br> ينتقل مباشرة إلى السطر التالي بينما الكود <p> ...... </p> يترك فراغا ( مسافة ) بين كل فقرة و آخرى .. و للتوضيح إليكم هذا المثال :

<p> سطر 1 </p>
<p> سطر 2 </p>

الناتج .. راح يكون فراغ بين السطرين ، بينما الكود التالي :

<p> سطر 1 <br>
سطر 2

الناتج راح يكون سطرين متتاليين .. ما بينهما أي فاصل .


-------------------------------------------------------------------


محاذاة النص :

كود محاذاة النص لليسار :

<p align="left">هنا راح يكون النص لليسار</p>

و هذا كود اتجاه الكتابة من اليسار لليمين

<p dir="ltr">
من اليمين لليسار
</p>


كود توسيط النص :

<p align="center">هنا راح يكون النص في المنتصف</p>

أو يكون هكذا

<center>هنا راح يكون النص في المنتصف</center>


كود محاذاة النص لليمين :

<p align="right">هنا راح يكون النص لليمين</p>

و هذا كود اتجاه الكتابة من اليمين لليسار

<p dir="rtl">
من اليمين لليسار
</p>



كود ضبط الهامشين ( بحيث يكون النص على امتداد الصفحة ) :

<p align="justify">هنا راح يتم ضبط النص على امتداد الصفحة</p>


-------------------------------------------------------------------


علامات الإقتباس :

تستخدم علامات الإقتباس لتمييز مقولة و كلام الغير بين الكلام العادي .. و الكود الخاص بها

<q> الكلام المقتبس هنا </q>

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

ممكن هذا الكود ما يشتغل عند البعض فهو في بعض اصدارات المتصفح .. لا يعمل


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

و في هذا المثال كتبنا اقتباس عن موقع الهوتميل

<blockquote cite="http:www.hotmail.coml">
Hotmail is the largest and the best electronic mail in
the world
</blockquote>





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

أتمنى ان يكون مفيد .. و في نفس الوقت سهل الفهم و التطبيق

مساء الخيرات..

مشكور أخوي netjaeper على هالمعلومات الحلوة..

بس التطبيق يكون صعب للشخص اللي مب عارف زين بهاللغة.. لأن هذا يحتاجله شخص يشرح لك Face-to-Face .. لكن الواحد يحااااااااااول..

ان شاء الله تضبط معاي..

:24: :24: عندي سؤال ؟؟؟؟؟؟؟:24: :24:

لو بطريقة مباشرة استخدمت Normal بدل من HTML كمبتدئة.. مب أفضل؟؟؟؟؟؟؟

تحياتي لك.. وعساك ع القوة.....

:24: :24: :24: