Power Speak
08-09-2003, 08:04 PM
- سوف نتحدث اليوم في هذا الدرس عن شيئين مهمين للغايه عند الرغبة في تصميم موقع .
- فهل رأيت يوما ما اثناء تصفحك للانترنت والابحار في مواقعها موقع او صفحه لاتحتوي على صورة ...؟؟!!
وهل رأيت موقع او صفحة لا يحتوي على ارتبط تشعبي ( وصلة او لينك )؟؟؟!!
- بالطبع لا لان الصورة هي اداة مهمه جدا في الصفحة وهي قد تغني عن الف سطر
وكذلك الاوصلات .
- فتعالوا الان نرى كيف يفعلون ذلك :
العناوين HTML
تستخدم العناوين في HTML في الكثير من الأمور، أهمها الوصلات التشعيبية والصور، ويجب أن تعرف كيفية استخدام هذه العناوين جيدا.
هنالك نوعان من العناوين، نسبية ومطلقة، العناوين النسبية تكون بالنسبة للعنوان الحالي، فلو كنت مثلا في صفحة http://www.microsoft.com/ie/default.asp وقمت بعمل وصلة خاصية href لها تساوي download.html سيعرف المتصفح أن العنوان الذي يجب الذهاب إليه هو http://www.microsoft.com/ie/download.html، ولو كانت href تساوي download/english.html فسيتجه المتصفح إلى http://www.microsoft.com/ie/download/english.html، أي أن المتصفح يضيف السطر الموجود في href إلى الدليل الحالي، ويختلف الملف عن الدليل بأن الدليل يحتوي على الشرطة الخلفية ( / ) في آخره، في كل دليل يوجد دليل خاص، هذا الدليل الخاص يؤدي بك إلى الدليل الأب للدليل الحالي وهو الرمز ( .. ) وفي المثال السابق لو كانت href تحتوي على ../windwos.html فإن المتصفح سيتجه إلى العنوان http://www.microsoft.com/windwos.html أي أنه سيخرج من الدليل ie/ إلى الدليل الجذري / ، أما العناوين المطلقة فتتميز بأنها مسبوقة باسم البروتوكول ،مثلا العنوان http://www.ayna.com/ يعتبر عنوانا مطلقا، وليس له علاقة بالعنوان الحالي
===============================================
الصور او ال Images :
يمكنك في لغة HTML عرض الصور في الصفحات والتحكم في خواصها، قبل كل شيء يجب أن تكون الصورة جاهرة للنشر على الويب، فيجب أن لا تكون ذا حجم ضخم لأن ذلك سيؤدي إلى بطء شديد في التحميل، ويجب الحذر جيدا عند التعامل مع الصور، لأنها تستهلك حجما كبيرا وتسبب بطءا شديدا في تحميل الصفحات، لذلك يفضل التقليل من الصور قدر الإمكان في صفحات HTML.
إدراج الصور
يتم إدراج الصور في صفحة HTML عن طريق الوسم IMG، وهو وسم مفرد ( لا يجتاج إلى وسم إغلاق)، وهذا الوسم يحتاج إلى خاصية مهمة لكي يعمل بشكل سليم هي src والتي نضع بها عنوان الصورة المطلوبة.
<img src="/images/sample.gif">
http://www.arabsgate.com/edu-teachers/websites-building/4/1.jpg
توجد أيضا الخاصية width لتحديد عرض الصورة وheight لتحديد ارتفاعها، يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسب المطلوب، وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص، فيحجر المتصفح للصورة حجما صغيرا إلى أن يحصل عليها فيجعلها بالحجم الطبيعي، ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة تزيح النصوص قليلا والكبيرة تزيحها بمقدار أكبر، فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على الصورة وإذا لم يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط وبالتالي تصبح الصفحة مشوهة، لذلك ينصح دائما باستخدام خصائص الحجم في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي.
<img src="/images/sample.gif"
width=73 height=68><br><br>
<img src="/images/sample.gif"
width=200 height=100>
http://www.arabsgate.com/edu-teachers/websites-building/4/2.jpg
توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة بها، حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه، وترتبط به، تأخذ align العديد من القيم فيما يلي سرد لها مع الشرح والأمثلة ..
• bottom, baseline, absbottom : وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى .
<img src="/images/sample.gif" align="bottom">
http://www.arabsgate.com/edu-teachers/websites-building/4/3.jpg
• left : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر.
<img src="/images/sample.gif" align="left">
http://www.arabsgate.com/edu-teachers/websites-building/4/4.jpg
• middle, absmiddle : وهي تعرض الصورة في منتصف السطر.
<img src="/images/sample.gif" align="middle">
http://www.arabsgate.com/edu-teachers/websites-building/4/5.jpg
• right : وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة بالسطر.
<img src="/images/sample.gif" align="right">
http://www.arabsgate.com/edu-teachers/websites-building/4/6.jpg
• top, texttop : وهي تعرض أسفل السطر فيكون السطر أعلاها.
<img src="/images/sample.gif" align="right">
http://www.arabsgate.com/edu-teachers/websites-building/4/7.jpg
توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية border ونحدد بها عرض الإطار بالبكسل، والقيمة 0 تعني دون إطار، إذا لم تحدد قيمة للخاصية border في وسم الصورة، فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة، لذلك يعمد الناس إلى وضع border="0" في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة، ويجدر بالذكر أن لون الإطار في الوصلة الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة.
<a href="http://www.microsoft.com/">
<img src="/images/sample.gif"></a><br>
<a href="http://www.microsoft.com/">
<img src="/images/sample.gif" border="0"></a><br>
<img src="/images/sample.gif" border="3">
http://www.arabsgate.com/edu-teachers/websites-building/4/8.jpg
يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية hspace.
توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip عند التأشير بالفأرة على الصورة.
وبهذا نكون قد انتهينا من وسم الصورة وادراحها والتعامل معها .
===========================================
وننتقل الان للتعامل مع
الوصلات او الــLinks :
في البداية يجب ان تعرف ما هي الوصلة وما وظيفتها ؟؟
الوصلة هي عبارة عن كلمة او جملة كاملة تكون في صفحة الhtml او صفحه الانترنت بشكل عام وتكون لها خاصية معينه بحيث انها لو ضغطنا عليها تنقلنا الى صفحة اخرى او موقع اخر .( ولا اعتقد ان احدا منكم لم يقع تحت يديه ولو لمرة واحدة وصلة إلا وضغط عليها .....) .
ولوضع الوصلة نضع الوسم التالي :
<a href="http://www.arabsgate.com/edu">arabsgate-education center</a><br>
<a href="mailto:hossam_elkady@hotmail.com">contact me</a><br>
<a href="http://www.msn.com/">Microsft Network</a><br>
<a href="http://www.hotmail.com">Free E-mail</a>
وعند تنفيذها سوف يخرج لنا الشكل التالي :
arabsgate-education center (http://www.arabsgate.com/edu)
contact me (hossam_elkady@hotmail.com)
Microsft Network (http://www.msn.com)
Free E-mail (http://www.hotmail.com)
هل لاحظتم ماذا حدث ؟؟
المكتوب بعد علامة = هو العنوان الذي نريد الذهاب اليه مستخدمين القواعد والطرق التي نوهنا عنها في بداية الدرس .
وبين العلامتين >< نضع الكلمة التي نريد او الجملة التي سوف تظهر لكي يضغط عليها الزائر فتأخذه للعنوان الموضح بعد ال = .
طبعا لو اردنا وضع صورة كرابط اولينك ماذا نفعل ؟؟؟
اليكم هذا الكود
<a href="http://www.microsoft.com/"><img src="/images/sample.gif"></a>
هل لاحظتم ماذا حدث هنا لقد بدأنا نستعمل وسوم مع بعضها الببعض وهذا ما نريد ان نتعلمه من الان فصاعدا
وهو اننا اخذنا مثلا وسم للصورة وكذلك اخذنا وسم للرابط لماذا لا ندمجهم مع بعض لعمل وسم لصورة بلنك!!!
وهو ماحدث هنا باننا وضعنا مكان الكلام الذي نريده ان يظهر ليضغط عليه المستخدم وسم الصورة وبهذا اصبحت الصورة لنك .
اتمنى ان تكون الصورة وصلت اليكم الان
===========================================
احب في النهاية ان اشكر الاخ المبرمج لاني استعنت بكتاب له في هذه اللغه في كتابة هذا الدرس
وهذا لاحقاق الحق وإعطاء كل ذي حق حقه
منقول
- فهل رأيت يوما ما اثناء تصفحك للانترنت والابحار في مواقعها موقع او صفحه لاتحتوي على صورة ...؟؟!!
وهل رأيت موقع او صفحة لا يحتوي على ارتبط تشعبي ( وصلة او لينك )؟؟؟!!
- بالطبع لا لان الصورة هي اداة مهمه جدا في الصفحة وهي قد تغني عن الف سطر
وكذلك الاوصلات .
- فتعالوا الان نرى كيف يفعلون ذلك :
العناوين HTML
تستخدم العناوين في HTML في الكثير من الأمور، أهمها الوصلات التشعيبية والصور، ويجب أن تعرف كيفية استخدام هذه العناوين جيدا.
هنالك نوعان من العناوين، نسبية ومطلقة، العناوين النسبية تكون بالنسبة للعنوان الحالي، فلو كنت مثلا في صفحة http://www.microsoft.com/ie/default.asp وقمت بعمل وصلة خاصية href لها تساوي download.html سيعرف المتصفح أن العنوان الذي يجب الذهاب إليه هو http://www.microsoft.com/ie/download.html، ولو كانت href تساوي download/english.html فسيتجه المتصفح إلى http://www.microsoft.com/ie/download/english.html، أي أن المتصفح يضيف السطر الموجود في href إلى الدليل الحالي، ويختلف الملف عن الدليل بأن الدليل يحتوي على الشرطة الخلفية ( / ) في آخره، في كل دليل يوجد دليل خاص، هذا الدليل الخاص يؤدي بك إلى الدليل الأب للدليل الحالي وهو الرمز ( .. ) وفي المثال السابق لو كانت href تحتوي على ../windwos.html فإن المتصفح سيتجه إلى العنوان http://www.microsoft.com/windwos.html أي أنه سيخرج من الدليل ie/ إلى الدليل الجذري / ، أما العناوين المطلقة فتتميز بأنها مسبوقة باسم البروتوكول ،مثلا العنوان http://www.ayna.com/ يعتبر عنوانا مطلقا، وليس له علاقة بالعنوان الحالي
===============================================
الصور او ال Images :
يمكنك في لغة HTML عرض الصور في الصفحات والتحكم في خواصها، قبل كل شيء يجب أن تكون الصورة جاهرة للنشر على الويب، فيجب أن لا تكون ذا حجم ضخم لأن ذلك سيؤدي إلى بطء شديد في التحميل، ويجب الحذر جيدا عند التعامل مع الصور، لأنها تستهلك حجما كبيرا وتسبب بطءا شديدا في تحميل الصفحات، لذلك يفضل التقليل من الصور قدر الإمكان في صفحات HTML.
إدراج الصور
يتم إدراج الصور في صفحة HTML عن طريق الوسم IMG، وهو وسم مفرد ( لا يجتاج إلى وسم إغلاق)، وهذا الوسم يحتاج إلى خاصية مهمة لكي يعمل بشكل سليم هي src والتي نضع بها عنوان الصورة المطلوبة.
<img src="/images/sample.gif">
http://www.arabsgate.com/edu-teachers/websites-building/4/1.jpg
توجد أيضا الخاصية width لتحديد عرض الصورة وheight لتحديد ارتفاعها، يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسب المطلوب، وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص، فيحجر المتصفح للصورة حجما صغيرا إلى أن يحصل عليها فيجعلها بالحجم الطبيعي، ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة تزيح النصوص قليلا والكبيرة تزيحها بمقدار أكبر، فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على الصورة وإذا لم يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط وبالتالي تصبح الصفحة مشوهة، لذلك ينصح دائما باستخدام خصائص الحجم في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي.
<img src="/images/sample.gif"
width=73 height=68><br><br>
<img src="/images/sample.gif"
width=200 height=100>
http://www.arabsgate.com/edu-teachers/websites-building/4/2.jpg
توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة بها، حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه، وترتبط به، تأخذ align العديد من القيم فيما يلي سرد لها مع الشرح والأمثلة ..
• bottom, baseline, absbottom : وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى .
<img src="/images/sample.gif" align="bottom">
http://www.arabsgate.com/edu-teachers/websites-building/4/3.jpg
• left : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر.
<img src="/images/sample.gif" align="left">
http://www.arabsgate.com/edu-teachers/websites-building/4/4.jpg
• middle, absmiddle : وهي تعرض الصورة في منتصف السطر.
<img src="/images/sample.gif" align="middle">
http://www.arabsgate.com/edu-teachers/websites-building/4/5.jpg
• right : وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة بالسطر.
<img src="/images/sample.gif" align="right">
http://www.arabsgate.com/edu-teachers/websites-building/4/6.jpg
• top, texttop : وهي تعرض أسفل السطر فيكون السطر أعلاها.
<img src="/images/sample.gif" align="right">
http://www.arabsgate.com/edu-teachers/websites-building/4/7.jpg
توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية border ونحدد بها عرض الإطار بالبكسل، والقيمة 0 تعني دون إطار، إذا لم تحدد قيمة للخاصية border في وسم الصورة، فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة، لذلك يعمد الناس إلى وضع border="0" في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة، ويجدر بالذكر أن لون الإطار في الوصلة الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة.
<a href="http://www.microsoft.com/">
<img src="/images/sample.gif"></a><br>
<a href="http://www.microsoft.com/">
<img src="/images/sample.gif" border="0"></a><br>
<img src="/images/sample.gif" border="3">
http://www.arabsgate.com/edu-teachers/websites-building/4/8.jpg
يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية hspace.
توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip عند التأشير بالفأرة على الصورة.
وبهذا نكون قد انتهينا من وسم الصورة وادراحها والتعامل معها .
===========================================
وننتقل الان للتعامل مع
الوصلات او الــLinks :
في البداية يجب ان تعرف ما هي الوصلة وما وظيفتها ؟؟
الوصلة هي عبارة عن كلمة او جملة كاملة تكون في صفحة الhtml او صفحه الانترنت بشكل عام وتكون لها خاصية معينه بحيث انها لو ضغطنا عليها تنقلنا الى صفحة اخرى او موقع اخر .( ولا اعتقد ان احدا منكم لم يقع تحت يديه ولو لمرة واحدة وصلة إلا وضغط عليها .....) .
ولوضع الوصلة نضع الوسم التالي :
<a href="http://www.arabsgate.com/edu">arabsgate-education center</a><br>
<a href="mailto:hossam_elkady@hotmail.com">contact me</a><br>
<a href="http://www.msn.com/">Microsft Network</a><br>
<a href="http://www.hotmail.com">Free E-mail</a>
وعند تنفيذها سوف يخرج لنا الشكل التالي :
arabsgate-education center (http://www.arabsgate.com/edu)
contact me (hossam_elkady@hotmail.com)
Microsft Network (http://www.msn.com)
Free E-mail (http://www.hotmail.com)
هل لاحظتم ماذا حدث ؟؟
المكتوب بعد علامة = هو العنوان الذي نريد الذهاب اليه مستخدمين القواعد والطرق التي نوهنا عنها في بداية الدرس .
وبين العلامتين >< نضع الكلمة التي نريد او الجملة التي سوف تظهر لكي يضغط عليها الزائر فتأخذه للعنوان الموضح بعد ال = .
طبعا لو اردنا وضع صورة كرابط اولينك ماذا نفعل ؟؟؟
اليكم هذا الكود
<a href="http://www.microsoft.com/"><img src="/images/sample.gif"></a>
هل لاحظتم ماذا حدث هنا لقد بدأنا نستعمل وسوم مع بعضها الببعض وهذا ما نريد ان نتعلمه من الان فصاعدا
وهو اننا اخذنا مثلا وسم للصورة وكذلك اخذنا وسم للرابط لماذا لا ندمجهم مع بعض لعمل وسم لصورة بلنك!!!
وهو ماحدث هنا باننا وضعنا مكان الكلام الذي نريده ان يظهر ليضغط عليه المستخدم وسم الصورة وبهذا اصبحت الصورة لنك .
اتمنى ان تكون الصورة وصلت اليكم الان
===========================================
احب في النهاية ان اشكر الاخ المبرمج لاني استعنت بكتاب له في هذه اللغه في كتابة هذا الدرس
وهذا لاحقاق الحق وإعطاء كل ذي حق حقه
منقول