021 626 08 00
info@cyberiade.ch
021 626 08 00 info@cyberiade.ch

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

2. 1

3. 1

4. 1

5. 1

6. 1

7. 1

8. 1

9. 1

10. 1

11. 1

12. 1

13. 1

14. 1

15. 1

16. 1

17. 1

18. 1

19. 1

20. 1

21. 1

22. 1

HTML | Test n°2

1. 1

2. 1

3. 1

4. 1

5. 1

6. 1

7. 1

8. 1

9. 1

10. 1

11. 1

12. 1

13. 1

14. 1

15. 1

16. 1

HTML | Test n°3

1. 2

2. 2

3. 2

4. 1

5. 1

6. 1

7. 1

8. 1

9. 1

10. 1

11. 1

12. 1

13. 1

14. 1

15. 2

HTML | Test n°4

1. 1

2. 1

3. 1

4. 1

5. 1

6. 1

7. 1

8. 1

9. 1

10. 1

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

Contact

Adresse

Ch. des Fleurettes 28, 1007 Lausanne

Téléphone

021 626 08 00

Traitement...
Votre message a bien été envoyé. Merci!