Formation HTML5/CSS3

GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE
Atelier Web
Présenté par Oueslati Karim
Formation Html / Css
Atelier Web

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Préparé par Ahmed MAALEJ
Introduction
Hypertext Markup Language
Description des composants de la page
Cascading Style Sheets
Mise en forme des composants

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Exemples de projets en HTML/CSS:
League of legends Popcorn Time

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Les balises HTML :
Les balises Block:
• <h1> ... <h6>: encadre un titre ou un sous-titre.
• <p> : paragraphe.
• <ul>, <ol>, <dl>: listes (non ordonnée, ordonnée ou avec définition).
• <li>, <dt>, <dd>: élément de liste, définition, et titre de définition.
• <table>: tableau.
• <form>: formulaire de saisie.
• <section>: section générique regroupant un même sujet.
• <article>: section de contenu indépendante.
• <aside>: section dont le contenu est un complément par rapport à ce qui l'entoure
• <nav>: section possédant des liens de navigation principaux.
• <header>: section d'introduction d'un article ou du document entier.
• <footer>: section de conclusion d'un article ou du document entier.
• <div>: balise universelle
Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont
positionnés (par défaut) l'un sous l'autre.

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Les balises HTML :

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Les balises HTML :
Les balises Inline:
• <a>: lien externe ou interne à la page.
• <strong>: texte en gras.
• <em>: texte en italique.
• <img>: image, permet de placer une image au milieu du flux de texte.
• <input>: champs de saisie dans un formulaire.
• <span>: balise universelle
N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de
retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont
positionnés l'un à côté l'autre (si la largeur de page le permet).

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Les balises HTML :
Emboîtement autorisé :
<p>
Phrase avec un <strong> mot </strong> important
</p>
Emboîtement INTERDIT :
<strong>
<p>Première phrase</p>
<p>Deuxième phrase</p>
</strong>

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Page HTML de base :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Titre</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
// Contenu de la page
</body>
<script type="text/javascript" src="script.js"></script>
</html>

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Syntaxe :
Element {
règle : valeur ;
}
.Class {
règle : valeur ;
}
#Id {
règle : valeur ;
}

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Règles Usuelles:
Texte
• font-family : police de caractère
• font-size : taille de la police
• font-weight : graisse
• line-height : interlignage
• letter-spacing : Approche
• text-align : alignement
• text-decoration : soulignement
Couleurs
• color : couleur du texte
• background-color : Couleur de fond
Dimensions
• width : largeur
• height : hauteur
Positionnement
• position : fixe/ absolute/ relative
Marges et bordures
• margin : marge extérieure
• padding : marge intérieure
• border : bordure
Divers
• z-index : Indice de plan
• overflow : débordement
• display : block/ inline/ inline-block

Atelier Web
1. Introduction
2. Exemples
3. Les balises
HTML
4. Les règles CSS
5. Aller plus loin
Aller plus loin:
• Les Media Queries
• Les Keyframes
• Les SVG
• Les préprocesseurs (Compass/Less)

Atelier Web
Merci pour votre attention !

Formation HTML5/CSS3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Formation HTML5/CSS3

Similar to Formation HTML5/CSS3 (20)

Formation HTML5/CSS3