Lynda. CodeCombat. Presentation du HTML. Cours_01<html5> Tout d'abord pour ceux qui ne savent pas, l'HTML pour HyperText Markup Language, n'est pas un langage de programmation, mais un langage de balisage.
Autrement dit, c'est un langage qui permet de structurer l'information principalement pour les robots. En plaçant un texte dans une balise H1, on indique aux robots des moteurs de recherche (par exemple) que ce texte est le titre principal de la page, donc c'est une information très importante. Ensuite chaque type de texte a sa propre balise. Si l'on veut indiquer aux robots que ce texte est un paragraphe, on le placera dans une balise P, si c'est une liste on utilisera une balise UL, et ainsi de suite.
Donc pour revenir à nos nuages, HTML 5 est ni plus ni moins que l'évolution de l'HTML 4 et du XHTML. Vous l'aurez peut-être compris. Au fil du temps, le langags HTML a beaucoup évolué. Voici un très bref historique de ce langage pour votre culture générale. Les versions de HTML. Site du Zéro-OpenClassroom. InfoWebMaster - Informations Ressources Webmasters débutant ou confirmés. Effets en CSS. Sommaire Sommaire Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript, comme des menus déroulants ou des lightbox. J'ai indiqué la compatibilité suivant les navigateurs.
Les versions testés sont : Firefox 4.0/3.6, Internet Explorer 9,8, Opera 11.10, Safari 4, Chrome 10 ainsi que Konqueror 4.2.2. Permettez-moi de vous donner deux fichiers PDF qui sont pour moi les couteaux-suisses du codeur HTML/CSS : Ils montrent en une page la quasi-totalité des codes HTML et CSS2 :PDF sur le HTML (archive zip : 1.8Mio ; MD5 : 778bd3ea7c04408e75ecf50686d6c606)PDF sur les CSS (fichier pdf : 42Kio ; MD5 : f788c273f2ef4d1354e3c418492f1306) Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois. Sauf mention contraire, les astuces visibles ici ne font appel qu'à du CSS. Compatibilité : xHTML Les menus sont souvent faits avec des listes <ul>, <li>.
CSS 3D Meninas. (versión en castellano abajo) I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect.
It is pure CSS, so no javascript or flash involved: only CSS and HTML code. It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates. UPDATE: 3D Meninas Explained Castellano He tomado el cuadro Las Meninas y he creado este efecto pseudo-3D con CSS. Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Funciona en las últimas versiones de los navegadores más usados y valida. UPDATE: Explicación del efecto. Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web.
Utilisation des sprites en css. Les sprites, c'est quoi ?
C'est une technique qui consiste à regrouper plusieurs images en une seule et à ne sélectionner que la zone que l'on veut afficher. Cette technique a été très utilisée dans les jeux vidéos à l'époque des jeux 2D, par exemple ceux où vous cassiez des briques avec un plombier bedonnant en salopette ou un hérisson avec des tennis rouges... En fait, chaque personnage ou objet avait sur une même image toutes les positions nécessaires à son animation, et une seule petite zone était affichée, dans laquelle « défilait » le reste des images selon les actions du joueur.
Eh bien en webdesign, c'est un peu pareil, et c'est ce que nous allons voir maintenant. Cela va probablement chambouler un peu vos habitudes de découpage d'un design, et vous amener à réfléchir au meilleur moyen de les préparer. Pour la suite du tutoriel, on va les fusionner comme ceci et utiliser cette image : Mais quel intérêt y a-t-il ?