Untitled Quiz

Voici les notes d'étude basées sur le texte fourni:

Généralités

• Le cours est une licence d'excellence qui enseigne le langage HTML
• Le cours est pour l'année 2024-2025

Plan de cours

• Introduction
• Balises de structure
• Textes, Titres, Listes et Lignes
• Liens
• Tableaux
• Images et Frames

Internet et le Web

• Internet est défini comme un réseau de réseaux sans centre névralgique, composé de millions de réseaux publics et privés.
• Les différentes applications d'Internet incluent le courrier électronique, le Web, l'échange de fichiers (FTP, peer-to-peer), la vidéoconférence, les forums et le chat.
• World Wide Web, communément appelé le Web, est un système hypertexte public fonctionnant sur Internet qui permet de consulter, avec un navigateur, des pages accessibles sur des sites web.
• Le World Wide Web est l'une des applications d'Internet.

Historique du Web (1)

• En 1960, Le projet de création du réseau ARPANET a été créé par DARPA (Defense Advanced Research Projects Agency). L'objectif était de concevoir un réseau résistant aux attaques militaires.
• En 1969, un réseau expérimental de quatre nœuds reliant ainsi les universités américaines travaillant sur ce projet a été crée.
• En 1973, création du protocole TCP/IP pour communiquer entre machines.
• La première connexion internationale a été établie entre l'University College de Londres et le Royal Radar Establishment (Norvège).

Historique du Web (2)

• En 1980, Tim Berners-Lee a mis au point un système de navigation hypertexte permettant de naviguer entre plusieurs sites du laboratoire CERN de Genève.
• HTTP(HyperText Transfer Protocol) et le langage HTML (HyperText Markup Language) ont été mis au point par Tim Berners-Lee en 1990 ce qui permettait de naviguer à l'aide de liens hypertextes à travers les réseaux.
• Le nom ARPANET a été abandonné au profit d'INTERNET.
• En 1994, le World Wide Web est né avec la création du W3C(World Wide Web Consortium), un organisme de normalisation à but non lucratif dirigé par Tim Berners-Lee

Historique du Web (3)

• En 1994, Yahoo! est créé.
• En 1995, lancement par Microsoft de la « guerre des navigateurs » avec l'apparition d'Internet Explorer pour Windows 95.
• Altavista, le premier « gros » moteur de recherche, est créé en 1995.
• Navigateur Opera est créé en 1996.
• En 1998, Google apparait.
• Apple lance Safari en 2003
• Première version de Mozilla Firefox est sortie en 2004.
• La première conférence « Web 2.0 » a lieu en 2004.
• Google lance Google Chrome en 2008.
• En 2008, il a eu l'explosion du Web mobile.

Web 3.0

• L'expression "web 3.0" est régulièrement évoquée depuis le début des années 2010, mais elle est débattue.
• Certains pensent que c'est un terme marketing, d'autres pensent qu'il s'agit d'une nouvelle étape distincte des précédentes.
• Il y a deux thèses: Considérer le Web 3.0 comme l'Internet des objets et considérer le Web 3.0 comme web sémantique

Protocole de communication

• Un protocole est un ensemble de règles qui définissent un langage afin de faire communiquer plusieurs ordinateurs.
• Les protocoles les plus utilisés sont HTTP, HTTPS, FTP , SMTP et POP.
• La plupart de ces protocoles sont bâtis autour de TCP/IP(Transmission Control Protocol/Internet Protocol). Ce protocole définit les règles de communication entre les ordinateurs sur le réseau Internet, en utilisant la notion d'adressage IP.

Protocole de communication TCP/IP

• L'adresse IP identifie de manière unique chaque ordinateur sur Internet car il n'existe pas deux ordinateurs sur Internet avec la même adresse IP.
• IP version 4 les adresses sont codées sur 32 bits:(232=4 294 967 296).
• Les adresses IPv4 sont notées avec quatre champs numériques compris entre 0 et 255, séparés par des points
• IP version 6: les adresses sont codées sur 128 bits. 2128.
• Les adresses IPv6 comprennent 8 groupes de 4 chiffres hexadécimaux séparés.

Protocole HTTP

• Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur Internet.
• Il permet le transfert de fichiers hypertextes (généralement au format HTML) entre un client et un serveur Web.
• Les adresses URL (Uniform Resource Locator) sont utilisées.
• Un serveur DNS(Domain Name System) est un ordinateur qui relie un nom de domaine à son adresse IP.

Langage HTML

• Le langage HTML(HyperText Markup Language) a été développé en 1991 par Tim Berners-Lee
• Le HTML est un langage de balisage qui permet de mettre en forme des pages afin de contrôle leur apparence et leur présentation.
• Les documents disponibles sur le Web sont écrits en langage HTML.
• Un document est hypertexte lorsqu'il permet d'accéder à d'autres documents au moyen d'un simple clic de souris.
• Un document HTML peut incorporer du texte, des images, de l'animation et du son.

HTML example

• Les fichiers page1.html et logo.jpg doivent être enregistrés dans le même dossier.
• Le fichier HTML peut être exécuté dans différents navigateurs.

Evolutions du HTML

• HTML 1.0: Possédait du texte de base, des images et des liens hypertexte.
• HTML 2.0: Introduit les formulaires de saisie.
• HTML 3.2: Permettait différentes justifications (gauche, centre, droite), tableaux et équations mathématiques.
• HTML 4.0: A implémenté les feuilles de style.
• HTML 5: Permet l'intégration de vidéos, un meilleur agencement du contenu et de nouvelles fonctionnalités pour les formulaires.

HTML 5

• HTML5 est une révision majeure d'HTML qui remplace XHTML 2.0 et HTML 4.0.
• Il simplifie la syntaxe, s'appuie sur les standards existants et ajoute des balises sémantiques de structures.

Règles de base HTML 5

• Les éléments et les attributs sont insensibles à la casse.
• Les éléments non vides, les balises d'ouverture et de fermeture doivent être utilisés.
• Les éléments vides doivent se terminer par les caractères /> précédés d'un espace.
• Les éléments ne doivent pas se chevaucher et donc obéir au principe premier ouvert, dernier fermé
• Tous les attributs doivent avoir une valeur incluse entre guillemets ("). Les différents attributs du même élément doivent être séparés par au moins un espace
• Donnez une valeur à chaque attribut utilisé, comme l'illustrent les exemples d'en-tête.

Création de pages HTML

• Une page HTML est un fichier texte composé du contenu de la page visualisé par le navigateur et d'un certain nombre de commandes appelées balises ou tags.
• Pour créer et visualiser des pages HTML, il faut un éditeur de texte et un navigateur.

Éditeurs HTML

• En mode graphique (WYSIWYG), la création de page Web se fait de manière visuelle.
• En mode texte, l'édition du code HTML se fait ligne par ligne.
• Des exemples d'éditeurs HTML WYSIWYG incluent Dreamweaver(payant), Amaya(gratuit et open-source) et NVU / KompoZer(HTML de Mozilla)
• Exemples d'éditeurs de texte HTML: Brackets, Komodo, Notepad++, NetBeans, Eclipse HTML Editor, Sublime Text et Visual Studio Code.

Navigateurs Web

• Le but principal d'un navigateur est de présenter la ressource Web demandée, la ressource est affichée à partir du serveur dans la fenêtre du navigateur.
• Une ressource est généralement un document HTML, mais peut aussi être un PDF, une image ou un autre type.
• L'emplacement de la ressource est spécifié par l'utilisateur à l'aide d'une URI(Uniform Resource Identifier).
• Des exemples de navigateurs Web incluent Google Chrome, Mozilla Firefox, Safari et Opera.

Balises de structure

• Le langage HTML5 est une amélioration au niveau du langage HTML4.
• Tout document doit donc débuter par la déclaration du doctype suivi de l'élément racine html qui inclut les éléments head et body.

Le Doctype

• La déclaration du doctype est traditionnellement utilisée pour spécifier le type de balisage du document.
• La déclaration du doctype pour HTML 5 est: <!DOCTYPE html>.

L'élément racine html

• L'élément <html> est l'élément racine du document et il possède des attributs dont les plus utiles sont:
• L'attribut lang indique la langue utilisée par défaut dans la page.
• L'attribut dir indique le sens de lecture du texte de la page.

L'entête du document

• La balise head permet de regrouper les informations indispensables pour le référencement de la page.
• La balise head est utilisée par les moteurs de recherche afin de déterminer les caractéristiques du document, ex: le titre, les mots clés, l'auteur.
• La commande <head > marque le début de l'en-tête.
• La commande </head> marque la fin de l'en-tête.

La balise title

• L'en-tête d'un document HTML doit contenir un seul titre qui est clair et précis.
• Les moteurs de recherche utilisent systématiquement le titre de la page dans leurs investigations.
• La commande <title> marque le début du titre.
• La commande </title> marque la fin du titre.

Les balises meta

• Les balises meta sont des informations descriptives sur le site, elles sont analysées par les robots.
• Les balises META doivent être placées entre les balises <head> et </head>.
• Il y a deux types de balises meta: Les balises meta "name" et les balises meta "http-equiv".
• Les balises meta "name" permettent de décrire la page.
• Les balises meta "http-equiv" envoient des informations supplémentaires via le protocole HTTP.

Les balises meta "name" (1)

• Les balises meta name permettent de préciser:
  • L'auteur de la page,l'adresse courriel de l'auteur, une description de la page, une liste de mots clés et le logiciel utilisé pour réaliser la page.

Les balises meta "name" (2)

• Diriger les robots pour l'indexation de la page en utilisant la balise <meta name="robots" content="attribut1, attribut2">
• Les champs attribut1 et attribut2 peuvent avoir les valeurs suivantes :
  • index: Page à indexer par le robot
  • noindex: Interdiction d'indexer la page
  • follow: Le robot peut suivre les liens contenus dans la page pour indexer d'autres documents
  • nofollow: Le robot ne peut pas suivre les liens de la page

Les balises meta "http-equiv"

• Permet entre autres de préciser l'encodage utilisé pour la page, de préciser une date d'expiration pour la page,d'actualiser la page et de rediriger le visiteur vers une autre page.

Le corps du document

• Le corps de la page contient tous les éléments visibles à partir d'un navigateur.
• La commande <body> marque le début du contenu de la page.
• La commande </body> marque la fin du contenu de la page.

Attributs de la balise body

• Les attributs de fond et de couleur de texte permettent de déterminer la couleur ou une image de fond pour une page HTML.
• L'attribut BGCOLOR donne une couleur de fond au document HTML.
• L'attribut TEXT donne une couleur au texte.
• L'attribut BACKGROUND permet l'affichage d'une image en arrière plan.
• L'attribut BGPROPERTIES="fixed" empêche l'image précise de défiler avec le contenu du document.

Les titres

• Les balises titres possèdent un attribut permettant un alignement indépendant du reste du document.
• L'attribut ALIGN="Type d'alignement" permet l'alignement du titre. Les options posibles sont: left, right et center.

Les paragraphes

• Une balise permet de formater un texte brut en paragraphe
• La commande <p> marque le début du paragraphe.
• La commande </p> marque la fin du paragraphe.

L'alignement des paragraphes

• L'attribut ALTGN="Type d'alignement" permet d'aligner le texte de la page HTML, Les valeurs pour l'attribut align sont: left,right,center et justify.

La police de caractères(HTML 3)

• La balise <FONT....> ..</FONT> permet de définir les caractère de la police, tel que le type de, la taille et la couleur.
  • l'attribut FACE définit le type de police.
  • l'attribut SIZE définit la taille.
  • l'attribut Color définit la couleur.

La taille de la police(HTML 3)

• La taille de la police définit par l'attribut SIZE de l'instruction <FONT ... >, d'une valeur de 1 à 7.
• Exemple : <FONT SIZE="4">

La couleur de la police(HTML 3)

• L'attribut COLOR permet d'appliquer une couelur à la police de caractère.

Les retours à la ligne

• insère un saut de ligne avec <br/> sans balise de fin.

HTML Entities

• HTML possède des entités spéciales pour des caractères tels que un espace non brisant  , inférieure à < est <, supérieure à > est > et & pour esperluette.

Texte préformaté

• le texte est préformaté et respecte les fins de lignes (retours de chariot) et les espaces avec   la balise est <pre>.

Les styles(html 4)

• Possède des styles comme <b></b> pour un texte en gras, <I></I> pour de l'italique, <TT></TT> pour une fonte à espacement constant, la base <SUB></SUB> pour des indices et <SUP></SUP> pour des exposants.

La mise en valeur d'un texte(HTML 5)

• La balise <em></em> pour une légère mise en valeur et <strong></strong> pour une mise en valeur prononcée et <mark></mark> qui fait ressortir visuellement une partie du texte.
• La commande <ul> marque le début d'une liste à puces tandis que </ul> la ferme.
• La commande <li> introduit une entrée et </li> indique la cloture.

Les listes numérotées

• le language HTML permet les listes numérotées à travers l'attribut <TYPE>.

Les listes des définitions

• Ouvre avec <DL> et ferme avec </DL>.
• L'instruction <DT> ouvre une nouvelle entrée.
• La commande <DD> permet d'affecter un texte descriptif à la balise précédente.

Création de lignes horizontales

• Insérer <HR SIZE="s" WIDTH="w|w%" ALIGN="LEFT|CENTER|RIGHT" COLOR="#RRVVBB" NOSHADE > pour créer des lignes horizontales, l'attribut size est l'épaisseur en pixels, WIDTH la largeur.ALIGN l'alignement et COLOR la couleur de la ligne.

Les Liens Hypertexte

• HTML est un language qui permet à l'utilisateur de passer d'un language à l'autre.
• La syntaxe est <a href="URL ou adresse"> texte/Image </a>
• Il existe deux liens qui sont<ul>les liens internes(ancres) et externes.

Liens Externe

• La création se fait avec la balise: <a href="URL ou adresse cible"> texte du lien</a>
• L'adresse cible doit être un lien vers une autre page, image, média ou site web.

Liens internes

• Créer avec une ancre qu'il faut insérer et une ancre pointer de la même manière<a href = "#nom">ancre</a>.

Image sur la page HTML

• Permet la mise en place de table de données.
  • <table></table> Marque le début et la fin.
  • <caption></caption> Pour définir un titre de tableaux.
  • <th></th> Pour le titre des colonnes.
  • <tr></tr> Pour definir une ligne.
  • <td></td> Pour définir une cellule.
  • < TABLE WIDTH="w|w%" BORDER="b" CELLPADDING="cp" CELLSPACING="cs" ALIGN="LEFT|CENTER| RIGHT"> Pour définir le style et taille du tableau
  • La commande COLSPAN="c" pour fusionner horizontalement etROWSPAN="c" de la même manière les ligne sont fusionnées.