Définit un pied de page d'un document ou de la section
Les balises et attributs:
Les blises
C'est les langages HTML et CSS, qui vont servir précisément pour créer des sites web, et ils ont été créés de
manière à être simples à utiliser.
Le rôle de ce cours sera de vous apprendre à vous en servir.
Ces deux langages se complètent pour donner un site web :
Le langage HTML, contient des informations logiques : vous direz par exemple:
<<Ceci est le titre, ceci est le menu, ça c'est le texte principal de la page, là il y a une image ici etc...>>.
Le langage CSS sert pour présenter ce contenu et lui donner une belle apparence vous direz par exemple:
<<les titres sont en rouge, le texte de taille 12 pixel etc...>>.
le langage HTML est constitué de balises. Une balise a cette forme : < balise>
Exemple : <head></head>
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
1. Les balises par paire doiventt être ouvertes (sans quoi elle n'existe pas, évidemment) ; et doivent être fermées, elle serons présentée comme suit :
<balise> c’est l’ouverture de la balise
</balise> est la fermeture de la balise
Exemple : Dans le chapitre précédent nous avons vu les balises <html></html> , <body></body> et <head></head>
2. Les balises seules ou sans fermeture se présentent comme ceci : <balise>
Ne nécessite pas de fermeture .
Exemple : toujours dans le chapitre précédent nous avons vu la balise < !doctype html>
1• Les balises existant par paire : On écrit la première balise <balise>, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/" </balise>.
Par exemple : <balise>quelque chose </balise>
2• Les balises seules : Elle sert en général pour insérer un élément dans une page (image ou autre...)
Exemple : <chose> cet balise indique juste qu'il y a une chose à cet endroit image par exemple
Il est donc facile de reconnaœtre à quel type de balise on a affaire :
Toutes les balises doivent être refermées. Donc n'oubliez surtout pas de le faire Si non la balise n'aura aucun sens voir aucune existence.
Les balises doivent être ouvertes et refermées dans l'ordre. Il ne faut donc pas écrire :
<balie1> Attention ça, c'est <balise2>non.</balie1></balie2>
Mais écrire:
<balise1> Alors que ça, c'est <balise2> oui.</balise2> </balise1>
Nous avons ouvert une première balise que nous avons nommé balise1 et nous avons écrit un texte puis ouvert une deuxième balise que nous avons nommé balise2.
Il faut donc fermé la balise2 puis la balise1( en d’autre terme le dernier arrivé le premier servit). C’est ce que nous appelons imbrication de balise c'est-à-dire une balise imbriquée dans une autre et donc la balise qui est à l’intérieur doit être fermée bien évidement la première pour qu’elle soit imbriqué dans l’autre.
J’ai insisté sur ce problème car c’est une erreur qui crée pas male de problème qu’on est débutant.
Les balises du HTML
1. Balise principale de toute page web.
Ces balises doivent être placées comme suit dans chaque page HTML que vous créez.
<!DOCTYPE html> - Cette balise spécifie le langage que vous allez écrire sur la page. Dans ce cas, le langage est le HTML 5.
<html> - Cette balise signale qu'à partir d'ici, nous allons écrire en code HTML.
- C'est là que vont toutes les métadonnées de la page - des choses principalement destinées aux moteurs de recherche et autres programmes informatiques.
</head>
<body>
- C'est là que se trouve le contenu de la page.
</body>
</html>
Code : HTML
<!DOCTYPE html> <html> <!-- Cette balise signale qu'à partir d'ici, nous allons écrire en code HTML.--> <head> <!--- C'est là que vont toutes les métadonnées de la page - des choses principalement destinées aux moteurs de recherche et autres programmes informatiques.--> </head> <body> - C'est là que se trouve le contenu de la page. </body> </html>
Tout le code HTML de la page Web doit être écrit entre les deux lignes ci-dessus
c'est-à-dire entre <html>
et entre </html>
2. Balise d'entête
<head></head>
Dans cette balise c'est-à-dire entre <head> et </head> on met le titre de la page et d'autres
informations que nous verrons par la suite dans ce cours
<head>
<title>Titre du site</title>
</head>
Toutes les informations que vous allez mettre dans cette balise ne serons pas vues dans la page que va afficher le navigateur du visiteur sauf le titre qui lui sera afficher dans la bare du titre du navigateur.
3. Balise du corps
<body></body>
Dans cette balise c'est-à-dire entre <body> et </body> on met le corps de la page : le texte, les images, les liens, les tableaux etc…
Les attributs
Les balises acceptent parfois des caractéristiques supplémentaires permettant de les distinguer ou de les personnaliser. Ces options s'inscrivent dans leur nom et sont appelées « attributs » (ou « propriétés »). Leur valeur est toujours entourée d'apostrophes simples (') ou doubles (")
Ce sont les des précisions qu'on donne sur une balise par exemple si on insère une image il faut
donner son nom son emplacement Exemple
:<image nom= "Image1" emplacement="bla bla" taille="bla bla" position sur la page="bla bla" />
nom c'est l'attribut "Image1" est la valeur de l'attribut.
Pour les balises par paire les attributs ne sont mets que dans la balise ouvrante
<balise> et pas dans la balise fermante </body>
Conclusion
Nous avons fait un peu de théorie pour ne pas être déboussolé par la suite.
Les noms de balises que j'ai utilisé <balise>, <truc> ,<image /> n'existe pas nous aurons tout le temps de voir les vrais noms par la suite.
• Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules,(ex. : <balise /> )
• Les noms des attributs s'écrivent toujours en minuscules
• Les valeurs des attributs peuvent contenir des majuscules
• S'il y a des attributs dans une balise par paire, on ne les met que dans la balise ouvrante
Vous allez me dire mais nous ne savons pas encor faire de page Web
Eh bien nous y mettons tout de suite ouvrez votre éditeur
Tapez le code dans votre éditeur.
Sélectionner le code
<!DOCTYPE html>
<html >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
C'est mon site
</body>
</html>
Enregistrez le sous un nom, exemple : essai.html
Gardez ce fichier nous en aurons besoin pour d'autres exercices.
Si vous travaillez avec notepad++ avant d'enregistrer allez dans le menu LANGAGE et choisir l'option HTML
Ouvrez le fichier enregistré vous devez avoir une page web avec comme texte: C'est mon site
La barre du titre porte maintenant le titre que vous lui avez donné tout en haut à gauche de la fenêtre :
" mon site ! ".
Sur la page apparu le texte que vous avez indiqué dans la balise <body></body>
Explication du code ligne par ligne :
La première ligne est une ligne obligatoire pour toute page html. C'est une déclaration "Doctype". C'est une balise particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données. Cette balise sert à dire aux navigateurs que votre page est une page HTML, et qu'elle utilise la version 5 du langage HTML.
La seconde ligne c'est la balise <html> . C'est la balise principale qui englobera toute votre page HTML. On ne la ferme qu'en dernier avec </html> , qui indique que votre page HTML s'arrête là. Il n'y a donc rien après le </html> .
La balise <html> .
La troisième ligne. La balise <head> elle contient les informations d'en-tête pour votre page web. Elle est refermée un peu plus loin </head>.
o A l'intérieur de la balise <head> , vous trouvez notamment la balise <title>: c'est elle qui contient le titre de votre page web. Dans notre exemple, le titre est " mon site !"
o D'autre balises peuvent être dans la balise <head> . Il existe beaucoup de balises de ce type,on les nomme les metadonnées, mais je ne vous en parlerai que plus tard, mais vous pouvez les voir toudessuite en cliquant ce lien: Balise head.
Seule celle que nous avons utilisé dans notre code est indispensable <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> : elle indique que vous allez taper des caractères spécifiques au français (é è à ê etc...).
Enfin,à la 6ème ligne et après la fermeture de la balise <head> une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web.
En clair, c'est entre ces 2 balises que nous allons passer 95% de notre temps
Pour le moment, il y a entre ces 2 balises un très court texte " C'est mon site ", la page a un fond blanc, nous allons voire comment on peut le changer.
Remarque :
Pour la réouverture de votre page avec notepad++ click droit sur son icône et choisir l'option Edit with notepad++.
Avant de quitter cette partie du cours, sachez qu'on peut écrire un commentaire dans un code HTML.
Le commentaire sert à nous guider dans le code si le code par exemple est long.
Le commentaire ne sera pas visible aux visiteurs du site, il est écrit pour l'éditeur, vous.
La balise du commentaire est la suivante :
<!-- écrir ic votre commentaire -->.
Ajoutez cette ligne à votre code de tout à l'heur, remplacez le (écrir ic votre commentaire) par : un
commentaire que vous voulez exemple :
<!-- ce ci est un commentaire -->.
Enregistrez et constatez ce qui ce passe.
Alors si vous avez bien compris cette partie du cours on passe à la suivante si non
relisez la encor une ou deux fois jusqu'à ce que vous n'aurez plus de probléme avec.
Car c'est là toute la base du code d'une page
Et surtout faites des exercices.
Une dernière chose si vous ne pouvez pas être passion et attendre les prochains cours pour savoir plus sur les élément que nous venons de voir ,vous pouvez cliquer sur les liens que je vous ai mis dans presque chacun de ces éléments pour voir plus de détail.
chapitre précédent chapitre suivant