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

DeletedUser · 7. مارس 2016

بسم الله الرحمن الرحيم
السلام على من اتبع الهدى.

اليوم جيتكم بالشرح رقم "3" لل HTML وحنغوص في الدرس شوي في قسم CSS.

مصطلحات سيتم شرحها في الدرس:-

ميزات للتاغات	style
لون النص	color
لون الخلفية	background-color
نوع الخط	font-family
حجم الخط	font-size
مكان الخط	text-align
بولد ولا نص عادي	font-weight
تقسيم النص	<span></span>

خلينا نبدأ الشرح :-

PHP:

style=" property : value"

هذا الاتريبيوت نضعه داخل الجزء الاول من التاغ , عشان نضيف خصائص للنص اللي موجود في التاغ هذا.

مثلا, عشان نخلي النص الي موجود داخل <p> لونه احمر, نستعمل هذا الاتريبيوت + color

PHP:

<p style="color:red">هذا النص بيصير لونه احمر</p>

صورة:
[SPOIL]

[/SPOIL]

الحين نيجي للي بعده,

PHP:

style='background-color: لون معين'

طبعا هذا الامر له طريقتين استعمال, يا اما تحطه داخل تاغ معين عشان يحدد النص, يا اما تحطه في تاغ الجسم "<body><body/>"
عشان تغير اللون لخلفية الصفحة كاملة.

انا بجرب الاثنين,

صورة:
[SPOIL]

[/SPOIL]

الحين نستعمل ال :

PHP:

font-family

نستعمله عشان نغير نوع الخط الا خط جميل مثل " verdana"
لاحظو ان اسم الخط يجب ان يكون 100% صحيح كتابيا.

PHP:

style='font-family: verdana'

صورة:
[SPOIL]

[/SPOIL]

الحين نيجي نجرب "font-size", هي طبعا تغير حجم النص

PHP:

style='font-size:30'

صورة:
[SPOIL]

[/SPOIL]

الحين نجرب "text-align:" طبعا الخيارات هم, center او left او right

خلينا نجرب

PHP:

style="text-align:center"

صورة:-
[SPOIL]

[/SPOIL]

الحين ننتقل للي هو وزن النص, اللي هي تخلي النص "Bold"

PHP:

style='font-weight:bold'

صورة:
[SPOIL]

[/SPOIL]

باقي تاغ واحد لنشرحه, بس لازم نشرح شي مهم قبل التاغ.
لو نريد ان نضيف اكثر من خاصية لا نكتب "style" اكثر من مرة
بل نكتبها فقط مرة واحدة ونفصل بين كل الخصائص ب " ; "

مثال:

كود:

[SIZE=4][FONT=times new roman]style=[SIZE=5][COLOR=#ff0000]"[/COLOR][/SIZE] font-weight:bold [COLOR=#ff0000][SIZE=5];[/SIZE][/COLOR] font-size:30 [COLOR=#ff0000][SIZE=5];[/SIZE][/COLOR] color: green [SIZE=5][COLOR=#ff0000]"[/COLOR][/SIZE]
[/FONT][/SIZE]

طيب الحين قول مثلا جملة:
- انا اسمي مستر كريم

نريد ان تكون الجملة باللون الاسود, الا كلمة مستر كريم فتكون بالاحمر ونجعلها بولد, ماذا نفعل؟

هنا نستعمل تاغ ال "<span>", وظيفة التاغ هذا هو مثل شق جزء من الجملة عن الباقي وتطبيق بعض الاوامر عليه وحده

طريقة العمل:

PHP:

<p style="color:black"> انا اسمي <span style="color:red ; font-weight:bold"> مستر كريم</span> </p>

صورة:
[SPOIL]

[/SPOIL]

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

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

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

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

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

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

نقبل الاسئلة في التعاليق + سكايب: live:6kr

[ .. النهاية .. ]

DeletedUser · 7. مارس 2016

# اول مشاركة:

[SPOIL]

http://www.up-00.com/[/SPOIL]

الكود:

PHP:

<html> 
<head> 
<title></title> 
</head> 
<body style='background-color:yellow'> 

<center><img src='http://store1.up-00.com/2016-03/145724458738441.jpg' /> </center>
<h2 style='text-align:right'>هذه الصفحة ستحتوي على بعض العوالم التي لعبتها انا, <a href='https://forum.tribalwars.ae/member.php?39112-*Mr-K-a-R-i-M-*' target='_blank'>Mr.K a R i M.</a>.</h2> 
<br> 
<h3 style='text-align:center;color:blue'>عالم 8</h3> 
<p style='font-weight:bold;text-align:center'>طبعا هذا العالم هو بدايتي في اللعبه, ولعبت بحساب: <br> <span style='color:red;font-weight:bold'>ail.com</span></p> 

<h3 style='text-align:center;color:blue' >عالم 10</h3> 
<p style='font-weight:bold;text-align:center'>في هذا العالم لعبت بحساب الشمالي21 بعدين دمجت مع اللاعب بروك هارد, وكملنا لقبل اخر العالم بشوي وحذفنا الحساب</p> 

<h4 style='text-align:center;color:blue' >عالم 21</h4> 
<p style='font-weight:bold;text-align:center'>لعبته ككوبلاير من بعد غياب طويل عن ساحب العوالم واجتياح السبيد, لعبه في بحساب كروو توب  مع طلال كخ</p> 

<h5 style='text-align:center;color:blue' >عالم 24</h5> 
<p style='font-weight:bold;text-align:center'>لعبت فيه بحساب دفع رباعي مع عثمان, خلصت العالم فيه</p> 

<h6 style='text-align:center;color:blue' >عالم32</h6> 
<p style='font-weight:bold;text-align:center'>العبه بحساب كابتاغون كوبلاير, عالم حماسي شوي</p> 

</body> 
</html>

DeletedUser38664 · 7. مارس 2016

راح احط نفس تطبيقي السابق لانه في خصائص هذا الدرس

لكن هذه المرة مع الكود ....

HTML:

<html>
<head>
<title>Signor Josaf</title>
</head>
<body background="5.jpg"> 
<Center>
<font size='5' color='red'> 
<h1>Signor Josaf معلومات عن العضو </h1></font>
<font size='5' color='teal'>
<h2> : الرمزية</h2><img src='10.jpg'><h2> : البلد</h2>
<img src='algeria.png'><h2> : المنصب </h2><img src='t.png'</font>
</CENTER>
</body>
</html>

الكود ابسط ما يكون

اي استفسار انا بالخدمة

DeletedUser · 7. مارس 2016

شرحفي قمة الروعه
+

كريم لو تعدل على الصور لأنها مو شغاله عشان يتضح لنا الامر اكثر

وماتقصر يا ذيب

شو واجيب لك الكود حقي باذن الله

DeletedUser · 7. مارس 2016

هذا الي سويته حتى الان

لمشاهدة الصوره إضغط هنا

PHP:

<html>
<head>
<title>www.Abu_Rajih.com</title>
</head>
<body background='http://pre07.deviantart.net/931f/th/pre/i/2012/270/c/e/roronoa_zorro_by_felkuro-d5g2lqv.jpg'>
<h2 style="color:yellow;text-align:center">بسم الله الرحمن الرحيم<span  style="color:Red;text-align:center;">أسعد الله صباحكم بكل خير (فيس مطلع لسانه)</h1></span></h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style='color:Green;font-family: verdana;font-size:72;font-weight:bold;text-align:left;
'>You Are My Love</p>


</body>
</html>

DeletedUser · 7. مارس 2016

كلوو زي العسل ,,

ننتظر البدأ في الدرس الرابع ,,

DeletedUser · 7. مارس 2016

Abu.Rajih قال:
شرحفي قمة الروعه
+

كريم لو تعدل على الصور لأنها مو شغاله عشان يتضح لنا الامر اكثر

وماتقصر يا ذيب

شو واجيب لك الكود حقي باذن الله

الصور شغالة قلبي ابو راجح...

DeletedUser38421 · 8. مارس 2016

كان درس رائع !

الصورة :

PHP:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>Mesho</title>
<body>
<center>
<img src="http://www5.0zz0.com/2016/03/06/19/988719299.jpeg"/>  </center>
<h1 style="color: #CC0000;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 20px">Mesho 1</h1>
<h2 style="color: #26CC29;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 19px;font-weight:bold">Mesho 2</h2>
<h3 style="color: #2F9BCC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 18px;font-weight:bold">Mesho 3</h3>
<h4 style="color: #4533CC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 19px;font-weight:bold">Mesho 4</h4>
<h5 style="color: #BC3BCC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 21px;font-weight:bold">Mesho 5</h5>
<h6 style="color: #CC1C5D;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 25px;font-weight:bold">Mesho 6</h6>
<p style="background-color: #CCCC1C;text-align:center;font-family:Impact, Charcoal, sans-serif;font-size: 26xp;font-weight: bold" >Mesho is <span style="color: #FF0066">here !</span></p>
<center> <a href="https://www.tribalwars.ae/" target='_blank'>Tribal Wars !</a>  </center>
</body>
</head>
</html>

ننتظر تفاعل الاعضاء , والدروس القادمة , شكراً حبي

DeletedUser · 8. مارس 2016

Mr. Mesho قال:

كان درس رائع !

الصورة :

PHP:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>Mesho</title>
<body>
<center>
<img src="http://www5.0zz0.com/2016/03/06/19/988719299.jpeg"/>  </center>
<h1 style="color: #CC0000;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 20px">Mesho 1</h1>
<h2 style="color: #26CC29;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 19px;font-weight:bold">Mesho 2</h2>
<h3 style="color: #2F9BCC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 18px;font-weight:bold">Mesho 3</h3>
<h4 style="color: #4533CC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 19px;font-weight:bold">Mesho 4</h4>
<h5 style="color: #BC3BCC;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 21px;font-weight:bold">Mesho 5</h5>
<h6 style="color: #CC1C5D;text-align: center;font-family:Impact, Charcoal, sans-serif;font-size: 25px;font-weight:bold">Mesho 6</h6>
<p style="background-color: #CCCC1C;text-align:center;font-family:Impact, Charcoal, sans-serif;font-size: 26xp;font-weight: bold" >Mesho is <span style="color: #FF0066">here !</span></p>
<center> <a href="https://www.tribalwars.ae/" target='_blank'>Tribal Wars !</a>  </center>
</body>
</head>
</html>

ننتظر تفاعل الاعضاء , والدروس القادمة , شكراً حبي

ميشو,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

هذي تحطها داخل تاغ ال "<head>"

DeletedUser38421 · 8. مارس 2016

*Mr.K a R i M.* قال:
ميشو,

هذي تحطها داخل تاغ ال "<head>"

الموضوع بسيط ، ركب كود الميتا الخاص بترميز اللغة العربية في الرأس :

كود PHP:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

هيك قلي مهنا مدري

DeletedUser · 8. مارس 2016

Mr. Mesho قال:
هيك قلي مهنا مدري

في الرأس = <head>

DeletedUser · 8. مارس 2016

وحدة من اثنين

يا اما نص المشاركين سحبو من اولها *_*

يا اما يتعلمون بصمت

وين المشاركات يا شباب

DeletedUser · 9. مارس 2016

انا اتعلم بصمت صراحه

مش داخله مخي احاول استوعب اشياء

DeletedUser · 9. مارس 2016

SHBL قال:
انا اتعلم بصمت صراحه

مش داخله مخي احاول استوعب اشياء

تمام
طيب دامها مو داخله مخك ليه ما تسأل -_-

DeletedUser · 9. مارس 2016

*Mr.K a R i M.* قال:
تمام
طيب دامها مو داخله مخك ليه ما تسأل -_-

ماني عارف كيف اسال

DeletedUser · 9. مارس 2016

SHBL قال:
ماني عارف كيف اسال

انت ضايفني سكايب + تقدر تسأل هنا

DeletedUser · 9. مارس 2016

مشكله معطيك حظر في سكايب + وقت استوعب اشياء باسالك

DeletedUser36856 · 9. مارس 2016

انا اتعلم بصمت هههه

DeletedUser36856 · 9. مارس 2016

http://prntscr.com/acyowy

DeletedUser · 31. مارس 2016

[SPOIL]

[/SPOIL]

PHP:

<html>
<head>
<title>Night-Fury</title>
</head>

<body background="1.png"> 
<center>
<img src='https://media.innogamescdn.com/com_DS_AE/header_ae.png'/>
<h1 style="color: navy ">بسم الله الرحمان الرحيم</h1>
<br>
<p>This is<span style="font-family: verdana;font-weight:bold;color:teal"> Night-Fury</span></p>
<br>
<h3 style='background-color: #8B4513' >لزيارة ملفي الشخصي في المنتدى تفضل بالضغط,<a href='https://forum.tribalwars.ae/member.php?38244-night-fury'target='_blank'><h3>هنا</h3></a></h3>
<br>
<h3>لزيارة اللعبة  </h3>
<a href='https://www.tribalwars.ae/' target='_blank'> اللعبة </a>
<h3>صفحة اللعبة على الفيس بوك</h3>
<a href='https://www.facebook.com/tribalswar' target='_blank'> facebook </a>
<h3>منتدى اللعبة</h3>

<a href='https://forum.tribalwars.ae/forum.php' target='_blank'> المنتدى </a>
</center>
</body>
</html>

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

DeletedUser

Guest

DeletedUser

Guest

DeletedUser38664

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser38421

Guest

DeletedUser

Guest

DeletedUser38421

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser36856

Guest

DeletedUser36856

Guest

DeletedUser

Guest