1Manipulation
- Ouvrir le fichier index.html avec Notepad++
- enregistrer-sous ce fichier sous le nom index-ALL.html dans HTML CSS/Site
2Observation
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Explication
- Ligne 1 = Chaque document sur votre ordinateur possède ce type de ligne.
Elle définit quel(s) logiciel(s) peut ouvrir/lire/modifier le document en question.
Ici, on spécifie à un navigateur qu’il s’agit d’un document HTML. Ainsi, Le navigateur ne va pas seulement lire le document, mais également l’interpréter et le restituer. - Lignes 2 à 46 = le document HTML
- Lignes 3 à 29 = <head> – l’entête du document
- qui contient des informations utiles pour les moteurs de recherche
- qui contient des informations nécessaires au navigateur pour restituer la page.
(Appel des polices, feuilles de styles utilisées, description du comportement à adopter vis-à-vis de l’écran du terminal)
- Lignes 30 à 45 = <body> – le corps de la page
(ce qui est vu par l’internaute – la restitution de la page interprétée par le navigateur) - Les lignes balisées par
<!--et-->sont des commentaires.
Elles sont utiles pour se retrouver dans le code et ne sont pas restituées à l’internaute lors de la consultation de la page.
3Modifications
<!DOCTYPE html> <html lang="en"> <head> <!-- Basic Page Needs –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta charset="utf-8"> <title>Your page title here :)</title> <meta name="description" content=""> <meta name="author" content=""> <!-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- FONT –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> <!-- CSS –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/skeleton.css"> <!-- Favicon –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="icon" type="image/png" href="images/favicon.png"> </head> <body> <!-- End Document –––––––––––––––––––––––––––––––––––––––––––––––––– --> </body> </html>
Consignes
Sélectionner tout ce qui se trouve de la ligne 32 à 41 et l’effacer.