Le HTML
Pour s'exercer avec ce qui suit, il est possible d'utiliser le line suivant
HTML( HyperText Markup Langage => langage de balisage d'hypertexte)
C'est un langage conçu pour représenter les pages web, Il est interprété par le navigateur.
Il est constitué d'éléments qui structurent le contenu.
Autrement dit : suivant l'élément utilisé, le navigateur va savoir quelle est la nature du contenu.
On va utiliser des éléments pour définir un paragraphe ou un titre par exemple, ou encore pour insérer une image ou une vidéo dans un document. L'élément p, par exemple sert à définir un paragraphe.
HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.
Fondamental : Les balises en HTML
Un élément HTML peut être soit constitué d'une paire de balises et d'un contenu, soit (plus rarement) d'une balise unique qu'on dit alors orpheline.
L'élément p ci-dessous est constitué d'une balise ouvrante : <p> d'un contenu et d'une balise fermante :</p>(la fermeture se fait avec un slash)
<p>Le contenu de ce paragraphe</p>
L'élément br, qui sert à passer à la ligne, n'est lui constitué que d'une balise
ceci est une ligne de texte<br>
ceci est une seconde ligne de texte
L'élément h1, signifie heading 1. Elle permet de faire des titres, à l'intérieur de la page. Le contenu de cette balise est donc affiché avec une taille de police plus grande que les autres caractères de la page. Il est également possible de définir des sous-titres en utilisant les balises <h2>, <h3>, ...<h6>.
Fondamental : Les attributs en HTML
La balise ouvrante d'un élément HTML peut contenir des attributs, qui sont parfois même obligatoires.
Les attributs vont venir compléter les éléments en les définissant plus précisément ou en leur apportant des informations supplémentaires.
Les liens
Par exemple, l'élément a (pour "anchor") servant à créer des liens vers d'autres sites ou d'autres pages, va avoir besoin d'un attribut href ("hypertexte reference") qui va prendre comme valeur l'adresse de la page vers laquelle on souhaite faire un lien.
<a href="https://fr.wikipedia.org/wiki/Informatique"> La page de Wikipédia pour l'informatique</a>
Les images
L'élément img, servant à insérer une image dans une page HTML, va lui demander deux attributs : src et alt.
L'attribut src va prendre comme valeur le nom et l'emplacement de l'image tandis que l'attribut alt va afficher un texte alternatif dans le cas où l'image ne serait pas disponible. l'image doit être stocké dans le même dossier que votre fichier HTML.
Cet élément n'est constitué que d'une seule balise orpheline.
<img src="chemin/nom_de_l_image.jpeg" alt="c'est une image" >
Le son
L'élément audio, servant à insérer du son dans une page HTML, va lui demander un attribut : controls.
L'attribut controls va prendre les contrôles audios classiques (lecture, pause, ...). Il faut évidemment que le fichier "musique.mp3" soit présent à l'endroit indiqué.
<audio src="musique.mp3" controls> ma musique </audio>
La vidéo
<video controls src="ma_video.mp4"> ma vidéo </audio>
Les balises et les attributs ne seront jamais affichés par le navigateur : ils vont servir à indiquer au navigateur comment il doit traiter chaque contenu.
Fondamental : La structure de base d'une page html
Pour qu'une page web soit valide, elle doit contenir certain éléments.
<!DOCTYPE html> : pour préciser le type de document Elle indique au navigateur qu'il s'agit bien d'une page web HTML.
<html> : début du document html
<head> : l'entête du document qui contient des méta données comme le titre de la page qui apparaît dans l'onglet de navigation, l'encodage en utf-8 pour les accents en français( très utile),etc..
<title> </title> : correspond au texte qui sera affiché comme titre de l'onglet. Le contenu de cette balise ne correspond pas à un titre qui apparaît directement sur la page.
<!-- commentaire --> : il est important d'utiliser des commentaires pour vous repérer sur votre code. Ces commentaire ne seront ni visibles sur le navigateur, ni interprétés par celui-ci.
Fin de l'entête </head>
<body> : début du corps de la page
Fin du body </body>
Fin du html </html>
<html>
<head>
<meta charset="utf-8"/>
<title>Titre <!-- ceci est un commentaire --> </title>
</head>
<body>
Ceci est un début
</body>
</html>
Fondamental : L'imbrication d'éléments
On peut imbriquer les éléments entre eux en respectant des règles, un peu comme les parenthèses en mathématiques :
Ci-dessous on a imbriqué des éléments en respectant les règles :
ouverture d'une balise paragraphe <p>
ouverture de la balise <b> pour écrire en gras (remarque: on peut aussi utiliser la balise <strong>)
texte en gras
ouverture de la balise <i> écriture en italique (remarque: on peut aussi utiliser la balise <em>)
texte en gras et en italique
fermeture : </i>
texte toujours en gras
fermeture : </b>
fermeture : </p>
<html>
<head>
<meta charset="utf-8">
<title> ma première page web </title>
</head>
<body>
<p> <b> texte en gras <i> texte en gras et en italique </i> texte toujours en gras </b> </p>
</body>
</html>
Complément : Le navigateur(client) vs le serveur
Obtenir une ressource sur le web se fait par le biais d'une communication entre un client (navigateur) et un serveur.
C'est le navigateur qui interprète le html, c'est pour cela que nous pouvons lire une page web qui est enregistrée sur otre ordinateur, même si nous n'avons pas de connexion à internet.
Cependant certaine page web contienne des éléments qui sont interprétés par les serveurs, cela est nécessaire pour des sites web dynamiques (en inter-action avec l'utilisateur)
Le PHP (un langage qui permet de faire des formulaires, des boutons ,etc..) est interprété par un serveur, donc si la page n'est pas sur un serveur, ce code ne sera pas interprété.
Le JavaScript, est un langage qui est interprété par le navigateur et par le serveur. Lui aussi permet de faire des pages web dynamiques en rationalisant l'interprétation.
Les réseaux pair à pair (peer to peer) sont des réseaux où chaque ordinateur est susceptible de jouer le rôle de client et de serveur.