Le langage HTML - Bienvenue dans l`ENT du collège Louise Michel
Transcription
Le langage HTML - Bienvenue dans l`ENT du collège Louise Michel
. Le langage HTML Technologie (Technologie) Le langage HTML 1/8 Comment afficher la page d’un site web ? (Technologie) Le langage HTML 2/8 Comment afficher la page d’un site web ? Avec un navigateur : Pour afficher un site Web, on utilise un navigateur internet. Celui-ci traduit le langage HTML et nous affiche correctement les éléments de la page (le texte, les images, les vidéos...) (Technologie) Le langage HTML 2/8 Qu’est-ce que le langage HTML ? (Technologie) Le langage HTML 3/8 Qu’est-ce que le langage HTML ? Définition Le HTML (ou HyperText Markup Language) est un langage hypertexte à balises. (Technologie) Le langage HTML 3/8 Un exemple de code source d’une page HTML : (Technologie) Le langage HTML 4/8 Un exemple de code source d’une page HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> Bonjour ! </body> </html> Que va afficher cette page ? (Technologie) Le langage HTML 4/8 Un exemple de code source d’une page HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> Bonjour ! </body> </html> Que va afficher cette page ? Résultat : Bonjour ! (Technologie) Le langage HTML 4/8 Définition Une page HTML, est constituée de texte et de balises. Celles-ci permettant de mettre en page le texte, ou d’insérer certains éléments dans la page, comme des images, des vidéos, ou du code Javascript. Attention Ne pas confondre le langage Javascript et le Java. Ils se ressemblent mais ce ne sont pas les mêmes langages ! (Technologie) Le langage HTML 5/8 Les balises Les signes < et > délimitent une balise. Exemple : <html> <tr> <table> (Technologie) Le langage HTML 6/8 Les balises Les signes < et > délimitent une balise. Exemple : <html> <tr> <table> Le slash Une balise doit être (re)fermée, avec le slash /. Exemple : <html></html><table></table> <font color="red">Bonjour !</font> (Technologie) Le langage HTML 6/8 Les balises Les signes < et > délimitent une balise. Exemple : <html> <tr> <table> Le slash Une balise doit être (re)fermée, avec le slash /. Exemple : <html></html><table></table> <font color="red">Bonjour !</font> Plusieurs balises Une balise peut contenir plusieurs autres balises. Exemple : <html> <head><title>Facebook</title></head><body>Bienvenue !</body> </html> (Technologie) Le langage HTML 6/8 Les balises Les signes < et > délimitent une balise. Exemple : <html> <tr> <table> Le slash Une balise doit être (re)fermée, avec le slash /. Exemple : <html></html><table></table> <font color="red">Bonjour !</font> Plusieurs balises Une balise peut contenir plusieurs autres balises. Exemple : <html> <head><title>Facebook</title></head><body>Bienvenue !</body> </html> Balises "Orpheline" Certaines sont "orpheline" et ne se ferment pas. (Technologie) Le langage HTML 6/8 Création d’une première page d’un site web Il suffit de créer un fichier nommé index.html et d’y écrire le texte ci-dessous : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page d’accueil</title> </head> <body> Bienvenue sur notre site </body> </html> (Technologie) Le langage HTML 7/8 Création d’une première page d’un site web Il suffit de créer un fichier nommé index.html et d’y écrire le texte ci-dessous : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page d’accueil</title> </head> <body> Bienvenue sur notre site </body> </html> Visualisation de la page Il suffit d’ouvrir le fichier index.html avec un navigateur. (Technologie) Le langage HTML 7/8 Exercice : Raccourcis XP -> Notepad++ Enregistrer sous Créer le dossier "HTML" Enregistrer sous le nom de fichier : "index.html" dansMes Documents/HTML Recopier le code HTML Lancer Firefox Fichier -> Ouvrir : Mes Documents/HTML/index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page d’accueil</title> </head> <body> Bienvenue sur notre site </body> </html> (Technologie) Le langage HTML 8/8