HTML 5

Tutoriel HTML 5: Apprenez à créer votre site web avec HTML5, CSS3 et BootStrap 4!

Cours HTML5 / CSS3 / BOOTSTRAP 4

Comment utiliser les dernières nouveautés HTML5 et CSS3 pour Créer des Applications Magnifiques que vos visiteurs adorent !

INTRODUCTION 1ÈRE PARTIE. HTML5

PARTIE 1. CRÉER UNE PAGE HTML5

– Le doctype

– La balise HTML

– L’en-tête du document

– L’encodage (le charset) du document

Le document HTML

PARTIE 2. METTRE EN FORME VOTRE TEXTE AVEC HTML5

– Le saut de ligne

– Texte en gras Texte en italique

– Texte en exposant et en indice

– Texte barré

Les commentaires avec HTML 5

Les caractères spéciaux

PARTIE 3. DÉFINIR LES TITRES, CITATIONS, LISTES ET LES PARAGRAPHES

– Les titres

– Les paragraphes

– Les citations

– Les séparateurs horizontaux

– Les listes numérotées

– Les listes imbriquées

PARTIE 4. CRÉER DES LIENS HTML5

– L’ajout d’un lien

– Lien vers une page

– Les liens dans une page

– Les liens vers un autre site

– Les liens vers une adresse mail

– Les liens vers un fichier

CHAPITRE 5. UTILISER LES IMAGES AVEC HTML5

– Les images

– L’ajout d’une image

– L’ajout d’un lien sur une image

– La bordure de l’image

– L’ajout d’une couleur en arrière-plan

PARTIE 6. LES NOUVELLES BALISES HTML5 HEADER SECTION NAV FOOTER

– Les nouvelles balises HTML5

PARTIE 7. UTILISER LES FORMULAIRES HTML5

– Organisez vos formulaires complexes

– Suggestion via un champ texte

– Vérifier une adresse mail

PARTIE 8. 3 TECHNIQUES POUR LES NOUVEAUX FORMULAIRES HTML5

– Un champ au format numérique

– Un champ au format date

– Un champ au format horaire

– Un champ de recherche

– La palette de couleurs

– Les curseurs

– Exemple d’ application

PARTIE 9. AJOUTER UN LECTEUR AUDIO HTML5 COMPATIBLE TOUT NAVIGATEUR

– L’ajout d’un fichier audio

– Les formats pris en charge

– La balise <source>

PARTIE 10. AJOUTER UN LECTEUR VIDÉO HTML5 COMPATIBLE TOUT NAVIGATEUR

– L’ajout d’un fichier vidéo

– Les formats pris en charge

– La balise <source>

PARTIE 11. UTILISER LA GÉOLOCALISATION AVEC HTML5 ET JAVASCRIPT

– La géolocalisation

PARTIE 12. UTILISER LE STOCKAGE LOCAL ET PERSISTANT DANS LE NAVIGATEUR

– Stocker des données dans le navigateur

– Le stockage temporaire

– Le stockage persistant

PARTIE 13. LES API JAVASCRIPT HTML5

– Les API JavaScript avec HTML5

PARTIE 14. Cinq BONNES PRATIQUES HTML5 SUR MOBILES

– Les sites pour mobiles avec HTML5

PARTIE 15. LE DOCTYPE HTML5 À UTILISER POUR LES MOBILES

– Écrire le doctype pour un site mobile

– La taille de la fenêtre d’affichage

– Écrire le doctype pour un site mobile

PARTIE 16. CRÉER DU TEXTE MULTI-LIGNES ET UN BACKGROUND AVEC CANVAS

2ÈME PARTIE. CSS3

PARTIE 17. MAÎTRISER LES BASES DE CSS3

– Utilité des feuilles de style

– Les sélecteurs CSS

– Les commentaires CSS

– Les unités de mesure CSS

– Les couleurs CSS

– CSS intégré à une balise HTML 5

– CSS dans la page HTML 5

– CSS dans un fichier .css

– Les CSS importés

– Les priorités CSS

PARTIE 18. METTRE EN FORME VOTRE TEXTE AVEC CSS3

– Texte en gras

– Texte en italique

– La taille du texte

– La couleur du texte

– Aligner du texte

– Texte souligné

PARTIE 19. UTILISER LES POLICES DE CARACTÈRES AVEC CSS3

– L’utilisation d’une police de caractères

– Le style d’une police de caractères

– Les polices système

PARTIE 20. PERSONNALISER VOTRE TEXTE AVEC CSS3 – PARTIE 1

– Les transformations du texte

– Indentation du texte

– Définir l’espace entre les lettres

PARTIE 21. PERSONNALISER VOTRE TEXTE AVEC CSS3 – PARTIE 2

– L’interligne du texte

– Ajouter des espaces vides

– Alignement d’un texte

– Définir la direction du texte

– Définir la hauteur et la largeur

PARTIE 22. PERSONNALISER LES LISTES NUMÉROTÉES ET IMBRIQUÉES

– Définir le type de puce de la liste

– Choisir une image pour la puce

– L’option retrait

PARTIE 23. UTILISER LES ARRIÈRE-PLANS AVEC CSS3

– Définir la couleur du fond

– Ajouter une image de fond

– Répéter l’image de fond

– Positionner l’image

– Fixer l’image de fond/ pas de défilement

PARTIE 24. UTILISER LES DIV AVEC CSS3

– Notion de bloc Type de bloc

– Largeur et hauteur d’un bloc

– Les marges externes

– Les marges intérieures

PARTIE 25. LES DIV CSS3 N’AURONT PLUS DE SECRET POUR VOUS !

– La couleur de la bordure

– L’épaisseur de la bordure

– Le style de la bordure

PARTIE 26. LA PERSONNALISATION DES LIENS AVEC CSS3

– La couleur des liens

– Les infobulles sur les liens

– Les liens sur les blocs

– Les différentes couleurs des liens

– Compléments

PARTIE 27. LES BALISES CSS3 SUPPLÉMENTAIRES

– Balises CSS pour les paragraphes

– Insérer du contenu

PARTIE 28. CRÉER DES TRANSITIONS POUR VOS MENUS

– Effectuer une transition sur un menu

PARTIE 29. DÉFINIR LA POSITION DE VOS BLOCS DIV

– Le positionnement statique

– Le positionnement relatif

– Le positionnement absolu

– Le positionnement fixe

– La propriété float

– La propriété clear

PARTIE 30. LES TECHNIQUES AVANCÉES POUR DÉFINIR LA POSITION DE VOS BLOCS DIV

– La superposition de blocs

– Le dépassement de la taille d’un bloc

– La visibilité du contenu d’un bloc

– Contrôler l’affichage d’un bloc

– Contrôler la visibilité du contenu d’un bloc

– Modifier le curseur de la souris

CHAPITRE 31. LES NOUVELLES BALISES CSS3 – PARTIE 1

– Les bords arrondis

– Les bordures à partir d’une image

– Ajouter une ombre sur du texte

– Créer un effet miroir

– Effectuer un fondu d’images

PARTIE 32. AJOUTER DES POLICES PERSONNALISÉES AVEC GOOGLE FONTS

– Les polices personnalisées

– Afficher des lettres creuses

CHAPITRE 33. UTILISER LES NOUVELLES BALISES CSS3 – PARTIE 2

– Un résumé sur les titres longs

– Saut à la ligne automatique pour un texte

– Redimensionner un bloc

– Effectuer un dégradé de couleur linéaire

– Effectuer un dégradé de couleur circulaire

– Ajouter de la transparence

PARTIE 34. UTILISER LES NOUVELLES POSSIBILITÉS CSS3 – PARTIE 3

– Rappel sur les préfixes CSS 3

– Présenter un contenu en colonnes

– Transformations CSS3

– Le texte défilant

– Les filtres graphiques

– Les masques

PARTIE 35. Deux STRATÉGIES POUR SIMPLIFIER VOTRE DÉVELOPPEMENT CSS3

PARTIE 36. ORGANISER VOTRE CODE CSS POUR PLUS D’EFFICACITÉ

– Apprenez à structurer votre code CSS en le divisant

– Exemple d’ application

PARTIE 37. STRATÉGIE CSS AVANCÉE POUR GAGNER UN TEMPS CONSIDÉRABLE

PARTIE 38. Cinq PRATIQUES CSS3 POUR DES APPLICATIONS PERFORMANTES SUR MOBILES

– Les bonnes pratiques CSS3

3ÈME PARTIE. LE FRAMEWORK BOOTSTRAP 4

PARTIE 39. PRÉSENTATION DU FRAMEWORK BOOTSTRAP 4

– Présentation du framework BootStrap 4

– Installation de BootStrap 4

– Documentation de BootStrap 4

– Exemple d’application

PARTIE 40. UTILISER LE SYSTÈME DE GRILLE DE BOOTSTRAP 4

– Les grilles

– Exemple d’application

PARTIE 41. MISE EN PAGE AVEC BOOTSTRAP 4

– Imbriquer des grilles

– Les options de BootStrap pour le contenu

PARTIE 42. EFFECTUER LA MISE EN FORME DU TEXTE AVEC BOOTSTRAP 4

– Les titres

– Les paragraphes

PARTIE 43. AFFICHER DES MESSAGES D’ALERTE AVEC BOOTSTRAP 4

– Afficher des messages informatifs

– Afficher des zones d’alertes

– Afficher des zones d’alertes « complexes »

– Minis bulles d’informations

– Les labels

PARTIE 44. UTILISER LES ICÔNES AVEC BOOTSTRAP 4

– Utiliser la bibliothèque Glyphicon

– Les icônes Font Awesome

– Font Awesome et les rotations

– Font Awesome et la superposition

PARTIE 45. AJOUTER DES LISTES AVEC BOOTSTRAP 4

– Les listes

– Les listes avancées

PARTIE 46. CRÉER DES LISTES MAGNIFIQUES AVEC BOOTSTRAP 4

– Les listes avec contenu HTML complexe

– Les listes avec media-object

PARTIE 47. CRÉER DES BOUTONS AVEC BOOTSTRAP 4

– Les boutons

– La taille des boutons

– Les menus à partir de boutons

PARTIE 48. CRÉER DES MENUS AVEC LES BOUTONS BOOTSTRAP 4

– Les menus déroulants

– Les boutons personnalisés

– Les options des boutons

– Les boutons de l’API JavaScript

PARTIE 49. CRÉER DES FORMULAIRES AVEC BOOTSTRAP 4

– Les formulaires

– Taille des éléments des formulaires

– Hauteur des éléments des formulaires

PARTIE 50. LES OPTIONS DES FORMULAIRES HTML5 AVEC BOOTSTRAP 4

– Les formulaires

– Les formulaires: Les options

PARTIE 51. CRÉER DES MENUS DE NAVIGATION AVEC BOOTSTRAP 4

– Les menus de navigation

– Les menus de navigation optimisés pour mobiles

– Menu avec une page « dynamique »

PARTIE 52. CRÉER DES MENUS À ONGLETS AVEC BOOTSTRAP 4

– Les menus avec et sans onglets

– Les menus verticaux

PARTIE 53. CRÉER DES PAGES NUMÉROTÉES AVEC LE FIL D’ARIANE

– Les pages numérotées

– Les boutons Suivant/ Précédent

– Le fil d’Ariane

PARTIE 54. CRÉER UN DIAPORAMA AVEC BOOTSTRAP 4

– Les images

– Les vignettes

– Le diaporama BootStrap 4

– API JavaScript

PARTIE 55. CRÉER DES INFOBULLES AVEC BOOTSTRAP 4

– Les infobulles

– Les options pour vos infobulles

PARTIE 56. LES OPTIONS AVANCÉES DES INFOBULLES TOOLTIP

– Les infobulles avancées ou popovers

– Manipuler les infobulles avancées avec l’API

PARTIE 57. CRÉER DES POP-UP MODALES

– Les pop-ups

– Les pop-up: Les options

–  Les pop-up: L’API JavaScript

PARTIE 58. CRÉER DES TABLEAUX AVEC BOOTSTRAP 4

– Les tableaux

– Les options

PARTIE 59. LA TECHNIQUE DE CRÉATION DE TABLEAUX AVANCÉS

– Les tableaux avancés

– Les tableaux avancés: Les options