Skip to content

Commit 75f2545

Browse files
AmbratolmAmbratolm
Ambratolm
authored and
Ambratolm
committed
init
0 parents  commit 75f2545

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2349
-0
lines changed

‎HTML-CSS-Course/BioRhyme-Regular.ttf

100 KB
Binary file not shown.

‎HTML-CSS-Course/ECG.png

30.9 KB
Loading

‎HTML-CSS-Course/Exemple.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Tête ====================================== -->
4+
<head>
5+
<title>exemple</title>
6+
<meta charset="utf-8">
7+
</head>
8+
<!-- Corps ====================================== -->
9+
<body>
10+
<H3 id="haut"><a href="Exemple_2.html">Voir Exemple 2</a></H3>
11+
<H3><a href="Exemple_3.html">Voir Exemple 3</a></H3>
12+
<h1>Lorem Ipsum</h1>
13+
<h2>Lorem Ipsum</h2>
14+
<p>Aller en <a href="#bas">BAS</a></p>
15+
<h3>Lorem Ipsum</h3>
16+
<p>Lorem ipsum dolor <a href="http://wikipedia.org">sit</a> amet, consectetur adipiscing elit.<br>Vestibulum nec mi purus.</p>
17+
<hr>
18+
<h1>Lorem Ipsum</h1>
19+
<p>ellentesque eros lectus, condimentum eu dolor eget, varius sagittis libero. In hac habitasse platea dictumst.</p>
20+
<pre>
21+
*-----------------------------------------------------------------------------------------------------*
22+
| [Lorem Ipsum] "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
23+
| consectetur, adipisci velit..."
24+
*-----------------------------------------------------------------------------------------------------*
25+
</pre>
26+
<!-- ========================================================== -->
27+
<p>Donec <strong>ullamcorper</strong> dolor ac eros <em>pulvinar</em>, sed <mark>vehicula</mark> leo vestibulum.</p>
28+
<!-- ========================================================== -->
29+
<h1>Liste:</h1>
30+
<ul>
31+
<li>viverra</li>
32+
<li>arcu</li>
33+
<li>aliquet</li>
34+
<li>dapibus</li>
35+
</ul>
36+
<!-- ========================================================== -->
37+
<ol type="I">
38+
<li>viverra</li>
39+
<li>arcu</li>
40+
<li>aliquet</li>
41+
<li>dapibus</li>
42+
</ol>
43+
<!-- ========================================================== -->
44+
<dl>
45+
<dt>viverra</dt> <dd>quisquam est qui</dd>
46+
<dt>ipsum</dt> <dd>ddadipisci velit</dd>
47+
<dt>dolor</dt> <dd>dolor sit amet</dd>
48+
</dl>
49+
<!-- ========================================================== -->
50+
<ol>
51+
<li>Item_1
52+
<ul>
53+
<li>item_1_1</li>
54+
<li>item_1_2</li>
55+
<li>item_1_3
56+
<dl>
57+
<dt>item_1_3_text_1</dt> <dd>item_1_3_description_1</dd>
58+
<dt>item_1_3_text_2</dt> <dd>item_1_3_description_2</dd>
59+
</dl>
60+
</li>
61+
</ul>
62+
</li>
63+
<li>Item_2</li>
64+
<li>Item_3</li>
65+
</ol>
66+
<p id="bas">Aller en <a href="#haut">HAUT</a></p>
67+
<!-- ========================================================== -->
68+
<!-- ========================================================== -->
69+
<!-- ========================================================== -->
70+
<!-- ========================================================== -->
71+
<!-- ========================================================== -->
72+
<!-- ========================================================== -->
73+
<!-- ========================================================== -->
74+
<!-- ========================================================== -->
75+
<!-- ========================================================== -->
76+
<!-- ========================================================== -->
77+
<!-- ========================================================== -->
78+
<!-- ========================================================== -->
79+
<!-- ========================================================== -->
80+
<!-- ========================================================== -->
81+
<!-- ========================================================== -->
82+
<!-- ========================================================== -->
83+
<!-- ========================================================== -->
84+
</body>
85+
</html>

‎HTML-CSS-Course/Exemple_10.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Exemple 10 (Final)</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" type="text/css" href="exemple_8.css">
9+
</head>
10+
11+
<body>
12+
13+
<div id="header">
14+
<button>Attack</button>
15+
<button>Defense</button>
16+
<button>Mobility</button>
17+
<button id="menu">|||</button>
18+
</div>
19+
<br>
20+
<div id="bloc_gauche"></div>
21+
<div id="bloc_central"></div>
22+
<div id="bloc_droit"></div>
23+
<br><br>
24+
<div id="footer"></div>
25+
</body>
26+
27+
</html>

‎HTML-CSS-Course/Exemple_2.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Exemple 2</title>
5+
<meta charset="UTF-8">
6+
<style>
7+
body
8+
{
9+
background-color: orange;
10+
color: green;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<H3><a href="Exemple.html" target="_blank">Voir Exemple 1</a></H3>
16+
<H4><a href="Exemple.html" download>Télécharger Exemple 1</a></H4>
17+
<H3><a href="Exemple_3.html">Voir Exemple 3</a></H3>
18+
<h5 style="color: red; background-color: black">Special !</h5>
19+
20+
<p>Contacter Kenza El hafid par <a href="mailto:elhafid.kenza@gmail.com">Email</a> </p>
21+
<a href="http://goo.gl/vwk3y7" target="_blank"><img src="pic.jpg" alt="Exemple d'image"></a>
22+
<p>&lt;ITEM1&gt; &amp; &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &lt;ITEM2&gt;</p>
23+
</body>
24+
</html>

‎HTML-CSS-Course/Exemple_3.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DocTYPE html>
2+
<html>
3+
<head>
4+
<title>Exemple 3</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="exemple.css">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bungee+Shade|Cairo">
8+
</head>
9+
<body>
10+
<p><a href="Exemple.html">Voir Exemple 1</a> | <a href="Exemple_2.html">Voir Exemple 2</a></p>
11+
<h1>السلام عليكم و رحمة الله و بركاته</h1>
12+
<div id="d1">
13+
<p class="msg">Type here <span class="msg_word">message</span> content</p>
14+
<p class="msg">Type here <span class="msg_word">message</span> content</p>
15+
<p id="i">Type here <span class="msg_word">message</span> content</p>
16+
</div>
17+
<p id="A">Un grand pas pour l'humanité !</p>
18+
</body>
19+
</html>

‎HTML-CSS-Course/Exemple_4.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<title>Exemple 4</title>
6+
<meta charset="UTF-8">
7+
<link rel="stylesheet" type="text/css" href="exemple_2.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo+2">
9+
</head>
10+
11+
<body>
12+
<div class="A">
13+
<h1 class="t1">Exemple de titre</h1>
14+
<p class="p1">Exemple de <a id="a1" href="https://fr.wikipedia.org/wiki/Paragraphe" target="_blank">paragraphe</a>, c'est un exemple de paragraphe.</p>
15+
<p class="p2">C'est certainement un exemple de paragraphe.</p>
16+
</div>
17+
</body>
18+
19+
</html>

‎HTML-CSS-Course/Exemple_5.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<title>Exemple 5</title>
6+
<meta charset="UTF-8">
7+
<link rel="stylesheet" type="text/css" href="exemple_3.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yatra+One">
9+
</head>
10+
11+
<body>
12+
<img src="Pikachu.png" id="Pikachu">
13+
<br>
14+
15+
<div id="Division1">
16+
<h2>Liste:</h2>
17+
<ul>
18+
<li>viverra</li>
19+
<li>arcu</li>
20+
<li>aliquet</li>
21+
<li>dapibus</li>
22+
</ul>
23+
</div>
24+
25+
<div class="Division">
26+
<h1 class="Titre">Paragraphe — Wikipédia</h1>
27+
<p class="Paragraphe-1">
28+
Un paragraphe est une section de texte en prose vouée au développement d'un point particulier souvent au moyen de plusieurs phrases, dans la continuité du précédent et du suivant.
29+
</p>
30+
<p class="Paragraphe-2">
31+
Sur le plan typographique, le début d'un paragraphe est marqué par un léger renfoncement (alinéa) ou par un saut de ligne.
32+
</p>
33+
<p class="Paragraphe-3">
34+
Le symbole du paragraphe est §. La fin d'un paragraphe était autrefois indiquée par un pied-de-mouche (¶).
35+
</p>
36+
<p>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br><br>... Fin de la page.</p>
37+
</div>
38+
39+
<div id="Division2">
40+
<ol type="I">
41+
<li>viverra</li>
42+
<li>arcu</li>
43+
<li>aliquet</li>
44+
<li>dapibus</li>
45+
</ol>
46+
</div>
47+
</body>
48+
49+
</html>

‎HTML-CSS-Course/Exemple_6.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Exemple 6</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="exemple_4.css">
7+
<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
<H1 class="t1">بسم الله الرحمان الرجيم</H1>
12+
13+
<div id="div1">
14+
<p class="p1">
15+
Un texte est une série orale ou écrite de mots perçus comme constituant un ensemble cohérent, porteur de sens et utilisant les structures propres à une langue. </p>
16+
<p class="p2">
17+
Un texte n'a pas de longueur déterminée sauf dans le cas de poèmes à forme fixe comme le sonnet ou le haïku. </p>
18+
<p class="p3">
19+
L'étude formelle des textes s'appuie sur la linguistique qui est l'approche scientifique du langage. </p>
20+
21+
<p class="p_1">
22+
Un texte est une série orale ou écrite de mots perçus comme constituant un ensemble cohérent, porteur de sens et utilisant les structures propres à une langue. </p>
23+
<p class="p_2">
24+
Un texte n'a pas de longueur déterminée sauf dans le cas de poèmes à forme fixe comme le sonnet ou le haïku. </p>
25+
<p class="p_3">
26+
L'étude formelle des textes s'appuie sur la linguistique qui est l'approche scientifique du langage. </p>
27+
</div>
28+
29+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
30+
<p class="p4">
31+
الحمد لله
32+
</p>
33+
</body>
34+
</html>

‎HTML-CSS-Course/Exemple_7.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Exemple 7</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" type="text/css" href="exemple_5.css">
7+
<link href="https://fonts.googleapis.com/css?family=BioRhyme" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
<h1>Tableau</h1>
12+
<table id="table1">
13+
<tr>
14+
<th>N°</th>
15+
<th>Prénom</th>
16+
<th>Nom</th>
17+
</tr>
18+
<tr>
19+
<td>1</td>
20+
<td>My</td>
21+
<td>Beloved</td>
22+
</tr>
23+
<tr>
24+
<td>2</td>
25+
<td>Kenza</td>
26+
<td>El hafid</td>
27+
</tr>
28+
<tr>
29+
<td>3</td>
30+
<td>Chapotiate</td>
31+
<td>El halawi</td>
32+
</tr>
33+
</table>
34+
35+
<h1>Tableau structuré</h1>
36+
<table>
37+
<thead>
38+
<tr>
39+
<th>Titre ↓</th>
40+
<th>Date de sortie ↓</th>
41+
<th>Genres ↓</th>
42+
</tr>
43+
</thead>
44+
<tfoot>
45+
<tr>
46+
<td>Nom ↑</td>
47+
<td>Année ↑</td>
48+
<td>Type ↑</td>
49+
</tr>
50+
</tfoot>
51+
<tbody>
52+
<tr>
53+
<td>Le Parrain</td>
54+
<td>1972</td>
55+
<td>Policier, Drame </td>
56+
</tr>
57+
<tr>
58+
<td>Le Seigneur des anneaux</td>
59+
<td>2001</td>
60+
<td>Fantastique, Aventure</td>
61+
</tr>
62+
<tr>
63+
<td>Gladiateur</td>
64+
<td>2000</td>
65+
<td>Péplum, Aventure</td>
66+
</tr>
67+
<tr>
68+
<td>Le Dictateur</td>
69+
<td>1945</td>
70+
<td>Comédie</td>
71+
</tr>
72+
<tr>
73+
<td>Le Mécano de la Générale</td>
74+
<td>inconnue</td>
75+
<td>Action, Comédie</td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
80+
<h1>Opérations avancées</h1>
81+
<table id="table2">
82+
<tr>
83+
<th rowspan="4">ME</th>
84+
</tr>
85+
<tr>
86+
<td colspan="4">PERSONAL</td>
87+
<td colspan="4">PROFESSIONAL</td>
88+
</tr>
89+
<tr>
90+
<td colspan="2">MIND</td>
91+
<td colspan="2">PHYSIQUE</td>
92+
<td colspan="2">CAREER</td>
93+
<td colspan="2">FORTUNE</td>
94+
</tr>
95+
<tr>
96+
<td>Personality</td>
97+
<td>Relationships</td>
98+
<td>Body</td>
99+
<td>Wear</td>
100+
<td>Projects</td>
101+
<td>Jobs</td>
102+
<td>Money</td>
103+
<td>Properties</td>
104+
</tr>
105+
<caption>Légende du tableau</caption>
106+
</table>
107+
108+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
109+
<p style="text-align:center;color:white">(c) Copyright ECG 2016-2017</p>
110+
</body>
111+
112+
</html>

0 commit comments

Comments
 (0)