L a n g a g e s H T M L e t C S S

Informatique et Science du Numérique LPG 2019-2020

S o m m a i r e

1 . P r e m i è r e s n o t i o n s

1.Le World Wide Web

2.Le navigateur web

3.Le langage HTML

4.Comment créer des sites web ?

2 . E x e m p l e d e p a g e H T M L 5

1.Structure d’une page web

2.Les balises HTML5

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

1.Mise en place d’une feuille de style

2.Exemple d’utilisation du CSS

1 . P r e m i è r e s n o t i o n s

Informatique et Science du Numérique

1 . 1 L e W o r l d W i d e W e b

Tim Berners-Lee, un physicien britannique, a inventé le web auCERN en 1989. À l’origine, le projet a été conçu pour que desscientifiques puissent s'échanger des informationsinstantanément.

Le 30 avril 1993, le CERN a mis le logiciel du World Wide Webdans le domaine public. En donnant libre accès au logicielnécessaire pour faire fonctionner un serveur web, ainsi qu’aunavigateur et à la bibliothèque de codes associés, il a permis à laToile de se tisser.

Le World Wide Web (WWW), communément appelé le Web, et parfois la Toile, est unsystème hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec unnavigateur, des pages accessibles sur des sites. Le Web n’est qu’une des applicationsd’Internet, distincte d’autres applications comme le courrier électronique, la messagerieinstantanée et le partage de fichiers en pair à pair.

Sources :- https://fr.wikipedia.org/wiki/World_Wide_Web- https://home.cern/fr/topics/birth-web

LPG 2019-2020

1 . P r e m i è r e s n o t i o n s

Informatique et Science du Numérique

1 . 2 L e N a v i g a t e u r w e b

Sources :- https://fr.wikipedia.org/wiki/Navigateur_web- http://csud.educanet2.ch/3oc-info/4_Internet/2_AppWeb/description.html

Crédit image : https://www.supinfo.com

Un navigateur web (browser en anglais) est un logiciel conçupour consulter et afficher le World Wide Web.

La fonction principale d'un navigateur web est de permettre la consultation d'informations disponibles sur le World Wide Web. Les principales étapes de la consultation d'une ressource sont les suivantes :

1. L'utilisateur donne au navigateur web l'adresse webde la ressource à consulter.

2. Le navigateur se connecte au serveur webhébergeant la ressource visée et la télécharge. Le protocole de communication généralement utilisé est HTTP.

3. le moteur de rendu du navigateur traite cette ressource, télécharge les éventuelles ressources associées et affiche le résultat sur l'écran de l'utilisateur.Crédit image : http://csud.educanet2.ch

LPG 2019-2020

1 . P r e m i è r e s n o t i o n s

Informatique et Science du Numérique

1 . 2 L e N a v i g a t e u r w e b : u n e m é t a p h o r e

Sources :- http://www.coursinfo.fr/decouverte/internet/quest-ce-quun-navigateur-web/

LPG 2019-2020

1 . P r e m i è r e s n o t i o n s

Informatique et Science du Numérique

1 . 3 L e l a n g a g e H T M L e t C S S

Sources :- https://www.w3.org- https://yard.onl/sitelycee/cours/html5css3/Leprojetpartie1.html

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle estde gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : dutexte, des liens, des images... La dernière version utilisée est le HTML5.

CSS (Cascading Style Sheets - Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web(agencement, positionnement, décoration, couleurs, taille du texte...). Ce langage est venu compléter le HTMLen 1996. La dernière version utilisée est le CSS3

Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme destandardisation à but non lucratif, fondé en octobre 1994 chargé de promouvoir lacompatibilité des technologies du World Wide Web telles que HTML5, HTML, XML,CSS3, PNG, SVG... Le leitmotiv du W3C est « Un seul web partout et pour tous ».

LPG 2019-2020

1 . P r e m i è r e s n o t i o n s

Informatique et Science du Numérique

1 . 4 C o m m e n t c r é e r d e s s i t e s w e b ?

Sources :- https://yard.onl/sitelycee/cours/html5css3/Leprojetpartie1.html- https://atom.io- https://notepad-plus-plus.org/fr/

Pour créer des pages et des sites web, il existe :

• Des logiciels WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez)Ce sont des programmes qui se veulent faciles d’emploi, et qui permettent de créer des sites web sans apprendre de langage particulier. Exemples : Dreamweaver, Iweb, Kompozer...

• Des logiciels CMS (Content Management System - Système de Gestion de Contenu). Ce sont des logiciels qui gèrent la création et la publication de documents, éventuellement de façon collaborative, et qui permettent également de créer des sites web sans avoir à connaître de langage particulier. Exemples : Wordpress, Joomla, Xoops...

• Mais il existe d’autres logiciels, gratuits, qui vont nous permettre de créer des pages web simples tout enappréhendant ces langages HTML et CSS : Les éditeurs de textes

LPG 2019-2020

2 . E x e m p l e d ’ u n e p a g e H T M L 5

Informatique et Science du Numérique

2 . 1 S t r u c t u r e d ’ u n e p a g e w e b

Sources :- https://yard.onl/sitelycee/cours/html5css3/Leprojetpartie1.html- https://www.w3schools.com/html/html_intro.asp

L’indentation n’a pas d’impact sur le résultat final mais permet d’améliorerla lisibilité du code.

<!DOCTYPE html> : Cette balise unique estindispensable car c'est elle qui indique qu'il s'agit biend'une page web HTML.

<html></html> : C'est la balise principale du code.Elle englobe tout le contenu de votre page.

<head></head> : cette section donne quelquesinformations générales sur la page comme son titre,l’encodage. Ces informations ne sont pas affichéesmais sont très importantes.

<body></body> : La partie principale de la pagese trouvera à l’intérieur de ses balises.

<meta charset=«utf-8»/> : Cette balise indiquel'encodage utilisé dans votre fichier .html

<ti t le></ti t le> : Le titre de votre page est unélément important. Il sera afficher dans l’onglet dunavigateur.

LPG 2019-2020

2 . E x e m p l e d ’ u n e p a g e H T M L 5

Informatique et Science du Numérique

2 . 2 L e s b a l i s e s H T M L 5 : O r g a n i s e r s o n t e x t e

Sources :- https://www.w3schools.com/html/html_intro.asp

LPG 2019-2020

2 . E x e m p l e d ’ u n e p a g e H T M L 5

Informatique et Science du Numérique

2 . 2 L e s b a l i s e s H T M L 5 : M é m o

Sources :- https://www.pixelcrea.com

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 1 M i s e e n p l a c e d e l a f e u i l l e d e s t y l e

Sources :- https://www.w3schools.com/html/html_intro.asp

La feuille de style s’applique à une page HTML en ajoutant le code suivant entre les balises <head></head> dela page :

Il est possible d’inclure directement le CSS à l’intérieur d’une page HTML en incluant dans les balises leparamètre « style » mais cette méthode n’est pas recommandée :

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 1 M i s e e n p l a c e d e l a f e u i l l e d e s t y l e

Sources :- https://yard.onl/sitelycee/cours/html5css3/_debut.html?Leprojetpartie1.html

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 2 E x e m p l e d ’ u t i l i s a t i o n d u C S S

Sources :- https://www.w3schools.com/html/html_intro.asp

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 2 E x e m p l e d ’ u t i l i s a t i o n d u C S S

Sources :- https://www.w3schools.com/html/html_intro.asp

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 2 E x e m p l e d ’ u t i l i s a t i o n d u C S S

Sources :- https://www.w3schools.com/html/html_intro.asp

LPG 2019-2020

3 . E x e m p l e d ’ u n e f e u i l l e d e s t y l e C S S 3

Informatique et Science du Numérique

3 . 2 E x e m p l e d ’ u t i l i s a t i o n d u C S S : M é m o

Sources :- https://www.pixelcrea.com

LPG 2019-2020

D e s c o u r s g r a t u i t e n l i g n e s

Informatique et Science du Numérique

Jean Yard : https://yard.onl/sitelycee/cours/html5css3/_debut.html?Leprojetpartie1.html

W3C : https://www.w3schools.com/html/default.asp

41Mag : http://41mag.fr/apprendre-le-html5-tutoriel-complet

wikiHow : https://fr.wikihow.com/apprendre-le-HTML

HTML.net : http://fr.html.net/tutorials/html/

Firefox : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML

Developpez : https://j-willette.developpez.com/tutoriels/html/les-bases-du-html/

LPG 2019-2020