Le langage du web
Fonctionnement des sites web
Pour découvrir les sites web on utilise un navigateur. Ces derniers sont a utiliser en connaissance de cause car ils permettent aux différents sites visités de connaître notre historique de navigation notamment.
Les sites web utilisent différents langages présentés ci-dessous.
L'HTML
Depuis sa création en 1990, le langage informatique HTML (HyperText Markup Language) est utilisé pour créer des pages Web. C'est l'une des trois inventions issus du W3C avec le protocole http et les adresses Web. Son acronyme signifie « langage de balisage d'hypertexte » car il permet en effet de réaliser de l'hypertexte à base d'une structure de balisage.
Le CSS
Le « Cascading Style Sheets » ou « feuille de styles en cascade » s'est imposé dans les années 2000. Comme son nom l'indique, il permet de styler les textes d'une page Web : définir leur taille, leur couleur ou l'alignement d'un paragraphe. L'utilisation de feuilles de style au format CSS repose sur l'idée de séparation du contenu et de la mise en forme.
Accès au code source d'une page
Pour accéder au code source d'une page Web, il faut commencer par réaliser un clic droit sur la page. Dans le menu contextuel, il faut ensuite sélectionner la commande Inspecter.
Pages dynamiques
Les deux langages JavaScript et PHP permettent d'exécuter des actions dans les pages Web demandées par l'internaute et les rendent dynamique. Ces langages ont des bases différentes javaScript est un langage exécuté côté client tandis que PHP est un langage exécuté côté serveur.
Choix de l'environnement de programmation
Le bloc-notes
Votre bloc-notes 
sous Windows permet de taper du texte donc d'écrire un programme python. Néanmoins cela n'est pas très conviviale et déconseillée. Si vous souhaitez rester avec une solution légère je vous conseille notepad++
. C'est l'outil que nous utiliserons.
Visual studio code.
Cet environnement 
dédié à la programmation permet d'avoir une seule plate-forme pour développez l'ensemble de la mise en place d'un programme pour plusieurs langage de programmation notamment avec l'ajout de modules d'extension. Il permet de concevoir, réaliser et maintenir un programme. En permettant par exemple d'utiliser les échanges avec les plates-formes de gestion de versions décentralisé de type Git. A noter qu'il existe une version libre moins intrusive que celle de Microsoft.
Un outil spécialement conçu pour le travail du frontend d'un site qui permet de gérer l'HTML le CSS et le JS est l'éditeur Brackets
Fondamental : Quelques liens utiles
Codepen vous permet sans rien installer de travailler à distance. Cet outil peut vous être utile chez vous.
Le site de Pierre Giraud vous permettra d'aller plus loin pour la programmation complète d'un site.
Premier essai
Dans notepad++, tapez le code comme suit :
Il faut maintenant enregistrer le fichier sous test.html. Pour cela il faut successivement aller dans les menus :
Fichier/Enregistrer sous... (choisir le dossier qui convient dans vos documents sur le disque dur) ;
Ainsi votre fichier s'appellera test.html
Cliquez sur le fichier et on obtient :
Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire sur deux lignes différentes. Que se passe-t-il ?
En fait, pour créer une page web, il ne suffit pas de taper simplement du texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des instructions à l'ordinateur comme « aller à la ligne », « afficher une image », etc.
Structure de base d'une page
Code minimal
Ce code correspond au code minimal que doit contenir toute page web.
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Vous remarquerez au passage l'indentation qui permet une meilleure lecture du programme.
Fondamental :
Les balises s'ouvrent et se ferment dans un ordre précis. Ici balise <html> est la première que l'on ouvre et c'est la dernière que l'on ferme. Il faut donc que les balises soient fermées dans le sens inverse de leur ouverture
Description des balises employées
Signification des balises utilisées
Doctype
La première ligne s'appelle le doctype. C'est elle qui indique qu'il s'agit bien d'une page web HTML. Cette balise est particulière car elle commence par un point d'exclamation.
Html
C'est la balise principale. Elle englobe tout le contenu de votre page. En effet la balise fermante </html> se trouve en fin du code.
<html>
</html>
Head et body
Une page web est constituée de deux parties :
L'en-tête <head> : cette section donne des informations générales sur la page, comme son titre, l'encodage pour la gestion des caractères spéciaux... Ces informations ne sont pas affichées sur la page. Elles sont à destination de l'ordinateur, mais elles très importantes.
Le corps <body> : c'est là que se trouve la partie principale de la page qui sera affiché à l'écran. C'est à l'intérieur que sera écrit la majeure partie du code.
Charset
Cette balise indique l'encodage utilisé dans votre fichier. C'est lui qui détermine comment les caractères spéciaux vont s'afficher.
Il y a plusieurs techniques d'encodage ; ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher pratiquement tous les caractères spéciaux.
<meta charset="utf-8" />
Remarque :
Si les accents s'affichent mal, c'est qu'il y a un problème avec l'encodage. Vérifiez que la balise meta indique UTF-8, et que votre fichier est enregistré en UTF-8. Sous notepade++ il faut aller dans les menus :
Titre
Toute page doit avoir un titre pertinent qui décrit ce qu'elle contient. Il est conseillé de garder le titre assez court inférieur à 100 caractères.
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci dans l'onglet du navigateur.
Il s'affiche également dans les résultats de recherche en utilisant un moteur de recherches.
<title>Titre</title>
Les commentaires
Il n'a aucun impact sur votre page, mais vous devez vous en servir pour vous repérer dans votre code source. Vous pouvez le mettre où vous voulez au sein de votre code source.
<!-- Ceci est un commentaire -->Attention : Tout le monde peut voir tout votre code html
Tous les navigateurs comportent un raccourci permettant de visualiser le code html d'une page.
Paragraphe et titre
Paragraphe
Ce paragraphe sera placé entre les balise <body>. Cette balise <p> est utilisée pour délimiter les paragraphes.
<p>Hello welcom on my website</p>
Saut de ligne
En html, en appuyant sur la touche Entrée , cela ne crée pas une nouvelle ligne. Il faut utiliser une deuxième balise<p>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<p>Hello welcom on my website !
This is my first test.</p>
<p>Right now it’s a little empty</p>
</body>
</html>
Et voici le résultat
Aller à la ligne dans un paragraphe sans sauter une ligne
On utilise la balise orpheline suivante <br /> qui sera obligatoirement à l'intérieur d'un paragraphe.
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<p>Hello welcom on my website !<br />
This is my first test.</p>
<p>Right now it’s a little empty</p>
</body>
</html>
Remarque :
On peut mettre plusieurs balises <br /> Mais c'est une mauvaise pratique. Pour décaler un texte avec plus de précision, on utilisera le CSS.
Titre
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, les titres deviennent utiles.
On a le droit d'utiliser six niveaux de titres différents. On a donc six balises de titres différentes :
<h1> Titre très important en général, on s'en sert pour afficher le titre de la page au début de celle-ci </h1>
<h2> titre important </h2>
<h3> sous-titre </h3>
<h4> sous-titre moins important</h4>
<h5>sous-titre pas important </h5>
<h6>sous-titre peu important </h6>
Dans la pratique ,on n'utilise que les balises <h1> , <h2> et <h3>
Ne choisissez pas la balise de titre en fonction de la taille qu'elle applique au texte. Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 ( <h1> ), puis un titre de niveau 2 ( <h2> ), etc. Il ne devrait pas y avoir de sous-titre sans titre principal.
Pour modifier la taille du texte, nous utiliserons le css.
Remarque :
Grâce au langage css, nous pourrons choisir si les titres importants sont centrés, rouges et soulignés. Pour le moment, en html, nous ne faisons que structurer notre page.
Appliquez une propriété css à une balise html
Dans un code CSS comme ci-dessous
h1 {color: blue;
}
On trouve trois éléments :
Le sélecteur ; ici on écrit les noms des balises HTML dont on veut modifier l'apparence. Si je veux modifier l'apparence de tous les paragraphes <p> , je dois écrire p (sans les chevrons).
La ou les propriétés CSS ; les effets de style sont listés via des propriétés. Par exemple, color permet d'indiquer la couleur du texte, font-size permet d'indiquer la taille du texte, etc. Il existe BEAUCOUP de propriétés CSS.
Et leurs valeurs ; pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color , il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut.
Méthode : Code CSS
On écrit le nom de la balise. Puis entre accolades { } on écrit les propriétés et leurs valeurs, sachant que l'on peut mettre autant de propriétés que l'on veut à l'intérieur des accolade). Chaque propriété est suivie du symbole : puis de la valeur correspondante. Chaque ligne se termine par ;.
Remarque : Commentaires
Tapez /* suivi de votre commentaire, puis */
Appliquez une propriété CSS à plusieurs balises HTML
Si les deux balises ont la même style, il suffit de combiner la déclaration en séparant les noms des balises par une virgule.
h1, p
{color: blue;
}
Résultats
Appliquer une mise en forme à seulement certains paragraphes
Pour appliquer un style à un seul élément on peut utiliser deux attributs :
pour appliquer un style à un seul élément parmi d'autres, on utilise un attribut ; class.
pour appliquer un style sur un élément qui est unique dans la page, on utilise un attribut : id.
Nous verrons les applications pour les deux attributs, mais on comprends aisément que l'on va surtout utilisé l'attribut class.
Attribut id
Avec un logo, élément unique, que l'on va "marquer" grâce à l'attribut id dans le fichier .html
<img src="images/logo.png" alt="Logo du site" id="logo">
Appelez l'attribut id via un # dans le fichier .css
#logo {/* Indiquez les propriétés CSS ici */}
Attribut class
Vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre. Il s'agit d'un moyen de sélectionner votre élément pour ensuite lui appliquer du style. Par exemple, je vais associer ma-classe à mon deuxième paragraphe dans le HTML : <body>
<body>
<h1>Titre principal</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p class="ma-classe">Ceci est le contenu de mon deuxième paragraphe</p>
<h2>Voilà mon sous-titre h2</h2>
</body>
Appelez le nom de l'attribut class via un . dans le fichier .css
.ma-classe {color: #663399;
}
Résultat
Appliquez plusieurs propriétés CSS en une fois à un élément
Déclarer les styles
.ma-classe {color: #663399;
}
.grand-texte {font-size: 30px;
}
Puis l'utiliser sur p ; mais aussi sur vos autres éléments car il est possible de cumuler plusieurs classes au sein d'une même balise.
<body>
<h1>Titre principal</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p class="ma-classe grand-texte">Ceci est le contenu de mon deuxième paragraphe</p>
<h2 class="grand-texte">Voilà mon sous-titre h2</h2>
</body>
Résultat
