شرح دورة تعليمية في ال html مدعمة بفيديوهات من انجازي - متجدد

abdou_inf · 2015-05-31, 01:31

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

في هذه الدورة التعليمية سأحاول بحول الله أن أطرح دروس لتعلم لغة HTML بطريقة سهلة و سلسلة مدعمة بفيديوهات من انجازي...

سيكون هذا الموضوع متجدد...

أتمنى ان ينال هذا الطرح اعجابكم...كما أتمنى أن يستفيد اكبر قدر ممكن من المهتمين....

ملاحظة: لمشاهدة الفيديوهات، يرجى تغيير djelfa.info الى رابط يوتوب في الروابط المرفقة...

نبدأ على بركة الله بأول درس

عنوان الدرس: مقدمة عامة

في هذا الدرس سنقوم بتحديد بعض المفاهيم الأولية عن لغة ال HTML

فما هو ال HTML ؟

الش تي أم أل ما هو الا لغة تطوير المواقع نقوم من خلالها بانشاء صفحات ويب، و هي لغة تهتم بتحديد شكل الصفحة، يعني المحتوى الساكن أو الثابت للصفحة (Le contenu statique de la page).

هي لغة تعتمد على الأوسمة في التكويد (Tags)، مثال: <html> ، ، <h1> و إلى ما ذلك من أوسمة أخرى...

للمزيد من المعلومات...تابعو الفيديو التالي :

https://www.djelfa.info/watch?v=1wt3jYaLlic

الدرس الثاني: انشاء أول صفحة ويب...

في هذا الدرس الثاني سنرى كيف نقوم بانشاء صفحة ويب HTML بسيطة جدا....

تابع الفيديو التالي للمزيد من الشروحات....

https://www.djelfa.info/watch?v=Qh_Hxgb-ZvI

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

كود بلغة HTML:

<!DOCTYPE html>

<html dir = "rtl">

    <head>

        <**** charset="UTF-8">

        <title>دورة تعليمية في ال HTML - ArabICT</title>

    </head>

    <body>

        أنا جد سعيد لانشاء أول صفحة ويب لي في حياتي.....:P

    </body>

</html>

abdou_inf · 2015-05-31, 01:55

الدرس الثالث: الوسوم الأساسية في لغة ال HTML

في هذا الدرس ان شاء الله سنتطرق الى بعض الوسوم (Tags) الأساسية في ال HTML...

فمن الوسوم التي سوف نراها اليوم هي:

الوسوم <h1> إلى <h6> الخاصة بكيفية انشاء العناوين...
الوسم الذي يسمح لنا بانشاء فقرة...
الوسم <hr > الذي يسمح لنا بادراج فاصل أفقي بين أقسام الصفحة...
الوسم الذي يتيح لنا عملية الرجوع الى السطر...
الوسم <a> الخاص بانشاء الوصلات (الروابط الالكترونية)....
الوسم <img> الذي يسمح لنا بادراج صورة على الصفحة...

ولمزيد من التفاصيل يرجى مشاهدة الفيديو التالي...
https://www.djelfa.info/watch?v=crguzZuq1zQ

عنوان الدرس: تنسيق النصوص

في درس اليوم سنتطرق الى كيفية تنسيق النصوص بال HTML ، و سنحاول أن نرى بعض الوسوم الخاصة بتنسيق الخطوط مثل:

: للخطوط الغليظة...
: للخطوط المائلة...
: لتسطير الجمل...
<strike> : لشطب العبارات..
<big> : للخطوط العريضة...
: للخطوط الصغيرة..
: لخفض العبارات...
: لرفع العبارات...

ولمعاينة الكود سورس

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
    <head>
        <**** charset="UTF-8">
        <title>دورة تعليمية في ال HTML - ArabICT</title>
    </head>
    <body>
        <h1>درس اليوم: تنسيق النصوص</h1>
        <p>
        أنا عبارة عن خط عادي <br />
        <b>أنا عبارة عن خط غليظ</b> <br />
        <i>أنا عبارة عن خط italic</i><br />
        <u>أنا عبارة عن خط مسطر</u><br />
        <strike>أنا عبارة عن خط مشطوب</strike><br />
        أنا عبارة عن <sup> كلمة مرفوعة</sup><br />
        أنا عبارة عن <sub> كلمة مخفوضة</sub><br />
        أنا عبارة عن<big> خط عريض</big><br />
        أنا عبارة عن<small> خط صغير</small><br />
   
        </p>
    </body>
</html>

و للمزيد يرجى معاينة الفيديو التالي...
https://www.djelfa.info/watch?v=yNLZppzx-AQ

abdou_inf · 2015-05-31, 10:45

عنوان الدرس: الاقتباسات+ كيفية ادراج كود سورس

في درس اليوم بحول الله سنرى مختلف الوسوم التي يمكن من خلالها ادراج اقتباسات من نصوص و اخرى و كيفة التعامل معها، كما سنتطرق كذلك الى كيفية ادراج كود سورس بال HTML ...في القائمة التالية مختلف الوسوم المدروسة في هذه الحلقة:

<q> من أجل الاقتباسات القصيرة...
<blockquote> تستعمل لادراج اقتباسات طويلة..
<cite> للتنويهات و الملاحظات ..
<address> للعناوين و ما شابهها...
<abbr> لشرح الاختصارات...
<code> لادراج كود سورس في الصفحة...

و للمزيد، يرجى متابعة الفيديو من هنا:
https://www.youtube.com/watch?v=PFAKaZwRCso
الكود سورس المرفق:

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
    <head>
        <**** charset="UTF-8">
        <title>دورة تعليمية في ال HTML - ArabICT</title>
    </head>
    <body>
        <h1>درس اليوم: الاقتباسات + كيفية ادراج كود سورس</h1>
        <p>
        أنا عبارة عن <q> اقتباس قصير </q><br />
        <blockquote>
        أنا عبارة عن اقتباس طويل <br/>
        أنا عبارة عن اقتباس طويل <br/>أنا عبارة عن اقتباس طويل <br/>
        أنا عبارة عن اقتباس طويل <br/>
        أنا عبارة عن اقتباس طويل <br/>
        </blockquote> <cite> هذا الاقتباس مأخوذ من الدورة التعليمية في ال HTML</cite>
        <address>
        الكاتب: ArabICT <br />
        البلد: الجزائر<br />
        الموقع: arab-ict.com<br />
        الايميل: arab- - البريد الإلكتروني حذف من قبل الإدارة (غير مسموح بكتابة البريد) -<br />
        </address>
       
        <abbr title="الشركة الوطنية للمياه">ش و م </abbr>
       
        <hr />
       
        <code dir= "ltr"><pre>
            class ArabICT extends ICT {
                private $name;
               
                public function giveName(){
                    return $this->name;
                }
            }
        </pre></code>
       
        </p>
    </body>
</html>

طيباوي ابو علي1 · 2015-05-31, 21:28

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

الصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

إن شاء الله

وبــــــــــارك الله فـــــــــــــيك وجعل غدوة لغيرك

هل هناك فرق بين و 

بــــــــــارك الله فـــــــــــــيك

abdou_inf · 2015-06-01, 00:06

و عليكم السلام و رحمة الله و بركاته...
بارك الله فيك على التقييم و المرور الطيب...
بالنسبة للشروحات الكتابية...أفضل ان تطرح الأسئلة و أجيب...
فالفيديوهات فيها على ما أظن شرحا كافيا...
بالنسبة لسؤالك...هو سؤال مشهور...
و الاجابة هي ان و و كلها تعمل نفس العمل...
فالاولى تستعمل في ال HTML
أما الثانية في ال XHTML الا انها صالحة في ال HTML
أما الثالثة فهي الجمع بين الاثنين + 
لكن يبقى الأفضل استعمال

abdou_inf · 2015-06-01, 00:14

الدرس السادس: كيفية تنسيق صفحات الويب باستعمال ال CSS

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

قبل ذلك نود أن نتعرف على ال CSS...فما هو السي اس اس؟

CSS ما هو الا لغة برمجة طورت خصيصا لجعل تنسيق صفحات الويب أسهل و أفضل عن طريق فصل كود التنسيق عن الكود الأصلي (HTML)...

فيمكن ادراج و تطيبق ال CSS على صفحة ويب بثلاث طرق مختلفة:

تطبيق التنسيق في السطر الواحد Inline Style
تطبيق التنسيق الداخلي Internal Style
أو عن طريق ملف خارجي External Style

لمزيد من التوضيحات يرجى معاينة الفيديو التالي...
https://www.youtube.com/watch?v=eVt0rrFZIRs

الكود سورس من هنا:

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
	<head>
		<**** charset="UTF-8">
		<title>دورة تعليمية في ال HTML - ArabICT</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<style type="text/css">
		.f_u_30{
		text-decoration: underline;
		font-size:30px;
		}
		</style>
	</head>
	<body>
		<h1>درس اليوم: كيفية تنسيق صفحات الويب  باستعمال ال CSS</h1>
		<p style=" color:red; font-size:40px">تنسيق سي س س على نفس الخط</p>	
		<p class="f_u_30"> تنسيق سي س س داخلي</p>
		<p class="f_green_20">تنسيق خارجي</p>
		
	</body>
</html>

ملف التنسيق style.css مرفق مع الموضوع...

mouaib · 2015-06-01, 13:40

بارك الله فيك اخي الكريم

abdou_inf · 2015-06-01, 15:15

عفوا اخي...
تشكر لمرورك...

abdou_inf · 2015-06-01, 23:18

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

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

<table> لاضافة جدول
<th> لادراج عنوان لعمود من الجدول
<tr> لا دراج سطر في الجدول
<td> لاضافة خانة بالجدول

و هنا بعض الخصائص الخاصة بالجداول:

colspan لدمج الأعمدة...
rowspan لدمج الأسطر...
border خاصة بحدود الجدول...

للمزيد من التوضيحات...شاهدو الفيديو التالي ...
https://www.djelfa.info/watch?v=N103mTVPoZc

الكود المرفق مع الموضوع من هنا:

كود بلغة HTML:

	

    <!DOCTYPE html>
    <html dir = "rtl">
            <head>
                    <**** charset="UTF-8">
                    <title>دورة تعليمية في ال HTML - ArabICT</title>
                    <link rel="stylesheet" type="text/css" href="style.css">
                    <style type="text/css">
                            table, tr, td, th {
                                    border: 1px solid green;
                            }
                           
                            table {
                                    width: 500px;
                            }
                    </style>
            </head>
            <body>
                    <h1>درس اليوم: الجداول</h1>     
                    <table >
                            <caption> أنا عنوان الجدول</caption>
                            <tr>
                                    <th>العمود 1</th>
                                    <th>العمود 2</th>
                            </tr>
                            <tr>
                                    <td rowspan="2">1-1</td>
                                    <td>1-2</td>
                            </tr>
                            <tr>
                                    <td>2-2</td>
                            </tr>
                            <tr>
                                    <td colspan="2">1-3</td>
                            </tr>
                    </table>
            </body>
    </html>

S19ALG · 2015-06-02, 12:29

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

طيباوي ابو علي1 · 2015-06-02, 20:32

بــــــــــارك الله فـــــــــــــيك

you92cef · 2015-06-02, 21:27

دورة جيدة فقط

التاكيد ان HTML ليست لغة في حد ذاتها بعكس الXML

لان الHTML ليس فيها مثلا الدوال او شروط التحقق او الحلقات التي هي موجودة في الXML

بخصوص السؤال حول ال

هناك les balise auto- fermante

اي انك تعرفها وتغلقها في نفس الbalise مثل ال 

وهانك ايضا ما يشبها

abdou_inf · 2015-06-03, 01:05

اقتباس:

المشاركة الأصلية كتبت بواسطة you92cef

دورة جيدة فقط

التاكيد ان HTML ليست لغة في حد ذاتها بعكس الXML

لان الHTML ليس فيها مثلا الدوال او شروط التحقق او الحلقات التي هي موجودة في الXML

بخصوص السؤال حول ال

هناك les balise auto- fermante

اي انك تعرفها وتغلقها في نفس الbalise مثل ال 

وهانك ايضا ما يشبها

أولا بارك الله في الجميع على مرورهم و على تعليقاتهم...
أشكرك أخي على الاضافة المميزة...لكن...HTML هي لغة مدام فيها une syntaxe et une sémantique أما كونها لغة برمجة نعم هي بالفعل ليست لغة برمجة...إلا أنه في تعريفي في أول درس كتبت:

"و هي لغة تهتم بتحديد شكل الصفحة، يعني المحتوى الساكن أو الثابت للصفحة" و هو التعريف الصحيح.

فقط تعريب الفكرة صعب نوعا ما...لكن سأقوم باحداث تغيير على التعريف...
شكرا للاضافة.
+
les balises auto-fermantes تستعمل عادة في ال XHtml

abdou_inf · 2015-06-03, 01:12

عنوان الدرس: الروابط - HTML Links

في هذا الدرس، سوف نرى بالتفصيل كيف نتعامل مع الروابط (Links) في ال HTML..
سنتطرق الى النقاط التالية:

أنواع الروابط...
كيفية انشاء رابط
كيفية فتح محتوى رابط في صفحة جديدة عن طريق الخاصية target = _blank
كيفية انشاء رابط من صورة...
كيفية تنسيق الروابط عن طريق ال CSS

للمزيد من التوضيحات...الفيديو التالي بين أيديكم

https://www.youtube.com/watch?v=hKwPyu4-OgI

كود سورس الصفحة index.html

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
	<head>
		<**** charset="UTF-8">
		<title>دورة تعليمية في ال HTML - ArabICT</title>
		<link rel="stylesheet" type="text/css" href="style.css">
			
		<style type="text/css">
			a:link { color:red; text-decoration:underline;}
			a:visited { color: yellow;}
			a:hover { color: black;}
		</style>
	</head>
	<body>
		<h1>درس اليوم: الروابط - HTML links</h1>
		<a href="https://arab-ict.blogspot.com/" target="_blank">أنا عبارة عن رابط خارجي</a><br>
		<a href="page2.html">أنا عبارة عن رابط داخلي</a>
		
		<hr>
		
		<p>انقر على الصورة لزيارة المدونة ==>
		<a href="https://arab-ict.blogspot.com/" target="_blank">
			<img src="arabict.png" alt="المدونة" style=" width:60px; height: 60px;">
		</a>
		</p>
	</body>
</html>

كود سورس الصفحة page2.html

كود بلغة HTML:

<!DOCTYPE html>
<html dir = "rtl">
	<head>
		<**** charset="UTF-8">
		<title>دورة تعليمية في ال HTML - ArabICT</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<style type="text/css">
		</style>
	</head>
	<body>
		<h1>درس اليوم: الروابط - HTML links</h1>
		<p>أنا الصفحة الثانية</p>
	</body>
</html>

ملف الكود سورس مرفق مع الموضوع يمكن تحميلة...

لقاؤنا سيتجدد بكم في دروس قادمة بحول الله...

MR_DZ · 2015-06-05, 20:35

شكرا جزيلا لك يا غالي

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