HOMEDEVE

Développement de Logiciels professionnels

Formation
Développeur web
PHP

Créer un site web avec

HTML et CSS
HOMEDEVE
Développement de Logiciels professionnels
Formation
Développeur web
PHP
Votre Formateur

Camel Djoulako
Software Engineer Web, Mobile, Desktop
cameldjoulako@homedeve.com

@cameldjoulako
 HOMEDEVE
Développement de Logiciels professionnels
Formation
Développeur web
PHP

Introduction au
développement web
HOMEDEVE
Développement de Logiciels professionnels
Formation
Développeur web
PHP
Sommaire

1 Introduction au web

2 Le langage HTML

3 Design et langage CSS

 Présentation
d’Internet

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Présentation d’Internet
• Internet est un système
de réseau informatique mondial public.

• Utilise la pile de Protocol Internet (TCP/IP)

• Accès public à de nombreuses

ressources et services

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Présentation d’Internet

World Wide Web

• Abrégé en WWW
• Communément appelé le Web
• Documents hypertextes reliés entre eux accessibles via Internet
˃ Peut contenir
‐ Texte
‐ Images
‐ Vidéos
‐ Etc…

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
Client - Serveur

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Client-serveur

Le protocole HTTP
• HyperText Transfer Protocol

• Protocole de communication développé pour le Web

• Protocole de requête/réponse
‐ Client (navigateur)
‐ Serveur (serveur Web)

• Transfert de données entre un navigateur et un serveur Web

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Client-serveur

Le protocole HTTP

1 Le client transmet des requêtes HTTP au

serveur Web pour atteindre une ressource.

2
Le serveur Web répond à la demande de
chaque client par une page HTML ou autre
ressource. 1

2
HOMEDEVE Formation Développeur web PHP
Développement de Logiciels professionnels
 Client-serveur

Le serveur web
• Reçoit des requêtes HTTP et renvoie des pages HTML ou autres
(comme des images, des sons, …)

• Trois serveurs dominent le marché :

‐ Apache HTTP Server
‐ NginX
‐ Microsoft IIS

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Client-serveur

Les navigateurs
• Deux principaux:
‐ Mozilla Firefox
‐ Google Chrome

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Le langage
HTML
HOMEDEVE Formation Développeur web PHP
Développement de Logiciels professionnels
 HTML : le langage Web
• HyperText Markup Language

• Utilisé pour formater un document

• Langage descriptif

• Concept hypertexte
˃ Facile à utiliser
˃ Format léger

• Version actuelle : HTML5

HOMEDEVE Formation Développeur web PHP
Développement de Logiciels professionnels
 Introduction au HTML
• HTML est un langage de balisage pour structurer et présenter du
contenu pour le World Wide Web

• Presque tous les sites Web que vous visitez utilisent HTML

• Certaines applications mobiles et de bureau utilisent HTML

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Bon c'est super mais...
Comment écrire du HTML ?

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Présentation du langage HTML
• Un fichier HTML a l'extension .html

• Un fichier HTML est construit par un ensemble

balise prédéfinie
‐ Nous apprendrons les balises étape par étape

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Présentation du langage HTML
• Balises entourées de < et >
‐ <nom_étiquette>

• 2 types de balises :
‐ Paire : <p>…</p>
‐ auto-fermantes : <br />

• Les noms des balises sont toujours en

minuscules

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Balise HTML de type Block
• Disposition des données

• Affiché sur l'axe vertical

• Utilisé pour structurer la page avec différents "blocs"

• Exemples : <p>, <h1>, <h2>, etc…

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Balise HTML de type Inline
• Le formatage des données

• Affiché sur l’axe horizontal

• Doit être entouré de balises Block

• Exemples : <span>, <em>, <strong>, etc…

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Les Outils
• De nombreux outils sont disponibles Pour écrire du HTML :
‐ Editeurs de code source :
• Visual Studio Code
• SublimeText
• Atom
‐ IDE :
• Adobe Dreamweaver
• Webstorm

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Les Balises HTML
On passe à la pratique

HOMEDEVE Formation Développeur web PHP

Développement de Logiciels professionnels
 Exemple de page HTML 1/2
Page Title

Main Title
Links to anchors
Image

Ordered list
Paragraph
Exemple de page HTML 2/2

Unordered lists

Secondary Title

Table

Hyperlink
HOMEDEVE Formation

FI
Développement de Logiciels professionnels

Développeur web
PHP