الدرس السابع : اضافة الصور لصفحات الــ 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>
؟؟
و يلله عاد أبي أشوف الاجابات فالمناقشه ..
و السلام عليكم و رحمة الله و بركاته
تحياتي : الوليد الراشدي
__________________
