Les images
<img src = "http://url de l'image"> ceci affiche une image
Exemple de code (à partir d'une image trouvée sur google.ca) :
<img src = "http://juju.fouille.free.fr/drole%20(53).jpg"> Et voici le résultat affiché :
.jpg)
voir sans CSS
Pour créer un site web, il faut utiliser 2 langages (qui ne sont pas vraiment des langages mais ça c'est un débat geeko-philosophique !)
Pour un site web, il y a donc au minimum 2 fichiers :
Pour de bonnes pratiques de programmation web, il est recommandé de ne jamais écrire de code css dans une page html.
Pourquoi ?
Imaginez que votre site web contient une vingtaine de pages (donc 20 fichiers html) et que soudainement vous décidez que le design ne vous plaît plus et vous voulez changer les couleurs, les polices, les tailles etc. Allez vous modifier le style css dans cacune des 20 pages html ? Non, c'est beaucoup trop fastidieux ! En programmation le moins est le mieux ! Heureusement, le style de TOUT votre site web est contenu dans un seul fichier css, donc un seul fichier à modifier pour changer complètement l'aspect de votre site web !
Un site sans CSS n'a aucune mise en page (ou presque).
Cliquez ici pour visiter le site sans CSS.
Commençons par travailler dans le fichier index.html.
Chaque fichier html commence par les lignes suivantes :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apprendre le web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Ces lignes permettent au navigateur de comprendre quel type d'alphabet afficher, quel type d'écran prendre en charge, où trouver votre feuille de style css entre autre.
Tout le contenu de votre page web sera écrit entre les deux balises :
<body>
Contenu de votre site web (line, images, texte, vidéos etc)
</body>
En effet, en HTML, tous les éléments (titres, paragraphes, liens, images, tableaux, listes etc) sont indiqués entre 2 balises.
Chaque balise peut se retrouver l'une dans l'autre, un peu comme une poupée russe.
Imaginez en effet une page web comme une poupée russe : la plus grosse poupée est obligatoirement la balise <html>, qui englobe les informations pour le navigateur et le contenu de votre page proprement dit, vient ensuite une plus petite poupée également obligatoire, la balise <body>, qui englobe tout ce qui sera affiché à l'écran. Puis, dans la balise body viendront plusieures autres petites poupées, des paragraphes, des titres, des images, etc....
Exemple :
<p> la balise p permet d'écrire un paragraphe </p>
Remarquez que la balise s'ouvre au début (<p>) et se ferme à la fin (</p>).C'est une balise dite "fermante". Il y en a beaucoup de différentes. Nous les verrons bientôt !
Certaines balises n'ont pas besoin d'être fermées, elles sont "non-fermantes". Il y en a très peu, nous en verrons 2.
Pourquoi des balises ?
Lorsque votre navigateur lit et interprète le code HTML, il sait comment afficher chaque éléments : les titres en gros, les paragraphes plus petits, les liens sous-lignés, les images affichées... c'est la seule mise en page qu'offre le langage HTML
les balises permettent également à voyre navigateur (explorer, chrome, firefox) de "comprendre" votre page web et le contenu le plus important.
<h1> Ceci est une balise de titre de niveau 1 </h1>
<h2> Ceci est une balise de titre de niveau 2 </h2>
<h3> Ceci est une balise de titre de niveau 3 </h3>
<p> Ceci est une balise de paragraphe </p>
Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe ! Ceci est un paragraphe !
voir sans CSSCeci est une balise de retour <br>
à la ligne
Ceci est un paragraphe !
Ceci est un
paragraphe ! Ceci
est un paragraphe !
<i> Ceci est une balise de texte italique </i>
Ce texte est en italique
Remarque : cette balise doit être elle même contenue dans un paragraphe pour être bien affichée par tous les types de navigateurs
Exemple de code :
<p> ouverture du paragraphe <i> texte en italique </i> fermeture du paragraphe </p>
Qui va s'afficher comme ceci :
ouverture du paragraphe texte en italique fin de l'italique puis fermeture du paragraphe
voir sans CSS<strong> Ceci est une balise de texte gras </strong>
Remarque : cette balise doit être elle même contenue dans un paragraphe pour être bien affichée par tous les types de navigateurs
Exemple de code :
<p> ouverture du paragraphe <strong> texte gras </strong> fermeture du paragraphe </p>
Qui va s'afficher comme ceci :
ouverture du paragraphe texte gras fin de l'italique puis fermeture du paragraphe
voir sans CSS<a href = "https://www.google.ca/"> Ceci est un lien vers google.ca </a>
<img src = "http://url de l'image"> ceci affiche une image
<img src = "http://juju.fouille.free.fr/drole%20(53).jpg">
L'intégralité de la mise en forme de ce site est faite grâce au CSS
Mettre en forme une page web avec css est relativement simple.
Dans le fichier style.css, il suffira de rappeler le nom de la balise pour lui appliquer un style.
Il existe des centaines de style prédéfinis, Parfois on se demande comment changer telle couleur, ou centrer tel élément. Allez donc visiter ce site web de temps en temps pour obtenir un glossaire des syles css disponibles avec des exemples de code :
w3scools.com
Voici un exemple. je veux appliquer une coleur de fond à toute ma page web. La page web dans son entier étant comrpise entre les balises <body> </body>.
body {
background-color: rgb(180, 200, 250);
}
Essayez de mettre de la couleur à vos titres ! Essayez la classe css "color".
Voici un glossaire de quelques classes css utiles pour de la mise en page de base :