Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Seance 2 - Les bases du HTML

No description
by

Elie Matta

on 18 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Seance 2 - Les bases du HTML

Langage XHTML (balises et attributs) seance2.html Vous devriez savoir fair 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> 1. Lien relatif 1. Ouvrir les liens dans une nouvelle fenêtre <a href="seance1.html" target="_blank">Go to exemple1</a>
<!-- Ouvrir un lien relatif dans un nouvel onglet--> Autres utilisations des liens 2. Lien pour envoyer un email <a href="mailto:em@eliematta.com">Contactez moi</a> 3. Lien vers une ancre* <a href="#go-to-info">Lien vers une ancre</a> Définition: Une ancre est un point de repère que vous pouvez mettre dans vos pages HTML Utilisation: Etape 2: Etape 1: Modifier une balise dans le document HTML et ajouter l'attribut suivant: id ="go-to-info" Exemple 2: Lien vers une ancre située dans une autre page Modifier une balise dans le fichier seance1.html et ajouter l'attribut suivant: id ="info-seance1" Créer un lien dans le fichier seance2.html
<a href="seance1.html#info-seance1">Lien vers une ancre</a> Etape 1: Etape 2: <a href="http://www.google.com">Allez sur Google.com</a> 2. Lien externe 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. Vous devriez savoir -Eléments et blocs HTML
-Unités de mesure
-Paragraphes
-Textes
-Tableaux
-Listes
-Image
-Titres
-Calques (div)
... <!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"> </html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenue sur mon site web</title>
</head> <body> <h1>Votre nom et prénom</h1> <!-- h1 jusqu'a h6 sont des titres.
<h1> définit le titre le plus important.
<h6> definit le titre le moin important. --> <img src="./images/em.jpg"
alt="Elie Matta - Photo"
title="Photo d'Elie Matta" /> 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 Les titres <label>Nom et Prénom:</label> <br/> <div> <!-- Représentation avec des calques pour mieux afficher la mise en page --> </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> </div> <p>
<ol>
<li>Google</li>
<li>Bing</li>
<li>Youtube</li>
<li>MSN</li>
</ol>
</p> 1. Une liste ordonnée commence
par la balise <ol>.
Chaque élément de la liste commence
par la balise <li>. Les listes 2. Une liste non-ordonnée commence
par la balise <ul>.
Chaque élément de la liste commence
par la balise <li>. 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> <table width="200px" border="1" cellspacing="2" cellpadding="3"> <!-- Declaration d'un tableau --> largeur 200px bordure 1px espacement entre cellules espacement du cadre de la cellule <tr> <!-- Déclaration d'une ligne dans le tableau --> <th> <!-- Déclaration d'une en-tête --> Séance/Jour </th> <th>Lundi</th> </tr> <th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
<th>Samedi</th>
<th>Dimanche</th> <tr>
<th>08:00-9:30</th> <!-- Déclaration d'une cellule en-tête dans le tableau -->
<td>&nbsp;</td> <!-- Déclaration d'une cellule dans le tableau -->
<td>&nbsp;</td> <!-- &nbsp; = non breaking space = Espace vide -->
<td>&nbsp;</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>
....
<div>
<p>
Lien
<ul>
<li><a href="seance2.html">Page principale</a></li>
</ul>
</p>
</div> </body>
</html> </body> L'attribut title affiche
une bulle d'aide Le contenu de la balise <a> Taille de la police 4 types Les blocs HTML 2 types 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. Inline: L'élément est affiché dans le flot, sans retour à la ligne. Exemple: <h1>, <p> Exemple: <b>, <img> Taille de la police II. Changement de la taille de police à l'aide d'une des 4 unités de mesures Changement à partir des balises HTML ou en utilisant les unités de mesures <b>
<big>
<i>
<small>
<tt> I. Changement de la taille de police à l'aide des balises HTML 2. em 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 1. Pixel -Les pixels ont une taille fixe. -Ne s'adaptent pas aux appareils mobiles. -Utilisés pour supporter les écrans d'ordinateurs. 4. Points -Les points sont traditionnellement utilisées dans la presse écrite (tout ce qui doit être imprimé sur du papier, etc.) 3. Pourcentage -Évolutives (scalable) comme l'unité de mesure 'em' 72 points = 1 pouce. (4 pouces = 1 main) Exemple: Si la taille de la police sur vos écrans est 12px, donc 100% = 12px et 50% = 6px -Utilise le poucentage (%) pour définir la taille Les éléments HTML Un élément HTML est formé d'une balise HTML avec le contenu Exemple: <p> Ceci est un paragraphe </p> Exemple d'utilisation d'une ancre ...
</table> <!-- Fermeture du tableau -->
Full transcript