Langage HTML
Par Stella0400 • 13 Décembre 2017 • 1 595 Mots (7 Pages) • 674 Vues
...
C/ Un lien pour envoyer un e-mail
Pour que les visiteurs envoyer un mail à une personne X. Il faut utiliser les liens type mailto
Exemple :
1
[Envoyer-moi une e-mail !](’’mailto)
D/ Un lien pour télécharger un fichier
Faire comme un lien vers une page web, mais en indiquant le nom du fichier à télécharger.
Exemple :
‘’monfichier.zip’’ le placer dans le même dossier que la page web et faire un lien vers ce fichier.
1
[Télécharger le fichier](’’monfichier.zip’’)
9/ Les différents formats d’images
A/ Le JPEG
JPEG (Joint Photographic Expert Group) = Conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes.
Extension : .jpg ou .jpeg
B/ Le PNG
PNG (Portable Network Graphics) = Format adapté à la plupart des graphiques. Le PNG a deux gros avantages : il peut être rendu transparent et il n’altère pas la qualité d’image.
PNG 8 bits : 256 couleurs
PNG 24 bits : 16 millions de couleurs
- Réserver le JPEG aux photos, car chargement plus rapide
C/ Le GIF
Limité à 256 couleurs. Avantage par rapport au PNG est que le GIF peut être animé.
En bref :
- Une photo : utiliser le JPEG
- N’importe quel graphique avec peu de couleurs (moins de 256) : utiliser le PNG 8bits
- N’importe quel graphique avec beaucoup de couleurs : utiliser un PNG 24 bits
- Une image animée : utiliser un GIF animé
10/ Insérer une image
permet d’insérer une image
La balise doit être accompagnée de 2 attributs :
- src permet d’indiquer où se trouve l’image
- alt signifie ‘’texte alternatif’’. Texte qui apparait au cas où l’image n’apparaitrait pas. Ex : pour une fleur : alt=’’une fleur’’
- Les images doivent impérativement se trouver à l’intérieur d’un paragraphe (
)
A/ Ajouter une infobulle
Attribut pour afficher une bulle d’aide est la même que pour les liens : title
Exemple :
1
2 Voici une photo que j’ai prise lors de mes dernières vacances :
3
4
B/ Miniatures cliquables
Si l’image est grosse il est conseillé d’afficher la miniature. Ensuite d’ajouter un lien pour pouvoir voir l’image en taille originale.
Placer les deux images dans un même dossier, afficher la miniature et faire un lien vers l’image de taille réelle.
Exemple : (img = nom du dossier)
1
2 Vous souhaitez voir l’image dans taille d’origine ? Cliquez dessus !
3 [’’Cliquez](’’img/montagne.jpeg’’)
4
11/ Les figures
Tout ce qui vient illustrer le texte est une figure.
Différents types de figures :
- Images
- Codes sources
- Citations
- …
Création d’une figure :
La balise
Ex : (capture d’écran de Bloc-notes)
1
2
3
Une figure est le plus souvent accompagnée d’une légende. Utiliser la balise à l’intérieur de
Exemple :
1
2
3 Le logiciel Bloc-notes>
4
- Si l’image est définie comme une figure, alors l’image peut être située en-dehors d’un paragraphe.
Ex :
1
Connaissez-vous le logiciel Bloc-Notes ?
2
3
4
5 LE logiciel Bloc-notes
6
Langage CSS (La Forme)
1/ Ecriture du langage CSS
- Dans un fichier .css (méthode la plus recommandée)
- Dans l’en-tête du fichier HTML
- Directement dans les balises du fichier HTML via un attribut style
: indique que ce fichier HTML va être associé à un fichier appelé .css qui va gérer sa mise en forme
A/ Appliquer un style : sélectionner une balise
1 p
2 {
3 color: blue ;
4 }
- Noms de balises : écrit les noms des balises dont
...