Introduction au langage HTML L1S1 2012-2013 I Quelques généralités Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte Lorsque vous consultez un site, les fichiers HTML sont envoyés à votre navigateur et le code est interprété sur VOTRE machine par VOTRE navigateur (ce qui explique les différences d'affichage entre deux navigateurs différents) Le code HTML n'est pas compilé (ce n'est pas un programme) Outil nécessaire pour la création d'un fichier HTML : éditeur de texte simple (conseil : éviter les solutions de traitement de texte lourdes, certains éditeurs codant les caractères différemment) Il n'est pas indispensable de posséder un serveur HTTP pour écrire des pages. Vous pouvez utiliser la fonction «Ouvrir» de votre navigateur pour consulter une page HTML enregistrée sur votre ordinateur (ou une page que vous avez vous-même créée) II Structure d'un fichier HTML : Blocs Un fichier HTML est organisé de manière hiérarchique : chaque élément est inclus dans un autre ou à la suite d'un autre. La seule exception est le bloc parent (<html>... </html>). Structure de base d'un fichier HTML : <html> <!-- Ouverture du conteneur de base --> <head> <!-- Ouverture du bloc d'en-tête -->... <!-- Contenu de l'en-tête (peut être vide) --> </head> <!-- Fermeture du bloc d'en-tête --> <title> <!-- ouverture du bloc titre --> <!-- titre de la page --> </title> <!-- fermeture du bloc titre --> <body> <!-- Ouverture du corps de la page HTML -->... <!-- Contenu de la page HTML = information affichée --> </body> <!-- Fermeture du corps </html> <!-- Fermeture du bloc de base = fin du fichier --> Remarque : le texte entre les caractères «<!--» et «-->» ne s'affichera pas sur votre page (ils servent à commenter votre propre code), mais ils seront lisibles par tout le monde : attention à ne pas mettre d'informations critiques en commentaire!
Exemple simple d'une page HTML : <html> <head></head> <title>une première page</title> <body> Hello! </body> </html> III Quelques «objets» composant une page Images <img src='chemin_d'accès_à_l'image' border='largeur' alt='texte' title='texte'... > src='chemin_d'accès_à_l'image' indique le fichier à afficher. On peut ajouter un chemin (répertoire) relatif ou absolu, en fonction de l'emplacement de votre fichier HTML. Si votre image ne s'affiche pas, c'est que l'image n'a pas été trouvée ou que son format est incorrect. border='largeur' : largeur du cadre pour votre image. Si border='0' : pas de bordure. alt='texte' : Texte affiché à la place de l'image si celle-ci n'apparaît pas (ou si vous utilisez un navigateur en mode «texte»). title='texte' : Texte affiché automatiquement lorsque vous laissez la souris quelques secondes sur l'image Liens hypertextes vers d'autres pages ou des fichiers <a href='fichier ou adresse cible' target='quelle fenêtre?'>texte affiché sur la page</a> href='adresse cible' : adresse de la page (http:// ) ou du document (fichier) vers lequel pointe votre lien target='_blank' ou '_self' : indique à votre navigateur s'il doit ouvrir ce lien dans une nouvelle page (_blank) ou dans la page courange (_self) Exemple : <a href='http://www.google.fr' target='_blank'>page Google France</a>
Formulaires : saisie et envoi de données par un utilisateur <form name='identifiant' action='fichier' method='post ou GET'> <input type='type de données du formulaire' name='identifiant' value='valeur'> <!-- Données, tableaux, texte,... --> </form> Un formulaire permet à un utiliseur d'entrer des données sur une page. Lors de la validation du formulaire, les données sont envoyées sur le serveur distant, puis traitées. Exemple : la recherche sur le moteur Google est un simple formulaire, la chaîne de caractères que vous entrez est envoyée, et le serveur vous retourne tous les résultats correspondants. Remarque importante : sans le mode sécurisé (données chiffrées «SSL»), les données que vous envoyées et recevez circulent en clair entre vous et le serveur, ce qui signifie que si quelqu'un «écoute» les transmissions entre les deux, cette personne verra tout ce que vous envoyez ou consultez. IV Eléments de mise en page : les tableaux Syntaxe pour créer un tableau : <table options> Définition d'une ligne <td options>texte 1</td> Définition de la première colonne <td options>texte 2</td> Définition de la seconde colonne... Deuxième ligne <td options>texte 3</td> (etc) <td options>texte 4</td>... </table> Résultat (approximatif) : Texte 1 Texte 2 Texte 3 Texte 4 Options des balises <table> : cellpadding='y' : cellspacing='y' : width='y' : height='y' : border='y' : marge (taille = Y) entre les bords d'une cellule et ce qu'elle contient espace entre les cellules largeur du tableau (Ypx : en pixels ou Y% pour un pourcentage) hauteur du tableau affichage ou non (si Y=0) des bordures des cellules Y peut être un pourcentage (ex : '100%') ou une valeur en pixels (ex : '10') Exemple : <table width='100%' height='600' border='2'> ( lignes et colonnes...) </table>
Options des balises de colonnes <td> width='y' : largeur de la cellulle, absolue (en pixels) width='12' ou relative : pourcentage par rapport au tableau width='40%' heigth='y' : hauteur de la cellule (en pixels) height='20' align='valeur' : alignement horizontal du texte (left, right, center, justify) align='center' valign='true/false' : alignement vertical (top, middle, bottom) valign='top' nowrap='true/false' : contrôle le retour à la ligne automatique nowrap='true' bgcolor='valeur' : couleur de remplissage soit prédéfinies : bgcolor='white' soit Composantes #Rouge Vert Bleu : (#RRVVBB) : bgcolor='#ffffff' background='chemin' : image de fond colspan='x' : fusion horizontale de X cellules rowspan='y' : fusion verticale de Y cellules background='img/logo.gif' Second exemple : <table...> <td align='center' colspan='2'>ligne 1, Fusion horizontale de 2 cellules, Texte centré</td> <td width='50%' align='center'>ligne 2, Colonne 1 Texte centré</td> <td width='50%' align='left'>ligne 2, Colonne 2 Texte aligné à gauche</td> </table> Ligne 2, Colonne 1 Texte centré Ligne 1, Fusion horizontale de 2 cellules, Texte centré Ligne 2, Colonne 2 Texte aligné à gauche V Couleurs et polices de caractères : Les Couleurs ; Certaines couleurs sont prédéfinies : red, blue, black, white... Couleurs personnalisées : codage par composantes «Rouge Vert Bleu» : #RRVVBB Chaque composante va de 00 à FF (FF = 255 : 256 nuances pour chaque composante) Les polices de caractères ou fontes : - Blocs de texte délimités par les balises <font...> et </font>. face='...' : type de fonte Exemple : 'Arial' size='...' : taille des caractères Exemples : '3', '+3', '12px' style='...' : ajout de paramètres CSS Exemple : style='font-weight: bold;' color='...' : couleur du texte
VI Autres éléments particuliers : Balises : <center>(texte ou objets)</center> Texte centré <br> Retour à la ligne (plusieurs <br> successifs : sauts de lignes) <b>texte</b> Texte en gras <i>texte</i> Texte en italique <u>texte</u> Texte souligné Ces balises peuvent être combinées pour, par exemple, afficher du texte en gras, italique et souligné. Il suffit pour cela d'imbriquer les balises les unes dans les autres : Caractères Spéciaux : <i><b><u>votre texte</u></b></i> Certains caractères ne sont pas toujours naturellement gérés par le langage HTML et les navigateurs : les caractères accentués. Pour afficher un «é», on doit normalement écrire «é» dans le code source. Aujourd'hui, la plupart des navigateurs sont prévus pour comprendre directement ces caractères tels quels (mais il peut y avoir des exceptions). les caractères non présents sur le clavier : le codage «&code_du_caractère;» est toujours en vigueur (accents sur un clavier de type «QWERTY», par exemple ). Autres exemples : une succession d'espaces n'est pas interprétée par les navigateurs. On peut soit utiliser des paramètres de marges (exemple du 'cellpadding' dans les tableaux), soit forcer les espaces à l'aide du code. point centré verticalement :... Sur Internet, trouvez une page donnant la liste de ces codes spéciaux HTML. En pratique : 1/ à la racine de votre répertoire personnel, créez un répertoire nommé (strictement) «public_html» 2/ donnez les droits de lecture et d'exécution à tout le monde sur ce répertoire (commande chmod) 3/ donnez les droits d'exécution (mais ni lecture, ni écriture) à tout le monde sur votre répertoire personnel 4/ dans le répertoire public_html, créez un fichier nommé «index.html» et expérimentez les éléments exposés dans ce document : images, tableaux, liens Le résultat sera à tout moment consultable à l'adresse suivante : http://turing.u-strasbg.fr/~votre_identifiant/ (le caractère ~ s'obtient grâce à la combinaison de touches «AltGr et 2»)