shadow
Newbie
تاريخ التسجيل: 29/مايو/2006
البلد: Yemen
المشاركات: 28
|
| أضيفت : 29/مايو/2006 في 4:50مساء | IP Logged
|
|
|
كيف تعمل صفحات الويب
صفحة الويب ( Web Page ) :
صفحة الويب هي ملف نص بسيط يتضمن نصاً بالإضافة لمجموعة مؤثرات HTML تصف كيفية تنسيق النص عندما يعرضه المتصفح على الشاشة . هذه المؤثرات عبارة عن تعليمات بسيطة توجه المتصفح إلى الكيفية التي يجب أن تبدو عليها الصفحة عند عرضها . توجه المؤثرات المتصفح للقيام بأعمال مختلفة مثل تغيير حجم الخط وألوانه , أو ترتيب الأشياء ضمن أعمدة , يقاطع المتصفح هذه المؤثرات ليقرر كيفية تنسيق النص على الشاشة .
www.tartoos.com
HTML :
اختصار لعبارة Hyper text Markup Language لغة تأشير النص المفعل .
" Markup Language " لغة الحاسب التي تصف كيف يجب تنسيق الصفحة . إن كنت تريد عرض نص طويل اسود وأبيض وبدون أي تنسيق فست بحاجة إلى لغة الـ HTML . لكن إذا كنت تريد تغيير الخط إضافة ألوان , خلق عناوين , تضمين رسوم وصور في صفحتك ’ فلغة الـ HTML هي اللغة التي تساعد على القيام بذلك .
متصفح الويب ( Web Browser ) :
متصفح الويب مثل Netscape Navigator أو Microsoft Internet Explorer , هو برنامج أو تطبيق حاسوبي يقوم بما يلي :
- متصفح الويب يعرف كيف يتوجه لمخدم الويب ( Web Server ) على شبكة الانترنت ويطلب الصفحة , عندما يقوم بهذا فإن المتصفح يستطيع سحب الصفحة عبر الشبكة إلى جهازك .
- متصفح الويب يعرف كيف يقاطع مؤثرات الـ HTML ضمن الصفحة بغية عرض الصفحة على شاشتك كما يريد مصممها أن تعرض .
مخدم الويب ( Web Server ) :
www.tartoos.com
مخدم الويب هو قطعة من البرمجيات الحاسوبية تستطيع الإجابة على طلب المتصفح للصفحة , وإيصال الصفحة لمتصفح الويب عبر الانترنت . يمكنك أن تتخيل مخدم الويب وكأنه عدة غرف , وكل غرفة تستقبل صفحة ويب خاصة بأحد الأشخاص . لحفظ صفحتك ضمن هذه العقدة , يجب أن تدفع أجرة المكان , الصفحات التي تبقى في هذه العقدة يمكن أن يتم عرضها وتصفحها من قبل أي شخص في كل أنحاء العالم . يدعى مالك هذه العقدة بالمضيف ( Host ) , والأجرة التي تدفعها تدعى تكاليف الضيافة ( Host Change ) . هناك كل يوم ملايين من مخدمات الويب تنقل الصفحة لمتصفحات عشرات الملايين من الأشخاص عبر شبكة ندعوها الانترنت . إنه من السهل جداً التدرب على تصميم صفحات الويب دون استخدام المخدم , المتصفح لديك يمكنه عرض صفحات الويب التي تصممها من خلال حاسبك الشخصي , حالما تفهم كيف تصمم صفحتك الخاصة , من المحتمل أن تفكر بوضعها على المخدم وبالتالي يتمكن جميع الناس حول العالم من تحميلها على حواسبهم وقراءتها .
الآن لنتعلم ماذا تعني مؤثرات الـ HTML ولنبدأ بتصميم صفحة بسيطة .
مؤثرات ال HTML : L1
مؤثر الـ HTML هو رمز عنصر يخبر متصفح الويب ماذا يفعل بالنص , كل مؤثر سيظهر كأحرف أو كلمات بين إشارتي أصغر > وأكبر < .
مثال : <center> , <body>
لإخبار المتصفح أنه ينهي العمل الذي طلبته منه , يتم استعمال إشارة / داخل المؤثر المغلق .
مثال : </center> , </body>
معظم المؤثرات تأتي زوجاً متوافق كبداية ونهاية , ولكن هذا ليس قاعدة عامة .
أي صفحة ويب تصممها ستضم المؤثرات التالية في بداية الصفحة :
-<HTML> : يخبر متصفح الويب إنها بداية مستند HTML .
- < HEAD> : يخبر ذلك المتصفح أن هذا هو رأس الصفحة .
- <TITLE> : يخبر متصفح الويب أن هذا هو عنوان الصفحة .
< BODY> : يخبر متصفح الويب أن هذا هو بداية محتويات صفحة الويب – أي شيء تريد أن تراه وتقوله في صفحتك سيتبع هذا المؤثر .
المؤثرات المطلوبة لنهاية أي صفحة ويب هي :
</BODY> .
</HTML> .
تصميم صفحة بسيطة
www.tartoos.com
هنالك العديد من الطرق لتصميم صفحات الويب , المئات من الشركات طورت أدوات تساعد في القيام بهذا العمل بشكل أو بآخر , مع ذلك فإن هدفنا هنا هو الفهم الحقيقي لكيفية عمل صفحات الويب أكثر من امتلاك أداة تخفي عنا هذا العمل , لذا سنستعمل هنا أبسط الأدوات الممكنة – تلك الموجودة سلفاً في حاسبك .
أنت بالتأكيد تملك أحد البرامج أو التطبيقات التي يمكنها صنع ملفات نصوص في الحواسب التي تعمل بنظام Windows , لديك التطبيق الدفتر ( Notepad ) . وضمن نظام Macintosh لديك التطبيق Simple Text . إن لم تستطع إيجاد هذه لتطبيقات من الممكن أيضاً استخدام أحد برامج معالجة النصوص مثل Word Perfect أو Microsoft Word .
ملاحظــة :
ضمن نظام Windows 95/98 , انقر زر ابدأ , انقر برامج , انقر ملحقات وانقر الدفتر .
ضمن نظام Windows 3.1 انقر ملحقات وانقر الدفتر .
ضمن نظام Macintosh , انقر HD Macintosh , انقر Application وانقر Text Simple .
حالما يتم فتح البرنامج المطلوب على شاشتك اكتب ( أو قص والصق ) نص الـ HTML التالي في النافذة :
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello There . This is my first page !
</body>
</html>
سواء وضعت المؤثرات في النص جنباً إلى جنب , أو وضعتها مبعثرة فهذا لن يؤثر أبداً في كيفية عرض النص في نافذة المتصفح , وسواء استخدمت الأحرف الكبيرة أو الصغيرة ضمن المؤثرات فهذا أيضاً لن يؤدي إلى أية فوارق .
الآن أنت بحاجة لحفظ هذا الملف بمكان ما حيث يمكن إيجاده في أي لحظة , احفظه على سطح المكتب , أو في أي مجلد تخصصه لحفظ جميع الصفحات التي ستقوم بتصميمها .www.tartoos.com
احفظه باسم first.html .
بعدها افتح الصفحة باستخدام متصفح الويب لديك ( Microsoft Internet Explorer أو Netscape Navigator ) . كل المتصفحات لها إمكانية فتح الملفات المحفوظة على نفس الحاسب . في برامج Netscape و Internet Explorer , اختر الأمر Open File من القائمة File . افتح الملف
first.html . عندما تفتحه بواسطة المتصفح لديك , فإنه سيبدو شيئاً يشبه التالي :
بالنظر لهذا الشكل نجد ثلاثة عناصر واضحة وجلية هي :
- يمكنك أن ترى أن الصفحة تحمل العنوان " My First Page " .
- يمكنك أن ترى أن جسم الصفحة يضم الكلمات " Hello there . This is my first page "
- يمكنك أن ترى أن الـ URL المعروض في نافذة العنوان هو : C:\WINDOWS\DESKTOP\first.html من القرص الصلب المحلي بدلاً من الـ http://... الاعتيادي الذي كان سيتضمنه الـ URL فيما لو استقبلنا الصفحة من مخدم الانترنت .
بالنظر إلى نص الـ HTML الذي أنتج صفحتك الأولى , تستطيع أن ترى تماماً كيف حصلت الصفحة على عنوانها وجسمها .
الآن وبعد أن صممت وشاهدت صفحتك الويب الأولى , أنت على الطريق لتصبح محترف ويب , المفتاح لتعرف كل شيء عن كيفية عمل صفحة الويب هو التعلم أكثر فأكثر عن مؤثرات الـ HTML التي تجعلك تقولب وتهذب صفحاتك . ينبغي لك أن تتعلم عن الأدوات التي تساعدك في تصميم جداول , أطر ورسومات لصفحاتك . وهذا ما سنشرحه في عدد قادم .
الفواصل والفقرات :
بالرغم من أن النص يحوي علامات نهاية السطر , علامات الجدولة وفواصل إضافية , إلا أن المتصفح لا يراه , أنت مضطر لاستخدام المؤثرات بغية خلق الفواصل البيضاء في مستند HTML .
<br> يخلق فاصلاً بين سطر وآخر . يمكن ان ترى العديد من هذه المؤثرات مجتمعة لخلق فراغ أبيض .
مثال :
This line is broken .
This line is <br>broken .
<p> يخلق فراغاً إضافياً بين سطرين من النص . إن وضعت <br> في سطر من النص , فإنه سوف يفصل السطر فقط , إن استخدمت <p> فإنه سيفصل السطر وسيخلق فراغاً إضافياً .
مثال :
This line is spaced .
This line is <p> spaced .
<hr> موجه أفقي , أو سطر أفقي .
مثال :
This is a horizontal rule:
This is a horizontal rule:<hr>
علامات الجدولة Tabs
ليس هناك مؤثر في لغة HTML لخلق علامات الجدولة Tab ضمن المستند . العديد من مصممي صفحات ويب يخلقون جداول أو يستخدمون صوراً بيضاء لخلق فراغ . طريقة واحدة لفصل النص هي استخدام مؤثر <ul> لجعل المتصفح يعتقد أنك على وشك خلق سرد " List " , السرد يفصل النص آلياً , أنه باستخدام </ul> . المؤثرblodkquote>/ <blodkquote>….<سيفصل النص أيضاً .
خيار آخر هو مؤثر <pre> . يستخدم هذا المؤثر لعرض النص المسبق بالتنسيق , أي فراغ تم خلقه بواسطة المؤثرات <pre> و </pre> ستظهر بالمتصفح كما تظهر في النص المصدر .
www.tartoos.com
تغيير لون , نمط وحجم الخط :
يتم تغيير لون أي نص باستخدام المؤثر :
<font color="color">…</font>
مثال :
This is red .
This is green .
This is <font color="red">red</font>.
This is <font color="green">green</font>.
معظم الألوان القياسية ستستجيب لهذا المؤثر , جرب أيضاً الألوان الفاتحة والغامقة مثل الأزرق الفاتح " Lightblue" والأخضر الغامق " darkgreen " . يمكنك أيضاً تغيير لون محدد باستخدام رقم سداسي عشر دال على اللون , مثل : <font color="#864086"> .
إن كنت ترغب بإسناد لوناً معيناً لكامل النص , مازلت تستطيع تغيير لون أي مقطع من النص باستخدام المؤثرات التي تعلمتها سابقاً .
- يتم تغيير نمط الخط لأي نص باستخدام المؤثرات :
<font face="font type">...</font>
مثال :
This is Arial .
This is Geneva .
This is <font face = "arial">arial</font> .
This is <font face = "geneva"> geneva </font> .
ملاحظــة : إذا لم يتوفر لديك نمط الخط الذي حددته , سيتم اختيار النمط المستخدم من قبل المتصفح , يكون عادة Courier أو Times new Roman . لذلك من الأفضل دوماً العودة للأنماط القياسية إن كنت تريد أن تكون قادراً على التحكم بما سيظهر على متصفح المستخدم .
- يتم تغيير حجم أي نص باستخدام المؤثرات :
<font size=value>…</font>
مثال :
<font size=4>
حجم الخط المعطى لأغلب المتصفحات هو "3" , لذل فإن أي قيمة أكبر من 3 ستجعل الخط أكبر , وأي قيمة اصغر من 3 ستجعل الخط أصغر .
يمكنك أيضاً تغيير حجم الخط بجمع أو طرح قيمة ما من القيمة الأولية المعطاة للحجم .
<font size=+4>,or<font size=-2>
مثال :
This font is increased by 2.
This font is increased by 1.
This font is increased by 2.
This font is increased by 1.
This font is <font size=+2> increased by 2 </font>
This font is <font size=+1> increased by 1 </font>
This font is <font size=-2> increased by 2 </font>
This font is <font size=-1> increased by 1 </font>
تستطيع أيضاً تغيير حجم الخط باستخدام المؤثرات <small> أو <big> :
مثال :
This is a small text.
This is a big text.
This is a <small>small</small>text.
This is a <big>big</ big >text.
أيضاً المؤثر Heading يغير حجم الخط , يولد ترويسة للفقرة أو للقصة بخط عريض .
مثال :
This is an H1 heading.
This is an H2 heading.
This is an H3 heading.
<h1> This an H1 heading.</h1>
<h2> This an H2 heading.</h2>
<h3> This an H3 heading.</h3>
يتم إنهاء أي عملية تغيير على الخط باستخدام المؤثر : </font> , أو باستخدام مؤثر الإنهاء النظير للمؤثر الذي استخدمته :
مثال : </small>,</big>,</H2>
لتجريب جميع المؤثرات السابقة الذكر بسرعة , استعمل صفحة Try it! . ببساطة اكتب أو قص والصق أي قطعة من شيفرة HTML ضمن النافذة وشاهد مباشرة كيف ستعمل .
سنتابع في الأعداد القادمة مناقشة بقية مؤثرات إذا HTML مثل خلق الخلفيات , خلق اللوائح , الارتباط مع مواقع أخرى , خلق نوافذ جديدة , الارتباط من أجل استقبال بريد الكتروني , خلق وصلات ارتباط لصفحتك الخاصة , إضافة صور ورسوم , خلق جداول , خلق الصور المتحركة , وضع صفحة الويب على الشبكة ودعم موقعك بالإعلان عنه من خلال محركات البحث الشهيرة
 (((( SHADOW))))
|
mohameed alamdy
Newbie
تاريخ التسجيل: 13/أكتوبر/2009
البلد: Yemen
المشاركات: 5
|
| أضيفت : 13/أكتوبر/2009 في 9:10مساء | IP Logged
|
|
|
انا محمد عبدالوهاب العمدي
اولا اشكركم على الموقع الرائع الذي من خلاله استطيع اضافه ومشاركه وطرح المواضيع والتواصل مع مدرسينا و اصدقائنا في الكليه واشكر عماده الكليه وكل العاملين عليها .
 بصراحه ليس لدي ما اقوله الا اني سعيد جدا لاول مشاركه لي في موقع الكليه .
وانشاء الله اني استطيع الاستفاده والمشاركه وايضا طرح مواضيع قد يستفيد منها زملائي الطلاب .. واتمنى لكل من يدرس في هذه الكليه المزيد من التطور و الى الامام وجزى الله المدرسين خيرا مما بذلوه في توصيل العلم لنا.
وانا شخصيا اشكر بالاحر الاساتذه والدكاتره. وبالاخص الاستاذ ابراهيم سلام. والاستاذه انعام. والاستاذ جميل الصلوي. والاستاذ وجدي والذي من خلالهم تنمو ثمره المعرفه فهم عنوان لنا اذا تهنا وهم نور من العلم الذي يضيء طريقنا بعد الضلام وهم طريقنا الى النجاح وهم اساس العلم والمعرفه وهم قدوتنا وجزاهم الله عنا الف خير
|
mohameed alamdy
Newbie
تاريخ التسجيل: 13/أكتوبر/2009
البلد: Yemen
المشاركات: 5
|
| أضيفت : 20/أكتوبر/2009 في 3:01مساء | IP Logged
|
|
|
بسم الله الرحمن اللرحيم
انما الامم الاخلاق فان ذهبت اخلاقهم ذهبوا
بصراحه الموضوع الذي تطرق اليه الاخ شادو اعجبني لانه مفهوم ويجب على كل من يريد الاستفاده ان يقراء المواضيع بتمعن وتركيز والاهم من ذلك ان يطبق الدروس بشكل عملي لكي تتثبت المعلومه...
الاخ معتصم من اليمن حياك الله وبياك وسدد على طريق الخير خطاك:
انت تريد ان تتعلم كيف تصمم موقعك الخاص ، وذلك قد يتطلب منك بذل مجهود ووقت في البرمجه هذا اذا كنت تعرف الشيء البسيط عن البرمجه والتعرف على بعض الاوسمه والاوامر في لغه HTML التي تاتي مابين علامتين اكبر واصغر مثل <الامر يكتب هنا> ثم ننهي الوسم نفس الوسم الاول مع اضافه باك سلاش مثل <الامر يكتب هنا />...
مثال :-
هذا مثال على الخط كيف يمكن ان اكتب اسمي ويكون بالخط الفارسي وكبير الحجم ولونه احمر .
<FONT COLOR=RED SIZE=6 FACE=ANDLUSE>محمد عبدالوهاب العمدي </FONT>
يظهر بعد التنفيذ بهذا الشكل:
محمد عبدالوهاب العمدي
هذه فقط بدايه ومن اراد الشرح يقراء في الاعلى مشاركه شادو ..
ومن اراد الاستفاده اكثر هنا موقع اسمه كتب من الجوجل ويوجد به قسم الصفحات الانترنت والعديد المختلف من البرمجه والمفيد....
وانشاء الله اني ابذل ما بوسعي كي انشر اي معلومه اعرفها ، هذه هي زكات العلم ...
شكرا
اخوكم محمد عبدالوهاب العمدي
|
منتديات كلية المجتمع الأكاديمية : تصميم صفحات الويب
الموضوع: كيف تصمم صفحات الويب
مواضيع نشطة
قائمة الأعضاء
بحث
المساعدة
التسجيل
دخول
