Base HTML11

Proposer par F.
Rachid ELFAJJY cours 2 : les balises
Bases d'une page HTML :

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="../sources/styles/style.css" rel="stylesheet" />
</head>
<Body>
</Body>
</html>
Les titres :
<H1>Titre en 1</H1>
<H2>Titre en 2</H2>
<H3>Titre en 3</H3>
<H4>Titre en 4</H4>
<H5>Titre en 5</H5>
<H6>Titre en 6</H6>
Gestion du texte :
<p>ceci c'est un paragraphe</p>

<b>ceci est en gras</b><br>
<u>ceci est souligné</u><br> voici un texte souligné.
<i>ceci est aussi en italique </i><br> voici un texte en italique
<strong>ceci est important </strong><br>
<em>ceci est peu important </em><br>
<mark> ceci est en relief </mark>
<s>ceci est barré </s><br>: voici un texte rayé.
<sub>ceci en indice </sub><br>
<sup>ceci en exposant </sup><br>
Mise en page :
<BR> : passer à la ligne (effet cumulable : deux <BR> saute une ligne)
<HR SIZE="épaisseur en pixels" WIDTH=largeur ALIGN=alignement> : créé une barre, peu utilisée mais utile
parfois...
<pre>
Ce contenu va
S’affiche
Telle qu’il est
</pre>
Filière : Développement Web Module : HTML / CSS

Proposer par F. Rachid ELFAJJY cours 2 : les balises
Liste :
Il y a 2 types de liste en HTML : liste de puces et liste numéroté
Liste de puces Liste numéroté
<ul> <ol>
<li>element 1</li> <li> element 1</li>
<li> element 1</li> <li> element 1</li>
</ul> </ol>
Pour modifier la puce en indique attribut Pour modifier la numérotation en indique attribut Type= "a
Type= "square ou circle" => <ul Type= "square" > ou A ou I ou i" => <ol Type= "a" >
Liens :
Un lien c’est une balise qui permet de lien les pages entre elles. 2 types de lien : Externe du site dit absolu et
interne du site dit relative :
Lien interne du site :
Les liens permettant de se déplacer d'une page vers une autre à travers un même site dite un chemin relatif ;
Trois types d’un chemin relatif selon la structure du site ; Par exemple soit la structure suivant :
Chemin : sous/page2.html Chemin : page1.html Chemin : ../page3.html
Lien externe du site :

Les liens permettant de se rendre sur d’autres sites. Dite un chemin absolu.
Pour créer un lien externe, on va devoir indiquer l’URL complète de destination du lien.
Par exemple soit les deux sites suivants :
Chemin : http://www.nomdusite.com
Chemin : C:\Users\rachi\Desktop\site2\page4.html
Images :
<IMG SRC="nom de votre image.extension" /> : pour insérer vos images.
<IMG SRC="nom de votre image.extension" atle="texte à afficher si img n’affiche pas"/> : pour insérer vos images.
Lien et image
Un lien sur une image c'est : <A HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg" A>
Un lien mail c'est : <A HREF="mailto:pseudo@provider.com">Cliquez pour envoyer un email>
Un lien avec une bulle d'information c'est : <A HREF="page2.html" ALT="votre texte pour
information">page2</A>
Créer ancre :
Dans le lien : <A HREF=" sous/page2.html#partie5">vers page2 partie5 </A>
Dans le code HTML partie1 c’est la valeur de l’attribut id pour l1ére balise de la partie 5

Audio :
<audio SRC="nom de votre audio.extension" /><audio> : pour insérer vos audio.
Vous pouvez compléter la balise des attributs suivants :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
width : pour modifier la largeur de l'outil de lecture audio ;
loop : la musique sera jouée en boucle ;
autoplay : la musique sera jouée dès le chargement de la page
preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet
attribut peut prendre les valeurs :
o auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les
métadonnées ou rien du tout,
o metadata : charge uniquement les métadonnées (durée, etc.),
o none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur
votre site.
Vidéo :
<video SRC="nom de votre video.extension" />< video > : pour insérer vos audio.
Rajoutons quelques attributs :
poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée.
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est en
général irritant d'arriver sur un site qui lance quelque chose tout seul !
preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut
peut prendre les valeurs :
o auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les
métadonnées ou rien du tout ;
o metadata : charge uniquement les métadonnées (durée, dimensions, etc.) ;
o none : pas de pré chargement. Utile si vous souhaitez éviter le gaspillage de bande passante
sur votre site.
Aucun format n'est reconnu par l'ensemble des navigateurs : il faut proposer différentes versions de
sa musique ou de sa vidéo pour satisfaire tous les navigateurs. Comme suite :

Tableaux :
Structure simple d'un tableau :
Exemple : Tableau de 2 lignes et 3 colonnes
<TABLE>
<TR>
<TABLE> pour ouvrir un tableau. <TD>Nom</TD>
<TR> pour ouvrir une ligne. <TD>Prénom</TD>
<TD></TD> pour ouvrir et fermer une cellule. <TD>Age</TD>
</TR> pour fermer une ligne. </TR>
<TR>
</TABLE> pour fermer le tableau. <TD>ELFAJJY</TD>
<TD>Rachid</TD>
<TD>28 ans</TD>
</TR>
</TABLE>
Personnaliser le tableau :
Exemple : Tableau Structuré
<TABLE>
<caption></caption>
<thead>
<TR>
<TH></TH> : pour ouvrir et fermer une cellule <TH>Nom</TH>
indiquant le titre du tableau. <TH>Prénom</TH>
<thead> </thead> pour la tête du tableau ; <TH>Age</TH>
</TR>
<tbody></tbody > pour le corps du tableau ; </thead>
<tfoot></tfoot> pour le pied du tableau. <tbody>
<caption></caption> Ajouter une légende à un tableau <TR>
<TD>ELFAJJY</TD>
<TD>Rachid</TD>
<TD>28 ans</TD>
</TR>
</tbody>
</TABLE>
Fusionner les cellules :

<TD COLSPAN="X"> : où X est le nombre de colonnes sur lequel s'étend la cellule.
<TD ROWSPAN="X"> : où X est le nombre de lignes sur lequel s'étend la cellule.
Avant fusionner Après le fusionner
<TABLE> <TABLE>
<TR> <TR>
<TH>Nom</TH> <TH>Nom</TH>
<TH>Prénom</TH> <TH>Prénom</TH>
<TH>Age</TH> <TH>Age</TH>
</TR> </TR>
<TR> <TR>
<TD>ELFAJJY</TD> <TD colspan=2>ELFAJJY rachid</TD>
<TD>Rachid</TD>
<TD>28 ans</TD> <TD>28 ans</TD>
</TR> </TR>
</TABLE> </TABLE>

Formulaires :
Insérer un formulaire commence toujours par le placement de :
<form method="" action="" >
ici vos champs de choix.
</form>
les différents champs (a mettre entre les balises <form> et </form> sont (par exemple) :
Champ de ligne simple : <input type="text" name="sonnom" id= sonnom" class= sonnom" />
En modifiant le type de l’input solen le type de l’information demandée
email pour la validation d’un email / date pour inséré la date selon une calandrer / numbre pour un nombre / color
pour inséré le code du colleur / password pour inséer le mot de passe / hidden utiliser un input invisible pour
l’utilisateur pour envoyer des infos complémentaires / reste pour vide le formulaire / submit pour envoyer le
formulaire / file pour insère un fichier (ajouter l’attribut enctype au from avec la valeur "multipart/form-data")
Champ multi-lignes :
<textarea name="son adresse" id= sonnom" class= sonnom" >entrez ici votre adresse</textarea>
Une liste déroulante :

<select name="genre" size="1">
<option value="madame" selected>madame</option>
<option value="mademoiselle">mademoiselle</option>
<option value="monsieur">monsieur</option>
</select>
Pour bien présenter votre formulaire il faut utilise la structure suivante :

<div class=" ">
<label for="" class="">……………</label>
<input type="" class="" id="" name="">
</div>
➢ Div pour regrouper le label et le contrôle input

➢ Pour label et l’input doivent avoir la même valeur dans le l’attribut for et l’attribut l’id pour lier le label avec
l’input
➢ Pour l’input on doit indiquer l’attribut : type pour indiquer le type de l’input name pour le fonctionnement du
formulaire et attribut class pour applique le style
➢ On change l’input par selecte si on veut d’avoir une liste déroulante ou par textarea pour une longe texte
des boutons radio : <input type="radio" name="bouton choisi" value="contact telephonique" id= sonnom"
class= sonnom" > → liste des choix avec un seul choix
des cases a cocher : <input type="checkbox" name="case coche" value="creation de site" id= sonnom"
class= sonnom" >→ liste des choix avec plusieurs choix
Remarques très importantes :

➢ Pour les inputs de type radio et checkbox on ajouter attribut Value
➢ Pour les inputs de type radio doivent avoir le même name
➢ Pour les inputs de type checkbox doivent avoir un name différent
➢ Pour bien présenter les inputs de type radio et checkbox il faut utilise la structure suivante :
<div class=" ">
<input class="" type="checkbox" value="" id="">
<label class="" for=" ">
……………
</label>
</div>
Un bouton d'envoi obligatoire à la fin du formulaire : <input type="submit" value="indique le texte à afficher">

Examinons maintenant les balises sémantiques (ou conteneurs HTML5) les plus utilisés :
En générale dans HTML 5 On utilise la balise <Div> ceci est un block</Div> pour créer de block dans la page
HTML et la balise <Span>ceci est un line</Span>
Mais il y a des balise pour chaque partie dans la page HTML qui sont en générale :
Balise <header>
Comme son nom l'indique la balise <header> est la balise d'entête (Il ne s'agit pas de la balise <head>. Là on parle de
conteneurs, donc ce sont des balises intégrées dans la balise <body>).
Balise <footer> : La balise <footer> est le pied de page. Elle doit normalement être placée en bas de celle-ci.
Balise <nav> : La balise <nav> renferme les liens du menu de navigation principal du site Web.
Balise <section> : La balise <section> constitue un bloc principal qui traite le même sujet ou contient des
informations de même nature.
Balise <aside> : La balise <aside> renferme du contenu supplémentaire à un bloc. Elle peut être placée dans la
balise <section> ou déclarée à part.
Balise <article> : La balise <article> est destinée à accueillir des informations externes au site Web. En effet, une
page ne contient pas toujours que notre propre contenu.
<header>
<section>
<nav>
<aside> <article>
<footer>

Base HTML11

Transféré par

Droits d'auteur :

Formats disponibles

Base HTML11

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Base HTML11

Transféré par

Droits d'auteur :

Formats disponibles

Proposer par F.

Rachid ELFAJJY cours 2 : les balises

Bases d'une page HTML :

<p>ceci c'est un paragraphe</p>

Filière : Développement Web Module : HTML / CSS

Chemin : sous/page2.html Chemin : page1.html Chemin : ../page3.html

Lien externe du site :

Filière : Développement Web Module : HTML / CSS

Filière : Développement Web Module : HTML / CSS

Exemple : Tableau de 2 lignes et 3 colonnes

Exemple : Tableau Structuré

Fusionner les cellules :

Filière : Développement Web Module : HTML / CSS

Une liste déroulante :

Pour bien présenter votre formulaire il faut utilise la structure suivante :

➢ Div pour regrouper le label et le contrôle input

Remarques très importantes :

Filière : Développement Web Module : HTML / CSS

Filière : Développement Web Module : HTML / CSS

Vous aimerez peut-être aussi