Formation HTML5/CSS3

404 vues

Publié le

Exposé de la formation en HTML5 et CSS3
[Atelier Web]

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
404
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation HTML5/CSS3

  1. 1. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web Présenté par Oueslati Karim Formation Html / Css Atelier Web
  2. 2. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE 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
  3. 3. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ Exemples de projets en HTML/CSS: League of legends Popcorn Time
  4. 4. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ 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.
  5. 5. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ Les balises HTML :
  6. 6. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ 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).
  7. 7. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ 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>
  8. 8. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ 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>
  9. 9. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ Syntaxe : Element { règle : valeur ; } .Class { règle : valeur ; } #Id { règle : valeur ; }
  10. 10. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ 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
  11. 11. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web 1. Introduction 2. Exemples 3. Les balises HTML 4. Les règles CSS 5. Aller plus loin Préparé par Ahmed MAALEJ Aller plus loin: • Les Media Queries • Les Keyframes • Les SVG • Les préprocesseurs (Compass/Less)
  12. 12. GENERAL AND GEOGRAPHIC FREE OPEN SOURCE SOFTWARE Atelier Web Préparé par Ahmed MAALEJ Merci pour votre attention !

×