Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
TP ISN-Terminale S Notion de code HTML
2
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)
3
Prenons un site quelconque:
4
Clic droit/afficher la source :
5
Toute page web est codée en HTML
6
HTML : HyperText Markup Language
7
Toute page web est codée en HTML HTML : HyperText Markup Language code source écrit directement
8
Toute page web est codée en HTML HTML : HyperText Markup Language code source écrit directement Ou bien
9
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
10
Le code source contient: des éléments du texte qui s’affiche
11
Le code source contient: des éléments du texte qui s’affiche Des éléments invisibles : …, etc……
12
Le code source contient: des éléments du texte qui s’affiche Des éléments invisibles : …, etc…… Le code est accessible à tous !!!
13
Structure de base d’une page HTML
14
Titre Texte texte texte texte texte
15
Notion de balise
16
Balises = instructions
17
Notion de balise Balises = instructions Exemple : "aller à la ligne", "afficher une image", ‘’changer de paragraphe’’
18
Notion de balise Balises = instructions Exemple : "aller à la ligne", "afficher une image", ‘’changer de paragraphe’’ on les repères grâce aux symboles « ». (exemple :, )
19
Notion de balise (suite) Balises par pairs :
20
Notion de balise (suite) Balises par pairs: Exemple : corps du texte
21
Notion de balise (suite) Balises par pairs: Exemple : corps du texte Balises orphelines : exemple : (retour à la ligne)
22
Structure de base commentée
23
Titre
24
Structure de base commentée Titre
25
Structure de base commentée Titre
26
Structure de base commentée Titre
27
Structure de base commentée Titre
28
Structure de base commentée Titre
29
Structure de base commentée Titre
30
Suite du code : Texte texte texte texte texte Texte texte texte texte texte
31
Texte texte texte texte texte Texte texte texte texte texte
32
Texte texte texte texte texte Texte texte texte texte texte
33
Texte texte texte texte texte Texte texte texte texte texte
34
Texte texte texte texte texte Texte texte texte texte texte
35
Texte texte texte texte texte Texte texte texte texte texte
36
D’autres balises
37
titre principal titre moins important sous-titre
38
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 )
39
D’autres balises (suite)
40
Lien vers un site (qui s’ouvrira dans un autre onglet ou une autre fenêtre) : cliquer ici pour accéder à mon autre site http://www.mon_autre_site.com
41
D’autres balises (suite 2) Lien pour télécharger un fichier : cliquer ici pour télécharger monfichier.doc
42
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 :
43
D’autres balises (suite 4) Lien vers une autre page : cliquer ici pour la page 2
44
Notion de CSS
45
CSS : Cascading Style Sheets Ou Feuilles de styles
46
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...
47
Notion de CSS HTML : contenu d’un site (texte, images, liens, fichiers à télecharger, structure du site, etc..)
48
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.
49
Pour aller plus loin : Tutoriel HTML 5 et CSS sur le site du zéro
50
Et maintenant, A vous de faire vos propres pages HTML … (commencer au paragraphe « Travail à effectuer »)
Présentations similaires
