L’exercice présenté dans cet article consiste à créer un menu responsive pour un site fictif de galeries de photos, c’est-à-dire un menu dont la disposition va s’adapter en fonction de l’écran de chaque visiteur. Il est important de renseigner une balise meta name= »viewport » dans le Head ainsi qu’un label avec un élément input type= »checkbox » associé pour permettre de déplier et de…Continue reading Un menu responsive
Catégorie : HTML
Bootstrap
Une définition de Wikipedia : Bootstrap est une collection d’outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur … etc. …) de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Installation de Bootstrap L’installation…Continue reading Bootstrap
Le langage SASS
Une définition de Wikipedia : Sass (Syntactically Awesome Stylesheets) est un langage de génération de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un langage de feuilles de style en cascade (CSS). C’est un langage de description qui est compilé en CSS. SassScript est un langage de script pouvant être utilisé à l’intérieur du code Sass. Deux…Continue reading Le langage SASS
La newsletter en MJML
Qu’est-ce que MJML ? MJML est un langage de balisage conçu pour faciliter la création de newsletter. Le moteur open-source se charge de traduire le MJML en HTML. Ce langage va aider pour la création d’e-mails responsive en générant le code qui formera la newsletter. Les utilisateurs de cet outil n’ont plus qu’à rédiger leur mailing…Continue reading La newsletter en MJML
La newsletter en html
Qu’est-ce qu’une newsletter ? Une newsletter est une lettre d’information envoyée périodiquement par mail à des abonnés. Composée de texte, illustrations, liens renvoyant vers votre site, son contenu peut être par exemple une sélection de produits, un article concernant des nouveautés dans votre entreprise. La newsletter un très bon moyen de fidéliser les clients. Trois bonnes…Continue reading La newsletter en html
Structure sémantique d’une page Web
Un extrait du site AlsaCréations : Les éléments de section HTML5 Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments…Continue reading Structure sémantique d’une page Web
Intégrer des liens et des images
Intégrer des Iframes Exercice d’intégration d’une iframe dans une page HTML avec menu renvoyant les liens dans l’iframe. Le code HTML : Aperçu en direct de la page avec Iframe et menu : Lien vers « Le site de l’artiste » : Lien vers « Youtube » : Lien vers « Article sur Sud-Ouest » : Lien vers « Quintessence » : Lien…Continue reading Intégrer des liens et des images
Construire des tableaux en HTML
Les tableaux, obsolètes depuis l’utilisation du CSS, servent encore pour les newsletters. Fusion de cellules à l’horizontale : colspan= »2″ (pour 2 cellules) Fusion de cellules à la verticale : rowspan= »2″ (pour 2 cellules) Fusion de cellules à l’horizontale et la verticale : colspan= »2″ rowspan= »2″ (pour 2 cellules à l’horizontale et 2 cellules à la verticale)…Continue reading Construire des tableaux en HTML
Créer des listes
Structurer des listes en HTML A partir d’un exercice donné, il m’a été demandé de structurer un texte en plusieurs formats de listes. Liste ul : liste à puces Le code pour faire une liste à puces se décline de la façon suivante : Les balises <ul></ul> pour déclarer la liste à puces Les balises <li></li>…Continue reading Créer des listes
Structurer et mettre en forme du texte pour le Web
Un document HTML commence toujours par : <!DOCTYPE html> <html lang=« en »> Puis, c’est suivi par : <head> <meta charset=« UTF-8 »> <title>Document</title> <link rel=« stylesheet » type=« text/css » href=« css/styles.css »> </head> La balise meta est une balise orpheline. UTF-8 est le type de codage de caractère utilisé dans le document. Quelques raccourcis de Brackets pratiques utilisés couramment : ctrl + Alt…Continue reading Structurer et mettre en forme du texte pour le Web