TP1 html5 Partage [PDF]

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