Programmation web

PROGRAMMATION WEB
UNE COURTE INTRODUCTION AUX LANGAGES DE PROGRAMMATION
HTML ET CSS

HTML : HYPERTEXT MARKUP LANGUAGE
• Le HTML, c’est la base de toutes les pages web, de Wikipédia à
Facebook.
• Ce langage permet essentiellement de:
• Faire des liens entre différentes page web;
• Structurer le contenu d’une page web;
• Ajouter des images, des vidéos, des formulaires à une page web;
• Mettre en forme une page web (en conjonction avec le langage CSS).
• Pour créer un fichier HTML, il ne faut qu’un éditeur de texte!

ÉTAPE 1: CRÉATION D’UN DOSSIER ET SON
FICHIER
1. Créez un dossier « Mon premier site web ».
2. À l’Intérieur de celui-ci, sauvegardez un document format
texte (word/bloc note/textEdit) sous le nom de
« index.html ».
3. Commencez à programmer!

LA STRUCTURE DE BASE D’UNE PAGE HTML
• Tous le
contenu d’une
page web est
affiché à
l’intérieur de
balises HTML
qui
représentent la
structure de la
page.
Source: https://developer.mozilla.org/fr/

LES BALISES (TAGS) OU ÉLÉMENTS DE BASE :
<!DOCTYPE html> La définition du type de document (la grammaire utilisée)
<html> Indique le début du document HTML.
<head> La « tête » contient toutes les métadonnées du document.
On y retrouve par exemple le titre de la page et des informations
sur la mise en forme (le style).
</head>
<body> Le « corps » contient tout ce qui est affiché sur la page.
Voici l’endroit où ajouter du texte, des images, des liens, etc.
</body>
</html> Toutes les balises qui renferment du contenu doivent aussi
être accompagnées d’une balise « fermante »
(closing tag).

QUOI METTRE DANS LA SECTION « HEAD » ?
Dans la section « head », on y met de
l’Information concernant votre page
web:
• Le titre de la page:
<title>Ma page web</title>
• On peut aussi y ajouter des
informations liées au design de la
page: type de polices, couleur du
texte, couleur du fond, … On se
penchera sur le style en fin de
présentation!
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
</head>

QUOI METTRE DANS LA SECTION « BODY » ?
Dans la section « body », on y met le contenu de la page web:
• Texte: titres, paragraphes, listes
• Images / Photos / GIF
• Vidéos
• Audio
• Liens vers d’autres pages web ou vers une autre partie de la
même page.
• Tableaux

SECTION « BODY » : TEXTE
Il y a plusieurs balises utilisées pour ajouter du texte à une page
web:
• Pour ajouter un titre: <h1>gros titre</h1>… <h6>petit
titre</h6>
• Pour ajouter un paragraphe: <p>Ceci est une phrase. Et une
autre.</p>
• Pour ajouter un espace entre deux blocs de texte: <br>
• Pour mettre l’accent sur une partie du texte:
• <strong>Ceci est générallement en gras</strong>

SECTION « BODY » : LISTES
Il y a deux principaux types de listes qu’on peut ajouter à notre
page:
Liste non-ordonnée
(unordered list) avec des
puces (rondes) :
<ul>
<li>item</li>
<li>autre item</li>
<li>encore un autre
item</li>
</ul>
Liste ordonnée (ordered list)
avec des chiffres :
<ol>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ol>

SECTION « BODY » : IMAGE, VIDÉO ET
AUDIO
• IMAGE/PHOTO:
<img src="emplacement.de.limage.jpg"
alt="description.de.limage"/>
• VIDÉO: Lorsqu’une vidéo est déjà en ligne (sur YouTube par
exemple), il est possible de tout simplement « intégrer » la vidéo
sur notre page en copiant et collant le code <iframe> dans le
fichier HTML.
• AUDIO: Comme une vidéo, le plus simple est de trouver le code
<iframe> et le copier/coller dans le fichier HTML.

SECTION « BODY » : LIENS
• Pour transformer un texte en lien vers une autre page web:
<a href="adresse.de.la.page.web" target="_blank">le(s) mot(s)
où cliquer pour accéder à la nouvelle page web</>
• Pour transformer une image en lien vers une autre page web:
<a href="adresse.de.la.page.web" target="_blank"><img
src="emplacement.de.limage.jpg"
alt="description.de.limage"/></>

SECTION « BODY » : TABLEAUX
Un tableau est composé de rangées (horizontales) et de colonnes
(verticales).
Lorsqu’on créer un tableau en HTML, on commence par:
1. créer la section tableau (table): <table></table>
2. à l’intérieur de cette section, on crée le nombre de rangées
(rows) désirées: <tr></tr>
3. Et à l’intérieur de chaque rangée, on ajoute de nombre de
colonnes désirées: <td></td>

CSS: POUR MODIFIER L’ASPECT
COSMÉTIQUE
Le langage CSS (Cascading Style Sheet) permet de sélectionner
différents éléments d’un document HTML et de changer leur
apparence ou leur emplacement.
Par exemple, voici le code CSS pour afficher en rouge tous les
paragraphes (p):
p {
color: red;
}

CSS: OÙ PLACER LE CODE ?
Il y a différentes façons d’ajouter le code CSS à votre page web :
1. Créer un document CSS distinct et ajouter un lien vers celui-ci
dans votre document HTML. C’est la méthode la plus
courante.
2. Ajouter le code CSS à même votre document HTML. Pour ce
faire, on utilise la balise <style></style> à l’intérieur de la
section <head></head>. C’est une méthode pratique quand
on a que quelques ajustements esthétiques à faire.

CSS: L’ANATOMIE D’UNE RÈGLE CSS

CSS: QUELQUES EXEMPLES DE PROPRIÉTÉS
CSS
• Changer la taille d’un élément: width et height (ex: 15px)
• Changer la couleur de fond: background-color (ex: beige)
• Changer la couleur du texte: color (ex: red)
• Changer la taille des lettres polices: font-size (ex: 12px)
• Changer la police de caractères: font-family (ex: "Times New
Roman")

POUR ALLER PLUS LOIN !
Il existe de nombreuses ressources gratuites pour en apprendre
plus sur les langages de programmation reliés à la création d’un
site web:
• https://developer.mozilla.org/fr/docs/Apprendre
• https://www.theodinproject.com/
• https://htmldog.com/guides/
• https://www.codecademy.com/catalog/language/html-css
MERCI !

Programmation web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Programmation web

Similaire à Programmation web (20)

Dernier

Dernier (8)

Programmation web