Page 1 à 13
Université Abdelhamid Mehri – Constantine 2 Cellule e-learning
2017-2018. Semestre 2
Informatique – Niveau 3
Informatique avancée
– Cours 7 –
Pages Web avec MS Expression Web 4 (3/4)
Langage HTML et modification des sources
Staff pédagogique
Nom Grade Faculté/Institut Adresse e-mail
Bouaziz Amira MCB Sciences économiques [email protected]
Etudiants concernés
Faculté/Institut Département Année Spécialité
Psychologie Psychologie Licence 2 Tronc commun
Sciences économiques Tous les départements Licence 2 Toutes les spécialités
Objectifs du cours 7
Connaître les bases en langages HTML Modifier les sources d’une page Web
Page 2 à 13 Comme nous avons appris dans les cours précédents, un site web est un ensemble de pages web (ou d’éventuelles autres ressources : comme une base de données englobant l’ensemble des visiteurs de ce site).
Un développeur de site web est prié de passer par trois étapes d’études afin de finaliser site : 1) Recueillir les informations du contenu à afficher
2) Réfléchir et décider comment organiser le contenu à afficher (design, dispositions, divisions, …) 3) Entamer le processus de développement en utilisant les outils appropriés :
Il existe quatre aspects différents en développement des sites :
1) Aspect structure : à définir le fond de la page web en prenant en compte le contenu et la logique des éléments qui vont être affichés
En utilisant le langage HTML (et le fichier créé aura une extension de (.html) ou (.htm))
2) Aspect présentation : à définir la mise en page : forme des éléments à afficher (couleurs et police) et la disposition (position, marge et bordures) de ceux-ci
En utilisant le langage CSS (et le fichier créé aura une extension de (.css))
3) Aspect contenu : englobe l’ensemble des textes(paragraphes), images, liens, fichiers Pdf, … 4) Aspect action : à définir la fonction du site ; que fait ce site ?
En utilisant le langage JAVASCRIPT par exemple (et le fichier créé aura une extension de (.js) (à noter qu’il existe d’autres outils de développement dans ce sens).
Ces aspects coopèrent pour construire et maintenir idéalement un site web où le contenu est totalement séparé à la fois de l’apparence et du rôle qu’offre ce site. Toutefois, les pages web du site construit sont parfois différemment affichées sous différents navigateurs et donc il est nécessaire d’apercevoir le site développé sous de multiples navigateurs (Internet Explorer, Firefox, Google Chrome, Safari) pour examiner la bonne forme de l’ensemble des pages constituantes de ce site en design et développement. En outre, afin de minimiser ce genre de problèmes des aperçus différents de contenu, il importe d’apprendre le langage de structuration de contenu et pourquoi pas le maitriser pour résoudre ces interrogations.
Ce cours adopte essentiellement et généralement la présentation des bases de langage de structuration des pages HTML, et la façon dont il agit afin de modifier les sources d’une page web.
1. Bases en Langage HTML 1.1. Définition
Apparu en 1992 (par Tim Burners-Lee) comme un outil de structuration des contenus principalement textuels, HTML (HyperText Markup Language) est un langage de balisage et dit aussi de marquage. Il permet la structuration du contenu des pages web dans différents éléments (développé par nécessité de créer une version allégée du premier -trop complexe- langage de balisage SGML (Standard Generalized Markup Language) créé pour structurer des contenus très divers).
Depuis son apparition, plusieurs versions ont été développées telles que: HTML, HTML4, HTML5.
1.2. Les balises
Comme HTML est un langage de balisage, nous devons savoir et expliquer à quoi servent les balises dedans un code HTML d’une page web.
Les balises sont des codes que nous trouvons au sein d’un code HTML d’une page web et qui servent étant des instructions à l’ordinateur pour que le navigateur comprend ce qu’il doit afficher. Les balises ne s’affichent pas sur les pages web au navigateur. De plus, elles sont facilement repérées grâce aux symboles « < » de l’ouverture et « > » de fermeture qui entourent les éléments :
<BALISE> ... </BALISE>
Page 3 à 13 Les balises indiquent le type de l’élément à afficher, et chaque élément qu’il s’agisse du texte, d’image, … doit être enfermé dans une balise et possédant un nom déterminé pour une garantir une meilleure structuration. Chaque élément donc est enfermé entre une balise ouvrante <balise ouvrante>, et une balise fermante </balise fermante> :
Voilà un élément enfermé entre deux balises : <balise paire ouvrante> élément </balise paire fermante>, par exemple :
Ce type de balise qui enferme certains éléments entre ces deux balises ouvrantes et fermantes est appelé des balises paires. Les balises orphelines, par opposition, enferme le type d’élément à insérer précédé par un
« / » entre les deux symboles de l’ouverture et de fermeture. Ces balises servent à insérer un élément à un endroit précis (par exemple une image) et donc ce n’est pas nécessaire de déterminer son début et sa fin. Ce type de balise demande à l’ordinateur d’« insérer tel élément à tel endroit » :
Les balises peuvent être accompagnées d’attributs de l’élément à insérer :
Ces attributs ont pour objectif de donner des indications supplémentaires concernant l’élément à afficher : nom, position,… par exemple une balise qui sert à ajouter une image en carré avec les dimensions ; hauteur à 100, et largeur à 100 :
1.3. Structure d’un document HTML
Toute page web se compose de deux sections: un entête et un corps. Le code correspondant à un fichier HTML équivalent est structuré comme ceci :
1) La balise < !DOCTYPE html >: indique qu’il s’agit d’une page web HTML (indispensable).
2) La balise principale du code <HTML></HTML> : englobe tout le contenu du document HTML.
3) La balise de l’entête <HEAD></HEAD> : informe à propos de la page web : titre de la page, encodage,
… (partie courte). La section entête a pour objectif de renseigner et de faire instruire le navigateur à propos de la page web qu’il va afficher.
<TITLE> Titre </TITLE>
<IMG/>
<ELEMENT attribut1="a" attribut2="b" attribut3="c" > ... </ELEMENT>
<IMG height="100" width="100"/>
<!DOCTYPE html>
<HTML>
<HEAD> <!-- section entête -->
<META CHARSET="utf-8"/>
<TITLE> Titre </TITLE>
</HEAD>
<BODY> <!-- section corps -->
...insérer le reste du code ici </BODY>
</HTML>
Code correspondant avec Microsoft Expression Web 4
Page 4 à 13 a) La balise <META CHARSET="utf-8"/> : les balises <META/> donnent généralement des
informations à propos de la page web. Particulièrement cette balise est utilisée ici pour indiquer l’encodage utilisé dans le fichier ".html" (L’encodage détermine l’affichage des caractères spéciaux).
Dans cet exemple, cette méthode d’encodage CHARSET="utf-8" permet l’affichage de tous les symboles de toutes les langues existantes sans problèmes.
b) La balise <TITLE > </TITLE >: indique le titre de la page web afin de décrire ce que cette dernière contient. Ce titre s’affiche au navigateur lors de l’ouverture de la page web.
4) La balise du corps <BODY></BODY> : La section Corps/ contenu contient tout ce que nous écrirons à afficher dans la page web (partie majeure du code).
5) La balise commentaire <!-- insérer votre commentaire ici --> : insère des commentaires qui servent de mémo indicatrices au sein du code HTML et ne s’affichent pas à la page web. Peu importe son emplacement, cette balise n’affecte ni le code ni la page.
Par conséquent, la page web équivalente à ce code est la suivante sous de différents navigateurs :
<TITLE> Titre </TITLE>
Sous Google Chrome Sous Mozilla Firefox Sous Internet Explorer Il importe de signaler que comme dans tout langage de balisage, les balises en HTML s’ouvrent et se ferment dans un ordre à respecter ; où elles se ferment dans le sens inverse de leur ouverture :
Nous écrivons <HTML><BODY></BODY></HTML >
✓
Nous n’écrivons pas <HTML><BODY></HTML></BODY >
Page 5 à 13
1.4. Vocabulaire HTML
Nous distinguons sous HTML deux types de balises : des balises structurelles et un ensemble de balises sémantiques. Le tableau suivant résume les balises les plus communes en HTML et l’ensemble de leurs descriptions :
Balise sémantiques Description
<P> Indique un paragraphe de texte
<H1> Indique un titre dans la page, et possède des degrés entre 1 et 6 pour spécifier le niveau du titre à insérer, par exemple : <H1>, <H2>, <H4>, …
<A> Insère un lien
<UL> Indique une liste de puce non ordonnée
<OL> Indique une liste ordonnée par des nombres
<LI> Indique un élément de liste soit ordonnée ou non ordonnée
<IMG> Insère une image
<TABLE> Insère un tableau
<TR> Insère une ligne dans un tableau
<TH> Insère un titre au tableau
<TD> Insère une cellule dans un tableau
<STRONG> Marque l’importance d’un texte, en gras par défault
<EM> Marque d’accentuation d’un texte, en italique par défault
Balises structurelles Description
<HTML> Indique le début d’un document HTML
<HEAD> Indique le début de la section entête d’un document HTML
<BODY> Indique le début de la section corps d’un document HTML
<DIV> Indique une grande division de contenu dans un document HTML
<SPAN> Indique une petite division de contenu dans un autre élément HTML
Autres balises Description
<TITLE> Indique le titre de la page HTML
<LINK> Indique un lien vers une ressource externe comme un fichier CSS
<BR/> Saut de ligne
Page 6 à 13 Le tableau qui suit liste les attributs HTML les plus essentiels et les plus communs, et l’ensemble des éléments auxquels ils s’appliquent :
Attribut Description S’applique à
id Donne une identification de ciblage de l’élément Toutes les balises
class Applique une classe de style CSS pour un élément Toutes les balises
name Nom d’une image ou un lien <IMG> et <A>
alt Donne un texte descriptif alternatif pour une image ‘255 caractères maximum’
<IMG>
longdesc Donne un texte descriptif altérnatif pour une image ‘longueur indéfinie’
<IMG>
href Référence d’un lien d’une cible <A> et <LINK>
rowspan Nombre de lignes couvertes par une cellule <TD> et <TH>
colspan Nombre de colonnes couvertes par une cellule <TD> et <TH>
scope … de colonnes représentées par une cellule entête <TH>
media Type de média auquel s’applique une feuille de style CSS <LINK>
type Type de feuille de style qu’un lien cible <LINK>
rel Relation entre un document HTML et un document lié telle que une feuille de style
<LINK>
target Désigne comment un lien doit s’ouvrir <A>
2. Modification des sources d’une page web 2.1. Paragraphes
HTML propose la balise <P> pour délimiter les paragraphes; où <P> signifie le début du paragraphe et </P>
signifie la fin du paragraphe. Cette balise s’insère au sein de la section corps <BODY> </BODY>
Étant donné le paragraphe suivant :
Ceci est mon premier paragraphe. J’apprends comment insérer un paragraphe avec deux méthodes : depuis la vue « Code HTML » et depuis la vue « Conception » sous MS Expression Web 4. Depuis la vue « Code HTML », je dois insérer ce paragraphe délimité par les balises <P> et </P> n’importe où je veux l’insérer au sein de la section <BODY> </BODY>. Depuis la vue « Conception », je dois me mettre sur cette dernière et ajouter ce paragraphe dans le cadre destiné au paragraphe comme le montre la figure adéquate.
Page 7 à 13 2.1.1. Vue « Code HTML »
2.1.2. Vue « Conception »
Ce code affiche la page suivante :
Il est possible de faire un saut de ligne en utilisant la balise orpheline <BR/> qui prend place obligatoirement à l'intérieur du paragraphe et qui indique que nous devons aller à ligne. La balise a pour objectif de mieux organiser les paragraphes rédigés. (<BR/> en HTML est l’équivalent de la touche Entrée).
Exemple :
<P> Ceci est mon premier paragraphe...<BR/> Depuis la vue « Code HTML », je dois insérer ce paragraphe délimité par les balises ... Depuis ... </P>
Page 8 à 13 Il est possible d’ajouter des titres aux paragraphes rédigés si la page web est relativement étoffée par que du texte et cela gêne les visiteurs de la page web et rend difficile de repérer toute sorte de paragraphes.
Exemple :
2.2. Listes
HTML propose l’utilisation des listes pour mieux structurer le contenu des pages web et bien ordonner les informations à afficher. Il existe deux types de listes sur HTML ; les listes à puces (non ordonnées) et celles ordonnées.
2.2.1. Listes à puces
Ce sont créés à l’aide de la balise <UL></UL> où chaque élément doit être écrit entre les deux balises
<LI></LI> obligatoirement.
<P> Ceci est mon premier paragraphe. <BR/> J’apprends comment insérer un paragraphe avec deux méthodes : depuis la vue « Code HTML » et depuis la vue « Conception » sous Microsoft Expression Web4. <H4> Depuis la vue « Code HTML » </H4> Je dois insérer ce paragraphe délimité par les balises ... <H4> Depuis la vue « Conception » </H4> Je dois me mettre sur cette dernière et ... </P>.
Page 9 à 13 Exemple :
2.2.2. Listes ordonnées
Ce sont créés à l’aide de la balise <OL></OL> où chaque élément doit être écrit entre les deux balises
<LI></LI> obligatoirement.
Exemple :
<UL> Ceci est mon premier paragraphe. <BR/> J’apprends comment insérer un paragraphe avec deux méthodes : depuis la vue « Code HTML » et depuis la vue « Conception » sous Microsoft Expression Web4.
<LI> Depuis la vue « Code HTML » Je dois insérer ce paragraphe délimité par les balises ...</LI>
<LI> Depuis la vue « Conception» Je dois me mettre sur cette dernière et ... </LI>
</UL>
<OL> Ceci est mon premier paragraphe. <BR/> J’apprends comment insérer un paragraphe avec deux méthodes : depuis la vue « Code HTML » et depuis la vue « Conception » sous Microsoft Expression Web4.
<LI> Depuis la vue « Code HTML » Je dois insérer ce paragraphe délimité par les balises ... </LI>
<LI> Depuis la vue « Conception» Je dois me mettre sur cette dernière et ... </LI>
</OL>
Page 10 à 13
2.3. Images
HTML propose l’ajout des images (et des figures en général) dans les pages web afin de les enrichir. Nous utilisons donc les balises <FIGURE><IMG/></FIGURE>. La balise <IMG/> dispose quelques attributs à titre descriptif de l’image à insérer, notamment « src » pour récupérer l’endroit de l’image et « alt » pour décrire l’image en texte.
Il est possible d’accompagner l’image à insérer par une légende, et la balise <FIGCAPTION>
</FIGCAPTION> assure cette fonctionnalité à condition qu’elle doit s’insérer à l’intérieur de la balise
<FIGURE> </FIGURE>.
Exemple :
<P> Ceci est ma première image. </P>
<FIGURE>
<IMG src="images/nom_image.png" alt="première_image" >
<FIGCAPTION> Ceci est une légende </FIGCAPTION>
</FIGURE>
Page 11 à 13
2.4. Liens
Les liens servent à connecter les sites web et les pages au sein de ceux-ci. La balise utilisée pour ces fins est
<A></A>. Toutefois, cette balise nécessite un attribut dit « href » pour indiquer vers quelle page le lien va conduire.
2.4.1. Un lien qui s’ouvre dans la même fenêtre Exemple 1 (vers un autre site) :
Exemple 2 (vers une autre page html dans le même site) :
2.4.2. Un lien ouvrant une nouvelle fenêtre Exemple :
2.5. Tableaux
HTML propose l’ajout des tableaux au sein des pages web en utilisant l’ensemble des balises
<TABLE></TABLE> pour insérer un tableau <TR></TR>, pour y ajouter des lignes, et <TD></TD> pour définir les cellules. La gestion des tableaux est illustrée dans l’exemple suivant :
Exemple :
<P> Ce lien vous dirige vers mon université
<A href="http://www.univ-constantine2.dz"> Université de Constantine 2 </A>
</P>
<P> Ce lien vous dirige vers la page des coordonnées <A href="page_coordonnées.html"> notre web master</A>
</P>
<P> Ce lien vous dirige vers notre platforme
<A href="http://elearning.univ-constantine2.dz" target="_blank"> Elearning </A>
</P>
Page 12 à 13
3. Travail pratique (TP)
Étant donné un site web simple d’enseignement publique à distance et se composant de 4 pages web (4 fichiers HTML) :
<P> Ceux-ci sont les niveaux du cours Informatique que propose notre
apprentissage Elearning :
<TABLE>
<TR>
<TD> Informatique 1</TD>
<TD> Informatique 2</TD>
<TD> Informatique 3 </TD>
</TR>
<TR>
<TD> <IMG src="images/info1.png"> </TD>
<TD> <IMG src="images/info2.png"> </TD>
<TD> <IMG src="images/info3.png"> </TD>
</TR>
<TR>
<TD> première année « Tronc Commun » </TD>
<TD> toute spécialité deuxième année « S3 » </TD>
<TD> toute spécialité deuxième année « S4 » </TD>
</TR>
</TABLE>
</P>
Notes
En HTML, le minuscule/ majuscule pour les balises n’affectent pas le code.
L’espace avant et après les balises n’a pas d’impact en affichage.
Il est possible d’alimenter les balises par d’autres attributs de structuration de contenu : paragraphes, images, tableaux, liens, ...
Page 13 à 13 index.html : la page d’accueil de ce site
about.html : la page qui informe du site et sa fonction
contact.html : la page contenant les coordonnées du staff de site
cours.html : la page contenant une liste de cours téléchargeables proposés pour des fins d’enseignement à distance
1) Créer l’ensemble de ces fichiers sous MS Expression Web 4 comme vous avez appris aux cours précédents ?
2) Depuis la partie « Code », écrire en détails le fichier index.html équivalent à l’affichage suivant :
(La solution de ce TP sera donnée dans la prochaine semaine)
Références du cours
Les étudiants peuvent consulter ces références pour approfondir leurs connaissances dans ce cours : Engels, J., (2012), HTML5 et CSS3 Cours et exercices corrigés, Paris : Eyrolles.
Sites Web
https://www.youtube.com/playlist?list=PL77A2C1E3078480DA http://www.timothytemplates.com/tutorials.html
http://www.iciapprendreici.com/index.php/html5-et-css3-cours-et-exercices-corriges/download/2- livres-informatiques/314-html5-et-css3-cours-et-exercices-corriga-s-2012-eyrolles-jean-engels
