HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

Dimension: px

Commencer à balayer dès la page:

Download "HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :"

Joëlle Bessette
il y a 7 ans
Total affichages :

HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB.

1 HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : de structurer du texte de placer des images ou bien encore dans sa dernière version, de diffuser du son ou des vidéos sur internet, de manière relativement simple. Ce langage informatique est standardisé par le «World Wide Web Consortium» (W3C), organisme de normalisation à but non lucratif chargé de promouvoir la compatibilité des technologies du World Wide Web. 1/Balises en paire I / Les balises Des balises en paire encadrent du texte en indiquant sa nature. Si on utilise des balises en paire, on démarre par une balise d'entrée sous la forme <nomdelabalise> et une balise de sortie sous la forme </nomdelabalise> Si on code : Bonjour On obtient : Bonjour 2/Balise orpheline Une balise orpheline est une balise seule qui a tout autre influence que de la mise en forme de texte. Si on code : <img src="georges.jpg"/> La photo georges.jpg apparaîtra.

2 II / Structure d'une page Une page html, se trouve toujours selon le schéma ci-dessous Page type Code source de la page type balises Fonctions <!doctype html> La toute première ligne s'appelle le doctype. Elle est indispensable. Le doctype indique qu'il s'agit bien d'une page web HTML. <html lang=«fr»> et </html> <head> et </head> Les balises <html> et </html> englobent tout le contenu de la page WEB. L'attribut «lang» associé à sa valeur «fr» précisent la langue utilisée pour le contenu de la page. Cette section donne quelques informations générales sur la page.  C'est un commentaire qui n'a aucun impact sur la page WEB. Les commentaires sont indispensables pour obtenir une bonne lisibilité du code. <meta charset="utf-8" /> <title>titre </title> <body> et </body> indique le codage des caractères Pour un affichage optimal sur tous les browser, on prendra «iso » C'est le titre de la page web. Cette section est le corps de la page C'est dans celle-ci que sera écrit la plus grande partie du code.

3 III / Balises essentielles de mise en forme Balise HTML Description Paire Attribut Gras. O <blink> Clignotement du texte (N.N. seulement). O <blockqu ote> Petite marge à gauche. O <body> Encadre le corps d'un fichier HTML. O bgcolor="couleur" : Couleur qui sera utilisé pour l'arrière plan. background="fichierimage" : Image d'arrière-plan (BMP, JPG ou GIF). link="couleur" : Couleur des liens. alink="couleur" : Couleur des liens déjà exploités. vlink="couleur" : Couleur des liens lors du clic. Saut de ligne. N clear="left right all" : Le texte ou l'image suivante est décalé vers le bas, jusqu'à ce qu'il n'y ait plus d'élément de formatage à gauche à droite à gauche et à <center> Centrage. O <cite> Citation (italique). O Emphase (italique). O Définition du texte. O size=x : Caractère de taille x (x compris entre 1 et 7). size=+x -x : Augmenter Réduire la taille de caractère de x. color="couleur" : définit la couleur du texte. <h1> Titre de niveau 1. O align="center left right" : Titre centré aligné à gauche aligné à <h2> jusqu'à <h6> Titre de niveau 2 à 6 O align="center left right" : Titre centré aligné à gauche aligné à <hr> Barre horizontale N align="center left right" : Barre centré aligné à gauche aligné à width=x% y : Trait large de x pourcent y pixels. size=x : Hauteur du trait en pixels. color="couleur" : Couleur de la barre (I.E. seulement). noshade : Pas d'affichage ombré. Italique. O Début d'un paragraphe, saute 2 lignes. O align="center left right" : Paragraphe centré aligné à gauche aligné à <pre> Texte pré-formaté avec une police nonproportionnelle. O <q> Citation longue. O <s> Texte barré. O <samp> Exemple en italique. O Réduit la taille des caractères de 1 point. O <strike> Texte barré. O Texte en gras. O Texte en indice. O Texte en exposant. O Texte en souligné. O

4 IV / Balises diverses Les listes ordonnées Les listes non ordonnées Conteneur <ol> <li> article 1 <li> article 2 </ol> Effet Visuel 1. article 1 2. article 2 3. article 3 Conteneur <ul> <li> article 1 <li> article 2 </ul> Effet Visuel article 1 article 2 article 3 Les liens hypertextes L'attribut principal des liens est href. Il s'écrit sous la forme suivante : <a href="adresse ou URL">.. </a> <a href= '' Les images (balise orpheline) La balise de base pour insérer une image est <img src=''nomdelimage.jpg''> Remarque : le fichier de l'image doit être placer dans le même répertoire que celui du fichier html. Il est également possible de remplacer le nom du fichier par une adresse URL. Mise en forme arrière-plan Afin de modifier l'arrière plan d'une page html, on ajoute l'attribut «bgcolor=''x''» dans la balise <body> Avec X le code couleur HTML Il est également possible de remplacer X par les noms de couleurs suivants : Black, Gray, Silver, White, Yellow, Lime, Aqua, Fuchsia, Red, Green, Blue, Purple, Maroon, Olive, Navy, Teal <body bgcolor= ''#77FE00 ''> <body bgcolor= ''Aqua''> Remarque : La technique est identique lorsqu'on veut changer la couleur du texte. On l'écrit sous la forme

html» Activité 2 Créer le fichier «activite2.

5 Activité 1 Ouvrir le bloc-notes sous windows Ecrire le code HTML correspondant afin de reproduire l'exemple ci dessous. Enregistrer en nommant le fichier «activite1.html» Enfin, ouvrir le fichier «activite1.html» Activité 2 Créer le fichier «activite2.html» Recréer l'exemple ci-dessous Activité 3 Créer le fichier «activite3.html» Recréer l'exemple ci-dessous Activité 4 Créer le fichier «activite4.html» Recréer l'exemple ci-contre :

Documents pareils

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations