HTML5 & CSS3

TwitterFacebook
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. http://41mag.fr/tester-avec-css-3-maker-la-compatibilite-des-styles-avec-les-navigateurs.html

Comment créer des lignes diagonales en CSS3

http://41mag.fr/comment-creer-des-lignes-diagonales-en-css3.html 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 !
http://www.journaldunet.com/developpeur/client-web/html5-video-bonnes-feuilles/ © Thomas Jansa - Fotolia.com @controls, @autoplay, @loop, @width, @height... Décryptage des attributs accompagnant la nouvelle balise vidéo, et analyse des différences d'affichage entre navigateurs. Des bonnes feuilles issues de l'ouvrage de Silvia Pfeiffer, publié chez Pearson.

HTML5 : les nouveaux attributs vidéo au crible - Journal du Net Développeurs

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 . En HTML5, le doctype n’est pas obligatoire ni nécessaire. Cependant, il est utilisé pour les anciens navigateurs nécessitant l’indication du doctype.

24 Astuces et Techniques HTML5 à connaitre

http://41mag.fr/24-astuces-et-techniques-html5-a-connaitre.html
http://41mag.fr/les-ressources-et-logiciels-necessaires-pour-developper-en-html5-etou-en-css3.html

Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3

Pour ce deuxième chapitre du Tutoriel d’introduction au HTML5 , nous allons vous expliqué quels seront 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 . Pour commencer à écrire vos premières lignes de codes HTML5, vous n’aurez besoin que de deux choses : Un éditeur de texte et un navigateur .

Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery

http://41mag.fr/cadre-partage-qui-s-affiche-au-defilement-de-la-page-animation-jquery.html 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 .
http://41mag.fr/html5-html-4-01-xhtml-balise-et-doctype.html

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. Découvrez toute la puissance du HTML5, des exemples concrets, des démonstrations.
La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id , name , class ...

Canvas - Le graphisme dans un navigateur

http://www.xul.fr/html5/canvas.php

iFrame, pour un contenu dynamique ou isolé de la page

Mais Ajax permet une interaction plus complète avec le serveur. L'iframe a cependant d'autres utilisations. Pour le webmaster, c'est un moyen de présenter du contenu aux visiteurs qui ne sera pas visible aux moteurs de recherche. Si par exemple, on veut afficher un même texte dans toutes les pages, sans déclencher des signaux de contenu dupliqué chez les robots qui deviennent de plus en plus paranoïaques à ce sujet (il y a toujours un humain derrière un robot), on doit le placer dans une iframe. Indépendamment des moteurs de recherche les iframes permettent d'insérer du contenu plus facilement qu'avec Ajax qui requiert des fonctions XMLHttpRequest. http://www.xul.fr/html5/iframe.php
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. http://41mag.fr/votre-menu-css-3-horizontale-verticale-et-defilant-avec-only-css-menu.html

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 . 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 .
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. HTML se fonde sur la syntaxe définie par SGML tandis que XHTML (eXtensible HyperText Markup Language) se fonde sur la syntaxe définie par XML (cf article HTML sur Wikipédia ).

FAQ sur le HTML

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 ) Les meilleurs tutoriels CSS [ modifier ]

FAQ sur le CSS

Le HTML5 apporte 3 nouveaux éléments pour les formulaires : les balises , et . 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. L’élément spécifie une liste pré-définis d’options pour un élément . L’élément est utilisé pour fournir une »saisie semi-automatique » sur les éléments .

Les nouveaux éléments de formulaire en HTML5