docHTML : Apprendre HTML5
download 
Plainte Transcription
HTML : Apprendre HTML5
HTML : Apprendre HTML5 ISN Le HTML « HyperText Markup Language » est un langage de balisage pour la création de site internet, il sert à structurer votre document. D’autres langages peuvent s’ajouter lors de la conception, mais tous les sites web contiennent du HTML. HTML5 désignant la version du langage HTML. Il est généralement appris en parallèle du CSS. Le HTML5 vous permettra de coder votre contenu (titre, paragraphe, menu . . . ) pendant que le CSS le mettra en forme (couleur, choix des polices de caractère, disposition des éléments . . . ). A quoi ressemble le HTML5 ? C’est un langage reposant sur le principe de balises imbriqués. Il existe deux types de balises, celles qu’on ouvre et qu’on referme et celles qui se referment seules. Chaque balise peut avoir aucun, un ou plusieurs attributs relatifs à celle-ci. Exemple un paragraphe est contenu entre les balises <p> et </p> l’une pour indiquer son début et l’autre sa fin. Listing 1 : structure d’une page web en HTML5 < !DOCTYPE html > < html lang = " fr " > < head > < meta charset = " UTF -8 " / > < !-- on indique l ’ encodage de la page pour le navigateur </ head > < body > < !-- Corps de la page web -- > <p > Structure d ’ une page web en HTML5 </ p > </ body > </ html > -- > Pour modifier la couleur de ce paragraphe, on ajoutera un attribut de style à la balise Paragraphe pour lui indiquer dans quelle couleur l’afficher. Listing 2 : ajout d’un attribut de style à la balise Paragraphe <p style = " color :red ;" > Structure d ’ une page web en HTML5 </ p > Dans cette deuxième ligne de code, nous avons ajouter un attribut de style à la balise <p>. Cet attribut est symbolisé par style= " " . Dans cet exemple, nous avons indiqué au navigateur d’afficher le texte en rouge, mais nous aurions pu lui demander une autre police de caractère ou même plusieurs informations en même temps. Structure d’une page web en HTML5 La structure la plus simple d’une page web en HTML5 sera composé d’au minimum 4 Balises : • La balise indiquant le doctype ; • Les balises <html> et </html> en tout début et en tout fin de document ; • Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affichées ; • Les balises <body> et </body> qui comme leur nom l’indique comportent le corps de votre page. Lorsque vous codez un page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni visibles sur le navigateur ni interprétés par celui-ci. Il vous serviront uniquement à vous repérer sur votre code. Imaginez vous avec plus de 5000 lignes . . . et vous comprendrez l’importance des commentaires. Les commentaires se situent entre les signes < !- - et - -> Ses limites sont très vite atteintes. Une page HTML est dite statique ? Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Aucune donnée de formulaire ne sera traitée ou enregistrée en HTML5. Pour cela, nous aurons besoin d’utiliser un autre langage : le PHP. Il est capable d’envoyer et de traiter un formulaire, d’utiliser des variables (tous les utilisateurs n’ont pas le même pseudo par exemple), d’utiliser des cookies (enregistrer des habitudes de vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple). Le but n’étant pas ici d’apprendre le PHP mais de vous montrer les limites du HTML5. Le HTML5, langage de base, vous servira donc à la mise en place de votre page web. Vous indiquerez au navigateur toutes les informations nécessaire à un affichage correct. http://lycee.lagrave.free.fr 1/2 HTML : Apprendre HTML5 ISN Structure complexe et utilisation des nouvelles balises HTML5 La nouvelle version du HTML entraîne comme à son habitude quelques modifications. De nouvelles balises et attributs viennent s’ajouter et on en déconseille d’autres. Une compréhension parfaite entraîne une bonne utilisation des balises et donc un respect de la sémantique. Point fort d’un référencement naturel. Ci-dessous, le squelette d’un site classique en HTML5. Pour tout retenir, consulter le mémo HTML5 en .pdf Listing 3 : squelette d’un site classique en HTML5 < !DOCTYPE html > < html lang = " fr " > < head > < meta charset = " UTF -8 " > < title > Titre de votre page </ title > </ head > < body > < header > < h1 > Nom de la page </ h1 > </ header > < nav > < ul > < li > Menu 1 </ li > < li > Menu 2 </ li > < li > Menu 3 </ li > < li > Menu 4 </ li > </ ul > </ nav > < section > < !-- ou alors < article > < header > < h1 > Titre de l ’ article </ h1 > <p > Description de l ’ article </ p > </ header > <p > Contenu de l ’ article </ p > < footer > Pied de l ’ article </ footer > </ article > < aside > < h1 > Nom de la colonne latéral </ h1 > <p > Contenu la colonne </ p > </ aside > </ section > < !-- ou alors < footer > Bas de page </ footer > </ body > </ html > < div id = " content " > -- > </ div > -- > Mise en forme avec un fichier de style CSS : voir la maquette découpée en différentes sections Pour la mise en page vous devez relier une feuille de style - CSS pour Cascading Style Sheet - il faut déclarer le fichier style.css dans l’en-tête de la page web : placer la balise <link> entre les balises <head> et </head> en donnant à cette balise les attributs correspondants et leurs informations relatives. Bluefish offre un environnement de développement Web complet. télécharger Bluefish sur le site officiel. Listing 4 : appel(s) aux fichier(s) CSS < head > ... < link rel = " stylesheet " href = " css / style . css " > </ head > http://lycee.lagrave.free.fr 2/2
