Making a Beautiful HTML5 Portfolio. Martin Angelov In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin.
You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. Index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. Beautiful HTML5 Portfolio with jQuery The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags. script.js – Part 1.
Éléments HTML - HTML. Cette page répertorie tous les éléments HTML, qui sont créés à l'aide de balises. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci. **Note :**Pour plus d'informations sur les bases des éléments et attributs HTML, voir la section sur les éléments dans l'article Introduction au HTML. Racine principale Métadonnées du document Les métadonnées contiennent des informations à propos de la page. Racine de sectionnement Sectionnement du contenu Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document.
Contenu textuel Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante <body> et la balise fermante </body>. Sémantique du texte en ligne Images et médias Contenu embarqué SVG et MathML Scripts Gestion de l'édition Formulaires. HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3. Trouver son code couleur HTML !
Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres.