النتائج 1 إلى 5 من 5

الموضوع: {html}الدرس السابع (الصور)

  1. #1
    -{][ مدير التصاميم ][}- الصورة الرمزية احمد حسن
    تاريخ التسجيل
    Jun 2009
    العمر
    32
    المشاركات
    5,610
    معدل تقييم المستوى
    215245

    {html}الدرس السابع (الصور)



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

    ولكن يجب أن لا تكون الصورة ذات حجم كبير لأن ذلك سيؤدي إلى بطء شديد في التحميل

    ويجب الحذر جيدا عند التعامل مع الصور لأنها تستهلك حجما كبيرا
    وتسبب بطء شديد في تحميل الصفحات لذلك
    يفضل التقليل من الصور قدر الإمكان في الصفحات

    هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:
    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،
    حيث يمكنها أن تحوي ملايين الألوان وتقوم بضغطها بشكل فعال.

    والآن سوف نتعرف عن السمة الرئيسية لإدراج الصور وهي <img>
    وهي سمة مفردة

    لنتعرف الآن على أهم الخصائص المستخدمة مع الوسم img

    أول هذه الخصائص هي src وتستخدم في تحديد مكان واسم الصورة على الهارديسك
    وتكتب بهذا الشكل

    <img src="اسم الصورة وامتدادها/مسار الصورة">
    (إن كانت الصورة في ملف آخر غير الملف المحفوظ فيه الصفحة)

    <img src="اسم الصورة وامتدادها">
    (إن كانت الصورة في نفس الملف المحفوظ فيه الصفحة)

    ثم نقوم بتحديد الصورة المراد ادراجها ولتكن هذه الصورة


    لكي نحدد مسار الصور وامتدادها
    نضغط عليها بزر الماوس الأيمن
    ثم نختار خصائص في آخر القائمة

    ستظهر الصورة كالتالي وقد قمت بتحديد المطلوب عليها


    الآن لنقوم بفتح برنامج المفكرة / Notepad ونكتب هذا الكود معاً


    كود HTML:
    <html>
    <head>
    <title>ramadan-kareem</title>
    </head>
    <body>
    <img src="Ramadan_Kareem_by_angelina1.png" width="1200" height="655" />
    </body>
    </html>
    ملاحظة :
    width :
    هي الخاصية التي تحدد عرض الصورة
    height :
    هي الخاصية التي تحدد ارتفاع الصورة

    القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة،

    معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر،

    البكسل يختلف حجمه بحسب دقة الشاشة،
    فمستخدم لديه شاشة ذات دقة عالية
    قد يكون السنتميتر يساوي في شاشته 25 بكسل،
    لكن في شاشة أخرى قد تساوي 1.5 بكسل

    إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها،
    لكن بالخاصيتين يمكن التلاعب بحجم الصورة

    عموماً، انتبه إلى أنه عند تصغير الصورة
    عن طريق الخاصيتين width و height
    فإن حجم الصورة بالكيلوبايت سيبقى كما هو
    وستأخذ الصورة نفس الوقت لتظهر للمستخدم

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

    بدلاً من ذلك قم بتصغير الصور من خلال برنامج محرر صور لكي تجعلها أصغر حجماً

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

    الآن لنحفظ الصفحة كم تعودنا من file ثم save ثم نكتب اسم للصفحة مثلا ramadan
    ولا ننسى أن نكتب بعد الإسم .htm ليكون هكذا ramadan.htm ثم نضغط save

    ولا تنسى المكان الذي حفظتها فيه أما أنا فسأحفظها في ملف قمت بإنشاءه على desktop
    واسميته p وقمت بوضع الصوره به مسبقا .

    ملاحظة :
    هكذا ستكون الصورة في نفس الملف الذي ستحفظ به الصفحة
    فلن نحتاج لكتابة مسار الصورة كما في الكود السابق

    الآن اذهب إلى الملف الذي حفظت الصفحة فيه وقم بفتحها ستظهر لك النتيجة كما في الصورة


    *****************************************
    لنقوم الآن بإدراج صورة من أي ملف على الجهاز
    إختر الصورة من أي ملف على جهازك

    إخترت أنا هذه الصورة الموجودة على سطح المكتب


    يجب أولا أن تعرف مسار واسم وامتداد الصورة


    نقوم بكتابة الكود التالي

    كود HTML:
    <html>
    <head>
    <title>dhofar-al-mgd</title>
    </head>
    <body>
    <img src="C:/Documents and Settings/ks/Desktop/dhofari.gif" width="388" height="305" />
    </body>
    </html>

    ستكون النتيجة كالتالي



    *****************************************
    هل هناك أية خصائص يجب أن أعرفها غير width و hight؟

    نعم هناك الخاصية alt\title وهما يستخدموا لإعطاء وصفاً بديلاً للصورة إذا لم تظهر الصورة
    لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة،

    وهذه الخاصية مفيدة في حال لم تظهر الصور بسرعة كافية،
    لذلك استخدم دائماً خاصية alt

    الآن عد وافتح الصفحة التي قمنا بحفظها قبل قليل

    وافتح المفكرة عن طريقها سيظهر لك الكود السابق

    قم بإضافة الآتي
    alt="www.dhofari.com\forums"

    سيكون الكود النهائي كالتالي


    كود HTML:
    <html>
    <head>
    <title>dhofar-al-mgd</title>
    </head>
    <body>
    <img src="C:/Documents and Settings/ks/Desktop/dhofari.gif" width="388" height="305" alt="www.dhofari.com\forums" />
    </body>
    </html>


    اذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص



    يظهر لك في مربع صغير.






    توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور
    وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة بها
    حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه وترتبط به
    تأخذ الخاصية align العديد من القيم سنقوم بشرحها الآن...
    * bottom,baseline,absbottom:وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى
    * left: وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر
    * middle,absmiddle: وهي تعرض الصورة في منتصف السطر
    * right: وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة بالسطر

    هيا لنطبق ما مضى معا
    ...بكتابة هذا الكود

    كود HTML:
    <html>
    <head>
    <title>ramadan-kareem</title>
    </head>
    <body bgcolor="#99CC66">
    <img src="dhofari.gif" align="absbottom" />
    www.dhofari.com\forums<hr>
    <img src="dhofari.gif" align="left" />
    <p>www.dhofari.com\forums </p>
    </body>
    </html>
    ستكون النتيجة كالتالي





    ******************************
    قمت بوضع هذه الصورة في نفس الملف المحفوظة فيه الصفحة



    لنوضح باقي القيم للخاصية align نكتب الكود التالي



    كود HTML:
    <html>
    <head>
    <title>ramadan-kareem</title>
    </head>
    <body bgcolor="#99CC66">
    <img src="rmadan00.jpg" align="middle" />
    www.dhofari.com\forums<hr>
    <img src="rmadan00.jpg" align="right" />
    www.dhofari.com\forums
    </body>
    </html>
    ستكون النتيجة كالتالي





    ******************************
    توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية border
    ونحدد بها عرض الإطار بالبكسل ، والقيمة 0 تعني دون إطار
    إذا لم تحدد قيمة للخاصية border في وسم الصورة ،فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة
    لذلك يميل الناس إلى وضع border=0 في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة




    هكذا انتهى الدرس



    سنتحدث في الدرس القادم عن الروابط
    ************************************

    التعديل الأخير تم بواسطة احمد حسن ; 06-09-2009 , الساعة 20:00






    [ Everyday ...I hope to learn today ... More than yesterday ]
    [ كل يوم أتمنى أن أتعلم أكثر من الأمس ]



  2. #2
    نائب رئيس المشناعة الصورة الرمزية M!XmAn
    تاريخ التسجيل
    Mar 2008
    المشاركات
    5,979
    معدل تقييم المستوى
    863342

    تسلم يا استاذي و جزاك الله خير


  3. #3
    ~ظفارية حتى الموت~ الصورة الرمزية ~ظفارية موووت~
    تاريخ التسجيل
    Aug 2009
    المشاركات
    3,819
    معدل تقييم المستوى
    104

    تسلم ايدك عشت وماقصرت ف ميزان حسناتك ان شاء الله ^_^

    خارج التغطيه,,

  4. #4
    ابتسامتي سر جمالي الصورة الرمزية ملكة بكلمتي
    تاريخ التسجيل
    Aug 2010
    المشاركات
    354
    معدل تقييم المستوى
    701

    يسلموا


  5. #5
    سبحان الله الصورة الرمزية Jose mourinho
    تاريخ التسجيل
    Mar 2009
    المشاركات
    27,432
    معدل تقييم المستوى
    9554834

    تشكر على الدرس ..


ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •