021 626 08 00
info@topbee.ch

Connexion

La formation

CIE1C - Un site Web en code

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

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

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

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

CIE1C - 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

CIE1C - Un site Web en code

HTML | Test n°3

1. HTML | Test n°3

2221Quelle est la couleur #FF0000

2. HTML | Test n°3

2220Quelle est la valeur correcte pour la propriété CSS font-style

3. HTML | Test n°3

1142Peut être "relative" ou "absolute"

4. HTML | Test n°3

1137Qu'est un site dit responsif ?

5. HTML | Test n°3

1136Quelle police est avec Serif ?

6. HTML | Test n°3

1135Quels sont les méthodes d'envoi des formulaires au serveur web ?

7. HTML | Test n°3

1134Quel est le nom de couleur correspondant au code #00ff00 ?

8. HTML | Test n°3

1133Quelle balise débute un formulaire de saisie ?

9. HTML | Test n°3

1132Quel est le nom conventionnel de la page par défaut d'un site web ?

10. HTML | Test n°3

1131Quel est le port par défaut d'un site web (http://... ) ?

11. HTML | Test n°3

1130Que signifie le "s" dans https ?

12. HTML | Test n°3

1129Quel est le port par défaut d'un serveur FTP ?

13. HTML | Test n°3

1128Que signifie l'acronyme FTP ?

14. HTML | Test n°3

2223Pour créer un style commun à plusieurs éléments HTML, il faut employer

15. HTML | Test n°3

CIE1C - 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

CIE1C - Un site Web en code
[00] Généralités

Chapitres

1. Type des sites

2. Etapes d'un projet web

Type des sites

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

Etapes d'un projet web

  1. Discussion avec le client
  2. Définition du public cible
  3. Création de la charte graphique
  4. Inventaire des textes, images et vidéos (droits)
  5. Créer le site (codage)
  6. Tester liens / images / navigateurs
  7. Référencer ( Google Analytics, Search tools )
  8. Suivre le référencement
  9. Suivre les mises à jour techniques
  10. 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

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.

Les titres

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

Les paragraphes

Vous pouvez placer votre texte dans un ou plusieurs paragraphes,

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).

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.

Les tableaux

table = ouverture du tableau

tr = nouvelle ligne

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

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.

Positionnement des DIV par CSS

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

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.

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

03 - Vidéos et sons dans HTML

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

04 - CSS micro-exemples

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

Bootstrap - Exemple

Page Bootstrap ready

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

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 :

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

11.0 / 16.0 (68%)

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 :

HTML | Test n°3 Envoyé 9.0 / 10.0 (90%)

9.0 / 10.0 (90%)

Question 1 :

Question 2 :

Question 3 :

Question 4 :

Question 5 :

Question 6 :

Question 7 :

Question 8 :

Question 9 :

Question 10 :

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

10.0 / 10.0 (100%)

Question 1 :

Question 2 :

Question 3 :

Question 4 :

Question 5 :

Question 6 :

Question 7 :

Question 8 :

Question 9 :

Question 10 :

Please check answer! 3 secs ago
Répondez s'ils vous plaît à la question encadrée de rouge.