Elementor est un constructeur de page pour WordPress qui se présente sous la forme d’un plugin. Il permet de concevoir des pages complexes sur WordPress sans coder, grâce à l’utilisation de modèles de page tout prêts ou en partant de zéro, à ajouter en glisser déposer dans votre contenu. Tous les changements sont visibles en […]
Catégorie : WEB DESIGN
créer un effet parallaxe avec HTML & CSS
vidéo = créer un parallaxe avec CSS modèles de structure html et CSS Code html du modèle <!doctype html> <html lang=« fr »> <head> <meta charset=« utf-8 »> <title>Parallax Scrolling</title> <!– la balise qui permet le responsive –> <meta name=« viewport » content=« width=device-width, initial-scale=1 » /> <!– Copier le lien Google Fonts –> <link href=« https://fonts.googleapis.com/css?family=Montserrat:200,200i,400,400i,700,700i,900,900i » rel= »stylesheet »> <!– Créer le lien […]
exercice 5 – position display
La displaypropriété spécifie le comportement d’affichage (le type de boîte de rendu) d’un élément. Consultez la documentation proposée par w3schools.com pour recenser les valeurs des propriétés possibles : 3schools.com/CSSref/pr_class_display.asp aligner la navigation sur le logo Sur la balise <header>, la propriété display: flex; place tous les conteneurs les uns à côté des autres ! […]
exercice 4 – mise en page flexbox
CSS, flux, héritage… display:flex enrichir les balises meta de la balise <head> 1. la balise <meta name= »viewport » content= »width=device-width, initial-scale=1.0″> Le Viewport désigne schématiquement la surface de la fenêtre du navigateur et est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « Responsive Web Design ». 2. […]
exercice 3 – css, un fichier lié à la page html
CSS, un fichier lié à la page HTML Apprenez à créer votre site web avec html 5 et CSS 3 : openclassrooms.com/fr/ dossier racine A terme, votre dossier devra contenir : 1 dossier pour les images + index.html + dossier « fonts » et 1 fichier monstyle.css Créez 2 nouveaux fichiers dans Sublime Text : index.html […]
exercice 2 – créer des liens
dossier racine Veillez à créer un dossier racine pour chaque site. Dans ce dossier, on trouve : 1 dossier pour les images (nommé généralement « img ») + index.html créer des liens 1. Cliquer sur une petite image pour l’afficher en grand La balise <a href= »summer.jpg »> pointe vers la grande image tandis que la balise <img […]
exercice 1 – structure html et balises
HTML & CSS HTML, les balises Revoir les deux articles ci-dessus si besoin avant de réaliser l’exercice ! méthode 1. Créer les balises <header> <nav> <section> et <footer> qui structure le fichier index.html 2. Insérer <ul> pour visualiser une liste et créer des liens <a href> 3. Créer des balises <section> <div> […]
ajouter des plugins WP
De base, WordPress fonctionne avec les articles ou les pages. Mais on peut lui ajouter de nombreuses fonctionnalités : un système de sauvegarde, une « newsletter », un espace “membres”, une galerie d’images, un suivi du référencement SEO. Les extensions vont ajouter ces fonctionnalités à votre site. Un plugin (une extension, en Français) sert à ajouter de […]
bootstrap navigation & bouton
header – unité de mesure CSS3 CSS3 a de nouvelles valeurs pour le dimensionnement des objets par rapport à la taille de la fenêtre : VW, VH, et vmin. vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran vh : « Viewport Height », correspond à l’unité relative […]
utiliser bootstrap sur DW
Bootstrap est un framework front-end gratuit utilisé dans le développement Web. Il inclut des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les carrousels d’images…, ainsi que des plugins JavaScript. Les avantages à utiliser Bootstrap : Avoir quelques connaissances de base en HTML et […]