Vous êtes sur la page 1sur 40

DÉVELOPPEMENT

WEB : HTML & CSS


PRÉSENTATIONS
1. Qu’est ce que le web ?

2. Front-end / Back-end

3. Langages HTML & CSS

4. Exercice individuel

5. Les CMS & les outils en

Développement ligne

Web – HTML/ CSS 6. Et le marketing digital dans


tout ça ?

7. Le projet en groupe

Page
Développement Web

5 Séances de 3h

Séance 01 Séance 02 Séance 03 Séance 04 Séance 05


Les bases en HTML Les bases en CSS HTML & CSS Les CMS et les outils Le Marketing Digital
+ Exercice + Exercice Exercice individuel en ligne sur nos sites internet

Travail en groupe à rendre


Page
PA R T I E 1

QU’EST CE QUE
LE WEB ?
1 - Qu’est-ce que le web ?

Internet et le web :
Est-ce la même chose ?

Page
1 - Qu’est-ce que le web ?

Internet et le web :
Est-ce la même chose ?
INTERNET

Le web Les e-mails Le ftp

Permet de consulter Permet d’échanger des Permet d’échanger


des pages accessibles messages (courriers des fichiers entre
sur des sites. électroniques) ordinateurs
Page
1 - Qu’est-ce que le web ?

Internet et le web :
Les Usages d’Internet

- 4 Milliards d’internautes dans le monde.


- 88% des Français utilisent internet.

Page
100 Statistiques stupéfiants sur les sites internet en 2018 :
https://blog-fr.orson.io/web-marketing/100-statistiques-sites-internet-2018
1 - Qu’est-ce que le web ?

Comment
Fonctionne le
Web ?

Page
1 - Qu’est-ce que le web ?

Les Composants du Web

http DNS Le ftp

Hypertext Transfer Domain Name System : File Transfer Protocol :


Protocol : protocole traduit un nom de protocole de
de communication domaine en adresse IP communication
client-serveur. destiné au partage de
fichiers Page
1 - Qu’est-ce que le web ?

Les URLs

Nom du protocole de
communication entre
le client et le serveur

Nom de domaine du Endroit où se trouve la


site web page dans le site

Page
1 - Qu’est-ce que le web ?

Comment mettre en ligne son site


internet ?

Page
1 – Qu’est-ce que le web ?

Site Statique
Site Dynamique
Site Statique Site Dynamique

Page
PA R T I E 2

LE FRONT-END &
LE BACK-END
2 – Front-end & le back-end

De quoi sont
Composées nos
FRONT-END Pages Web ? BACK-END

Éléments du site que l’on Invisible par l’utilisateur


voit à l’écran

Page
2 – Front-end & le back-end

LES LANGAGES DU
WEB ?
FRONT-END BACK-END

Page
2 – Le front-end & le back-end

Les Bases de données

Page
2 – Le front-end & le back-end

Les Frameworks de programmation

Framework (cadre de travail) : Bibliothèque d’un ensemble de composants prêt à l’emploi permettant aux
développeur de ne pas partir de zéro.

Page
PA R T I E 3

LANGAGE HTML
3 – Langage HTML & CSS

L’inspecteur d’élément de Google


Chrome

Code HTML

Code CSS

Page
3 – Langage HTML & CSS

HTML et CSS : Introduction

HTML CSS
Le HTML est un langage composé de balises. Il permet Le CSS va décorer notre HTML. C’est lui qui est
de représenter la structure, le squelette d’une page responsable des couleurs, des tailles, de la mise en
web : un titre, un paragraphe, une image etc.. page etc..

Page
3 – Langage HTML & CSS

La Structure d’une Page HTML

Le doctype sert à préciser le type de document

La balise HTML va représenter notre page html

La balise HEAD va contenir des éléments relatives à la


page, comme le titre le page ou les fichiers liés à notre
site. Le contenu du HEAD n’est pas visible sur la page.

La balise BODY va lui contenir tout le contenu


« visible » de la page : textes, images, liens, vidéos..

Les commentaires : < ! – - mon commentaire -- > Page


3 – Langage HTML & CSS

HTML : Les Titres et Paragraphes

La balise <P> correspond au paragraphe.


Dans cette balise :
<b> pour mettre le texte en gras
<i> pour l’italique
<br /> pour sauter à la ligne

Pour un texte mis en forme <font> :


<font size="3" face="georgia" color="red">

Pour une citation <blockquote>

Les <H1> à <H6> sont les titres classés du plus


important au moins important

Page
3 – Langage HTML & CSS

HTML : Les Liens

On utilise la balise <a> pour insérer un


lien.

L’attribut ‘href’ pour indiquer vers quelle


page le lien doit conduire.

L’attribut ‘target’ pour ouvrir le lien dans


un nouvel onglet :
Target=‘’_blank’’

Page
3 – Langage HTML & CSS

HTML : Les Images

On utilise la balise <img > pour insérer


une image.

L’attribut ‘src’ pour l’image à afficher

L’attribut ‘alt’ pour le texte alternatif

Pour ajouter un lien sur l’image il faut


l’insérer dans un <a>, exemple :
<a href="index.htm"><img
src="accueil.jpeg"></a>

Page
3 – Langage HTML & CSS

HTML : Les Listes

On utilise la balise <ul> pour


commencer une liste non ordonnée et
la balise <ol> pour une liste ordonnée

Chacun des éléments de la liste sera


placé à l’intérieur d’un élément <li>.

Page
15:45 B RE AK TIME 16:00
Exercice Collectif

MOTHER FUCKING
WEBSITE
PA R T I E 3

LANGAGE CSS
3 – Langage HTML & CSS

CSS : 3 Différentes façons de l’écrire

1. L’ATTRIBUT STYLE

L’attribut « style »
contient des déclarations
CSS afin de mettre en
forme l’élément.

Page
3 – Langage HTML & CSS

CSS : 3 Différentes façons de l’écrire

2. LA BALISE <STYLE>

La balise <style> contient


aussi des déclarations
CSS. Il est mis dans le
<head> de notre page.

Page
3 – Langage HTML & CSS

CSS : 3 Différentes façons de l’écrire


3. LE FICHIER CSS

Le code CSS est écrit


dans un autre fichier avec
l’extension css.

Par exemple : styles.css

Enfin, il faut lier ce fichier


avec notre fichier html

Page
3 – Langage HTML & CSS

La syntaxe d’une Page CSS


Sélecteur : permet de désigner un
élément de la page auquel la
mise en forme sera appliquée,
exemple :
- balise : p, a, …
- class : .nomclasse
- id : #id

Propriété : caractéristique
stylistique qu’on veut appliquer
(taille, couleur, police, etc..)

Valeur : La valeur donnée à la


propriété (couleur rouge, largeur
100px, etc..) Page
3 – Langage HTML & CSS

CSS : Les sélecteurs


Les sélecteurs définissent les éléments
sur lesquelles s’applique un ensemble de HTML CSS
règles CSS. On trouve différents types
de sélecteurs :

Balise : Elle consiste à appliquer


un style précis à la balise HTML

Classe : Elle consiste à appliquer


un style précis au sein d’une
même balise HTML
Id : Elle consiste à appliquer un
style précis au sein d’une balise
HTML (utilisé une seule fois)
Page
3 – Langage HTML & CSS

CSS : Les sélecteurs

HTML CSS

Pseudo-classes : ajouté au
selecteur pour désigner l’état du
selecteur. Exemple : lien survolé
(:hover), lien déjà visité
(:visited),etc..

Pseudo-éléments : ajouté au
selecteur pour désigner certaines
parties de l’élément. Exemple :
Première ligne (::first-line),
première lettre (::first-letter),ect..
Page
3 – Langage HTML & CSS

CSS : Les sélecteurs

Les groupes : Un groupe est


composé de plusieurs balises
séparées par des virgules

Éléments imbriqués : Une série de


balises séparées par des espaces
désigne des éléments imbriqués
dans un autre

Page
3 – Langage HTML & CSS

CSS : Les propriétés et les valeurs

Les couleurs Nom : Code


RGB :
Code
hexadécimal :
(color) :

Les tailles
(size, font- Px : Em:

size) : Width = largeur / Height = hauteur

Block : Inline :
Mise en page
(display) :

Inline-block :

Page
3 – Langage HTML & CSS

HTML : Div & Span

Ces deux balises sont des conteneurs sont destinés à structurer le contenu.
Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le
contenu de la page.

<span> </span>: c'est une balise de


type inline, c'est-à-dire une balise que
l'on place au sein d'un paragraphe de
texte, pour sélectionner certains mots
uniquement.

<div> </div>: est un conteneur


générique qui permet d'organiser le
contenu sans représenter rien de
particulier. Il peut être utilisé afin de
grouper d'autres éléments pour leur Page
appliquer un style
3 – Langage HTML & CSS

CSS : Le modèle de la boite

Padding : Le remplissage est la


marge intérieure d'une boîte CSS.

Border : Taille de la bordure

Margin : Marge extérieure, elle


entoure la boîte CSS et se colle
contre les autres boîtes

Page
15:45 B RE AK TIME 16:00

Vous aimerez peut-être aussi