Privé : Mamadou Camara

Table des matières

00 - Objectifs et évaluation du cours

1. Objectifs

2. Evaluation

01 - Les bases d'une page HTML

1. Anatomie d'une page

2. Les images

3. Les titres

4. Les paragraphes

5. Les listes à puces

6. Les liens

7. Les tableaux

8. Composition avec des DIV

9. Positionnement des DIV par CSS

02 - Les formulaires

1. Les attributs de la balise FORM

2. Les champs texte

3. Les champs pour mots de passe

4. Les boutons radio

5. Les cases à cocher

6. Les sélecteurs de fichiers

7. Les zones de texte

8. Les listes déroulantes

9. Les boutons d'envoi et d'annulation

10. La structuration d'un formulaire

03 - Vidéos et sons dans HTML

1. Intégrer une vidéo dans une page

2. Intégrer une vidéo avec un choix de sources

3. Intégrer une vidéo de Youtube par iframe

4. Intégrer du son dans une page HTML

5. Intégrer du son avec des formats alternatifs

6. Insérer du son par un lien

00 - Objectifs et évaluation du cours

Chapitres

1. Objectifs

2. Evaluation

Objectifs

Réaliser un site web conforme aux objectifs définis au moyens des langages de programmation HTML, CSS etJavascript

Evaluation

[1] Choix des contenus [15% à 25%]
– Choix correspondant aux directives avec des graphiques et images appropriées.
– Choix approprié d’éléments de texte et correspondant aux directives.
– Choix approprié des médias.
[2] Traitement de la proposition de solution [15% à 25%]
– Choix approprié d’une structure du site.
– Choix approprié de la navigation.
– Prise en compte des directives techniques, juridiques et des contenus.
– Choix approprié des formats des médias.
[3] Implémentation de la proposition de solution [20% à 50%]
– Respect d’une structure clair des fichiers du programme.
– Conversion et/ou conditionnement des médias selon les directives et proposition de solution.
– Mise en œuvre pratique des fonctionnalités imposées.
[4] Test du site web [15% à 25%]
– Garantie de la conformité standard du code source (Validation).
– Elaboration des cas de tests.
– Vérification des cas de tests.

01 - Les bases d'une page HTML

Anatomie d'une page

!DOCTYPE html — juste présent pour s’assurer que la page puisse fonctionner y compris sur les anciens navigateurs.
html — encadre tout le contenu de la page. Cet élément est parfois appelé l’élément racine.
head – est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché.
body – est celui qui contient tout le contenu que vous souhaitez afficher pour qu’il soit vu par les visiteurs.
meta charset= »utf-8″ — définit le jeu de caractères qui devrait être utilisé pour le document et indique que c’est utf-8. utf-8 regroupe l’ensemble des caractères connus utilisés dans les différents langages humains.
title – définit le titre de votre page. C’est ce titre qui apparaîtra sur l’onglet lorsque la page sera chargée. Il sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ma page de test</title>
    </head>
    <body>
        <!-- contenu de la page -->
	</body>
</html>

Les images

L’image utilisée est définie via l’attribut src (pour source) qui contient le chemin vers le fichier de l’image.

L’attribut alt (pour alternatif)contient un texte descriptif de l’image à l’intention des utilisateurs qui ne peuvent pas voir l’image.

<img src="images/firefox-icon.png" alt="Mon image de test">

Les titres

HTML contient des éléments pour 6 niveaux de titres : h1 à h6. La plupart du temps, 3-4 niveaux suffisent amplement.

<h1>Mon titre principal</h1>
<h2>Mon titre de section</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>

Les paragraphes

Vous pouvez placer votre texte dans un ou plusieurs paragraphes,

<p>Voici un paragraphe</p>

Les listes à puces

Les listes non-ordonnées construites avec l’élément ul (ul signifie unordered list)
Les listes ordonnées sont construites avec l’élément ol (ol signifie ordered list)
Chaque élément d’une liste est balisé avec un élément li (list item).

<ul>
  <li>technologues</li>
  <li>chercheurs</li>
  <li>bâtisseurs</li>
</ul>

<ol>
  <li>technologues</li>
  <li>chercheurs</li>
  <li>bâtisseurs</li>
</ol>

Les liens

Pour créer un lien, il suffit d’utiliser l’élément a (le a est un raccourci pour ancre ).

Ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l’adresse.

<a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>

Les tableaux

table = ouverture du tableau

tr = nouvelle ligne

td = zone pour les données data , 1 td = 1 colonne

        <table border="1" width="100%">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr>
                <td>lorem</td>
                <td>Lorem, ipsum. </td>
                <td>Lorem ipsum dolor sit.</td>
            </tr>

        </table>

Composition avec des DIV

Les DIV impriqués sont de plus en plus employés pour structurer des pages html.

Les ID et les classes sont destinés à les sélectionner individuellement depuis le code CSS ou Javascript.

 <div id="carre1" class="carre">
            <div id="carre2" class="carre">carré 2
            </div>
            <div id="carre3" class="carre">carré 3
            </div>
        </div>

Positionnement des DIV par CSS

Le positionnement par CSS permet de repositionner les éléments HTML entre eux.

 .carre {
                width:400px;
                height:400px;
                border: 1px solid red;
                background-color: #ff9999;
            }

#carre2 {
                width:150px;
                height:150px;
                border:1px solid green;
                background-color:#99ff99;
                position:absolute;
                top:20px;
                left:20px;
            }

#carre3 {
                width:150px;
                height:150px;
                border:1px solid blue;
                background-color:#9999ff;
                position:absolute;
                top:60px;
                left:60px;
            }

            #carre1 {
                position:relative;
                background-image: url(histoire.jpg);
            }

02 - Les formulaires

Les attributs de la balise FORM

name Spécifie le nom du formulaire.
action Spécifie l’URL du programme ou du script sur le serveur Web qui sera utilisé pour traiter les informations soumises via le formulaire.
method Spécifie la méthode HTTP utilisée pour l’envoi des données au serveur Web par le navigateur. La valeur peut être soit get (par défaut) soit post.
target Spécifie où afficher la réponse qui est reçue après avoir soumis le formulaire. Les valeurs possibles sont _blank, _self, _parent et _top.

<form method="post" action="xxx.php" target?"_blank">

Les champs texte

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Text Input Field</title>
</head>
<body>
    <form>
        <label for="user-name">Username:</label>
        <input type="text" name="username" id="user-name">
    </form>
</body>
</html>

Les champs pour mots de passe

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Password Input Field</title>
</head>
<body>
    <form>
        <label for="user-pwd">Password:</label>
        <input type="password" name="user-password" id="user-pwd">
    </form>
</body>
</html>

Les boutons radio

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Radio Buttons</title>
</head>
<body>
    <form>
        <input type="radio" name="gender" value="male" id="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" value="female" id="female">
        <label for="female">Female</label>
    </form>
</body>
</html>

Les cases à cocher

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Checkboxes</title>
</head>
<body>
    <form>
        <input type="checkbox" name="sports" value="soccer" id="soccer">
        <label for="soccer">Soccer</label>
        <input type="checkbox" name="sports" value="cricket" id="cricket">
        <label for="cricket">Cricket</label>
        <input type="checkbox" name="sports" value="baseball" id="baseball">
        <label for="baseball">Baseball</label>
    </form>
</body>
</html>

Les sélecteurs de fichiers

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML File Select box</title>
</head>
<body>
    <form>
        <label for="file-select">Upload:</label>
        <input type="file" name="upload" id="file-select">
    </form>
</body>
</html>

Les zones de texte

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Textarea</title>
</head>
<body>
	<form>
        <label for="address">Address:</label>
        <textarea rows="3" cols="30" name="address" id="address">

Les listes déroulantes

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Select Box</title>
</head>
<body>
    <form>
        <label for="city">City:</label>
        <select name="city" id="city">
            <option value="sydney">Sydney</option>
            <option value="melbourne">Melbourne</option>
            <option value="cromwell">Cromwell</option>
        </select>
    </form>
</body>
</html>

Les boutons d'envoi et d'annulation

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Submit and Reset Buttons</title>
</head>
<body>
	<form action="/examples/html/action.php" method="post">
        <label for="first-name">First Name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

La structuration d'un formulaire

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Grouping Form Controls in HTML</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Name</legend>            
            <label>Firstname: <input type="text" name="firstname"></label>            
            <label>Lastname: <input type="text" name="lastname"></label>
        </fieldset>
        <fieldset>
            <legend>Gender</legend>            
            <label><input type="radio" name="gender" value="male"> Male</label>            
            <label><input type="radio" name="gender" value="female"> Female</label>
        </fieldset>
        <fieldset>
        	<legend>Hobbies</legend>            
            <label><input type="checkbox" name="hobbies" value="soccer"> Soccer</label>
            <label><input type="checkbox" name="hobbies" value="cricket"> Cricket</label>
            <label><input type="checkbox" name="hobbies" value="baseball"> Baseball</label>
        </fieldset>
        <fieldset>
            <legend>Contact Details</legend>
            <label>Email Address: <input type="email" name="email"></label>
            <label>Phone Number: <input type="text" name="phone"></label>
        </fieldset>
    </form>
</body>
</html>