formation developpement web seance html.pptx

Formation sur le
développement web
Formateur : IDRISSA DEMBELE

I
II
III
IV
Introduction
HTML Basics
Exercice pratique
Conclusion
PLAN
DE LA
FORMATION

 Vue d’ensemble sur le développement web
C’est quoi le développement web ?
Le développement Web désigne de manière
générale les tâches associées au développement
de sites Web destinés à être hébergés via un
intranet ou Internet
Le processus de développement web comprend,
entre autres, la conception de sites web, le
développement de contenu web, l’élaboration de
scripts côté client ou côté serveur et la
configuration de la sécurité du réseau.

• Le World Wide Web, la toile mondiale ou la
toile, est un système hypertexte public
fonctionnant sur Internet.
• Les clients correspondent aux appareils
connectés sur Internet par les personnes
• Les serveurs sont des ordinateurs qui stockent
des pages web, des sites ou des applications.
Fonctionnement du web

• Les développeurs front-end s’occupent de la partie d’un
site Web que les gens voient et avec laquelle ils
interagissent.
• Les développeurs back-end sont responsables eux, du
code en arrière-plan. Ce code va servir à contrôler la façon
dont un site Web va se charger et s’exécuter.
• Les développeurs full-stack font un peu de tout .
Les différent types de développeurs web

Les différent types de développeurs web

 Que signifie HTML et comment fonctionne le HTML ?
• Le langage HTML, pour HyperText Markup
Language, est un type de langage informatique qui
décrit au navigateur comment afficher la page web
• HTML permet d’intégrer du contenu à un site Web
tout en le divisant en titres, paragraphes et tableaux.
C’est un langage essentiel. Il indique au site Web quel
contenu afficher et, dans une certaine mesure,
comment l’afficher.

 C’est quoi un élément HTML ?
En HTML, un élément est la
construction de base utilisée
pour définir la structure, le
contenu et souvent l'apparence
d'une page web.
Exemple : paragraphe (p), titre (h1, h2, h3, h4 etc..) etc..

 C’est quoi une balise HTML ?
Un élément HTML peut être
soit constitué d’une paire de
balises (ouvrante et fermante) et
d’un contenu, soit d’une balise
unique qu’on dit alors «
orpheline ».

 C’est quoi un attribut HTML ?
Les attributs vont en effet venir
compléter les éléments en les
définissant plus précisément ou
en apportant des informations
supplémentaires sur le
comportement d’un élément.

 Structure de base d’une page html
• <!DOCTYPE html> est une balise
orpheline indispensable : elle indique
qu'il s'agit d'une page HTML.
• <html> </html> englobe tout le
contenu de la page web. A l'intérieur, il
y a les balises en paire <head>
</head> et <body> </body>

 L’enregistrement de notre fichier

Les titres
 Les titres et les paragraphes

 Les titres et les paragraphes
Les paragraphes

 Les espaces et retours à la ligne en HTML
Les espaces
• Utiliser l’élément HTML de préformatage pre ;
• Utiliser des entités HTML ;
• Utiliser les marges CSS (dont nous parlerons dans le chapitre qui leur est
consacré).

 Niveau d’importance des contenus en html
• Mettre un texte important avec l’élément Strong
• Mettre un texte en emphase avec l’élément em
• Mettre un contenu pertinent en relief avec l’élément mark

 Qu’est-ce qu’une liste HTML ? A quoi servent les listes ?
1. Elément
2. Elément
3. Elément
4. Elément
• Elément
• Elément
• Elément
• Elément
Liste ordonnée Liste non ordonnée
En HTML, une liste est une structure utilisée pour organiser et afficher des éléments de manière ordonnée ou
non ordonnée
Il existe trois types principaux de listes : les listes ordonnées, les listes non ordonnées et les listes de définition.

1. Premier élément
2. Deuxième élément
3. Troisième élément
Une liste ordonnée est une liste numérotée où chaque élément est précédé d'un numéro. Elle est définie
avec la balise <ol> et chaque élément de la liste est défini avec la balise <li> (List Item).
Liste ordonnée (<ol> - Ordered List)

Contrairement à la liste ordonnée, une liste non ordonnée ne présente pas de numérotation ou de
séquence spécifique. Elle utilise des puces par défaut pour chaque élément. Elle est définie avec la balise
<ul> et chaque élément est également défini avec <li>.
Liste non ordonnée (<ul> - Unordered List)
• Elément un
• Elément deux
• Elément trois

Une liste de définition est utilisée pour afficher des termes avec leurs définitions associées. Elle utilise les
balises <dl> (Definition List), <dt> (Definition Term) pour les termes et <dd> (Definition
Description) pour les définitions.
Liste de définition (<dl> - Definition List)

 Les liens en HTML
Les liens en HTML vont nous servir à créer des ponts entre différentes pages d’un même site ou de sites
différents. Le principe d’un lien est le suivant : en cliquant sur une ancre (qui est la partie visible par
l’utilisateur d’un lien et qui peut être un texte comme une image), nos utilisateurs vont être redirigés vers
une page cible.
Il existe deux types principaux de liens hypertextes en HTML :
• Les liens internes qui vont servir à naviguer d’une page à l’autre dans un même site ;
• Les liens externes qui vont envoyer les utilisateurs vers une page d’un autre site.

Les liens en HTML
Un lien externe est un lien qui part d’une page d’un site et ramène les utilisateurs vers une autre page
d’un autre site.
Les liens externes

Envoi de mail et téléchargement de fichiers avec l’élément HTML a
Pour permettre l’envoi d’un mail en HTML, on va placer indiquer en valeur de l’attribut href
de notre élément a la valeur mailto : suivie de notre adresse email.
Envoi de mail

Envoi de mail et téléchargement de fichiers avec l’élément HTML a
On va également pouvoir « forcer » le téléchargement d’un fichier en ajoutant un attribut
download dans l’élément a tout en indiquant l’adresse du fichier en question en valeur de
l’attribut href.
Téléchargement de fichiers

Les tableaux en html
Les tableaux en HTML vont nous permettre de présenter des données de manière
organisée et sous une certaine forme pour les structurer et les rendre compréhensibles
pour les navigateurs, moteurs de recherche et utilisateurs.
Définition

Pour créer un tableau fonctionnel en HTML, nous allons
devoir utiliser à minima 3 éléments :
• Un élément table (« tableau » en français) qui va définir le
tableau en soi ;
• Des éléments tr, pour « table row » ou « ligne de tableau » ;
• Des éléments td, pour « table data » ou « donnée de tableau
»;
Les éléments constitutifs essentiels d’un tableau HTML

Nous allons pouvoir structuré notre tableau en utilisant :
• thead pour la tête du tableau ;
• tbody pour le corps du tableau ;
• tfoot pour le pied du tableau.
Comment bien structuré son tableau?

Ces attributs vont prendre en valeur le nombre de colonnes ou de lignes qu’une cellule doit couvrir,
c’est-à-dire le nombre de colonnes ou de lignes qu’une cellule doit occuper ou encore sur lesquelles
elle doit s’étendre.
Fusionner des cellules entre elles avec colspan et rowspan

 Les media en html
Au sein de l’élément img, nous allons obligatoirement devoir préciser deux attributs : les attributs src
et alt.
Les images avec l’élément img

 Les media en html
Les formats audio les plus courants généralement utilisés vont
être les suivants :
• Le format audio Vorbis du conteneur WebM audio/webm ;
• Le format audio Vorbis du conteneur Ogg audio/ogg ;
• Le format audio MP3 audio/mpeg ;
• Le format audio PCM du conteneur WAVE audio/wave
La façon la plus simple d’insérer un fichier audio dans un
fichier va être d’utiliser un élément audio avec deux attributs
src et controls.
La musique avec l’élément audio

formation developpement web seance html.pptx

formation developpement web seance html.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à formation developpement web seance html.pptx

Similaire à formation developpement web seance html.pptx (20)

formation developpement web seance html.pptx

Notes de l'éditeur