Ré-introduction de l'html
L'html répond à une norme antérieure: le SGML
l'XML: également basé sur le SGML -> langage plus précis que l'html pour partager des données de manière plus précises entre les applications (ex: partage de documents, articles de journaux...). Standard de recommandations pour des bases de données. Par exemple le SVG est de l'XML et permet de décrire des dessins vectoriels. (voir cours SVG to print
Http: protocole conçu par Tim Berner Lee qui utilise la notion d'hypertexte introduite par Ted Nelson à travers son projet Xanadu qui interroge les relations rizomiques de l'information.
UTF-8: norme d'encodage des caractères typographiques étendue qui accepte, entre autres, les caractères non latins.
Les balises CSS peuvent avoir des attributs comme src, alt... <img alt="ceci est une image" src="chemin_image.jpg"> Rmq: Attention, pour remonter d'un dossier dans le chemin, utilise ../ sinon utiliser le chemin en absolu depuis "home" Les chaines de caractères sont délimitées par des guillemets pour que le navigateur ne les interprète pas comme une instruction.
Le code html vu au cours
<!doctype html>
<html>
<head>
<title>Corps machine</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<h1>Le titre de la page</h1>
<p class="intro">Le texte principal de ma page</p>
<section>
<h2>Le titre de la section</h2>
<article>
<h3>
Le titre de l'article
</h3>
<p id="paragraphe1" class="intro pouet">
<a href="page2.html">Le texte</a> de l'article (premier paragraphe)
</p>
<p>
Second paragraphe
<img alt="ceci est un raspberry" src="images/rpi.jpg">
</p>
<p>
Troisième paragraphe
</p>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>Le code css
body{
font-size:24pt;
font-family: "Times New Roman";
}
html, body, p{
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
margin:0;
padding:0;
}
p{
background-color:red;
}
main section article p{
background-color:yellow;
}
main section article h3:first-child{
background-color:grey;
}
main section article p:nth-child(2){
background-color:green;
}
#paragraphe1{
background-color:blue;
}
p.intro{
font-style: italic;
}
p.intro.pouet{
font-size:48pt;
}
