0122 Crswebhtml

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 6

Avant de concevoir un site internet dans son ensemble, il faut apprendre à rédiger/composer une

page au format .html. Le Html, HyperText Markup Language est le langage dans lequel ces pages
sont rédigées. On met ensuite ces pages en forme (en couleur, avec des encadrements, etc...) à l'aide
d'un autre langage : le Css, Cascading Style Sheet.

Logiciels indispensables
Pour concevoir des pages Html et des feuilles Css, on utilisera deux types de logiciels :

L'éditeur de texte avec coloration syntaxique Notepad++.

Le navigateur internet Firefox.

Qu'est-ce qu'un navigateur internet ?


Un navigateur est un logiciel qui permet d'afficher des pages web.
Pour cela, il interprète de nombreux langages informatiques parmi lesquels :

le langage Html qui décrit le contenu d'une page web ;


le langage Css qui décrit la mise en forme d'une page web.
L'essentiel de cette séquence en SNT consistera à découvrir quelques éléments de ces langages.

Parmi tous les navigateurs disponibles (notamment sur «smartphone»), on peut citer :

Firefox, qui sera le navigateur à utiliser obligatoirement cette année.

Opera qui est un autre bon logiciel de navigation.

Chrome, un bon navigateur mais qui vous surveille à votre insu.

Microsoft Edge, un navigateur déconseillé car il pose régulièrement problème de non respect des
standards du web.

Document HTML
Un fichier .html a une structure d'éléments emboîtés appelés balises.

• Ces balises ont des noms différents selon les informations qu'elles définissent/délimitent.
• Une balise nommée <balise> marque le début d'une information. Cette partie doit être
fermée avec </balise> (notez le slash « / » dans la balise fermante).
• Les balises s'imbriquent dans l'ordre, comme les parenthèses (ou les crochets) en
mathématiques : <a> ... <b> ... </b> ... </a>
• Certaines balises comportent des attributs qui permettent de préciser davantage le contenu
des balises. La valeur de chaque attribut est à indiquer entre guillemets :
<balise attribut = "valeur">
Un navigateur internet est très tolérant. il n'y a pas besoin de balises pour afficher de l'information à
l'écran. Cependant ce sont ces balises qui permettront de mettre en forme (en couleur par exemple)
les parties de texte qui nous semblent les plus importantes.
Structure minimale d'un fichier .html
Toutes les pages Html doivent donc avoir la structure minimale présentée ci-dessous. Les
indentations (décalages vers la droite ou tabulations) ainsi que les commentaires ne sont pas
obligatoires mais ils permettent de mieux se repérer dans le fichier source.

Le fichier écrit ci-dessus donnera, dans un navigateur, l'affichage :

Utilisation de balises simples :


Créer un document .html minimal et essayer d’afficher dans un navigateur le texte suivant en
respectant la mise en page.

on pourra utiliser les balises :


<strong>...</strong> ;
<em>...</em> ;
<code>...</code> ;
<sup>...</sup>.

Insérer une image


Pour afficher une image sur une page web, il faut créer un lien hypertexte entre le fichier .html et le
fichier image. Cela implique d'indiquer au navigateur quelle est l'adresse de l'image. Cette
«adresse» a pour vrai nom URL : «Uniform Resource Locator».
La syntaxe de la balise image est :
<img src="URL_de_l'image" alt="Texte_affiché_si_l'image_n'est_pas_trouvée"/>
Lorsque l'image se trouve dans le même dossier que le fichier .html : l'URL est simplement le nom
du fichier image (avec l'extension).

Valider son code


Puisque le navigateur (et l'éditeur de texte Notepad++) ne signale pas les erreurs de code, on a
besoin d'un logiciel tiers pour faire ce travail et indiquer les erreurs à corriger. Cet outil est proposé
sur le site du W3C, l'organisme qui valide les évolutions du langage Html à cette adresse :
https://validator.w3.org/#validate_by_upload.
https://validator.w3.org/#validate_by_input.

Mise en forme :
Le Css (Cascading Style Sheets) est le langage de mise en forme et de mise en page des
pages .html.
Mise en forme : souligner du texte, le mettre en gras, en rouge, encadrer...
Mise en page : disposer les blocs les uns par rapport aux autres dans la page.
Le code Css s'écrit principalement dans un fichier (feuille) .css. C'est un fichier écrit avec un éditeur
de texte auquel les pages .html accèdent grâce à un lien hypertexte déclaré entre les balises <head>
(ligne 3 ci-dessous) :
Dans une feuille .css, on écrit des règles de style. Pour cela :

• on débute par un sélecteur qui précise à quelle balise Html les règles de style s'appliquent ;
• on ouvre une accolade ;
• on déclare les propriétés de style à modifier selon les valeurs indiquées (attention aux deux-
points et au point-virgule) ;
• on referme l'accolade :

• On peut surcharger une balise existante.


Selecteur : evenement { propriété : valeur ; }
• On peut créer des sous-classe d’une catégorie : L'attribut class="nom_de_la_classe" permet
de distinguer et mettre en valeur de la même manière des balises ayant les mêmes
caractéristiques. Par exemple, dans une page formée de plusieurs paragraphes, on pourra les
distinguer.

Les couleurs :
De nombreux éléments d'une page web peuvent être mis en couleur et ils peuvent l'être de plusieurs
manières. Par exemple :
• la propriété color modifie la couleur du texte écrit dans la «boîte» ;
• la propriété background-color modifie la couleur d'arrière-plan ;
• la propriété border-color modifie la couleur des bordures...

Parmi les différents formats de codage de couleur qui coexistent, le codage RGB (Red - Green -
Blue) consiste à donner, sous la forme de trois entiers compris entre 0 et 255, l'intensité de rouge,
celle de vert et celle de bleu. Ainsi, pour mettre l'arrière plan d'un paragraphe en rouge à l'aide du
codage RGB, on peut utiliser la règle de style :
p{
background-color: red;
}
p{
background-color: rgb(255, 0, 0);
}
p{
background-color: #FF0000;
}

Remarques :

Evolutions

Le Html5 a apporté de nouvelles balises (de type bloc) qui


permettent d'organiser la structure des pages web. La partie visible
de chaque page peut être structurée avec :
• Un en-tête grâce à la balise <header> (ne pas confondre
cette balise avec la balise <head> !!!) ;
• Un menu de navigation dans le site grâce à la balise
<nav> ;
• La partie rédactionnelle de la page est contenue dans la (ou
les) balises <section>, qui contient une ou plusieurs balises <p> ;
• Un pied de page grâce à la balise <footer>.

En pratique, on ne se lance pas au hasard pour concevoir une page web ! On prépare un croquis qui
permet d'anticiper la structure de la page. Cette structure sera évidemment améliorée au fur et à
mesure de la construction de la page (et du site) web, mais elle sera un bon point de départ.

Arborescence :
De manière générale, un site internet (voire le web dans son intégralité) peut être représenté comme
un répertoire (un dossier) contenant des fichiers et/ou des dossiers :
Pour «passer» d'une page web à une autre, pour afficher des images sur ces pages ou pour
télécharger des documents à partir d'un site, il faut créer des liens hypertextes entre ces fichiers en
déclarant leur URL (Uniform Resource Locator).

Afficher une image


On utilise <img> qui est une balise marqueur de type en-ligne. La syntaxe est :
<img src="url_du_lien_vers_l'image_à_afficher">

Lien vers le fichier .css


On importe un fichier (de mise en forme) .css en se plaçant entre les balises <head> et </head>.
Pour cela, on utilise la balise marqueur <link> en respectant la syntaxe :
<link href="url_du_lien_vers_le_fichier_css">

Lien hypertexte pour se déplacer vers une autre page


<a> désigne une ancre, c'est-à-dire un lien vers une cible de destination et/ou la cible nommée d'un
autre lien. Cette balise entoure généralement un mot (une image, un paragraphe, un titre, ...)
«ancre», support du lien hypertexte. La syntaxe est :
<a href="url_du_lien_hypertext">support_du_lien</a>

Vous aimerez peut-être aussi