Formation web 1 : HTML/CSS

Dimension: px

Commencer à balayer dès la page:

Download "Formation web 1 : HTML/CSS"

Eveline Turgeon
il y a 6 ans
Total affichages :

1 Formation web 1 : HTML/CSS Guillaume LEROY 1 1 DaTA Secrétaire Général 27 septembre 2016 Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

2 Sommaire 1 Internet 2 HTML/CSS 3 HTML : Les Balises 4 CSS : Le style 5 Bootstrap Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

Internet Internet Internet est un regroupement de réseaux sur lesquels les ordinateurs communiquent par le biais de protocoles tel que SSH, FTP, SMTP,

3 Internet Internet Internet est un regroupement de réseaux sur lesquels les ordinateurs communiquent par le biais de protocoles tel que SSH, FTP, SMTP, HTTP... Site web et protocole HTTP Le serveur fournit les fichiers HTML et CSS aux clients. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

4 HTML/CSS (forme et style) HTML Langage de balisage Défini la strucure d une page web (squelette) Dernière version : HTML5 CSS Mise en forme de la page HTML Système de selecteur Dernière version : CSS3 Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

5 Exemple Exemple sur le site admissibles. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

6 Les balises Code HTML minimal <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> Hello World!! </body> </html> Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

7 Les balises Balise simple <link rel="stylesheet" href="style.css"> <hr> <br> Balise double <html>... </html> <head>... </head> <p>... </p> Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

8 Les balises La balise head Contient les métadatas de la page html : titre, auteur, lien vers page CSS, lien vers JS... La balise body Cette balise contient le contenu de la page. Les balises de structure de la page <header></header> <nav></nav> <article></article> <section></section> <aside></aside> <footer></footer> Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

9 Structure de la page Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

10 Principales balise HTML <div>...</div> : Structure la page. <p>...</p> : Délimite un paragraphe. <a href=" site du club info</a> : Crée un lien vers une autre page. <img src="images/pony.png" alt="un poney"> : Ajoute une image. <h1>...</h1>, <h2>...</h2>,..., <h6>...</h6> : Titre de différents niveaux. <ul>...</ul> : Délimite une liste d éléments. <li>...</li> : Un élément de la liste. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

11 Le CSS styles.css Dans un fichier à part : css/styles.css. Il faut lier le fichier CSS à la page HTML : <link rel="stylesheet" href="styles.css"> Principe Appliquer des règles de style a des éléments particuliers de la page. Example h1 { font-size:30px; color: red; } Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

12 Les selecteurs Par élément Pour appliquer le style à tous les éléments du même type. Exemple. p {... } section {... } Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

13 Les selecteurs Par class <div class="news">formation HTML</div> Pour appliquer un style à cette balise et toutes celles qui disposent de la classe news..news { background-color: #f8c421; } Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

14 Les selecteurs Par id <p id="intro">...</p> Pour appliquer un style à cette balise : #id { text-align: justify; } Un id doit être unique dans une page contrairement à un div. Bien d autres selecteurs sont décrits sur w3school : Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

$Les espacements : margin, padding Différentes façon de déclarer section { margin: 0.5em; \\appliqué à toutes les marges extérieures.$

15 Les espacements : margin, padding Différentes façon de déclarer section { margin: 0.5em; \\appliqué à toutes les marges extérieures. } section { \\applique les marges intérieures en haut et en bas. padding-top: 0.3em; padding-bottom: 0.3em; } Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

16 Les espacements : margin, padding Différentes façon de déclarer section{ border: 1px 3px 1px 3px; \\top right bottom left } Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

17 Difficultés en CSS Difficultés Gestion de design responsive. Placement des éléments dans la page incertain. Solution Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

18 Installation de Bootstrap Via CDN Ajouter dans la balise <head>... </head>.  <link rel="stylesheet" href=" /3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4 Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> Via le téléchargement de bootstrap Télécharger le dossier et lier le fichier CSS comme vu précédemment. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

19 La grille Bootstrap Placement des éléments dans une grille de 12 colonnes. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

20 La grille Bootstrap <div class="row"> <div class="col-md-4"> Première colonne <\div> <div class="col-md-4"> Deuxième colonne <\div> <div class="col-md-4"> Troisiène colonne <\div> <\div> Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

21 La grille Bootstrap <div class="row"> <div class="col-md-4"> Première colonne <\div> <div class="col-md-8"> Deuxième colonne <\div> <\div> Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

22 Bootstrap Plein d autres choses : Élément flatdesign Boutons Barre de navigation Carousselle... Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

Ionic Développer une application mobile avec HTML/CSS et

23 A suivre Django Générer des pages HTML personnalisées. AngularJS Dynamiser et rendre interactif nos pages webs. Ionic Développer une application mobile avec HTML/CSS et AngularJS. Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre / 23

Documents pareils

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations