Admin
.::: المدير العام :::.
عدد الرسائل : 217
الموقع : elmilia.ahlamontada.com/
تاريخ التسجيل : 05/11/2007
 | موضوع: سلسلة دروس تعلم صنع صفحة الانترنت Learn HTML الدرس الثامن ,الصور و الجداول  السبت 12 يونيو 2010 - 19:52 | |
| الدرس الثامن ,الصور
ألن يكون رائعاً إذا تمكنت من وضع صورة المغني والممثل الشهير ديفيد هاسلهوف في منتصف صفحتك؟
هذا يبدو كتحد...
ربما، لكن في الحقيقة يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:
مثال 1:
<img src="david.jpg" alt="David" />
ستظهر بهذا الشكل في متصفحك:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟
لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.
"david.jpg" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".jpg" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".jpg" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.
في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.
من أين آتي بالصور؟
إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.
للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.
عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IfranView وهو برنامج مجاني ولا يكلف شيئاً.
أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:
إضغط بالزر الأيمن على أي صورة في أي موقع.
اختر "Save picture as..." في القائمة التي ستظهر لك.
اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".
إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.
هل هذا كل ما أحتاجه لمعرفته حول الصور؟
هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:
مثال 2:
<img src="images/logo.png" />
مثال 3:
<img src="http://www.html.net/logo.png" />
ثانياً، يمكن للصور أن تكون روابط:
مثال 4:
<a href="http://www.html.net">
<img src="logo.png" /></a>
ستظهر في المتصفح بهذا الشكل (جرب أن تضغط على الصورة):
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
هل هناك أية خصائص يجب أن أعرفها؟
عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور
خاصية alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:
مثال 5:
<img src="logo.gif" alt="HTML.net logo" />
بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.
الخاصية title يمكن استخدامها لتقديم معلومات إضافية للصورة:
مثال 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
سيظهر بهذا الشكل في متصفحك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "Learn HTML from HTML.net" يظهر لك في مربع صغير.
هناك خاصيتان مهمتان وهما width وheight:
مثال 7:
<img src="logo.png" width="141" height="32" />
سيظهر بهذا الشكل في متصفحك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الخاصية width وheight يمكن استخدامها لتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديه شاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن في شاشة أخرى قد تساوي 1.5 سنتميتر.
إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:
مثال 8:
<img src="logo.gif" width="32" height="32" />
سيظهر بهذا الشكل في متصفحك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
عموماً، انتبه إلى أن حجم الصورة بالكيلوبايت سيبقى كما هو وستأخذ الصورة نفس الوقت لتظهر للمستخدم حتى لو كانت صغيرة الحجم من ناحية المظهر، لذلك عليك ألا تصغر مقياس صورة باستخدام خاصيتي الطول والعرض، بدلاً من ذلك قم بتصغير الصور من خلال برنامج محرر صور لكي تجعلها أصغر حجماً
مع ذلك، تظل فكرة جيدة أن تستخدم خاصيتي الطول والعرض لأن المتصفحات تستطيع أن تعرف كم مساحة الصورة التي يجب أن تظهر في الصفحة فتسرع بذلك ظهور الصفحة للمستخدم.
يكفينا الآن ما رأيناه من صور ديفيد هاسلهوف.الدرس الثامن ,الجداول
الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.
هل هي صعبة؟
إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.
مثال 1:
<table>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحكخلية 1 خلية 2
خلية 3 خلية 4
ما الفرق بين <tr> و<td>؟
كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:
هناك ثلاث عناصر تستخدم لإنشاء أي جدول:
وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.
<tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
<td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.
هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.
فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:خلية 1 خلية 2
خلية 3 خلية 4
خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً
في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.
مثال 2:
<table>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
<tr>
<td>خلية 5</td>
<td>خلية 6</td>
<td>خلية 7</td>
<td>خلية 8</td>
</tr>
<tr>
<td>خلية 9</td>
<td>خلية 10</td>
<td>خلية 11</td>
<td>خلية 12</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحكخلية 1 خلية 2 خلية 3 خلية 4
خلية 5 خلية 6 خلية 7 خلية 8
خلية 9 خلية 10 خلية 11 خلية 12
هل هناك أية خصائص للجداول؟
بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:
مثال 3:
<table border="1">
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحكخلية 1 خلية 2
خلية 3 خلية 4
سمك إطار الجدول يحدد بمقياس البكسل (انظر الدرس التاسع)
وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:
مثال 4:
<table border="1" width="30%">
هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.
المزيد من الخصائص
هناك خصائص كثيرة للجداول، هذان اثنان منها:
align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.
مثال 5:
<td align="right" valign="top">Cell 1</td>
ماذا يمكن أن أضع في الجداول؟
نظرياً يمكن أن تضع أي شيء في الجداول، النصوص والصور والروابط، لكن الجداول مخصصة لعرض البيانات مجدولة،، لذلك لا تستخدمها لوضع أي شيء لأنك تريد ببساطة أن تجعل الأشياء تظهر بجانب بعضها البعض،.
قبل سنوات معدودة كانت الجداول تستخدم غالباً كأداة للتصميم، لكن إذا أردت أن تتحكم بطريقة عرض النصوص والجداول هناك طريقة أفضل بكثير (تلميح: CSS) لكن هذا سنناقشه لاحقاً.
الآن قم بتطبيق ما تعلمته وصمم عدداً من الجداول بمختلف القياسات ومختلف الخصائص والمحتويات، هذا يمكن أن يبقيك مشغولاً لساعات. | |
|
