Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP1 Programmation Web

    Transféré par

    zayenifadwa
    11 vues6 pages

    Titre original

    TP1-Programmation-web

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    11 vues6 pages

    TP1 Programmation Web

    Transféré par

    zayenifadwa

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Université de Tunis el Manar Faculté des Sciences de Tunis

    Ce TP a été Préparer par : Lotfi Ben Abdelaziz Classe: TIC 2

    TP 1 : Introduction aux bases du langage HTML


    Module : Programmation Web

    Introduction :

    HTML HyperText Markup Language est le langage standard utilisé pour créer et
    structurer le contenu des pages web. Il permet de définir la structure et le contenu d'une
    page web en utilisant des balises et des éléments.

    Dans ce TP, nous allons explorer les bases du langage HTML, en commençant par la
    création d'une page web simple, puis en abordant des concepts plus avancés comme les
    listes, les tableaux et les formulaires.

    Objectifs :

    1. Comprendre les principes fondamentaux du langage HTML.


    2. Être capable de créer une page web simple en utilisant HTML.
    3. Apprendre à structurer le contenu d'une page web à l'aide de balises HTML.
    4. Comprendre le fonctionnement des listes, des tableaux et des formulaires en
    HTML.

    Supports nécessaires:

    1. HTML: HyperText Markup Language | MDN (mozilla.org)


    2. HTML Reference (w3schools.com)
    3. HTML | Codecademy

    1 2023/2024 DURÉE : 3H
    À propos :

    Comment les navigateurs interagissent-ils avec les sites web?

    Comment les navigateurs interagissent-ils avec les sites web ? D'où un navigateur
    récupère-t-il les données et comment les rend-il pour l'utilisateur ?

    Un site web se compose de différents fichiers, y compris des fichiers audio, vidéo et
    image. De plus, il inclut des fichiers de code qui compilent tous ces éléments en un site
    web cohérent. En général, ce code est écrit en HTML (Hyper Text Markup Language). Ces
    fichiers ne sont pas stockés sur le système de l'utilisateur ; au lieu de cela, ils résident sur
    un serveur.

    Les serveurs sont équipés de processeurs puissants, de beaucoup de RAM et d'un espace
    de stockage étendu, ce qui permet aux fichiers d'être accessibles mondialement.
    Lorsqu'un navigateur doit localiser un serveur, il s'appuie sur un identifiant unique
    associé à chaque serveur, similaire à la manière dont les maisons ont des adresses. Cet
    identifiant est connu (ID) sous le nom d'adresse IP.

    Figure 1 : La relation entre le navigateur et le site web.

    Cependant, se souvenir des adresses IP de chaque site web est impraticable. Pour
    simplifier cela, un système appelé Système de Noms de Domaine (DNS) associe des noms

    2 2023/2024 DURÉE : 3H
    de domaine à des adresses IP, similaire à un annuaire téléphonique qui associe des noms
    à des numéros de téléphone. Ce système rationalise le processus de connexion aux sites
    web sans avoir besoin de se rappeler des adresses IP spécifiques.

    ACTIVITÉ 1 : Création d'une page HTML basique:

    1. Création du fichier HTML :

    - Utilisez un éditeur de texte tel que Notepad, Visual Studio Code, Sublime Text, etc.

    - Créez un nouveau fichier et enregistrez-le avec l'extension ".html".

    2. Structure de base :

    - Écrivez la structure de base d'un document HTML en utilisant les balises `<html>`,
    `<head>` et `<body>`.

    - Incluez la déclaration `<!DOCTYPE html>` pour spécifier la version HTML.

    3. Ajout du titre :

    - Utilisez la balise `<h1>` pour créer le titre "Tic 1" dans le corps de la page.

    4. Ajout du paragraphe :

    - Utilisez la balise `<p>` pour créer un paragraphe de texte et y inclure du contenu


    descriptif.

    5. Ajout du lien :

    - Utilisez la balise `<a>` pour créer un lien hypertexte vers Google.

    - Spécifiez l'attribut `href` avec l'URL de Google.

    - Écrivez le texte du lien à afficher.

    6. Ajout de l'image :

    - Utilisez la balise `<img>` pour insérer une image.

    - Spécifiez l'attribut `src` avec le chemin de l'image.

    - Spécifiez l'attribut `alt` avec une description de l'image (pour l'accessibilité).

    3 2023/2024 DURÉE : 3H
    Figure 2 : Code final

    ACTIVITÉ 2: Utilisation d’autres balises HTML

    1. Création d'une liste ordonnée (OL) :

    - Utilisez la balise `<ol>` pour créer une liste ordonnée.

    - Utilisez la balise `<li>` pour générer les éléments de la liste.

    2. Création d'une liste non ordonnée (UL) :

    - Utilisez la balise `<ul>` pour créer une liste non ordonnée.

    - Utilisez la balise `<li>` pour générer les éléments de la liste.

    3. Création d'un tableau (TABLE) :

    - Utilisez la balise `<table>` pour créer un tableau.

    - Utilisez la balise `<tr>` (table row )pour représenter les lignes du tableau.

    - Utilisez la balise `<td>`( table data ) pour représenter les données de chaque cellule.

    - Utilisez la balise `<th>` ( table heading ) pour représenter les en-têtes de colonne.

    4 2023/2024 DURÉE : 3H
    4. Création d'un formulaire (FORM) :

    - Utilisez la balise `<form>` pour créer un formulaire.

    - À l'intérieur de la balise `<form>`, créez des champs `<input>` pour saisir des données.

    - Ajoutez des attributs comme `type`, `placeholder`, selon les besoins.

    - créer un formulaire contenant votre nom , prénom et votre adresse email .

    - Ajoutez des Inputs de type checkbox et radio. dans l’input radio ajouter un attribut
    name=’ radiobutton’ .

    - Utilisez la balise `<select>` pour créer une liste déroulante. à l'intérieur de la balise
    select ajouter la balise `<option>` pour les options.(option 1 , option 2 et option 3)

    - Utilisez la balise `<input>` de type `submit` pour soumettre le formulaire.

    - Ajouter une balise <button> de type submit .

    5. Ajout d'éléments de mise en forme :

    - Utilisez la balise `<br>` pour ajouter un saut de ligne.

    - Utilisez la balise `<hr>` pour ajouter une ligne horizontale.

    - Utilisez la balise `<link>` pour ajouter une icône à la page HTML.

    Activité 3: Programmer le formulaire suivant en HTML. ( To Do )

    5 2023/2024 DURÉE : 3H
    Figure 3 : Page Formulaire

    6 2023/2024 DURÉE : 3H

    Vous aimerez peut-être aussi