المساعد الشخصي الرقمي

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

abdou_inf
2015-05-31, 01:31
السلام عليكم و رحمة الله و بركاته...

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

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

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

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

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

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

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

فما هو ال HTML ؟

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

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

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

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


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

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

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

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

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


<!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> الخاصة بكيفية انشاء العناوين...
الوسم <p> الذي يسمح لنا بانشاء فقرة...
الوسم <hr > الذي يسمح لنا بادراج فاصل أفقي بين أقسام الصفحة...
الوسم <br > الذي يتيح لنا عملية الرجوع الى السطر...
الوسم <a> الخاص بانشاء الوصلات (الروابط الالكترونية)....
الوسم <img> الذي يسمح لنا بادراج صورة على الصفحة...

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


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

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


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

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

<!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
الكود سورس المرفق:

<!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-ict@arab-ict.com<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
بسم الله الرحمن الرحيم

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

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

إن شاء الله

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

هل هناك فرق بين <br> و <br />


بــــــــــارك الله فـــــــــــــيك
abdou_inf
2015-06-01, 00:06
و عليكم السلام و رحمة الله و بركاته...
بارك الله فيك على التقييم و المرور الطيب...
بالنسبة للشروحات الكتابية...أفضل ان تطرح الأسئلة و أجيب...
فالفيديوهات فيها على ما أظن شرحا كافيا...
بالنسبة لسؤالك...هو سؤال مشهور...
و الاجابة هي ان <br> و <br/> و <br /> كلها تعمل نفس العمل...
فالاولى تستعمل في ال HTML
أما الثانية في ال XHTML الا انها صالحة في ال HTML
أما الثالثة فهي الجمع بين الاثنين <br> + <br/>
لكن يبقى الأفضل استعمال <br>
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

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

<!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

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



<!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

بخصوص السؤال حول ال</BR>

هناك les balise auto- fermante

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

وهانك ايضا ما يشبها
abdou_inf
2015-06-03, 01:05
دورة جيدة فقط

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

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

بخصوص السؤال حول ال</BR>

هناك les balise auto- fermante

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

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

أولا بارك الله في الجميع على مرورهم و على تعليقاتهم...
أشكرك أخي على الاضافة المميزة...لكن...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

<!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="http://arab-ict.blogspot.com/" target="_blank">أنا عبارة عن رابط خارجي</a><br>
<a href="page2.html">أنا عبارة عن رابط داخلي</a>

<hr>

<p>انقر على الصورة لزيارة المدونة ==>
<a href="http://arab-ict.blogspot.com/" target="_blank">
<img src="arabict.png" alt="المدونة" style=" width:60px; height: 60px;">
</a>
</p>
</body>
</html>


كود سورس الصفحة page2.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
شكرا جزيلا لك يا غالي
abdou_inf
2015-06-06, 22:04
العفو اخي.....
abdou_inf
2015-06-06, 22:06
عنوان الدرس: ادراج الصور - الجزء 1

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

اليكم الفيديو الخاص بالجزأ الأول...
https://www.youtube.com/watch?v=DCMxHDN65LY

الكود سورس الخاص بهذا الدرس من هنا:

<!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>درس اليوم: ادراج الصور</h1>
<img src="images/arabict.png" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>
<br>

<img src="https://img1.nawaret.com/2013/06/Lk_Arabische_Welt_001_Flaggen.jpg" alt="أنا صورة من خارج الموقع" style=" width:100px; height:100px; border: 2px solid black; float:left;">
أنا صورة موجودة على يمين النص
</body>

</html>



يتبع....الجزء الثاني...
طيباوي ابو علي1
2015-06-07, 07:30
بنسب لـــ

تلميحات

أعتقد أن الوسم تيتل title
أقوى من الوسم ألت alt
لان الوسم ألت alt إذا كانت في البرمجة عملية دمج بين لغتين لا تظهر تلميحات الوسم ألت alt

مثلا بين php و html


<img src="images/arabict.png" title="2014" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>




مارأيك
محمد بن أحمد أبو حذيفة
2015-06-07, 07:43
بارك الله فيك
abdou_inf
2015-06-07, 11:26
بنسب لـــ

تلميحات

أعتقد أن الوسم تيتل title
أقوى من الوسم ألت alt
لان الوسم ألت alt إذا كانت في البرمجة عملية دمج بين لغتين لا تظهر تلميحات الوسم ألت alt

مثلا بين php و html


<img src="images/arabict.png" title="2014" alt="أنا عنوان الصورة" width= 60 height = 60 border= 2>




مارأيك

السلام عليكم
أولا بارك الله فيك على الملاحظة...لكن أود التوضيح...
ف Alt لا تستعمل عادة من أجل التلميحات (Toop tips هذا ما تقصده بكلمة تلميحات؟) و إنما هو اختصار للجملة Alternative Text يعني النص البديل...في بعض الحالات لا تظهر الصور...اذا في مكان الصورة يقوم المتصفح باظهار قيمة الخاصية alt
أما بالنسبة للخاصية title فهي تستعمل مع أغلب الوسوم في ال Html و تحمل في قيمتها نص وصفي أو أي شيء آخر، فأغلب المتصفحات تقوم باظهار Tool tip (تلميح) ، لما نقوم بتمرير الفأرة على الوسم المعني بالخاصية tlte...
أتمنى أن أكون وفقت في الشرح...
abdou_inf
2015-06-07, 11:28
بارك الله فيك
و إياك أخي...
طيباوي ابو علي1
2015-06-08, 18:35
بارك الله فــــــــــــــيك
abdou_inf
2015-06-10, 11:32
و فيك بارك الله اخي...
bilal1995
2015-06-15, 20:11
شكرا جزيلا لك يا غالي
abdou_inf
2015-06-19, 05:08
السلام عليكم و رحمة الله و بركاته...
رمضانكم مبارك أولا...تقبل الله منا الصيام و القيام بمزيد من الأجر و الثواب...

عنوان الدرس: ادراج الصور - الجزء 2 - استعمال صورة كخارطة

في هذا الدرس سنكمل الجزء الثاني من كيفية ادراج الصور بالـ HTML

و اليوم سوف نرى كيف نستعمل صورة كخارطة...سنتعرف على وسمين جديدين هما:


الوسم الخاص بالتحديد الخارطة...
و الوسم الخاص بتحديد أجزاء الخارطة، يأخذ ثلاث قيم هي:



إما أن يكون دائرة Circle
أو مستطيل Rect
أو مضلّع Polygon

و للتعرف أكثر على كيفية التعامل مع هاته الوسوم، أترككم مع الفيديو التالي:
https://www.djelfa.info/watch?v=cxbiJ9JHJ0s
الكود سورس المستعمل:

<!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>درس اليوم: استعمال صورة كخارطة</h1>
<img src="galaxy.gif" alt="مجرة درب التبان" usemap="#galaxy" style="width:145px;height:126px;">

<map name="galaxy">
<area shape="rect" coords="0,0,82,126" alt="الشمس" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%B4%D9%85%D8%B3" target ="_blank"/>
<area shape="circle" coords="90,58,3" alt="عطارد" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B1%D9%8A%D8%AE" target ="_blank">
<area shape="circle" coords="124,58,8" alt="الزهرة" href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%B2%D9%87%D8%B1%D8%A9" target ="_blank">
</map>


</body>
</html>




و من هنا (http://www.w3schools.com/html/planets.gif) لتحميل صورة الخارطة المستعملة كمثال...
دمتم سالمين...
abdou_inf
2015-06-20, 21:08
عنوان الدرس: القوائم
في هذا الدرس سوف نتطرق الى كيفية عمل قوائم بال HTML

ففي ال HTML يوجد نوعان من القوائم:


القوائم الغير مرتبة (التى لا تهتم لترتيب العناصر)، تدرج عن طريق الوسم
القوائم المرتبة (التي تهتم لترتيب العناصر)، تدرج عن طريق الوسم


تابع الفيديو التالي لمزيد من التوضيحات:
https://www.youtube.com/watch?v=nRGGsWeb8XU
الكود سورس المستعمل في هذا الدرس:

<!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>درس اليوم:القوائم</h1>

<ul style="list-style-type:square">
<li>عمر</li>
<li>أحمد</li>
<li>خالد</li>
</ul>

<ol type="i">
<li>عمر</li>
<li>أحمد</li>
<li>خالد</li>
</ol>


</body>
</html>
Monir MAKADIR
2015-07-28, 15:37
شكراًً على تعبك