HTML5 & CSS3
Get flash to fully experience Pearltrees
Tester avec CSS 3 Maker la compatibilité des styles avec les navigateurs
CSS 3 Maker est un outil en ligne gratuit vous proposant de tester et d’obtenir le code source de différents style CSS 3. Vous saurez immédiatement quels sont les navigateurs compatibles avec les styles que vous souhaitiez appliquez. Une fenêtre vous indiquera même la compatibilité avec les appareils mobiles. CSS 3 Maker est très pratique pour savoir quels sont les style applicable des maintenant.
Comment créer des lignes diagonales en CSS3
Dans ce tutoriel, nous allons vous expliquer pas à pas comment créer des lignes diagonales en CSS3 . Afin de facilité la compréhension, nous utiliseront un même exemple tout au long de ce tutoriel. Nous allons créer un cadre avec un contenu (texte, paragraphe, liste, formulaire …) et un titre. C’est justement ce titre qui bénéficiera d’une ligne en diagonales pour le rendre plus jolie. Et le tout en CSS3, sans rajouter d’image d’arrière-plan !
Le web évolue rapidement, très rapidement. Si vous ne faites pas attention, vous allez vite être dépassé. Voici donc un petit rappel sur l’évolution du HTML5 et ses mises à jour. Ce tutoriel est une liste de 24 Astuces et techniques essentiel et à connaitre en HTML5 . Article complémentaire : 20 Conseils et astuces pour coder proprement ses pages en HTML5 1.
24 Astuces et Techniques HTML5 à connaitre
Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3
Ceci est le deuxième chapitre du Tutoriel complet pour apprendre le HTML5 . Découvrons quels sont les outils et ressources dont vous aurez besoin pour développer vos futurs sites web en HTML5 . Et première bonne nouvelle, vous ne serez pas obligé de débourser un seul centimes pour coder en HTML5 ou en CSS3 .Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery
Dans ce tutoriel, nous allons vous détaillé comment créer un cadre de partage (Facebook …) qui s’affichera au défilement de la page avec une animation en jQuery . Cette technique est de plus en plus employé sur de nombreux sites. Ne vous est-il jamais arrivé de voir un bandeau ou un cadre apparaitre dans le coin inférieur droit de votre écran pour vous proposer un article relatif à celui que vous lisez ? Dans ce tutoriel, nous utiliseront ce procédé pour essayer d’accroitre le nombre d’abonnés à nos réseaux sociaux .
HTML5 / HTML 4.01 / xHTML, Balise et doctype
Devenu obsolète pour les navigateurs modernes, le Doctype à subit un rajeunissement avec l’arrivé du HTML5. La ligne de code est devenu concise, identique pour tous et sans url à ajouter. Un manière simple et efficace de respecter les normes. Mais ce ne fut pas toujours le cas avec les version précédente. Le tableau ci-dessous répertorie tous les éléments du HTML 4.01, du XHTML et du HTML5 et leur validité en fonction du doctype choisis. En savoir plus sur Le doctype en HTML5 .La balise Canvas est définie dans le nouveau format de pages HTML 5, et elle déjà implémentée sur la plupart des navigateurs.
Canvas - Le graphisme dans un navigateur
iFrame, pour un contenu dynamique ou isolé de la page
Cette balise faisait déjà partie de la spécification HTML 4 mais est développée dans la version 5 alors que les frames, et donc la balise frameset, sont devenus obsolètes. Iframe signifie "inline frame", en français cadre en ligne, il s'insère dans le flot du contenu de la page. On utilisait déjà l'iframe pour créer du contenu dynamique avant l'apparition d'Ajax: en assignant un contenu avec JavaScript, on pouvait modifier la page très facilement après son chargement. Mais Ajax permet une interaction plus complète avec le serveur. L'iframe a cependant d'autres utilisations.
Only CSS Menu est un site vous proposant le code source personnalisable en CSS 3 pour réaliser vos menus. 10 Exemples avec leurs codes sources de menu horizontal, vertical ou défilant. Il vous sera indiquer le code HTML ainsi que le code CSS3 bien sur. Avec Only CSS Menu , Découvrez la puissance du CSS3 et inspirez-vous des exemple de menus proposés ou intégrez-les tel quel. Sur la page d’accueil cliquez sur l’image représentant le menu de votre choix et tester le en live. Sous ce menu vous verrez les codes sources à re-copier ou modifier. Certain menu horizontaux sont ajustable en cliquant sur Customize menu dans le menu du haut.
Votre Menu CSS 3 – Horizontale, verticale et défilant – avec Only CSS Menu
HTML5 : En-tête et Corps d’une page web
Après avoir vu brièvement la définition du HTML5 , nous allons nous penché sur la structure d’une page web. Comme nous vous l’expliquions précédemment, le HTML5 est un langage hérité du XML reposant sur le principe de balises imbriqués. Certaines balises sont donc essentielles à la bonne compréhension de votre document par le navigateur. Après avoir déclaré le Doctype , vous ouvrirez une balise renfermant l’ensemble de votre code : la balise <html>. Elle indique, suite au doctype , le début du document codé en HTML5.Apprendre le HTML5 – Tutoriel Complet
Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5 .De Memodev. L’ HTML (Hypertext Markup Language), est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.
FAQ sur le HTML
De Memodev. CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C) . Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. ( article CSS sur Wikipédia )
FAQ sur le CSS
Le HTML5 apporte 3 nouveaux éléments pour les formulaires : les balises <datalist> , <keygen> et <output> . Bien que les principaux navigateurs ne supportent pas encore tous les nouveaux éléments de formulaire, vous pouvez déjà commencer à les utiliser. Si ils ne sont pas pris en charge, ils vont se comporter comme des champs de texte ordinaire. I. La balise <datalist> en HTML5
Les nouveaux éléments de formulaire en HTML5
S’il y a encore quelques temps il était assez compliqué de lire un fichier audio ou mp3 depuis votre site web, le HTML5 à simplifié sa mise en place. A partir d’une simple balise à insérer dans votre page web, la lecture de votre fichier musicale s’effectuera simplement. Pour utiliser ce lecteur HTML5, vous devez utiliser la balise <audio> . Cette balise a été implanté dans le HTML5 afin de faciliter la lecture de fichier musicaux ou sonore. Compatibilité des différents navigateurs