- HTML
- CSS
- SVG
Langage de description de textes
HTML : HyperText Markup Language<balise>...</balise><balise paramètre(s)>Le navigateur traduit selon sa propre interprétation des recommandations le contenu de la page
<!doctype html>
<html>
<head>
<!--
méta-données sur la page :
- titre (i.e. nom de l'onglet)
- encodage, auteur, mots-clés, description
- ...
-->
</head>
<body>
<!--
corps de la page (ce qui sera donc affiché)
- en-tête et pied de page, menu
- contenu
- ...
-->
</body>
</html>
<title>Page d'exemple HTML</title>
<!doctype html>
<meta charset = "utf-8">
UTF-8)<meta name = "author" content = "FX Jollois"> <meta name = "keywords" content = "html, css, truc super bien"> <meta name = "description" content = "Super cours !!">
<script></script>
JS (ou importation du fichier source avec src="script.js" en paramètre)<style></style>
CSS de la page<link rel = "stylesheet" href="style.css">
CSSLes balises script et style peuvent aussi être intégré dans le corps (dans la balise body donc), selon les besoins.
div :
span :
div
Toujours un div, dans le premier div
span
Idem (un div), mais ici avec
un span et
un autre span
span avec un
div dedans| balise | définition |
|---|---|
header et footer |
en-tête et pied de page |
nav |
menu de la page |
aside |
partie annexe de la page (type pub) |
section et article |
parties nous permettant d’insérer le contenu de la page |
h1, h2, ..., h6 |
titres et sous-titres |
strong et em |
mot(s) important(s) et un peu moins important(s) |
| balise | définition |
|---|---|
p |
paragraphe |
ol et ul |
liste ordonnée et non-ordonnée |
li |
élément d’une liste |
dl, dt et dd |
liste de définition, terme à définir et définition donc |
img |
insertion d’une image |
b et i |
mise en gras ou en italique |
| balise | définition |
|---|---|
pre |
texte préformaté sans compactage d’espaces |
code |
code en ligne |
br |
saut à la ligne |
hr |
ligne horizontale |
table |
tableau |
tr, td, th |
ligne, cellule et en-tête de colonnes d’un tableau |
Liste non-exhaustive !
Comme indiqué plus tôt, la structure de la page est connue sous le nom de DOM ou Document Object Model
Pour avoir une idée de ce qu’est le DOM :
Vous devriez voir la structure (qui correspond à l’indentation car le code de la page est proprement écrit)
<balise style = "code CSS">
CSS spécifique (cf plus bas) à l’élément<balise width = "valeur" height = "valeur">
valeur relative ou absolue)<balise class = "classe(s)">
CSS ou en JS)<balise id = "identifiant">
CSS et en JS)Langage de formattage d’éléments d’une page web, de tous types (texte, image, vidéo, dessin)
CSS : Cascading Style SheetsTrois possibilités de définition du style :
HTML avec le paramètre stylehead de la page (dans la balise <style>...</style>CSS à part (ou plusieurs), à appeler avec <link ...>Définition des valeurs de paramètres à appliquer sur les éléments correspondants au sélecteur (soit une balise, soit une classe, soit un identifiant)
balise {
paramètre: valeur;
...
}
.classe {
paramètre: valeur;
...
}
#identifiant {
paramètre: valeur;
...
}
CSS| Paramètre | Informations |
|---|---|
width, height |
largeur et hauteur |
color |
couleur de la police |
background-color |
couleur de fond |
font-size |
taille de la police |
text-align |
alignement du texte (justifié, centré, …) |
display |
type d’affichage (permet de passer du bloc à en ligne et inversement par exemple) |
z-index |
niveau d’affichage (grand = devant) |
CSSLes valeurs peuvent être déterminées :
px),cm u mm - à éviter)in)%),em)et ce span qui s’échappe
<div style = "background-color: #ddd;"> Une balise à fond gris, sauf pour <span style = "background-color: #fdb;">cette partie de phrase</span>, avec un <div style = "display: inline;">div qui n'en est pas un finalement</div> et ce <span style = "display: block; position: relative; bottom: -50px">span qui s'échappe</span> </div>
balise
h1, tous les p, …)baliseA baliseB
p strong sélectionne tous les strong qui sont dans un p), avec possibilité de compléter sur plusieurs niveauxbaliseA, baliseB
h1, h2 sélectionne les titres de niveau 1 et les titres de niveau 2).classe
.classe balise
.maClasse strong sélectionne tous les strong présents dans un élément de classe maClasse).classeA.classeB
balise.classe
div.maClasse sélectionne tous les div qui ont la classe maClasse)#identifiant
identifiant (via id = "identifiant)#identifiant balise
identifiant#identifiant.classe
identifiant uniquement lorsque la classe indiquée lui est affectée (intéressant lors d’une modification du DOM en JS par exemple)Les couleurs peuvent être déclarées :
#rrggbb ou #rgb : r pour rouge, g pour vert et b pour bleu)rgb(r, g, b) (les valeurs devant être entre 0 et 255)rgba(r, g, b, t) identique à la précédente avec la définition de la transparence (avec t entre 0 et 1)/*
Les commentaires se font avec cette syntaxe
(comme dans beaucoup d'autres langages)
*/
Voici la liste exhaustive des éléments CSS
Langage de description de dessin
XMLD3.js et beaucoup d’autres librairies de dessin sont basées sur cette technologie<svg width = "250" height = "50" style = "border: solid 1px black;">
<rect x = "50" y = "0" width = "200" height = "45" fill = "orange" />
</svg>
HTML
<balise> ... </balise><balise />(0,0) est situé en haut à gauche (comme pour un écran d’ordinateur)<rect x="" y="" width="" height="" /> pour un rectangle<circle cx="" cy="" r="" /> pour un cercle<ellispe cx="" cy="" rx="" ry="" /> pour une ellipse<line x1="" y1="" x2="" y2="" /> pour une ligne<text x="" y="">texte à insérer</text> pour du texteCSS<rect x= "0" y= "0" width="70" height="70" fill="purple"/> <rect x= "50" y= "25" width="70" height="70" fill="blue"/> <rect x="100" y= "50" width="70" height="70" fill="green"/> <rect x="150" y= "75" width="70" height="70" fill="yellow"/> <rect x="200" y="100" width="70" height="70" fill="red"/>
Sites permettant d’écrire du code web directement dans le navigateur, et de le partager :
Site permettant de faire plein choses très bien :
Sites d’apprentissage et forums