Introducing
Prezi AI.
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Loading…
Seance 2 - Les bases du HTML
1
Transcript
Langage XHTML (balises et attributs)
Vous devriez savoir fair
seance2.html
Les liens
- Ce sont les balises <a>
- Utilisation: Mettre le lien dans l'attribut "href"
Deux types de liens
<a href="seance1.html" title="Ouvrir le fichier exemple1">Exemple 1</a>
<a href="http://www.google.com">Allez sur Google.com</a>
Autres utilisations des liens
1. Ouvrir les liens dans une nouvelle fenêtre
2. Lien pour envoyer un email
3. Lien vers une ancre*
Définition: Une ancre est un point de repère que vous pouvez mettre dans vos pages HTML
Modifier une balise dans le document HTML et ajouter l'attribut suivant: id ="go-to-info"
<a href="#go-to-info">Lien vers une ancre</a>
Taille de la police
Changement à partir des balises HTML ou en utilisant les unités de mesures
I. Changement de la taille de police à l'aide des balises HTML
<b>
<big>
<i>
<small>
<tt>
1. Pixel
II. Changement de la taille de police à l'aide d'une des 4 unités de mesures
-Les pixels ont une taille fixe.
-Utilisés pour supporter les écrans d'ordinateurs.
2. em
-Ne s'adaptent pas aux appareils mobiles.
Les unités 'em' dépendent de la police de caractères.
Exemple: Si la taille de la police sur vos écrans est 12px, donc 1 em = 12px et 1.5 em = 18px
3. Pourcentage
-Évolutives (scalable) comme l'unité de mesure 'em'
-Utilise le poucentage (%) pour définir la taille
Exemple: Si la taille de la police sur vos écrans est 12px, donc 100% = 12px et 50% = 6px
4. Points
-Les points sont traditionnellement utilisées dans la presse écrite (tout ce qui doit être imprimé sur du papier, etc.)
72 points = 1 pouce. (4 pouces = 1 main)
Vous devriez savoir
Les éléments HTML
Un élément HTML est formé d'une balise HTML avec le contenu
-Eléments et blocs HTML
-Unités de mesure
-Paragraphes
-Textes
-Tableaux
-Listes
-Image
-Titres
-Calques (div)
...
Exemple: <p> Ceci est un paragraphe </p>
Les blocs HTML
2 types
Exemple: <h1>, <p>
Block: Un retour à la ligne est généré avant et après l'affichage de l'élément. L'élément fonctionne comme une boite.
Exemple: <b>, <img>
Inline: L'élément est affiché dans le flot, sans retour à la ligne.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="FR">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenue sur mon site web</title>
</head>
<h1>Votre nom et prénom</h1>
Les titres
<img src="./images/em.jpg"
alt="Elie Matta - Photo"
title="Photo d'Elie Matta" />
<!-- h1 jusqu'a h6 sont des titres.
<h1> définit le titre le plus important.
<h6> definit le titre le moin important. -->
Les images
Ce sont les balises seuls <img/>
Utilisation:
-Etape 1: Mettre dans l'attribut "src",
le chemin où l'image existe
-Etape 2: Mettre dans l'attribut "alt",
le texte alternatif.
Ce texte sera affiché à la place de l'image
si celle-ci ne peut pas être téléchargée
<label>Nom et Prénom:</label>
<br/>
2. Lien externe
1. Lien relatif
<div> <!-- Représentation avec des calques pour mieux afficher la mise en page -->
Le contenu de la balise <a>
L'attribut title affiche
une bulle d'aide
</div>
<p> <!-- Déclaration d'un paragraphe -->
<strong>Le Lorem Ipsum</strong> est simplement du faux texte
<i>employé</i> dans la composition <em>et la mise en page</em>
avant impression. Le Lorem Ipsum est le faux texte standard de
l'imprimerie depuis les années <sup>1500</sup>, quand un peintre
anonyme assembla ensemble des morceaux de texte pour réaliser
un livre spécimen de polices de texte.
</p>
<div>
<a href="mailto:em@eliematta.com">Contactez moi</a>
<a href="seance1.html" target="_blank">Go to exemple1</a>
<!-- Ouvrir un lien relatif dans un nouvel onglet-->
Les listes
<p>
<ol>
<li>Google</li>
<li>Bing</li>
<li>Youtube</li>
<li>MSN</li>
</ol>
</p>
Utilisation:
Etape 1: Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.
Etape 2: Faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
1. Une liste ordonnée commence
par la balise <ol>.
Chaque élément de la liste commence
par la balise <li>.
Exemple d'utilisation d'une ancre
</div>
Etape 1:
Etape 2:
</body>
</html>
Exemple 2: Lien vers une ancre située dans une autre page
Etape 1:
Modifier une balise dans le fichier seance1.html et ajouter l'attribut suivant: id ="info-seance1"
Etape 2:
Créer un lien dans le fichier seance2.html
<a href="seance1.html#info-seance1">Lien vers une ancre</a>
2. Une liste non-ordonnée commence
par la balise <ul>.
Chaque élément de la liste commence
par la balise <li>.
Taille de la police
4 types
horaire.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Horaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>Elie MATTA - INF #00000 - Option OGL</h3>
<!-- Declaration d'un tableau -->
<table width="200px" border="1" cellspacing="2" cellpadding="3">
largeur 200px
espacement du cadre de la cellule
bordure 1px
espacement entre cellules
<tr> <!-- Déclaration d'une ligne dans le tableau -->
<th> <!-- Déclaration d'une en-tête -->
Séance/Jour
</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
<th>Samedi</th>
<th>Dimanche</th>
</tr>
<tr>
<th>08:00-9:30</th> <!-- Déclaration d'une cellule en-tête dans le tableau -->
<td> </td> <!-- Déclaration d'une cellule dans le tableau -->
<td> </td> <!-- = non breaking space = Espace vide -->
<td> </td>
<td>Création Web</td>
<td>Compilateur</td>
<td colspan="2" rowspan="6">
<!-- colspan va prendre la place de 2 colonnes. rowspan va prendre la place de 6 lignes -->
<img style="width: 100%;" src="./images/weekend.jpg" alt="C'est le weekend" />
<a href="http://goo.gl/KRSb8" target="_blank">
> Voir l'image originale
</a>
</td>
</tr>
....
...
</table> <!-- Fermeture du tableau -->
<div>
<p>
Lien
<ul>
<li><a href="seance2.html">Page principale</a></li>
</ul>
</p>
</div>
</body>
</html>
Choose a template
Presentations from around the world
Learn more about creating dynamic, engaging presentations with Prezi