|
الدرس الثالث
الصور والرسومات
:
اٍن المؤثر المسؤول عن تعريف الصورة داخل الصفحة هو
< IMG >
وهو مفرد أي لا ضرورة لإنهائه , وهو لا
يكفي لاٍدراج صورة لذلك نضيف البارامتر
SRC
لتحديد اسم ومكان الصورة . والصيغة هي :www.tartoos.com
>
" اسم الصورة ومسارها " =
IMG SRC
<
ونذكر بأن
HTML
تتعامل مع نوعين من الصور
:
1- GIF = Graphics Interchange Format .
2- JPEG = Joint Photographic Experts Group .
ويخزن النوع الأول بالامتداد
gif
.
والتالي بالامتداد
jpg
. أو
jpeg
.
-
اذا كانت الصورة موجودة في نفس المجلد حيث يتواجد ملف
HTML
تكون الصيغة :
>
" اسم الصورة " =
IMG SRC
<
- اذا كانت الصورة موجودة في مجلد يتفرع عن المجلد الموجود
به ملف HTML
تكون الصيغة :
>
"
اسم الصورة /
اسم المجلد " =
IMG SRC
<
اي اسم المجلد تتبعه اشارة
/
ثم اسم
الصورة .
-
واذا كانت الصورة موجودة في مجلد آخر غير المجلد الموجود فيه
الملفHTML
ولكن بنفس المستوى أي أنهما مجلدين
متجاورين وليسا متفرعين أحدهما عن الآخر , تكون الصيغة هكذا :
>
"
اسم الصورة /
مجلد الصورة
/
. . " =
IMG
SRC <
اذاً نكتب نقطتين . . للخروج من المجلد الفرعي الحالي ( حيث
يوجد ملف HTML
) ومن ثم الدخول الى المجلد حيث توجد
الصورة .
اٍن أبعاد الصورة تأخذ كما هي مصممة بأبعادها الحقيقية ,
وتعطى قيمتها بوحدة البيكسل , وللتحكم بأبعاد الصورة لدينا بارامترين تابعين
للمؤثر < IMG >
وهما : العرض
WIDTH
و
الارتفاع HEIGHT
HEIGHT = " 60 " WIDTH = " 50 " >
" اسم الصورة " =
IMG SRC
<
ALT
:
وهذا البارامتر يستخدم مع
< IMG >
وفيه تحدد نصاً بديلاً يظهر مكان الصورة
وهذا النص يلاحظ خصوصاً عندما يكون خيار " اظهار الصورة تلقائياً " غير فعّال
في المتصفح.
كما يلاحظ في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل :
>
" Text " =
ALT
" اسم الصورة " =
IMG SRC
<
-
وعندما ندرج صورة ضمن فقرة فاٍن موقع ظهورها يتحدد حسب ترتيب
ورودها في الفقرة مثل أي كلمة أو عبارة أخرى . ولتحديد محاذاة النص للصورة أو
تحديد موقع النص بالنسبة للصورة نستخدم البارامتر
التالي:
ALIGN
: وهو يأخذ عدة قيم :
BOTTOM – TOP – MIDDLE – LEFT
– RIGHT .
وفي الحالة العادية عندما لانحدد أي محاذاة فاٍن النص الذي
يلي الصورة يظهر بمحاذاة الحافة السفلى لها , وهذه هي الحالة الافتراضية
لظهور الصور والتي لا تمثلها القيمة
BOTTOM
>
" BOTTOM "
= ALING
" اسم الصورة " =
IMG SRC
<
-
Top
:
عند تحديد هذه القيمة فاٍن السطر الأول من
النص الذي يلي الصورة بمحاذاة الحافة العليا لها , أما باقي النص فيمتد
أسفلها >
"
Top
" =
ALIGN
" اسم الصورة " =
IMG SRC
<
- MIDDLE
:
عند تحديد هذه القيمة فاٍن السطر الأول من النص يقع بمحاذاة منتصف الصورة
وباقي النص يمتد أسفلها
.
> "
MIDDLE
" = ALIGN
" اسم الصورة " =
IMG SRC
<
- LEFT
:
هذه القيمة تؤدي الى محاذاة الصورة الى أقصى اليسار مع التفاف النص الذي يليها
على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة :
> "
LEFT
" = ALIGN
" اسم الصورة " =
IMG SRC
<
-
RIGHT
:
استخدام هذه القيمة يؤدي الى محاذاة الصورة الى أقصى اليمين مع التفاف النص
الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة :
>
" RIGHT " =
ALING
" اسم الصورة " =
IMG SRC
<
ولمحاذاة نص بجانب صورة نستخدم تقنية جديدة هي الجداول
TABLES
ستشرح لاحقاً .
-
والآن ولتحديد المسافة الفاصلة بين النص والصورة نستخدم البارامترات التالية
:
VSPACE
:
لتحديد المسافة العمودية الفاصلة بين النص
والحافتين العليا والسفلى للصورة .
HSPACE
:
لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة .
" ALIGN="right" VSPACE = "20" HSPACE = "30 >اسم
الصورة "= IMG SRC
<
المسافة الفاصلة تقدر بالبيكسل .
BORDER
:
وهو بارامتر < IMG >
مسؤول عن اضافة اطارحول الصورة
والتحكم بسماكته . ويستخدم هذا البارامتر بشكل خاص عند تعيين الصورة كوصلة
تشعبية . ويتم التحكم بالسماكة باٍعطاء رقم البيكسل . والقيمة الافتراضية هي
0
أي لا يوجد اطار حول الصورة . مثلاً لإضافة اطار حول الصورة سمكه "7
" بيكسل :
>
"
7
" = BORDER
" اسم الصورة " =
IMG SRC
<
توضيح بعض الأمور
التي تتلعق بالصور والرسومات بشكل عام :
- هناك الكثير من الملفات الرسومية وتنسيقات الصور وكل
منها يختلف عن غيره من حيث الدقة وعدد الألوان التي يستوعبها والحجم التخزيني
للملف , لكن هناك نوعين فقط يتم تداولهما حالياً في الانترنت:
JPEG
أو
JPG
:
وهي اختصار ل
Joint Photographic Experts Group
ويدعم هذا التنسيق صور بعيار
24
bit
أي ( 16,7
مليون لون ) . يتميز باٍمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي
الحصول على صور صغيرة الحجم نسبياُ ( أي
KB ) .ولكن
كلما زادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح .
GIF
:
اختصار لGraphical Interchange
Format وأقصى عدد للألوان
في هذا التنسيق هو
256
لون ومع ذلك فاٍن أحجام الصور المخزنة به كبيرة نسبياً بالمقارنة مع
JPEG
. ولكن هناك مزايا رائعة ينفرد بها
GIF
مما
يستدعي استخدامه في صفحات الويب وهي القدرة على تخزين الصور بخلفيات شفافة Transparent
Images وثانيها
الصور المتحركة Animated Gifs
.
اٍذاً
JPG
=
مخصص للصور الحقيقية ذات العدد الكبير من الألوان وذات الأبعاد الكبيرة .
GIF
=
الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار .www.tartoos.com
-
درجة
استبانة الشاشة
Resolution
: اٍن درجة
استبانة الشاشة تكون640
480 ×
أو600×800
وهناك درجات أعلى تعتمد على مقدرة محوّل العرض مثل :
720×960
أو 720×960
.
Pixel
:
وهي اختصار ل
picture Element
, فاٍذا كانت شاشتك ذات دقة
480×640
فهذا يعني أنها مقسمة نظرياً الى شبكة من
640
عمود و 480
سطر . وكل خلية من هذه الشبكة يمثل بيكسل وكلما زادت الاستبانة ( الدقة )
كلما صغر حجم وحدة البيكسل .
Thumbnail:
وهو مصطلح يعني كترجمة
حرفية " ظفر الإبهام " ولكن في الحقيقة هو بحجم تلك الصورة الصغيرة جداً التي
تقوم بالنقر عليها فتؤدي الى عرض صورة بحجم أكبر . لذلك قد يكون المصطلح
الأنسب لوصفها هو " العينة " .
اٍن استخدام العينات مفيد وعملي واٍن وضعها في المواقع
التي تحتوي على العديد من الصور يؤدي الى تقليل الزمن اللازم لتحميل الصفحات
وتجنب ضياع الوقت بانتظار ظهور الصورة الأصلية كبيرة الحجم .
اٍن استخدام الخاصتين
WIDHT و
HEIGHT
يؤدي الى اظهار الصورة بحيث تبدو مصغّرة
. ولكن فعلياً قمنا باٍجبار المتصفح على تحميل الصورة بالحجم والأبعاد
الأصلية ثم عرضها بالحجم المصغّر , أي في النهاية لم نحقق الغاية من وجود هذه
العينات .
www.tartoos.com
|
