Post on 26-Oct-2019
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Formation (X)HTML et CSSCréer son site web pour les débutants
Korantin Auguste
16 octobre 2013
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Une page web, comment ça marche ?
Une requête HTTP1 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épendances4 goto 1
Exemple en direct
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Une page web, comment ça marche ?
Une requête HTTP1 le navigateur demande la page2 si le serveur l’a, il lui envoie (sinon erreur)
3 le client analyse le fichier reçu, et demande les dépendances4 goto 1
Exemple en direct
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Une page web, comment ça marche ?
Une requête HTTP1 le navigateur demande la page2 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
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Une page web, comment ça marche ?
Une requête HTTP1 le navigateur demande la page2 si le serveur l’a, il lui envoie (sinon erreur)3 le client analyse le fichier reçu, et demande les dépendances4 goto 1
Exemple en direct
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Une page web, comment ça marche ?
Une requête HTTP1 le navigateur demande la page2 si le serveur l’a, il lui envoie (sinon erreur)3 le client analyse le fichier reçu, et demande les dépendances4 goto 1
Exemple en direct
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)
normalisé par le W3CHTML 4.01 : décembre 1999XHTML 1.1 : mai 2001HTML 5 : maintenant :)
CSSCascading Style Sheetsdécrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)normalisé par le W3C
HTML 4.01 : décembre 1999XHTML 1.1 : mai 2001HTML 5 : maintenant :)
CSSCascading Style Sheetsdécrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)normalisé par le W3CHTML 4.01 : décembre 1999
XHTML 1.1 : mai 2001HTML 5 : maintenant :)
CSSCascading Style Sheetsdécrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)normalisé par le W3CHTML 4.01 : décembre 1999XHTML 1.1 : mai 2001
HTML 5 : maintenant :)
CSSCascading Style Sheetsdécrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)normalisé par le W3CHTML 4.01 : décembre 1999XHTML 1.1 : mai 2001HTML 5 : maintenant :)
CSSCascading Style Sheets
décrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
HTML et CSS
HTMLHyperText Markup Language (structure des documents)normalisé par le W3CHTML 4.01 : décembre 1999XHTML 1.1 : mai 2001HTML 5 : maintenant :)
CSSCascading Style Sheetsdécrit l’aspect des pages web
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Page minimale
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>
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Structure
Titres<h1>Pipo</h1><h6>Pouet</h6>
Paragraphes<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>
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Structure
Tableau<table>
<tr><td>Ligne 1, colonne 1</td><td>Ligne 1, colonne 2</td>
</tr><tr>
<td>Ligne 2, colonne 1</td><td>Ligne 2, colonne 2</td>
</tr></table>
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Mise en forme
Gras, italique<strong>Pipo</strong><em>Pouet</em>
Images<img src="image.png" alt="Description" />
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Généralités
Syntaxe générale : élément { attribut : valeur ; }
Exemplebody {
font-family: sans-serif;}
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Intégration
Trois manières d’intégrer des CSS :
Au plus près<span style="color: pink;">Du texte en rose</span>
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" />
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Attributs courants
Mise en forme de textefont-family: serif, sans-seriffont-size: 2em, 30%, 24ptfont-weight: bold
Mise en pagewidth:height:float: left, right
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Classes et identifiants
ClassesCode HTML<a class="joli moche">Code CSS.joli { ... }.moche { ... }Priorité ?
IdentifiantsCode HTML<a id="beau">Code CSS#beau { ... }
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
Bien sélectionner un élément
MéthodesClasses très générales, utilisation multiple dans une page
Identifiants une utilisation par pageSé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 AA > B B doit être un enfant de A
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
PHP
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
CMS
Wordpress, Joomla...
Formation(X)HTML et
CSS
Korantin Auguste
Introduction
HTML
CSS
Envoyer son sitesur le web
FTP
Voir https://www.bde.ensat.fr/doc/ftpftp.clubs.bde.enseeiht.frftp.perso.bde.enseeiht.frhttp://www.bde.ensat.fr/services/bdd/