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

الأحد يناير 20, 2013 1:06 am

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

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

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

كود PHP:
<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 طبعا

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

كود PHP:
<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>

؟؟