Aller au contenu

le Web

0 - Introduction⚓︎

Définition

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.

Repères historiques⚓︎

Votre manuel Delagrave une vidéo récapitulative de l'histoire du web :


Cliquer sur l'image pour accéder à la vidéo
Le Web en quelques dates :
  • 1965 : invention et programmation du concept d’hypertexte par Ted Nelson.
    L'hypertexte correspond à l'idée qu'un texte puisse directement faire référence à un autre texte : c'est le précuseur de ce qu'on appelle le lien internet.
  • 1989 : naissance au CERN par Tim Berners Lee.
    En appliquant l'hypertexte aux pages de texte informatique, il permet de lier rapidement une idée à un texte de référence sans avoir à le recopier intégralement ou demander au lecteur d'aller lui-même faire la recherche.
  • 1993 : mise dans le domaine public, disponibilité du premier navigateur Mosaic.
    Le navigateur est une application qui permet d'afficher une page internet et de suivre les liens qu'elle contient. Mosaïc est le premier à être compatible avec des ordinateurs personnels et permet donc le développement du web.
  • 1995 : mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP).
    Grâce à ces langages (Javascript s'éxecute sur l'ordinateur du visiteur et PHP sur le serveur hébergeant le site internet) la page internet n'est plus figée. Elle peut changer d'aspect en fonction des réponses des utilisateurs, ajouter des animations, de petits jeux...
  • 2001 : standardisation des pages grâce au DOM (Document Object Model)
    Une page internet est maintenant une arborescence d'objets imbriqués les uns dans les autres et bornés par des balises.
  • 2010 : mise à disposition de technologies pour le développement d’applications sur mobiles.
    Les pages internet sont maintenant principalement consultées par des périphériques mobiles (smartphones, tablettes). La mise en page des sites internet évolue pour s'adapter au format de ces disositifs. De nombreuses applications disponibles sur les stores ne sont que des navigateurs pointant directement sur un site internet.

Normalisation de la présentation de l’information⚓︎

A savoir
  • Sur le Web, les textes, photos, vidéos, graphiques, sons, programmes sont exprimés et assemblés dans divers formats normalisés par un consortium mondial (W3C : World Wide Web Consortium), ce qui permet une circulation standardisée de ces informations.
  • Les pages Web sont écrites dans le langage de balises HTML (HypertextMarkupLanguage). Leur style graphique est défini dans le langage CSS (Cascading Style Sheets).
  • Les pages ont une adresse unique, nommée URL (Uniform Ressource Locator). Elles sont accessibles via internet en utilisant le protocole HTTP (Hypertext Transfer Protocol) ou sa version sécurisée HTTPS qui crypte les échanges. L’affichage des pages est réalisé chez l’utilisateur par un programme appelé navigateur.
  • Un hypertexte est un texte augmenté de renvois automatiques à des textes, des images ou des sons. Initialement, un hypertexte se restreignait à la mémoire d’un seul ordinateur. Dans une page Web, ce renvoi se fait sur n’importe quelle machine du réseau internet, par le truchement de l’adresse de la page Web du texte (URL) auquel il fait référence. La toile d’araignée construite par les liens peut être représentée sous la forme d’un graphe qui matérialise la structure du Web.

I - Qu'est-ce qu'une page web ?⚓︎

définition

Une page web est un document texte pourtant une extension particulière (.html, .htm, ...)
Le texte est mis en forme à l'aide de balises <balise>texte à mettre en forme</balise> propres au langage HTML (pour HyperText Markup Language) que l'on peut combiner.

1) Structure de base d'une page HTML⚓︎

Une page web moderne a une structure particulière :

  • Une en-tête <head>...</head> dans laquelle sont présentes les métadonnées de la page (encodage des caractères, titre, fichiers de style)
  • Un corps <body>...</body> dans lequel se trouve le contenu visible de la page web

Voici un exemple de canevas d'une page web moderne

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma première page web</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>

    <p>Ceci est un exemple de page HTML.</p>
</body>
</html>

Explication des éléments⚓︎

  1. <!DOCTYPE html> : Indique que le document est en HTML5.
  2. <html lang="fr"> : Balise racine ; lang="fr" précise que la langue du document est le français.
  3. <head> : Contient des métadonnées comme le titre et le charset (jeu de caractères).
  4. <meta charset="UTF-8"> : Définit le codage des caractères pour utiliser des accents et caractères spéciaux.
  5. <title> : Titre affiché dans l'onglet du navigateur.
  6. <body> : Contient tout le contenu visible de la page.

2) Balises principales⚓︎

Vous allez rencontrer diverses balises :

  1. Titre et sous-titres :
  2. <h1> à <h6> : Pour structurer les titres (de plus grand à plus petit).
  3. Paragraphes :
  4. <p> : Utilisé pour le texte.
  5. Liens :
  6. <a href="URL">Texte du lien</a> : Permet de créer des liens hypertextes.
  7. Images :
  8. <img src="URL de l'image" alt="Description de l'image"> : Insère une image.
  9. Listes :
  10. <ul> et <li> : Liste à puces.
  11. <ol> et <li> : Liste numérotée.
  12. Tableaux :
  13. <table> : Structure d’un tableau.
  14. <tr> : Ligne du tableau.
  15. <td> : Cellule du tableau.

3) Exemple pratique⚓︎

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de page</title>
</head>
<body>
    <h1>Les Pokémons</h1>
    <p>Voici une liste de pokémons :</p>
    <ul>
        <li>Pikachu</li>
        <li>Psykokwak</li>
        <li>Ronflex</li>
    </ul>
    <p>Découvrez une image de ronflex :</p>
    <img src="https://bernon.fr/ronflex.jpg" alt="Un Ronflex" style="width:20%;">
</body>
</html>

Mémo CSS : Introduction et Concepts de Base⚓︎

Qu’est-ce que le CSS ?⚓︎

Le CSS (Cascading Style Sheets) est un langage qui permet de styliser des pages HTML. Il sépare le contenu (HTML) de la présentation (CSS), offrant ainsi plus de flexibilité et de contrôle.

Structure d’une règle CSS⚓︎

CSS
sélecteur {
    propriété: valeur;
}
- Sélecteur : Indique quel élément HTML est affecté. - Propriété : Définit ce qui est modifié (par exemple, couleur, police, marges). - Valeur : Donne la valeur de la propriété (par exemple, rouge, Arial, 20px).

Les trois façons d’ajouter du CSS⚓︎

  1. Styles en ligne : Directement dans les balises HTML avec l’attribut style.

    HTML
    <p style="color: blue; font-size: 16px;">Texte en bleu.</p>

  2. Styles internes : Dans une balise <style> dans le <head>.

    HTML
    <style>
    p {
        color: blue;
        font-size: 16px;
    }
</style>

  3. Styles externes : Dans un fichier séparé avec l’extension .css.

  4. Lien dans le HTML :
    HTML
    <link rel="stylesheet" href="styles.css">

Sélecteurs CSS courants⚓︎

  1. Par balise :

    CSS
    p {
    color: green;
}

  2. Par classe : Utilisé pour plusieurs éléments.

  3. HTML :
    HTML
    <p class="important">Texte important</p>

  4. CSS :

    CSS
    .important {
    font-weight: bold;
}

  5. Par ID : Unique pour un élément.

  6. HTML :
    HTML
    <p id="titre">Titre principal</p>

  7. CSS :

    CSS
    #titre {
    text-align: center;
}

  8. Groupes : Appliquer un style à plusieurs éléments.

    CSS
    h1, h2, p {
    color: darkblue;
}

Propriétés CSS essentielles⚓︎

  1. Texte :
  2. color : Couleur du texte.
  3. font-size : Taille de la police (px, em, %, etc.).
  4. font-family : Police (par ex. Arial, "Times New Roman").

  5. text-align : Alignement (left, center, right, justify).

  6. Arrière-plan :

  7. background-color : Couleur de fond.

  8. background-image : Image de fond.

  9. Bordures et espaces :

  10. border : Bordure (épaisseur, type, couleur).
    CSS
    p {
    border: 1px solid black;
}
  11. margin : Espace extérieur (autour d’un élément).

  12. padding : Espace intérieur (entre contenu et bordure).

  13. Boîte et dimensions :

  14. width : Largeur.
  15. height : Hauteur.

Exemple pratique⚓︎

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        p {
            font-size: 18px;
            color: #34495e;
        }
        .important {
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Ceci est une page stylisée avec du CSS.</p>
    <p class="important">Ce texte est mis en valeur.</p>
</body>
</html>

Conseils pour bien débuter⚓︎

  1. Testez vos styles progressivement : changez une propriété à la fois pour voir l’effet.
  2. Utilisez des outils comme l’inspecteur d’éléments du navigateur pour tester vos styles en direct.
  3. Centralisez vos styles dans un fichier externe pour une meilleure organisation.

4) Se débrouiller seul⚓︎

Il est probablement impossible de connaître toutes les subtilités du HTML et du CSS. Si vous essayez de faire quelque chose sans savoir comment vous y prendre, allez sur internet, notamment

5) S'approprier le langage HTML⚓︎

Le document suivant cliquer pour télécharger page_CV.zip contient 1 dossier et 3 fichiers :

  • cv.html qui contient le code et la structure de la page
  • style.css qui définit la mise en page de cv.html
  • photo.jpg qui est la photo du CV.

A l'aide d'un éditeur de texte (comme Notepad++) éditer le fichier cv.html et modifier le texte et la photo pour en faire votre cv.

6) Le cours, en vidéos⚓︎

Le HTML

Récupérer et décompresser le document

Editer et modifier le document

Compresser et déposer le document sur mon serveur

Mettre son site web en ligne

Il s'agit de la capture d'écran d'une élève ayant fait la mise en ligne durant la séance.

7) Le javascript, pour aller plus loin⚓︎

Rendre une page interactive avec le javascript

II - Généralités⚓︎

1) Moteurs de recherche⚓︎

Les moteurs de recherche permettent de trouver des informations dans des pages dont on ne connaît pas l’adresse, voire dont on ignore l’existence. La méthode de recherche appelée référencement naturel se décompose en trois grandes activités, réalisées par les moteurs de recherche :

  • le parcours automatique du Web pour collecter les pages visitées (aspiration des pages Web effectuée par des robots)
  • l’analyse du contenu des pages et leur indexation sur les mots qu’elles contiennent (constitution d’un annuaire inversé qui associe à chaque terme les URL des pages où il apparaît)
  • la troisième activité, réalisée à chaque fois qu’un internaute fait une requête, construit une liste ordonnée des pages (classement) comportant les mots clés de la requête. Leur ordre dépend notamment de leur popularité (principe des liens), de leur pertinence (aux mots de la requête), et de l’ordre des termes de la requête.

Les concepteurs de site Web peuvent améliorer le référencement de leurs pages en choisissant bien les mots et en les plaçant à des endroits stratégiques dans les pages.

2) Interaction client/serveur⚓︎

Le Web s’appuie sur le dialogue entre clients et serveurs. L’interaction est à l’initiative des clients (les applications qui se connectent au Web, dont les navigateurs), qui envoient des requêtes HTTP aux serveurs. Ces derniers renvoient leur résultat : des pages qu’ils ont stockées ou qu’ils créent dynamiquement en fonction de la requête formulée.

Les pages reçues par les clients peuvent contenir des codes exécutables (souvent en JavaScript) qui permettent aux clients d’effectuer des traitements en accédant aux ressources de son ordinateur et en interagissant avec les serveurs.

Les applications peuvent être paramétrées pour autoriser ou interdire l’accès à des ressources locales aux programmes téléchargés par les pages.

3) Sécurité et confidentialité⚓︎

En formulant des requêtes sur des sites Web dynamiques et en laissant des programmes s’exécuter sur sa machine, l’utilisateur prend des risques : il peut communiquer des informations personnelles à son insu à des serveurs qui en gardent une trace, à distance ou localement par des cookies, ou encore charger des pages contenant des programmes malveillants, par exemple permettant d’espionner en continu les actions de l’utilisateur.

Par ailleurs, un navigateur peut garder un historique de toutes les interactions, et le laisser accessible aux sites connectés. L’utilisateur peut utiliser des services qui s’engagent à ne pas garder de traces de ses interactions, par exemple certains moteurs de recherche.

Il peut aussi paramétrer son navigateur de façon à ce que celui-ci n’enregistre pas d’historique des interactions. De fausses pages peuvent encore être utilisées pour l’hameçonnage des utilisateurs. Un nom de lien pouvant cacher une adresse Web malveillante, il faut examiner cette adresse avant de l’activer par un clic.

4) Impacts sur les pratiques humaines⚓︎

Dans l’histoire de la communication, le Web est une révolution : il a ouvert à tous la possibilité et le droit de publier. Il permet une coopération d’une nature nouvelle entre individus et entre organisations :

  • commerce en ligne,
  • création et distribution de logiciels libres multi-auteurs,
  • création d’encyclopédies mises à jour en permanence,
  • etc. 

Il devient universel pour communiquer avec les objets connectés. Le Web permet aussi de diffuser toutes sortes d’informations dont ni la qualité, ni la pertinence, ni la véracité ne sont garanties et dont la vérification des sources n’est pas toujours facile. Il conserve des informations, parfois personnelles, accessibles partout sur de longues durées sans qu’il soit facile de les effacer, ce qui pose la question du droit à l’oubli. Il permet une exploitation de ses données, dont les conséquences sociétales sont encore difficiles à estimer :

  • recommandation à des fins commerciales,
  • bulles informationnelles,
  • etc.

En particulier, des moteurs de recherche permettent à certains sites d’acquérir de la visibilité sur la première page des résultats de recherche en achetant de la publicité qui apparaîtra parmi les liens promotionnels.