Séance 1,2,3,4 HTML

Séance 1
Domaine d’apprentissage : Communication et technologies Internet
Objectifs
 Découvrir la structure de base d’un document HTML5 en explorant des pages web existante
 Découvrir l’historique et l’évolution du HTML et L’intérêt de css
 Utiliser du code HTML pour structurer une page web en HTML
 Exploiter et comparer de différents éditeurs afin d’argumenter le choix de l’outil à adopter
Pour mieux faire connaissance on va se présenter en créant (des plates formes) des pages Web
pour présenter chaque élève.--> CV en ligne  Besoin : création des pages /site Web
Partie 1 - Découvrez les bases de HTML5
1. Découvrez le fonctionnement des sites web
Comment fonctionnent les sites web ?comment

créer des sites Wb ? Exploitation du code
source de quelques pages
 Un navigateur web (browser en anglais) est

un logiciel conçu pour consulter et afficher le World Wide Web. Il existe de nombreux navigateurs web,
pour toutes sortes de matériels (ordinateur personnel, tablette tactile, téléphones mobiles, etc.) et pour
différents systèmes d'exploitation (GNU/Linux, Windows, Mac OS, iOS et Android). Dans les années
2010, les plus utilisés sont Google Chrome, Mozilla Firefox, Internet Explorer/Edge, Safari, Opera.
 HTML : L’HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu
pour représenter les pages web. (hypertexte, structure sémantique et logique, mettre en forme le
contenu des pages, inclure des ressources multimédias: images, formulaires de saisie et des programmes
informatiques.. Il est souvent utilisé conjointement avec le langage de programmation (JavaScript) et
des feuilles de style en cascade (CSS). HTML est inspiré du Standard Generalized Markup
Language (SGML).
 Le langage HTML a été inventé par Tim Berners-Lee en 1991…
Pourquoi avoir créé deux langages ?

Un seul aurait suffi, non ?
 Deux langages qui se complètent car ils ont des rôles différents , CSS (Cascading Style
Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web
(agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu
compléter le HTML en 1996.
Page 1
Recherche : Les différentes versions de HTML et CSS
Editeurs de texte utilisés : notepad++, Sublime Text, HTML pad
2. Créez votre première page web en HTML
1 .lancer le logiciel / 2. Saisir du texte (2lignes)/ 3. Enregistrer en format html / 4. Tester

Découvrir la structure de base d’un document HTML5 en explorant des pages web
existantes
Page 2
Les attributs : les options de balise, informations supplémentaires
<balise attribut="valeur">
Structure de base d'une page HTML5

<!DOCTYPE html>  Doctype: indique qu'il s'agit d'une page web HTML. Si
vous ne commencez pas votre document par <!DOCTYPE html>,
<html> les navigateurs afficheront votre document en mode quirks.
 La balise <html>: englobe tout le contenu de page
<head>
 L'en-tête <head> Les informations que contient ne sont pas
<meta charset="utf-8" /> affichées sur la page
 le corps <body>: la partie principale de la page
<title>Titre</title>
 L'encodage (charset) : détermine comment les caractères
</head> spéciaux vont s'afficher (accents, idéogrammes chinois et
japonais, caractères arabes, etc.).
 le titre : <title>: ne s'affiche pas dans votre page mais en haut
<body> de celle-ci , apparaît aussi dans les résultats de recherche
 commentaire : 
</body>
</html>
Page 3
Séance 2
Objectifs
 Utiliser du code HTML pour structurer une page web en HTML

 Insertion des listes, des liens dans une page Web
 Distinguer les types balises paires/orpheline.
 Provoquer de nouveaux apprentissages dans le cadre même du projet
3. Organisez votre texte
Balise Rôle
<p> …</p> Début et fin du paragraphe

<br /> Saut de ligne
<h1> </h1> Créer des titres
<h6> </h6>
<em> </em> Mettre le texte en valeur : c'est le navigateur
qui choisit comment afficher les mots
exemple : italique
<strong> Mettre le texte en valeur: exemple gras
<mark> surligner le texte
<ul> listes non ordonnées ou listes à puces
<li>……</li> délimite un élément de la liste
</ul>
<ol> liste ordonnée
<li>……</li>
</ol>.
<dl> Liste de données
<dt>…..</dt>
</dl>
À quoi cela sert-il que l'ordinateur sache qu'un texte est important ?
De nombreux programmes analysent le code source des pages web, à commencer par les
robots de moteurs de recherche. Ces robots parcourent le Web en lisant le code HTML de tous les sites.
Page 4
C'est le cas des robots de Google et de Bing, par exemple. Les mots-clés « importants » ont tendance à avoir
plus de valeur à leurs yeux, donc si quelqu'un fait une recherche sur ces mots, il a plus de chances de tomber
sur votre site.
T ESTER VOS ACQUIS :
Compléter le code suivant par les balises adéquates pour assurer les taches décrites ci dessous
<!DOCTYPE html>  Ajoutez un titre de niveau 1

 A la suite du titre, ajoutez un paragraphe
<html>
indiquant "Voici mes animaux préférés :"
<head>  Ajoutez une liste ordonnée d'au moins trois de
vos animaux préférés
<meta charset="utf-8" />
 Mettez en valeur (emphase forte) le premier
<title>Ma passion pour les animaux</title> animal de la liste
</head>
<body>
</body>
</html>
correction :
<html>
<head>
<meta charset="utf-8" />
<title>Ma passion pour les animaux</title>
</head>
<body>
<h1> Animeaux préféres </h1>
<p> Voici mes animaeux préféres </p>
<ol>
<li> <strong>chat</strong></li>
<li>chien </li>
<li> caniche</li>
Page 5
</ol>
créer vos propres pages Besoin de lier entre les pages de site , créer des liens vers vos comptes
facebook, instagram ..
4. Créez des liens: Balise :<a> Il faut lui ajouter un attribut, href
 Pour faire un lien vers un autre site : copier son adresse URL
 Pour faire un lien de la page 1 vers la page 2, écrire le nom du fichier destination vers lequel on veut amener.
 Pour faire un lien vers un ancre: créer l'ancre et la balise <id>
Besoin de créer des liens vers vos comptes gamil, vers des fichiers plus volumineux (album photo, chanson
préférée, film…), Besoin de décorer votre page Web par des photos
5. I
nsér
ez
des
images
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Il
existe un format adapté à
chaque image
Page 6
Cadre bleu (ou violet) autour de votre image cliquable. Pas très esthétique, nous pourrons retirer ce cadre dans
peu de temps grâce au CSS.
L'attribut title : permet d'afficher une bulle d'aide.il est facultatif
Séance 3
Objectifs
 Evaluation des acquis en utilisant un quiz

 Entraîner la mobilisation des savoirs et des savoir faire acquis, pour construire des compétences.
 Provoquer de nouveaux apprentissages dans le cadre même du projet
7. Evaluation : QWIZ
Mini Projet : structurer votre cv:
Page 7
Séance 4
Objectifs
 Utiliser les éléments sémantiques et exploiter leur intérêt

 Ajouter des vidéo et des audio à votre page Web
 Créer des tableaux et les manipuler
1. Découvrez les éléments sémantiques du HTML5

Un élément sémantique décrit clairement sa signification à la fois pour le navigateur et le développeur.
Selon le W3C, un Web sémantique: "Permet aux données d'être partagées et réutilisées entre les applications,
les entreprises et les communautés".
(Annexe)
2. Insérer des vidéos et des audio

 Pour ajouter Audio : <audio controls> <source src="chans.mp3" ></audio>
Extension : Mp3, wav, ogg
 Pour ajouter Vidéo : <Video controls> <source src="vid.mp4" ></Video>
Extension : Mp4, webM, ogg
3. Créer des tableaux

Les tableaux en HTML servent à arranger des données en lignes et colonnes.
Les balises utilisées :
<table> : Pour la création de notre table.
<tr>(table row ) : Pour la création des lignes de tableaux.
<td>( table data ) : Pour la création des données utilisées dedans.
Les attributs utilisées (optionnel ) :
cellpadding, border, width,,,,
Page 8

Séance 1,2,3,4 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Séance 1,2,3,4 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Séance 1

Domaine d’apprentissage : Communication et technologies Internet

Partie 1 - Découvrez les bases de HTML5

1. Découvrez le fonctionnement des sites web

Comment fonctionnent les sites web ?comment

 Un navigateur web (browser en anglais) est

Pourquoi avoir créé deux langages ?

Editeurs de texte utilisés : notepad++, Sublime Text, HTML pad

2. Créez votre première page web en HTML

1 .lancer le logiciel / 2. Saisir du texte (2lignes)/ 3. Enregistrer en format html / 4. Tester

Structure de base d'une page HTML5

Domaine d’apprentissage : Communication et technologies Internet

 Utiliser du code HTML pour structurer une page web en HTML

<p> …</p> Début et fin du paragraphe

T ESTER VOS ACQUIS :

<!DOCTYPE html>  Ajoutez un titre de niveau 1

<meta charset="utf-8" />

<title>Ma passion pour les animaux</title>

<h1> Animeaux préféres </h1>

<p> Voici mes animaeux préféres </p>

L'attribut title : permet d'afficher une bulle d'aide.il est facultatif

Domaine d’apprentissage : Communication et technologies Internet

 Evaluation des acquis en utilisant un quiz

Mini Projet : structurer votre cv:

Domaine d’apprentissage : Communication et technologies Internet

 Utiliser les éléments sémantiques et exploiter leur intérêt

1. Découvrez les éléments sémantiques du HTML5

2. Insérer des vidéos et des audio

Extension : Mp3, wav, ogg

 Pour ajouter Vidéo : <Video controls> <source src="vid.mp4" ></Video>

Extension : Mp4, webM, ogg

3. Créer des tableaux

Les balises utilisées :

<table> : Pour la création de notre table.

<tr>(table row ) : Pour la création des lignes de tableaux.

<td>( table data ) : Pour la création des données utilisées dedans.

Les attributs utilisées (optionnel ) :

cellpadding, border, width,,,,

Vous aimerez peut-être aussi