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

DeletedUser · 9. مارس 2016

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

اليوم جيتكم بالدرس الرابع من الدورة,
طبعا الدرس هذا فيه اشياء مهمة بنحتاجها لما نتعلم الجافا سكربت,
فأرجو التركيز

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

الايدي	id
كلاس	class
صورة على شكل رابط	<a>< img/></a>
اكواد سي اس اس في راس الصفحة	<style></style>

نشرح اول ثنين مع بعض,

تعريف شخصي, يميز العنصر عن غيره من العناصر.= id
تعريف لاكثر من شي, ويعرف قروب معين ويميزه عن الباقي= class

يعني مثلا لو بعرف نفسي برمجيا بقول ,

PHP:

id = "karim"

اذا جيت بقول بأي قروب انا:

PHP:

class="sameer"

فهمنا؟ انا الحين قلت انا داخل قروب سمير, واسمي كريم.

كل اللي في قروب سمير بيكون عندهم نفس الكلاس, لكن ايدي غير.

مثال تطبيقي:

PHP:

<p id="karim" class="sameer">Mr.K a R i M.</p>

طبعا سهلة وواضحة وبنستعملها في البرمجة كثير لما نتقدم في الشروحات

الحين نيجي للنقطة اللي بعدها,

طبعا شرحت من قبل كيف تسوي رابط, من خلال

PHP:

<a href="" target="">---</a>

وشرحت كيف تسوي صورة من خلال

PHP:

<img src="" />

بس نسيت اشرح كيف تخلي الصورة , هي نفسها الرابط.

طبعا اي شي نحطه في تاغ ال "<a>" في مكان الكتابة, يعني بين التاغين, يكون هو الرابط

تطبيق:

PHP:

<a href="#" target="_blank">  <img src="___"/> </a>

ان شاء الله سهل وواضح؟

تمام

الحين ننتقل للجزء الصعب شوية من الشرح.

طبعا شرحت من قبل ان الهيكل العظمي للصفحة يتكون من:

PHP:

<html>
<head>
<title></title>
<head/>
<body>
<body/>
<html/>

الحين بنضيف داخل ال "<head>"
تاغ جديد, "<style></style>"

عشان نضيف فيه اكواد ال سي اس والتزيين

داخل التاغ هذا, بيكون بالشكل التالي:

}1
2:3;
{

مكان واحد , نحط الشي الذي نريد تزيينه, مكان 2 نحط امر التزيين, مكان ثلاثة نحط القيمة.

مثال:

لو بغينا نخلي كل ال "<p>" خطهم يكون 4 + لونهم احمر + يكونو في النص الامر بيكون كذا

PHP:

p{ 
 color : red;  
text-align : center;
  font-size : 20
}

صورة للتطبيق:
[SPOIL]

[/SPOIL]

الاوامر هذي بتتطبق على كل ال "<p>"

طيب الحين لو نريد تطبيق الاوامر فقط على عنصر واحد معين؟
نجيبه بالايدي حقه.

ايدي = #
كلاس = .

يعني مثلا ايدي كريم نطبق عليه نفس الاوامر, بيكون على الشكل هذا:

PHP:

#karim{ 
 color : red;  
text-align : center;  
font-size : 20
}

طيب لو كلاس؟

PHP:

.sameer{ 
 color : red;  
text-align : center;  
font-size : 20
}

وطبعا داخلها نستعمل نفس اوامر السي اس اس الي تعلمناها في الدرس السابق.

ان شاء الله يكون الشرح واضح.

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

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

على كل مشترك ان يقوم باحضار نفس الصفحة التي تم انشائها سابقا, ازالة اكواد التزين التي وضعناها في الدرس السابق,
وتزين الصفحة من جديد من خلال "class" و "id" لكل عنصر و تزيينه داخل تاغ ال"<style></style>"

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

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

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

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

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

DeletedUser · 9. مارس 2016

#اول مشاركة:

[SPOIL]

http://www.up-00.com/[/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>  

<center><img src='http://store1.up-00.com/2016-03/145724458738441.jpg' /> </center> 
<p id="karim">هذا ايدي</p>
<h2>هذه الصفحة ستحتوي على بعض العوالم التي لعبتها انا, <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>عالم 8</h3>  
<p>طبعا هذا العالم هو بدايتي في اللعبه, ولعبت بحساب: <br> <span>ail.com</span></p>  

<h3>عالم 10</h3>  
<p>في هذا العالم لعبت بحساب الشمالي21 بعدين دمجت مع اللاعب بروك هارد, وكملنا لقبل اخر العالم بشوي وحذفنا الحساب</p>  

<h4>عالم 21</h4>  
<p>لعبته ككوبلاير من بعد غياب طويل عن ساحب العوالم واجتياح السبيد, لعبه في بحساب كروو توب  مع طلال كخ</p>  

<h5>عالم 24</h5>  
<p>لعبت فيه بحساب دفع رباعي مع عثمان, خلصت العالم فيه</p>  

<h6>عالم32</h6>  
<p>العبه بحساب كابتاغون كوبلاير, عالم حماسي شوي</p>  

</body>  
</html>

DeletedUser37443 · 9. مارس 2016

ثاني مشاركة

كلو تمام بس التاغ id والله انلحس مخي وما فهمت فائدته غير انو يمديك تجعلو كرابط او هدف في نفس الصفحة غير هذا ما فهمت شي نفسه نفس الكود class ارجو التوضيح لو عندك شرح ابسط وتسلم

في التطبيق سويت لوحة فنية مش صفحة html بس كنت اجرب الخاصية الجديد تراها جملية
التطبيق

[SPOIL]

[/SPOIL]

PHP:

<html><head><title> الدرس الرابع مع كريم</title>     <meta charset="UTF-8">    <style>            #bilal{            font-size: 50            text-decoration: underline;            font-weight: blod}            body{background-color: darkgoldenrod}            h2{color: aqua}        h4{color: crimson}        h1{color: forestgreen}            p{color: crimson}        h3{color: aqua}        </style>    </head>    <body>        <center>            
    <img src='http://kenanaonline.com/photos/1238003/1238003056/gallery_1238003056.jpg?1304543812' ><img>                <h1>نبدة بسيطة عن مسيرتي في لعبة حرب القبائل وهذا هو رابط حسابي في المنتدى</h1>          <h1> اضغط في الصورة للمعلومات عن حسابي في المنتدى</h1>        <a href='https://forum.tribalwars.ae/member.php?37443-badah' target="_blank"> <img src='https://4.bp.blogspot.com/-Ujt-es6NsXo/Vi6QRiptAoI/AAAAAAAAA6E/uRigPIovcMI/s1600/%25D8%25A7%25D8%25B6%25D8%25BA%25D8%25B7-%25D9%2587%25D9%2586%25D8%25A7.gif'><img> </a> <br>            <p> <h4>اوقم بالضغط هنا</h4>            <a href='https://forum.tribalwars.ae/member.php?37443-badah' target='_blank'> <h2>badah</h2></a>            </p>                    <p id='badah'><h4> هذا الايدي بس لم افهم الى الان وظيفته</h4></p>      <br><p><b>انا مسيرتي باللعبة كانت نوعا ما من ناحية العوالم سيءة ان لم نقل اسوء من سيئة لعبت في مسيؤتي 4 عوالم وهي</b></p><h2>عالم 10</h2>
<h4> كان اول عالم لي باللعبة قضيت فيه كم يوم حوالي شهر ونص اي 40 يوم وفي الاخير تم الغدر بي واحتلالي واصلا كنت نوب في هذي اللعبة </h4>
<h2>عالم 24</h2>            <h4> دخلت مع عثمان في حساب الدفعر الرباعي لاكن لم اكمل لاني سحابة عوالم </h4>
<h2>عالم 25-27</h2><h4> في هذي العوالم فقط كانت للتجارة واجمع نقاط بس </h4>
<h2>جولات السبيد </h2><h4> وهي الشيء الذي اتبها بيه او لنقلك حطمت فيه اغلب الارقام حيث انني محطم 5 ارقام في موضوع قاعة كبار ملوك السبيد و يمكنك مشاهدة ذلك بالضغط  </h4><a href='https://forum.tribalwars.ae/showthread.php?87083-%D9%82%D8%A7%D8%B9%D8%A9-%D9%83%D8%A8%D8%A7%D8%B1-%D8%A7%D9%84%D9%85%D9%84%D9%88%D9%83-Speed-(%D8%A5%D9%86%D8%AC%D8%A7%D8%B2%D8%A7%D8%AA-%D8%A7%D9%84%D8%A7%D8%B9%D8%A8%D9%8A%D9%86)' target='_blank'> <h3> هنا </h3> </a> 
<h1>شكرا جزيلا لك يا كريم على الدورة خفيفة وجميلة</h1>
                        </center>    </body>
</html>

DeletedUser · 9. مارس 2016

badah قال:

ثاني مشاركة

كلو تمام بس التاغ id والله انلحس مخي وما فهمت فائدته غير انو يمديك تجعلو كرابط او هدف في نفس الصفحة غير هذا ما فهمت شي نفسه نفس الكود class ارجو التوضيح لو عندك شرح ابسط وتسلم

في التطبيق سويت لوحة فنية مش صفحة html بس كنت اجرب الخاصية الجديد تراها جملية
التطبيق

[SPOIL]

[/SPOIL]

PHP:

<html><head><title> الدرس الرابع مع كريم</title>     <meta charset="UTF-8">    <style>            #bilal{            font-size: 50            text-decoration: underline;            font-weight: blod}            body{background-color: darkgoldenrod}            h2{color: aqua}        h4{color: crimson}        h1{color: forestgreen}            p{color: crimson}        h3{color: aqua}        </style>    </head>    <body>        <center>            
    <img src='http://kenanaonline.com/photos/1238003/1238003056/gallery_1238003056.jpg?1304543812' ><img>                <h1>نبدة بسيطة عن مسيرتي في لعبة حرب القبائل وهذا هو رابط حسابي في المنتدى</h1>          <h1> اضغط في الصورة للمعلومات عن حسابي في المنتدى</h1>        <a href='https://forum.tribalwars.ae/member.php?37443-badah' target="_blank"> <img src='https://4.bp.blogspot.com/-Ujt-es6NsXo/Vi6QRiptAoI/AAAAAAAAA6E/uRigPIovcMI/s1600/%25D8%25A7%25D8%25B6%25D8%25BA%25D8%25B7-%25D9%2587%25D9%2586%25D8%25A7.gif'><img> </a> <br>            <p> <h4>اوقم بالضغط هنا</h4>            <a href='https://forum.tribalwars.ae/member.php?37443-badah' target='_blank'> <h2>badah</h2></a>            </p>                    <p id='badah'><h4> هذا الايدي بس لم افهم الى الان وظيفته</h4></p>      <br><p><b>انا مسيرتي باللعبة كانت نوعا ما من ناحية العوالم سيءة ان لم نقل اسوء من سيئة لعبت في مسيؤتي 4 عوالم وهي</b></p><h2>عالم 10</h2>
<h4> كان اول عالم لي باللعبة قضيت فيه كم يوم حوالي شهر ونص اي 40 يوم وفي الاخير تم الغدر بي واحتلالي واصلا كنت نوب في هذي اللعبة </h4>
<h2>عالم 24</h2>            <h4> دخلت مع عثمان في حساب الدفعر الرباعي لاكن لم اكمل لاني سحابة عوالم </h4>
<h2>عالم 25-27</h2><h4> في هذي العوالم فقط كانت للتجارة واجمع نقاط بس </h4>
<h2>جولات السبيد </h2><h4> وهي الشيء الذي اتبها بيه او لنقلك حطمت فيه اغلب الارقام حيث انني محطم 5 ارقام في موضوع قاعة كبار ملوك السبيد و يمكنك مشاهدة ذلك بالضغط  </h4><a href='https://forum.tribalwars.ae/showthread.php?87083-%D9%82%D8%A7%D8%B9%D8%A9-%D9%83%D8%A8%D8%A7%D8%B1-%D8%A7%D9%84%D9%85%D9%84%D9%88%D9%83-Speed-(%D8%A5%D9%86%D8%AC%D8%A7%D8%B2%D8%A7%D8%AA-%D8%A7%D9%84%D8%A7%D8%B9%D8%A8%D9%8A%D9%86)' target='_blank'> <h3> هنا </h3> </a> 
<h1>شكرا جزيلا لك يا كريم على الدورة خفيفة وجميلة</h1>
                        </center>    </body>
</html>

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

في الاتش تي ام ال تقدر تخليه يروح لهدف في نفس الصفحة مثل ماقلت و و و .

لكن في الجافا سكربت, الهدف منه بيتغير

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

DeletedUser37443 · 9. مارس 2016

اوكي بفهمها هيك افضل من لا افهمها ابدا + في اي وسيلة تواضل متواجد الان سكايب او فيسبوك او توتر او واتساب او ايما اوتانغو

DeletedUser · 9. مارس 2016

badah قال:
اوكي بفهمها هيك افضل من لا افهمها ابدا + في اي وسيلة تواضل متواجد الان سكايب او فيسبوك او توتر او واتساب او ايما اوتانغو

سكايب وفيس ههههههههه

DeletedUser · 10. مارس 2016

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

DeletedUser38421 · 10. مارس 2016

درس مفيد جداً وسهل للي فهمه متلي ^

الكود :

PHP:

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

<style>
h1
{
     color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h2
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h3
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h4
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h5
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h6
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
#mesho
{
    color: #000000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<body>
<center>
 <center><a href="https://www.tribalwars.ae/" target='_blank'><img src="ladda ned.jpg"></a></center>
<h1>Mesho <span style="color: #000099" >1</span> </h1>
<h2>Mesho <span style="color: #000099" >2</span> </h2>
<h3>Mesho <span style="color: #000099" >3</span> </h3>
<h4>Mesho <span style="color: #000099" >4</span> </h4>
<h5>Mesho <span style="color: #000099" >5</span> </h5>
<h6>Mesho <span style="color: #000099" >6</span> </h6>
<p id="mesho" > Mesho is <span style="color: #00CC00" >here</span> </p>
</body>
</head>
</html>

الصورة :

[SPOIL]

[/SPOIL]

+ ننتظر تفاعل العيال ودرس جديد *_*

DeletedUser · 11. مارس 2016

Mr. Mesho قال:

درس مفيد جداً وسهل للي فهمه متلي ^

الكود :

PHP:

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

<style>
h1
{
     color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h2
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h3
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h4
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h5
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
h6
{
    color: #CC0000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<style>
#mesho
{
    color: #000000;
     text-align: center;
     font-family:Impact,Charcoal, sans-serif;
     font-size: 20px
}
</style>

<body>
<center>
 <center><a href="https://www.tribalwars.ae/" target='_blank'><img src="ladda ned.jpg"></a></center>
<h1>Mesho <span style="color: #000099" >1</span> </h1>
<h2>Mesho <span style="color: #000099" >2</span> </h2>
<h3>Mesho <span style="color: #000099" >3</span> </h3>
<h4>Mesho <span style="color: #000099" >4</span> </h4>
<h5>Mesho <span style="color: #000099" >5</span> </h5>
<h6>Mesho <span style="color: #000099" >6</span> </h6>
<p id="mesho" > Mesho is <span style="color: #00CC00" >here</span> </p>
</body>
</head>
</html>

الصورة :

[SPOIL]

[/SPOIL]

+ ننتظر تفاعل العيال ودرس جديد *_*

اخي العزيز ميشو , تطبيقك رائع لكن فيه مشكلة صغيرة الاكواد كلها تحطها داخل تاغ '<style>' واحد ومو ضروري تفتح واحد لكل كود

DeletedUser38421 · 11. مارس 2016

اها ماكنت اعرف خخخخخـ !

المهم ياكريم عندي كم سؤال , لو بدي اغير لون الخلفية شو الرمز حقها ؟؟

ولو بغيت اسوي مسطرة بين الجملة والتانية كيف ؟؟

وشكراً

DeletedUser · 11. مارس 2016

Mr. Mesho قال:
اها ماكنت اعرف خخخخخـ !

المهم ياكريم عندي كم سؤال , لو بدي اغير لون الخلفية شو الرمز حقها ؟؟

ولو بغيت اسوي مسطرة بين الجملة والتانية كيف ؟؟

وشكراً

لو انك تشوف الكود الي انا مسويه,

كود تغغير لون الخلفية:

PHP:

body{
background-color: dddddd
}

DeletedUser20198 · 11. مارس 2016

وكود الانتر [ المسطرة ] ؟

DeletedUser · 11. مارس 2016

متاابع بصمتْ,,

انتقل لـ ـدرس التالي يابطل , 3>

DeletedUser · 1. أبريل 2016

[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>
<body background="2.png">
<center> <img src="1.png"/></center>
<p id="id">This The ID</p>
<h2>Night-Fury<a href='https://forum.tribalwars.ae/member.php?38244-night-fury' target='_balnk'>forum profile</a></h2>
<h3>مثال 1</h3>
<p>نص عادي</p>
<h4>مثال 2</h4>
<h5>مثال 3</h5>
<h6>مثال 4</h6>
<p>The last <span>EXAMPLE</span></p>
</body>
</head>
</html<

DeletedUser · 1. أبريل 2016

night-fury قال:

[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>
<body background="2.png">
<center> <img src="1.png"/></center>
<p id="id">This The ID</p>
<h2>Night-Fury<a href='https://forum.tribalwars.ae/member.php?38244-night-fury' target='_balnk'>forum profile</a></h2>
<h3>مثال 1</h3>
<p>نص عادي</p>
<h4>مثال 2</h4>
<h5>مثال 3</h5>
<h6>مثال 4</h6>
<p>The last <span>EXAMPLE</span></p>
</body>
</head>
</html<

تابع يا عزيزي

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

DeletedUser

Guest

DeletedUser

Guest

DeletedUser37443

Guest

DeletedUser

Guest

DeletedUser37443

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser38421

Guest

DeletedUser

Guest

DeletedUser38421

Guest

DeletedUser

Guest

DeletedUser20198

Guest

DeletedUser

Guest

DeletedUser

Guest

DeletedUser

Guest