[دورة برمجة السكربتات]: Html (الدرس السادس)

DeletedUser

Guest
145719834960951.png


بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

درس اليوم معقد شوي لذلك ركزو معاي .



مصطلحات بنتعلمها اليوم:

جزء من الصفحة<div>
قائمة غير مرتبة رقميا<ul>
قائمة مرتبة رقميا<ol>
عنصر في القائمة<li>
اطار<iframe>


نبدأ الشرح.



ال "<div>" هو عبارة عن تقطيع الصفحة, مثلا تخلي جزء سفلي, جزء علوي, جزء على اليمين, وجزء على اليسار
مثال:
[SPOIL] [/SPOIL]


مثل مانشوف, فيه جزء اسود تحت, فوق, وعلى اليسار.


طيب نشوف مثال من حرب القبائل:
[SPOIL] [/SPOIL]


مثل مانشوف, واحد فوق وجزء تحته اللي هو الجسم, وداخل الجسم هذا فيه اكثر من ديف.

طيب كيف نسويه؟

PHP: 
<div>
محتوى الديف هنا, والمحتوى يكون , صور, كلام, هدرز, و و و و
</div>


مثال:
PHP: 
<div style='background-color:yellow ; color:blue ; padding:20px ; width:20%' id='karim' >

<p>هذي ديف هنا</p>
</div>

صورة:-
[SPOIL] [/SPOIL]



بس, بنتعمق فيها اكثر من كذا في شروحات ال CSS


الحين كيف نسوي لست؟

فيه خيارين, يا اما لست مرقمة, 1 2 3 4 5, او غير مرقمة فقط رمز ال " * " قبل كل عنصر

نشوف اول شي المرقمة:
PHP: 
<ol>

وعشان نحط العناصر فيها نستعمل, "<li>"

PHP: 
<ol><li>هذا اول عنصر</li><li>هذا ثاني عنصر</li><li>هذا ثالث عنصر</li></ol>

صورة:-
[SPOIL] [/SPOIL]


الحين نجرب الغير مرقمة "<ul>",
[SPOIL] [/SPOIL]



من هنا, ننتقل الى اخر جزء في الشرح هذا,
تاغ ال "<iframe>"

هذا التاغ يستعمل لاظهار صفحة داخل صفحة, يعني مثلا اخلي صفحة حرب القبائل تطلع في صفحتي الشخصية,
نشوف تطبيق الحين:
PHP: 
<iframe src=' الرابط هنا '></iframe>

نجرب على, " https://www.tribalwars.ae/ "

صورة:-
[SPOIL] [/SPOIL]



وطبعا نقدر نتحكم بحجم الاطار هذا من خلال شوية اوامر ثانية, مثل :

width = عرض الاطار
length = طول الاطار
align = مكان الاطار, نص الصفحة, يسار, يمين


الى هنا وصلنا الى نهاية الدرس السادس في الدورة

- للتطبيق والمشاركة -

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


يرجى مشاركة الصورة مع الكود

ملاحظة : ارجو من اصحاب الخبرات عدم المشاركة بأكثر من المطلوب لمراعاة معنويات الناس اللي بدون خبرة.


اختم بمقولة ابو رهف, لآتقفٌ فيُ آلدورة آلحآلية بلُ قمُ بزيآرة الموقع الشهير يوتيوب للآطلاعُ علىُ كلُ مآهوُ جديد ومفيد َوقمُ بتطويرُ خبرتكُ

نقبل الاسئلة في التعاليق + سكايب: live:6kr
[ .. النهاية .. ]​

​
 

DeletedUser

Guest
# اول مشاركة

[SPOIL]
[/SPOIL]


PHP: 
<html>   
<head>   
<title></title>   
<style> 
#karim{ 
       font-size: 30; 
       text-decoration: underline; 
       font-weight:bold 
} 

body{ 
     background-color:yellow; 
} 

h2 { 
   text-align:right; 
} 

h3{ 
  text-align:center; 
  color:blue 
} 

p { 
  font-weight:bold; 
  text-align:center 
} 

h4{ 
  text-align:center; 
  color:blue 
} 

h5{ 
  text-align:center; 
  color:blue 
} 

h6{ 
   text-align:center; 
   color:blue 
} 
span { 
      color:red; 
      font-weight:bold 
} 
</style> 
</head>   
<body>   
<table style="border: 1px solid black"  >
<caption><img src='http://store1.up-00.com/2016-03/145724458738441.jpg' /> </caption>
<tr>
<td style="border: 1px solid black">
<p id="karim">هذا ايدي</p> 
</td>
<td style="border: 1px solid black">
<iframe src="https://www.tribalwars.ae/"></iframe>
</td>
</tr>
<tr>
<td style="border: 1px solid black">
<h3>عالم 8</h3>  
</td>
<td style="border: 1px solid black">
<p>طبعا هذا العالم هو بدايتي في اللعبه, ولعبت بحساب: <span>ail.com</span></p>   
</td>
</tr>
<tr>
<td style="border: 1px solid black">
<h3>عالم 10</h3>   
</td>
<td style="border: 1px solid black">
<p>في هذا العالم لعبت بحساب الشمالي21 بعدين دمجت مع اللاعب بروك هارد, وكملنا لقبل اخر العالم بشوي وحذفنا الحساب</p>   
</td>
</tr>
<tr>
<td style="border: 1px solid black">
<h4>عالم 21</h4>   
</td>
<td style="border: 1px solid black">
<p>لعبته ككوبلاير من بعد غياب طويل عن ساحب العوالم واجتياح السبيد, لعبه في بحساب كروو توب  مع طلال كخ</p>   
</td>
</tr>
<tr>
<td style="border: 1px solid black">
<h5>عالم 24</h5>   
</td>
<td style="border: 1px solid black">
<ul>
<li>انا دخلت على العالم اكثر من مرة</li>
<li>نهبت</li>
<li>وختمته</li>
</ul>   
</td>
</tr>
<tr>
<td style="border: 1px solid black">
<h6>عالم32</h6> 
</td>
<td style="border: 1px solid black">

<ol>
<li>انا هنا كوبلاير</li>
<li>انا انهب</li>
<li>انا احتل</li>
</ol>
 
</td>
</tr>
</table>
</body>   
</html>
 

DeletedUser

Guest

[SPOIL] [/SPOIL]
[SPOIL]
PHP: 
<html>
<head>

<title>Night-Fury</title>
<style>
#id{
font-size:25;
text-decoration:underline;
font-weight:bold;
}

h2{
text-align:right;
}
h3{
  text-align:center;
  color:brown
}

p {
  font-weight:bold;
  text-align:center
}

h4{
  text-align:center;
  color:red
}

h5{
  text-align:center;
  color:blue
}

h6{
   text-align:center;
   color:purple
} 
span{
color:green;
font-weight:bold
}
</style>
</head>
<div style=background-color:black;padding:20px id='id'><center style=color:white>This is the div</center></div> 
<body background="2.png">

<center>
<table style="border: 2px navy">
<captio><center> <img src="1.png"/></center></captio>
<tr>
<td style="border: 2px solid navy">
<p id="id">This The ID</p>
</td>
<td style="border: 2px solid navy">
<h2>Night-Fury<a href='https://forum.tribalwars.ae/member.php?38244-night-fury' target='_balnk'>forum profile</a></h2>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h3>مثال 1</h3>
</td>
<td style="border: 2px solid navy">
<p>نص عادي</p>
<ol><li>التجربة الاولى</li><li>التجربة الثانية</li><li>التجربة الثالثة</li></ol>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h4>مثال 2</h4>
</td>
<td style="border: 2px solid navy">
<h5>مثال 3</h5>
<ul><li>التجربة الاولى</li><li>التجربة الثانية</li><li>التجربة الثالثة</li></ul>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h6>مثال 4</h6>
</td>
<td style="border: 2px solid navy">
<p>The last <span>EXAMPLE</span></p>
</td>
</tr>
</table>
<iframe src='https://www.tribalwars.ae/'></iframe>  
</center>

</body>
<div style=background-color:black;padding:20px ><center style=color:white>^جميع الحقوق محفوظة لمنتديات حرب القبائل 2016</center></div> 
</html>
[/SPOIL]


أنا لم اعرف كيف اعدل على الاطار iframe
و لم اعرف كيف اضع صورة في الديف div

​
 

DeletedUser

Guest
night-fury قال:

[SPOIL] [/SPOIL]
[SPOIL]
PHP: 
<html>
<head>

<title>Night-Fury</title>
<style>
#id{
font-size:25;
text-decoration:underline;
font-weight:bold;
}

h2{
text-align:right;
}
h3{
  text-align:center;
  color:brown
}

p {
  font-weight:bold;
  text-align:center
}

h4{
  text-align:center;
  color:red
}

h5{
  text-align:center;
  color:blue
}

h6{
   text-align:center;
   color:purple
} 
span{
color:green;
font-weight:bold
}
</style>
</head>
<div style=background-color:black;padding:20px id='id'><center style=color:white>This is the div</center></div> 
<body background="2.png">

<center>
<table style="border: 2px navy">
<captio><center> <img src="1.png"/></center></captio>
<tr>
<td style="border: 2px solid navy">
<p id="id">This The ID</p>
</td>
<td style="border: 2px solid navy">
<h2>Night-Fury<a href='https://forum.tribalwars.ae/member.php?38244-night-fury' target='_balnk'>forum profile</a></h2>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h3>مثال 1</h3>
</td>
<td style="border: 2px solid navy">
<p>نص عادي</p>
<ol><li>التجربة الاولى</li><li>التجربة الثانية</li><li>التجربة الثالثة</li></ol>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h4>مثال 2</h4>
</td>
<td style="border: 2px solid navy">
<h5>مثال 3</h5>
<ul><li>التجربة الاولى</li><li>التجربة الثانية</li><li>التجربة الثالثة</li></ul>
</td>
</tr>
<tr>
<td style="border: 2px solid navy">
<h6>مثال 4</h6>
</td>
<td style="border: 2px solid navy">
<p>The last <span>EXAMPLE</span></p>
</td>
</tr>
</table>
<iframe src='https://www.tribalwars.ae/'></iframe>  
</center>

</body>
<div style=background-color:black;padding:20px ><center style=color:white>^جميع الحقوق محفوظة لمنتديات حرب القبائل 2016</center></div> 
</html>
[/SPOIL]


أنا لم اعرف كيف اعدل على الاطار iframe
و لم اعرف كيف اضع صورة في الديف div

​
أنقر للتوسيع...



الصورة في الديف بسيطة:

PHP: 
<div>
<img  src=''/>
</div>

بس مافهمت سؤالك بخصوص الايفريم
 

DeletedUser38421

Guest
مثلا لتكبير او تصغير اطار ال ifram

حتى انا مافهمته
 

DeletedUser

Guest
اها شكرا للتوضيح,

الخصائص نضعها داخل التاغ , مثل الصور و النصوص و و و

PHP: 
<iframe src="" width="10px" length="20px" align="center" />

كذا يعني^
 
يجب عليك تسجيل الدخول أو التسجيل للرد هنا.
أعلى