STRUCTURE D UNE PAGE HTML/CSS C01
1. STRUCTURE Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d insérer des images. Ces instructions sont le plus souvent de la forme : <balised ouverture> ici le texte </balisedefermeture> une balise est composé d une action et peut avoir des propriétés indiquant comment l action doit être effectué. Le plus souvent on trouve une balise d ouverture :<>et une de fermeture : </> Par exemple pour mettre le mot internet en gras on écrira : <b>internet</b> (la balise <b> détermine ici le caractère gras). Pour qu une page portant l extension.html ou.htm soit interprêté correctement dans le navigateur, celle-ci doit posséder des balises élémentaires dans un ordre précis exemple de code : <html> début du document html <head> <title>ma page perso</title> on insère ici les balises meta tags </head> <body> c est entre ces balises que le texte s affichera dans la page web </body> </html> fin du document html Tous les documents html commence par la balise <HTML> et se finissent par </HTML>, entre les deux sera renfermer le contenu du document. Les balises <HEAD> et </HEAD> correspondent à l entête du document, on y trouve entre autre <TITLE> </TITLE> qui encadrent le titre du document et les balises meta. Les balises <BODY> et </BODY> renferment le contenu du document c est à dire ce qui sera affiché par le navigateur, en l occurence votre texte. C02
2. LE DOCTYPE On parle de doctype pour faire court, mais il s agit en fait d une ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite (HTML-3.2 classique, HTML-4 de transition ou strict, XHTML, etc...). Dans une écriture plus complète, cette ligne a l allure suivante : <!DOCTYPE HTML PUBLIC type_de_html adresse_de_dtd > où : - type_de_html est l identificateur de la version du HTML utilisé. - et où adresse_de_dtd donne l URL de la document type declaration (DTD), à savoir un document spécifiant les propriétés de chaque élément, balises et attributs, de ce type de HTML. Par exemple, on pourra rencontrer la déclaration <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN http://www.w3.org/tr/html4/loose.dtd > Ces doctypes sont généralement mis en place par l éditeur HTML utilisé. La question de l écrire soi-même ou de le modifier ne se pose que si on code soimême ses pages à la main. Pour beaucoup d entre nous, ça sert avant tout à faire passer nos pages au validateur du consortium W3C, afin de vérifier qu on n a pas fait d erreur sur la syntaxe du HTML. Sans ce doctype, le validateur se borne à répondre qu il ne peut pas deviner la nature du document et il se croise les bras. Côté navigateur, d abord, cette ligne n est prise en compte que par les navigateurs les plus récents (comme Mozilla, NN7, Opera7, IE5 sur Mac ou IE6 sur Windows). En principe, cela permet un fonctionnement plus propre, du moins plus simple. Sans ce doctype, le navigateur essaie de donner un sens à l intruction litigieuse en revenant à des versions antérieures du HTML ou à des habitudes qui se sont mises en place dans les premiers navigateurs sans trop tenir compte de la norme internationale de l époque. Actuellement, dans la pratique, les URL dans la ligne doctype ne jouent pas du tout le rôle prévu à l origine par le W3C. Le validateur du W3C n en tient actuellement aucun compte. On peut y mettre l adresse attendue ou n importe quoi d autre, l analyse de la page n est pas modifiée. Apparemment, Mozilla et les autres navigateurs conformes font de même. Actuellement, ces URL n ont de réelle importance qu en HTML-4 ou 4.01 Transitional, pour faire passer IE5-mac ou IE6 (ou Opera-7) du mode Microsoft à un mode conforme. Mais ce mode est entaché de bugs parfois fort gênants dans le cas de IE5-mac, et il n y a pas de solution satisfaisante pour s en accommoder. C03
3. LES BALISES HTML <a> lien hypertexte <b> ou <strong> texte en gras <blockquote> retrait de texte <code> code informatique <frameset> frames ou cadres <font> balise de texte <hr> trait horizontal <td> cellule de tableau <i> ou <em> texte en italique <img> insertion d une image <li> élement de liste <ol> liste <p> paragraphe <strike> ligne au travers d un texte <style> feuille de style <sub> chiffre en indice <sup> chiffre en exposant <table> tableau <td> cellule de tableau <tr> ligne de tableau <tt> texte télétype <u> ligne en dessous d un texte <ul> liste à puces C04
4. LES BALISES METAS Les meta-tags, meta-balises ou metas-données sont des balises situées dans l en-tête du code html, entre les balises <head> et </head>. Ces balises sont composés d informations descriptive sur le site, elles seront analysés par les robots pour permettre une indexation dans les moteurs de recherche c est pourquoi elles doivent être correctement remplies. Balises de référencement title titre du site ou de la page <title>le titre du site</title> description description du site en une phrase de 200 caractères <meta name= description content= La description du site > keywords mots clés du site <meta name= keywords content= les, mots, clés > identifier-url adresse du site <meta name= identifier-url content= http://www.lesitecom > author auteur du site <meta name= author content= auteur > robots diriger les robots(suivra ici la page d index puis suivantes) <meta name= robots content= index, follow > revisit-after revisite du robot en jours <meta name= revisit-after content= 10 days > copyright copyright du site <meta name= copyright content= lauteur» > la balise meta keywords peut contenir 1000 caractères la balise meta description ne doit pas contenir plus de 200 caractères C05
5. CRÉER LA STRUCTRE HTML Pour commencer, créer une page «index.html, à la racine du site avec ce code HTML : <!DOCTYPE html> <html> <head> <title>michard Ardiller</title> <meta http-equiv=»content-type» content=»text/html; charset=iso-8859-1»/> <link rel= stylesheet media= screen type= text/css title= Design href= styles.css > </head> <body> <div id= container > <div id= topbar >...topbar content... </div> <div id= navbar >...navbar content... </div> <!-- the main section where all pages will be loaded using URL variables and PHP include() function --> <div id= main > <div id= column_left >...column left content... </div> <div id= column_right >...column right content... </div> <!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself --> <div class= spacer ></div> <!-- close #main content --> </div> <!-- close #container --> </div> </body> </html> C06
6. CRÉER LA FEUILLE DE STYLES CSS Enfin, un petit copier/coller dans votre fichier styles.css L élément #container fait dans ce code 780 pixels: Chaque éléments placés dans #container doit faire moins de 780 pixels! #container{width:780px; margin:0 auto;} #topbar{width:auto; display:block; height:80px;} #navbar{width:auto; display:block; height:24px;} #main{width:auto; display:block;} #column_left{width:560px; margin-right:20px; float:left;} #column_right{width:200px; float:left;} /* div.spacer, permet de faire deux colonne dans #container */ div.spacer{clear:both; height:10px; display:block;} #footer{width:auto; display:block; height:24px;} C07