TP ISN-Terminale S Notion de code HTML

I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la source (ou le code source)

Prenons un site quelconque:

Clic droit/afficher la source :

Toute page web est codée en HTML

HTML : HyperText Markup Language

Toute page web est codée en HTML HTML : HyperText Markup Language code source écrit directement

Toute page web est codée en HTML HTML : HyperText Markup Language code source écrit directement Ou bien

Toute page web est codée en HTML HTML : HyperText Markup Language code source écrit directement Ou bien Utilitaire qui génère le code

Le code source contient: des éléments du texte qui s’affiche

Le code source contient: des éléments du texte qui s’affiche Des éléments invisibles : …, etc……

Le code source contient: des éléments du texte qui s’affiche Des éléments invisibles : …, etc…… Le code est accessible à tous !!!

Structure de base d’une page HTML

Titre Texte texte texte texte texte

Notion de balise

Balises = instructions

Notion de balise Balises = instructions Exemple : "aller à la ligne", "afficher une image", ‘’changer de paragraphe’’

Notion de balise Balises = instructions Exemple : "aller à la ligne", "afficher une image", ‘’changer de paragraphe’’ on les repères grâce aux symboles « ». (exemple :, )

Notion de balise (suite) Balises par pairs :

Notion de balise (suite) Balises par pairs: Exemple : corps du texte

Notion de balise (suite) Balises par pairs: Exemple : corps du texte Balises orphelines : exemple : (retour à la ligne)

Structure de base commentée

Titre

Structure de base commentée Titre

Structure de base commentée Titre

Structure de base commentée Titre

Structure de base commentée Titre

Structure de base commentée Titre

Structure de base commentée Titre

Suite du code : Texte texte texte texte texte Texte texte texte texte texte

Texte texte texte texte texte Texte texte texte texte texte

Texte texte texte texte texte Texte texte texte texte texte

Texte texte texte texte texte Texte texte texte texte texte

Texte texte texte texte texte Texte texte texte texte texte

Texte texte texte texte texte Texte texte texte texte texte

D’autres balises

titre principal titre moins important sous-titre

D’autres balises titre principal titre moins important sous-titre Les titres encadrés par ces 3 balises s’affichent effectivement sur la page, (contrairement à et )

D’autres balises (suite)

Lien vers un site (qui s’ouvrira dans un autre onglet ou une autre fenêtre) : cliquer ici pour accéder à mon autre site

D’autres balises (suite 2) Lien pour télécharger un fichier : cliquer ici pour télécharger monfichier.doc

D’autres balises (suite 3) Insertion d’une photographie en jpeg (la photographie doit se trouver en fichier dans le répertoire courant) : Observez la photo suivante :

D’autres balises (suite 4) Lien vers une autre page : cliquer ici pour la page 2

Notion de CSS

CSS : Cascading Style Sheets Ou Feuilles de styles

Notion de CSS CSS : Cascading Style Sheets Ou Feuilles de styles instructions qui définissent la présentation du site : couleur, image de fond, marges, agencement, taille du texte, etc...

Notion de CSS HTML : contenu d’un site (texte, images, liens, fichiers à télecharger, structure du site, etc..)

Notion de CSS HTML : contenu d’un site (texte, images, liens, fichiers à télecharger, structure du site, etc..) CSS : mise en forme esthétique qui se rajoute, une fois le contenu défini en HTML.

Pour aller plus loin : Tutoriel HTML 5 et CSS sur le site du zéro

Et maintenant, A vous de faire vos propres pages HTML … (commencer au paragraphe « Travail à effectuer »)