اخر المواضيع

اضف اهداء

 

العودة   منتديات الرائدية > منتديات تقنيات المعلومات > :: منتدى الكمبيوتر والبرامج::
 

إضافة رد
مشاهدة الموضوع
 
أدوات الموضوع انواع عرض الموضوع
قديم 15-05-2003, 08:42 AM   رقم المشاركة : 1
عسوووووووووووله
عضوية شرفية
الملف الشخصي







 
الحالة
عسوووووووووووله غير متواجد حالياً

 


 

لغة HTML الدرس الثالث مع عسوووله

<HTML>
<BODY>
<CENTER>
بسم الله الرحمن الرحيم
</CENTER>

الدرس الثالث : -
درسنا راح يكون ممتع كثيررررررررررررر

وهو........ إضافة الصور في صفحة الويب واخترت كل شي متعلق بالصور حتى اشرحه هنا
بس قبل كل شي احب أوضح ان الصورة المستخدمة لازم تكون بنفس مكان المفكرة او احدد المسار لها( اذا كنت كاتبة المستند في مجلد لازم انقل الصورة بنفس المجلد) لان اذا ما تعرف على المسار راح يطلع مكان الصورة إشارة X.
وهنا لقيت طريقه حتى اكتب الكود مثل ماهو وما عليكم الا نسخ ولصق الكود في المفكرة وتحفظونها بامتداد .html مع تغير اسم الصورة بالصور الموجودة عندكم .

أولا :-
طبعا أكيد نعرف ان هناك مجموعة مختلفة من الصور ومنها BMP -JPG -TIF-GIF
واكثر شي نستخدمها في صفحات الانترنت هى
1. JPG ميزه هذا التنسيق بامكانيه حفظ الصوره بعدد اقل من البايت.
2. GIFوميزته في وضوح الصوه واستخدامه كثير في الصور المتحركه.

اما الوسم المستخدم &LT;IMG&GT; ونحدد اسم وموقع الصورة بـــSRC مثلا عند أدراج الصورة ASOOLA.GIF في صفحه ويب يكون الكود
<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" &GT;
<P ALIGN="RIGHT">

طبعا راح تطلع الصوره مثل ماهى اذا كانت كبيره او صغيره هنا راح نعرضها فقط مثل ما هى .

اما اذا كانت الصوره في مجلد او مكان ثانى راح ناخذ المسار كامل للصوره مثلا لو كانت موجوده في القرص C ومجلدخاص ASOOOLAويحتوى ايضآ على مجلد ثانى اسمه html والصوره موجوده فية راح نكتب الكود بهذا الشكل
<p dir=rtl>
<P ALIGN="LEFT">

&LT;IMG SRC="C:\My Documents\ ASOOOLA\html\ASOOLA.GIF" &GT;
<P ALIGN="RIGHT">


اتمنى تكون وضحت المعلومة وأنكم فهمتوها وما أكون صعبتها..... افضل شي انكم تحطو الصورة بنفس مكان المفكرة .

واذا أردنا عرض الصورة بحجم معين وهنا افضل حتى ما تطلع الصورة كبيره جدآ وتأخذ من حجم الصفحة وبعضنا يحب يكبر الصورة بس في ملاحظة اذا كبرنا الصورة بحجم كبير ماراح تكون واضحة كثير لذلك مهم اخذ ابعاد مناسبة لعرض الصور. فمثلا الطول 100 والعرض 300 يكون الكود بهذا الشكل

<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="200"&GT;
<P ALIGN="RIGHT">
<CENTER>
<IMG SRC="http://gulf-server.com/vb/images/vBulletin_logo.gif" WIDTH="300" HEIGHT="200">
</CENTER>

وفي ناس تحب الصورة بإطار يعنى الصورة تكون محددة بإطار واضح نحدد الإطار للصورة بأرقام نحن نختارها وطبعا الصفر يعنى عرض الصورة بدون إطار . والكود راح يكون بهذا الشكل
<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="300" BORDER="10"&GT;
<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">
&LT;IMG SRC="ASOOLA.GIF"ALT="صوره منتدى الرائدية الجديدة" &GT;
<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">
&LT; P ALIGN= RIGHT&GT;
&LT;IMG SRC="ASOOLA.GIF" &GT;
<P ALIGN="RIGHT">
<P ALIGN= RIGHT>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">

2. يسار الصفحة نكتب

<P ALIGN="LEFT">
&LT; P ALIGN= LEFT&GT;
&LT;IMG SRC="ASOOLA.GIF" &GT;
<P ALIGN="RIGHT">
<P ALIGN= LEFT>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">
</center>
3. الصوره فى الوسط يعنى وسط الصفحة

<P ALIGN="LEFT">
&LT; P ALIGN=CENTER &GT;
&LT;IMG SRC="ASOOLA.GIF" &GT;
<P ALIGN="RIGHT">
<P ALIGN= CENTER>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="100" HEIGHT="100">
</center>
او نكتب مباشرة &LT;CENTER&GT; وطبعا ما ننسى نهايه الوسم &LT;CENTER/&GT
</center>

رابعا :-

تحديد الصورة بالنسبة للكتابة و أتمنى أنكم تلاحظوا الفرق يعنى هنا اقصد اتجاه الكتابة مع الصورة مش مع الصفحة ونستخدم خاصية ALIGN لتحديد الاتجاه مع IMG
<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" ALIGN="RIGHT" &GT;
<P ALIGN="RIGHT">


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


1. هنا راح تكون الصورة لليمين من النص وراح يكون اول سطر بمحاذاة الصورة من فوق

<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="RIGHT" &GT;
<P ALIGN="RIGHT">

<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="300" HEIGHT="100" ALIGN="RIGHT">
كثير من الناس ما يفهمون هذى النقطة وهى التفاف النص حول الصورة مع انها كثير سهله والمصممين والمبرمجين الى يستخدمون الناشر الصحفى في البرامج يستخدمون هذى الطريقه عند عرض مواضيعهم وتطلع بصورة رائعة واتمنى من انكم تفهمونها خاصة لما تشوفون التطبيق للامثلة هنا طبعا مهم نحدد حجم الصورة مع النص بحيث انهم يتناسبو عند العرض.

<BR>

2. هنا راح تكون الصورة لليسار من النص وراح يكون اول سطر بمحاذاة الصورة من فوق وتستمر الكتابه حتى توصل لحد الصورة وينزل سطر جديد ويكمل

<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="LEFT" &GT;
<P ALIGN="RIGHT">


<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="300" HEIGHT="100" ALIGN="LEFT">
طبعا ما اعرف ايش راح اكتب حتى اوضح كيف تطلع الفقرة مع النص مالقيت الا انى انسخ الكتابة الى فوق وارجع اطبعها المهم هنا انكم تلاحظو الفرق والاختلاف بين اتجاة الصورتين والنص (كثير من الناس ما يفهمون هذى النقطة وهى التفاف النص حول الصورة مع انها كثير سهله والمصممين والمبرمجين الى يستخدمون الناشر الصحفى في البرامج يستخدمون هذى الطريقه عند عرض مواضيعهم وتطلع بصورة رائعة واتمنى من انكم تفهمونها خاصة لما تشوفون التطبيق للامثلة هنا.

<BR>

3. الصورة بتكون يسار النص و أول سطر راح يكون تحت بمحاذاة نهاية الصورة

<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN="BOTTOM" &GT;
<P ALIGN="RIGHT">
هنا بداية الكتابه للفقره راح تبدأ من نهايه الصورة يعنى اول سطر للفقره بدأ بمحاذاة الصورة والكتابة اخذت السطر الاخير من الصورة بعكس السابق كانت الكتابه تاخذ السطر الاول من الصوره مع الاسطر بجانب الصورة وهنا كل واحد يحدد التصميم الى يعجبة .

<BR>


4. الصورة يسار النص و أول سطر راح يكون في الأعلى بمحاذاة الصورة راح يأخذ سطر واحد فقط وباقي النص راح يكون تحت الصورة

<P ALIGN="LEFT">
&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN ="TOP" &GT;
<P ALIGN="RIGHT">
<BR>

5. هنا الصورة يسار النص و أول سطر راح يكون وسط الصورة يعنى النص ومثل السابق راح يأخذ سطر واحد فقط وباقي النص راح يكون تحت الصورة

&LT;IMG SRC="ASOOLA.GIF" WIDTH="300" HEIGHT="100" ALIGN ="MIDDLE" &GT;

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


<BR>

خامسا :-

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

VSPACE وهى المسافة بين النص و حافة الصورة من اليمين او اليسار حسب اتجاه الصورة يعنى المسافة بشكل عامودي.
HSPACE المسافة بين النص ولحافة الصورة من تحت يعنى المسافة بشكل افقي.
<P ALIGN="LEFT">

&LT;IMG SRC="ASOOLA.GIF" ALIGN ="RIGHT" VSPACE="30" HSPACE="30" &GT;
<P ALIGN="RIGHT">
<br>
<IMG SRC="http://asola.jeeran.com/2.jpg"WIDTH="200" HEIGHT="200" ALIGN="RIGHT" VSPACE="10" HSPACE="60">

مثلا ماتلاحظون ان شكل الكتابة صار ارتب من السابق حول الصورة بعد ما حددنا المسافة من يمين او يسار (حسب اتجاة الصورة )اوتحت الصورة من حيث بداية الكتابة والتفاف النص حولها مهم كثير للمصمم ان يحدد المسافة او الهوامش للصورة حتى يطلع العرض جميل واتمنى منكم ان تقومو بنسخ الاكواد السابقة وتحفظوها بالمفكرة.....وتشوفو النتيجة خاصة انى توصلت لطريقة عرض اكواد اللغة كاملة بعكس السابق ..وانا على استعداد توضيح اي شي مرة ثانية لان بعد هذا المشوار اكيد راح نكون فهمنا الكثير من هذى اللغة و راح اقدر اكمل لكم شرح اكثر وبتكون الكواد متقدمة شوى يعنى تحتاج الى تركيز اكثر مثل حركه النصوص والصور والفديو كليب في لغة الهتمل وبعدها الجداول وهى مش كثير صعبة وبمعنى اصح محتاجة تركيز اكثر وتطبيق .
<BR>
انتهينا من موضوع الصورة والنص بس راح أوضح شغله بسيطة وهى التفاف النص حول الصورة كثير ناس ما يفضلونها واذا اردنا حذف الالتفاف راح نستخدم خاصية CLEAR مع الوسم &LT;BR&GT;وهذا الوسم يستخدم لسطر جديد


1. الصورة لليمين وراح نمنع التفاف النص لليسار بمعنى اوضح النص راح يكون في اول سطر فارغ لليمين بعد الصورة الكتابه بتكون تحت الصورة

<P ALIGN="LEFT">
&LT;IMG SRC"=ASOOOLA.JPG" WIDTH="200" HEIGHT="200" ALIGN="RIGHT"&GT;
&LT;BR CLEAR="RIGHT"&GT;


2. الصورة لليسار وراح نمنع التفاف النص يمين الصورة بمعنى اوضح النص راح يكون في اول سطر فارغ لليسار بعد الصورة


<P ALIGN="LEFT">
&LT;IMG SRC"=ASOOOLA.JPG" WIDTH="200" HEIGHT="200" ALIGN="LEFT"&GT;
&LT;BR CLEAR="LEFT"&GT;

وافضل شى نستخدم هذا الكود مع الكل
&LT;BR CLEAR="ALL‎"&GT;

<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>







رد مع اقتباس
قديم 15-05-2003, 01:58 PM   رقم المشاركة : 2
عبدالله الحديثي
مؤسس المنتدى
نائب رئيس تحرير مجلة الرائدية
 
الصورة الرمزية عبدالله الحديثي
الملف الشخصي







 
الحالة
عبدالله الحديثي غير متواجد حالياً

 


 

فلسفة <=== تقل هذا تخصصي

لكن ماعليه يا عسووووووووووولة تستاهليت والله شرحك وافي وكافي

ارجو من الجميع الإستفادة من علمك وكثر الله خيرك اختى .







رد مع اقتباس
قديم 15-05-2003, 05:06 PM   رقم المشاركة : 3
أبو رائد
المدير العام
 
الصورة الرمزية أبو رائد
الملف الشخصي







 
الحالة
أبو رائد غير متواجد حالياً

 


 

ما شاء الله تبارك الرحمن



الله يعطيك العافية عسووووووووووله

والله ماشاء الله على المواضيع اللي تكتبينه كلها مفيده للجميع


فجزاك الله خير عن الجميع







التوقيع :
عِشْ عفويتك تاركــًا للناس إثم الظنون
فــَ لك أجرهم ، ولهم ذنب ما يعتقدون
.
.
.
.
.
.
.
الرائدية ليس مجرد منتدى


رد مع اقتباس
قديم 28-05-2003, 01:27 AM   رقم المشاركة : 4
عسوووووووووووله
عضوية شرفية
الملف الشخصي







 
الحالة
عسوووووووووووله غير متواجد حالياً

 


 

ياهـــلآ و مــرحبا


الفيلـــــسوف

أبــــو رائــد


مشكووورين على الكلمات الرائعة

. . .







آخر تعديل عسوووووووووووله يوم 26-03-2006 في 04:17 AM.

رد مع اقتباس
قديم 09-08-2004, 04:30 AM   رقم المشاركة : 5
Rayyan
رائدي فضي
 
الصورة الرمزية Rayyan
الملف الشخصي






 
الحالة
Rayyan غير متواجد حالياً

 


 

[move=down][align=center]جازك الله الف خير اختي عسوووله
تحياتي[/align]
[/move]







التوقيع :

رد مع اقتباس
قديم 18-12-2005, 07:56 PM   رقم المشاركة : 6
الصغير اليمني
رائدي جديد
الملف الشخصي







 
الحالة
الصغير اليمني غير متواجد حالياً

 


 

تسلمي عسوله مشاء الله عليك اختي
اختي عسوله شرحك كويس ومفهوم
بس انا عندي مشكله الصوره عندي محفوظه بالعربي والله اتعب فيها
مثل عندي مكتوبه اسم الصوره (صوره شخصيه) انزلها كماهي وما تنزل
ارجو منك اختي عسوله الافاده وشكرً







رد مع اقتباس
قديم 13-03-2006, 06:54 AM   رقم المشاركة : 7
عسوووووووووووله
عضوية شرفية
الملف الشخصي







 
الحالة
عسوووووووووووله غير متواجد حالياً

 


 

لا شكر على واجب اخوي الصغير اليمني

اتمنى ما اكون تاخرت بالرد

وحاضرين الى اي استفسار للــ html وان شاء الله راح ارجع اكمل الدروس للتعمق بهذى اللغه

بالنسبه للغه html لا يهم اذا كان اسم الصوره باللغه العربيه فمثلا
هذا كود الصوره

<html>
<img src = "صوره شخصيه.jpg" width="300" hight="100" border="3">
</html>
راح تنزل الصوره بالصفحه بدون اي مشاكل فالصوره وصفحه الانترنت بنفس المكان او المجلد
ولازم تهتم لمسار الصوره اذا كانت في مجلد اخر

واعتذر عن التاخير بالرد .






التوقيع :



شكرا أصداف

رد مع اقتباس
قديم 13-03-2006, 08:01 AM   رقم المشاركة : 8
أبو رائد
المدير العام
 
الصورة الرمزية أبو رائد
الملف الشخصي







 
الحالة
أبو رائد غير متواجد حالياً

 


 

أهلا وسهلا بعسووووووووله


وعودة طيبة إن شاء الله



وما شاء الله عليك وعلى ردودك







رد مع اقتباس
قديم 25-03-2006, 04:35 PM   رقم المشاركة : 9
C.RONALDO
رائدي ذهبي
 
الصورة الرمزية C.RONALDO
الملف الشخصي







 
الحالة
C.RONALDO غير متواجد حالياً

 


 

" عســــــــــــــوله .. " ...





يعطيك العافيه .. على الدرس ..

يحمل الكثير .. من الإفاده ..

كل الشكر لك .. هنا ..

كوني بخير ..





بيبـــــــــــــــــاي ..







التوقيع :
()( برايفت .. للي عارف نفسه .. )() ..

لقد تمكن منك داء حب الذات ..

ووصلت بك الثقه للحكم على عقليات من هم أعلى منك تفكيراً ..

وعقلانيه ..

أنصحك .. بالذهاب .. لعياده بها دكتورين ..

فعندما يفجع الأول من هول الحال التي وصلت إليها ..

يكون الثاني متداركاً لعقليتك .. وإصلاحها .. !!

رد مع اقتباس
قديم 26-03-2006, 04:22 AM   رقم المشاركة : 10
عسوووووووووووله
عضوية شرفية
الملف الشخصي







 
الحالة
عسوووووووووووله غير متواجد حالياً

 


 

مشكوراخو أبو رائد

الله يعطيكـ العافيه ويسلمووو يا الذوق

مشكور اخوي C.ronaldo

الله يعطيكـ العافيه وشاكره ردكـ







رد مع اقتباس
 
إضافة رد

« الموضوع السابق | الموضوع التالي »

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
لغة Html الدرس السابع مع عسوووله عسوووووووووووله :: منتدى الكمبيوتر والبرامج:: 3 24-04-2006 03:56 PM
لغة Html الدرس السادس مع عسوووله عسوووووووووووله :: منتدى الكمبيوتر والبرامج:: 3 21-04-2006 05:37 AM
لغة Html الدرس الرابع مع عسوووله عسوووووووووووله :: منتدى الكمبيوتر والبرامج:: 4 11-04-2006 07:45 PM
لغة Html الدرس الخامس مع عسوووله عسوووووووووووله :: منتدى الكمبيوتر والبرامج:: 6 11-04-2006 07:35 PM
لغة HTML الدرس الثاني مع عسوووله عسوووووووووووله :: منتدى الكمبيوتر والبرامج:: 4 09-08-2004 04:17 AM



الساعة الآن 12:06 PM.

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