الدرس السابع : اضافة الصور لصفحات الــ html

الوليد الراشدي · #1 (**permalink**) 09-08-2008, 10:58 AM

الدرس السابع : اضافة الصور لصفحات الــ html

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

الامر الاساسي لاضافة الصور ..
يلله نشوف هالمثال البسيط ..

كود:

<html> 
<head> 
<title> الصور </title> 
</head> 
<body> 
<h1 align="center"> 
<img src="logo.jpg" alt="logo"> 
</h1>
</body>
</html>

لاحظ أخي عندما ننسخ الكود و نفتحه بالمستعرض تكون النتيجه كذيه :

راح نلاحظ أن الصوره ما تشتغل و هذا لانها أصلا مو موجوده بس أنا عملته كمثال توضيحي لا اكثر و لا اقل ..
نبدي نشرحه .. بسم الله ..
أولاً : سبق و ذكرنا تفسير الامر <h1> الي هو أمر لتحديد العناوين و تمييزها عن غيرها
ثانياً :

كود:

<img src="xxxxx.yyy>

شوفوا يا اخوان هذا الامر هو الامر الاساسي في أي صوره داخل لغة النص المتشعب و فيه متغيرين xxxxxx و تحط بدالها رابط الصوره و yyy و تحط بدالها صيغة الصوره و عادة تكون jpg طبعا

الخصائص التي يمكن اضافتها مع أمر الصوره ..
الحين يا اخوان لاحظوا معي في هذي الشفره ..

كود:

<html>
<head>
<title> وضع رابط و خصائص للصوره </title> 
</head> 
<body> 
<a href="http://www.mtwer.com"> 
<img src="logo.jpg" alt=" موقع مطور " width=90 height=90 border=2>
</a>
</body> 
</html>

بعد ما نحط الشفره السابقه في امتداد htm راح تصير عندنا كذا ..

نشرح هالشفره من الالف الى الياء ..
أول شي الامر herf تعرفوه و اذا كنت ما تعرفه راجع درس الوصلات التشعبيه
ثاني شي الامر img src شرحناه قبل شوي
ثالث شي الخصائص الي أضفناه الحين أحاول أشرحها بالتفصيل الممل ..
width = العرض و تتبعه بعلامة يساوي بعد علامة يساوي تكتب رقم تحددبه عرض الصوره
height = الارتفاع و تتبعه بعلامة يساوي بعد علامة يساوي تحط رقم تحددبه ارتفاع الصوره
alt = توضيح للصوره لو تحط الشفره هذي بالمفكره و تحفظها بصيغة htm راح تفهم أكثر
border = الحدود و عرض الحد
الحين راح ناخذ الاوامر الاضافيه ..
الامر align و يستخدم كالتالي ..

كود:

<img src="logo.jpg" align="top">

ولهذا الامر أربع خواص ..
top
bottom
middle
left
right
طبعا تحطها كالتالي ..

كود:

<img src="logo.jpg" align="xxxxx">

طبعا تلتزم بتغيير الــ xxxxx الى احدى الخواص التي سبق ذكرها ..

بعد الانتهاء من الدرس فكر في السؤال التالي :
- ما سبب اختلاف الخواص في الامر align عند استخدامه مع النصوص و عند استخدامه مع الصور ؟؟؟

و ايضاً فكر في :
- هل من الممكن عمل الصوره كــ عنوان عن طريق الامر

كود:

<hn>

؟؟ أو كــ فقره عن طريق الامر

كود:

<p>

؟؟

و يلله عاد أبي أشوف الاجابات فالمناقشه ..
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي

الدرس السابع : اضافة الصور لصفحات الــ html

دورة تعلم لغة الـ HTML