docFormation (X)HTML et CSS - Créer son site web pour les dÃ
download 
Plainte Transcription
Formation (X)HTML et CSS - Créer son site web pour les dÃ
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Formation (X)HTML et CSS
Créer son site web pour les débutants
Korantin Auguste
16 octobre 2013
Une page web, comment ça marche ?
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Une requête HTTP
1
le navigateur demande la page
Une page web, comment ça marche ?
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Une requête HTTP
1
le navigateur demande la page
2
si le serveur l’a, il lui envoie (sinon erreur)
Une page web, comment ça marche ?
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Une requête HTTP
1
le navigateur demande la page
2
si le serveur l’a, il lui envoie (sinon erreur)
3
le client analyse le fichier reçu, et demande les dépendances
Une page web, comment ça marche ?
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Une requête HTTP
1
le navigateur demande la page
2
si le serveur l’a, il lui envoie (sinon erreur)
3
le client analyse le fichier reçu, et demande les dépendances
4
goto 1
Une page web, comment ça marche ?
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Une requête HTTP
1
le navigateur demande la page
2
si le serveur l’a, il lui envoie (sinon erreur)
3
le client analyse le fichier reçu, et demande les dépendances
4
goto 1
Exemple en direct
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
HTML
HyperText Markup Language (structure des documents)
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
HTML
HyperText Markup Language (structure des documents)
normalisé par le W3C
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
HTML
HyperText Markup Language (structure des documents)
normalisé par le W3C
HTML 4.01 : décembre 1999
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
HTML
HyperText Markup Language (structure des documents)
normalisé par le W3C
HTML 4.01 : décembre 1999
XHTML 1.1 : mai 2001
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
HyperText Markup Language (structure des documents)
HTML
normalisé par le W3C
CSS
Envoyer son site
sur le web
HTML 4.01 : décembre 1999
XHTML 1.1 : mai 2001
HTML 5 : maintenant :)
CSS
Cascading Style Sheets
HTML et CSS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
HyperText Markup Language (structure des documents)
HTML
normalisé par le W3C
CSS
Envoyer son site
sur le web
HTML 4.01 : décembre 1999
XHTML 1.1 : mai 2001
HTML 5 : maintenant :)
CSS
Cascading Style Sheets
décrit l’aspect des pages web
Page minimale
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
index.html
<!DOCTYPE html>
<html>
<head>
<title>titre</title>
</head>
<body>
Ceci est une phrase avec un
<a href="cible.html">lien</a>.
<p>Ceci est un paragraphe sans lien.</p>
</body>
</html>
Structure
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
Titres
<h1>Pipo</h1>
<h6>Pouet</h6>
CSS
Paragraphes
Envoyer son site
sur le web
<p>Une ligne<br />Une autre ligne</p>
Listes
<ul>
<li>Pomme</li>
<li>Poire</li>
</ul>
<ol>
<li>Chou</li>
<li>Fleur</li>
</ol>
Structure
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Tableau
<table>
<tr>
<td>Ligne
<td>Ligne
</tr>
<tr>
<td>Ligne
<td>Ligne
</tr>
</table>
1, colonne 1</td>
1, colonne 2</td>
2, colonne 1</td>
2, colonne 2</td>
Mise en forme
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Gras, italique
<strong>Pipo</strong>
<em>Pouet</em>
Images
<img src="image.png" alt="Description" />
Généralités
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Syntaxe générale : élément { attribut : valeur ; }
Exemple
body {
font-family: sans-serif;
}
Intégration
Formation
(X)HTML et
CSS
Trois manières d’intégrer des CSS :
Korantin Auguste
Au plus près
Introduction
<span style="color: pink;">Du texte en rose</span>
HTML
CSS
Envoyer son site
sur le web
Dans l’en-tête de la page
<style type="text/css" media="all">
a, a:hover, a:visited, a:active, a:link {
color: #CC1111;
text-decoration: none;
}
</style>
Dans un fichier externe
<link rel="stylesheet" type="text/css"
media="screen" href="net7-screen.css" />
Attributs courants
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Mise en forme de texte
font-family: serif, sans-serif
font-size: 2em, 30%, 24pt
font-weight: bold
Mise en page
width:
height:
float: left, right
Classes et identifiants
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
Classes
Code HTML
HTML
<a class="joli moche">
CSS
Code CSS
Envoyer son site
sur le web
.joli { ... }
.moche { ... }
Priorité ?
Identifiants
Code HTML
<a id="beau">
Code CSS
#beau { ... }
Bien sélectionner un élément
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Méthodes
Classes très générales, utilisation multiple dans une page
Identifiants une utilisation par page
Sélecteurs CSS element :selecteur
:hover souris au-dessus de l’élément
:link le lien n’a pas été visité
:visited le lien a été visité
... :first-child, etc.
Structure (très bien si le HTML est très bien)
A B la règle qui suit s’applique à tout B
descendant de A
A > B B doit être un enfant de A
PHP
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
CMS
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Wordpress, Joomla...
FTP
Formation
(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son site
sur le web
Voir https://www.bde.ensat.fr/doc/ftp
ftp.clubs.bde.enseeiht.fr
ftp.perso.bde.enseeiht.fr
http://www.bde.ensat.fr/services/bdd/
