-
Notifications
You must be signed in to change notification settings - Fork 0
/
page3.html
151 lines (144 loc) · 8.15 KB
/
page3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--Accents-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--Compatibilitée Navigateu-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Etape 1 - Responsive-->
<title>La SNT</title>
<!-- Embed --> <!--Réseaux sociaux-->
<meta name="title" content="La SNT - 3">
<meta name="description" content="La SNT, présentée par les élèves de la Seconde C.">
<meta name="theme-color" content="#ffffff">
<!-- <meta name="og:image" content=""> -->
<!-- Reliage additionels -->
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700,800,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,600,700,800,900&display=swap" rel="stylesheet">
<!-- <link rel="shortcut icon" href="" type="image/x-icon"> -->
</head>
<body>
<section class="container glass">
<nav class="navbar navbar-expand-lg bg-transparent">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img alt="menuIcon" src="./menuIcon.svg" width="20px" height="20px" style="max-width: none !important;">
</button>
<img alt="logo" src="./ais_logo.png" width="100" height="100">
<div class="collapse navbar-collapse ais" id="navbarSupportedContent" style="margin-left: 20px !important">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Acceuil<span class="sr-only"></span></a>
</li>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Groupe
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Paolo Hajj</a>
<a class="dropdown-item">Gabriella Hassoun</a>
<a class="dropdown-item">Christelle Daccache</a>
<a class="dropdown-item">Owen Hardan</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Seconde C</a>
</div>
</div>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chapitres
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./pag1.html">SNT</a>
<a class="dropdown-item" href="./page2.html">Internet</a>
<a class="dropdown-item" href="./page3.html">HTML</a>
<a class="dropdown-item" href="./page4.html">Web</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./page5.html">Python</a>
</div>
</div>
</ul>
<button class="btn login-btn btn-outline-accent my-2 my-sm-0"><a href="https://www.ais.edu.lb" target="_blank" rel="noopener noreferrer">AIS</a></button>
</div>
</nav>
<div id="page1">
<div>
<h2 class="snt-title">
<b>
<u>
Qu’est-ce que l’HTML ?
</u>
</b>
</h2>
<p class="snt-p">
HTML (HyperText Markup Langage) est le bloc de construction le plus basic du WEB. Il est la plupart du temps accompagner par d’autre langage comme le CSS pour l’apparence/la présentation, ou le comportement par le JavaScript (JS). Il a débuté en 1991.
</p>
<center>
<img class="shema" src="./SNT.png" alt="Shema html">
</center>
</div>
<br>
<div>
<h2 class="snt-subtitle" style="color: rgb(222, 37, 37);">
<b>
<u>
Exemple de balisage :
</u>
</b>
</h2>
<pre class="code-block">
<tagname> Contenue de la balise. </tagname>
</pre>
<h3 class="snt-subtitle">
<b>
<u>
<i>
Un document HTML simple:
</i>
</u>
</b>
</h3>
<p class="snt-p">
<pre class="code-block">
<!DOCKTYPE html> <span class="num">(1)</span>
<html> <span class="num">(2)</span>
<head> <span class="num">(3)</span>
<title> Page Title </title> <span class="num">(4)</span>
</head> <span class="num">(3)</span>
<body> <span class="num">(5)</span>
<h1> My first Heading </h1> <span class="num">(6)</span>
<p> My first Paragraph </p> <span class="num">(7)</span>
</body> <span class="num">(5)</span>
</html> <span class="num">(2)</span>
</pre>
</p>
</div>
<div>
<h2 class="snt-title">
<b>
<u>
Exemple expliqué:
</u>
</b>
</h2>
<p class="snt-p">
<span class="num">(1):</span> La déclaration qui définit que ce document est un document HTML 5. <br>
<span class="num">(2):</span> L’élément racine d’une page HTML. <br>
<span class="num">(3):</span> Balise contenant de meta-informations sur la page HTML. <br>
<span class="num">(4):</span> L’élément qui spécifie un titre pour la page, il sera affiche sur la barre de titre de navigation. <br>
<span class="num">(5):</span> Définit le corps du document et est un contenue pour tous les objets visibles tels que les titres, les paragraphes et les images. <br>
<span class="num">(6):</span> Définit un grand titre. <br>
<span class="num">(7):</span> Définit un paragraphe.
</p>
</div>
<br><br><br><br>
<center>
<button class="suite"><a href="./page4.html">Suivant >></a></button>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</section>
</body>
</html>