Datei wird geladen, bitte warten...
Zitiervorschau
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
Objectif
Utiliser les balises HTML5 relatives : -Texte et sémantique
-Média -Image mappée -Formulaire
Activité 1 : 1. Taper le code suivant: Code html5
Apprendre
Apprendre à programmer
Ma couleur préférée est bleu rouge !
Visualisation
2. Ajouter la balise nécessaire pour enlever le problème d’encodage. …………………………………………………………………………………………………………………… 3. Donner le rôle de chaque balise.
3ème Science Info
…………………………………………………………………………………………….. ……………………………………………………………………………………………. …………………………………………………………………………………………….. ……………………………………………………………………………………………. …………………………………………………………………………………………….. ……………………………………………………………………………………………. …………………………………………………………………………………………….. ……………………………………………………………………………………………. …………………………………………………………………………………………….. …………………………………………………………………………………………….
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page1
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
4. Quel est la différence entre la balise et ? …………………………………………………………………………………………………………………… 5. Parmi les balises précédente qu’elles sont les balises inline et les balises block.
inline ……………………………………………………………………………………………………………. block…………………………………………………………………………………………………………….. 6. Qu’elles sont les attributs de la balise et ? …………………………………………………………………………………………………………………… 7. Qu’elle est le rôle de chaque attribut ? …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… Activité 2 : Soit les codes html5 ci-dessous : Code html5
C o d e 1
C o d e 2
Visualisation
Martin Luther King:
Il faut accepter les déceptions passagères, mais conserver l'espoir pour l'éternité.
Albert Einstein écrit dans une remarque à la fin d'un article écrit pour le Times de Londres :
Je passe actuellement en Allemagne pour un savant allemand et en Angleterre pour un juif suisse. Supposons que le sort fasse de moi une bête noire, je deviendrai au contraire un juif suisse en Allemagne, et un savant allemand en Angleterre.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page2
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
C o d e 3
Contact the author of this page:
[email protected] m
(311) 5552368
1. Taper le code 1 et le code2 puis compléter le tableau ci-dessous : Balise inline/block Rôle ……………………………………………………………………… ………………………………………………………………………
……………………………………………………………………… ……………………………………………………………………… ………………………………………………………………………
……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… ………………………………………………………………………
……………………………………………………………………… ………………………………………………………………………
2. Faut-il toujours utiliser l’attribut
cite d’un élément ou ?
Dans l’attribut cite……………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… 3. Donner un exemple d’œuvre auxquelles on pourrait faire référence grâce à un élément . ………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page3
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
4. Taper le code 3 puis donner le rôle de la balise : ………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………… 5. Ou peut-on trouver cette balise ? ………………………………………………………………………………………………………………… 6. Est-ce qu’on peut insérer par exemple une date de publication dans la balise ? ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… 7. Compléter la phrase suivante : Pour représenter une adresse arbitraire, qui n’est pas relative à l’information de contact on utilisera l’élément ………………..….. Plutôt que l’élément…………………………….. Activité 3 : Charger le code ci-dessous enregistré à l’adresse C:\Tp1_HTML5\activité3_p1
C o d e 1
C o d e 2
Code html5
_____________ < Oh la vache !> ------------\ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||
____ ____ ____ ||p |||r |||e || ||__|||__|||__|| |/__\|/__\|/__\|
Visualisation
1. Remplacer la balise par la balise
.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page4
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
2. Qu’elle est le rôle de la balise ? ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………
ASCII Art : images réalisées uniquement à l’aide des lettres et caractères spéciaux contenus dans le code ASCII
3. Donner le code nécessaire pour réaliser la
Poème d’Apollinaire
sous la forme d’une
tour Eiffel: S A LUT M O N D E DO NT JE SUIS LA LAN GUE É LO QUEN TE QUE SA BOU CHE Ô PARIS Code html5
TIRE ET TIRERA TOU JOURS AUX AL LEM ANDS Visualisation
C o d e
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page5
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
Activité 4 : 1. Taper le code1 ci-dessous :
C o d e 1
Code html5
Voici la structure itérative en Python :
for i in range(4): print("i a pour valeur", i)
Visualisation
………………………………………………… ………………………………………………… ………………………………………………… C ………………………………………………… o d ………………………………………………… e 2 …………………………………………………
………………………………………………… …………………………………………………
2. Donner le rôle de la balise : ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………… 3. Compléter le code 2 pour avoir l’affichage ci-dessus. Activité 5 : 1. Qu’elle est le nom des éléments 1 et 2 :……………………. 2. Donner la balise utilisée pour afficher ces éléments ………………………………………………………………………………. 3. Les attributs de la balise :
1
2
-value : ……………………………………………………………………….. ……………………………………………………………………………………………………………………..
-max :
……………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………… 3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page6
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
4. Tester la balise et donner l’état de la barre de progression lorsque l’un des attributs suivants est absent :
-Si max n’existe pas :…………………………………………………………………………………………….. -Si value n’existe pas :…………………………………………………………………………………………… 5. Pour avoir l’affichage suivant sur votre navigateur. Donner le code html5 nécessaire.
Code HTML5
3ème Science Info
Lycée Benane/Bodher
Rôle permet de représenter une image dans un document. cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Enfant direct de , son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de .
Prof : Ben Fredj Narjess
|page7
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
6. Télécharger deux vidéos. 7. Insérer les vidéos dans votre page web puis écrivez le code dans votre cahier. Code HTML5
Activité 6: 1. A fin de créer une image cliquable suivez les étapes suivantes : Etape 1 :
Etape 2 :
Etape 3 :
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page8
Systèmes, technologies et Internet
TP1- HTML5
2020-2021
Etape 4 :
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page9
TP1- HTML5
3ème Science Info
Systèmes, technologies et Internet
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
2020-2021
|page10
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
Activité 7 : 1. Quelle est la différence entre un document HTML et un formulaire HTML ? Le principale différence entre un formulaire html et un document html habituel réside dans le fait que, généralement les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas vous avez besoin de mettre en place un serveur web pour récupérer ces données les traiter. 2. Compléter le schéma suivant : Requête
3. Compléter la figure suivante par le nom de chaque composant dans le formulaire : 2………………..
1………………..
8……………… 3……………… ……………….. 4………………..
5……………… ……………….. 6………………………………… 7……………………… …………
4. Ecrire un programme en HTML5 du formulaire ci-dessus : ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... 3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page11
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………... ……………………………………………………………………………………………………………………...
L'attribut ACTION C’est l’adresse ou le nom du programme qui traite l’information Il indique l'action à exécuter lorsque lors de l'envoi des données. Ce sera souvent un logiciel du serveur activé en utilisant la passerelle CGI. On peu aussi utiliser un script JAVAscript. L'attribut METHOD Il permet de définir la méthode de transfert des données vers le serveur. Les deux valeurs possibles sont GET et POST. 5. Tester le code HTML dans la colonne numero2 puis compléter le tableau par le type de chaque composant suivant :
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page12
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
……………………………………………………… Code
Rôle
Les éléments de type button sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement click). Les éléments ne possèdent pas de comportement particulier. Note : Bien que les éléments de type "button" représentent toujours des éléments HTML valides, l'élément , plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.
……………………………………………………… Code
Rôle
Les éléments dont l'attribut type vaut "submit" sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.
………………………………………………………
Code
Select Image
Les éléments dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs
Rôle
fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire. L'attribut value contient une chaîne de caractères qui représente le chemin du/des fichier(s) sélectionné(s).
……………………………………………………… Code
Rôle
Les éléments de type "reset" sont affichés sous la forme de boutons permettant de réinitialiser l'ensemble des champs du formulaire avec leurs valeurs initiales.
……………………………………………………… Entrer un texte
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page13
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
-L'élément HTML représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.
Rôle
-Les attributs rows et cols permettent de définir la taille exacte qui doit être occupée par l'élément . Les navigateurs pouvant être différents, c'est une bonne idée que d'utiliser ces attributs pour garantir une certaine homogénéité.
………………………………………………………
Code
Nom
Nom
Rôle
-l'attribut size qui définit la taille du champ dans la page en nombre de caractère, mais cela n'empêche pas l'utilisateur d'en saisir plus -l'attribut maxlength qui permet de limiter la saisie à un nombre de caractère définir. Ce type de possibilité est fréquemment utilisé par exemple pour les mots de passe.
………………………………………………………
Code
Age
Age
Age
Rôle
-Le type number permettra de "forcer" l'utilisateur à écrire des nombres. - L'incrément à chaque clic pourra être défini avec l'attribut step.
………………………………………………………
Code
Site web
Site web
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page14
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
Rôle
Internet s'étant démocratisé, il n'est maintenant pas rare de voir des formulaires qui demandent l'adresse du site web comme information d'utilisateur. L'élément input pourra alors utiliser le type url pour contraindre l'utilisateur à saisir une url valide comprenant entre autre http://
………………………………………………………
Code
Entrer votre gmail.com email:
Rôle
Les éléments dont l'attribut type vaut "email" permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut multiple est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte.
……………………………………………………… Code
téléphone :
Rôle
Les éléments dont l'attribut type vaut "tel" permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour et , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.
……………………………………………………… Code
Mot de passe :
Rôle
Les éléments de type "password" permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.
………………………………………………………
Code
Dans quelle couleur souhaitez-vous ce produit ?
On peut utiliser l'outil par défaut. Dans ce cas, l'utilisateur pourra choisir la couleur sans limitation.
Rôle
On peut laisser le choix de la couleur mais placer une couleur par défaut avec l'attribut global value. On peut aussi définir une gamme de couleur grâce à une datalist relié à l'input.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page15
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
………………………………………………………
Code
Sur une gamme de 0 à 100, appréciez vous nos produits ?
Sur une gamme de 0 à 100, appréciez vous nos produits ?
Sur une gamme de 0 à 100, appréciez vous nos produits ?
Rôle
Les éléments dont l'attribut type vaut range permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de widget n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.
………………………………………………………
Code
Quelle est votre date de naissance ?
Heure de Livraison souhaitée
Rôle
-Les éléments dont l'attribut type vaut date permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure). -Les éléments dont l'attribut type vaut time permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).
……………………………………………………… Code
J'accepte
Je n'accepte pas
Les éléments de type checkbox sont affichés sous la forme de boîtes à cocher qui sont cochées
Rôle
lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire. L'utilisation de l'attribut checked permet de spécifier que le champ sera activé par défaut.
……………………………………………………… 3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page16
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
Code
J'accepte
Je n'accepte pas
Rôle
Les éléments dont l'attribut type vaut radio sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés. Remarquez que pour les groupes de radio, il est important qu'ils partagent le même attribut name. L'utilisation de l'attribut checked permet de spécifier que le champ sera activé par défaut.
………………………………………………………
Internet Explorer Firefox Safari Opera Google Chrome
Code
Veuillez choisir un ou plusieurs animaux :
Chien Chat Hamster
Perroquet Macaw Albatros
Rôle
L'élément HTML représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page17
TP1- HTML5
Systèmes, technologies et Internet
2020-2021
6. Faut-il utiliser plutôt la méthode GET pour envoyer les données d'un formulaire HTML, ou
la méthode POST?
Données dans une URL
Corps vide de la requête
En tête de la requête Description des données dans le corps
Corps de la requête 3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page18
TP1- HTML5
3ème Science Info
Systèmes, technologies et Internet
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
2020-2021
|page19