Ex ea commode maximus
Lorem ipsum dolor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam sulaco narcissus fiorina
- enim ut aliquip
- auriga enim ut aliquip
- giger enim ut aliquip
Cours de HTML CSS
Intro
Aux origines du web
Le World Wide Web...
Le web est une application qui fonctionne sur le réseau Internet.
Il a été inventé par Tim Berners Lee en 1990 au CERN à coté de Genève.
A l'origine...
Le Web est projet informatique dont le but était de permettre aux chercheurs du CERN de partager leur document en utilisant un nouveau concept de navigation : l'hypertexte
Le premier navigateur expérimental s'appelle World Wide Web
- Début du projet en 89
- En 90, Robert Cailliau, ingénieur belge, se joint au projet
- Première page en ligne en novembre 90
- Première image en ligne en 92
- Premier navigateur web : MOSAIC en 93
- Fondation WWW Consortium en 94
Quelques dates clé de l'histoire du web
- 1994 : apparition du navigateur Netscape, création de Yahoo
- 1995 :
- Microsoft lance MSN pour concurrencer Internet et le web
- Apparition du serveur Apache et du navigateur Internet Explorer
- 1996 : le site Internet Archive commence à archiver le web
- 1998 :
- apparition du navigateur Mozilla
- apparition du site Google
- 2001 : apparition du site Wikipedia
- 2003 : apparition du navigateur Safari
- 2004 : apparition du site Facebook
- 2005 : apparition du navigateur Firefox
- 2005 : apparition du navigateur Chrome
Le web en stats...
Le webdesign de 97 à 2019
Les navigateurs
Une page web se consulte grâce à un navigateur, aussi appelé navigateur internet ou browser.
Une page web, distante ou locale, peut y être ouverte et lue directement.
Les 4 grands navigateurs
- Firefox - développé par la Mozilla Fundation
- Chrome - développé par Google
- Internet Explorer - développé par Microsoft
- Safari - développé par Apple
A noter qu'il existe Opéra, développé par une société norvégienne
Différences entre les navigateurs
- la vitesse de lancement du navigateur
- les ressources au niveau du processeur
- la vitesse de rendu
- la qualité du rendu
Parts de marché des navigateurs
Statistiques d'utilisation des navigateurs en septembre 2018
Source : Wikipedia
Introduction au HTML
Créer une page web
La page web
Une page web est un fichier html. Son contenu est généralement appelé : document web
Proprités d'une page web
Elle possède :
- un contenu propre : les textes, les images...
- le HTML qui structure l'ensemble du document
- une extension de fichier : .html (quelque soit le système d'exploitation)
Créer une page web
Il existe différentes manières de créer une page web
- en la programmant manuellement
- grâce à logiciel d'édition web à interface graphique
- Dreamweaver
- Frontpage
- Via l'interface en ligne d'un CMS
- Wordpress
- Drupal
Les outils du programmeur HTML
Pour créer une page web à la main (sans interface graphique), on a besoin :
- d'un navigateur web
- d'un éditeur de code
Quelques éditeurs...
Il existe énormément d'éditeurs de texte gratuits. Leur intérêt principal réside dans la coloration syntaxique.
- Notepad++ (pour Windows)
- Bracket
- Visual Studio Code
- Sublime Text
- Atom
Pour les navigateurs...
- Firefox
- Chrome
Ma première page web
On commence par créer le fichier html
- ouvrir l'éditeur de code
- créer un nouveau fichier
- saisir un texte
- enregistrer le fichier sous forme de fichier HTML
- ouvrir le fichier dans un navigateur en double cliquant dessus
Déclarer un document web
Le doctype
Depuis l'avènement du HTML 5, un document web se déclare grâce avec le doctype.
<!DOCTYPE html>
Le Doctype garantit que le navigateur fait de son mieux pour suivre les spécifications actuelles du langage HTML, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications.
La balise HTML
L'intérieur d'un document web est englobé dans une balise <html>
Anatomie d'une balise HTML
Les balises
Hiérarchie des balises
Les balises d'un document HTML sont soumises à une hiérarchie.
Dans le jargon HTML, on parlera de :
- parent, ou balise parent
- enfant, ou balise enfant
- balise frère ou soeur, plus souvent de siblings, ou de balises de même niveau hiérarchique
Une capture d'écran de l'éditeur Notepad++
On représente visuellement la hiérarchie des balises grâce à l'indentation
Le corps et l'entête
Le document web se scinde en suite en deux grandes parties
En bref...
- L'entête contient des informations sur la page web qui ne sont pas visibles par l'internaute
- Le corps contient le contenu du document web, sa charge utile, visible et consultable
La balise image
Les images
La balise image ne possède pas de contenu, seulement un attribut src.
L'attribut src
L'attribut src attend comme valeur une URL correspondant à l'adresse d'un fichier image
Comme pour le lien A, l'URL peut être relative, semi relative ou absolue.
<img src="images/panda.jpg"/>
<img src="raton.gif"/>
L'attribut ALT
L'attribut alt est un attribut obligatoire des balises image. Il contient la description détaillée de l'image.
- Décrire l'image aux lecteurs vocaux
- Améliorer la sémantique du site
- Fournir un texte alternatif en cas de problème de téléchargement
<img src="images/raton.gif" alt="Un raton laveur qui se gratte la tête"/>
Le format JPEG
JPEG signifie Joint Photographic Experts Group. C'est un format mis au point dans les années 80 pour améliorer le fonctionnement du fax.
La compression avec perte
Avec le format JPEG, la diminution du poids est toujours associée à une perte de données : la compression fonctionne par interpolation de couleurs. L'image résultante est une "approximation" de l'image d'origine.
Caractéristiques du format JPEG
- Très gros ratio de compression
- Images en 16 millions de couleurs
- Pas d'animation, ni de transparence
<img src="raton-100.jpg"/>
Poids de l'image : 142 ko
<img src="raton-0.jpg"/>
Poids de l'image : 31 ko
Essais de compression avec GIF
Avec une photographie
<img src="landscape.jpg"/>
Compression JPEG. Poids de l'image : 136 ko
<img src="landscape.gif"/>
Compression GIF. Poids de l'image : 94 ko
On constate des problèmes de dégradé !
Avec un logo
<img src="logo.jpg"/>
Poids de l'image : 26 ko
<img src="logo.gif"/>
Poids de l'image : 10 ko
Le format PNG
PNG signifie Portable Network Graphics . C'est un format mis au point dans le milieu des années 90 pour prendre le relais du GIF et offrir un solution de remplacement libre.
Pas de perte de données avec PNG
Comme pour GIF, le système de compression est basé sur un dictionnaire d'occurences qui références les couleurs présentes en plus grand nombre. PNG présente cependant des différences notables avec GIF.
Caractéristiques du format PNG
- Images en 16 millions de couleurs, à partir du format PNG32
- Autorise les pixels transparents
- Possède une couche alpha qui définit des niveaux de transparence de 0 à 100
- Pas d'animation possible
<img src="cube.png"/>
Poids de l'image : 42 ko
<img src="cube.gif"/>
Poids de l'image : 12 ko
Le format SVG
SVG signifie Scalable Vector Graphics . C'est un format dérivé du XML mis au point au début des années 2000 par le W3C.
Le format vectoriel
Le SVG n'est pas un algorithme de compression. Il se base sur des formes vectorielles définies à l'intérieur de balises XML.
Caractéristiques du format SVG
- Images redimensionnables à l'infini
- Autorise la transparence
- Animations possibles
- Modifications possibles avec CSS
- Intéractivité avec JavaScript
Quand utiliser SVG ?
- Logos
- Icônes
- Formes basiques ou géométriques possédant des aplats de couleurs ou des dégradés
- Cartes intéractives
- Texte inclus dans une image
- Flat design
Des exemples
Des formes géométriques basiques
<img src="forme.svg"/>
Le SVG est très utilisé pour les cartes
<img src="carte.svg"/>
Les types de balises
Les balises de type block
On différencie deux types de balises : les balises inline et les balises block
Leur comportement par défaut est l'empilement
Exemples :
- <div>
- <h1> - <h6>
- <p>
- <ul>
- <li>
- <section>
- <article>
- <form>
- <table>
Il faut bien connaitre la catégorie d'une balise pour comprendre sa mise en page en CSS
Les balises de type inline
Leur comportement par défaut est de se positionner à la suite de l'élément précédent (balise, texte, image...)
Exemples :
- <a>
- <strong>
- <em>
- <img>
- <span>
- <button>
- <select>
Les containers
Les balises container sont des types de balises dont le but est d'englober d'autres balises.
Pourquoi utiliser des containers
- la sémantique du document
- la structure du document
- la mise en page réalisée grâce aux styles CSS
Principales balises containers
- <div>
- <article>
- <section>
- <sidebar>
- <main>
- <header>
- <footer>
Exemple
<article> <h1>Le titre de ma page</h1> <p>Lorem ipsum deloreane sit amet, consectetur adipiscing nostromo commodo consequat sulaco.</p> </article>
Introduction aux CSS
Les outils de l'intégrateur CSS
La console !
Les générateurs en ligne...
- ColorZilla pour les dégradés
- FontSquirrel pour les typos
- Flexbox.help pour le positionnement flex : flexbox.help
Les sélecteurs
Les sélecteurs
Le but du sélecteur
Il doit cibler une balise ou un ensemble de balise pour leur appliquer une une série de règles
L'ensemble des règles définit le style global d'une balise et son comportement vis à vis des autres balises du document
Les différents types de sélecteur
Il existe trois sélecteurs principaux
- le sélecteur de balise
- le sélecteur d'ID
- le sélecteur de classe
Il existe des sélecteurs plus confidentiels :
- le sélecteur d'attribut
- le sélecteur de pseudo classe
- le sélecteur global
La typographie
Les propriétés de fonte
Il existe plusieurs propriétés pour définir la typographie
- font-size pour définir la taille de la fonte
- font-family pour définir le nom de la fonte
- font-weight pour définir la graisse de la fonte
- font-style pour définir le type d'italique
Au sujet de font-size
Il existe différents types d'unités :
- le pixel
px, la plus populaire et la plus utilisée - le rem
rem, une unité relative à la taille de typo définie pour la balise html - le em
em, une unité relative à la taille de typo définie pour la balise parent - le point
pt - le viewport
vw
Au sujet de font-weight
Il existe différents types de valeurs :
- la valeur numérique
Exemple : 400, 700, 900 - la valeur littéraire
Exemple : normal ou bold...
Bien choisir sa typo !
La propriété font-family permet de spécifier une famille de typo à une balise ou à un ensemble de balises
article > button {
padding: 20px;
font-family: Montserrat, sans-serif;
}
header {
padding: 20px;
font-family: 'Times New Roman', serif;
}
Si la typo est composée de plusieurs mots, on l'encadre avec des quotes.
Fontes et compatibilité
Il faut s'assurer que la fonte spécifiée sera disponible sur tous les systèmes d'exploitation
Des exemples de fontes serif compatibles
- Georgia
- Times New Roman
Des exemples de fontes sans serif compatibles
- Arial
- Verdana
- Tahoma
- Impact
Il faut toujours préciser le type d'empatement en dernier recours !
Typos libres et typos propriétaires
Lorsque l'on choisit d'exploiter une typo sur un site, on doit faire attention aux éventuels copyright.
Les droits sur les typos
- Les typos libres
- Les typos gratuites pour un usage personnel
- Les typos payantes
L'utilisation des typos payantes peut être soumise à une limitation en terme de nombre de visiteurs !
Ressources en ligne
Un article sur le choix des typos
Alsacréations : Quelles polices de caractères (fontes) utiliser sur le Web ?
Déclarer une fonte
Par défaut, le navigateur cherche la fonte spécifiée sur le disque dur de l'utilisateur.
Utiliser une fonte exotique
Pour forcer le navigateur à utiliser une typo qui ne se trouve pas sur l'ordinateur de l'internaute, on utilise la règle @font-face
Générer des règles font-face
Il faut disposer d'une typo :
- .ttf
- .otf
- .woff
Les autres proporiétés de mise en page du texte
Les autres propriétés avec des exemples de valeurs :
color: #ff7700;letter-spacing: 1px;line-height: 1.5;text-transform: uppercase;text-decoration: underline;text-shadow: 3px 3px 5px blue;
Les valeurs de color
En langage CSS, la couleur peut être codée de 4 manières différentes
- l'héxadécimal
- le rgb
- le rgba
- littéralement
Les dimensions
Appliquer des marges
Les marges permettent de créer des espaces entre les différents blocs HTML
On peut modifier indépendament :
margin-top: la marge hautemargin-bottom: la marge bassemargin-left: la marge gauchemargin-right: la marge droite
Les balises inline
Elles n'acceptent que les propriétés de marge gauche et droite !
Le HTML
<article>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</article>
Le CSS
article {
width: 800px;
height: 500px;
margin-top: 40px;
margin-bottom: 60px;
}
L'héritage
Les arrière-plans
Le modèle des boîtes
Le modèle classique
Comment un navigateur calcule t-il les dimensions d'un bloc HTML ?
La surface totale du bloc est calculée par le navigateur en additionnant
widthpaddingborder
Modifier la méthode de calcul
La propriété box-sizing
Le mode de calcul des dimensions d'un bloc peut être modifié avec la proporiété CSS3 box-sizing
Elle possède 2 valeurs
content-boxla valeur par défautborder-boxqui inclut border et padding dans le calcul de dimensions
Le positionnement
La position absolue
Elle permet de placer un élément en le sortant du flux, c'est à dire que son emplacement ne tient plus compte des balises qui le précèdent ou le suivent dans le code.
position: absolute;
Abscisse et ordonnée
Comme pour la position relative, la position absolue s'accompagne des propriétés top et left qui sont des coordonnées de repérage.
Origine du repère
- Par défaut, la balise <body>
- Le bloc parent positionné le plus proche hiérarchiquement
En CSS, un bloc est considéré comme positionné s'il possède une position relative ou absolue.
Un bloc n'est donc pas "positionné" par défaut !
La position flottante
Elle détache une balise du flux pour la positionner à droite ou à gauche de son container tout en étant contournée par les autres balises (block ou inline).
float: left; float: right;
La propriété flottante est très largement utilisée sur les images
Exemple
Vel eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur el eum iure reprehenderit qui in ea eum fugiat quo voluptas nulla pariatur.
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
Le CSS
img {
float: left;
}
Le HTML
<p>Vel eum iure reprehenderit .... quo voluptas nulla pariatur.
<img src="images/big-lebowski.jpg"/>
Quis autem vel eum iure reprehenderit .... vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur</p>