CH3 : Le web

Le Web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, image, son, vidéo) reliées par des liens hypertextes et accessibles sur le réseau internet.

Le HyperText Transfer Protocol, plus connu sous l’abréviation HTTP, littéralement le « protocole de transfert hypertexte », est un protocole de communication client, il est utilisé pour échanger toute sorte de données entre client HTTP et serveur HTTP.

La requête http passe par une URL pour désigner une ressource sur Internet. visualiser le site Web.

 

HTML & CSS

La création d’un site internet se fait avec ces deux langages principaux
Le HTML est le langage qui permet à votre navigateur web de décrypter la structure d’une page, c’est un langage de balise.
Le CSS est le langage qui permet la gestion du design de votre site.

Structure de base du langage HTML :
<!DOCTYPE html>
<html> permet définir que c’est du langage HTML
<head> entête de la page, elle ne sera pas afficher sur le navigateur, l’entête permet de stocker des information sur la page en elle même. (type de codage, auteur, contenu, titre . . .)
<meta charset= »utf-8″ />
<title>Titre</title>
</head>
<body> Corps de votre page html, c’est cette partie que visualisera l’utilisateur. </body>
Toutes les balises ouverte doivent se refermer avec </nombalise>
</html>

Mise en forme de base :
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Ces balises permettent de définir des titres de différents niveaux : h1 pour les grands titres et h6 pour les titres des sections très spécifiques.
<p> La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.
<a> Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un email, une image, une autre section du document, etc. Les balises <a> contiennent le texte qui sera utilisé pour le lien, l’attribut href de cet élément est utilisé pour définir l’URL cible :
<a href= »url_cible »>du texte qui sera lu par l’utilisateur</a>
<img> Cette balise permet d’intégrer une image dans un document HTML. Voici un exemple d’utilisation : <img src= »url/vers/mon/image.png » alt= »Une description »>
<div> et <span> Ces balises n’ont pas de signification particulière, elles permettent simplement de séparer des sections d’un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).
<ul>, <ol> et <li> Ces balises sont utilisées pour créer des listes. <ul> permet de définir une liste nonordonnée et <ol> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise <li> qui permettra de définir un élément de la liste. Voici un exemple avec <ul> :
<ul> <li>Café</li> <li>Thé</li> <li>Lait</li> </ul>
Il existe beaucoup d’autres balises HTML pour aller plus loin :
http://www.codeshttp.com/baliseh.htm

Le visuel de ma page avec du CSS :
Le CSS permet de gérer le design de votre site, cela signifie qu’il ne faut jamais dans le code HTML ajouter des valeurs pour le design, il faudra le faire dans un fichier CSS. Le CSS permettra de redéfinir des balises HTML. La balise H1 nous pourrons lui affecter une couleur, une taille, un décalage, une police etc . . . La redéfinition des balises et la création de certaine se fait dans un autre fichier .css on peut le faire dans la page même HTML, mais il faudra éviter.

Exemple intégration dans une page HTML, qui définit la couleur de fond du corps, et la couleur du texte des paragraphes ainsi que la taille de la police.

<!DOCTYPE html> <html> <head> <title>Où écrire le CSS ?</title>
<meta charset= « utf-8″>
<style> body{ background-color: orange; }
p{ color: red; font-size: 14px; }
</style>
</head> <body>
<h1>Un titre de niveau 1</h1>
<p>Un paragraphe</p>
<p>Un deuxième paragraphe</p>
</body> </html>

Pour avoir une lisibilité du code d’une page, on préférera créer un fichier annexe style.css dans l’entête on ajoutera un lien sur ce fichier.

<head> <title>Où écrire le CSS ?</title>
<link rel= »stylesheet » href= »styles.css »> </head>

Dans le fichiers style.css on trouvera : body{ background-color: orange; }
p{ color: red; font-size: 14px; }

Il existe énormément d’élément permettant de gérer le design d’un site, cadre, ombrage, couleur, titre, gestion des marges etc . . .

Vous trouverez les références sur ce site : https://fr.wikibooks.org/wiki/Le_langage_CSS
Pour aller plus loin dans la compréhension du fonctionnement, et du codage pour reprendre étape par étape, je vous recommande : https://www.pierre-giraud.com