 |
|
|
||||||||||||||||||||||||||
LES PREMIERS PAS EN HTMLLes bases du html |
|||||||||||||||||||||||||||
HTML: instructions et éléments de baseArticle publié sur le blog d'uvnet.frUne page HTML est composée de commandes HTML appelées instructions. - Toutes les commandes HTML sont introduites par des tags: Ce sont des tags d'ouverture ou de fermeture; <title>...</title> Le tag de fermeture se différencie par sa barre oblique (slash). - Les commandes html sont en anglais, elles sont l'abréviation d'un terme anglais. - Elles ne font pas la différence entre les majuscules et miniscules. - Les caractères spéciaux et accents sont codés; Exemple: Caractère Code Entity é é è è Pour apporter des précisions aux commandes HTML, on utilise des attributs; Exemple: <h1 align="center"> Votre titre principal centré</h1> h1: abréviation de heading, c-a-d "titre", cette commande introduit un titre important. align="center" : L'attribut est align et sa valeur introduite par des guillemets est center. Toutes pages HTML commence par l'instruction <html> et se terminent toujours par l'instruction</html>. La structure de base est donc; <html> ... </html> L'interieur de votre page HTML se compose de deux parties: L'en-tête (header) et le corps (body) L' en-tête: Celui-ci permet de donner des informations importantes sur votre page et n'est pas affiché dans le navigateur. Il se situe entre <head> et </head> L'unique commande affichée est votre titre qui sera visible dans la barre de titre du navigateur. Le body: Entre <body> et </body> se trouvent le texte, les liens, les éléments graphiques etc... Au début du body, on commence par définir la couleur de fond de votre page, la couleur de votre texte, la couleur des liens, la couleur des liens déjà activés, la couleur des liens au moment du clic. Ce qui vous donnera: <body bgcolor="#FFFFFF" text="#000000" link="#CCCCCC" vlink="#CCCCCC" alink="#E9E6E6"> L'attribut bgcolor définit la couleur de fond " " text " " du texte " " link " " des liens " " vlink " " des liens déjà activés " " alink " " des liens au moment du clic Pour définir la couleur, vous avez deux possibilités; Indiquer son code hexadécimal; Ex: <body bgcolor="#FFFFFF"> Indiquer son nom; Ex: <body bgcolor="red"> Pour insérer une image, vous devez utiliser le tag <img> et faire référence au fichier graphique lui correspondant. Votre fichier graphique se nomme par exemple "animaux.gif". Votre image devra se trouver au préalable dans le dossier de votre page. Ce qui donnera; <img src="animaux.gif"> Dans le cas où le fichier graphique que vous souhaîtez intégrer se trouve sous une autre URL que la votre, il vous faudra indiquer le chemin lui correspondant. Les liens: La commande d'insertion d'un lien se nomme <a> et possède deux attributs; . href: définit une destination . name: définit un signet L'attribut href est le plus important. Comme nous l'avons vu précedemment pour la structure d'un site, vos fichiers sont enregistrés dans un dossier (correspondant à votre page d'accueil) et sous- dossiers. Vos liens vont suivre la structure de votre site; Ce sont les deux points suivi d'une barre oblique qui représentent l'itinéraire de votre arborescence et les niveaux de votre site: <a href="../fichier.htm"> texte</a>. Exemple: Vous souhaîtez faire un lien vers un fichier se trouvant dans le même dossier que votre page d'accueil; L'instruction sera donc: <a href="fichier.htm">texte </a> Les deux points ne sont pas présent. Votre fichier se trouvant au même niveau que votre page . Vous souhaîtez maintenant établir un lien vers un sous-dossier (nommé par ex "s1") se trouvant à deux niveaux supérieurs dans votre arborescence. L'instruction sera donc: <a href="../../s1.htm">texte</a> L'attribut name permet de définir un signet ou ancre. Cet attribut est pratique pour se déplacer à l'intérieur d'une même page ou d'une autre page pour arriver à un endroit précis. Vous commencez par sélectionner le mot vers lequel vous souhaîtez faire pointer votre ancre. Ce qui vous donne: <a name="nom"> définition de l'ancre</a> C'est le caractère # qui indique que la destination est un signet. L'instruction sera: <a href="#nom">texte du lien</a> Pour faire pointer une ancre vers une autre page de votre arborescence, vous devez indiquer le chemin lui correspondant. Ajoutez title à vos balises de liens ou image, votre référencement n'en sera que meilleur, par exemple : <img src="http://www.uvnet.fr/logo_flux_rss.png" width="30" height="30" border="0" title="flux rss actualité webmaster"/></a> Continuons >> le design de votre site |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
