مدونة بوابة العلم : برمجة الويب

‏إظهار الرسائل ذات التسميات برمجة الويب. إظهار كافة الرسائل

اعلان دورة css

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: right;">
<b style="color: #073763; font-family: Arial, Helvetica, sans-serif; font-size: x-large;">السلام عليكم </b></div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">نود اعلامكم زوارنا الكرام بأن دورة css 3 سنبدئها عما قريب قد تتسائلون لمدا قد نبدأ دورة هناك الاف النسخ المسبقة عنها في الويب العربي و الاجنبي عامة ...</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVze0qzAeirOUDPWNAvH7FRgn71uUq05Ah6fm0DTmfjISI0aJRfWMg2VtPn-I33RdDAVRwbeIBHvnbF3Edbq-aN2cctBaU6dbUpPjKtZgbx4YjBMwUzQ85RxukIpCv2NY1sQ_qVe3zDo/s1600/css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVze0qzAeirOUDPWNAvH7FRgn71uUq05Ah6fm0DTmfjISI0aJRfWMg2VtPn-I33RdDAVRwbeIBHvnbF3Edbq-aN2cctBaU6dbUpPjKtZgbx4YjBMwUzQ85RxukIpCv2NY1sQ_qVe3zDo/s320/css.jpg" width="320" /></a></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></span></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">دعوني اخبركم بأننا هنا في مدونتكم بوابة العلم لدينا اسلوب خاص في الشرح متميز بسيط لكل من يريد الدخول في هدا العالم الافتراضي من اوسع ابوابه لدلك يمكنكم الاعتماد علينا في توفير سلسلة كاملة في دروس قليلة مبسطة و مضغوطة بشكل يجعل التعلم معنا اسهل </span>..</span>.<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">سنعمل نحن افراد طاقم عمل المدونة على توفير السلسلة في اقرب وقت و ستكون مكتوبة و على شكل فيديو لان هناك من يعانون الصبيب الضعيف ولا يتمكنون من متابعة الفيديوهات ...</span></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">ادا لم تكن قد درست مسبقا دورة html خاصتنا يمكنك الاطلاع عليها عبر <a href="http://bawabat-al3ilm.blogspot.com/search/label/html">الضغط هنا </a></span></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">واخيرا نتمنى ان تكون الدورة في مستوى تطلعاتكم.</span></div>
<div dir="rtl" style="text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">شكرا على وقتكم زوارنا الكرام .</span></div>
</div>

اعلان دورة css

السلام عليكم نود اعلامكم زوارنا الكرام بأن دورة css 3 سنبدئها عما قريب قد تتسائلون لمدا قد نبدأ دورة هناك الاف النسخ المسبقة عنها في ...

مزيد من المعلومات »

4:35 م

المعايير القياسية

<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<span style="color: #666666; font-size: large;"><b>السلام عليكم و رحمة الله تعالى و بركاته</b></span></div>
<div>
<div style="text-align: center;">
<span style="color: #666666; font-size: large;"><b>وبعد</b></span></div>
</div>
<div style="text-align: start;">
<b><span style="color: blue; font-size: large;">كنا قد تحدثنا في الدرس السابق عن كيفية ادراج أومر أو خصائص css داخل ملف html ... و بهذا نكون قد انتهينا من html لكن قررت اضافة هذا الدرس لفك شيء من الغموض بشأن ما تراه لذا المبرمجين من و سوم في بداية صفحة ال html تلك الوسوم تسمى بالمعيار القياسي للغة html و تعود هذه الوسوم الى محاولات<span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;">  منظمة <a dir="ltr" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> </span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;"> لإنشاء معيار قياسي موحد للغة HTML</span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;"> التي </span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;"> </span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;">أنشأها تيم برنرز لي ...</span></span></b></div>
<div style="text-align: start;">
<span style="background-color: white; color: blue; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: large;"><b>ما فائدته ؟ :</b></span></div>
<div style="text-align: start;">
<span style="background-color: white; color: blue; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: large;"><b>المعيار القياسي لصفحة ال html يخبر المتصفح عن أي نسخة تستخذم ... و يمكنك استعمال هذا المعيار القياسي الشائع ..</b></span></div>
<div style="text-align: start;">
</div>
<div style="text-align: start;">
<span style="color: blue;"><span style="font-family: sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif;"></span><br /></span>
<div>
<span style="color: blue; font-family: sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif;">                                           </span></div>
</div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650" style="color: blue;"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
 <title>Title</title>
 </head>

</html>
</pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<span style="color: blue;"><br /></span>
<span style="color: blue;"><br /></span>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">
<span style="color: blue; font-size: large;"><b>إلى جانب تعريف الصفحة - السطر الأول في المثال أعلاه - فأن تحتاج أيضاً إلى إخبار المتصفح بأنك تريد كتابة XHTML، لذلك فأنت بحاجة إلى إضافة المزيد من المعلومات لوسم html، باستخدام الخاصية <code>xmlns</code> و<code>lang</code>.</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">
<span style="color: blue; font-size: large;"><b><code>xmlns</code> هي اختصار "XML-Name-Space" ويجب دائماً أن تحوي هذه القيمة:http://www.w3.org/1999/xhtml، هذا كل ما تحتاج لمعرفته، لكن إن كنت تتوق لمعرفة المزيد من يمكنك أن تقرأ حول هذا الموضوع في موقع <a href="http://www.w3.org/TR/1999/REC-xml-names-19990114/">W3C</a></b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">
<span style="color: blue; font-size: large;"><b>.في خاصية <code>lang</code> أنت توضح أي لغة كتبت بها الوثيقة، لهذا <a href="http://www.w3.org/WAI/ER/IG/ert/iso639.htm#2letter">المعايير ISO 639</a> تستخدم، وهي قائمة برموز كل اللغات في العالم، في المثال أعلاه استخدامنا اللغة الإنجليزية "en".</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">
<span style="color: blue; font-size: large;"><b>باستخدام تعريف الصفحة "DTD" يمكن للمتصفح أن يعرف بالضبط كيف يقرأ صفحتك ويعرض ما كتبته، لذلك استخدم المثال أعلاه كقالب لكل صفحات HTML التي ستنشئها في المستقبل.</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">
</div>
<h2>
<span style="color: blue; font-size: large;">بئمكانك تصحيح أخطاء صفحتك البرمجية :</span></h2>
<b><span style="color: blue; font-size: large;">قم بإدخال تعريف الصفحة إلى صفحات موقعك دائماً ويمكنك أن تتأكد من أن صفحاتك خالية من الأخطاء باستخدام خدمة<a href="http://validator.w3.org/">W3C's validator</a> المجانية.</span></b><br />
<b><span style="color: #3d85c6; font-size: large;"><br /></span></b>
<b><span style="color: red; font-size: large;">اذا نجحت في تطبيق هذه الدروس : </span></b><br />
<a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>+الدرس الأول ما هي : html.</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/blog-post_22.html" style="color: #1c4779; display: inline !important; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b><br />الدرس الثاني: العناصر و الوسوم +انشاء موقع</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>+</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/blog-post_24.html" style="color: #1c4779; display: inline !important; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>الدرس الثالث : خلاصة المتوصل عليه</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>+</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/216-html.html" style="color: #005fdc; display: inline !important; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>كود 216 لون html</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>+</b></span></a><span style="color: blue; font-size: large;"><b><a href="http://bawabat-al3ilm.blogspot.com/2013/03/blog-post_30.html" style="color: #1c4779; display: inline !important; outline: none; text-decoration: none;">الدرس الثالث : الخصائص</a> (2)</b></span><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>+</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/04/blog-post.html" style="color: #1c4779; display: inline !important; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b>الدرس الرابع: الروابط</b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;"><b><br /></b></span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"></a><br />
<div class="inline-ad" style="font-family: Arial, Verdana; line-height: normal;">
<a href="http://bawabat-al3ilm.blogspot.com/2013/03/html.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; line-height: 24px; outline: none; text-decoration: none;"></a></div>
<div class="wrapfullpost" style="font-family: Arial, Verdana; line-height: normal;">
<div class="post hentry" style="border-bottom-color: rgb(166, 190, 215); border-bottom-style: solid; border-bottom-width: 0px; margin-bottom: 15px; padding: 0px;">
<span style="color: blue; font-size: large;"><b><a href="http://www.blogger.com/blogger.g?blogID=4508881616468163959" name="2113136306696330033"></a></b></span><br />
<h3 class="post-title entry-title" style="font-family: Arial, Helvetica, sans-serif; line-height: 24px; margin: 0px 0px 10px; padding: 0px;">
<a href="http://bawabat-al3ilm.blogspot.com/2013/04/blog-post_8.html" style="display: block; outline: none; text-decoration: none;"><span style="color: blue; font-size: large;">الدرس الخامس : الصور</span></a></h3>
</div>
</div>
<a href="http://bawabat-al3ilm.blogspot.com/2013/04/css.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 24px; outline: none; text-align: start; text-decoration: none;"><span style="color: blue;">الدرس السادس : التصميم css</span></a><a href="http://bawabat-al3ilm.blogspot.com/2013/04/css.html" style="background-color: #f9fcff; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 24px; outline: none; text-align: start; text-decoration: none;"><span style="color: blue;">فانك الان مبرمج html و مستعد لتطبيق مشروعنا الرسمي الأول في خطواتك نحو البرمجة ...</span></a><br />
<br /></div>

المعايير القياسية

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

مزيد من المعلومات »

10:42 ص

الدرس السادس : التصميم css

</head>
<body>
 <h1>اسم الموقع</h1>
 <h2> أنشئهاcss مرحبا بكم في أول صفحة</h2>
 <p>cssهنا تطهر خصائص</p>
 </body>

</html><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"></pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">في المثال أعلاه </span><strong style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">وضعت في رأس الصفحة، ولذلك يمكن تطبيقها في الصفحة كاملة</strong><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">، لفعل ذلك عليك فقط أن تضع الوسم</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><code dir="ltr" style="background-color: white; text-align: start;"><span style="color: #8e7cc3;"><style type="text/css"></span></code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> الذي يخبر المتصفح بأنك تستخدم CSS.</span></span><br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">; و هنا تجد بعض الخصائص العامة لصفحتك ...</span><br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">ستفيدك</span><br />
<br /></div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><p style="color:green;">نص أخضر</p>

<h1 style="background-color: blue;">أعلى الصفحة باللون الأزرق</h1>

<body style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht332nq2CrGP2CXfq0PN0R-Ygbr235qXbrpsDkAHvzJL7DVaiVhU1xRFdfdTt-5W8eMf88Yf3MmuzCUHVp5p2ddslPy9SwYoc-YaUedhfmowqI_f2IWZ5Mpv2EsmDFo0-7pzU0EnB3lQk/s798/aaa.jpg');"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"></pre>
</span></pre>
<pre style="color: maroon; text-align: start;"><code><p <strong style="color: #cc0000;">style="padding:25px;border:1px solid red;">هذا النص سيكون داخل اطار أحمر من نوع solid وعرضه1px</strong></p></code></pre>
</span></pre>
<pre style="color: maroon; text-align: start;"><img src="مسار الصورة" alt="الاسم الذي اخترته" <strong style="color: #cc0000;">style="position:absolute;bottom:الاحداثية من الأسفل الى الاعلىpx;right:من اليوين الى اليسارpx;"</strong> /></pre>
</span></pre>
</div>
<br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">لا يمكنك تعلم CSS في عشر دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم المزيد بنفسك في دروس CSS.</span><br />
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">ولكن الان لنركز على html في الدرس اللاحق لنتعلم كيفية وضع الموقع في الشبكة لا تنسى اذا كان هذا أول درس تقرأه فبامكانك قراءة الدروس السابقة لانشاء الشروع الأول ....</span></div>
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div style="text-align: start;">
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">لا تنسى ترك تعليق</span><span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"> فكلمة شكر تكفيني في حال ما اذا استفدت و اذا نسيت ذكر شيء بامكانك اخباري و شكرا ...</span><br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div style="text-align: start;">
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">المصدر مدونة بوابة العلم</span></div>
<br /></div>

الدرس السادس : التصميم css

السلام عليكم في الدرس السادس من دورة برمجة الويب على مدونة بوابة العلم أولا أود الاعتذار عن غيابي و تأخري في طرح المواضيع ... ذلك...

مزيد من المعلومات »

6:49 ص

الدرس الخامس : الصور

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<span style="color: blue; font-size: large;"><b>الدرس الخامس : الصور</b></span></div>
<div>
<br /></div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>السلام عليكم و رحمة الله تعالى و بركاته في موضيع جديد لمدونة بوابة العلم </b></span><div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>ان شاء الله سنتعرف من خلاله على كيفية دمج الصور داخل الموقع و هدا طبعا أساسي في مشروعنا ضمن دورة برمجة الويب</b></span></div>
<div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><br /></b></span></div>
<div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>نبدأ بحول الله :</b></span></div>
<div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>العنصر أو الوسم الدي نحتاجه هو كالاتي :</b></span></div>
<div>
<pre style="text-align: start;"><h3 style="text-align: right;">
<code style="background-color: yellow;"><img src="the name of picture+extention" alt="the name on page" /></code></h3>
</pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>حاول فهم الجمل بالانجليزية لم أضعها بالعربية تجنبا للتشوه الجملة ههه</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>مكان the name of picture+extention نضع اسم الصورة ادا كانت مع مشروعك في نفس الملف أو تضع مسارها ادا لم تكن في نفس الملف ادا واجهتك مشكلة ضعها في تعليق ...</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>
</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>لدينا src اختصار ل source أي المصدر لا تنسى الامتداد ...</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>
</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>يمكنك استعمال جميع الامتدادات و اضافتها لمشروعك ... </b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>مثلا :</b></span></pre>
<pre style="text-align: start;"><span style="color: #3d85c6; font-size: large;"><b>
</b></span></pre>
<pre style="text-align: start;"><ul style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<li dir="ltr" style="padding-top: 0.25em;"><span style="color: #3d85c6; font-size: large;"><b>GIF (Graphics Interchange Format)</b></span></li>
<li dir="ltr" style="padding-top: 0.25em;"><span style="color: #3d85c6; font-size: large;"><b>JPG / JPEG (Joint Photographic Experts Group)</b></span></li>
<li dir="ltr" style="padding-top: 0.25em;"><span style="color: #3d85c6; font-size: large;"><b>PNG (Portable Network Graphics)</b></span></li>
</ul>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>بالمناسبة صور جيف يمكنها أن تكون متحركة أي عادة ما تستعمل في الاعلانات و الدعايات لاثارة الانتباه سنتطرق اليها في دورة الفوتوشوب ...</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>
</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>الى هنا ينتهي الدرس و نكون على مشارف الانتهاء من html ... </b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: #3d85c6; font-size: large;"><b>ترقبوا المزيد من الدروس في الأيام القادمة  لأننا في دروس css لن نتجاوز يومان على الأكثر ...</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: red; font-size: large;"><b>لا تنسى و ضع تعليق ...</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="font-size: large;"><b>
</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; white-space: normal;">
<span style="color: blue; font-size: large;"><b>المصدر مدونة بوابة العلم ... استفد معنا ...</b></span></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; white-space: normal;">
</div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; white-space: normal;">
</div>
</pre>
<pre style="text-align: start;">
</pre>
</div>
</div>

الدرس الخامس : الصور

الدرس الخامس : الصور السلام عليكم و رحمة الله تعالى و بركاته في موضيع جديد لمدونة بوابة العلم ان شاء الله سنتعرف من خلاله على كيفية د...

مزيد من المعلومات »

2:46 م

الدرس الرابع: الروابط

<head>
<title>موقعي الأول</title>
</head>

<body>

<p><a  href=" #heading1">link to heading1</a></p>
<p><a href=" #heading2">link to heading2</a></p>

<h1 id="heading1">heading1</h1>
<h1 id="heading2">heading2</h1>

</body>

</html>
</span></pre>
</div>
<br />
<b><span style="color: #3d85c6; font-size: large;">للاشار فقط يمكنك و ضع مكان الرابط أو الصفحة أي موقع تريد </span></b><br />
<b><span style="color: #3d85c6; font-size: large;">مثال </span></b><br />
<b><span style="color: #3d85c6; font-size: large;">للتواصل بالرسائل نضع </span></b><br />
<br />
<pre style="text-align: start;"><pre><code><b><span style="color: #3d85c6; font-size: large;"><a href="mailto:here e-mail">Send an e-mail </a></span></b></code></pre>
<pre><code><b><span style="color: #3d85c6; font-size: large;">
</span></b></code></pre>
<pre><code><b><span style="color: #3d85c6; font-size: large;">و الى  هنا ينتهي الشرح ان واجهتك</span></b></code></pre>
<pre><code><b><span style="color: #cc0000; font-size: large;">مشكلة اذكرها في تعليق ... لا تنسى ذكر انطباعك من الدورة ... </span></b></code></pre>
<pre><code><b><span style="color: blue; font-size: large;">عن مدونة بوابة العلم ... استفادة بلا حدود</span></b></code></pre>
</pre>
<br />
<br /></div>

الدرس الرابع: الروابط

الروابط السلام عليكم و رحمة الله تعالى و بركاته درس اليوم في دورة html حول الروابط و هذا الدرس يستدعي قليلا من التركيز ...

مزيد من المعلومات »

3:21 م

الدرس الثالث : الخصائص

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<h2>
<b><span style="color: red; font-size: x-large;">الدرس الثالث : الخصائص</span></b></h2>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: right;">
<h3 style="text-align: right;">
<span style="color: #999999; font-size: large;"><b>السلام عليكم و رحمة الله في درس جديد من دورة html , أولا أعتذر لكم عن غيابي هذه المدة بسبب الدراسة ... </b><b>في هذا الدرس ان شاء الله سنتعرف على وسوم الضرور من اجل تهيئة الصفحة و كما تعلمون أكواد html لا تذخل في ديكور الصفحة</b><b>و بالتالي فنحن محتاجون الى لغة أخرى و التي تتمثل في "css" و ما دمنا في لا نزال في html فهذه مناسبة لأخذ فكرة عن القادم ...</b><b><br /></b><b>أولا : نبدأ بالخصائص:</b><b>كتوضيح أولي هي تهيئة الصفحة مثلا وسم </br> الذي يأمر المتصفح بالانتقال الى سطر جديد ...لاظ الفرق بينه و بين  هذا الوسم أسفله :</b></span></h3>
</div>
<div style="text-align: right;">
<br /></div>
</div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><pre style="color: maroon;"><code><h2 style="background-color:#ff0000;">أنا الان مبرمج ويب</h2></code></pre>
</pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
<h3 style="text-align: right;">
<b><span style="color: #e06666;"><span style="text-align: left;">   </span><span style="text-align: left;">هذه الأخيرة تعد ضمن الخصائص  style="background-color:#ff0000;" </span> طبعا الفرق هو    </span></b></h3>
</div>
<div style="text-align: right;">
<h3 style="text-align: left;">
<div style="text-align: right;">
<span style="color: #3d85c6; font-size: large;"><br /></span></div>
<span style="font-size: large;"><div style="text-align: right;">
<b style="color: #3d85c6;">ثم تتبعها القيمة و هي على مستوى الخلفية "style" و هي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية الخاصية </b></div>
<b><div style="text-align: right;">
<b><span style="color: #3d85c6;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">.</span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> بعدها كود اللون للمعاينة قمت بتجميع 216 كود لون </span><a href="http://bawabat-al3ilm.blogspot.com/2013/03/216-html.html" style="font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;" target="_blank">اضغط هنا للانتقال الى الموضوع الخاص بالألوان</a></span></b></div>
</b><b><div style="text-align: right;">
<b><span style="color: #3d85c6;">هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن </span></b></div>
</b><b><div style="text-align: right;">
<b><span style="color: #3d85c6;">إضافة لون خلفي للصفحة:</span></b></div>
</b></span></h3>
</div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
<br /></div>
</div>
<pre class="alt2" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; text-align: left; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><html></pre>
<pre class="code"></pre>
<pre class="code"></pre>
<pre class="code"><head></head></pre>
<pre class="code"></pre>
<pre class="code"></pre>
<pre class="code"><body style="background-color:#ff0000;"></body></pre>
<pre class="code"></pre>
<pre class="code"></html></pre>
</span></pre>
</span></pre>
<span style="color: #3d85c6; font-size: large;">
</span></span></pre>
</div>
<h3 style="text-align: left;">
<div style="text-align: right;">
<span style="color: #3d85c6; font-size: large;"><br /></span></div>
<span style="color: #3d85c6; font-size: large;"><div style="text-align: right;">
<b>  بكود اللون الذي تريده  <a href="http://bawabat-al3ilm.blogspot.com/2013/03/216-html.html" target="_blank">من هنا تختار الكود</a>#ff0000 و يمكنك تغييره كما ذكرنا سابقا بتغيير   </b></div>
<b><div style="text-align: right;">
<b>و تتوفر امكانية استخذام أسماء الألوان بالانجليزية </b></div>
</b></span></h3>
<div style="text-align: right;">
<br /></div>
</div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><body style="background-color: red;">

</pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<br />
<br />
<h3 style="text-align: right;">
<span style="color: orange; font-size: large;">صورة توضيحية لمكونات الخصائص </span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNG-eY_UrYU37_Sas-Tdije1O7pvxfUM5QyG4Q0EHaKFKdNlO6hH8hgdM9mBx0l6t7Oy3r10tDfRKckN0H5pI3IFjptvjrVDZruH3oulUwegd9Vm9NMIS46_Dg48ZHHsnDuXx1IinmPKw6/s1600/element.ar+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNG-eY_UrYU37_Sas-Tdije1O7pvxfUM5QyG4Q0EHaKFKdNlO6hH8hgdM9mBx0l6t7Oy3r10tDfRKckN0H5pI3IFjptvjrVDZruH3oulUwegd9Vm9NMIS46_Dg48ZHHsnDuXx1IinmPKw6/s640/element.ar+(1).png" width="640" /></a></div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
<b style="color: #3d85c6; font-size: x-large;"> ...</b><b style="color: #3d85c6; font-size: x-large;">عن مدونة بوابة العلم </b></div>
<div style="text-align: right;">
<b style="color: #3d85c6; font-size: x-large;"><br /></b></div>
<div style="text-align: right;">
<br /></div>
</div>

الدرس الثالث : الخصائص

الدرس الثالث : الخصائص السلام عليكم و رحمة الله في درس جديد من دورة html , أولا أعتذر لكم عن غيابي هذه المدة بسبب الدراسة ......

مزيد من المعلومات »

6:31 ص

كود 216 لون html

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: right;">
<br /></div>
<div id="tutorials">
<h1 style="text-align: right;">
216 لون</h1>
<table style="text-align: right;">
 <tbody>
<tr>
 <td style="background: #ffffff; padding: 5px;">FFFFFF</td>
 <td style="background: #ffccff; padding: 5px;">FFCCFF</td>
 <td style="background: #ff99ff; padding: 5px;">FF99FF</td>
 <td style="background: #ff66ff; padding: 5px;">FF66FF</td>
 <td style="background: #ff33ff; padding: 5px;">FF33FF</td>
 <td style="background: #ff00ff; padding: 5px;">FF00FF</td>
 </tr>
<tr>
 <td style="background: #ffffcc; padding: 5px;">FFFFCC</td>
 <td style="background: #ffcccc; padding: 5px;">FFCCCC</td>
 <td style="background: #ff99cc; padding: 5px;">FF99CC</td>
 <td style="background: #ff66cc; padding: 5px;">FF66CC</td>
 <td style="background: #ff33cc; padding: 5px;">FF33CC</td>
 <td style="background: #ff00cc; padding: 5px;">FF00CC</td>
 </tr>
<tr>
 <td style="background: #ffff99; padding: 5px;">FFFF99</td>
 <td style="background: #ffcc99; padding: 5px;">FFCC99</td>
 <td style="background: #ff9999; padding: 5px;">FF9999</td>
 <td style="background: #ff6699; padding: 5px;">FF6699</td>
 <td style="background: #ff3399; padding: 5px;">FF3399</td>
 <td style="background: #ff0099; padding: 5px;">FF0099</td>
 </tr>
<tr>
 <td style="background: #ffff66; padding: 5px;">FFFF66</td>
 <td style="background: #ffcc66; padding: 5px;">FFCC66</td>
 <td style="background: #ff9966; padding: 5px;">FF9966</td>
 <td style="background: #ff6666; padding: 5px;">FF6666</td>
 <td style="background: #ff3366; padding: 5px;">FF3366</td>
 <td style="background: #ff0066; padding: 5px;">FF0066</td>
 </tr>
<tr>
 <td style="background: #ffff33; padding: 5px;">FFFF33</td>
 <td style="background: #ffcc33; padding: 5px;">FFCC33</td>
 <td style="background: #ff9933; padding: 5px;">FF9933</td>
 <td style="background: #ff6633; padding: 5px;">FF6633</td>
 <td style="background: #ff3333; padding: 5px;">FF3333</td>
 <td style="background: #ff0033; padding: 5px;">FF0033</td>
 </tr>
<tr>
 <td style="background: #ffff00; padding: 5px;">FFFF00</td>
 <td style="background: #ffcc00; padding: 5px;">FFCC00</td>
 <td style="background: #ff9900; padding: 5px;">FF9900</td>
 <td style="background: #ff6600; padding: 5px;">FF6600</td>
 <td style="background: #ff3300; padding: 5px;">FF3300</td>
 <td style="background: #ff0000; padding: 5px;">FF0000</td>
 </tr>
<tr>
 <td style="background: #ccffff; padding: 5px;">CCFFFF</td>
 <td style="background: #ccccff; padding: 5px;">CCCCFF</td>
 <td style="background: #cc99ff; padding: 5px;">CC99FF</td>
 <td style="background: #cc66ff; padding: 5px;">CC66FF</td>
 <td style="background: #cc33ff; padding: 5px;">CC33FF</td>
 <td style="background: #cc00ff; padding: 5px;">CC00FF</td>
 </tr>
<tr>
 <td style="background: #ccffcc; padding: 5px;">CCFFCC</td>
 <td style="background: #cccccc; padding: 5px;">CCCCCC</td>
 <td style="background: #cc99cc; padding: 5px;">CC99CC</td>
 <td style="background: #cc66cc; padding: 5px;">CC66CC</td>
 <td style="background: #cc33cc; padding: 5px;">CC33CC</td>
 <td style="background: #cc00cc; padding: 5px;">CC00CC</td>
 </tr>
<tr>
 <td style="background: #ccff99; padding: 5px;">CCFF99</td>
 <td style="background: #cccc99; padding: 5px;">CCCC99</td>
 <td style="background: #cc9999; padding: 5px;">CC9999</td>
 <td style="background: #cc6699; padding: 5px;">CC6699</td>
 <td style="background: #cc3399; padding: 5px;">CC3399</td>
 <td style="background: #cc0099; padding: 5px;">CC0099</td>
 </tr>
<tr>
 <td style="background: #ccff66; padding: 5px;">CCFF66</td>
 <td style="background: #cccc66; padding: 5px;">CCCC66</td>
 <td style="background: #cc9966; padding: 5px;">CC9966</td>
 <td style="background: #cc6666; padding: 5px;">CC6666</td>
 <td style="background: #cc3366; padding: 5px;">CC3366</td>
 <td style="background: #cc0066; padding: 5px;">CC0066</td>
 </tr>
<tr>
 <td style="background: #ccff33; padding: 5px;">CCFF33</td>
 <td style="background: #cccc33; padding: 5px;">CCCC33</td>
 <td style="background: #cc9933; padding: 5px;">CC9933</td>
 <td style="background: #cc6633; padding: 5px;">CC6633</td>
 <td style="background: #cc3333; padding: 5px;">CC3333</td>
 <td style="background: #cc0033; padding: 5px;">CC0033</td>
 </tr>
<tr>
 <td style="background: #ccff00; padding: 5px;">CCFF00</td>
 <td style="background: #cccc00; padding: 5px;">CCCC00</td>
 <td style="background: #cc9900; padding: 5px;">CC9900</td>
 <td style="background: #cc6600; padding: 5px;">CC6600</td>
 <td style="background: #cc3300; padding: 5px;">CC3300</td>
 <td style="background: #cc0000; padding: 5px;">CC0000</td>
 </tr>
<tr>
 <td style="background: #99ffff; padding: 5px;">99FFFF</td>
 <td style="background: #99ccff; padding: 5px;">99CCFF</td>
 <td style="background: #9999ff; padding: 5px;">9999FF</td>
 <td style="background: #9966ff; padding: 5px;">9966FF</td>
 <td style="background: #9933ff; padding: 5px;">9933FF</td>
 <td style="background: #9900ff; padding: 5px;">9900FF</td>
 </tr>
<tr>
 <td style="background: #99ffcc; padding: 5px;">99FFCC</td>
 <td style="background: #99cccc; padding: 5px;">99CCCC</td>
 <td style="background: #9999cc; padding: 5px;">9999CC</td>
 <td style="background: #9966cc; padding: 5px;">9966CC</td>
 <td style="background: #9933cc; padding: 5px;">9933CC</td>
 <td style="background: #9900cc; padding: 5px;">9900CC</td>
 </tr>
<tr>
 <td style="background: #99ff99; padding: 5px;">99FF99</td>
 <td style="background: #99cc99; padding: 5px;">99CC99</td>
 <td style="background: #999999; padding: 5px;">999999</td>
 <td style="background: #996699; padding: 5px;">996699</td>
 <td style="background: #993399; padding: 5px;">993399</td>
 <td style="background: #990099; color: white; padding: 5px;">990099</td>
 </tr>
<tr>
 <td style="background: #99ff66; padding: 5px;">99FF66</td>
 <td style="background: #99cc66; padding: 5px;">99CC66</td>
 <td style="background: #999966; padding: 5px;">999966</td>
 <td style="background: #996666; padding: 5px;">996666</td>
 <td style="background: #993366; color: white; padding: 5px;">993366</td>
 <td style="background: #990066; color: white; padding: 5px;">990066</td>
 </tr>
<tr>
 <td style="background: #99ff33; padding: 5px;">99FF33</td>
 <td style="background: #99cc33; padding: 5px;">99CC33</td>
 <td style="background: #999933; padding: 5px;">999933</td>
 <td style="background: #996633; color: white; padding: 5px;">996633</td>
 <td style="background: #993333; color: white; padding: 5px;">993333</td>
 <td style="background: #990033; color: white; padding: 5px;">990033</td>
 </tr>
<tr>
 <td style="background: #99ff00; padding: 5px;">99FF00</td>
 <td style="background: #99cc00; padding: 5px;">99CC00</td>
 <td style="background: #999900; padding: 5px;">999900</td>
 <td style="background: #996600; color: white; padding: 5px;">996600</td>
 <td style="background: #993300; color: white; padding: 5px;">993300</td>
 <td style="background: #990000; color: white; padding: 5px;">990000</td>
 </tr>
<tr>
 <td style="background: #66ffff; padding: 5px;">66FFFF</td>
 <td style="background: #66ccff; padding: 5px;">66CCFF</td>
 <td style="background: #6699ff; padding: 5px;">6699FF</td>
 <td style="background: #6666ff; padding: 5px;">6666FF</td>
 <td style="background: #6633ff; padding: 5px;">6633FF</td>
 <td style="background: #6600ff; padding: 5px;">6600FF</td>
 </tr>
<tr>
 <td style="background: #66ffcc; padding: 5px;">66FFCC</td>
 <td style="background: #66cccc; padding: 5px;">66CCCC</td>
 <td style="background: #6699cc; padding: 5px;">6699CC</td>
 <td style="background: #6666cc; padding: 5px;">6666CC</td>
 <td style="background: #6633cc; padding: 5px;">6633CC</td>
 <td style="background: #6600cc; padding: 5px;">6600CC</td>
 </tr>
<tr>
 <td style="background: #66ff99; padding: 5px;">66FF99</td>
 <td style="background: #66cc99; padding: 5px;">66CC99</td>
 <td style="background: #669999; padding: 5px;">669999</td>
 <td style="background: #666699; padding: 5px;">666699</td>
 <td style="background: #663399; padding: 5px;">663399</td>
 <td style="background: #660099; padding: 5px;">660099</td>
 </tr>
<tr>
 <td style="background: #66ff66; padding: 5px;">66FF66</td>
 <td style="background: #66cc66; padding: 5px;">66CC66</td>
 <td style="background: #669966; padding: 5px;">669966</td>
 <td style="background: #666666; padding: 5px;">666666</td>
 <td style="background: #663366; color: white; padding: 5px;">663366</td>
 <td style="background: #660066; color: white; padding: 5px;">660066</td>
 </tr>
<tr>
 <td style="background: #66ff33; padding: 5px;">66FF33</td>
 <td style="background: #66cc33; padding: 5px;">66CC33</td>
 <td style="background: #669933; padding: 5px;">669933</td>
 <td style="background: #666633; color: white; padding: 5px;">666633</td>
 <td style="background: #663333; color: white; padding: 5px;">663333</td>
 <td style="background: #660033; color: white; padding: 5px;">660033</td>
 </tr>
<tr>
 <td style="background: #66ff00; padding: 5px;">66FF00</td>
 <td style="background: #66cc00; padding: 5px;">66CC00</td>
 <td style="background: #669900; padding: 5px;">669900</td>
 <td style="background: #666600; color: white; padding: 5px;">666600</td>
 <td style="background: #663300; color: white; padding: 5px;">663300</td>
 <td style="background: #660000; color: white; padding: 5px;">660000</td>
 </tr>
<tr>
 <td style="background: #33ffff; padding: 5px;">33FFFF</td>
 <td style="background: #33ccff; padding: 5px;">33CCFF</td>
 <td style="background: #3399ff; padding: 5px;">3399FF</td>
 <td style="background: #3366ff; padding: 5px;">3366FF</td>
 <td style="background: #3333ff; padding: 5px;">3333FF</td>
 <td style="background: #3300ff; padding: 5px;">3300FF</td>
 </tr>
<tr>
 <td style="background: #33ffcc; padding: 5px;">33FFCC</td>
 <td style="background: #33cccc; padding: 5px;">33CCCC</td>
 <td style="background: #3399cc; padding: 5px;">3399CC</td>
 <td style="background: #3366cc; padding: 5px;">3366CC</td>
 <td style="background: #3333cc; padding: 5px;">3333CC</td>
 <td style="background: #3300cc; padding: 5px;">3300CC</td>
 </tr>
<tr>
 <td style="background: #33ff99; padding: 5px;">33FF99</td>
 <td style="background: #33cc99; padding: 5px;">33CC99</td>
 <td style="background: #339999; padding: 5px;">339999</td>
 <td style="background: #336699; padding: 5px;">336699</td>
 <td style="background: #333399; color: white; padding: 5px;">333399</td>
 <td style="background: #330099; color: white; padding: 5px;">330099</td>
 </tr>
<tr>
 <td style="background: #33ff66; padding: 5px;">33FF66</td>
 <td style="background: #33cc66; padding: 5px;">33CC66</td>
 <td style="background: #339966; padding: 5px;">339966</td>
 <td style="background: #336666; color: white; padding: 5px;">336666</td>
 <td style="background: #333366; color: white; padding: 5px;">333366</td>
 <td style="background: #330066; color: white; padding: 5px;">330066</td>
 </tr>
<tr>
 <td style="background: #33ff33; padding: 5px;">33FF33</td>
 <td style="background: #33cc33; padding: 5px;">33CC33</td>
 <td style="background: #339933; padding: 5px;">339933</td>
 <td style="background: #336633; color: white; padding: 5px;">336633</td>
 <td style="background: #333333; color: white; padding: 5px;">333333</td>
 <td style="background: #330033; color: white; padding: 5px;">330033</td>
 </tr>
<tr>
 <td style="background: #33ff00; padding: 5px;">33FF00</td>
 <td style="background: #33cc00; padding: 5px;">33CC00</td>
 <td style="background: #339900; padding: 5px;">339900</td>
 <td style="background: #336600; color: white; padding: 5px;">336600</td>
 <td style="background: #333300; color: white; padding: 5px;">333300</td>
 <td style="background: #330000; color: white; padding: 5px;">330000</td>
 </tr>
<tr>
 <td style="background: #00ffff; padding: 5px;">00FFFF</td>
 <td style="background: #00ccff; padding: 5px;">00CCFF</td>
 <td style="background: #0099ff; padding: 5px;">0099FF</td>
 <td style="background: #0066ff; padding: 5px;">0066FF</td>
 <td style="background: #0033ff; padding: 5px;">0033FF</td>
 <td style="background: #0000ff; padding: 5px;">0000FF</td>
 </tr>
<tr>
 <td style="background: #00ffcc; padding: 5px;">00FFCC</td>
 <td style="background: #00cccc; padding: 5px;">00CCCC</td>
 <td style="background: #0099cc; padding: 5px;">0099CC</td>
 <td style="background: #0066cc; padding: 5px;">0066CC</td>
 <td style="background: #0033cc; padding: 5px;">0033CC</td>
 <td style="background: #0000cc; padding: 5px;">0000CC</td>
 </tr>
<tr>
 <td style="background: #00ff99; padding: 5px;">00FF99</td>
 <td style="background: #00cc99; padding: 5px;">00CC99</td>
 <td style="background: #009999; padding: 5px;">009999</td>
 <td style="background: #006699; padding: 5px;">006699</td>
 <td style="background: #003399; padding: 5px;">003399</td>
 <td style="background: #000099; color: white; padding: 5px;">000099</td>
 </tr>
<tr>
 <td style="background: #00ff66; padding: 5px;">00ff66</td>
 <td style="background: #00cc66; padding: 5px;">00cc66</td>
 <td style="background: #009966; padding: 5px;">009966</td>
 <td style="background: #006666; padding: 5px;">006666</td>
 <td style="background: #003366; color: white; padding: 5px;">003366</td>
 <td style="background: #000066; color: white; padding: 5px;">000066</td>
 </tr>
<tr>
 <td style="background: #00ff33; padding: 5px;">00FF33</td>
 <td style="background: #00cc33; padding: 5px;">00CC33</td>
 <td style="background: #009933; padding: 5px;">009933</td>
 <td style="background: #006633; padding: 5px;">006633</td>
 <td style="background: #003333; color: white; padding: 5px;">003333</td>
 <td style="background: #000033; color: white; padding: 5px;">000033</td>
 </tr>
<tr>
 <td style="background: #00ff00; padding: 5px;">00FF00</td>
 <td style="background: #00cc00; padding: 5px;">00CC00</td>
 <td style="background: #009900; padding: 5px;">009900</td>
 <td style="background: #006600; color: white; padding: 5px;">006600</td>
 <td style="background: #003300; color: white; padding: 5px;">003300</td>
 <td style="background: #000000; color: white; padding: 5px;"><div style="text-align: right;">
000000</div>
</td>
 </tr>
</tbody></table>
</div>
</div>
<br />
<br />
<div style="text-align: right;">
<br /></div>
</div>

كود 216 لون html

216 لون FFFFFF FFCCFF FF99FF FF66FF FF33FF FF00FF FFFFCC FFCCCC FF99CC FF66CC FF33CC FF00CC FFFF99...

مزيد من المعلومات »

2:09 م

الدرس الثالث : خلاصة المتوصل عليه

<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<span style="color: blue; font-size: large;">السلام عليكم و رحمة الله تعالى و بركاته</span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: large;"> في موضوع جديد من دورة html</span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: large;"> على مدونة بوابة العلم</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: right;">
<span style="color: #3d85c6; font-size: large;">في هذا الدرس سنقوم بتذكير لما تعرفنا عليه مع التطرق الى كافة الجوانب التي قد تسبب مشاكل في الفهم لبعض المتابعين...</span></div>
<div style="text-align: right;">
<span style="color: #3d85c6; font-size: large;">طبعا نبتدأ بأساس الدورة ألا و هو القالب الأساسي :</span></div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
<br /></div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><pre style="color: maroon; text-align: start;"><code><html>
   <head>
   <title></title>
   </head>

</html></code></pre>
</pre>
<br />
<span style="color: #3d85c6;">و كما رأينا مسبقا أن وسم <title> يقوم بتسمية الصفحة أو الموضوع لدى المتصفح ...</span><br />
<span style="color: #3d85c6;">و أن الوسم <p> ; </p> يجعل النص مائلا ...</span><br />
<span style="color: #3d85c6;">و الوسم <h1> ; </h1> يجعله كبيرا</span><br />
<span style="color: #3d85c6;">.....و<h2> يجعله أصغر بعض الشيئ و <h3> أصغر بعض الشيء .....</span><br />
<span style="color: #3d85c6;">و هذه الان سبعة عناصر أساسية في البرمجة :</span><br />
<br /></div>
<br />
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"></pre>
<pre style="color: maroon; text-align: start;"><code><strong>يجعل النص مضغوطا.</strong></code></pre>
<pre style="color: maroon; text-align: start;"><code>
</code></pre>
<pre style="color: maroon; text-align: start;"><code><small>يجعل النص صغيرا.</small></code></pre>
<pre style="color: maroon; text-align: start;"><code>
</code></pre>
<pre style="color: maroon; text-align: start;"><code>
 <em><small>Emphasise small text</em></small>
 </code></pre>
<pre style="color: maroon; text-align: start;"><code><em><small>يجعل الص صغيرا و مضغوطا</em></small></code></pre>
<pre style="color: maroon; text-align: start;"><code>نص.نص.نص<br /> و نص اخر في سطر جديد </code></pre>
<pre style="color: maroon; text-align: start;"><code>
</code></pre>
<pre style="color: maroon; text-align: start;"><code><hr /> خط أفقي</code></pre>
<pre style="color: maroon; text-align: start;"><code>
</code></pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<br />
<span style="color: #3d85c6;">و الى هنا ينتهي درس اليوم أنصحك بتجريبها </span><br />
<span style="color: #3d85c6;">و أي استفسار أنا موجود</span><br />
<span style="color: #3d85c6;">فقط ضعه في التعليق ....</span><br />
<span style="color: #3d85c6;">ترقبوا الدرس القادم ...</span><br />
<span style="background-color: white; color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 15.828125px;">الخصائص </span><span style="background-color: white; color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 15.828125px;">الروابط </span><span style="background-color: #f9fcff; color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 20px;">الصور الجداول ...</span><br />
<span style="background-color: #f9fcff; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 20px;"><span style="color: #a64d79;">عن مدونة بوابة العلم.... بوابتنا على النت بألواننا...</span></span><br />
<span style="background-color: #f9fcff; color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 20px;"><br /></span></div>

الدرس الثالث : خلاصة المتوصل عليه

السلام عليكم و رحمة الله تعالى و بركاته في موضوع جديد من دورة html على مدونة بوابة العلم في هذا الدرس سنقوم بتذكير لما تعرفنا ...

مزيد من المعلومات »

1:20 م

الدرس الثاني: العناصر و الوسوم +انشاء موقع

<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<h2 style="text-align: center;">
<span style="color: red; font-size: x-large;"><b>الدرس الثاني من الHTML : العناصر و الوسوم + انشاء أول صفحة ويب </b></span></h2>
<div>
<br /></div>
<div>
<span style="color: #3d85c6; font-size: large;"><b>السلام عليكم و رحمة الله تعالى و بركاته في موضوع جديد من مواضيعنا في دورة برمجة الويب ... </b></span></div>
<div>
<span style="color: #3d85c6; font-size: large;"><b>موضوع اليوم هو أساس الدورة يث أننا الأن بصدد التعرف على جوهر "HTML"</b></span></div>
<div>
<span style="color: #3d85c6; font-size: large;"><b>ألا وهي العناصر أو ما يطلق عليه (من الأفضل حفظها بلانجليزية) "tag" هذه الأخيرة هي عبارة عن أوامر تخبر المتصفح ع كيفية عرض الصفحة ... </b></span></div>
<div>
<span style="color: #3d85c6; font-size: large;"><b>و مبدأها واحد كالاتي :</b></span></div>
<div>
<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b><span style="font-size: large;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">تبدأ مع علامة أصغر من </span><span dir="ltr" style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">"<"</span><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;"> وتنتهي مع علامة أكبر من </span><span dir="ltr" style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; text-align: start;">">"</span></span><span style="font-size: large;">:</span></b></span><br />
<span style="font-size: large;"><span style="color: red; font-family: Arial, Helvetica, sans-serif;"><b>مثال : </b></span></span><br />
<span style="color: blue; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">العنصر </span><code style="background-color: white; text-align: start;">em</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية </span><code dir="ltr" style="background-color: white; text-align: start;"><em></code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> ووسم الإغلاق </span><code dir="ltr" style="background-color: white; text-align: start;"></em></code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)</span></b></span><br />
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><b><em>نص مائل.</em></b></pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<div>
<br />
<span style="color: #38761d; font-family: Arial, Helvetica, sans-serif; font-size: large;">سيظهر في المتصفح بهذا الشكل:</span><br />
<em style="background-color: yellow; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">                                                                نص مائل.                                                        </em><br />
<br />
<span style="background-color: yellow;"><br /></span>
<br />
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>و كقاعدة أساسية في البرمجة فان جميع صفحات الويب تبتدأ بوسم : <span dir="ltr" style="background-color: white;"><html></span><span style="background-color: white;"> ثم وسم الإغلاق </span><span dir="ltr" style="background-color: white;"></html> </span></b></span></div>
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><span dir="ltr" style="background-color: white;">"/" الفرق هو علامة </span><span style="text-align: right;"></span></b></span></div>
<div style="text-align: start;">
<span dir="ltr" style="background-color: white; color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>اذن فان الوسوم الأخرى تو ضع بين الاثنين </b></span></div>
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b> لدينا و سوم أخرى مثلا :</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: #3d85c6; font-size: large;"><br /></span>
<span style="color: #3d85c6; font-size: large;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">العناصر </span><code style="background-color: white; text-align: start;">h1</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">، </span><code style="background-color: white; text-align: start;">h2</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">، </span><code style="background-color: white; text-align: start;">h3</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">، </span><code style="background-color: white; text-align: start;">h4</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">، </span><code style="background-color: white; text-align: start;">h5</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> و</span><code style="background-color: white; text-align: start;">h6</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> تستخدم للعناوين (حرف h هو اختصار "heading"), حيث </span><code style="background-color: white; text-align: start;">h1</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، </span><code style="background-color: white; text-align: start;">h2</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، و</span><code style="background-color: white; text-align: start;">h6</code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر. </span></span></b></span><br />
<span style="background-color: white; color: red; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: small; text-align: start;"><b>مثال:</b></span><br />
<br />
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><pre style="color: maroon; text-align: start;"><code><h1>هذا عنوان</h1></code></pre>
<pre style="color: maroon; text-align: start;"><code><h2>هذا عنوان فرعي</h2></code></pre>
</pre>
</span></pre>
</span></pre>
</span></pre>
</div>
</div>
<br />
<div class="examplebox">
<em style="background-color: yellow;"><br /></em>
<em style="background-color: yellow;"><br /></em></div>
<span style="color: red; font-size: large;">ستظهر بهذا الشكل في المتصفح:</span><br />
<div class="examplebox">
<h1>
<span style="background-color: white;">هذا عنوان     </span>                                                                  </h1>
<h1>
هذا عنوان فرعي                                                               </h1>
<div>
<span style="background-color: yellow;"><br /></span></div>
<div>
<span style="font-size: large;"><b><span style="color: red;">ملاحظة</span> :</b></span><br />
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>ليست كل الوسوم تعتمد على الاغلاق و البداية .... <span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: </span><code dir="ltr" style="background-color: white; text-align: start;"><br /></code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">.</span></b></span></div>
<div>
<span style="background-color: white; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: start;"><b>و هذه الوسوم لا تعتمد الحروف الكبيرة أو الصغيرة عند كتابتها لذالك اختر منهجا لأسلوب برمجتك أنا شخصيا أفضل الحروف الصغيرة ...</b></span></div>
<div>
<span style="background-color: white; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: start;"><b><br /></b></span></div>
<div>
<span style="background-color: white; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: start;"><b>هكذا نكون قد انتهينا من  أمر الوسوم (اذا أغفلت شيئا فاطرحه في تعليق لتحديث الموضوع و ادراك الخطأ)</b></span></div>
<div>
<span style="background-color: white; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: start;"><b>الان مرحلت  انشاء أول صفحة من برمجتك </b></span></div>
<div>
<span style="background-color: white; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: start;"><b>هل أنت جاهز ... كما ذكرا مسبقا حاول تتبع المراحل بتطبيقها ... لهذا ارتأيت عدم وضعها على شكل فيديو ...فقط الاكتفاء بالصور... </b></span></div>
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>الان لا حظ معي يا أخي و حاول استعاب ألية عمل البرمجة... و اجتناب الأخطاء لأن هذا المشروع الأولي هو الذي سيطور و يستعمل كالية عمل في الموضوعات اللاحقة</b></span></div>
<div style="text-align: start;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>الخطوات الأولية:<span style="text-align: right;"> </span></b></span></div>
<div style="text-align: start;">
<ul style="text-align: right;">
<li><span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>أولا افتح المفكرة "notepad"</b></span></li>
</ul>
<div>
<br /></div>
<div>
<img height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnuP4dVvaO2875qo7P_Al1YQ3khk2Weq-dh4YMx7wQnwQhNSXlRy6H6huh3pEgynGLKAgdgKMMNVb0xE1Lrn7omrYFkjwHy2sgHUM7Y7-OynOW_dDAqalnSTDI7v3ajWbQAykKlfpGoU/s400/notepad.png" width="290" /></div>
<div>
<br /></div>
<div>
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>سنقوم بانشاء صفحة تقول " مرحى !سأصير مبرمجا " </b></span></div>
<div>
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">تابع معي أخي بتمعن ... <strong>المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين</strong><span style="background-color: white;">، لذلك صفحة HTML بسيطة تبدأ بما يجب <b>أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.</b></span></span></div>
<div style="background-color: white;">
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <code dir="ltr"><html></code> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<code dir="ltr"><html></code>" في أول سطر في برنامج المفكرة.</b></span></div>
<div style="background-color: white;">
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>كما تتذكر من الدروس الماضية، <code dir="ltr"><html></code> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <code dir="ltr"><html></code> و<code dir="ltr"></html></code>.</b></span></div>
<div style="background-color: white;">
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<code dir="ltr"><head></code>و<code dir="ltr"></head></code>) يوضع فوق أمر body أو "متن الصفحة" (<code dir="ltr"><body></code> و<code dir="ltr"></body></code>).</b></span></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;">
<span style="color: blue; font-size: large;"><b>يجب أن تكون برمجتك بهذا الشكل:</b></span></div>
<br /></div>
</div>
</div>
</div>
</div>
<div style="text-align: left;">
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><html></span></pre>
<pre class="code"></pre>
<pre class="code"><head></pre>
<pre class="code"></head></pre>
<pre class="code"></pre>
<pre class="code"><body></pre>
<pre class="code"></body></pre>
<pre class="code"></pre>
<pre class="code"></html></pre>
</span></pre>
</span></pre>
</div>
</div>
</div>
<br />
<span style="color: red; font-size: large;">أنصحك أخي بنسخها و حفظها... لأنها ثابتة لا تتغير...</span><br />
<span style="color: red; font-size: large;">الان الوسوم التي نحتاجها...</span><br />
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">لتسمية الصفحة نحتاج الى :</span><br />
<br /></div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><pre style="color: maroon; text-align: start;"><code><title>موقعي الأول</title></code></pre>
<span id="summary5487934719045884650">
</span></pre>
</div>
<br />
<span style="color: red; font-size: large;">لكتابة المحتوى :</span><br />
<br />
<pre style="color: maroon; text-align: start;"></pre>
</div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><pre style="color: maroon; text-align: start;"><code><p><span style="font-family: 'Times New Roman'; white-space: normal;">مرحى !سأصير مبرمجا</span></p></code></pre>
</pre>
</div>
<span style="color: #666666; font-size: large;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;">حرف p في </span><code dir="ltr" style="background-color: white; text-align: start;"><p></code><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.</span></span><br />
<span style="color: #666666; font-size: large;"><span style="background-color: white; font-family: sans-serif, 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size: 16px; text-align: start;"><br /></span>
</span><br />
<div style="text-align: start;">
<span style="color: #666666; font-family: sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif; font-size: large;">اذا كنت قد نجحت في النقل يجب أن تكون الوسوم بهذا الشكل:</span></div>
<br /></div>
<pre class="alt2" dir="ltr" style="border: 1px inset; height: 50px; margin: 0px; overflow: auto; padding: 6px; width: 500px;"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><pre class="code"><b><html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<p>سأصير مبرمجا</p>
</body>
</html></b></pre>
</span></pre>
</span></pre>
</span></pre>
</div>
<br />
طريقة الحفظ :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTphPz8Gg1wKeIhfUWU-F3Y3VXo_x0i7JGdSN0v4BZD3kQRF9f6-NavyeKj-lAHpBvBygInmjGehAaAWFRWvGAdH0yrYZARknie8USQ3oNoMn5Pu_ulT7bXHcUZXDRJwrd8af8oP8lZw/s1600/saveas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="516" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTphPz8Gg1wKeIhfUWU-F3Y3VXo_x0i7JGdSN0v4BZD3kQRF9f6-NavyeKj-lAHpBvBygInmjGehAaAWFRWvGAdH0yrYZARknie8USQ3oNoMn5Pu_ulT7bXHcUZXDRJwrd8af8oP8lZw/s640/saveas.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-size: large;"><b>الان قم بفتح و اختبر النتيجة ... </b></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-size: large;"><b>يجب أن تكون عبارة عن جملة واحدة "سأصير مبرمجا و اسم الصفحة أعلى المتصفح يجب أن يكون نموقعي الأول</b></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-size: large;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-size: large;"><b>الى هنا ينتهي درس اليوم في دورة ال html </b></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #a64d79; font-size: large;">لاتقرأ و تغادر ضع تعليقا حتى نعرف "كم من متابع لدورة " </span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #a64d79; font-size: large;">عن مدونة بوابة العلم .... بوابتنا على النت بألواننا</span></div>
<br /></div>

الدرس الثاني: العناصر و الوسوم +انشاء موقع

الدرس الثاني من الHTML : العناصر و الوسوم + انشاء أول صفحة ويب السلام عليكم و رحمة الله تعالى و بركاته في موضوع جديد من مو...

مزيد من المعلومات »

4:55 ص

الدرس الأول ما هي : html

<div dir="rtl" style="text-align: right;" trbidi="on">
<h2 style="text-align: center;">
<span style="color: blue; font-size: x-large;">الدرس الأول ما هي : html</span></h2>
<div style="text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">السلام عليكم و رحمة اللله تعالى و بركاته </span></div>
<div style="text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">في موضوع جديد على مدونة بوابة العلم</span></div>
<div style="text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">.</span></div>
<div style="text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">.</span></div>
<div style="text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">.و بعد</span></div>
<div style="text-align: right;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">     </span><span style="color: #a64d79;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"> </span><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">نظرا لعدم أهمية تعريف ال:html في دورة البرمجة هذه قررت ارفاقها ب سياسة العمل  حتى لا تواجه مشاكل أثناء التعلم بلاضافة الى الأدوات التي تحتاجها اذا فنحن الان نكون قد دمجنا ثلاث دروس في موضوع واحد.</span></span></div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">  </span><span style="color: #cc0000; font-family: Arial, Helvetica, sans-serif; font-size: large;"> أولا نبدا بتعريف html :</span></div>
<div style="text-align: right;">
<span style="color: #0b5394;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"></span><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">بكل بساطة هي الهيكل الأساسي لصفحات الويب فاذا على سبيل المثال صفحة مبرمجة فقط ب html ستكون عبارة عن خطوط بدون ديكور أو ما شابه ....</span></span></div>
<div style="text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">   أما بالنسبة الى التعريف الروتيني الخاص بها فهو كالأتي : </span></div>
<div style="text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;"><span style="background-color: white; text-align: start;">HTML اخترعت في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم....و مستطلح </span><span style="background-color: white; text-align: start;">HTML هو اختصار "HyperText Mark-up Language" :</span></span></div>
<ul style="background-color: white; text-align: start;">
<li style="padding-top: 0.25em;"><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Hyper</strong> هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.</span></li>
<li style="padding-top: 0.25em;"><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Text</strong> تعني النص، وهذه تشرح نفسها.</span></li>
<li style="padding-top: 0.25em;"><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Mark-up</strong> هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.</span></li>
<li style="padding-top: 0.25em;"><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Language</strong> تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.</span></li>
</ul>
<div>
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">في هذا الدرس أيضا سنتطرق الى تعلم ال <span style="background-color: white; text-align: start;">XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.</span></span></div>
<div style="text-align: right;">
<span style="background-color: white; text-align: start;"><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">      و يمكن معاينتها source المثبتة مع المتصفح... كما في الصورة :</span></span></div>
<div style="text-align: right;">
<span style="background-color: white; text-align: start;"><span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">  </span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BVi_RvF0Gl5BmOIBB2BZeb2YAtrxB7kRN-kMh-CACn4fY6PL7pVStiM0AmIHjL0_Hg7qVczyasmMywgxSqWv4vQI7yF0dJzJq_45iDNQS9O0KcvYFNCihyphenhypheng9BqEh8AjrltY-vqI1DvM/s1600/viewsource.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BVi_RvF0Gl5BmOIBB2BZeb2YAtrxB7kRN-kMh-CACn4fY6PL7pVStiM0AmIHjL0_Hg7qVczyasmMywgxSqWv4vQI7yF0dJzJq_45iDNQS9O0KcvYFNCihyphenhypheng9BqEh8AjrltY-vqI1DvM/s1600/viewsource.png" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">عند تجريبها ستحصل على وسوم تبدو معقدة لا تقلق يا أخ ف انك ان اتبعت هذا الدرس سيزول عنها الغموض و ستدرك حينها أنها لا تمس للغموض بأي رابط.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">الان و بعد التعرف على مفهوم html و الذي أظن اني ألممت بزواياه .... فهنا أوجه لك أخي الزائر طلبا ان أغفلت شيئا فضعه في التعليق فهدفنا الافادة .</span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #cc0000; font-family: Arial, Helvetica, sans-serif; font-size: large;">الأن الأدوات التي تحتاجها:</span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">الأدوات التي تحتاجها في الغالب أنت تملكها ... بلااضافة الى أنها مجانية...</span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">و مع ذالك سنذكرها :</span></div>
<div class="separator" style="clear: both; text-align: right;">
</div>
<ul style="text-align: right;">
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">المتصفح و هو البرنامج الذي أنت الان تزور مدونتنا المتواضعة منه ....(موزيلا فايرفوكس,أوبرا,كروم,صافاري...)</span></li>
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">لن تحتاج الى الاتصال بالشبكة عند تطبيق الدروس لانه سيكون بنظام الاتصال الداخلي و يمكن رفعه الى الشبكة بعد الانتهاء من التصميم (اذا لم تكن على اتصال دائم) فترقبو الموقع بنظام عمل داخلي بالفرنسية و سيكون شاملا ....</span></li>
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">أنت يا أخي معنا لن تضطر الى تحميل برنامج أو ماشابه أنت فقط تحتاج الى "note pad" تفتحه من خلا</span><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">ل</span><span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;">:</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnuP4dVvaO2875qo7P_Al1YQ3khk2Weq-dh4YMx7wQnwQhNSXlRy6H6huh3pEgynGLKAgdgKMMNVb0xE1Lrn7omrYFkjwHy2sgHUM7Y7-OynOW_dDAqalnSTDI7v3ajWbQAykKlfpGoU/s1600/notepad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnuP4dVvaO2875qo7P_Al1YQ3khk2Weq-dh4YMx7wQnwQhNSXlRy6H6huh3pEgynGLKAgdgKMMNVb0xE1Lrn7omrYFkjwHy2sgHUM7Y7-OynOW_dDAqalnSTDI7v3ajWbQAykKlfpGoU/s320/notepad.png" width="232" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="color: #3d85c6; font-family: Arial, Helvetica, sans-serif; font-size: large;">ا<span style="background-color: white; text-align: start;">ذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيل الأخرى، فمثلاً لينكس يحوي برنامج بيكو "Pico" ونظام ماك يحوي برنامج TextEdit.</span></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="background-color: white; text-align: start;"><span style="color: #6fa8dc; font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="background-color: white; text-align: start;"><span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">نصائح لنجاح الدورة التعليمية:</span></span></div>
<div class="separator" style="clear: both; text-align: right;">
</div>
<ul style="text-align: right;">
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">حاول تطبيق كل درس</span></li>
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">ان تعسر عليك أو واجهت مشكلا اطرحه و سنجد حلا انشاء الله </span></li>
<li><span style="color: #0b5394; font-family: Arial, Helvetica, sans-serif; font-size: large;">لا تيأس بفشل أي محاولة فقط استمر و ابحث عن الخطأ فعند النتهاؤء من انشائك للمشروع المترقب ستشعر برضا عن النفس</span></li>
</ul>
<div>
<span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">و أخيرا :</span></div>
<div>
<span style="color: blue; font-family: Arial, Helvetica, sans-serif; font-size: large;"> أود قول كلمتين :</span></div>
<div>
<span style="color: blue; font-family: Arial, Helvetica, sans-serif; font-size: large;">الدرس الاحق سيكون البداية الفعلية لل html لأننا فقط في مرحلة التمهيد</span></div>
<div>
<span style="color: blue; font-family: Arial, Helvetica, sans-serif; font-size: large;">لا تقرأ و تغاذر ضع ملاحظة في التعليق حتى نتمكن من تدارك أي خلل أو ما شابه</span></div>
<br />
<div class="separator" style="clear: both; text-align: right;">
<span style="background-color: white; text-align: start;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span></div>
<br />
<div style="text-align: right;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;">                        </span></div>
</div>

الدرس الأول ما هي : html

الدرس الأول ما هي : html السلام عليكم و رحمة اللله تعالى و بركاته في موضوع جديد على مدونة بوابة العلم . . .و بعد نظرا ...

مزيد من المعلومات »

3:17 م

اعلان دورة css

المعايير القياسية

الدرس السادس : التصميم css

الدرس الخامس : الصور

الدرس الرابع: الروابط

الدرس الثالث : الخصائص

كود 216 لون html

الدرس الثالث : خلاصة المتوصل عليه

الدرس الثاني: العناصر و الوسوم +انشاء موقع

الدرس الأول ما هي : html

المشاركات الشائعة

أرشيف المدونة الإلكترونية