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>. Code : HTML Code : CSS Essayer Voilà.
W3C QA - Recommended list of Doctype declarations you can use in your Web document Warning The list is informative and does not try to be exhaustive (there are many other proper declarations you could use), but it has most of the declarations commonly used on the Web at the moment. Recommended Doctype Declarations to use in your Web document. When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. This makes sure the document will be parsed the same way by different browsers. The simplest and most reliable doctype declaration to use is the one defined in HTML5: If you need a doctype matching a specific version of (X)HTML, the doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. Template Use the following markup as a template to create a new HTML document using a proper Doctype declaration. <! (X)HTML Doctype Declarations List HTML5 and beyond Strict Transitional Frameset Strict (quick reference) Transitional Frameset XHTML Basic 1.1 (quick reference): MathML 2.0 - DTD:
Introduction à HTML - Guides pour Développeurs Web Avant de commencer Pour comprendre cet article, vous devez savoir utiliser un navigateur. Si vous savez aussi manipuler des fichiers (créer et modifier), vous pouvez tester par vous-même les codes fournis par cet article. Lorsque vous regardez une page web dans un navigateur internet, vous voyez, au niveau le plus basique, des mots. Plusieurs technologies (telles que CSS, JavaScript, Flash, AJAX, JSON) peuvent être utilisées pour définir les éléments d'une page web. L'HyperText Markup Language (HTML) (littéralement Langage HyperTexte à balises) est un langage à balises utilisé pour la création de contenu et la structuration sémantique des pages web. Cet article sert d'introduction à HTML, et vous aidera à apprendre comment il fonctionne et comment structurer une page web basique. Les éléments - la base d'une page webEdit La brique d'information de base en HTML est communiqué par les éléments HTML. Les balisesEdit <p>Ce texte est dans un paragraphe. Voici un exemple de code valide : <!
53 CSS-Techniques You Couldn't Live Without Advertisement Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. CSS is important. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 1. 2. 3. 4. 5 Powerful Tips And Tricks For Print Style Sheets7 5. Generated content was first introduced in the CSS2 specification. 7. 8. 9. 10. Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. 11. 12. 13. 14. 15. 16. The web is growing up. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52.
Chunky borders with curved corners Chunky Borders and corners with no images 13th March 2007 Updated 12th June 2007 to give IE6 'TRANSPARENT' BORDERS! 3 pixel rounded borders without images Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Or this can be used as a speech bubble with the addition of a little CSS pointer. 12th June 2007 Just to show that this can be applied over a background image because the corners have 'transparent' margins and the pointer has transparent borders. Information I have had many requests for curverd corvers without images that are more than 1 pixel wide. With the small addition of a pointer it can be made into a speech bubble of sorts. 12th June 2007 Copyright You may use this method on your personal 'non-profit' web site without seeking my permission.
Faire un menu dynamique ouvert et accessible Un menu dynamique Parfois, pour des raisons de place sur la page, on ajoute un menu dynamique. Seulement qui dit dynamique dit obligation d'avoir un navigateur supportant le langage de script utilisé. Comment faire un menu qui fonctionne sans ce langage ? Il est important que vous gardiez à l'esprit que le principal interêt d'un menu dynamique est de donner un double niveau d'entrée. Attention : — Si vous êtes aveugle, vous ne devriez percevoir aucune différence entre les 3 étapes du menu puisque c'est le but de l'article. La page brute Nous allons tout d'abord réaliser la page à proprement parler sans nous soucier ni du rendu, ni de l'interactivité mais en prenant en compte l'accessibilité. Le code <! Note : — Les différents éléments de la page sont identifiés grâce à l'attribut id afin de pouvoir les enjoliver et les manipuler par la suite. Vous pouvez tester cette étape dans votre navigateur. Les explications Mise en forme Le code HTML <! Explications Code CSS Vous pouvez tester cette étape. <!
Web Education Community Group Welcome to the Web Education Community Group Wiki! This page contains resources to help you teach or learn modern web development: The first section — The web standards curriculum — is a series of tutorial articles covering web design and development high level concepts, and essential technologies such as HTML, CSS and JavaScript. This is ideal for beginners wanting to learn the art of web design, or teachers looking for accurate material to use as the basis of teaching material. The second section — References — is designed for looking up HTML and CSS language features. The third section — Curriculum structures — is a complete set of web design-related curricula for teachers to use to put together courses, which includes sample assignments, example questions, reading lists, assessment criteria, and more. Introduction Note: This material was originally published as part of the Opera Web Standards Curriculum, available as Introductory material, written by Chris Mills. The beginning
Premières leçons de code «Ici, c’est un camp d’entraînement, c’est militaire, donc on ne laisse personne derrière». C’est par cette phrase qu’a commencé mon séjour à l’école de journalisme de Chapel Hill, en Caroline du Nord, aux Etats-Unis. Un séjour dénommé «multimedia bootcamp» au cours duquel une vingtaine de professionnels se sont exercés pendant une semaine intensive au «visual storytelling» à l’américaine en produisant vidéos et animations. A priori, nul besoin de traverser l’Atlantique pour apprendre à maîtriser les logiciels Flash et Final Cut Pro. Sauf que, à Chapel Hill, considérée comme l’une des meilleures écoles du monde en matière d’animations, la méthode est, dit-on, exceptionnelle. A voir le programme du «bootcamp» (1 jour de reportage sur le terrain, 2 jours de Final Cut Pro, 2 jours de Flash), je me demande de prime abord comment, en cinq jours, un être normalement constitué peut emmagasiner toutes ces fonctionnalités en partant parfois de… zéro. Une nouvelle corde à l’arc journalistique 1.
weByo Pure CSS Coke Can (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image). With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink. Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope. Castellano
HTML tutorials What is HTML? HTML stands for Hyper Text Markup Language is used to create web pages as well as other types of documents viewable in a web browser. HTML is a standard specified and maintained by World Wide Web Consortium. From its invention, HTML has evolved through different versions. Present version of HTML is HTML 4.01. Next version of HTML is HTML 5, which is under development but developers have already started using some of its features. In the consequent pages, we will discuss HTML 4.01 in detail. HTML code of an simple web page <! <! Result This is an example HTML page Lorem ipsum dolor sit amet, consectetur adipiscing elit. Learn HTML from w3resource.com View this example in browser Features of the w3resource HTML tutorials We have covered all the HTML 4.01 elements or tags and their attributes. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Join our Question Answer community to learn and share your programming knowledge. Help the community: Python: Fizzbuzz C++: Decimal to binary conversion
Le code, langue vivante 2 des journalistes? Plus de développeurs et moins de journalistes. C’est ainsi que les équipes éditoriales du Guardian vont être remaniées, a annoncé le rédacteur en chef du quotidien britannique, Alan Rusbridger. Car au Guardian comme ailleurs, le futur du journalisme passe par la compréhension du code. Pourquoi? Parce que, derrière chaque site d’informations et chaque application mobile, il y a des lignes et des lignes de signes (lettres, chiffres, ponctuation) incompréhensibles pour le quidam mais sans qui, en ligne, il n’y aurait aucun habitacle susceptible d’accueillir des contenus journalistiques. Il serait donc temps d’apprendre à “taper” ces “lignes” de code. Ecole de code Un clic plus tard, me voici à la Codecademy, la Star Academy du code, un site créé en août dernier par deux compères, Zach Sims and Ryan Bubinski, issus de l’Université de la Columbia, à New York. Les journalistes, étudiants ou professionnels, ne sont pas les seuls concernés. Scripts, commandes, etc. “Comment vous appelez-vous?”