<HTML>
<BODY>
<CENTER>
بسم الله الرحمن الرحيم
</CENTER>
الدرس الثالث : -
درسنا راح يكون ممتع كثيررررررررررررر
وهو........ إضافة الصور في صفحة الويب واخترت كل شي متعلق بالصور حتى اشرحه هنا
بس قبل كل شي احب أوضح ان الصورة المستخدمة لازم تكون بنفس مكان المفكرة او احدد المسار لها( اذا كنت كاتبة المستند في مجلد لازم انقل الصورة بنفس المجلد) لان اذا ما تعرف على المسار راح يطلع مكان الصورة إشارة X.
وهنا لقيت طريقه حتى اكتب الكود مثل ماهو وما عليكم الا نسخ ولصق الكود في المفكرة وتحفظونها بامتداد .html مع تغير اسم الصورة بالصور الموجودة عندكم .
أولا :-
طبعا أكيد نعرف ان هناك مجموعة مختلفة من الصور ومنها BMP -JPG -TIF-GIF
واكثر شي نستخدمها في صفحات الانترنت هى
1. JPG ميزه هذا التنسيق بامكانيه حفظ الصوره بعدد اقل من البايت.
2. GIFوميزته في وضوح الصوه واستخدامه كثير في الصور المتحركه.
اما الوسم المستخدم <IMG> ونحدد اسم وموقع الصورة بـــSRC مثلا عند أدراج الصورة ASOOLA.GIF في صفحه ويب يكون الكود
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" >
<P ALIGN="RIGHT">
طبعا راح تطلع الصوره مثل ماهى اذا كانت كبيره او صغيره هنا راح نعرضها فقط مثل ما هى .
اما اذا كانت الصوره في مجلد او مكان ثانى راح ناخذ المسار كامل للصوره مثلا لو كانت موجوده في القرص C ومجلدخاص ASOOOLAويحتوى ايضآ على مجلد ثانى اسمه html والصوره موجوده فية راح نكتب الكود بهذا الشكل
<p dir=rtl>
<P ALIGN="LEFT">
<IMG SRC="C:\My Documents\ ASOOOLA\html\ASOOLA.GIF" >
<P ALIGN="RIGHT">
اتمنى تكون وضحت المعلومة وأنكم فهمتوها وما أكون صعبتها..... افضل شي انكم تحطو الصورة بنفس مكان المفكرة .
واذا أردنا عرض الصورة بحجم معين وهنا افضل حتى ما تطلع الصورة كبيره جدآ وتأخذ من حجم الصفحة وبعضنا يحب يكبر الصورة بس في ملاحظة اذا كبرنا الصورة بحجم كبير ماراح تكون واضحة كثير لذلك مهم اخذ ابعاد مناسبة لعرض الصور. فمثلا الطول 100 والعرض 300 يكون الكود بهذا الشكل
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="200">
<P ALIGN="RIGHT">
<CENTER>
<IMG SRC="http://gulf-server.com/vb/images/vBulletin_logo.gif" WIDTH="300" HEIGHT="200">
</CENTER>
وفي ناس تحب الصورة بإطار يعنى الصورة تكون محددة بإطار واضح نحدد الإطار للصورة بأرقام نحن نختارها وطبعا الصفر يعنى عرض الصورة بدون إطار . والكود راح يكون بهذا الشكل
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="300" BORDER="10">
<P ALIGN="RIGHT">
<CENTER>
<IMG SRC="http://gulf-server.com/vb/images/vBulletin_logo.gif" WIDTH="200" HEIGHT="200" BORDER="10">
</CENTER>
ثانيا :-
توضيح عن الصورة او عرض اسم الصورة يعنى اذا قربنا الماوس على الصوره نهايه السهم راح يطلع لنا توضيح نحن نكتبه وبعد كمان هذا النص راح يطلع اذا ما طلعت الصورة لسبب ما وراح نستخدم الوسم ALT لكتابة النص
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF"ALT="صوره منتدى الرائدية الجديدة" >
<P ALIGN="RIGHT">
<p dir=rtl>
<CENTER>
قرب الماوس من الصورة وشوف النص
<br>
<IMG SRC="http://gulf-server.com/vb/images/vBulletin_logo.gif" WIDTH="200" HEIGHT="200" ALT="صوره منتدى الرائدية الجديدة" >
</CENTER>
ثالثا :-
اتجاه الصورة فى لغة HTML في صفحة الإنترنت دائما يعرضها لنا باليسار وراح نستخدم خاصية ALIGN مع ال IMG لتحديد مكان الصورة من الكتابة
اما لتحديد الصورة فقط فى الصفحة راح نستخدم ALIGN أولا
مكان الصورة في الصفحة :-
1. يمين الصفحة نكتب
<P ALIGN="LEFT">
< P ALIGN= RIGHT>
<IMG SRC="ASOOLA.GIF" >
<P ALIGN="RIGHT">
<P ALIGN= RIGHT>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">
2. يسار الصفحة نكتب
<P ALIGN="LEFT">
< P ALIGN= LEFT>
<IMG SRC="ASOOLA.GIF" >
<P ALIGN="RIGHT">
<P ALIGN= LEFT>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">
</center>
3. الصوره فى الوسط يعنى وسط الصفحة
<P ALIGN="LEFT">
< P ALIGN=CENTER >
<IMG SRC="ASOOLA.GIF" >
<P ALIGN="RIGHT">
<P ALIGN= CENTER>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">
</center>
او نكتب مباشرة <CENTER> وطبعا ما ننسى نهايه الوسم <CENTER/>
</center>
رابعا :-
تحديد الصورة بالنسبة للكتابة و أتمنى أنكم تلاحظوا الفرق يعنى هنا اقصد اتجاه الكتابة مع الصورة مش مع الصفحة ونستخدم خاصية ALIGN لتحديد الاتجاه مع IMG
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" ALIGN="RIGHT" >
<P ALIGN="RIGHT">
يعنى اذا كانت في صورة وبعدها كتابة من وين راح تبدأ الكتابة ويستخدمون هذا النوع في عرض المجلات والصحف لما نشوف الصورة وبجنبها كتابه ولحد ما تنتهي الصورة تجى تكمله الكتابة تحت الصورة طبعا أول شى راح نحط الصورة وبعدين كتابه النص وراح تكون فقره حتى نشوف اتجاه الصورة من الفقرة والتفاف النص حول الصورة
1. هنا راح تكون الصورة لليمين من النص وراح يكون اول سطر بمحاذاة الصورة من فوق
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="RIGHT" >
<P ALIGN="RIGHT">
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="300" HEIGHT="100" ALIGN="RIGHT">
كثير من الناس ما يفهمون هذى النقطة وهى التفاف النص حول الصورة مع انها كثير سهله والمصممين والمبرمجين الى يستخدمون الناشر الصحفى في البرامج يستخدمون هذى الطريقه عند عرض مواضيعهم وتطلع بصورة رائعة واتمنى من انكم تفهمونها خاصة لما تشوفون التطبيق للامثلة هنا طبعا مهم نحدد حجم الصورة مع النص بحيث انهم يتناسبو عند العرض.
<BR>
2. هنا راح تكون الصورة لليسار من النص وراح يكون اول سطر بمحاذاة الصورة من فوق وتستمر الكتابه حتى توصل لحد الصورة وينزل سطر جديد ويكمل
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="LEFT" >
<P ALIGN="RIGHT">
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="300" HEIGHT="100" ALIGN="LEFT">
طبعا ما اعرف ايش راح اكتب حتى اوضح كيف تطلع الفقرة مع النص مالقيت الا انى انسخ الكتابة الى فوق وارجع اطبعها المهم هنا انكم تلاحظو الفرق والاختلاف بين اتجاة الصورتين والنص (كثير من الناس ما يفهمون هذى النقطة وهى التفاف النص حول الصورة مع انها كثير سهله والمصممين والمبرمجين الى يستخدمون الناشر الصحفى في البرامج يستخدمون هذى الطريقه عند عرض مواضيعهم وتطلع بصورة رائعة واتمنى من انكم تفهمونها خاصة لما تشوفون التطبيق للامثلة هنا.
<BR>
3. الصورة بتكون يسار النص و أول سطر راح يكون تحت بمحاذاة نهاية الصورة
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="BOTTOM" >
<P ALIGN="RIGHT">
هنا بداية الكتابه للفقره راح تبدأ من نهايه الصورة يعنى اول سطر للفقره بدأ بمحاذاة الصورة والكتابة اخذت السطر الاخير من الصورة بعكس السابق كانت الكتابه تاخذ السطر الاول من الصوره مع الاسطر بجانب الصورة وهنا كل واحد يحدد التصميم الى يعجبة .
<BR>
4. الصورة يسار النص و أول سطر راح يكون في الأعلى بمحاذاة الصورة راح يأخذ سطر واحد فقط وباقي النص راح يكون تحت الصورة
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN ="TOP" >
<P ALIGN="RIGHT">
<BR>
5. هنا الصورة يسار النص و أول سطر راح يكون وسط الصورة يعنى النص ومثل السابق راح يأخذ سطر واحد فقط وباقي النص راح يكون تحت الصورة
<IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN ="MIDDLE" >
هذا النوع من العرض ما يختلف عن السابق كثير الاختلاف فقط في بدايه السطر الاول من الفقرة بدل ما يبدأ من فوق او من السطر الاول بمحاذاة الصوره بدأ من النص طبعا للصورة وليس للصفحة.
<BR>
خامسا :-
راح نحدد المسافة بين الصورة والنص ولو ان استخدامها قليل في صفحات الويب لكنها مهمة عند مصممين الإعلانات ونستخدم الخاصية HSPACE و VSPACE مع تحديد ALIGN للصورة
VSPACE وهى المسافة بين النص و حافة الصورة من اليمين او اليسار حسب اتجاه الصورة يعنى المسافة بشكل عامودي.
HSPACE المسافة بين النص ولحافة الصورة من تحت يعنى المسافة بشكل افقي.
<P ALIGN="LEFT">
<IMG SRC="ASOOLA.GIF" ALIGN ="RIGHT" VSPACE="30" HSPACE="30" >
<P ALIGN="RIGHT">
<br>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="200" HEIGHT="200" ALIGN="RIGHT" VSPACE="10" HSPACE="60">
مثلا ماتلاحظون ان شكل الكتابة صار ارتب من السابق حول الصورة بعد ما حددنا المسافة من يمين او يسار (حسب اتجاة الصورة )اوتحت الصورة من حيث بداية الكتابة والتفاف النص حولها مهم كثير للمصمم ان يحدد المسافة او الهوامش للصورة حتى يطلع العرض جميل واتمنى منكم ان تقومو بنسخ الاكواد السابقة وتحفظوها بالمفكرة.....وتشوفو النتيجة خاصة انى توصلت لطريقة عرض اكواد اللغة كاملة بعكس السابق ..وانا على استعداد توضيح اي شي مرة ثانية لان بعد هذا المشوار اكيد راح نكون فهمنا الكثير من هذى اللغة و راح اقدر اكمل لكم شرح اكثر وبتكون الكواد متقدمة شوى يعنى تحتاج الى تركيز اكثر مثل حركه النصوص والصور والفديو كليب في لغة الهتمل وبعدها الجداول وهى مش كثير صعبة وبمعنى اصح محتاجة تركيز اكثر وتطبيق .
<BR>
انتهينا من موضوع الصورة والنص بس راح أوضح شغله بسيطة وهى التفاف النص حول الصورة كثير ناس ما يفضلونها واذا اردنا حذف الالتفاف راح نستخدم خاصية CLEAR مع الوسم <BR>وهذا الوسم يستخدم لسطر جديد
1. الصورة لليمين وراح نمنع التفاف النص لليسار بمعنى اوضح النص راح يكون في اول سطر فارغ لليمين بعد الصورة الكتابه بتكون تحت الصورة
<P ALIGN="LEFT">
<IMG SRC"=ASOOOLA.JPG" WIDTH="200" HEIGHT="200" ALIGN="RIGHT">
<BR CLEAR="RIGHT">
2. الصورة لليسار وراح نمنع التفاف النص يمين الصورة بمعنى اوضح النص راح يكون في اول سطر فارغ لليسار بعد الصورة
<P ALIGN="LEFT">
<IMG SRC"=ASOOOLA.JPG" WIDTH="200" HEIGHT="200" ALIGN="LEFT">
<BR CLEAR="LEFT">
وافضل شى نستخدم هذا الكود مع الكل
<BR CLEAR="ALL">
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="200" HEIGHT="100" ALIGN="RIGHT">
<BR CLEAR="RIGHT">
اكيد راح تحقدون على الحين هههههههههه بتقولون بعد كل هذى الحوسه جاية تحذفين الكتابة الملتفة حول الصورة طيب ليش تعبتينا من البداية وليش كل هذا التعب ؟؟؟؟؟؟ مكان من الاول بلاش هذا الازعاج ونحط الصورة وتحتها الكتابة بس انا اقول لكم ان هذا مهم لما تكون في الصفحة مجموعة صور ومواضيع وراح تعطى للصفحة تصميم كثير حلوووووو ومثل ما قلت هى مهمه كثير لمصممين المجلات والاعلانات.
<br>
<br>
<CENTER>
ارجو انى ما طولت عليكم بالشرح ولا صدعت راسكم بالفلسفة الزايدة
<BR>
واللى اللقاء
:ty:
</CENTER>
</BODY>
</HTML>
المواضيع المتشابهه
ما اكون تاخرت بالرد
العرض العادي
