Scribd
Importer
13 vues18 pages

Guide complet sur la création de pages HTML

Transféré par

aze08882
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd
13 vues18 pages

Guide complet sur la création de pages HTML

Transféré par

aze08882
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd

En résumé

On utilise l'éditeur de texte (Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension .html (par
exemple : [Link]). Ce sera notre page web.

la page html doit contenir : <!DOCTYPE html><html> <head> <title></title> </head> <body>
</body></html>

Les balises peuvent avoir plusieurs formes : <balise> </balise> : elles s'ouvrent et se ferment pour
délimiter le contenu (début et fin d'un titre, par exemple).

<balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un
élément à un endroit précis (par exemple une image).

Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires (exemple
: <image nom="[Link]" />).

Une page web est constituée de deux sections principales : un en-tête (<head>) et un corps (<body>).

pour que les navigateur puissent afficher les caractères spéciaux on ajoute dans <head> <meta
charset="utf-8" />

On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en
sélectionnant Afficher le code source de la page ou inspecter.

En résumé

Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise <br />.

Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance du titre.

On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.

Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée).
À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.

pour retirer l'image ronde servant de puce on utilise list-style-type: none;

list-style-image permet d'utiliser une image personnalisée plutôt que les puces standard. Il existe de
nombreuses propriétés CSS spécifiques comme celle-ci dans [Link]
[Link] ex: list-style-image: url('images/ico_liensexterne.png');

Pour information, il existe un troisième type de liste, beaucoup plus rare : la liste de définitions. Elle fait
intervenir les balises <dl> (pour délimiter la liste), <dt> (pour délimiter un terme) et <dd> (pour délimiter
la définition de ce terme).
En résumé : les liens

Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible.
Exemple : <a href="[Link]

On peut faire un lien vers une autre page de son site simplement en écrivant le nom du fichier : <a
href="[Link]">.

Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut créer une ancre avec
l'attribut id ( ex: id="ancre")pour « marquer » un endroit dans la page, puis faire un lien vers l'ancre
comme ceci : <a href="#ancre">.

Un lien pour envoyer un e-mail exemple <p><a href="[Link] un e-


mail !</a></p>

Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme :
[Link] vous devrez remplacer tous les « & » par « &amp; »
dans votre lien comme ceci : [Link]

En résumé

On insère une image avec la balise <img />. Elle doit obligatoirement comporter au moins ces deux
attributs : src (nom de l'image) et alt (courte description de l'image). ex: <img
src="images/[Link]" alt="Photo de montagne" title="C'est beau les Alpes !" />

Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une
balise <figure>. La balise <figcaption> permet d'écrire la légende de l'image.(ex:<figure> <img
src="images/[Link]" alt="Bloc-Notes" /> <figcaption>Le logiciel Bloc-Notes</figcaption></figure>

Récapitulatif

- Les éléments <section> et <article> peuvent être vus comme une "page" dans la "page", c'est-à-dire
qu'ils peuvent contenir un élément <header>, un <footer> ainsi qu'une hiérarchie de titres ;

- Les éléments <section> ne sont PAS des <div>. <section> est là pour définir des ensembles thématiques
(avec un même sujet), alors que les <div> restent utilisés pour la mise en forme (styles) ;

- L'élément <nav> est à utiliser pour les groupes de liens qui servent à la navigation : speedbar, liens de
pagination, groupes de liens dans le menu latéral... Comme il s'agit de groupes, il est de bon usage de les
structures avec des listes à pouces <ul> ;

- L'élément <aside> s'utilise de deux manières distinctes :

- En tant que menu latéral, car il s'agit d'informations complémentaires à la page dans son ensemble ;

- En tant qu'encart optionnel au sein d'un <article>.

- L'élément <figure> s'utilise majoritairement dans les <articles> et affiche des informations nécessaires
(au contraire d'<aside>) à la compréhension de l'article ou du contenu ;

- La norme WAI-ARIA est là pour fournir des informations de navigation à destination des personnes
malvoyantes ;

- La norme Microdata est là pour ajouter du sens aux différentes informations présentes. Ca permet
entre autres d'aider les moteurs de recherche (surtout si vous utilisez [Link]) à classer vos pages ;

- L'élément <mark> permet de mettre du texte en évidence, sans aucun sens sémantique. Pratique pour
attirer l'attention du lecteur sur des portions de code au sein d'un exemple de code par exemple ;

- Les éléments <small>, et <i> sont toujours utilisables, mais leur utilité a changé, et <b> sert toujours à
mettre du contenu en évidence, comme des mots clés ou des noms de produits. Ainsi, <small> s'utilise
comme <aside> de façon inline et <i> s'utilise pour indiquer quelque chose qui n'est pas naturel an sein
de le phrase, comme un terme technique et il faut utiliser son attribut class pour en définir la nature ;

En résumé

Dans la page .html on ajoute dans la partie <head> <link rel="stylesheet" href="[Link]" /> pour
l'associé à un fichier appelé [Link]

En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation
avec des propriétés CSS : balise1{ propriete1: valeur1; propriete2: valeur2;}

Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme. Par
exemple, on peut viser : toutes les balises d'un même type, en écrivant simplement leur nom (h1 par
exemple) ; certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id
(.nomclasse ou #nomid) ; uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3
em).Tous les titres et tous les textes importants (h1, em). des balises précises aux attributs class et id
(.class #id)

<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un
paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de
la même [Link]: dans l'html: <p>Bonjour et <span class="salutations">bienvenue</span> sur mon
site ! </p> et dans le css: .salutations{ color: blue;}

<div> </div> : c'est une balise de type block, qui entoure un bloc de texte.

Les sélecteurs avancés:

* :Sélectionne toutes les balises sans exception ex: *{color:red;}

h3 em :Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>

h3 + p : Sélectionne la première balise <p> située après un titre <h3>

a[title]:électionne tous les liens <a> qui possèdent un attribut title


a[title="Cliquez ici"]: l'attribut doit avoir exactement pour valeur « Cliquez ici ».

a[title*="ici"]:l'attribut doit contenir dans sa valeur le mot « ici » (peu importe sa position).

En résumé

On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels (16px), en
« em » (1.3em), en pourcentage (110%), etc.

On change la police du texte avec font-family ( Arial ;Arial Black ;Comic Sans MS ;Courier
New ;Georgia ;Impact ;Times New Roman ;Trebuchet MS ;Verdana.. )Attention, seules quelques polices
sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la
directive @font-face : cela forcera les navigateurs à télécharger la police de votre choix.

De nombreuses propriétés de mise en forme du texte existent : font-style ( "italic" : le texte sera mis en
italique "oblique" : le texte sera passé en oblique "normal ": le texte sera normal), font-weight : bold : le
texte sera en gras "normal" : le texte sera écrit normalement , text-decoration " underline" : souligné
"line-through" : barré "overline" : ligne au-dessus "blink" : clignotant. "none" : normal) .

text-transform: uppercase; écrire en majuscules lowercase écrire en miniscules.

Le texte peut être aligné avec text-align.

On peut faire en sorte qu'une image soit habillée (« entourée ») de texte avec float (left; right;) et pour
stopper le flottant on utilise "clear: both".

En résumé

On change la couleur du texte avec la propriété color, la couleur de fond avec background-color.

On peut indiquer une couleur en écrivant son nom en anglais (black, par exemple), sous forme
hexadéciale (#FFC8D3) ou en notation RGB (rgb(250,25,118)).

On peut ajouter une image de fond avec background-image (ex: body{ background-image:
url("[Link]");} . On peut choisir de fixer l'image de fond (background-attachment: fixed; : l'image de
fond reste fixe ou scroll; : l'image de fond défile avec le texte ), de l'afficher en mosaïque (background-
repeat: no-repeat; : le fond ne sera pas répété. L'image sera donc unique sur la page ; repeat-x ; : le fond
sera répété uniquement sur la première ligne, horizontalement ; repeat-y; : le fond sera répété
uniquement sur la première colonne, verticalement ; repeat; : le fond sera répété en mosaïque ) ou non,
et même de la positionner où on veut sur la page ( background-position ex: background-position: 30px
50px; ou top : en haut ; bottom : en bas ; left : à gauche ; center : centré ; right : à droite.) on peut
Combiner les propriétés ex: background: url("[Link]") fixed no-repeat top right;

Plusieurs images de fond ex: background: url("[Link]") fixed no-repeat top right, url("[Link]")
fixed; La première image de cette liste sera placée par-dessus les autres.

On peut rendre une portion de la page transparente avec la propriété opacity (Avec une valeur de 1,
l'élément sera totalement opaque et Avec une valeur de 0, l'élément sera totalement transparent. ou
avec la notation RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de
transparence)ex: background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */

linear-gradient permet de réaliser des dégradés

En résumé

On peut appliquer une bordure à un élément avec la propriété border, border-width, border-color,
border-style (none; : pas de bordure (par défaut) ;solid; : un trait simple ;dotted; : pointillés ;dashed; :
tirets ;double; : bordure double ;groove; : en relief ;ridge; : autre effet relief ;inset; : effet 3D global
enfoncé ;outset; : effet 3D global surélevé).…. Il faut indiquer la largeur de la bordure, sa couleur et son
type (trait continu, pointillés…) ex: border: 3px blue dashed; En haut, à droite, à gauche, en bas…(border-
top border-bottom border-left border-right) (border-top-width border-top-color ...)

On peut arrondir les bordures avec border-radius ex: border-radius: 10px; ou l'arrondi pour chaque coin
border-radius: 10px 5px 10px 5px; ou courbes elliptiques border-radius: 20px / 10px;

On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical et
horizontal de l'ombre, son niveau d'adoucissement et sa couleur. ex: box-shadow: 6px 6px 0px black; On
peut aussi rajouter une cinquième valeur facultative : inset.

Le texte peut lui aussi avoir une ombre avec text-shadow.

on peut tourner un élément avec transform ex: transform:rotate(-90deg);

En résumé

En CSS, on peut modifier l'apparence de certaines sections dynamiquement. On utilise pour cela les
pseudo-formats.

:hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des
liens lorsque la souris pointe dessus).

:active modifie l'apparence des liens au moment du clic

:visited lorsqu'un lien a déjà été visité.

:focus permet de modifier l'apparence d'un élément sélectionné.

Résumé

Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la
page web :

<header></header> : en-tête ;

<footer> </footer> : pied de page ;


<nav></nav> : liens principaux de navigation ;

<section></section> : section de page ;

<aside></aside> : informations complémentaires ;

<article></article> : article indépendant.

Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre
en-tête.

ce schéma propose un exemple d'organisation de la page. Rien ne vous empêche de décider que votre
menu de navigation soit à droite, ou tout en haut, que vos balises <aside> soient au-dessus, etc.

On peut même imaginer une seconde balise <header>, placée cette fois à l'intérieur d'une <section>.
Dans ce cas-là, elle sera considérée comme étant l'en-tête de la section.

Enfin, une section ne doit pas forcément contenir un <article> et des <aside>. Utilisez ces balises
uniquement si vous en avez besoin.

Le code JavaScript HTML5shiv permet de faire en sorte que ces balises soient reconnues pour les
versions d'Internet Explorer antérieures à IE9. il vous suffit d'ajouter les lignes suivantes dans <head>:
<!--[if lt IE 9]> <script src="[Link]

En résumé

On peut modifier la taille d'une balise de type block (<p>, <h1>…) avec les propriétés CSS width
(largeur) ex: width: 50%; et height (hauteur).
On peut définir des minima et maxima autorisés min-width : largeur minimale ;min-height : hauteur
minimale ;max-width : largeur maximale ;max-height : hauteur maximale pour s'adapter aux é[Link]:p{
width: 50%; min-width: 400px;}

Les éléments de la page disposent chacun de marges intérieures (padding) et extérieures (margin).ex:
margin: 50px; /* Marge extérieure de 50px */ padding: 12px; /* Marge intérieure de 12px */ ou bien
margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite (le px est facultatif dans ce cas), 3
px en bas, 1 px à gauche».Autre notation raccourcie : margin: 2px 1px; signifie « 2 px de marge en haut et
en bas, 1 px de marge à gauche et à droite ». on peut utiliser margin-top margin-bottom margin-left
margin-right pareil pour padding.

Pour centrer, il faut respecter les règles suivantes :

- donnez une largeur au bloc (avec la propriété width) ;

- indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto;.

ex: width: 350px; /* On a indiqué une largeur (obligatoire) */

margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */

S'il y a trop de texte à l'intérieur d'un bloc de dimensions fixes, il y a un risque de débordement. Dans ce
cas, il peut être judicieux de rajouter des barres de défilement avec la propriété overflow : auto; ou de
forcer la césure (retour à la ligne) avec word-wrap: break-word; conseille: utilisez cette fonctionnalité
dès qu'un bloc est susceptible de contenir du texte saisi par des utilisateurs (par exemple sur les forums
de votre futur site).overflow: hidden; masque les débordements

En résumé

Le positionnement flottant (avec la propriété float) est l'un des plus utilisés à l'heure actuelle. Il permet
par exemple de placer un menu à gauche ou à droite de la page. Néanmoins, cette propriété n'a pas été
initialement conçue pour cela et il est préférable, si possible, d'éviter cette technique.

Le positionnement inline-block consiste à affecter un type inline-block à nos éléments grâce à la


propriété display. Ils se comporteront comme des inlines (Se placent les uns à côté des autres) mais
pourront être redimensionnés comme des blocs (avec width et height). Cette technique est à préférer au
positionnement flottant. ex: nav{display: inline-block;width: 150px;border: 1px solid black;} . aussi on
peut utiliser display:inline pour transformer les blocks en inlines et display :block pour transformer les
inlines en blocks.

le fait d'avoir transformé les éléments en inline-block les éléments s'alignent de la base de l'élément
avec celle de l'élément parent alors on utilise vertical-align pour les aligner verticalement avec les
valeurs: baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ;top : aligne
en haut ;middle : centre verticalement ;bottom : aligne en bas ;(valeur en px ou %) : aligne à une certaine
distance de la ligne de base (baseline). ex: vertical-align: top;
Pour les anciennes versions, IE6 et IE7 il va falloir créer une seconde feuille de style CSS spéciale pour
Internet Explorer 6 et 7 et on ajoute dans <head> <!--[if lte IE 7]><link rel="stylesheet"
href="style_ie.css" /><![endif]--> et dans le css nav, section{display: inline; zoom: 1;}

Le positionnement absolu position: absolute; permet de placer un élément où l'on souhaite sur la page,
au pixel près alors il faut rajouter left right top bottom et on leur donne une valeur en px ou en % (ex:
position: absolute;right: 0px;bottom: 0px;).position: fixed; :le bloc reste fixe à sa position (toujours
visible), même si on descend plus bas dans la [Link]: relative; :l'élément est décalé par rapport à
sa position initiale ( le point de coordonnées (0, 0) ne se trouve plus en haut à gauche de votre fenêtre
mais il se trouve en haut à gauche de la position actuelle de votre élément.)

si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas,
utilisez la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres ex:
element{position: absolute;right: 0px;bottom: 0px;z-index: 1;}element2{position: absolute;right:
30px;bottom: 30px;z-index: 2;}.

Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en absolu,
fixe ou relatif) se positionnera par rapport à l'élément B, et non par rapport au coin en haut à gauche de
la page.

En résumé

Un tableau s'insère avec la balise <table> </table>et se définit ligne par ligne avec <tr></tr>.

Chaque ligne comporte des cellules <td> </td>(cellules normales) ou <th> </th> (cellules d'en-tête).

Le titre du tableau se définit avec <caption></caption>. caption-side : top; ou bottom; pour hanger la
position du titre

On peut ajouter une bordure aux cellules du tableau avec border ex: td{border: 1px solid black;}

border-collapse:collapse; pour coller les bordures entre elles. border-collapse:separate; les bordures
seront dissociées

Un tableau peut être divisé en trois sections : <thead></thead> (en-tête), <tfoot></tfoot> (bas du
tableau) et <tbody></tbody> (corps) dans cette ordre . L'utilisation de ces balises n'est pas obligatoire.

On peut fusionner des cellules horizontalement avec l'attribut colspan ex: <td colspan="2"> ou
verticalement avec rowspan ex: <td rowspan="2">. Il faut indiquer combien de cellules doivent être
fusionnées.

on peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété vertical-align.

En résumé

On délimite un formulaire avec la balise <form> </form> à laquelle il faut ajouter deux attributs :
method="post" (mode d'envoi des données) et action="[Link]" (page vers laquelle le visiteur
sera redirigé après envoi du formulaire et qui traitera les informations). ex: <form method="post"
action="[Link]"></form>

Une grande partie des éléments du formulaire peut s'insérer avec la balise <input />. La valeur de son
attribut type permet d'indiquer quel type de champ doit être inséré :

="text ": zone de texte ; ="password" : zone de texte pour mot de passe ;="tel" : numéro de
téléphone ;="checkbox" : case à cocher (checked :permet de cocher une case par defeaut ex : <input
type="checkbox" name="choix" checked />) ;="url" : une adresse url;="number" :un nombre entier
(Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants : min : valeur
minimale autorisé[Link] : valeur maximale autorisée. step : c'est le « pas » de déplacement. Si vous
indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…); ="range"
:un curseur (Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs
disponibles.); ="color" : couleur; ="date" ;="time";="week";="month";="datetime-local";="search" etc.

il faut donner un nom à votre zone de texte name="" ex: <input type="text" name="pseudo" /> et il faut
donner un libellé à votre champ avec <label></label> et Il faut lier le label à la zone de texte avec un id et
un for ex: <p> <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo"
id="pseudo" /></p>

Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilités. on
utilise type="radio". elles doivent être organisées en groupes. Les options d'un même groupe possèdent
le même nom (name), mais chaque option doit avoir une valeur (value) différente pour le php ex: <input
type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15
ans</label>

Les listes déroulantes permet de faire un choix parmi plusieurs possibilités. On va utiliser la balise
<select> </select> qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la
balise pour donner un nom à la liste.

Puis, à l'intérieur du <select> </select>, nous allons placer plusieurs balises <option> </option> (une par
choix possible). On ajoute à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a
choisi. ex: <p> <label for="pays">Dans quel pays habitez-vous ?</label><br /> <select name="pays"
id="pays"> <option value="france">France</option> <option value="espagne">Espagne</option>
<option value="italie">Italie</option> </select></p>

Vous pouvez aussi grouper vos options avec la balise <optgroup> </optgroup> ex: <optgroup
label="Europe"></optgroup>

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez l'attribut selected

Quelques attributs supplémentaires: On peut ajouter un certain nombre d'autres attributs à la balise
<input /> pour personnaliser son fonctionnement : size : pour agrandir le champ; maxlength :pour limiter
le nombre de caractères; value : pour pré-remplir le champ avec une valeur par défaut ; placeholder :
pour donner une indication sur le contenu du champ; required :pour rendre un champ obligatoire;
autofocus : pour qu'il soit sélectionné par défaut ex: <input type="text" name="pseudo" id="pseudo"
placeholder="Ex : Zozor" size="30" maxlength="10" required />

Pour créer une zone de texte multiligne, on change de balise <input> par <textarea> </textarea> et on
enleve type=

pour modifier la taille du <textarea> on utilise : En CSS : width et height au <textarea> ou en html :on
ajoute rows et cols à la balise <textarea>. Le premier indique le nombre de lignes de texte qui peuvent
être affichées simultanément, et le second le nombre de colonnes. ex: <textarea name="ameliorer"
id="ameliorer" rows="10" cols="50">comment améliorer ton site ?!</textarea>

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein
de plusieurs balises <fieldset>. Chaque <fieldset> peut contenir une légende avec la balise <legend> ex:
<fieldset> <legend>Vos coordonnées</legend> <label for="nom">Quel est votre nom ?</label> <input
type="text" name="nom" id="nom" /><label for="prenom">Quel est votre prénom ?</label> <input
type="text" name="prenom" id="prenom" /> </fieldset>

Le bouton d'envoi : on utilise <input></input> type="submit" : Le visiteur sera conduit à la page


indiquée dans l'attribut action du [Link]="reset" : remise à zéro du [Link]="image" :
équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour
indiquer l'URL de l'[Link]="button" : bouton générique, qui n'aura (par défaut) aucun effet. En
général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas
ici.

On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value ex: <input type="submit"
value="Envoyer" />.

Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il faut utiliser un langage «
serveur » comme PHP…

En résumé

on utilise les balises <audio> et <video> pour insérer un audio ou une vidéo et on ajoute l'attribut
controls pour ajouter les boutons « Lecture », « Pause » et la barre de défilement, on indique le chemin
de notre audio ou video avec src="" ex: <audio src="hype_home.mp3" controls></audio>

pour les navigateurs qui ne gèrent pas cette nouvelle balise controls on demande au visiteurs de mettre
à jour leur navigateur ex: <audio src="hype_home.mp3" controls>Veuillez mettre à jour votre
navigateur !</audio> Ceux qui ont un navigateur récent ne verront pas le message.

Il faut proposer plusieurs versions du fichier audio ou vidéo avec <source></source> ex: <audio
controls><source src="hype_home.mp3"></source> <source src="hype_home.ogg"></source></audio>

Il existe plusieurs formats audio et vidéo. Il faut notamment connaître :

pour l'audio : MP3 et Ogg Vorbis ;pour la vidéo : H.264, Ogg Theora et WebM.
Vous pouvez compléter la balise des attributs suivants :

width : pour modifier la largeur de l'outil de lecture audio ou vidéo.

height : pour modifier la hauteur de la vidéo.

loop : la musique ou la vidéo sera jouée en boucle.

autoplay : la musique ou la vidéo sera jouée dès le chargement de la page

preload : indique si la musique ou la vidéo peut être préchargée dès le chargement de la page ou non.
Cet attribut peut prendre les valeurs : auto (par défaut) : le navigateur décide s'il doit précharger toute la
musique ou video, uniquement les métadonnées ou rien du tout. metadata : charge uniquement les
métadonnées (durée, etc.). none : pas de préchargement.

poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur
prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image
peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire une
capture d'écran d'un moment de la vidéo.

ex: <video controls poster="[Link]" width="600"> <source src="sintel.mp4" /><source


src="[Link]" /><source src="[Link]" /></video>

En résumé

On crée une media query avec la directive @media suivie du type d'écran et d'une ou plusieurs
conditions (comme la largeur maximale d'écran) ex: @media screen and (max-width: 1280px). Le style
CSS qui suit sera activé uniquement si les conditions sont remplies.

Les paramètres autorisés par les media queries sont nombreux : color : gestion de la couleur (en
bits/pixel). height : hauteur de la zone d'affichage (fenêtre).width : largeur de la zone d'affichage
(fenêtre).device-height : hauteur du périphé[Link]-width : largeur du périphé[Link] :
orientation du périphérique (portrait ou paysage).media : type d'écran de sortie. Quelques-unes des
valeurs possibles :screen : écran « classique » ;handheld : périphérique mobile ;print : impression ;tv :
télévision ;projection : projecteur ;

peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur
minimale », max-height « Hauteur maximale », etc.

Les règles peuvent être combinées à l'aide des mots suivants :only : « uniquement » ;and : « et » ;not : «
non »

ex: /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */

@media screen and (max-width: 1280px)/* Sur tous types d'écran, quand la largeur de la fenêtre est
comprise entre 1024px et 1280px */@media all and (min-width: 1024px) and (max-width: 1280px)/* Sur
les téléviseurs */@media tv/* Sur tous types d'écrans orientés verticalement */@media all and
(orientation: portrait)

Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport.

Pour cibler les smartphones, plutôt que d'utiliser max-width, il peut être intéressant de recourir à max-
device-width : c'est la largeur du périphérique. ex: @media all and (max-device-width: 480px)

Vous pouvez modifier la largeur viewport du navigateur mobile avec une balise meta à insérer dans l'en-
tête (<head>) du document . ex: <meta name="viewport" content="width=320" /> Vous pouvez utiliser
cette balise pour modifier la façon dont le contenu de votre page s'organise sur les mobiles. Pour obtenir
un rendu facile à lire, sans zoom, vous pouvez demander à ce que le viewport soit le même que la
largeur de l'écran : <meta name="viewport" content="width=device-width" />

En résumé

[Link] : un site qui propose des maquettes (le code HTML / CSS tout prêt !)

I - construire le squelette HTML de la page.

1 - distinguer les principaux blocs sur la maquette

2- placer tout le contenu de la page dans une grande balise <div> ayant pour idbloc_page (on
l'appelle aussi parfois main_wrapper en anglais). ce qui va nous permettre de fixer facilement les
dimensions de la page et de centrer notre site à l'écran.<div id="bloc_page">

ex: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet"


href="[Link]" /> <title>Zozor</title></head> <body></html>

3 - pour Faire fonctionner les balises structurantes sur les anciens navigateurs on ajoute dans
<head></head> <!--[if lt IE 9]><script
src="[Link]

4 - créer une feuille de style spéciale style_ie.css pour les anciennes versions d'Internet
Explorer. ajouter <!--[if lte IE 7]><link rel="stylesheet" href="style_ie.css" /><![endif]--> et dans le
css element{display: inline;zoom: 1;} Cette technique doit être appliquée sur chaque élément
positionné en inline-block . D'autres différences existent sur les vieilles versions d'IE : le texte n'est
pas toujours à la bonne taille, certains blocs sont eux aussi mal dimensionnés, etc. Ces
différences doivent être réglées au cas par cas dans la feuille style_ie.css..

II -le mettre en forme et le mettre en page avec CSS.

1 - Polices personnalisées. (FontSquirrel propose un générateur de


polices[Link] à utiliser en CSS3 avec @font-face :
vous lui envoyez un .ttf, l'outil transforme le fichier dans tous les autres formats nécessaires et
vous fournit même le code CSS prêt à l'emploi ! vous le copié dans votre css .il faut bien entendu
mettre à disposition les fichiers des polices dans un sous-dossier.
2 - Définition des styles principaux de la page (largeur du site, fond, couleur par défaut du
texte). Si vous souhaitez créer un design qui s'adapte aux dimensions de l'écran du visiteur, définissez
une largeur en pourcentage plutôt qu'en pixels

3 - En-tête et liens de navigation.

4 - Bannière.

5 - Section principale du corps de page, au centre.

6 - Pied de page (footer).

III- Vérifier la validité

Le W3C propose sur son site web un outil appelé le « Validateur » (« Validator » en anglais).

Il existe un validateur pour HTML et un validateur pour . Celui pour CSS comportant quelques
bugs (il signale comme invalides des feuilles CSS qui sont tout à fait valides), nous ne nous y
attarderons pas. Par contre, le validateur HTML va être très intéressant pour nous : voici son adresse
[Link]

Voici une liste de conseils qui peuvent vous aider à résoudre les erreurs qui risquent de vous
être signalées tôt ou tard :

- Tous vos textes doivent en général être dans des balises de paragraphes. Il est interdit de
mettre du texte directement entre les balises <body></body> sans l'avoir entouré des fameux
<p></p>. Ceci est aussi valable pour les retours à la ligne <br />, qui doivent être à l'intérieur de
paragraphes. C'est une erreur ultra-courante chez les débutants.

- Toutes vos images doivent comporter un attributalt qui indique ce que contient l'image. Si, par
hasard, votre image est purement décorative (vous ne pouvez pas en trouver de description), vous
êtes autorisés à ne rien mettre comme valeur pour l'attribut alt.

- Vos balises doivent être fermées dans l'ordre.

- Si vos liens comportent des &, vous devez les remplacer par le code &amp; pour éviter toute
confusion au navigateur.

- Vérifiez enfin que vous n'avez pas utilisé des balises anciennes et désormais obsolètes en
HTML5 (comme le vieux <frame>, la balise <marquee>…Le validateur vous dira « Element XXX
undefined » (balise inconnue) ou encore « There is no attribute XXX » (attribut inconnu).

VI - Envoyez votre site sur le Web:

Vous avez besoin de deux éléments :

- Un nom de domaine : c'est l'adresse de votre site web. Vous pouvez réserver une adresse
en .com, .fr, .net… Par exemple : [Link].

- Un hébergeur : c'est lui qui va stocker votre site web sur une machine appelée « serveur ». Son
rôle sera d'envoyer votre site à vos visiteurs à toute heure du jour et de la nuit.

Pour transmettre les fichiers de votre site au serveur de votre hébergeur, il faut utiliser un client
FTP comme FileZilla.

Pour vous connecter au serveur, vous avez besoin de trois informations : l'adresse IP du serveur
(ou son nom d'hôte), votre login et votre mot de passe. Ceux-ci vous s ont fournis par votre hébergeur.

Veuillez noter qu'il faut que votre page d'accueil s'appelle [Link]. C'est la page qui sera
chargée lorsqu'un nouveau visiteur arrivera sur votre site.

Mémento html

Balises de premier niveau:

<html>:Balise principale; <head>:En-tête de la page; <body> :Corps de la page

Code minimal d'une page HTML :

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Titre</title>


</head><body></body></html>

Balises d'en-tête entre <head> et </head> :

<link />:Liaison avec une feuille de style; <meta /> :Métadonnées de la page web (charset, mots-clés,
etc.); <script>:Code JavaScript; <style>:Code CSS; <title>:Titre de la page

Balises de structuration du texte:

<abbr>:Abréviation; <blockquote>:Citation (longue);<cite>:Citation du titre d'une œuvre ou d'un


évènement; <q>:Citation (courte); <sup>:Exposant; <sub>:Indice;<strong>:Mise en valeur forte
<em>:Mise en valeur normale; <mark>:Mise en valeur visuelle; <h1>...<h6> :Titre de niveau 1...6;
<img />: Image; <figure>:Figure (image, code, etc.); <figcaption>:Description de la figure; <audio>:Son;
<video>:Vidéo; <source>:Format source pour les balises <audio> et <video>; <a>:Lien hypertexte; <br />:
Retour à la ligne; <p>:Paragraphe; <hr />:Ligne de séparation horizontale; <address>: Adresse de contact;
<del>:Texte supprimé; <ins>:Texte inséré; <dfn>:Définition; <kbd>:Saisie clavier; <pre>:Affichage formaté
(pour les codes sources); <progress>: Barre de progression; <time>:Date ou heure;

Balises de listes: (listes à puces, listes numérotées, listes de définitions…):

<ul>: Liste à puces, non numérotée; <ol>:Liste numérotée; <li>:Élément de la liste à puces; <dl>:Liste de
définitions; <dt>:Terme à définir; <dd>:Définition du terme;

Balises de tableau:

<table>:Tableau; <caption>:Titre du tableau; <tr>:Ligne de tableau; <th>:Cellule d'en-tête; <td>:Cellule;


<thead>:Section de l'en-tête du tableau; <tbody>:Section du corps du tableau; <tfoot>:Section du pied
du tableau;

Balises de formulaire:

<form>:Formulaire; <fieldset>:Groupe de champs; <legend>:Titre d'un groupe de champs; <label>:Libellé


d'un champ; <input />:Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.);
<textarea>:Zone de saisie multiligne; <select>:Liste déroulante; <option>:Élément d'une liste déroulante;
<optgroup>:Groupe d'éléments d'une liste déroulante;

Balises sectionnantes:

<header>:En-tête;<nav>:Liens principaux de navigation;<footer>:Pied de page;<section>:Section de


page;<article>:Article (contenu autonome);<aside>:Informations complémentaires;

Balises génériques:

<span>:Balise générique de type inline;<div>:Balise générique de type block;

Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :class: indique le
nom de la classe CSS à utiliser. id: donne un nom à la balise. style: cet attribut vous permet d'indiquer
directement le code CSS à appliquer.

Mémento des propriétés CSS

Propriétés de mise en forme du texte:

font-family : police1, police2, police3, serif, sans-serif, monospace :Nom de police

@font-face:Nom et source de la police :Police personnalisée

font-size:1.3em, 16px, 120%... :Taille du texte

font-weight:bold, normal :Gras

font-style:italic, oblique, normal :Italique

text-decoration:underline, overline, line-through, blink, none :Soulignement, ligne au-dessus, barré ou


clignotant

font-variant:small-caps, normal :Petites capitales

text-transform :capitalize, lowercase, uppercase :Capitales


font- :Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.

text-align:left, center, right, justify :Alignement horizontal

vertical-align:baseline, middle, sub, super, top, bottom :Alignement vertical (cellules de tableau ou
éléments inline-block uniquement)

line-height:18px, 120%, normal... :Hauteur de ligne

text-indent:25px :Alinéa

white-space :pre, nowrap, normal :Césure

word-wrap :break-word, normal :Césure forcée

text-shadow :5px 5px 2px blue :(horizontale, verticale, fondu, couleur) Ombre de texte

Propriétés de couleur et de fond

color:nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20... :Couleur du texte

background-color:Identique à color :Couleur de fond

background-image:url('[Link]'):Image de fond

background-attachment:fixed, scroll :Fond fixe

background-repeat:repeat-x, repeat-y, no-repeat, repeat :Répétition du fond

background-position:(x y), top, center, bottom, left, right :Position du fond

background:-Super propriété du fond. Combine : background-image, background-repeat, background-


attachment, background-position

opacity:0.5 :Transparence

Propriétés des boîtes

width:150px, 80%... :Largeur

height:150px, 80%... :Hauteur

min-width:150px, 80%... :Largeur minimale

max-width: 150px, 80%... :Largeur maximale

min-height:150px, 80%... :Hauteur minimale

max-height :150px, 80%... :Hauteur maximale


margin-top :23px :Marge en haut

margin-left :23px :Marge à gauche

margin-right :23px :Marge à droite

margin-bottom :23px :Marge en bas

margin:23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de [Link] : margin-top,
margin-right, margin-bottom, margin-left.

padding-left:23px :Marge intérieure à gauche

padding-right :23px :Marge intérieure à droite

padding-bottom :23px :Marge intérieure en bas

padding-top :23px : Marge intérieure en haut

padding:23px 5px 23px 5px :(haut, droite, bas, gauche) Super-propriété de marge inté[Link] :
padding-top, padding-right, padding-bottom, padding-left.

border-width :3px :Épaisseur de bordure

border-color :nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20...Couleur de


bordure

border-style: solid, dotted, dashed, double, groove, ridge, inset, outsetType de bordure

border: 3px solid black :Super-propriété de bordure. Combine border-width, border-color, border-style.
Existe aussi en version border-top, border-right, border-bottom, border-left.

border-radius: 5px :Bordure arrondie

box-shadow: 6px 6px 0px black :(horizontale, verticale, fondu, couleur) Ombre de boîte

Propriétés de positionnement et d'affichage

display :block, inline, inline-block, table, table-cell, none... Type d'élément (block, inline, inline-block,
none…)

visibility :visible, hidden :Visibilité

clip :rect (0px, 60px, 30px, 0px) :rect (haut, droite, bas, gauche) Affichage d'une partie de l'élément

overflow : auto, scroll, visible, hidden :Comportement en cas de dépassement

float :left, right, none :Flottant


clear :left, right, both, none :Arrêt d'un flottant

position :relative, absolute, static :Positionnement

top : 20px :Position par rapport au haut

bottom : 20px :Position par rapport au bas

left :20px :Position par rapport à la gauche

right :20px :Position par rapport à la droite

z-index :10 :Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par-dessus les
autres.

Propriétés des listes

list-style-type :disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha,


none :Type de liste

list-style-position :inside, outside :Position en retrait

list-style-image :url('[Link]'):Puce personnalisée

list-style :- Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

Propriétés des tableaux

border-collapse :collapse, separate :Fusion des bordures

empty-cells :hide, show :Affichage des cellules vides

caption-side :bottom, top :Position du titre du tableau

Autres propriétés

cursor :crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...Curseur de
souris

Vous aimerez peut-être aussi