- Site 100% personnalisé en code
- Site avec CMS (WordPress, Joomla)
- Site en Cloud (Wix, Weebly, Jimdo… )
La formation
CIE1C - Un site Web en code
[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 entre10. 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 codeHTML | 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 balise7. 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 codeHTML | Test n°3
1. HTML | Test n°3
2221Quelle est la couleur #FF00002. HTML | Test n°3
2220Quelle est la valeur correcte pour la propriété CSS font-style3. 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 employer15. HTML | Test n°3
CIE1C - Un site Web en codeHTML | Test n°4
1. HTML | Test n°4
1149Modifie la marge exterieure d'un objet HTML2. HTML | Test n°4
1148Détermine la couleur du texte3. HTML | Test n°4
1147Permet de choisir le style d'une liste à puces4. 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 html6. HTML | Test n°4
1144Définit la marge intérieure d'un objet HTML7. HTML | Test n°4
1143Est une couleur verte8. HTML | Test n°4
1142Peut être "relative" ou "absolute"9. HTML | Test n°4
1140Change la couleur de fond d'un élément10. HTML | Test n°4
CIE1C - Un site Web en codeChapitres
1. Type des sites
2. Etapes d'un projet web
Type des sites
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
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.
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.
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
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
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
Page Bootstrap ready