Table des matières

[00] Généralités

1. Type des sites

2. Etapes d'un projet web

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

04 - CSS micro-exemples

1. Opacité

2. Les propriétés @media

3. Les boîtes

4. Les couleurs de caractères et les fonds

5. Les images de fond

6. Les dégradés de couleurs

7. Les effets d'ombre d'une boîte

8. La position relative

9. La position absolute

10. La position fixed

11. L'alignement des textes

12. Les pseudos-classe de a

13. Les pseudo-éléments

14. Sélections d'éléments par attributs

15. Transitions sans Javascript

16. Animations avancées

17. Animations avancées

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

Bootstrap - Exemple

1. Page Bootstrap ready

2.

HTML | test n°1

1. HTML | test n°1

1104Quel code hexadécimal est la couleur bleue ?

2. HTML | test n°1

1103Quelle propriété CSS change la couleur de fond d'un élément ?

3. HTML | test n°1

1102Comment ajoute-t-on un commentaire en CSS ?

4. HTML | test n°1

1101Quelle est la syntaxe correcte pour obtenir un texte bleu ?

5. HTML | test n°1

1100Quelle balise HTML initie des styles ?

6. HTML | test n°1

1099Que signifie l'acronyme CSS ?

7. HTML | test n°1

1098Quel est le DOCTYPE correct pour initier une page en HTML 5 ?

8. HTML | test n°1

1097Quelle balise indique le titre d'une page HTML affiché dans l'onglet du navigateur ?

9. HTML | test n°1

1096Les commentaires en HTML se placent entre

10. HTML | test n°1

1095Quelle balise HTML insert une image dans une page ?

11. HTML | test n°1

1094Quelle est la balise désignant un champ de saisie de texte ?

12. HTML | test n°1

1093Quelle balise initialise une liste à puces ?

13. HTML | test n°1

1092Quelle balise initialise une liste numérotée ?

14. HTML | test n°1

1091Quelle balise ouvre un lien dans un nouvel onglet ?

15. HTML | test n°1

1090Quel caractère marque la fin une balise HTML ? 16. HTML | test n°1

1089Quelle chaîne représente un lien hypertexte correct ?

17. HTML | test n°1

1088Quelle balise marque un texte important ?

18. HTML | test n°1

1087Quelle balise représente un saut de ligne ?

19. HTML | test n°1

1086Quelle est la balise représentant le niveau le plus haut des titres ?

20. HTML | test n°1

1085Qui a créé le standard HTML ?

21. HTML | test n°1

1084Quel est la signification de l'acronyme HTML ?

22. HTML | test n°1

CIE1B - Un site web en code

HTML | Test n°2

1. HTML | Test n°2

1123Une page HTML peut-elle comporter plusieurs éléments avec des CLASS identiques ?

2. HTML | Test n°2

1122Une page HTML peut-elle comporter plusieurs éléments avec des ID identiques ?

3. HTML | Test n°2

1121Quelle propriété CSS gère la taille des polices ?

4. HTML | Test n°2

1120Quelle propriété CSS change la couleur du texte ?

5. HTML | Test n°2

1119Quelle instruction CSS affiche une couleur de fond à tous les éléments H2 d'une page ?

6. HTML | Test n°2

1118Quel attribut de la balise permet d'afficher du texte à la place d'une image non affichable ?

7. HTML | Test n°2

1117Quel élément html désigne le titre d'une page affiché dans l'onglet du navigateur?

8. HTML | Test n°2

1116Quelle commande HTML permet d\'insérer une image en fond de page ?

9. HTML | Test n°2

1115A quoi sert le sélecteur de classe : h2.nomDeClasse ?

10. HTML | Test n°2

1114Combien de règles peut contenir un fichier CSS ?

11. HTML | Test n°2

1113Quel symbole sépare la propriété de sa valeur ?

12. HTML | Test n°2

1112Où est-il conseillé de placer le code CSS ?

13. HTML | Test n°2

1111A quoi sert le langage CSS ?

14. HTML | Test n°2

1110Que signifie CSS ?

15. HTML | Test n°2

1109Quelle est la syntaxe pour déclarer l'encodage des caractères du document en UTF-8 ?

16. HTML | Test n°2

CIE1B - Un site web en code

HTML | Test n°4

1. HTML | Test n°4

1149Modifie la marge exterieure d'un objet HTML

2. HTML | Test n°4

1148Détermine la couleur du texte

3. HTML | Test n°4

1147Permet de choisir le style d'une liste à puces

4. HTML | Test n°4

1145Sélectionne en CSS l'élément ayant pour id="toto"

5. HTML | Test n°4

1141Arrondit les angles un object html

6. HTML | Test n°4

1144Définit la marge intérieure d'un objet HTML

7. HTML | Test n°4

1143Est une couleur verte

8. HTML | Test n°4

1142Peut être "relative" ou "absolute"

9. HTML | Test n°4

1140Change la couleur de fond d'un élément

10. HTML | Test n°4

CIE1B - Un site web en code

[00] Généralités

Chapitres

1. Type des sites

2. Etapes d'un projet web

Type des sites

Site 100% personnalisé en code
Site avec CMS (WordPress, Joomla)
Site en Cloud (Wix, Weebly, Jimdo… )

Etapes d'un projet web

Discussion avec le client
Définition du public cible
Création de la charte graphique
Inventaire des textes, images et vidéos (droits)
Créer le site (codage)
Tester liens / images / navigateurs
Référencer ( Google Analytics, Search tools )
Suivre le référencement
Suivre les mises à jour techniques
Maintenir le contenu / mise à jour réseaux sociaux

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);
            }

04 - CSS micro-exemples

Opacité

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de CSS Opacity</title>
<style>
	p {
		opacity: 0.1;
		padding: 10px;
		background: #00ff00;
	}
</style>
</head>
<body>
    <p>Paragraphe opaque à 70%.</p>
</body>
</html>

Les propriétés @media

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS media types</title>
<style>
	@media screen{
        body {
            color: #32cd32;
			font-family: Arial, sans-serif;
            font-size: 14px;
        }
    }
    @media print {
        body {
            color: #ff6347;
			font-family: Times, serif;
            font-size: 12pt;
        }
    }
    @media screen, print {
        body {
            line-height: 1.2;
        }
    }
</style>
</head>
<body>
    <h1>CSS Media Types</h1>
    <p><strong>Note:</strong> L'apparence sera différente si vous affichez cette page dans un navigateur ou si vous l'imprimez.</p>
</body>
</html>

Les boîtes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de CSS3 Rounded Corners</title>
<style>
	.box {
		width: 300px;
		height: 150px;
		background: #ffb6c1;
		border: 2px solid #f08080;
		border-radius: 20px;
	}
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Les couleurs de caractères et les fonds

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS RGBA Color </title>
<style> 
    h1 {
        color: rgba(0,0,255,0.5);
    }
    p {
        background-color: rgba(0%,0%,100%,0.3);
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Les images de fond

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de dimensionnement d'arrière fond</title>
<style>
	.box {
		width: 250px;
		height: 150px;
		background: url(https://i.ytimg.com/vi/CSimvD_5CCQ/maxresdefault.jpg) no-repeat;
		background-size: cover;
		border: 6px solid #333;
	} 
</style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

Les dégradés de couleurs

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple de dégradé de gauche à droite</title>
<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Fallback pour navigateurs incompatibles */
		background: red;
		/* Pour Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(left, red, yellow);
		/* Pour Internet Explorer 10 */
		background: -ms-linear-gradient(left, red, yellow);
		/* Standard*/
		background: linear-gradient(to right, red, yellow);
	}
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html>

Les effets d'ombre d'une boîte

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example de CSS3 Box Shadow </title>
<style>      
    .box{
		width: 200px;
		height: 150px;
		background: #ccc;
		box-shadow: 5px 5px 10px #999;
	}
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

La position relative

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de position relative CSS </title>
<style>
    .box{
        position: relative;
        left: 100px;
        color: #fff;
        background: #00c4cc;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Box en position relative</h2>
            <div><strong>Note:</strong> La boîte est glissée à droite par rapport à se position naturelle.</div>
        </div>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>

La position absolute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de CSS "Absolute Positioning"</title>
<style>
    .box{
        position: absolute;
        top: 200px;
        left: 100px;
        color: #fff;
        width: 60%;
        background: #4cafdf;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        position: relative;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Absolute Positioned Box</h2>
            <div><strong>Note:</strong> Cette boîte est positionnée de manière absolue à la DIV. Elle scrolle avec la page.</div>
        </div>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>

La position fixed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de position fixe  CSS</title>
<style>
    .box{
        position: fixed;
        top: 200px;
        left: 100px;
        color: #fff;
        width: 60%;
        background: #f44712;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        position: relative;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Fixed Positioned Box</h2>
            <div><strong>Note:</strong> ThLa position est fixée par rapport au viewport</div>
        </div>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>

L'alignement des textes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple d'alignement du texte</title>
<style>
    h1 {
        text-align: center;
    }
    p {
        width: 400px;
        text-align: justify;
    } 
</style>
</head>
<body>
    <h1>Text-align Effect</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
</body>
</html>

Les pseudos-classe de a

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de Pseudo-classe</title>
<style> 
    a:link {
        color: blue;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }
</style>
</head>
<body>        
    <p>Visit <a href="https://topbee.ch" target="_blank">localhost</a></p>
</body>
</html>

Les pseudo-éléments

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de pseudo élément</title>
<style> 
    p.article::first-letter {
        color: #00ff00;
        font-size: xx-large;
    }
</style>
</head>
<body>        
    <p class="article">Article exemple.</p>
    <p>Ce paragraphe est normal.</p>
</body>
</html>

Sélections d'éléments par attributs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple par sélecteur d'attributs</title>
<style>
    input[type="text"] {
        border:1px solid red;
    }
    input[type="submit"] {
        border:1px solid green;
    }
</style>
</head>
<body>
    <form>
        <input type="text">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Transitions sans Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example de Transition CSS3</title>
<style>
    button {
        color: #fff;
        border: none;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        -webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
        transition: background 2s; /* For modern browsers */
    }
    button:hover {
        background: #3cc16e;
    }
</style>
</head>
<body>
	<button type="button">Survolez-moi</button>
</body>
</html

Animations avancées

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Translate Animation</title>
<style>
    .box {
		margin: 50px;
        width:153px;
        height:103px;
        background: url("/examples/images/tortoise-transparent.png") no-repeat;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: moveit;
        -webkit-animation-duration: 2s;
        /* Standard syntax */
        animation-name: moveit;
        animation-duration: 2s;
    }
     
    /* Chrome, Safari, Opera */
    @-webkit-keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
     
    /* Standard syntax */
    @keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
</head>
<body>
    <p><strong>Note:</strong> Clickez sur "Show Output" pour répéter l'animation.</p>
    <div class="box"></div>
</body>
</html>

Animations avancées

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Translate Animation</title>
<style>
    .box {
		margin: 50px;
        width:153px;
        height:103px;
        background: url("/examples/images/tortoise-transparent.png") no-repeat;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: moveit;
        -webkit-animation-duration: 2s;
        /* Standard syntax */
        animation-name: moveit;
        animation-duration: 2s;
    }
     
    /* Chrome, Safari, Opera */
    @-webkit-keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
     
    /* Standard syntax */
    @keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
</head>
<body>
    <p><strong>Note:</strong> Clickez sur "Show Output" pour répéter l'animation.</p>
    <div class="box"></div>
</body>
</html>

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>

03 - Vidéos et sons dans HTML

Intégrer une vidéo dans une page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Intégrer une vidéo</title>
</head>
<body>
	<video controls="controls" src="https://www.topbee.ch/files/video.mp4">
        Votre navigateur ne supporte pas les balises HTML5.
    </video>
</body>
</html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sources alternatives</title>
</head>
<body>
	<video controls="controls">
        <source src="https://www.topbee.ch/files/video.mp4" type="video/mp4">
        <source src="https://www.topbee.ch/files/video.ogv" type="video/ogg">
                Votre navigateur ne supporte pas les balises HTML5.
    </video>
</body>
</html>

Intégrer une vidéo de Youtube par iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Intégrer une vidéo de Youtube avec iframe</title>
</head>
<body>
	<iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
    <p>Source: <a href="https://www.youtube.com/watch?v=YE7VzlLtp-4" target="_blank" rel="nofollow">https://www.youtube.com/watch?v=YE7VzlLtp-4</a></p>
</body>
</html>

Intégrer du son dans une page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Intégrer du son dans une page HTML</title>
</head>
<body>
	<audio controls="controls" src="https://www.topbee.ch/files/audio.mp3">
        Votre navigateur n'est pas compatible HTML5
    </audio>
</body>
</html

Intégrer du son avec des formats alternatifs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spécifie des sources alternatives</title>
</head>
<body>
    <audio controls="controls">
        <source src="https://www.topbee.ch/files/audio.mp3" type="audio/mpeg">
        <source src="https://www.topbee.ch/files/audio.ogg" type="audio/ogg">
        Votre navigateur n'est pas compatible HTML5
    </audio>
</body>
</html>

Insérer du son par un lien

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Lien vers unb son</title>
</head>
<body>
    <p><a href="https://www.topbee.ch/files/audio.mp3">Track 1</a></p>
    
</body>
</html>

Bootstrap - Exemple

Page Bootstrap ready

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Ma première page</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


    </head>
    <body>
        <h1>Titre visible</h1>
        <!-- 1 seul élémenmt H1 par page  -->

        <h2>Sous-titre</h2>
        <h3>Titre de chapitre</h3>
        <h4>...</h4>

        <!-- h1 .. h6 -->


        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    </body>
</html>

HTML | test n°1 Envoyé 19.0 / 22.0 (86%)

19.0 / 22.0 (86%)

Question 1 :

Question 2 :

\

/

;

?

Question 3 :

font-family

police-size

font-size

text-size

Question 4 :

ol

num

ul

li

Question 5 :

Les commentaires n'existent pas en HTML

Faux

Juste

Question 6 :

<head>

<css>

<style>

Question 7 :

Question 8 :

#ffffff

#ff0000

#0000ff

#000000

Question 9 :

Hook Transfer Middle Learning

Hyper Text Markup Language

Hyper Test Manager Login

Hors Tableau Manque Logique

Question 10 :

/*commentaire*/

'commentaire

//commentaire

#commentaire

Question 11 :

<h1>

<head>

<title>

<body>

Question 12 :

<i>

<b>

Question 13 :

<!DOCTYPE html5>

<!HTML 5>

<!DOCTYPE html>

<!DOCTYPE>

Question 14 :

Question 15 :

ul

hr

br

a

img

Question 16 :

Cascade Style Sheets

Color Style Sheet

Computer Stylée Sheets

Creative Style Sheet

Question 17 :

<ol>

<li>

<puce>

<ul>

Question 18 :

Question 19 :

h4

heder

h1

head

Question 20 :

Google

Twitter

Philips

WWW Consortium

Question 21 :

color

bgcolor

background-color

ground

Question 22 :

HTML | Test n°2 Envoyé 11.0 / 16.0 (68%)

11.0 / 16.0 (68%)

Question 1 :

Dans les images

Dans le <body> d'une page

Dans un fichier externe utilisable pour plusieurs pages

Entre les balises <head>

Question 2 :

h2 {background-color:red;}

h2.all {background-color:red;}

h2 {background-color=red;}

all.h2 {background-color:red;}

Question 3 :

Crosse Sample Syntax

C'est une assurance maladie

Cascading Style Sheets

Create Simple Samples

Question 4 :

<body>

<head>

<title>

<h1>

Question 5 :

Non

Oui

Question 6 :

point .

point-virgule ;

virgule ,

deux-points :

Question 7 :

color

text-color

colour

font-color

Question 8 :

Question 9 :

A établir une règle pour tous les éléments h2

A établir une règle pour les éléments h2 dont la classe est nomDeClasse

A établir une règle pour les éléments nomDeClasse dont la classe est h2

Ca ne sert à rien

Question 10 :

Non, un élément HTML ne peut faire référence qu'à une seule classe

Oui, sous la forme : class='class1;class2;classx...'

Oui, sous la forme class='class1 class2'

Question 11 :

300

30

Illimité

3000

Question 12 :

Non

Oui

Question 13 :

Question 14 :

A insérer du contenu dans une page internet

A ajouter du style aux documents web

A structurer un site web

A réaliser des pages dynamiques

Question 15 :

font-size

text-style

text-size

police-size

Question 16 :

halt

legend

alt

substitute

HTML | Test n°4 Envoyé 10.0 / 10.0 (100%)

10.0 / 10.0 (100%)

Question 1 :

#0000ff

#ffffff

#ff0000

#00ff00

Question 2 :

list-style-type

list-objects

list-bullets

list-dots

Question 3 :

#toto

/*toto*/

>toto

.toto

Question 4 :

chroma

color

couleur

text-color

Question 5 :

background-color

color

background-image

border-color

Question 6 :

left

color

situation

position

Question 7 :

border

padding

space

margin

Question 8 :

border-radius

angle

rounded

corner

Question 9 :

space

margin

padding

border

Question 10 :

police

font-family

font-size

text

La formation

Chapitres

Type des sites

Etapes d'un projet web

Chapitres

Objectifs

Evaluation

Anatomie d'une page

Les images

Les titres

Les paragraphes

Les listes à puces

Les liens

Les tableaux

Composition avec des DIV

Positionnement des DIV par CSS

Opacité

Les propriétés @media

Les boîtes

Les couleurs de caractères et les fonds

Les images de fond

Les dégradés de couleurs

Les effets d'ombre d'une boîte

La position relative

La position absolute

La position fixed

L'alignement des textes

Les pseudos-classe de a

Les pseudo-éléments

Sélections d'éléments par attributs

Transitions sans Javascript

Animations avancées

Animations avancées

Les attributs de la balise FORM

Les champs texte

Les champs pour mots de passe

Les boutons radio

Les cases à cocher

Les sélecteurs de fichiers

Les zones de texte

Les listes déroulantes

Les boutons d'envoi et d'annulation

La structuration d'un formulaire

Intégrer une vidéo dans une page

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

Intégrer une vidéo de Youtube par iframe

Intégrer du son dans une page HTML

Intégrer du son avec des formats alternatifs

Insérer du son par un lien

Page Bootstrap ready

19.0 / 22.0 (86%)

Question 1 :

Question 2 :

Question 3 :

Question 4 :

Question 5 :

Question 6 :

Question 7 :

Question 8 :

Question 9 :

Question 10 :

Question 11 :

Question 12 :

Question 13 :

Question 14 :

Question 15 :

Question 16 :

Question 17 :

Question 18 :

Question 19 :

Question 20 :

Question 21 :

Question 22 :

11.0 / 16.0 (68%)

Question 1 :

Question 2 :

Question 3 :

Question 4 :

Question 5 :

Question 6 :