Bases
Menu: Html Caractères spéciaux
Bases - Html
Html (Hyper-Text Mark-up Language)
Ce language de programmation, actuellement dans sa version 4, se présente sous forme de lignes de codes (code source), que les navigateurs internet "compilent" afin d'afficher un "rendu". Une erreur dans le code peut donc provoquer un mauvais affichage de la page; néanmoins, c'est un language assez souple, peu sensible à la casse (majuscule/minuscule), et éditable à partir d'un quelconque bloc-note (notepad de Windows par exemple) pour peu que l'on ne soit pas rebuté par le "codage" manuel.
Le Html a pour structure différentes balises qui encapsulent différents éléments. Les balises sont des "contenants", souvent dotés d'attributs, englobant des "contenus". A part quelques exceptions, chaque type de balise se subdivise en deux balises: une balise d'ouverture (<balise>) et sa quasi-jumelle de fermeture (</balise>). Entre les deux, le contenu. Ainsi, irrémédiablement, le code source d'une page html commence par la balise ouvrante "<html>" et se termine par la balise fermante "</html>". A noter que les balises ne sont jamais visibles à l'affichage dans les navigateurs, les balises n'étant autres que des informations de compilation et formatage!
Exemple: la simple ligne de code "<html>Ceci est une page html</html>" éditée avec notepad et enregistrée avec l'extension *.html (ou *.htm) produit une page web. A l'écran de votre navigateur internet s'affiche alors "Ceci est une page html" lors de l'ouverture de cette page.
Deux parties principales: En-tête et Corps de page
Schématiquement, le code source d'une page web se divise en deux parties principales: la première, l'En-tête (encapsulée par les balises "<head></head>") contient le titre de la page, les mots clés, scripts, styles, appels à des fichiers externes, etc... Les éléments de l'en-tête sont invisibles lors de l'affichage dans un navigateur internet, à l'exception du titre qui apparait dans la barre du haut.
La seconde partie, le Corps de la page (encapsulé par les balises "<body></body>") contient tout ce qui est visible lors de l'affichage de la page, textes, images, tableaux, animations, etc... Contrairement au reste du code source qui obéit à certaines règles dans l'organisation des balises, cette partie est laissée au libre arbitre du créateur de la page.
Schéma (non exhaustif!) d'une page html sans contenu:
<html>
<head>
<title>Titre de la page ici </title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="keywords" content="mot clé1, mot clé2 ">
<link rel="stylesheet" href="style.css">
</head>
<body>
contenu visible de la page ici...
</body>
</html>
note: les traits et le texte gris sont ici purement dans un but explicite et ne sont pas à prendre en compte. Seul le code en rouge importe!
Attributs des balises
Comme on peut le voir ci-dessus, une balise de fermeture n'est pas forcément nécéssaire, certaines balises ayant des propriétés spécifiques. Par contre, la majorité d'entre elles ont des attributs qui permettent de les nuancer. Les attributs (également spécifiques à chaque type de balise) s'insèrent obligatoirement dans la première des deux balises, la balise d'ouverture.
Exemple: <a>ceci est un lien</a>
Les balises par leur propriété indiquent que le texte entouré ci-dessus est un lien mais n'indiquent pas quelle page, ou document, doit être ouvert lorsque l'on clique dessus. Il faut donc ajouter à la balise ouvrante l'attribut "href" et donner à ce dernier le fichier à ouvrir, comme valeur.
Exemple: <a href="ma_page.html">ceci est un lien</a>
Autre exemple d'attributs d'une balise: la deuxième balise "<meta>" du schéma de page qui précède:
<meta name="keywords" content="mot clé1, mot clé2 ">
Cette balise a la spécificité de ne pas encapsuler un contenu, mais de directement l'intégrer comme valeur d'un attribut. L'attribut "name" avec la valeur "keywords" indique que le contenu de cette balise est des mots clés, et l'attribut "content" (contenu) a pour valeur les mots clés en question.
Pour les détails de toutes les balises et de leurs attributs, voir: Html -> Balises
suivant
Dim 4 Jan - 5:08