Cours HTML

Université Moulay Ismail Année universitaire : 2021/2022
Faculté des Sciences et Techniques Prof Y. FARHAOUI

Département d’Informatique
Errachidia
Programmation Web
Partie I
1
Prof Yousef FARHAOUI 07/03/2022
Plan
• Langage HTML et CSS

• Langage JAVASCRIPT
• Langage PHP
Prof Yousef FARHAOUI 2 07/03/2022

Introduction
Pour naviguer sur le Web, il faut :
1. Une connexion au réseau

 Réseau
• Connexion physique (câbles, sans fils, …) à des machines
• Protocoles de communication
Plusieurs niveaux (couches) :
Internet protocole IP
Transmission Control Protocol TCP
…
Hyper Text Transfer Protocol HTTP
…
• Fournisseur d'accès (Free, …)
2. Un navigateur Web (Browser) graphique ou texte

Introduction
Naviguer: dialoguer avec un serveur web
http://www.pagetest.com/page1.html

Introduction
Uniform Resource Locator (adresse web)
http :// www.pagetest.com / …/répertoire/… / unepage.html
protocole adresse du serveur chemin vers le fichier/ page demandée
Page web affichée par un navigateur

graphique

Introduction
Page web reçue par le navigateur
<html>
<head>
<title>developpement web</title>
</head>
<body>
<h1>Bienvenue au cours Developpement Web</h1>
<img src="img1.jpg"/>
<p>
Ce cours a pour objectif de dresser un tableau complet de l'architecture
du <a href="http://fr.wikipedia.org/wiki/Web">WEB</a> et des technologies
concernées dans la construction d'un site.
</p>
</body>
</html>

Introduction
Page web affichée par un navigateur graphique

La page HTML (source)
<html>
•Langage HTML: ensemble de balises
<head> •élément HTML : balise ouvrante + contenu + balise fermante
<title>developpement web</title>
</head>
<body>
<h1>Bienvenue au cours Developpement Web</h1>
<img src="img1.jpg"/>
<p>
Ce cours a pour objectif de dresser un tableau complet de l'architecture
du <a href="http://fr.wikipedia.org/wiki/Web">WEB</a> et des technologies concernées
dans la construction d'un site.
</p>
</body>
</html>
Prof Yousef FARHAOUI 07/03/2022
8
La page HTML (vue comme un arbre)

La page HTML
 Un fichier de texte en langage HTML (code source)

 HTML langage de balises =⇒ structuration
 Interprétée par le navigateur ( Firefox, Opera, Internet Explorer….)
 Contient des liens vers d'autres ressources (ou autres pages, images, son, vidéo…)
 Ecrite avec un éditeur de texte
 Notepad++, textedit, emacs …
 Pas Word, ni Open Office !!!
 Un fichier contenant du code source HTML se caractérise par l’extension .html.

La page HTML
• Langage HTML: ensemble de balises
• Elément HTML : balise ouvrante + contenu + balise fermante
Exemple:
<h1>Bienvenue au cours Développement Web</h1>
Les attributs d’une balise

<balise att1=valAtt 1 att2=valAtt2 ….> contenu</balise>
Exemple:
<p align="center"> Fabriquer un site web </p>
Balise d'ouverture texte Balise de fermeture
un attribut de l’élément P
affecte la valeur center à l’attribut align
Certains éléments peuvent avoir plusieurs attributs.

Le langage HTML
Balises obligatoires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>

Contenu du document (Texte, images, etc ..)
</body>
</html>

Les attributs de la balise <body> (1/3)
Pour colorer le texte de votre page :
L'attribut est : text="code_de_couleur"
Exemple : <body text="#000000">
Pour colorer le fond d'écran de votre page :

L'attribut est : bgcolor="code_de_couleur"
Exemple : <body bgcolor="#0099CC">
Pour colorer les liens de votre page :

L'attribut est : link="code_de_couleur"
Exemple : <body link="#003366">
Pour colorer les liens actifs de votre page :

L'attribut est : alink="code_de_couleur"
Exemple : <body alink="#00FF00">
Pour colorer les liens visités de votre page :

L'attribut est : vlink="code_de_couleur"
Exemple : <body vlink="#CCFF66">

Pour mettre une image de fond d'écran sur votre page :
L'attribut est : background="votre image "
Exemple : <body background="image.gif">
Texte qui s'affiche en forme d'une "infobulle" :
L'attribut est : title="votre texte"
Exemple : <body title="cours html"> L'expression BODY title="" compte pour la page
entière, c'est-à-dire que le texte inscrit dans sa valeur s'affiche à tout point où l'utilisateur
"dépose" la souris. Cet effet peut être gênant.
site rédigés en plusieurs langues :
L'attribut est : lang="langue"
Exemple : <body lang="fr" dir="ltr"> Pour que les navigateurs lisent le texte correctement,
il peut aussi être nécessaire de se servir de l'attribut dir qui indique, dans quel sens le texte doit
être affiché : de gauche à droite (valeur par défaut en Europe) ou de droite à gauche (hébreu,
japonais, etc.). valeurs "ltr" (left to right : de gauche à droite) et "rtl" (right to left : de droite
à gauche) sont disponibles.
leftmargin et topmargin :
L'attribut est : leftmargin="nbre de pixels"
Exemple : <body leftmargin="0"> Pour définir les marges du texte - toujours pour un
document entier - nous nous servons de l'attribut leftmargin pour la marge à gauche et de
topmargin pour la marge en haut de la page. Les valeurs sont exprimées en pixels.
type d'arrière plan:

L'attribut est : bgproperties="type de background"
Exemple : <body bgproperties="fixed"> Nous avons le choix entre un arrière-plan fixe
(bgproperties="fixed") et un arrière-plan qui défile verticalement, lié aux éléments de la
page (bgproperties="scroll"). Le dernier correspond à la valeur par défaut.
Tous ces attributs peuvent se cumuler :
Exemple :
<body text="code_de_couleur" bgcolor="code_de_couleur"
link="code_de_couleur" alink="code_de_couleur" vlink="code_de_couleur">

Comment formater un texte (1/3)
Comment formater un texte en gras :
<b> définit un texte gras puis se termine par </b>
La règle : <b>Votre Texte en Gras</b>
Exemple : Votre Texte en Gras
Comment formater un texte en italique :

<i> définit un texte en Italique puis se termine par </i>
La règle : <i>Votre Texte en Italique</i>
Exemple : Votre Texte en Italique
Comment formater un texte souligné :

<u> définit un texte souligné puis se termine par </u>
La règle : <u>Votre Texte Souligné</u>
Exemple : Votre Texte Souligné
Comment formater un indice :

<sub> définit un texte en indice puis se termine par </sub>
La règle : Votre Texte <sub>en indice </sub>
Exemple : Votre Texteen indice

Comment formater un exposant :
<sup> définit un texte en exposant puis se termine par </sup>
La règle : Votre Texte <sup>en exposant </sup>
Exemple : Votre Texteen exposant
Comment formater un texte rayé :

<s> définit un texte rayé puis se termine par </s>
La règle : <s>Votre Texte Rayé</s>
Exemple : Votre Texte Rayé
Comment formater un texte en couleur :

<font color="code_de_couleur"> définit un texte en couleur puis se termine par
</font>
La règle : <font color="#0000ff">Votre Texte en Couleur</font>
Exemple : Votre Texte en Couleur
Comment formater une police:

<font face="Police de caractère "> définit une police de caractère et se termine par
</font>
La règle : <font face="arial">Votre Texte police arial </font>
Exemple : Votre Texte en Police arial
Comment faire un retour à la ligne :

<br> définit un retour à la ligne
Exemple : Ce qui nous donne :
Texte de ma première ligne<br> Texte de ma premiére ligne
Texte de ma seconde ligne<br> Texte de ma seconde ligne
Comment formater une ligne:

<hr> définit un paragraphe puis se termine par </hr>
La règle : <hr width="150" size="4" align=center color = #00ff00 >Votre ligne de"
longeur = 150 pixels" "largeur = 4pixels" "Alignée au centre" "couleur verte"
Exemple :
Width et Size peuvent être exprimé en % de la page, la régle est par exemple "width = 10%"

Comment formater un paragraphe
<p> définit un paragraphe puis se termine par </p>

La règle : <p align="right">Votre Paragraphe Aligné </p>
Exemple :
Votre Paragraphe Aligné à Gauche avec left
Votre Paragraphe Aligné au Centre avec Center
Votre Paragraphe Aligné à Droite avec right
Tous ces balises de formats peuvent se cumuler :

Exemple :
<b><i><u><s><font color="blue">Ecrire en gras, en italique, en souligné, rayé et
en couleur</font></s></u></i></b>
Résultat : Ecrire en gras, en italique, en souligné, rayé et en couleur

Comment faire des titres avec la balise <h>
Il existe six styles prédéfinis pour les titres, allant de H1 à H6

Exemple :
<h1>Titre H1</h1>
Titre H1
<h2>Titre H2</h2>
Titre H2
<h3>Titre H3</h3>
Titre H3
<h4>Titre H4</h4>
Titre H4
<h5>Titre H5</h5>
Titre H5
<h6>Titre H6</h6>
Titre H6

Exercice d’application
Ecrire le code source d’une page HTML (‘ page1.html ‘) ayant les caractéristiques
suivantes :
1. Le titre : « un exemple en html »
2. Une ligne d’en-tête centrée, de taille maximale dont le texte sera « Question 5 », et
suivie d’un trait horizontal occupant 50% de la largeur de la page.
3. Un paragraphe contenant le texte suivant :
Ceci est un paragraphe sera grand intérêt, mais qui présente la caractéristique
fondamentale d’être assez long pour dépasser la langueur d’une ligne. Au besoin, on le
rallongera en le recopiant plusieurs fois (copier/coller)!.

Les listes (1/2)
Listes à puces:
• texte 1
• texte 2
code source :
<UL><LI> texte 1 </LI><LI> texte 2 </LI></UL>
remarques utiles :
<UL> peut prendre d'autres arguments, que voici:
<UL TYPE=disc>
<UL TYPE=circle>
<UL TYPE=square>
Ceci change le type de puce devant chaque item.
Listes numérotées :
1. texte 1
2. texte 2
code source :
<OL> <LI> texte 1 </LI><LI> texte 2 </LI> </OL>

Les listes (2/2)
remarques utiles :
<OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numérotation du type i,ii,iii...
<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...
Liste de définition :
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2 L'imbrication de listes est
suite du terme 2 bien sûr possible.
code source :
<DL>
<DT>Terme 1 à définir</DT>
<DD>Définition du terme 1</DD>
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
Ecrire le code source de la page suivante:

L’insertion d'images (1/3)
Le type d'images admises sur internet :

Les images pouvant être affichées sur les pages web sont les images gif, jpg, bmp, et
png. A noter que seul les gif et les jpeg assurent une compatibilité avec les vieux
navigateurs. Quelques conseils pour choisir le format adapté : les images jpeg sont plus
adaptées pour les photos (elles permettent l'affichage de beaucoup plus de couleurs que
les gifs). Les gif sont mieux adaptées pour les dessins de plus elles permettent l'affichage
d'images animées.
La balise <img> et l'attribut src
En HTML, les images sont définies avec le tag <img>.

Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des
attributs.
Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire source.
La valeur de l'attribut src correspond à l'adresse (relative ou absolue) de l'image souhaitée.
L'image sera ainsi placée à l'endroit où vous insérez le tag.

1.- Voici une première image sans attribut particulier :
code source : <CENTER><IMG src=" fste.jpg"></CENTER>
2.- une image avec un bord de taille 3 :

code source : <CENTER><IMG src= " fste.jpg" border=3></CENTER>
3.- Modification de la taille de l'image :
code source : <CENTER><IMG src= " fste.jpg" border=0 width=120
height=120></CENTER>

4.-L'attribut alt :
Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du
survol de celle-ci.
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
code source : <CENTER><IMG src="fste.jpg" border=0 width=120 height=120
alt="Image de la FSTE"></CENTER>
5.- Insérer une image d'arrière plan dans vos pages (attribut background) :
Exemple :
<html>
<body background="background.jpg">
</body>
</html>

Les Liens (1/4)
Une des fonctionnalités les plus importantes du langage HTML est la possibilité de créer des
liens vers d'autres documents.
Ces documents peuvent être des documents HTML, des images, du son, des films, et des
serveurs FTP.
Le navigateur Web présente ce lien sous forme de mots soulignés ou d'image encadrée que
l'on appelle lien.
Ce lien est soit un fichier local, soit une URL
Syntaxe de base :
<A HREF="URL ou Adresse">texte ou image</A>
Il existe quatre types principaux de liens :
Les liens vers un document complet distant
Syntaxe : <A HREF="URL"> lien (texte ou image)</A>
Exemple : pour accéder à la page d'acceuil de la FSTE
<A HREF=" http://www.fste.ac.ma/Accueil.htm"> Le site de la FSTE</A>

Les Liens (2/4)
Les liens vers un document complet local

Syntaxe : <A HREF=nom_de_fichier_local"> lien</A>
Vous pouvez utiliser le chemin relatif par rapport à la page courante ou le chemin
par rapport à la racine du site.
exemple : pour accéder à une page locale (sur le même site)
<A HREF="../imageFSTE/images.html"> Cliquer ICI </A>
Les liens vers une partie d'un document local

Syntaxe :
<A NAME="etiquette"> nom </A>
Pour définir un point de branchement
<A HREF=nom_de_fichier_local#etiquette"> ancre </A>
Pour faire le lien.
Exemple : pour accéder au paragraphe 3 du document local
<A NAME="[3]"> Paragraphe 3 : Les liens </A> <A
HREF="exemple_notes.html#[3]"> Note [3]</A>

Les Liens (3/4)
Les liens vers une partie du document courant

Syntaxe :
<A NAME="etiquette"> nom </A>
pour définir un point de branchement (ce n'est pas un lien, rien n'apparaît visuellement)
<A HREF="#etiquette"> ancre </A>
pour faire le lien sur le point de branchement.
La cible d'un lien

L'attribut TARGET permet d'indiquer dans quelle fenêtre va s'ouvrir le document
correspondant au lien.
Les valeurs prédéfinies par TARGET sont :
_blank : affichage dans une nouvelle fenêtre de navigateur
_self : affichage dans la même fenêtre (c'est la valeur par défaut)
Il existe d'autres valeurs que l'on verra en étudiant les frames.
Exemple : ouverture de la page d'accueil de la FSTE dans une nouvelle fenêtre :
<A HREF=" http://www.fste.ac.ma/Accueil.htm" TARGET=_blank> Le site </A>

Les Liens (4/4)
Adresser un message électronique

<A HREF="MAILTO:adresse_correspondant"> ancre </A>
ou
<A HREF="MAILTO:adresse_correspondant?Subject=Objet_du_message"> ancre </A>
Exemples :
Pour adresser un message électronique
<A HREF="MAILTO:[email protected]"> Ecrivez-moi !!</A>
Pour adresser un message électronique avec un sujet prédéfini
<A HREF="MAILTO:[email protected]?Subject=Coucou"> Ecrivez-moi encore !!</A>
Pour adresser un message électronique avec un destinataire secondaire ,
un destinataire secondaire "cachée" ou "officieux" et un sujet prédéfini
<A HREF="MAILTO:[email protected][email protected]&[email protected]">
Ecrivez-nous. Nous sommes plusieurs !!</A>

Créez une page html appelée lien1, avec pour titre page1, contenant le texte : "voici la page
correspondant au premier lien". Enregistrez cette page dans le dossier "Exemple lien".
Créez une deuxième page html appelée lien2, avec pour titre page2, contenant le texte : "voici
la page correspondant au deuxième lien". Enregistrez cette page dans le dossier "pages html".
Dans la page Amodifier, ajoutez les liens suivants :
- sur l'ancre correspondant au texte "lien1", faites un lien vers la page lien1. Cette page devra
apparaître dans la même fenêtre
- sur l'ancre correspondant à la deuxième photo, faites un lien vers la page lien2. Cette page
devra apparaître dans une nouvelle fenêtre.
Dans la page liens1, ajouter à la fin une ancre pour revenir à la page Amodifier.
Faites en sorte que de cliquer sur l'image de l'arobase permette de vous écrire à votre adresse
mail.

Tableaux (1/4)
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec
des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des
objets. Ces tables peuvent avoir un fond et des bords visibles ou non.
Insérer un tableau
<TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemple :
<CENTER> Bienvenue
<TABLE WIDTH=50% border="1">
<TR>
<TD><IMG SRC="fste.gif"></TD>
Ce tableau occupe 50% de la largeur totale de
<TD>Bienvenue</TD>
la page sur une ligne avec dans la première
</TR>
cellule l'image et dans la seconde le texte, le
</TABLE>
tout étant centré.
</CENTER>
Tableaux (2/4)
Mise en forme d'un tableau :
A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre
plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères,
celle du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les
épaisseurs de bordure, etc...
<TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%“

bordercolor="#000080">
<tr>
<td width="50%" align="left" bgcolor="#008080" bordercolor="#FF0000"> </td>
<td width="50%" align="left" background="film.gif"> </td>
</tr>
</table>
<table bgcolor="votre couleur"> : mettre un fond de couleur.
<table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en pixels.
<table border="1"> Taille des bords (0=pas de bords).
bordercolor="votre couleur" couleur des bordures.
cellpadding="2" Marge intérieure des cellules.
cellspacing="3" Espacement entre les cellules.
Tableaux (3/4)
Fusionner les lignes et colonnes
Les lignes et colonnes peuvent êtres fusionnées, afin d'obtenir des cellules plus ou moins
grandes et accueillir des données. Ce fusionnement est réalisé avec l'attribut :
rowspan et colspan.
- Pour fusionner 2 cellules adjacentes sur une ligne, COLSPAN est requis (pour th ou td)
- Pour fusionner 2 cellules adjacentes sur une colonne, ROWSPAN est requis (pour th ou
td)

Tableaux (4/4)
Exemple:
<table border=1>
<tr>
<td>Cellule 1</td>
<td colspan=2>2 cellules fusionnées (sur la même ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnées (sur la même colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>


Le formulaire HTML
• Le formulaire HTML :
– Un « élément-bloc » encadrant des champs d’entrée
de donnée :
...
<form name="formulaire" method="POST"
action="destinataire.php">
... Champs de saisie ...
…..
</form>
...

Les éléments de formulaire
– Champ de texte :
<input type="text" name="nom" value="valeur initiale">
Exemple:
<HTML>
<FORM METHOD="POST" ACTION="">
<p>
<LI>NOM: <input type="text" name="nom" size=30>
<LI>ADRESSE: <input type="text"name="adresse" size=30>
<LI>VILLE<input type="text"
name="Ville" size=30>
</form>
</BODY>
</HTML>

Champ mot de passe :
<input type="password" name="pw" value= " " >

Case à cocher :
<input type="checkbox" name="nom" value="valeur_envoyee"
[CHECKED] >

Exemple :
Loisir :
Sport <input name="Loisir" TYPE=checkbox
VALUE="Sport" checked><BR>
Music <input name="Loisir" TYPE=checkbox
VALUE=" Music" checked><BR>
Voyage <input name="Loisir" TYPE=checkbox
VALUE="Voyage"><BR>
Lecture <input name="Loisir" TYPE=checkbox
VALUE="Lecture" checked ><BR>

Boutons radio :
<input type="radio" name="nom_de_groupe"
value="valeur_envoyee" [CHECKED] >

Liste de sélection :
<select name="nom" [MULTIPLE] >
<option value="code">libellé</option>
<option value="code" [SELECTED]>libellé</option>
</select>

Zones de texte :
<textarea name="nom" cols="30" rows="8">Contenu
initial</textarea>

Champ caché :
<input type="hidden" name="nom" value="valeur">
Bouton d'envoi
<input type="submit" value="Envoyer" >

Bouton d'annulation ou «reset»
Bouton simple

Exercice d’application:
Remarque
Champ de fonction :
Enseignant, Etudiant, Ingénieur,
Retraité, Autre.

Formulaires HTML5
• De nombreux nouveaux types de champs <input> ont été

introduits
• color, date, datetime, datetime-local, email, month, number,

range, search, tel, time, url, week
• Nous allons voir des exemples de chacun de ces champs

Formulaires HTML5
Le champ <input type=color>
• Choisissez une couleur: <input type="color" name="color1" />

• Supporté aujourd’hui uniquement dans Opera

Formulaires HTML5
<input type=date>
• Anniversaire: <input type="date" name="bday" />
• Marche bien dans Opera, support partiel Chrome, Safari, adapte le clavier sur mobiles

Formulaires HTML5
<input type=datetime-local>
• Permet de choisir la date et l’heure

• Anniversaire : <input type="datetime-local“ name="bdaytime" />

La Balise MARQUEE
Elément permettant de créer des zones de défilement de texte dans un document HTML
La syntaxe est du type <MARQUEE Attributs > ... </MARQUEE>

par exemple :
<marquee bgcolor="yellow" width="20%" direction="right" loop="0">Votre
message</marquee>

Attributs spécifiques
Align= Permet d’aligner un texte par rapport à une marque :
align="top" Texte aligné en haut,
align="middle" Texte aligné au centre,
align="bottom" Texte aligné en bas
Behaviour= Permet de définir le comportement du texte dans une marque :
behavior="scroll" Passage du texte,
behavior="slide" Texte arrive et stop,
behavior="alternate" Texte gauche/droite
Bgcolor= Spécifie la couleur de fond d’une marque :
bgcolor="#rrggbb" Couleur de fond du Marquee
Direction= Indique la direction de défilement du texte :
direction="right" Texte arrive par la droite,
direction="left" Texte arrive par la gauche
Height= Permet de définir la hauteur (en pixels) d’une marque :
height="nombre//pourcentage" Hauteur de Marquee
Hspace= Spécifie l’espace horizontal (en pixels) entre le texte et le bord gauche ou droit de la marque :
hspace="nombre"
Vspace= Spécifie l’espace vertical (en pixels) entre le texte et le bord supérieur ou inférieur de la marque :
vspace="nombre"
Loop= Introduit une boucle qui permet de repasser le texte dans la marque :
loop="nombre//infinie" Nombre de boucle, x : nombre de défilements, -1 : pour 1 seule, Infinite : pour
continuel
Scrolldelay= Définit un délai entre deux apparitions du texte :
scrolldeley="nombre" Délais en millisecondes
Scrollamount= Permet de paramétrer (en pixels) l’intervalle entre deux apparitions du texte, minimum 1 :
scrollamount="nombre" Vitesse
Width= Définit la largeur (en pixels) du Marquee :
width="nombre//pourcentage"

Moteurs de recherche / indexation
Les moteurs de recherche ont ce qu'on appelle des "robots" qui passent sur toutes les pages
HTML connues pour les indexer.
On a la possibilité de faciliter le travail de ces robots ou de leur interdire d'indexer certaines

pages.
Ces balises sont des balises META qui se place dans le "header" du document.
Pour faciliter l'indexation:

Bien penser à mettre un titre explicite, c'est celui-ci qui apparaîtra sur l'index d'un moteur de
recherche
Spécifier des mots-clés (séparés par une virgule) à l'aide du tag:
<META NAME="KEYWORDS" CONTENT="informatique, langage c, c++, java">
Spécifier l'auteur des pages avec:
<META NAME="AUTHOR" CONTENT="abcde">
Écrire une petite description de que l'on trouvera dans cette page avec :
<META NAME="DESCRIPTION" CONTENT="cours de la programmation web">

Moteurs de recherche / indexation
Pour empêcher les robots d'indexer vos documents:

<META NAME="ROBOTS" CONTENT="NONE">
Aucune indexation de cette page, ni même des hyperliens qu'elle contient
<META NAME="ROBOTS" CONTENT="NOFOLLOW">
Indexation de cette page mais pas des hyperliens
<META NAME="ROBOTS" CONTENT="NOINDEX">
Indexation des hyperliens uniquement, pas de la page elle-même

Liens absolus et relatifs
07/03/2022 Prof Yousef FARHAOUI 57

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Cours 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

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Université Moulay Ismail Année universitaire : 2021/2022

Faculté des Sciences et Techniques Prof Y. FARHAOUI

• Langage HTML et CSS

Prof Yousef FARHAOUI 2 07/03/2022

1. Une connexion au réseau

Prof Yousef FARHAOUI 3 07/03/2022

Prof Yousef FARHAOUI 4 07/03/2022

http :// www.pagetest.com / …/répertoire/… / unepage.html

protocole adresse du serveur chemin vers le fichier/ page demandée

Page web affichée par un navigateur

Prof Yousef FARHAOUI 5 07/03/2022

Prof Yousef FARHAOUI 6 07/03/2022

Prof Yousef FARHAOUI 7 07/03/2022

Prof Yousef FARHAOUI 9 07/03/2022

 Un fichier de texte en langage HTML (code source)

 Un fichier contenant du code source HTML se caractérise par l’extension .html.

Prof Yousef FARHAOUI 10 07/03/2022

Les attributs d’une balise

Balise d'ouverture texte Balise de fermeture

Certains éléments peuvent avoir plusieurs attributs.

Prof Yousef FARHAOUI 11 07/03/2022

Prof Yousef FARHAOUI 12 07/03/2022

Pour colorer le fond d'écran de votre page :

Pour colorer les liens de votre page :

Pour colorer les liens actifs de votre page :

Pour colorer les liens visités de votre page :

Prof Yousef FARHAOUI 13 07/03/2022

type d'arrière plan:

Prof Yousef FARHAOUI 15 07/03/2022

Comment formater un texte en italique :

Comment formater un texte souligné :

Comment formater un indice :

Prof Yousef FARHAOUI 16 07/03/2022

Comment formater un texte rayé :

Comment formater un texte en couleur :

Comment formater une police:

Comment faire un retour à la ligne :

Comment formater une ligne:

Prof Yousef FARHAOUI 18 07/03/2022

<p> définit un paragraphe puis se termine par </p>

Tous ces balises de formats peuvent se cumuler :

Prof Yousef FARHAOUI 19 07/03/2022

Il existe six styles prédéfinis pour les titres, allant de H1 à H6

Prof Yousef FARHAOUI 20 07/03/2022

Prof Yousef FARHAOUI 21 07/03/2022

Prof Yousef FARHAOUI 22 07/03/2022

Prof Yousef FARHAOUI 24 07/03/2022

Le type d'images admises sur internet :

La balise <img> et l'attribut src

En HTML, les images sont définies avec le tag <img>.

Prof Yousef FARHAOUI 25 07/03/2022

1.- Voici une première image sans attribut particulier :

code source : <CENTER><IMG src=" fste.jpg"></CENTER>

2.- une image avec un bord de taille 3 :

Prof Yousef FARHAOUI 26 07/03/2022

Prof Yousef FARHAOUI 27 07/03/2022

Prof Yousef FARHAOUI 28 07/03/2022

Les liens vers un document complet local

Les liens vers une partie d'un document local