TS - CODE HTML

OBJECTIFS :

- Insérer un titre à une page html
- Insérer des images
- Insérer des tableaux
- Insérer des vidéos et des fichiers audio
- Insérer des commentaires dans le code html

<audio controls="controls">
            <source src="/music.m4a" type="audio/mp4" />
            Votre navigateur n'est pas compatible
</audio>

<audio controls="controls">
            <source src="/music.mp3" type="audio/mp3" />
            Votre navigateur n'est pas compatible
</audio>

<video controls="controls">
           <source src="/video.mp4" type="video/mp4" />
           Votre navigateur n'est pas compatible
</video>

POUR OBTENIR LES CODES COULEUR EN HEXADECIMAL : http://htmlcolorcodes.com/fr/

Ajouter un cadre à l'image

<img src="/?" border="x"> définit l'épaisseur du cadre de l'image
Règle : <img src="/?" border="x">

Exemple :

Mettre un commentaire à l'image

<img src="/?" alt="je ce je veux"> Le texte s'affiche lorsque le curseur est sur l'image mais il remplace aussi l'image quand celle-ci ne peut être affichée.
Règle : <img src="/?" alt="je ce je veux">

Exemple :

<img src="/image.gif" alt="Une jolie corbeille de Windows">

Aligner une image

<img src="/?" align="?"> aligne l'image
Règle : <img src="/?" align="?">

Exemple :

<img src="/image.gif" align="left">
<img src="/image.gif" align="right">
<img src="/image.gif" align="center">

MODIFIER LA TAILLE D'une image

<img src="/image.gif" height="x" width="x" >

ou

<img src="/image.gif" height="200%" width="200%">

Objectif du cours :

Mise en place d’un site internet sous forme de blog d’élèves. Ces derniers seront alimenté tout au long de l’année par différents travaux informatiques, (articles, photos, vidéos, reportages, etc.)
Chaque élève aura sa page dédiée - c’est-à-dire sa propre page sur le site - qui fera office de galerie du travail effectué pendant l’année.

Travail à fournir :

L’élève qui participe au cours doit faire preuve de motivation et de créativité. Le cours lui permettra d’une part d’acquérir certaines bases techniques avec de la théorie et d’autre part il lui sera également demandé de mettre en place des projets de façon autonome et de les mener à terme.

Ne pas oublier que les travaux seront publiés et consultables en ligne.

Notions enseignées :

Fonctionnement des codes HTML et CSS
Règles de mise en forme d’une page internet
Photographie et vidéo numérique

Evaluations :

Les notes de l’année se baseront sur les différents projets et sur l’évolution du blog personnel

Quelques questions pour commencer…

• Qu’est-ce qu’un navigateur web ?
• Comment donner des ordres à un ordinateur ? Que comprend-il ?
• Pourquoi deux langages (HTML et CSS) pour créer un site web ?
• De quoi faut-il tenir compte lorsqu’on crée un blog ? Pourquoi ?

La structure de base d’une page HTML

Remarquer qu’il y a à chaque fois une balise ouvrante et une balise fermante, il est important de respecter cet ordre !

Les balises en HTML

Les balises indiquent à l’ordinateur ce que représentent et comment doivent s’afficher les éléments du site.

Elle sont invisibles à l’écran.

On les reconnait par le fait qu’elles sont entourées par des chevrons (< et >).

Il existe un certain nombre de balises pour pouvoir gérer les différents éléments :

A noter que pour toutes les balises, l’apparence affichée à l’écran peut être changée avec du code CSS.

Pour les titres <h1>, <h2>, <h3>, … il est important de respecter la hiérarchie et de bien commencer avec <h1>, même si l’affichage paraît trop grand dans un premier temps. On pourra modifier sa taille par la suite avec le CSS.

Pour certaines balises, on peut ajouter un attribut. Prenons la balise <a> : pour renvoyer le lien vers un autre site (ou une autre page), il est important que l’ordinateur ait le nom de celui-ci.

On va ainsi écrire la balise <a href="http://www.epslemont.ch" target="_blank">Cliquez ici</a>

Cliquez ici

Les commentaires

Ils s’écrivent sous forme de balises spéciales et ne sont pas visibles à l’écran.

<!-- Ceci est un commentaire -->

Ils ont leur importance du fait qu’ils permettent d’organiser et de donner des informations sur le code, à celui qui l’a créé ou à quelqu’un qui doit le reprendre.

Exercice 1 : création d’une page HTML avec l’éditeur Text Wrangler

1. Ouvre l’application
2. Ecris un titre de texte (du style « Bienvenue sur ma page » ou « Bienvenue sur mon blog »)
3. Enregistre le fichier au format .html (bien vérifier que l’extension figure après le nom de fichier)
4. En dessous de ton titre, sur une autre ligne, écris rapidement un petit texte qui te présente (qui tu es, d’où tu viens, ce que tu aimes faire, …).
5. Enregistre à nouveau le fichier.
6. Ouvre le fichier dans un navigateur, ton texte apparaît sur une seule ligne. Ajoute des balises pour qu’il figure sur deux lignes.
7. Ton texte de présentation sera peut-être trop long pour figurer sur une seule ligne, fais en sorte qu’il soit lisible en faisant des retours à la ligne.
8. Pour finir, donne un titre à ta page