Scribd
Importer
44 vues118 pages

1 - Séances HTML

Le document introduit les concepts de base de la programmation web tels que HTML, CSS et JavaScript. Il présente les objectifs du cours qui sont de se familiariser avec ces technologies et de développer une page web simple. Le document contient également des détails sur l'historique du web et l'architecture client-serveur.

Transféré par

sodkiabla4
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
44 vues118 pages

1 - Séances HTML

Le document introduit les concepts de base de la programmation web tels que HTML, CSS et JavaScript. Il présente les objectifs du cours qui sont de se familiariser avec ces technologies et de développer une page web simple. Le document contient également des détails sur l'historique du web et l'architecture client-serveur.

Transféré par

sodkiabla4
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 118

Introduction à la Programmation

Web

Hicham El Moubtahij
Filière : Génie Informatique, EST d’Agadir
Année Universitaire : 2023 - 2024
Détails du Cours

• On va voir l’essentiel
• HTML
• CSS
• JavaScript
• Il y aura peut être aussi d’un mini-projet 

2
Objectifs
• Se familiariser avec les concepts de base de la programmation web
• Définir le but du HTML, CSS et JavaScript
• Développer une simple page web en utilisant HTML
• Utiliser CSS pour contrôler le style du texte
• Utiliser les variables et les fonctions JavaScript
• Manipuler le contenu d’une page web avec JavaScript
• Répondre aux entrées des utilisateurs en utilisant JavaScript
3
Important Remark

• The best way to learn this course is:

Test all the examples seen in the lectures

4
Historique du Web

5
Historique ++
• Web 1.0 – Creation of static web pages, the first web.
• Web 2.0 – Interactivity, social networking, online commerce, wikis.
• Web 3.0 – The “intelligent web”, i.e., Machine-facilitated understanding
of information.
 NLP (Natural Language Processing) and Computer Vision 
 Machine learning/reasoning 
 Recommender systems.
 Artificial intelligence techniques in general
6
Architecture Client - Serveur

• L’architecture Client-Serveur est le modèle le plus utilisé pour la description de


la relation de coopération entre les programmes et les applications web.

• Les deux parties de l’architecture Client-Serveur sont :

 Serveur : écoute les requêtes et fournit les services et/ou les ressources
(texte, image, video, etc.). Il s’exécute sur un ordinateur puissant ou encore
sur votre Laptop.

 Client : établir la connexion avec le serveur et demande des services et/ou


des ressources de celui-ci.
7
Le Modèle Client-Serveur

8
Web 1.0

• Le serveur web fournit des pages statiques – pas d’interactivité


• Pas de séparation entre les données et la présentation
• Le navigateur est très simple – juste HTML

9
Web 2.0 && Web 3.0

• Séparation entre les données et la présentation

10
Vue Générale sur le Web

11
Architecture 3-tier
1. La couche de présentation (navigateur) : qui gère l'interface utilisateur et la
présentation des données.

2. La couche de traitement côté serveur : qui traite les demandes côté serveur et
peut inclure des technologies comme les serveurs d'applications, les API ou les
services web.

3. La couche de gestion des données : qui gère la persistance des données et


peut inclure des systèmes de bases de données, des caches ou des index.

Remarque : il y a aussi l’architecture 6-tier (out of the scope of this course)


12
Introduction à La Programmation Web

Comment afficher le contenu


d’une page web

Comment bien présenté ce


contenu

Comment rendre ce contenu


interactif
13
Part 1:

Introduction to HTML
Introduction

• HTML = Hyper Text Markup Language


• Créé en 1991
• Nous allons également couvrir la version
HTML5

15
Eléments HTML

• Structure <html> <head> <body>


• <head> <meta> <author> <style> <link> <script>
<base>
• <body> <h1> <p>

16
Introduction

Les commandes HTML

• Les commandes HTML sont appelés “éléments”


• Un élément possède une balise ouvrante et une balise
fermante (<p>… </p>, etc.)
• Il y a des exceptions qui s’échappent à cette règle appelées des
balises orphelines (<br>)
17
Structure d’une Page HTML
<!DOCTYPE html>
<html>
<head>
… header elements go here… (invisible in the web page)
</head>
<body>
… the main web page content goes here … (visible in the web page)
</body>
</html>
18
Simple Web Page
<!DOCTYPE html>
<html>
<head>
<title> A Simple Web Page </title>
<meta name=“author” content=“Hicham El Moubtahij”>
</head>
<body>
<h1> My web Page </h1>
<p> This is my first web page using HTML </p>
</body>
</html>
19
Time for Demo

20
Résultat
<!DOCTYPE html>
<html>
<head>
<title> A Simple Web Page </title>
<meta name=“author” content=“Hicham El Moubtahij”>
</head>
<body>
<h1> My web Page </h1>
<p> This is my first web page using HTML </p>
</body>
</html>
21
“H1” et “p”
On va explorer le contenu de cette page web en HTML:

• <h1> veux dire “niveau 1” du titre

<h1> My web page </h1>

• <p> : pour spécifier un paragraphe

<p> This is my first web page using HTML </p>

22
Code dans “Head”

• Le contenu de <head> est une information sur la page web et il n’est pas
affiché dans le résultat de la page

• On va explorer les deux lignes dans <head>

<title> A Simple Web Page </title>

<meta name=“author” content=“Hicham El Moubtahij”>

• Evidemment, c’est la spécification du titre et de l’auteur de la page web


23
Autre Information dans “head” (1)
Style – see later

<style>
body {background-color: yellow}
</style>
<link rel=“stylesheet” href=“stylerules.css”>

24
Autre Information dans “head” (2)
Script– see later

<script>
function surprise () {
alert(“Hello “);
}
</script>
<script src=“mycode.js”></script>
25
Attributs (ou Paramètres)

• On doit utiliser les cotes (quotes) pour un attribut HTML

<meta name=“author” content=“Hicham El Moubtahij”>

• On peut aussi utiliser un “single quote”

<meta name=‘author’ content=‘Hicham El Moubtahij’>

26
Découvrir le Contenu d’une Page Web HTML

• Par exemple: http://www.wikipedia.com


• Le code source de la page

• Clavier : ctrl-U (PC browsers)


• Alt + cmd + U (Mac Chrome, Safari)
• Alt + cmd + U (Mac Firefox)

27
Editeurs HTML

• Il y on a des centaines d’éditeurs HTML

• Ils fournissent des environnement GUI pour aider le développeur à créer des

pages web HTML

• Les éditeurs HTML sont très utiles pour complémenter le processus

d’apprentissage

• J’utilise Visual Studio Code pour les démos du cours

28
Quelques Eléments HTML
Objectifs

• Création des titres et des sections dans une page HTML

• Création de diffèrent types de listes

• Création des commentaires dans notre code

30
Les Eléments Explorés

• Titres (Headings) <h1> <h1> … <h6>

• Sections <section>

• Listes <ul>, <ol> et <li>

• Commentaires <!-- a comment -->

31
Titres (Headings)
• Titres HTML
 <h1> <h1> … <h6> sont utilisés pour les titres
 Le navigateur montre un <h1> plus grand que <h3>, plus grand que <h4>, etc.

• Les balises des titres (Heading Tags)


 <h1> This is h1 </h1>
 <h2> This is h2 </h2>
 <h3> This is h3 </h3>
 <p> This is a paragraph </p>
32
NB

• Les éléments sont affichés avec le style par défaut du navigateur

(Browser)

• On peut appliquer d’autres styles pour un meilleur affichage

• Dans la partie “CSS”, on va voir les styles en détails

33
Utiliser “Section”
• <section> est utilisée pour indiquer une section

<section>
<h1> Introduction to HTML</h1>
<p> Let’s define HTML and Web programming </p>
</section>

34
Listes
• On va explorer les listes en HTML
• <ul> : “unordered list”, <li> : “list item”
<ul>
<li> The first item </li>
<li> The second item </li>
<li> The third item </li>
</ul>
35
Liste des Nombres
• <ol> : “ordered list”
<ol>
<li> The first item </li>
<li> The second item </li>
<li> The third item </li>
</ol>

36
Changer le Numéro de Départ
• Ajouter start=“number” pour spécifier le numéro de départ

<ol start=‘2005’>
<li> The first item </li>
<li> The second item </li>
<li> The third item </li>
</ol>
37
Renverser l’Ordre
• Ajouter “reversed” pour renverser l’ordre de la liste

<ol start=‘2001’ reversed>


<li> The first item </li>
<li> The second item </li>
<li> The third item </li>
</ol>
38
Utiliser les Lettres
• Ajouter type = “A” pour utiliser une lettre
<ol type=‘A’>
<li> is for ‘Algorithm’ </li>
<li> is for ‘Berkeley’ </li>
<li> is for ‘California’ </li>
<li> is for ‘Data’ </li>
</ol>

39
Commentaires

• Un commentaire est spécifié par :

<!-- This is a comment -->

40
Formatage d’un Texte HTML
Eléments Explorés
• Italic and Bold <i> <em> <b> <string>

• Underline <u>

• Big and Small <big> <small>

• Highlighted <mark>

• Subscript && Superscript <sub> <sup>

• Inserted && Deleted <ins> <del>

42
Texte Italique
• <i> rend le texte italique

• <em> fait de même, mais …

<p> Hello <i> I love Artificial Intelligence </i> :)</p>

<p> Hello <em> I love my students </em> :)</p>

• <em> est plus important que <i> lorsqu’on fait une recherche sur Google

43
Texte en Gras
• <b> makes the text bold;
• <strong> fait la meme chose.
• La différence c’est que <string> indique l’importance
<p> I like <b> Programming </b>. </p>
<p> I like <strong> Python </strong>. </p>
• N.B. <strong> et <em> sont plus important que <b> et <i> si vous faites une
recherche Google.

44
Soulignement

• Il n’est plus utiliser dans les pages web moderne


<p> This <u> is not good for the page. </u>. </p>

• On risque de confondre avec un lien (<a>)

45
‘Big’ et ‘Small’ Texte
• <big> et <small> font exactement ce que vous attendez.
• Mais , <big> n’est pas une partie du standard HTML5
<p> Hello, my name is <big> Hicham </big> </p>
<p> Hello, my name is not <small> Andrew </small>.</p>
• <span> est une alternative pour <big>

46
Highlighting Text

• <mark> mettre en œuvre (highlights) le texte

<p> I will teach <mark> Web </mark> programming</p>

47
Subscript et Superscript

• Subscript (Indice) et Superscript (exposant)

• <sub> et <sup> sont utilisés pour ce but


<p>
If x<sub>1</sub>=2
</p>
<p>
This is x<sup>2</sup>
</p> 48
“Inserted” et “Deleted”
• <ins> et <del> sont utilisé pour éditer un texte

<p> …. <ins> Computer Science </ins> … </p>


<p> …. <del> Economics </del> … </p>

49
Images
Eléments && Attributs Explorés
Le tag <img> :
 l’attribut “ src “
 l’attribut “ width “ (largeur)
 l’attribut “ height “ (hauteur)

Utiliser “img” pour apporter une image dans une page web
<img src=‘ai.jpg’>
51
Contrôle des Images
• Contrôler la taille exact des images
 Ajouter width=“number” et height=“number”
 <img src=“image02.jpg” width=“300” height=“300”> (Too bad method)

• Contrôler la taille avec des corrections


 Utiliser juste un seul attribut (width ou height)
 <img src=“image02.jpg” width=“300”>

• Contrôler la taille relative d’une image


 Ajouter width=“number%” ou height=“number%”
 <img src=“image02.jpg” width=“50%”> 52
Audio
Eléments && Attributs Explorés

le tag <audio> :
L’attribut “src”
l’attribut “autoplay”
l’attribut “controls”
l’attribut “loop”
l’attribut “alt”

54
Gestion du Son

• <audio> ajoute un fichier son, mais sans le démarrer

 Exemple : <audio src=“song01.mp3” > </audio>

• “autoplay” démarre le son dés le chargement de la page web


<audio src=“song01.mp3” autoplay > </audio>

• Remarque : pas de bouton de contrôle du son

55
Contrôle du Son

– <audio src=“song01.mp3” controls> </audio>

– Ajoute le contrôle du fichier son

56
Répéter le Son

– Ajouter “loop” pour répéter le son

– <audio src=“song01.mp3” autoplay loop> </audio>

57
Vidéo
Eléments && Attributs Explorés

Le tag <video> :
l’attribut “src”
l’attribut “autoplay”
l’attribut “controls”
l’attribut “loop”
l’attribut “alt”
59
Ajouter une Vidéo

• La gestion des vidéos est similaire à celle du son

• <video> ajoute une vidéo à la page web mais la démarrer

 Exemple : <video src=“Hari.mp4”> </video>

60
Démarrer la Vidéo

• “autoplay” démarre la vidéo dés le chargement de la page web

 <video src=“Hari.mp4” autoplay > </video>

61
Ajouter le Contrôle à la Vidéo

• Ajoute “controls” pour permettre à l’utilisateur de contrôler la

vidéo

 <video src=“Hari.mp4” controls > </video>

62
Autre Méthodes de Contrôle des Vidéos

• Utiliser “loop” pour répéter la vidéo

<video src=“Hari.mp4” loop > </video>

• “alt” fournir une alternative à l'image lorsque celle-ci ne peut pas être
chargée.

<video src=“Hari.mp4” alt =“This Badr Hari Video”> </video>


63
Liens Hypertextes
Goals

• Ajouter un lien dans une page web

• Ajouter un lien dans n’importe quelle position dans une page

web

65
Eléments && Attributs Explorés

Le tag <a>

l’attribut “href “

l’attribut “name “

l’attribut “id “

66
Tag <a>
• <a href=“https://www.gmail.com/”> Google </a>

• <a> veut dire ‘anchor’ i.e. attacher une chose à une autre chose

67
Tag <a>
• Le lien peut être une image

<p> Select an icon to go to the web site! </p>

<a href="https://twitter.com/"> < img src="twitter_icon.png"></ a>


<a href="https://www.facebook.com"> < img src="facebook_icon.png"></ a>
<a href="https://plus.google.com"> < img src="google_plus_icon.png"></ a>

68
Tag <a> : Position dans la Page
• Un lien peut amener l’utilisateur dans n’importe quelle position dans la page web

Par exemple :

1. Ajouter id = “here” à l’ élément que vous voulez être un lien

(par exemple l’ajouter à un paragraphe <p>)

1. Ensuite utiliser <a href=“#here”> Go Here </a>

2. À partir d’une autre page web, utiliser :

<a href = “web_page.html#here”> Go Here </a>


69
Tag <a>
 How to open a link in a new browser window:
<a href="https://www.w3schools.com" >
VisitW3Schools.com! </a>
 How to link to an email address:
<a href="mailto:[email protected]" >
Send email </a>
 How to link to a JavaScript:
<a href="javascript:alert('Hello World!');“>
Execute JavaScript </a> 70
Tag <a>
 How to link to a phone number:
<a href="tel:+4733378901">
+47 333 78 901
</a>

 How to link to a JavaScript:


<a href="javascript:alert('Hello World!');">
Execute JavaScript
</a> 71
Tag <span>
 La balise <span> est un conteneur en ligne utilisé pour marquer une
partie d'un texte ou une partie d'un document.

 La balise <span> est facilement stylisée par CSS ou manipulée avec


JavaScript à l'aide de l'attribut class ou id.

 La balise <span> ressemble beaucoup à l'élément <div>, mais


<div> est un élément de niveau bloc et <span> est un élément en
ligne.
72
Tag <span>

73
Tag <span>

74
Tag <div>
 La balise <div> définit une division ou une section dans un
document HTML.

 La balise <div> est utilisée comme conteneur pour les éléments


HTML qui sont ensuite stylisés avec CSS ou manipulés avec
JavaScript.

 La balise <div> est facilement stylée en utilisant l'attribut class ou id.


75
Tag <span>

 N'importe quel type de contenu peut être placé à l'intérieur de la


balise <div> !

 Remarque : Par défaut, les navigateurs placent toujours un saut de


ligne avant et après l'élément <div>.

76
Tag <table>
<table>

<tr> <th> …. </th> <th> …. </th> <th> …. </th></tr>


<tr> <td> …. </td> <td> …. </td> <td> …. </td> </tr>
<tr> <td> …. </td> <td> …. </td> <td> …. </td></tr>
<tr> <td> …. </td> <td> …. </td> <td> …. </td></tr>
<tr> <td> …. </td> <td> …. </td> <td> …. </td></tr>

</table>

77
Tag <table>

78
Tag <table>

 <thead> Regroupe le contenu de l'en-tête dans un tableau

 <tbody> Regroupe le contenu du corps dans un tableau

 <tfoot> Regroupe le contenu du pied de page dans un


tableau
79
Tag <table>

80
Formulaires HTML – Notion de Base
Du Navigateur vers le Serveur

82
Structure de Base d’un Formulaire

<form action = “destination” method = “get or post” >


<textarea> … </textarea>
……
<input type = “submit”>
</form>

83
Destination
• Action=“destination” informe le navigateur sur le programme qui va
recevoir les données envoyées
<form action=“http://www.myserver.com/subdir/pg.php“>

• Si le programme se trouve sur le même serveur que le fichier HTML :


<form action=“subdir/pg.php”>

• Si le programme se trouve sur le même répertoire que le fichier


HTML :
<form action=“pg.php”>
84
get ou post
• method = “get” : est la méthode par défaut
• Exemple : chercher les “dogs” en utilisant bing.com
• L’URL :

85
Méthode ‘get’

• Pour le développement de votre projet, il est préférable d’utiliser la


méthode “get”, mais vous ne pouvez pas garder des données secrets

• “get” manipule seulement des petites transmission

• Exemple :

Quelque centaines de lettres / caractères

86
Méthode ‘Post’
• Method = “post”

• La principale différence avec “get” c’est que vous ne pouvez pas


voir les données

• Utilisé la méthode “post” pour garder des secrets

• “post” manipule des grandes transmission

• Exemple : transfert de fichiers


87
Exemple Simple - TextArea

< form >


<p>Please enter any feedback you have </p>
<textarea rows="3" cols="60" name="feedback" >
Please enter your text here
</textarea>
</form>

88
Résultat

89
Ajouter un Boutton “Submit” (Envoyer)

<form action="http://uiz.ac.ma/page.php" method="get">


<p>Please enter any feedback you have </p>
<textarea rows="3" cols="60" name="feedback" >
Please enter your text here
</textarea>
<br>
<input type="submit" value="Send">
</form>

90
Résultat

91
Formulaires ++
Eléments Explorés
• <select>
• <option>
• <input type = “text”>
• < input type = “password”>
• < input type = “checkbox”>
• < input type = “radio”>
93
Attributs Explorés

• L’attribut Placeholder

• L’attribut Value

• L’attribut Autofocus

• L’attribut Required

94
Eléments d’Entrés pour un Formulaire

• Submit button < input type = “submit”>

• Plain text < input type = “text”>

• Checkbox < input type = “checkbox”>

• Radio button < input type = “radio”>

• Password field < input type = “password”>

• File selector < input type = “file”>


95
Text, Checkbox & Radio
<form>
Please enter your name. <br>
<input type="text" name="feedback"> <br> <br>

Please select each of the following that you have. <br>


<input type=" checkbox " name="items" value="car"> Car <br>
<input type=" checkbox " name=" items " value="teddy bear">Teddy bear <br>
<input type=" checkbox " name=" items " value="toothbrush">Toothbrush <br>
<br>

Please indicate your intelligence level. <br>


<input type="radio" name=" iq " value="high"> High <br>
<input type="radio" name=" iq " value="medium" checked> Medium <br>
<input type=" radio" name="iq" value="low"> Low <br> <br>
</form > 96
Résultat

97
Password

<form>
<p> What is the secret password ? </p>
<input type=“password” name =“userpassword”> <br>
</form>

98
Résultat

Fait attention  ne jamais utilisé la méthode “get”

99
Liste de Valeurs
<form>
<p> What city would you like to go to? </p>

<select name="cities" >


<option value="hk"> Hong Kong </option>
<option value="vc"> Vancouver </option>
<option value="sf"> San Francisco </option>
</select>
</form>
100
Résultat

101
Attributs Utiles
• Value = “something” fixe la valeur de départ

• Palceholder = “something” affiche un texte utile avant que


l’utilisateur écrit quelque chose dans le champ de saisie

• Autofocus : indique quel champs au départ il reçoit le curseur

• Required : ce champ est obligatoire et donc il doit être rempli

102
Exemple
<form>
<p> Please fill in the following information: </p >
<label for="firstname"> First name: </label>
<input type="text" name="firstname" value="Dave" autofocus>
<br>
<label for="lastname"> Last name: </label>
<input type="text" name="lastname" ptaceholden="Your last name goes here" >
<br>
<label for="age">Age: </label>
<input type="text" name="age" required >
<br>
<input type="submit" value="Submit" >
</form>
103
Résultat

104
Manipulation d’un “File Upload”

• Syntaxe générale :

< input type = “file”>

105
Uploading Files
• Deux parties : le navigateur et le serveur
• La partie serveur n'est pas abordée cette année (l'année prochaine avec PHP).

<form action="destination" method="post" enctype="multipart/form-data">


. . . other form input elements go here, if any ...
<input type = "file" name = "fileToUpload“>
<input type = "submit">
</form>

• enctype=“multipart/form-data” : informe le navigateur d’attacher un fichier (s)


• Remarque : method = “post” est obligatoire 106
Exemple
<form method="post" enctype="multipart/form-data"
action="http://uiz.ac.ma/page.php">

<p> Select the file you want to upload </p>


<input type="file" name="fileToUpload“ >

<p> Press this button to send it </p>


<input type ="submit" value="Upload the file“ >

</form>

107
Résultat

108
Le Coté Serveur
• Le fichier est envoyé au programme situé dans le serveur
• Ce programme effectue plusieurs traitement
• Par exemple, Il peut déplacer le fichier vers un autre
répertoire
• Il peut enregistrer le ficher dans une base de données

109
Some New HTML5 Input Elements
Eléments & Attributs Explorés
• < input type = “number”>

• < input type = “date”>

• < input type = “color”>

• < input type = “range”>

• < input type = “time”>


111
Exemple
<form action=http://uiz.ac.ma/page.php>
<label for="age"> Your age: </label>
<input type="number" min="0" max="99" step="1" value="18" name="age" required>
<label for="birthday"> Your birthday: </label>
<input type="date" name="birthday" > <br>
<label for="wakeup"> You want to wake up at: </label>
<input type="time" name="wakeup" > <br>
<label for="color"> Your favorite color: </label>
<input type="color" name="color" > <br>
<label for="mood"> Your mood: </label>
Bad <input type="range" min="0" max="100" step="5" value="50" name="mood" > Good
<br>
<input type="submit" value="Submit!">
</form>
112
Résultat

113
Grouper des éléments
Objectifs
• Grouper les éléments d’une manière élégante

• On utilisera les éléments suivants :

 Grouper des choses <fieldset>

 Donner un titre <legend>

115
Exemple
<form>
<fieldset>
<legend> Personal Information </legend>
First name? < input type="text" name="firstName"> <br>
Last name? < input type="text" name="lastName"> < br >
</fieldset> < br >
<fieldset>
<legend> Favourite Things </legend>
Favourite cartoon? < input type="text" name="favCartoon"> < br >
Favourite pizza? < input type="text" name="lastName" > < br >
</fieldset> < br >
< input type="submit" value="Send">
</form>
116
Résultat

117
Conclusion

• Introduit le langage HTML

• Les éléments et balises

• Images, vidéos et audios


• Tables
• Liens hypertextes
• Formulaires
• Grouper des éléments

118

Vous aimerez peut-être aussi