Formation HTML/CSS

C'est parfait les loulous maintenant !
On va continuer !

Balises de mise en valeur

Nous allons maintenant voir des balises qui permettent de mettre en valeur un mot, une phrase, une partie de phrase. En bref, tout ce qu'on veut comme texte !

Allez, sans plus attendre, les voici :
Mon texte mis en valeur

Code:

<strong>Mon texte mis en valeur</strong>

Les balises strong permettent de valoriser un texte, en le mettant en gras, jusqu'à maintenant.

Mon texte mis en valeur

Code:

<em>Mon texte mis en valeur</em>

Les balises em permettent de valoriser un texte, en le mettant en italique, jusqu'à maintenant.

Mon texte mis en valeur

Code:

<mark>Mon texte mis en valeur</mark>

Les balises mark permettent de valoriser un texte, en le surlignant, jusqu'à maintenant.

Ces 3 balises n'ont cependant pas la même "force de valorisation". Ce que je veux dire, c'est que l'une met plus en valeur que l'autre.
En effet, la balise strong est celle qu'il faut utiliser si on veut vraiment mettre beaucoup en valeur.
La balise em, est à utiliser quand on veut mettre moyennement en valeur.
Et la balise mark, est à utiliser, quand on veut légèrement mettre en valeur.

Donc, par ordre décroissant de force de valorisation, nous avons :
1 - <strong> </strong>
2 - <em> <:/em>
3 - <mark> </mark>>

Parlons maintenant d'un autre point. J'ai mis, pour chaque balise :

Explication de chaque balise a écrit:

jusqu'à maintenant.

Pourquoi ?
Hé bien, tout simplement car cela peut changer.
Peut être que sur un coup de tête, un jour, un développeur de google chrome, ou de mozilla firefox, va faire que les balises strong valorisent un texte en le mettant en bleu, souligné et avec une police de 25 pixels ^^.
Donc, le but de la balise strong n'est pas de mettre en gras, mais bien de mettre fortement en valeur.
Pareillement, le but de la balise em n'est pas de mettre en italique, mais bien de mettre moyennement en valeur.
Et enfin, le but de la balise mark n'est pas de surligner un texte, mais bien de le mettre légèrement en valeur.

Néanmoins, il existe des balises HTML, qui ont pour but de mettre en gras ou encore de mettre en italique, sans pour autant mettre en valeur quoi que ce soit.

Et ça tombe bien, nous allons les voir juste après ta réponse à ce message, si vous n'avez pas de question

PS : Maintenant, avec ce cours, vous avez donc la formelle interdiction d'utiliser des <em> et <strong> à tout bout de champ sans raison mouhahaha

J'ai tout compris, mais c'est normal qu'il n'y ait rien après le 1 -, 2 -, 3 - ?

Elu nous teste ! Bien joué Doudou ! =D

Voilà c'est corrigé xD. Désolé :p.

Continouons maintenant avec nos balises qui servent juste pour la mise en page (attention, ça reste tout de même du HTML, pas question de CSS ici)

Mon texte mis en gras

Code:

<b>Mon texte mis en gras</b>

Mise en page en mettant le texte en gras

Mon texte mis en italique

Code:

<i>Mon texte mis en italique</i>

Mise en page en mettant le texte en italique

Texte en ^exposant

Code:

Texte en ^exposant

Mise en page en mettant le texte en exposant (1/2px au dessus, et taille de la police plus petite)

Texte en _indice

Code:

Texte en _indice

Mise en page en mettant le texte en indice (1/2px en dessous, et taille de la police plus petite)

Texte souligné

Code:

Texte <u>souligné</u>

Mise en page en soulignant le texte.

Everything is ok ?

Everything is ok, Elu' :joker:

Ok dude =3

Alors on continue. Sortons un peu des balises qui touchent à du texte, pour parler des balises qui touchent à des images tiens !

Nous allons maintenant voir comment insérer une image dans une page html.

Pour mettre une image, la syntaxe est :

Code:

<img src="liendetonimage.extension" alt="Motsurlimage" />

Comme vous l'aurez remarqué mes padawans, c'est une balise orpheline.
Mais, il y a des trucs bizarres qu'on n'a pas encore vus, sous la forme mot="qqchose". Ces "trucs bizarres" sont appelés plus scientifiquement, attributs de la balise. Des attributs permettent de renseigner des informations supplémentaires quant à une balise.
Vous comprendrez sûrement mieux avec les attributs de notre balise <img />
Elle a deux attributs :
src="" : cet attribut renseigne le lien de l'image qu'on veut afficher (par exemple : http://hostingpics.net/image.png)
alt="" : cet attribut est obligatoire et renseigne l'image (par exemple, si notre image représente une tortue, dans notre attribut alt, on aura "Tortue")

Il est possible d'avoir un autre attribut que j'estime important :
title="" : c'est ce qui s'affichera au survol de la souris sur l'image. Il permet enfin de renseigner un petit mot qui s'affichera quand on passera par dessus la photo.

Voyons voir ce code :

Code:

<img src="http://r29.imgfast.net/users/2916/61/52/62/avatars/1-52.jpg" alt="Mon avatar" title="Avatar de Eluknow" />

Cela donne :

Survolez l'image quelques secondes, et regardez ce qu'il s'affiche .

Voilà, nous avons donc notre première balise permettant d'afficher une image, et nous avons la notion d'attributs.

Note : L'attribut alt est obligatoire, mais son contenu peut être omis. Par exemple, il est possible de faire : alt="". Cependant, je vous le déconseille fortement. Je suis dans l'optique de toujours mettre le alt avec du contenu. Car, si votre image par exemple ne veut pas se charger, que vous vous êtes trompés, c'est le alt qui sera affiché. Et, si un malvoyant vient sur votre site/forum ou blog, son logiciel de lecture lit les alt des images. Vous vous doutez bien qu'il ne peut pas lire l'image en elle même ^^

C'est tout bon ?

Oui, tout est ok, maître

Ok pour moi aussi patron ! =D

Si tout est ok, on va passer aux liens.

Un lien est un texte/un mot, qui te permet d'accéder à un autre site, à une autre page sur le web.

La syntaxe :

Code:

<a href="tonlien.fr">Texte du lien</a>

Texte du lien

On va examiner tout cela :
href="tonlien.fr" est un attribut de la balise, qui permet de renseigner la page web sur laquelle on doit arriver quand on clique sur le lien. Et le lien est "Texte du lien", dans le cas présent.

Un autre exemple :

Code:

<a href="school-of-pub.net">SoP</a>

SoP
Et si je clique dessus, ça m'emmène sur school-of-progress.net (c'est notre partenaire :$)

Mais là, y'a un petit soucis.
Si on clique sur le lien, ça nous change la page actuelle. Donc assez gênant, si on met un lien vers un autre site... Car on perd l'utilisateur sur notre site !
Si on veut que le lien s'ouvre dans une autre page, on rajoute un attribut, qui est target="".
Et on lui met comme propriété de l'attribut, l'information _blank. Comme suit :
target="_blank"
Donc par exemple :

Code:

<a href="tonlien.fr" target="_blank">Tonlien</a>

Compris ? Si oui, j'aimerais que vous deux essayiez de me faire un lien vers le site d'Atdc (http://atdc.alwaysdata.net) qui s'ouvre dans une nouvelle page ? Sachant que texte du lien (donc entre <a> ICI </a>) devra être votre avatar, c'est à dire une image !
Comme d'habitude, c'est à déposer dans votre partie des exos .

Bonne chance

Bonjour

Maintenant que vos exos sont tout bon, on passe aux balises structurantes !

Comme vous l'auras sans doute deviné, elles servent à structurer notre page.

Allez on y va !

Première balise :

Code:

<header></header>

Balise définissant l'entête de notre page dans le body (ce n'est pas le head !), ou d'une balise block. L'header est dans un site, forum ou blog, la partie supérieure de la page, ou d'une balise.
Exemple de header :

Spoiler:

Seconde balise :

Code:

<nav></nav>

Ces balises permettent de réaliser des barres de navigation.

Spoiler:

Troisième balise :

Code:

<section></section>

Les balises sections englobent des contenus (textuels, graphiques ou les deux en même temps) qui sont liés par le sens/qui parlent de la même chose.
Ici, il pourrait y avoir une "section" au sein du header.

Spoiler:

Quatrième balise :

Code:

<article></article>

Ces balises permettent d'englober des textes indépendants les uns des autres, mais qui parlent de la même chose.
Les article sont forcément dans des section.

Spoiler:

Cinquième balise :

Code:

<aside></aside>

Ces balises sont utilisées pour englober un contenu complémentaire à un autre.
Toujours dans notre section :


Et enfin sixième balise :

Code:

<footer></footer>

C'est l'inverse de header. Ces balises sont là pour englober le contenu tout en bas de la page, le pied de page.

Je vous avoue que c'est assez difficile à comprendre.

Est-ce que vous pourriez  essayer de me dire à quoi correspond chaque élément de ce schéma ? (en utilisant le code couleur, par exemple : Violet = aside)

Spoiler:

Bonne chance, et si vous avez un souci.... Eluknow est là

Coucou !
On continue... Mais comme d'habitude, on a souci avec Internet Exlorer (vous verreez qu'on a toujours dess soucis avec ce navigateur...). Dous Internet Explorer, dans les versions antérieures à 9 (abrégé IE9), ces balises ne sont pas prises en compte.

C'est là qu'interviennent nos balises scripts.

En fait, il existe un script javascript, qui, sous IE inférieur à 9, lit les balises.

Pour cela, il faut que seul IE lise ce script, et donc, on fait appel aux commentaires conditionnels. Ce sont des commentaires qui permettent d'être lus que par tel navigateur, à telle ou telle version. Je ne m'attarderai pas là dessus, mais il est important de connaître celui qui suit, qui réglera notre problème de compatibilité de HTML5 avec Internet Explorer.

Code:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ce code veut dire : Si c'est une version d'internet explorer antérieure à 9, alors on utilise ce script, sinon, on l'utilise pas.

Donc dès que vous utilisez du HTML5, hop :

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Le titre de ma page</title>
  <style type="text/css">
  </style>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

C'est tout bon ?

C'est bon pour moi (:

J'ai tout compris !

Juste pour savoir, si on veut par exemple faire un script juste pour Firefox, on écrira comme ça ?

Code:

<!--[if Firefox]>
blablabla
<![endif]-->

Non malheureusement les commentaires conditionnels n'ont été réalisés que pour Internet Explorer :/..

C'est dans le CSS alors que tu peux faire par navigateur, résolution, support, etc ?

Pas support et résolution, CSS oui .
Mais navigateur, non . En javascript ou php pour le navigateur .

Oh ok, il me semblait, mais je dois confondre avec quelque chose d'autre... Bref, on peut continuer

On a presque fini notre première partie !

Il nous reste 2 balises à voir : div et span
Ces balises sont spéciales !

En effet, elles ne veulent rien dire, elles n'ont aucun but particulier. Je veux dire par là qu'elles ne servent pas à faire un paragraphe, à mettre du texte en indice, à surligner du texte, à le rendre important etc.
Non, elles servent juste à englober du texte !
Mais ça sert à quoi alors ?!

Ces balises servent à englober du texte. C'est tout .

Mais du coup, quelle est la différence entre les deux ?!

Alors attention, vocabulaire !
L'une est une balise de type block : c'est à dire que si on la met, le texte qui la suivra sera en dessous d'elle.
C'est la div.
L'autre de type inline : c'est l'inverse du précédent : le texte suivra, comme ci de rien était.
C'est le span.

Du coup, l'une est plus appropriée pour mettre en page plusieurs choses (div), et l'autre pour mettre en page seulement quelques mots (span) Bien évidemment, pas directement, car ce sera à l'aide du CSS, puisque ces balises ne font rien aux textes

Bon, on va déjà voir comment elles se forment, et ensuite on verra des exemples concrets
Div :

Code:

<div></div>

Span :

Code:

<span></span>

A l'intérieur d'une div, on peut mettre d'autres balises. A l'intérieur d'un span, plutôt du texte.
Par exemple :

Code:

<div><h1>Mon titre</h1><p>Mon texte</p></div><div><p>Autre texte</p></div>

Code:

<div><span>du texte</span>Suite du texte</div>

Et le résultat est :


Et pour le second :


Que faut-il en conclure ?
Que div est bien une balise block.
Que les balises de hierarchisation également
Que les balises de paragraphe aussi
Que span est une balise inline.

La preuve : dans le premier, dès qu'on ferme une balise, la suite va à la ligne, du moins en dessous (block). Alors qu'avec span, le texte se colle juste après (inline).

En conclusion : toutes les balises ont un type inline ou block.
Div = block
Span = inline.

A retenir sur les div et span :
Il faut utiliser div pour mettre en page plusieurs textes dans plusieurs balises
Il faut utiliser span pour mettre en page quelques mots dans un texte.

Compris capitaine !

J'ai compris... Mais j'avoue ne pas trop voir leur utilité. Pourquoi les utiliser si on peut s'en passer ?

Je crois que c'est surtout pour mettre des class="" histoire qu'on les retrouve dans le CSS, c'est ça ?

Coucou

Alors, en fait, c'est utiliser pour faire le rôle du "wrapper" ou du "container". En gros, si dans une page tu as une partie centrale avec la même mise en page, même fond etc, et bien tu mettras le tout dans une div .
Comme l'a dit Popnoyt, c'est surtout au niveau du CSS que ça a une utilité . Tu comprendras mieux au fil de la formation, sans aucun doute !

Pour les span, c'est pareil

Ahh, comme ça ! Le CSS, j'ai un peu oublié Mais je me souviens à présent.

Maintenant, j'ai compris. Merci pour vos réponses ! On peut continuer

Coucou !

Du coup.. Que cela veut-il dire.. Nous avons terminé notre partie 1 èé ! Mais étant un professeur sadique... Je vais te demander de prendre en charge cette commande ! Une commande un peu particulière. La voici :

CodeMan le novice en codage a écrit:

Bonjour les codeurs !
Voilà, j'ai récemment appris le CSS, mais pas le HTML . En effet, mon professeur de codage nommé Knowelu, a été mangé par une fourmi panda avant qu'il ne puisse m'apprendre le HTML !
Mais j'aimerais bien faire une fiche de RPG pour mon forum moi :'(. Alors, ayant appris qu'Eluknow a formé un dénommé Invité en HTML pour le moment, j'aimerais qu'il me fasse la partie HTML de ma fiche, que je complèterai avec mes connaissances en CSS.
Alors, j'aimerais en gros que ma fiche soit valide avec les normes W3C.
J'aimerais d'abord un grand titre en haut avec marqué "La meilleure fiche RPG du monde". Suivi juste en dessous d'une phrase relativement importante "Car le codage est parfait.."
Ensuite, il me faudrait un bloc, contenant une image à gauche (lien : https://2img.net/u/2916/61/52/62/avatars/1-52.jpg ) et du texte à droite (tu peux utiliser un générateur de texte pour le mettre).
Enfin, en dessous, un titre encore : "Un titre parfait..".
Et en dessous un paragraphe contenant un nouveau texte. La première ligne est très importante.
En bas de la fiche, il faudrait qu'il y ait cette image : https://2img.net/r/hpimg15/pics/616747eluknow.png avec la description suivante : "Pour des RPGistes d'exception..".
Pour finir, j'aimerais que toute cette fiche soit comme un tout, donc englobée dans sa totalité. Voilà !
Merci à toi !

Allez, courage . Tu as le droit de poser toutes les questions que tu veux