Lernzettel: Introduction au développement Web

📋 Plan du Cours

1. Hypertext et markup en HTML
2. Indices moteurs de recherche fréquence et PageRank
3. Feuilles de style Web en CSS et emplacements
4. Apports de JavaScript au développement Web
5. Architecture d’une page HTML et rôle de title
6. Balises HTML avec attributs et exemples

📖 1. Hypertext et markup en HTML

🔑 Notions clés & Définitions

• Hypertext : Un hypertexte est un contenu relié par des liens cliquables qui permettent de passer d’une page ou d’une partie à une autre.
• Markup : Le markup est le balisage qui décrit la structure et le sens d’un document à l’aide de tags, comme en HTML.
• Hypertext Markup Language : HTML est un langage de balisage utilisé pour structurer des pages Web et y intégrer des liens hypertextes.

📝 Points essentiels

• Dans HTML, l’hypertexte correspond aux liens qui relient des ressources entre elles.
• Le markup correspond aux balises qui structurent le document (titres, paragraphes, images, etc.).
• HTML combine structure (markup) et navigation (hypertext) pour produire une page interprétable par le navigateur.
• Les moteurs de recherche exploitent le balisage et les liens pour comprendre et parcourir le contenu.

💡 Astuce mémo

Hypertext = liens ; Markup = balises.

📖 2. Indices moteurs de recherche fréquence et PageRank

🔑 Notions clés & Définitions

• Fréquence lexicale : La fréquence lexicale est un indice qui mesure à quel point un terme apparaît dans une page pour estimer sa pertinence.
• PageRank : Le PageRank est un indice de popularité qui estime l’importance d’une page à partir des liens entrants et de leur qualité.

📝 Points essentiels

• La fréquence lexicale repose sur l’hypothèse que les mots importants pour la requête apparaissent plus souvent dans la page.
• La fréquence lexicale peut être trompée par du bourrage de mots (sur-optimisation) qui augmente artificiellement la présence des termes.
• Le PageRank repose sur l’hypothèse que des pages mieux reliées (liens entrants) sont plus importantes.
• Le PageRank peut être risqué si des liens sont manipulés (réseaux de liens artificiels) pour gonfler l’importance perçue.
• Ces indices servent à classer des résultats, mais leurs hypothèses peuvent conduire à des erreurs de pertinence.

💡 Astuce mémo

Fréquence = répétition ; PageRank = réputation via liens.

📖 3. Feuilles de style Web en CSS et emplacements

🔑 Notions clés & Définitions

• CSS : CSS est le langage qui définit l’apparence d’un document Web (couleurs, tailles, mise en page) séparément du contenu HTML.
• Feuille de style : Une feuille de style est un ensemble de règles CSS appliquées à des éléments HTML pour contrôler leur rendu.

📝 Points essentiels

• Le langage de programmation pour définir des feuilles de style Web est le CSS.
• Les feuilles de style peuvent être définies à différents endroits (plusieurs possibilités sont attendues).
• Une feuille de style CSS contient des règles qui ciblent des éléments HTML pour modifier leur affichage.
• Le but de CSS est de séparer le contenu (HTML) de la présentation (styles).

💡 Astuce mémo

CSS = style ; HTML = structure.

📖 4. Apports de JavaScript au développement Web

🔑 Notions clés & Définitions

• JavaScript : JavaScript est un langage de programmation côté navigateur qui permet d’ajouter de l’interactivité aux pages Web.

📝 Points essentiels

• JavaScript permet de modifier le contenu ou le style d’une page après son chargement.
• JavaScript permet de réagir à des événements utilisateur (par exemple un clic).
• JavaScript permet d’exécuter des traitements (par exemple construire une chaîne de texte à partir d’un tableau).
• JavaScript s’appuie sur le DOM pour accéder aux éléments HTML et les mettre à jour.

💡 Astuce mémo

JavaScript = dynamique (réaction + modification).

📖 5. Architecture d’une page HTML et rôle de title

🔑 Notions clés & Définitions

• Balise title : La balise <title> définit le titre de la page HTML, utilisé par le navigateur et les moteurs de recherche.
• Architecture HTML : L’architecture HTML regroupe les blocs principaux qui structurent le document et préparent son rendu.

📝 Points essentiels

• Une page HTML est organisée en blocs principaux (structure globale du document) qui contiennent le contenu et les métadonnées.
• La balise <title> correspond au titre de la page.
• Le contenu de <title> s’affiche dans l’interface du navigateur (barre d’onglets).
• Le titre <title> sert aussi d’information pour l’indexation et l’affichage des résultats.

💡 Astuce mémo

<title> = titre visible (onglet) + repère pour la recherche.

📖 6. Balises HTML avec attributs et exemples

🔑 Notions clés & Définitions

• Attribut HTML : Un attribut HTML fournit des informations supplémentaires à une balise, comme une cible, une description ou un paramètre de rendu.
• Attribut href : L’attribut href indique la ressource vers laquelle pointe un lien (<a>).
• Attribut alt : L’attribut alt fournit un texte alternatif décrivant une image (<img>) si l’image ne s’affiche pas.

📝 Points essentiels

• Les balises HTML peuvent être enrichies par des attributs pour préciser des paramètres.
• Un exemple attendu est une balise de lien <a> avec href pour définir la destination.
• Dans un exemple avec <img>, l’attribut src indique le fichier image à charger.
• Dans un exemple avec <img>, l’attribut alt fournit un texte alternatif.
• L’exemple peut aussi inclure un attribut style pour appliquer des propriétés CSS directement à l’élément.

💡 Astuce mémo

Attribut = “paramètre” de la balise (href = destination, alt = description).

⚠️ Pièges & confusions fréquents

1. Confondre hypertext (liens) et markup (balisage) : l’un décrit la navigation, l’autre la structure.
2. Croire que la fréquence lexicale suffit à elle seule : elle peut être manipulée par le bourrage de mots.
3. Confondre <title> avec le contenu visible dans la page : <title> correspond au titre de la page, pas au texte principal du corps.
4. Mélanger href et src : href cible une ressource de lien, src charge une image.
5. Confondre class et id : class sert à regrouper, id identifie un élément de façon unique (et les sélecteurs diffèrent).

✅ Checklist Examen

1. Définir hypertext et markup et expliquer leur rôle dans HTML.
2. Décrire la fréquence lexicale : hypothèse, bien-fondé et risques (manipulation).
3. Décrire PageRank : hypothèse, bien-fondé et risques (manipulation des liens).
4. Donner le langage CSS pour les feuilles de style et citer plusieurs emplacements possibles pour les définir.
5. Expliquer les apports de JavaScript : interactivité, événements, modification via le DOM.
6. Décrire l’architecture générale d’une page HTML et donner le rôle de <title> + où son contenu s’affiche.
7. Donner un exemple de balise avec attribut et décrire ce que l’attribut fait.
8. Expliquer un code combinant <a>, <img> (href/src/alt/style) et décrire le rendu attendu.
9. Représenter correctement le tableau HTML avec rowspan, colspan et alignement.
10. Décrire les conséquences de règles CSS sur table/td/th et sur th (bordures, fond, couleur).
11. Expliquer quand utiliser class vs id et comment cela a été utilisé dans les TP.
12. Associer chaque sélecteur CSS à ses éléments cibles : .center, p.center, div#titre p.article.
13. Décrire comment créer un menu en combinant HTML et CSS.
14. Distinguer variable globale et variable locale et donner un exemple concret de différence d’usage/portée (avec un exemple).