Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Seance 1 - Introduction au HTML et CSS
3
students.eliematta.com
Vous devriez savoir fair
Introduction
Vous devriez savoir
- Qu'est-ce que l'HTML? XHTML? HTLML5?
- Qu'est-ce que le CSS? CSS3?
- Les balises HTML
- Les attributs HTML
- Utiliser les éditeurs et navigateurs web
Qu'est-ce que l'HTML?
Qu'est-ce que le CSS?
CSS3 est la version la plus récente du CSS.
- Contient de nouveaux attributs pour facilement représenter la mise en page du site web
Les éditeurs
Les navigateurs
Les balises (tags)
Deux types de balises
Les balises existant par paire
Les balises seuls
<img />
Les attributs
Notion de base
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1. Le document HTML doit posséder une déclaration du DocType ("XHTML")
7. Imbrication de la balise
<title> dans la balise <head>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="FR">
<head>
Le chevauchement des
balises n'est pas permis
2. Le document HTML doit être entourer
de la balise <html> avec la déclaration
du namespace xmlns
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenue sur mon site web</title>
<head>
<title>Bienvenu sur mon site web
3. Le document HTML est divisé en 2 parties,
l'en-tête <head> et le contenu <body>
</head>
</title>
<style type="text/css">
p {
color:red;
font-family: verdana;
}
</style>
4. L’ en-tête est utilisé pour stocker de
l’information à propos du document
Exemple XHTML
Vous devriez savoir fair
</head>
<!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">
<head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>Ceci est une phrase sur une autre ligne.</p>
</body>
</html>
5. La balise <body> est utilisé pour
stocker le contenu du document
<body>
<!-- Le contenu du site web commence ici -->
8. Proprietées CSS dans l'en-tête
<h1>Votre nom et prénom</h1>
-Changement:
Traite les documents à la syntaxe conforme avec XML.
<p>Nom:<br/>
INF:</p>
-Évolution du language HTML, se fonde sur la syntaxe définie par XML.
-C'est donc l'HTML version 4.0 avec XML version 1.0
6. La balise <title> continue le titre de la
page qui va être afficher dans l'onglet.
Elle est aussi utiliser par les "robots"
pour indexer la page
XHTML: eXtensible HyperText Markup Language
<p><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Wikipedia image" /></p>
Qu'est-ce que l'XHTML?
</body>
</html>
-HTML: HyperText Markup Language
-Language que l'ordinateur comprend pour créer un site web
-Language de balisage
-Nous aide à créer un site web
-Les documents HTML sont également appelées pages web
-Extension .html
Version HTML 5.0
-Changement:
-Les balises sont invisibles pour le visiteur
-Elles servent de marqueurs pour indiquer quelque chose au navigateur
Exemple HTML5
-Une balise commence par < et se termine par >
-S'écrivent toujours en minuscule
Exemple d'une structure d'une page HTML
-etc.
Exemple - Balise seul
Qu'est-ce que l'HTML5?
Exemple - Balise par paire
Ouverture de la balise citation
-Meilleure gestion des erreurs
-Le standard recommendé par le World Wide Web Consortium (W3C) depuis Décembre 2012.
<citation>On ne peut désirer ce qu'on ne connaît pas.</citation>
-Déclaration minimaliser du DOCTYPE
Fermeture de la balise citation
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur mon site web</title>
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>
Ceci est une phrase sur une autre ligne.</p>
</body>
</html>
-Les attributs modifient le comportement des balises
-Un attribut se compose d’un mot clef (son nom) et d’une valeur
-On peut trouver des attributs sur les deux types de balises (par paire ou seules)
-S'ecrivent toujours en minuscule
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Titre du site web</h1>
<p>Ceci s'agit d'un paragraphe. <br/>
Ceci est une phrase sur une autre ligne.</p>
</body>
</html>
-Réduire le besoin de plugins externes (comme Flash)
Exemple d'attribut avec les balises seuls
-Traite les documents à la syntaxe non conforme
Exemple d'attribut avec les balises par paire
<img src="file:///C:/Users/user/Desktop/logo3w.png"/>
ou
<img src="http://www.google.com/images/srpr/logo3w.png"/>
<p title="Un paragraphe">Ceci s'agit d'un paragraphe.</p>
-Comprend une couche application avec de nombreuses API
Valeur
Attribut
-Présente une valeur sémantique qui permet à l’ordinateur de mieux comprendre à quoi correspond le contenu des balises
CSS: Cascading Style Sheets
Création Web
-Gère la structuration et la présentation de la page web séparément du code HTML
-Contient les styles qui définissent la façon d'afficher les éléments HTML
-Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page du site
Exemple CSS
Changement de la police
et couleur du paragraphe
p {
color: red;
font-family: verdana;
}
Exemple CSS3
Qu'est-ce que le CSS3?
Notepad
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
color:red;
}
div#div2
{
-moz-transform:rotate(30deg);
}
</style>
</head>
<body>
<h1>Titre du site web</h1>
<div>Ceci est un texte dans une division. </div>
<div id="div2">Ceci est un texte dans une autre division.</div>
</body>
</html>
Notepad++
>Suivez les instructions du site students.eliematta.com pour installer l'éditeur Notepad++
Internet Explorer
Mozilla Firefox
>Suivez les instructions du site students.eliematta.com pour installer le navigateur Mozilla Firefox