ⵜⵉⵡⵉⵙⵉ 1

Ajouter des rectangles couleurs :

1. ⴰⴷ ⵏⴰⵔⵉ ⴳ ⵓⴳⵏⵙⵓ ⵏ ⴰⵎⴽⴽⵓⵥ ⴰⵣⴳⴳⴰⵖ :
<div class="redbox">ⵜⴰⵏⵎⵎⵉⵔⵜ ⵔⵉⵖ ⴰⴷ ⵍⵎⴷⵖ ⵜⴰⵎⴰⵣⵉⵖⵜ</div>
ⵔⴰⴷ ⵉⵉⴼⴰⵖ ⵖⵉⴽ ⴰ :
ⵜⴰⵏⵎⵎⵉⵔⵜ ⵔⵉⵖ ⴰⴷ ⵍⵎⴷⵖⵜⴰⵎⴰⵣⵉⵖⵜ

2. ⴰⴷ ⵏⴰⵔⵉ ⴳ ⵓⴳⵏⵙⵓ ⵏ ⴰⵎⴽⴽⵓⵥ ⴰⵥⵔⵡⴰⵍ :
<div class="bluebox">ⵉⵙ ⵜⵙⵙⵏⴷ ⴰⴷ ⵜⵙⴰⵡⴰⵍⵜ ⵙ ⵜⵎⴰⵣⵉⵖⵜ ?</div>
ⵔⴰⴷ ⵉⵉⴼⴰⵖ ⵖⵉⴽ ⴰ :
ⵉⵙ ⵜⵙⵙⴷ ⴰⴷ ⵜⵙ ⴰⵡⴰⵍⵜ ⵙ ⵜⵎⴰⵣⵉⵖⵜ ?

3. ⴰⴷ ⵏⴰⵔⵉ ⴳ ⵓⴳⵏⵙⵓ ⵏ ⴰⵎⴽⴽⵓⵥⴰⵣⴳⴳⴰ ⵓⵎⵍⵉⵍ :
<div class="blondbox">
ⴰⵔⵎⴰⵙ compréhension
</div>
ⵔⴰⴷ ⵉⵉⴼⴰⵖ ⵖⵉⴽ ⴰ :
ⴰⵔⵎⴰⵙ compréhnsion


Ajouter les vidéos :

1. copier ID de la vidéo youtube, par exep:  https://www.youtube.com/watch?v=Sw27DJbWzJQ  (ID c'est la partie en rouge)
2. copier l'ID et le remplacer dans le code qui suit, 3. puis insérer le code dans html :
<div class="video-container"><iframe allowfullscreen="" frameborder="0" height="360" src=" " data-src="https://www.youtube.com/embed/XXXXXXX?rel=0&amp;showinfo=0" width="640"></iframe></div>
XXXXXXX est l'ID de la vidéo
Pour obtenir le lien url de l'image de la vidéo pour l'insérer dans le text copier ce lien et remplacer l'ID (en rouge) :
https://img.youtube.com/vi/xxxxxxxxxxx/hqdefault.jpg

Dessiner un tableau : code :


<div style="overflow-x:scroll;"><table ><tbody><caption>ⴰⵏⴰⵡⵏ ⵏ ⵓⵙⴼⵜⵉ Thèmes verbaux</caption> <tr><td> collone 1 </td><td> collone 2 </td><td> collone 3 </td> </tr> <tr><th> élément x1  </th><th> élément y1 </th><th> élément z1</th></tr> <tr><th> élément  x2</th><th> élément y2</th><th> élément z2</th></tr> <tr><th> élément  x3</th><th> élément y3</th><th> élément z3</th></tr> <tr><th> élément  x4</th><th> élément y4</th><th> élément z4</th></tr> <tr><th> élément  x5</th><th> élément y5</th><th> élément z5</th></tr> <tr><th> élément  x6</th></tr></tbody></table></div>

Le résultat du tableau qu'on vient d'écrire :
ⴰⵏⴰⵡⵏ ⵏ ⵓⵙⴼⵜⵉ Thèmes verbaux
collone 1 collone 2 collone 3
élément x1 élément y1 élément z1
élément x2élément y2élément z2
élément x3élément y3élément z3
élément x4élément y4élément z4
élément x5élément y5élément z5
élément x6


Other characteristics  of tables : 
caption-side Property : 
table {caption-side: bottom;} or table {caption-side: top;}
empty-cells Property : 
table {empty-cells: hide;}

<thead> added after <table> : 
<thead>
<tr> <th>element1</th> </tr>
</thead>
<tfoot> added after </thead> or <table> :
<tfoot>
<tr> <th>element1</th> </tr>
</tfoot>
borders : 
table {border-spacing: 0.5rem; border-collapse: collapse;}
Connecting Cells : 
colspan and rowspan, they accept any positive integer 2 or larger. If a td has a colspan of 2 (i.e. <td colspan="2">) it will still be a single cell, but it will take up the space of two cells in a row horizontally. Likewise with rowspan, but vertically.
highlight the column n° 3 : 
col:nth-child(3) {background: yellow;}


more about tables : https://www.w3schools.com/css/css_table.asp


ⵜⵉⵔⵔⴰ التحرير 
 : (الصورة  1 (اضغط على الصور لتكبيرها
1-(عنوان الموضوع (سيظهر لمحركات البحث كما في الصورة3
2- مكان تحرير النص او الموضوع
4- و جافاسكريبت ... و تعديل اكواد المحتوى  html لاضافة اكواد مثل  
5- ... (لون النص (تلقائي لكن يمكك تغييره بالنسبة للكلمات و الجمل  
6- ... اضافة الروابط الى الجمل و الكلمت 
7- url اضافة الصور اما برفعها من الحاسوب مباشرة او عبر رابط 
الصورة  2
8- (لنشر الموضوع (تأكد ان كل شيء في حالة جيدة قبل النشر
9- لحفض الموضوع او ابقاءه في المسودة
10- معاينة الموضوع - عرض مسبق
11- اغلاق صندوق التحرير 
13- ينبغي تحريره بعناية و بالحروف الانجليزية فقط  كما في الصورة 4 permalink  رابط الموضوع  
12- الكلمات الدلالية اي تصنيف الموضوع - اضف / اختر فقط الكلمات التي تصنف الموضوع (تظهر لمحركات البحث كما في الرقم 12 الصورة 3 )
14- هنا تكتب وصف قصير للموضوع و هو الوصف الذي يظهر عند مشاركة الموضوغ في الفيسبوك و في غوغل (تظهر كما في الرقم 14 الصورة 3 )
15- (لتعديل توقيت / تاريخ الموضوع (يرجى عدم تغييره و تركه تلقائيا 
16- (المكان / المدينة التي يتواجد بها المحرر/ الكاتب (يفضل تركه تلقائيا
17- (حرفيا او تفسيرها (يفضل تركها تلقائيا html  خيارات الموضوع : اختيار السماح/عدم السماح بالتعليقات . اضهار اكواد 
18- (خاصة بمحركات البحث (يرجى تركها تلقائيا و عدم تغييرها
: الصورة  3
1- هذا هو العنوان كما يضهر في محركات البحث 
12- (هذه هي الكلمة الدلالية / تصنيف الموضوع (بالاخضر
14- هذا هو الوصف الذي يضهر لمحركات البحث
: الصورة 4
13- الخاص بالموضوع- يجب ان بكتب بالحروف الانجليزية و تعويض مكان الفراغ بعارضة( - ) و اختيار الكلمات المعبرة عن الموضوع url هذا هو رابط  
.ملاحظة : بالنسبة للخط و الحجم  يرجى تركهما تلقائيا

D

ⵙⵎⴷ ⴰⵅⴼⴰⵡⴰⵍ

ⴳ ⴰⵎⵣⵡⴰⵔⵓ ⵙ ⵜⵅⴼⴰⵡⵍⴷ !