Catégorie : HTML | CSS

Une section full adaptive with background and text

Une section simple mais en utilisant le mode adaptive (vs responsive) Consignes : Créer une section HTML Section 1920 Section 1280 Section 700 Boxed : max-width :1920px Pour les ordinateurs de bureau : Affiche une image de 1920 et le body ne dépasse pas 1920 ! Pour les ordinateurs portables : Affiche une image de 1280 Pour les tablettes et […]

Lire la suite
Les Formulaires

Cliquez ici pour passer en full-width. Temps imparti : maximum 4 heures sur plateau. Modalité : Version vidéo ET version texte Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton… tout est possible ! Nous arrivons […]

Lire la suite
HTML : Récapitulatif pour révision et/ou fixation pour le mois de décembre

PART 1 Cours Complet HTML CSS – Tutoriel pour Débutants et Confirmés [Partie 1/3]. Cette partie contient les chapitres 1, 2 et 3 de mon cours complet sur le HTML et le CSS. Dans cette première partie donc, nous allons tout d’abord présenter les objectifs du cours, puis répondre à la question “pourquoi apprendre le […]

Lire la suite
HTML

Intégration Objectif : expérimenter en autonomie le concept d’intégration. Utiliser le TP restaurant HTML sur la base de votre intégration constituée pour l’instant d’images. Rappel : https://ada-lovelace.fr/2019/11/19/html-css-photoshop/ Dupliquer vos fichiers. Enlever les zones d’images blanches ou de couleurs par des margins paddings. Remplacer les images contenant du texte par du texte ( h1 h2… p […]

Lire la suite
Flex box : approfondissement

Expérimentation / reproduction / reporting sur toolbox Cette vidéo va permettre de faire un bilan sur vos connaissances flexbox. Certains nouveaux concepts seront abordés. Des mises en pratique seront proposées. Cas n1 : vous suivez la vidéo. Vous y arrivez. Parfois c’est chaud mais vous y arrivez. Cas n2 : vous suivez la vidéo. Vous […]

Lire la suite
HTML : les tableaux

Un tableau doit respecter les quelques règles suivantes : Le tableau est encadré par les balises <TABLE> et </TABLE>. Le titre du tableau est encadré par <CAPTION> </CAPTION>. Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau). Les cellules d’en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau). Enfin, les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau). […]

Lire la suite
Les Balises < strong >, < b >, < em > et < i >

Les différentes balises : <i> : Indique une portion de texte “décalée” du contenu principal (par défaut en italique) <b> : Indique un texte mis en valeur différemment (par défaut en gras) <em> : Indique une portion de texte affectée par une emphase. <strong> : Indique une mise en exergue plus forte (renforcement) Une question se pose fréquemment : quel est […]

Lire la suite
HTML & CSS : les commentaires de code

Exemple d’un commentaire en HTML5 Définition et usage des commentaires en HTML5 En HTML5, les commentaires ne s’affichent pas dans le navigateurs. Ils sont insérés dans le code source et servent de repères. Les commentaires peuvent tenir sur plusieurs lignes. Les commentaires sont utilisé pour expliquer une partie de code, très pratique lorsque la page atteint […]

Lire la suite
Flexbox : wrap

La propriété flex-wrap définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur plusieurs lignes. En clair, si les “flex-items” ont le droit de passer à la ligne ou non. Les valeurs de flex-wrap sont : nowrap (les éléments ne passent pas à la ligne, valeur par défaut) wrap (les éléments passent à la ligne […]

Lire la suite
Flexbox : Align-items

La propriété CSS FlexBox Parente ALIGN-ITEMS permet de positionner les blocs enfants sur l’axe vertical. La propriété align-items est une sous-propriété du module Flexible Box Layout (Flexbox). La propriété align-items accepte 5 valeurs : flex-start : le premier bord (début) des items est placé au début de la ligne transversale flex-end : le dernier bord (fin) des items est placé à la fin […]

Lire la suite
Flexbox : justify-content

La propriété CSS FlexBox Parente JUSTIFY-CONTENT permet de positionner les blocs enfants sur l’axe horizontal. /* CSS justify-content: flex-start | flex-end | center | space-between | space-around */ .conteneur {display:flex; justify-content:center;} La propriété justify-content accepte 5 valeurs : flex-start (par défaut) : les items sont regroupés au début de la ligne flex-end : les items sont regroupés à la […]

Lire la suite

TP : découpage sur PSD fourni, intégration d’images en background avec FLEXBOX Source PSD : Aide : Une fois “tranchées”, exportez vos images nommées img1.jpg, img2.jpg etc dans un répertoire online : votrenomdedomaine/laboratoire/img_online/002/ Pas de texte. Pas de paragraphe. Seulement des images. Deux niveaux d’intégration en fonction de vos compétences. Niveau 1 : chaque image […]

Lire la suite
Flex Box – Part 1

Flex Box – Part 1 Cette séance est une adaptation d’un article de developer.mozilla.org. sources : developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexbox Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l’espace disponible. Cet article en explique tous […]

Lire la suite

Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Propriétés de mise en forme du texte Propriété Valeurs (exemples) Description font-family police1, police2, police3, serif, sans-serif, monospace Nom de police @font-face Nom et source de la police Police personnalisée font-size 1.3em, 16px, 120%… Taille du texte font-weight bold, normal Gras font-style italic, […]

Lire la suite