معهد آفاق التيسير للتعليم عن بعد - الأسئلة المتعلقة بدورة أسس (html)

صفحة 2 من 2

عرض 40 مشاركات من هذا الموضوع لكل صفحة

معهد آفاق التيسير للتعليم عن بعد (http://afaqattaiseer.net/vb/index.php)

- دورة أسس (html) (http://afaqattaiseer.net/vb/forumdisplay.php?f=652)

- - الأسئلة المتعلقة بدورة أسس (html) (http://afaqattaiseer.net/vb/showthread.php?t=19334)

سامية السلفية

9 محرم 1434هـ/22-11-2012م 06:23 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 102788)

لماذا نستخدم الوسم <map name = " ourmap " > وما الفرق بينه وبين usemap = "#ourmap"

في درس سابق تعلمنا كيف تعمل الصورة كرابط للانتقال لصفحة جديدة
الوسم <map></map>
لعمل خريطة صورية: صورة عليها مواضع فعالة
مثال: لدي صورة عليها 3 روابط تشعبية : 1- الانتقال لصفحة ويب ، 2- تشغيل ملف صوتي ، 3- تشغيل برنامج

والفرق بينهما :
name هذه خاصية موجودة تقريبا في كل الوسوم وذكرناها في دروس سابقة
هذا الوسم <map> وهنا قمنا بتعيين 3 مواضع فعالة كل موضع منها يعمل كزر للانتقال لصفحة ويب.

كود بلغة HTML:

      <map  name="imgmap">

  <area shape="rect" coords="0,0,82,126" href="1.htm" alt="hotspot1">

  <area shape="circle" coords="90,58,3" href="2.htm" alt="hotspot2">

  <area shape="circle" coords="124,58,8" href="3.htm" alt="hotspot3">

      </map>

أما usemap فهو من خصائص الوسم </ img> ويعني أن هذه الصورة عليها نقاط أو مواضع فعالة "خريطة صورية"

كود بلغة HTML:

<img src="img.gif" usemap="#imgmap">

رزقك الله العلم النافع والعمل الصالح

سلمى نصار

10 محرم 1434هـ/23-11-2012م 04:42 PM

في الدرس الثامن في أحد الأمثلة كانت قيمة size أكبر من maxlength . هل يوجد ضوابط أيهما أكبر أم لا يشترط ذلك ؟

سامية السلفية

11 محرم 1434هـ/24-11-2012م 08:09 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 102903)

في الدرس الثامن في أحد الأمثلة كانت قيمة size أكبر من maxlength . هل يوجد ضوابط أيهما أكبر أم لا يشترط ذلك ؟

حياك الله يا أختي

أولا:

size : حجم الحقل [---------------------]

إذا استخدمت وحدها بدون maxlength يمكن للمستخدم إدخال نص يتجاوز الحجم المحدد للحقل وطبعا لن يظهر النص كاملا للمستخدم

ثانيا:
إذا استخدمت مع
maxlength : أقصى طول للنص بداخل الحقل [----------------]

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

وفقك الله ورزقك العلم النافع والعلم الصالح

سلمى نصار

11 محرم 1434هـ/24-11-2012م 08:20 PM

في درس النماذج كنا نكتب الوسم input هكذا

كود بلغة HTML:

<input>

، أما في درس الفئات والهويات كتبت هكذا

كود بلغة HTML:

<input />

. أيهما نكتب به ؟

سلمى نصار

11 محرم 1434هـ/24-11-2012م 08:42 PM

هل يكتب الجزء الخاص بالهويات في الرأس head أم في المتن body ؟

سلمى نصار

11 محرم 1434هـ/24-11-2012م 08:59 PM

ما هو الوسم <span> وكيف نستخدمه ؟

سامية السلفية

12 محرم 1434هـ/25-11-2012م 02:15 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103014)

في درس النماذج كنا نكتب الوسم input هكذا

كود بلغة HTML:

<input>

، أما في درس الفئات والهويات كتبت هكذا

كود بلغة HTML:

<input />

. أيهما نكتب به ؟

بارك الله فيك..
لا فرق بينهما بالنسبة لـــHTML
تماما كما في السؤال السابق
http://www.afaqattaiseer.com/vb/show...8&postcount=40

كود بلغة HTML:

<input />

صحيح لأنه وسم أحادي الجانب
لكن أغلب المواقع التي تشرح عن وسوم html تكتب الوسم هكذا <input>

جزاك الله خيرا يا أختي

سامية السلفية

12 محرم 1434هـ/25-11-2012م 02:17 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103015)

هل يكتب الجزء الخاص بالهويات في الرأس head أم في المتن body ؟

اقتباس:

يكتب الجزء الخاص بالهويات في الرأس head

نعم يا أختي
لأنه في المتن سوف يظهر كنص عادي . والله أعلم

سامية السلفية

12 محرم 1434هـ/25-11-2012م 02:27 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103016)

ما هو الوسم <span> وكيف نستخدمه ؟

وسم محايد ...ليس له تأثير مباشر. فالتأثير يظهر عند إضافة خاصية .

أما بالنسبة للاستخدام مع الأنماط inline، مثال:

كود بلغة HTML:

<span style="color:blue">blue</span> >

وأيضا : dir ، id ، class

وهناك خصائص أخرى لكن لم ندرسها في الدورة

وفقك الله لما يحب ويرضى

سلمى نصار

13 محرم 1434هـ/26-11-2012م 07:19 PM

عذراً لم أفهم كيف تختلف الهويات عن الفئات بأنها تطبق مرة واحدة لكل مستند ؟

سامية السلفية

15 محرم 1434هـ/28-11-2012م 01:22 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103143)

عذراً لم أفهم كيف تختلف الهويات عن الفئات بأنها تطبق مرة واحدة لكل مستند ؟

حياك الله أختي جنان الفردوس

اعتذر عن التأخر في الرد

الفئات:
صحيح البخاري ، صحيح مسلم ، السنن الأربعة >>>> متون الحديث (أي : من كتب متون الحديث)
يمكن أن نقول:

الفئة class : متون الحديث

صحيح البخاري - متون الحديث
صحيح مسلم - متون الحديث
سنن أبي داود - متون الحديث
سنن الترمذي - متون الحديث
سنن النسائي - متون الحديث
سنن ابن ماجه - متون الحديث

أو فئة : كتب ابن حجر
بلوغ المرام ، نخبة الفكر ، نزهة النظر في نخبة الفكر >>> كتب للحافظ ابن حجر رحمه الله
بلوغ المرام - لابن حجر
نخبة الفكر- لابن حجر
نزهة النظر في نخبة الفكر- لابن حجر

الهوية ID :
الهوية لا تتكرر في المستند الواحد
يعنى أن :

كود بلغة HTML:

<***** id=id-1 >

لن يتكرر في المستند الواحد.
هناك وسوم استخدامها مرة واحد فقط في المستند <body> <head> <title>
هناك وسوم يتكرر إستخدامها في المستند <font> <p> <table> <embed> <hr> وغيرها

هذا مثال لوسم الخط الأفقي ، نريد أن يظهر بشكل مميز عن بقية الخطوط الأفقية في المستند.
ويمكن أن يكون ضمن فئة معينة أيضًا ويكون له هوية مميزة عن باقي عناصر الفئة.

كود بلغة HTML:

<hr id=special class=horizontal>

والهوية الواحدة يمكن أن تستخدم لعدد من المستندات.

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

هل اتضح لكي يا أختي ؟

وفقك الله ورزقك العلم النافع والعمل الصالح

سلمى نصار

16 محرم 1434هـ/29-11-2012م 11:35 AM

جزاك الله خيرا

سلمى نصار

16 محرم 1434هـ/29-11-2012م 01:57 PM

ما هو الوسم <hr> ؟

سامية السلفية

16 محرم 1434هـ/29-11-2012م 02:16 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103338)

ما هو الوسم <hr> ؟

وسم الخط الأفقي (المسطرة)

مر علينا في درس سابق

وفقك الله لما يحب ويرضى

سلمى نصار

25 محرم 1434هـ/8-12-2012م 08:30 PM

لم أفهم كيفية عمل الأزرار ؟

سلمى نصار

25 محرم 1434هـ/8-12-2012م 09:15 PM

الأمثلة عند تعويم الأقسام لم أعرف ما المراد منها طبقت الخصائص الموجودة مع الوسم style ولم ينتج أي تأثير

سامية السلفية

26 محرم 1434هـ/9-12-2012م 07:28 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103999)

الأمثلة عند تعويم الأقسام لم أعرف ما المراد منها طبقت الخصائص الموجودة مع الوسم style ولم ينتج أي تأثير

يسر الله لك .

هذا مثال. جربيه:

كود بلغة HTML:

<!DOCTYPE html>

<html>

<head>

<style>

div.container

{

width:100%;

margin:0px;

border:1px solid gray;

line-height:150%;

}

div.header,div.footer

{

padding:0.5em;

color:white;

background-color:gray;

clear:left;

}

h1.header

{

padding:0;

margin:0;

}

div.left

{

float:left;

width:160px;

margin:0;

padding:1em;

}

div.content

{

margin-left:190px;

border-left:1px solid gray;

padding:1em;

}

</style>

</head>

<body>



<div class="container">

<div class="header"><h1 class="header">القسم الأول</h1></div>

<div class="left"><p>القسم الثاني</p></div>

<div class="content">

<h2>عنوان</h2>

<p>فقرة 1</p>

<p>فقرة 2</p></div>

<div class="footer">القسم الثالث</div>

</div>



</body>

</html>

وهنا استخدام آخر للتعويم أو الطفو : على أول كلمة من الفقرة

كود بلغة HTML:

<!DOCTYPE html>

<html dir=rtl>

<head>

<style>

span

{

float:right;

width:0.7em;

font-size:400%;

font-family:algerian,courier;

line-height:80%;

}

</style>

</head>



<body>

<p>

<span>لله</span>الحمد

أحمد الله حمدا كثيرا طيبا مباركا فيه

</p>



<p>

فقرة

</p>



</body>

</html>

هذا مثال على شريط تنقل أفقي

كود بلغة HTML:

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

float:right;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:purple;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:#ff3300;}

li {display:inline;}

</style>

</head>



<body>

<ul>

<li><a href="#">الرابط 1</a></li>

<li><a href="#">الرابط 2</a></li>

<li><a href="#">الرابط 3</a></li>

<li><a href="#">الرابط 4</a></li>

</ul>



<p>

بسم الله الرحمن الرحيم



في المثال السابق تم تعويم القائمة(شريط تنقل) إلى اليسار



جربي حذف  

li {display:inline;}

  

ولا حظي الفرق 







</p>



</body>

</html>

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

وفقك الله

سامية السلفية

26 محرم 1434هـ/9-12-2012م 07:44 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جنان الفردوس (المشاركة 103996)

لم أفهم كيفية عمل الأزرار ؟

بارك الله فيك
تعرفنا في درس سابق على إنشاء قوائم وهي قوائم رأسية؛ لأنه الخيار الإفتراضي
هنا العناصر في القائمة عبارة عن روابط تشعبية

كود بلغة HTML:

<ul>

<li><a href="http://www.google.com">الرابط 1</a></li>

<li><a href="http://www.google.com">الرابط 2</a></li>

<li><a href="http://www.google.com">الرابط 3</a></li>

<li><a href="http://www.google.com">الرابط 4</a></li>

</ul>

ولعمل قائمة أفقية

كود بلغة HTML:

<style>

li {display:inline;}

</style>

</head>



<body>

<ul>

<li><a href="http://www.google.com">الرابط 1</a></li>

<li><a href="http://www.google.com">الرابط 2</a></li>

<li><a href="http://www.google.com">الرابط 3</a></li>

<li><a href="http://www.google.com">الرابط 4</a></li>

</ul>

</body>

والله الموفق

الساعة الآن 10:08 PM

صفحة 2 من 2

عرض 40 مشاركات من هذا الموضوع لكل صفحة