| CM | TD | TP |
|---|---|---|
| 0 | 4 × 2 | 8 × 2 |
Internet est un grand réseau d'ordinateurs qui communiquent avec le protocole TCP/IP. Cela gère les e-mails, le FTP et le WWW. Le WWW concerne uniquement les pages web.
Il y a deux catégories dans le développement web.
| Front-end | Back-end |
|---|---|
| coté client (utilisateur) | coté serveur (hébergeur) |
| HTML, CSS et JavaScript | PHP, Java, Python, Ruby, C#, etc. |
| Afficher le contenu | Générer le contenu |
Un développeur est dit full stack s'il fait les deux.
HTML est un langage de balisage qui s'occupe du contenu (texte, images, vidéos), de sa sémantique (fonction, importance), et des hyper-liens.
CSS est un langage qui décrit la présentation du document HTML (mise en page, couleurs, polices, animations).
JavaScript (ou JS) est un langage de programmation pour rendre les pages web interactives.
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-color: red;
}
p {
margin: 10px 0;
padding: 5px;
border: 1px solid #999;
}
h {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
}
Un document HTML (avec extension .html) contient des éléments (elements), délimités par une balise (tag) ouvrante et une balise fermante.
Il existe plus de 100 éléments différents en HTML5.
Ce qui se trouve entre les balises est le contenu.
Un élément peut contenir des attributs, comme class, id, style ou href.
Un document CSS (avec extension .css) contient des règles (rules), avec un
sélecteur (selectors) suivi de ses déclarations (declarations), entre accolades.
Le sélecteur permet d'identifier un type d'élément HTML, et les règles définissent comment il est affiché.
Chaque déclaration est formé par une propriété (property) suivie d'une valeur (value).
Il existe beaucoup de sélecteurs, propriétés et valeurs.
HTML et CSS sont les bases du développement web front-end.
Faire des feuilles de style CSS pour avoir une belle page web peut être pénible, donc il faut mieux utiliser un framework.
Dans ce module, on va utiliser Bootstrap.
Bootstrap est un (le ?) framework, une plateforme, un ensemble de règles CSS et de scripts JS pour créer des sites web beaux, responsives, et avec des animations.
Bootstrap a été conçu par Mark Otto et Jacob Thornton. Bien que Bootstrap ait été créé chez Twitter, c'est libre (licence MIT) et open source.
| version | date |
|---|---|
| 4.1.3 | 24 juillet 2018 |
| 4.1.2 | 12 juillet 2018 |
| 4.1.1 | 30 avril 2018 |
| 4.1 | 9 avril 2018 |
| 4.0 | 18 janvier 2018 |
| 3.0 | 19 août 2013 |
Donc ça ne devrait pas trop changer d'ici à 2023 ?
class dans les éléments HTML avec des noms définis dans Bootstrap
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<blockquote class="blockquote">
<p>
Nullam quis risus eget urna mollis ornare vel eu leo.
Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
<footer class="blockquote-footer">
Cursus Ridiculus
Nullam : <cite title="Titre de la source">Fusce Quam</cite>.
</footer>
</blockquote>
<div class="alert alert-primary" role="alert">
Vestibulum Tortor Euismod Porta Egestas
</div>
<p>Un hippopotame :</p>
<img src="hippopotame.jpg" class="img-thumbnail" alt="Un hippopotame">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Et encore plus.
Il y a 4 sections principales :
Soumettre une bonne (!) question sur ce qu'on a vu aujourd'hui dans «Question à rendre du TD n° 1»