Formation HTML5/CSS3

GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWAREAtelier Web

Présenté par Oueslati Karim

Formation Html / Css

Atelier Web


1. Introduction2. Exemples3. Les balises

HTML4. Les règles

CSS5. Aller plus loin

Préparé par Ahmed MAALEJ

Introduction

Hypertext Markup LanguageDescription des composants de la page

Cascading Style SheetsMise en forme des composants



HTML4. Les règles



Exemples de projets en HTML/CSS:League of legends Popcorn Time



HTML4. Les règles



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.



HTML4. Les règles



Les balises HTML :



HTML4. Les règles



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



HTML4. Les règles



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>



HTML4. Les règles



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>



HTML4. Les règles



Syntaxe : Element {

règle : valeur ;}

.Class {règle : valeur ;

}

#Id {règle : valeur ;

}



HTML4. Les règles



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



HTML4. Les règles

CSS5. Aller plus

loin


Aller plus loin:

• Les Media Queries• Les Keyframes• Les SVG• Les préprocesseurs (Compass/Less)



Merci pour votre attention !

Formation HTML5/CSS3

Technology

Transcript of Formation HTML5/CSS3