شرح دورة تعليمية في ال html مدعمة بفيديوهات من انجازي - متجدد - الصفحة 2

abdou_inf · 2015-06-06, 22:04

العفو اخي.....

abdou_inf · 2015-06-06, 22:06

عنوان الدرس: ادراج الصور - الجزء 1

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

اليكم الفيديو الخاص بالجزأ الأول...
https://www.youtube.com/watch?v=DCMxHDN65LY

الكود سورس الخاص بهذا الدرس من هنا:

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
        <head>
                <**** charset="UTF-8">
                <title>دورة تعليمية في ال HTML - ArabICT</title>
                <link rel="stylesheet" type="text/css" href="style.css">
                       
                <style type="text/css">
                </style>
        </head>
        <body>
                <h1>درس اليوم: ادراج الصور</h1>
                <img src="images/arabict.png" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>
                <br>
               
                <img src="https://img1.nawaret.com/2013/06/Lk_Arabische_Welt_001_Flaggen.jpg" alt="أنا صورة من خارج الموقع" style=" width:100px; height:100px; border: 2px solid black; float:left;">
                أنا صورة موجودة على يمين النص
        </body>

    </html>

يتبع....الجزء الثاني...

طيباوي ابو علي1 · 2015-06-07, 07:30

بنسب لـــ

تلميحات

أعتقد أن الوسم تيتل title
أقوى من الوسم ألت alt
لان الوسم ألت alt إذا كانت في البرمجة عملية دمج بين لغتين لا تظهر تلميحات الوسم ألت alt

مثلا بين php و html

كود بلغة HTML:

<img src="images/arabict.png" title="2014" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>

مارأيك

محمد بن أحمد أبو حذيفة · 2015-06-07, 07:43

بارك الله فيك

abdou_inf · 2015-06-07, 11:26

اقتباس:

المشاركة الأصلية كتبت بواسطة ben taib allaa

بنسب لـــ

تلميحات

أعتقد أن الوسم تيتل title
أقوى من الوسم ألت alt
لان الوسم ألت alt إذا كانت في البرمجة عملية دمج بين لغتين لا تظهر تلميحات الوسم ألت alt

مثلا بين php و html

كود بلغة HTML:

<img src="images/arabict.png" title="2014" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>

مارأيك

السلام عليكم
أولا بارك الله فيك على الملاحظة...لكن أود التوضيح...
ف Alt لا تستعمل عادة من أجل التلميحات (Toop tips هذا ما تقصده بكلمة تلميحات؟) و إنما هو اختصار للجملة Alternative Text يعني النص البديل...في بعض الحالات لا تظهر الصور...اذا في مكان الصورة يقوم المتصفح باظهار قيمة الخاصية alt
أما بالنسبة للخاصية title فهي تستعمل مع أغلب الوسوم في ال Html و تحمل في قيمتها نص وصفي أو أي شيء آخر، فأغلب المتصفحات تقوم باظهار Tool tip (تلميح) ، لما نقوم بتمرير الفأرة على الوسم المعني بالخاصية tlte...
أتمنى أن أكون وفقت في الشرح...

abdou_inf · 2015-06-07, 11:28

اقتباس:

المشاركة الأصلية كتبت بواسطة محمد بن أحمد أبو حذيفة

بارك الله فيك

و إياك أخي...

طيباوي ابو علي1 · 2015-06-08, 18:35

بارك الله فــــــــــــــيك

abdou_inf · 2015-06-10, 11:32

و فيك بارك الله اخي...

~~bilal1995~~ · 2015-06-15, 20:11

شكرا جزيلا لك يا غالي

abdou_inf · 2015-06-19, 05:08

السلام عليكم و رحمة الله و بركاته...
رمضانكم مبارك أولا...تقبل الله منا الصيام و القيام بمزيد من الأجر و الثواب...

عنوان الدرس: ادراج الصور - الجزء 2 - استعمال صورة كخارطة

في هذا الدرس سنكمل الجزء الثاني من كيفية ادراج الصور بالـ HTML

و اليوم سوف نرى كيف نستعمل صورة كخارطة...سنتعرف على وسمين جديدين هما:

الوسم الخاص بالتحديد الخارطة...
و الوسم الخاص بتحديد أجزاء الخارطة، يأخذ ثلاث قيم هي:

إما أن يكون دائرة Circle
أو مستطيل Rect
أو مضلّع Polygon

و للتعرف أكثر على كيفية التعامل مع هاته الوسوم، أترككم مع الفيديو التالي:
https://www.djelfa.info/watch?v=cxbiJ9JHJ0s
الكود سورس المستعمل:

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
	<head>
		<**** charset="UTF-8">
		<title>دورة تعليمية في ال HTML - ArabICT</title>
		<link rel="stylesheet" type="text/css" href="style.css">
			
		<style type="text/css">
		</style>
	</head>
	<body>
		<h1>درس اليوم: استعمال صورة كخارطة</h1>
		<img src="galaxy.gif" alt="مجرة درب التبان"  usemap="#galaxy" style="width:145px;height:126px;">
		
		<map name="galaxy">
			<area shape="rect" coords="0,0,82,126" alt="الشمس" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%B4%D9%85%D8%B3" target ="_blank"/>
			<area shape="circle" coords="90,58,3" alt="عطارد" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B1%D9%8A%D8%AE" target ="_blank">
			<area shape="circle" coords="124,58,8" alt="الزهرة" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%B2%D9%87%D8%B1%D8%A9" target ="_blank">
		</map>

		
	</body>
</html>

و من هنا لتحميل صورة الخارطة المستعملة كمثال...
دمتم سالمين...

abdou_inf · 2015-06-20, 21:08

عنوان الدرس: القوائم

في هذا الدرس سوف نتطرق الى كيفية عمل قوائم بال HTML

ففي ال HTML يوجد نوعان من القوائم:

القوائم الغير مرتبة (التى لا تهتم لترتيب العناصر)، تدرج عن طريق الوسم
القوائم المرتبة (التي تهتم لترتيب العناصر)، تدرج عن طريق الوسم

تابع الفيديو التالي لمزيد من التوضيحات:
https://www.youtube.com/watch?v=nRGGsWeb8XU
الكود سورس المستعمل في هذا الدرس:

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
	<head>
		<**** charset="UTF-8">
		<title>دورة تعليمية في ال HTML - ArabICT</title>
		<link rel="stylesheet" type="text/css" href="style.css">
			
		<style type="text/css">
		</style>
	</head>
	<body>
		<h1>درس اليوم:القوائم</h1>
		
		<ul style="list-style-type:square">
			<li>عمر</li>
			<li>أحمد</li>
			<li>خالد</li>
		</ul>
		
		<ol type="i">
			<li>عمر</li>
			<li>أحمد</li>
			<li>خالد</li>
		</ol>
			
		
	</body>
</html>

Monir MAKADIR · 2015-07-28, 15:37

شكراًً على تعبك