2nde-Le Web-1- html-css | Technologie Rodat

Le Web - HTML et CSS

Ingrédients et structure d’un Page Web, utilisation du langage HTML / CSS / Javascript / PHP

HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. On utilise des balises diverses et variées dans le langage, pour toutes les sections d’une page. On utilise des balises ouvertes et fermées.

CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web (en HTML). L’avantage qu’apporte l’utilisation d’un fichier.css à part est que le même style s’applique sur tous les pages qui constituent le site internet.

JavaScript est un langage de programmation qui permet une interactivité sur la page Web. En effet on utilisera ce langage pour créer une animation, un questionnaire à remplir etc.

PHP est un langage permettant de faire construire des pages web dynamiquement par le Serveur Web. On utilisera ce langage car il permet de stocker des informations écrites ( par exemple des cookies ) dans une base de données.

Organisation de l'arboréscence d'un site:

TP HTML

TP CSS

Votre navigateur est composé de plusieurs programmes. L’un d’eux est l’interpréteur HTML. Lorsqu’on lui demande de travailler sur un texte en HTML, il le décode et produit l’affichage qui correspond à la description voulue.

On peut indiquer qu’un document est composé de code HTML de deux façons :
→ on commence ce texte par une première ligne qui l’indique : <!DOCTYPE html>
→ on peut nommer le fichier en utilisant l’extension .html

Structure d’une page Web en HTML : html, head et body

Voici l’architecture générale de toute page HTML, et les 3 éléments qui vont permettre de structurer la page :

<!DOCTYPE html>

<html> html contient l’intégralité du code

<head> head fournit des métadonnées utiles

<title>ABC</title> quel texte placer dans l’onglet

</head>

<body> body fournit les indications sur l’affichage voulu

</body>

</html>

Définition de métadonnées : données qui fournissent une information sur une autre donnée.
Dans un document HTML : gestion de l’onglet, langue utilisée, auteur de la page ect…
Pour une photographie : géolocalisation au moment de la prise de vue, appareil utilisé ect…
Pour un document quelconque : auteur, date et heure de la sauvegarde, ect...

Code source HTML:

Le langage HTML est un langage de description : il décrit ce qu’on veut afficher sur une page d'un site internet.

Les données sont encapsulées dans des éléments HTML composés notamment de balises.

<p> Bonjour à tous </p>

<p> : la balise d’ouverture

</p> : la balise de fermeture

Bonjour à tous : le contenu interne de cet élément

Il existe deux types de balises → Les balises classiques sont basées sur le fait d’avoir 2 parties , exemples :

<p> </p> Paragraphes on peut régler leur largeur (width)

<h1> </h1> Titre principal <h6> </h6> Plus petit des sous-titres <ol>

<ul> </ul> Liste non ordonnée (qui devra contenir des lignes) <li> </li>

<ol> </ol> Liste ordonnée (qui devra contenir des lignes) <li> </li>

Les balises orphelines sont basées sur le fait d’avoir 1 partie , exemples :

<br> Provoque un petit passage à la ligne (plus petit que p) – Type block
<hr> Barre de séparation – Type block

On trouve parfois / à la fin des balises orphelines pour indiquer qu’elles sont orphelines : <br />

Les balises d’ouverture peuvent contenir des informations supplémentaires sous la forme d’attributs.

La syntaxe ressemble à celle de la déclaration de variables Python : nom=valeur, valeur étant souvent un string.

Élément de lien <a href=".."> <a>

<a href="url_de_destination">Texte du lien</a> L’attribut est href.

L'URL peut être absolu, s'il s'agit d'une page externe au site ou relatif (que le nom de la page), s'il s'agit d'une page interne appartenant au même site.

Balise d’image <img src="..">

<img src="url_de_image" width="500"> Les attributs sont scr= et width (500 pixels)

L'URL peut être absolu, s'il s'agit d'une image avec un lien externe au site ou relatif (que le nom d'image), s'il s'agit d'une image interne appartenant au même site.

Le Web-CSS (Cascading Style Sheets):

Les pages d'un site doivent contenir un lien interne vers la page de style (page CSS). Cette page aura l’extension .css et et va pouvoir être posé dans le même dossier que les pages.html.

Dans une feuille CSS, vous donnez les instructions que vous voulez sur la mise en forme de vos pages, toujours de la façon suivante :

sélecteur balise {instructions de mise en forme}

et tout le texte situé dans la sélection suivra ces instructions de mise en forme, exemple « monstyle.css » :

body{font-family: Comic Sans MS ; background-color: navy; text-align:center;}
h1{font-style: italic; color: white;background-color: purple;}
p{color: green; background-color: orange;}
ul{color: red; background-color: yellow;text-align:left;}
b{color: aqua;}
i{color: white;}
img {display: block; margin-left: auto; margin-right: auto;}

Surles pages « html » on rajoute un lien vers le fichier CSS (en suivant l’exemple ci-dessous).

<head>
<meta charset="utf-8">
<title>MY SNT WEBSITE</title>
<link rel="stylesheet" href="monstyle.css">
</head>

Quelques exemples des commandes CSS:

La taille du texte font-size : small ; xx-small ; x-small ; small ; medium large ; x-large ; xx-large
L'alignement du texte text-align : left ; center ; right ; justify
La police font-family: Arial ; Comic Sans MS ; Courier ; Georgia ; Impact ; Verdana
Décoration text-decoration: underline ; line-trough ; overline
Gras, Italique font-weight: bold ; normal ; font-style: italic ; normal ;
Couleur du texte color: blue;
Couleur du fond background-color: orange ;

On peut aussi utiliser le code hexadécimal en RGB de la couleur précédé d’un # pour avoir une palette plus large, que les couleurs de base (white, silver, gray, black, red, maroon, lime, gree, yellow, olive, blue, navy, fuchia, purple, aqua, teal etc..)

Par exemple, pour avoir le titre h1 en bleu, on écrira : h1{color : #0000FF;}

On peut aussi définir des groupes dédiés à un style, des « classes » :

sélecteur .nom de classe{instructions de mise en forme}

Exemple de « class » .my_special_kind_of_blue { color: #1020FF; } et dans le fichier html vous pouvez écrire :

<p class="my_special_kind_of_blue ">This paragraph has that special blue colored text.</p>