Formation (X)HTML et CSS - CrÃ©er son site web pour les dÃ ... · Formation (X)HTMLet CSS...

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


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



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



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



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


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


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 :)


Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


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 :)


Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


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 :)


Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


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


HTML et CSS

HTMLHyperText Markup Language (structure des documents)normalisé par le W3CHTML 4.01 : décembre 1999XHTML 1.1 : mai 2001HTML 5 : maintenant :)


Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


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


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


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


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


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


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


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


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


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


PHP

Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


CMS

Wordpress, Joomla...

Formation(X)HTML et

CSS

Korantin Auguste

Introduction

HTML

CSS


FTP

Voir https://www.bde.ensat.fr/doc/ftpftp.clubs.bde.enseeiht.frftp.perso.bde.enseeiht.frhttp://www.bde.ensat.fr/services/bdd/

https://www.bde.ensat.fr/doc/ftp

http://www.bde.ensat.fr/services/bdd/

Formation (X)HTML et CSS - CrÃ©er son site web pour les dÃ ... · Formation (X)HTMLet CSS...

Documents

Transcript of Formation (X)HTML et CSS - CrÃ©er son site web pour les dÃ ... · Formation (X)HTMLet CSS...