Langage HTML5 - 23-24

Faculté des Sciences El Jadida
Langage HTML5
Prof. Mohamed NABIL

Département Informatique
Année Universitaire 2022/2023
HTML5
1. Structure de base d'une page HTML5
Il indique au navigateur Web que ce

document est un document HTML5
En-tête
Document html
Corps
2
HTML5
2. Balises et éléments HTML

Elément
<p class="foo">Hello world</p>
Balise d'ouverture Attributs Valeur contenu Balise de fermeture
 Les noms de balises et d'attributs ne sont pas sensibles à la casse <P> et <p>
 Éléments HTML vides
<img src="images/sky.jpg" alt="Cloudy Sky">
3
HTML5
2. Balises et éléments HTML
 Imbrication d'éléments HTML
<p> Here is some <b> bold </b> text </p>

 Commentaires en HTML
<! - Ceci est un commentaire HTML ->
4
HTML5
3. Attributs HTML
 Les attributs définissent des caractéristiques ou propriétés supplémentaires de

l'élément telles que la largeur et la hauteur d'une image.
 Les attributs sont toujours spécifiés dans la balise d'ouverture et se composent
généralement de paires nom/valeur comme name = "value".
<img src="images/sky.jpg" width="30" height="30 " alt="Cloudy Sky">
 Attributs booléens ne se composent pas de paires nom/valeur mais se composent
uniquement de nom.
checked, disabled, readonly, required
<input type="checkbox" checked>
5
HTML5
3. Attributs HTML
Il existe certains attributs que nous pouvons les utiliser sur la majorité des éléments HTML.
Tels que id, title, class, style.
L'attribut id est utilisé pour donner un identifiant unique à un élément dans un document.
<input type="text" id="firstName">
<p id="infoText"> Ceci est un paragraphe </p>
L'attribut class est également utilisé pour identifier les éléments. Mais contrairement à id,
l'attribut class n'a pas besoin d'être unique dans le document.
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p> 6

HTML5
3. Attributs HTML
La valeur de l'attribut title est affichée sous forme d'infobulle par les navigateurs Web
lorsque l'utilisateur place le curseur de la souris sur l'élément.
<abbr title="World Wide Web Consortium"> W3C </abbr>
L'attribut style permet de spécifier des règles de style telles que la couleur, la police, la
bordure, etc.
<p style="color: blue;"> Ceci est un paragraphe </p>
7
HTML5
4. Titres HTML
<!DOCTYPE html> Heading level 1

<html lang="en">
<head>
<meta charset="UTF-8">
Heading level 2
<title>Example of HTML headings tag</title>
</head> Heading level 3
<body>
<h1>Heading level 1</h1>
Heading level 4
Heading level 5
Heading level 6
</body>
</html>
8
HTML5
5. Paragraphes HTML
 Création de paragraphes
<!DOCTYPE html> This is a paragraph.
<html> This is another paragraph.
<head>
<title>Creating Paragraphs in HTML</title>
</head>
<body>
<p> This is a paragraph.</p>
<p> This is another paragraph.</p>
</body>
</html>
9
HTML5
5. Paragraphes HTML
 Création de sauts de ligne
<!DOCTYPE html> This is a paragraph

<html> with line break.
<head> This is
<title>Inserting Line Breaks in HTML</title> another paragraph
</head> with line breaks.
<body>
<p>This is a paragraph <br> with line
break.</p>
<p>This is <br> another paragraph <br> with
line breaks.</p>
</body>
</html>
10
HTML5
5. Paragraphes HTML
 Création de règles horizontales
<!DOCTYPE html> This is a paragraph.

<html>
<head> This is another paragraph.
<title>Creating Horizontal Lines in HTML</title>
</head>
<body>
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
</body>
</html>
11
HTML5
5. Paragraphes HTML
 Gérer les espaces blancs
<!DOCTYPE html> This paragraph contains multiple

<html lang="en"> spaces in the source code.
<head>
<title>White Space Collapsing in HTML</title> This paragraph contains multiple
</head> tabs and line breaks in the source
<body> code.
<p> This paragraph contains multiple spaces
in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>
</body>
</html>
12
HTML5
5. Paragraphes HTML
 Gérer les espaces blancs
<!DOCTYPE html> This paragraph has

<html > multiple spaces.
<head> This paragraph has
<title>Preserving White Space in HTML</title> multiple
</head>
<body> line
<p>This paragraph has multiple
spaces.</p>
<p>This paragraph has multiple <br><br> line breaks.
<br> <br> <br> breaks.</p>
</body>
</html>
13
HTML5
5. Paragraphes HTML
 Définition du texte préformaté
<!DOCTYPE html> Twinkle, twinkle, little star,

<html> How I wonder what you are!
<head> Up above the world so high,
<title>HTML Preformatted Text</title> Like a diamond in the sky.
</head>
<body>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
</body>
</html>
14
HTML5
6. Liens HTML
 Syntaxe du lien HTML
<a href="url"> Texte du lien </a>

<!DOCTYPE html> Google Search
<html>
<head> Tutorial Republic
<title>Creating Links in HTML</title>
</head>
<body>
<p> <a href="https://www.google.com/" target="_blank">
Google Search </a></p>
<p> <a href="https://www.tutorialrepublic.com/">Tutorial
Republic </a></p>
</body>
</html>
15
HTML5
6. Liens HTML
 Définition des cibles (targets) pour les liens
L'attribut target indique au navigateur où ouvrir le document lié.

 _blank : Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet.
 _parent : Ouvre le document lié dans la fenêtre parent.
 _self : Ouvre le document lié dans la même fenêtre ou onglet que le document source.
 _top : Ouvre le document lié dans la fenêtre complète du navigateur.
16
HTML5
6. Liens HTML
 Création d'ancres de signets
 Les ancres de signet permettent aux utilisateurs d'accéder à une section spécifique
d'une page Web.
 Les signets sont particulièrement utiles si vous avez une très longue page Web.
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
17
HTML5
6. Liens HTML
 Création d'ancres de signets
 Les ancres de signet permettent aux utilisateurs d'accéder à une section spécifique
d'une page Web.
 Les signets sont particulièrement utiles si vous avez une très longue page Web.
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
Vous pouvez même accéder à une section d'une autre page Web en spécifiant
l'URL de cette page avec l'ancre (c'est-à-dire #elementId) dans l'attribut href.
<a href="mypage.html#topicA"> Aller à TopicA </a>.
18
HTML5
6. Liens HTML
 Création de liens de téléchargement
<!DOCTYPE html> Download Zip file

<html>
<head> Download PDF file
<title>HTML Download Links</title>
</head> Download Image file
<body>
<p><a href="/examples/downloads/test.zip">Download Zip
file</a></p>
<p><a href="/examples/downloads/masters.pdf">Download
PDF file</a></p>
<p><a href="/examples/downloads/sample.jpg">Download
Image file</a></p>
</body>
</html>
19
HTML5
6. Formatage de texte HTML
<!DOCTYPE html>
This is bold text.
<html lang="en">
<head> This is strongly important
<title>Formatting Text in HTML</title>
text.
</head>
<body> This is italic text.
<p>This is <b>bold text</b>.</p>
This is emphasized text.
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p> This is highlighted text.
<p>This is <em> emphasized text</em>.</p>
This is computer code.
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p> This is smaller text.
<p>This is <small> smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> This is subscript and superscript text.
text.</p> This is deleted text.
<p>This is <del>deleted text</del>.</p>
<p>This is <ins> inserted text</ins>.</p> This is inserted text.
</body>
</html>
20
HTML5
 Mise en forme des citations
<!DOCTYPE html> Blockquotes are generally

<html lang="en"> displayed with indented left
<head> and right margins, along with
<title>HTML Block Quotations</title> a little extra space added
above and below.
</head>
<body>
Learn from yesterday,
<blockquote>
live for today, hope for
<p>Learn from yesterday, live for today, hope
tomorrow. The important
for tomorrow. The important thing is not to stop
thing is not to stop
questioning.</p>
questioning.
<cite>— Albert Einstein</cite>
— Albert Einstein
</blockquote>
</body>
</html>
21
HTML5
 Affichage des abréviations
<!DOCTYPE html> The W3C is the main

<html lang="en"> international standards
<head> organization for the WWW or
<title>Showing Abbreviations in HTML</title> W3. It was founded by Tim
</head> Berners-Lee.
<body>
<p>The <abbr title="World Wide Web
Consortium">W3C</abbr> is the main international
standards organization for the <abbr title="World
Wide Web">WWW or W3</abbr>. It was founded
by Tim Berners-Lee.</p>
</body>
</html>
22
HTML5
 Marquage des adresses de contact

<!DOCTYPE html> Lorem ipsum dolor sit amet, consectetur
<html lang="en"> adipiscing elit. Nam eu sem tempor,
<head> varius quam at, luctus dui.
<title>Formatting Addresses in
HTML</title> Mozilla Foundation
</head> 331 E. Evelyn Avenue
<body> Mountain View, CA 94041, USA
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit..</p>
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>
</body>
</html>
23
HTML5
6. Styles HTML
 Le HTML est assez limité lorsqu'il s'agit de la présentation d'une page Web.
 Il a été conçu à l'origine comme un moyen simple de présenter des informations.
 CSS (Cascading Style Sheets) a été introduit en décembre 1996 par W3C pour fournir
une meilleure façon de styliser les éléments HTML.
Avec CSS, il devient très facile de spécifier des éléments tels que,
La mise en forme des caractères
La mise en forme des paragraphes
Etc.
Style en ligne - Utilisation de l'attribut style dans la balise de début HTML.

Style incorporé - Utilisation de l'élément <style> dans la section d'en-tête du document.
Style externe - Utilisation de l'élément <link>, pointant vers un fichier CSS externe.
24
HTML5
6. Styles HTML
 Styles en ligne
On place les règles de style directement dans la balise de début d’un élément à l'aide de l'attribut style.
L'attribut style comprend une série de paires de propriétés et de valeurs CSS comme suit:
propriété : valeur;
<!DOCTYPE html>
This is a heading
<html lang="en">
<head> This is a paragraph.
This is some text.
<title>Using Inline Styles in HTML</title>
</head>
<body>
<h1 style="color:red;font-size:30px;">This is a heading</h1>
<p style="color:green;font-size:18px;"> This is a paragraph.
</p>
<div style="color:green; font-size:18px;"> This is some text.
</div>
</body>
</html>
25
HTML5
6. Styles HTML
 Feuilles de style intégrées
Les feuilles de style incorporées sont définies dans la section <head> d'un document
HTML à l'aide de la balise <style>.
<!DOCTYPE html> This is a heading
<html lang="en"> This is a paragraph.
<head>
<title>Using Embedded Style Sheet in HTML</title>
<style type="text/css">
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
26
HTML5
6. Styles HTML
 Feuilles de style externes
 Les feuilles de style externes prouvent être attachées par deux manières: liaison et
importation.
 Une feuille de style externe peut être liée à un document HTML à l'aide de la balise
<link>. La balise <link> va dans la section <head>.
 Une feuille de style externe est importée par l’instruction @import qui indique au
navigateur de charger une feuille de style externe et de l’utiliser.
 l’instruction @import va dans la section <head>.
27
HTML5
6. Styles HTML
Liaison des feuilles de style externes
<!DOCTYPE html> Linking External Style Sheet

<html lang="en"> The styles of this HTML
<head> document are defined in linked
<meta charset="UTF-8"> style sheet.
<title>Linking External Style Sheet in HTML</title>
<link rel="stylesheet" href="/examples/css/style.css">
</head>
<body>
<h1>Linking External Style Sheet</h1>
<p>The styles of this HTML document are defined in
linked style sheet.</p>
</body>
</html>
28
HTML5
6. Styles HTML
Importation de feuilles de style externes

<!DOCTYPE html>
<html>
<head>
<title>Importing Style Sheet in HTML</title>
<style type="text/css">
@import url("/examples/css/style.css");
p { color: blue;
font-size: 16px;}
</style>
</head>
<body>
<h1>The styles for this heading are defined in the imported style sheet</h1>
<p>The styles for this paragraph are defined in the embedded style sheet.</p>
</body>
</html>
29
HTML5
6. Images HTML
 Insertion d'images dans des pages Web
<img src="url" alt="some_text">
<!DOCTYPE html>
<html>
<head>
<title>Placing Images in HTML Documents</title>
</head>
<body>
<img src="/examples/images/kites.jpg" alt="Flying Kites">
<img src="/examples/images/sky.jpg" alt="Cloudy Sky">
</body>
</html>
30
HTML5
6. Images HTML
 Définition de la largeur et de la hauteur d'une image
Les attributs width et height sont utilisés pour spécifier la largeur et la hauteur d'une
image. Les valeurs de ces attributs sont interprétées en pixels par défaut.
<img src="/examples/images/kites.jpg" alt="Flying Kites“ width="300" height="300">
<img src="/examples/images/kites.jpg" alt="Flying Kites“ style="width: 300px; height: 300px;">
31
HTML5
6. Images HTML
 Utilisation de l'élément d'image HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Specify Multiple Source for Images in HTML</title>
</head>
<body>
<picture>
<source media="(min-width: 1000px)" srcset="/examples/images/logo-large.png">
<source media="(max-width: 500px)" srcset="/examples/images/logo-small.png">
<img src="/examples/images/logo-default.png" alt="My logo">
</picture>
<p><strong>Note:</strong> Open the output in a new blank tab (Click the
arrow next to "Show Output" button) and resize the browser window to understand how
it actually works.</p>
</body>
</html>
32
HTML5
6. Images HTML
 Travailler avec des cartes d'images
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Image Maps in HTML</title>
</head>
<body>
<img src="/examples/images/objects.png" usemap="#objects" alt="Objects">
<map name="objects">
<area shape="circle" coords="137,231,71" href="/examples/html/clock.html"
alt="Clock">
<area shape="poly" coords="363,146,273,302,452,300"
href="/examples/html/sign.html" alt="Sign">
<area shape="rect" coords="520,160,641,302" href="/examples/html/book.html"
alt="Book">
</map>
</body>
</html>
33
HTML5
7. Tableaux HTML
 Création de tableaux en HTML
<table>
<tr>
<th>No.</th>
<th>Name</th> No. Name Age
<th>Age</th> 1 Peter Parker 16
</tr>
2 Clark Kent 34
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr> La plupart des attributs de l'élément <table>
<tr> tels que border, cellpadding, cellspacing,
<td>2</td> width, align, etc. Pour styliser les apparences
<td>Clark Kent</td> des tableaux dans les versions antérieures ont
<td>34</td> été supprimés dans HTML5, évitez donc de
</tr> les utiliser. Utilisez plutôt CSS pour styliser
</table> les tableaux HTML.
34
HTML5
7. Tableaux HTML
 Création des tableaux en HTML
<head>
<title> Adding Borders and Paddings
to HTML Tables </title>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
35
HTML5
7. Tableaux HTML
 Création des tableaux en HTML
<head>
<title> Adding Borders and Paddings
to HTML Tables </title>
No. Name Age
<style>
table {
border-collapse: collapse; 1 Peter Parker 16
}
table, th, td { 2 Clark Kent 34
border: 1px solid black;
} 3 Harry Potter 11
th, td {
padding: 10px;
} La plupart des attributs de l'élément <table>
th { tels que border, cellpadding, cellspacing,
text-align: left; width, align, etc. Pour styliser les apparences
} des tableaux dans les versions antérieures ont
</style> été supprimés dans HTML5, évitez donc de
</head> les utiliser. Utilisez plutôt CSS pour styliser
les tableaux HTML. 36
HTML5
7. Tableaux HTML
 Couverture (fusion) de plusieurs lignes et colonnes
<table>
<tr>
<th> Name </th>
Name Phone
<th colspan="2">Phone</th>
</tr> John Carter 5550192 5550152
<tr>
<td> John Carter</td>
<td> 5550192</td>
<td> 5550152</td>
</tr>
</table>
37
HTML5
7. Tableaux HTML
 Couverture (fusion) de plusieurs lignes et colonnes
<table>
<tr>
<th> Name:</th>
</tr> Name: John Carter
<tr>
<th rowspan="2">Phone:</th> 55577854
<td> 55577854</td> Phone:
</tr> 55577855
<tr>
<td> 55577855</td>
</tr>
</table>
38
HTML5
7. Tableaux HTML
 Ajout de légendes aux tableaux
Users Info
<table> Name: John Carter
<caption> Users Info</caption>
<tr> 55577854
Phone:
<th> Name:</th> 55577855
</tr>
<tr> Users Info
<th rowspan="2">Phone:</th>
<td> 55577854</td> <style>
</tr>
<tr> Table caption {
<td> 55577855</td> caption-side: bottom;
</tr> }
</table> </style>
39
HTML5
7. Tableaux HTML
 Définition d'un en-tête, d'un corps et d'un pied de page de tableau
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead> Items Expenditure
<tbody>
<tr> Stationary 2,000
<td>Stationary</td>
<td>2,000</td>
</tr> Furniture 10,000
<tr>
<td>Furniture</td>
<td>10,000</td>
Total 12,000
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
40
HTML5
8. Listes HTML
Liste non ordonnée - Utilisé pour créer une liste d'éléments associés, sans ordre
particulier .


Liste ordonnée - Utilisée pour créer une liste d'articles associés, dans un ordre
spécifique.
1.
2.
Liste de description - Utilisée pour créer une liste de termes et leurs descriptions.
Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
41
HTML5
8. Listes HTML
 Listes HTML non ordonnées
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li> • Chocolate Cake
<li>Pineapple Cake</li> • Black Forest Cake
</ul>
<hr> • Pineapple Cake
<ul>
<li>Chocolate Cake • Chocolate Cake
<ul> o Chocolate Velvet Cake
<li>Chocolate Velvet Cake</li> o Chocolate Lava Cake
<li>Chocolate Lava Cake</li>
</ul> • Black Forest Cake
</li> • Pineapple Cake
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
42
HTML5
8. Listes HTML
 Listes HTML non ordonnées
<style>
ul {
list-style-type: square;
}
</style>
<ul>  Chocolate Cake

<li>Chocolate Cake</li>  Black Forest Cake
<li>Black Forest Cake</li>  Pineapple Cake
<li>Pineapple Cake</li>
</ul>
43
HTML5
8. Listes HTML
 Listes ordonnées HTML
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li> 1. Fasten your seatbelt
<li>Look around and go</li> 2. Starts the car's engine
</ol> 3. Look around and go
<hr>
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li> 4. Fasten your seatbelt
<li>Look around and go 5. Starts the car's engine
<ol> 6. Look around and go
<li>Check the blind spot</li> 1. Check the blind spot
<li>Check surrounding for safety</li> 2. Check surrounding for safety
</ol>
</li>
</ol>
44
HTML5
8. Listes HTML
 Listes ordonnées HTML
<ol start=“5"> 5. Fasten your seatbelt

<li>Fasten your seatbelt</li> 6. Starts the car's engine
<li>Starts the car's engine</li> 7. Look around and go
<li>Look around and go</li>
</ol>
<style> V. Fasten your seatbelt

ol { VI. Starts the car's engine
list-style-type: upper-roman; VII. Look around and go
}
</style>
45
HTML5
8. Listes HTML
 Listes de description HTML
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd> A drink made from roasted coffee beans.</dd>
</dl>
Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
46
HTML5
9. Formulaires HTML
 Qu'est-ce qu'un formulaire HTML?
contrôle : une zone de saisie
Bouton d'envoi
 Case à cocher
o Bouton radio
47
HTML5
9. Formulaires HTML
 Élément d'entrée
Champs de texte
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
Champs de mot de passe
<form>
<label for="user-pwd "> Password :</label>
<input type="password " name=“user- password " id=" user-pwd ">
</form>
48
HTML5
9. Formulaires HTML
Bouton radio
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>
Cases à cocher
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
</form>
49
HTML5
9. Formulaires HTML
Boîte de sélection de fichier
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
Textarea
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
50
HTML5
9. Formulaires HTML
Sélectionner des cases
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
51
HTML5
9. Formulaires HTML
Boutons d'envoi et de réinitialisation
<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Regroupement des contrôles de formulaire
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form> 52
HTML5
10. HTML iFrame

 Définition et syntaxe
<iframe src = "URL"> </iframe>
Exemple
<!DOCTYPE html>
<html>
<head>
<title> HTML iFrame</title>
</head>
<body>
<iframe src="/examples/html/hello.html"></iframe>
</body>
</html>
53
HTML5
10. HTML iFrame

 Définition de la largeur et de la hauteur d'un iFrame
<iframe src="hello.html" width="400" height="200"></iframe>
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

 Suppression de la bordure du cadre par défaut
<iframe src="hello.html" style="border: none;"></iframe>
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>

 Utilisation d'un iFrame comme cible de lien
<iframe src="demo-page.html" name="myFrame"></iframe>

<p> <a href="https://www.tutorialrepublic.com" target="myFrame"> Open
TutorialRepublic.com </a>
54
</p>
Faculté des Sciences El Jadida
Langage HTML5
Prof. Mohamed NABIL

Département Informatique
Année Universitaire 2022/2023

Langage HTML5 - 23-24

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

Langage HTML5 - 23-24

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences El Jadida

Prof. Mohamed NABIL

1. Structure de base d'une page HTML5

Il indique au navigateur Web que ce

2. Balises et éléments HTML

<p class="foo">Hello world</p>

Balise d'ouverture Attributs Valeur contenu Balise de fermeture

2. Balises et éléments HTML

 Imbrication d'éléments HTML

<p> Here is some <b> bold </b> text </p>

 Les attributs définissent des caractéristiques ou propriétés supplémentaires de

<input type="checkbox" checked>

<input type="text" id="firstName">

<p id="infoText"> Ceci est un paragraphe </p>

<input type="text" class="highlight">

<div class="box highlight">Some content</div>

<p class="highlight">This is a paragraph.</p> 6

<abbr title="World Wide Web Consortium"> W3C </abbr>

<p style="color: blue;"> Ceci est un paragraphe </p>

<!DOCTYPE html> Heading level 1

 Création de sauts de ligne

<!DOCTYPE html> This is a paragraph

 Création de règles horizontales

<!DOCTYPE html> This is a paragraph.

 Gérer les espaces blancs

<!DOCTYPE html> This paragraph contains multiple

 Gérer les espaces blancs

<!DOCTYPE html> This paragraph has

 Définition du texte préformaté

<!DOCTYPE html> Twinkle, twinkle, little star,

 Syntaxe du lien HTML

<a href="url"> Texte du lien </a>

 Définition des cibles (targets) pour les liens

L'attribut target indique au navigateur où ouvrir le document lié.

 Création d'ancres de signets

<a href="#sectionA">Jump to Section A</a>

<h2 id="sectionA">Section A</h2>

 Création d'ancres de signets

<a href="mypage.html#topicA"> Aller à TopicA </a>.

 Création de liens de téléchargement

<!DOCTYPE html> Download Zip file

6. Formatage de texte HTML

6. Formatage de texte HTML

 Mise en forme des citations

<!DOCTYPE html> Blockquotes are generally

6. Formatage de texte HTML

 Affichage des abréviations

<!DOCTYPE html> The W3C is the main

6. Formatage de texte HTML

 Marquage des adresses de contact

Style en ligne - Utilisation de l'attribut style dans la balise de début HTML.

Liaison des feuilles de style externes

<!DOCTYPE html> Linking External Style Sheet

Importation de feuilles de style externes

<img src="url" alt="some_text">

<img src="/examples/images/kites.jpg" alt="Flying Kites“ style="width: 300px; height: 300px;">

<ul>  Chocolate Cake

<ol start=“5"> 5. Fasten your seatbelt

<style> V. Fasten your seatbelt

contrôle : une zone de saisie

Champs de mot de passe

Boîte de sélection de fichier

Sélectionner des cases