background preloader

HTML/CSS

Facebook Twitter

Apprenez à créer votre site web ! Introduction - Tutoriel HTML & CSS. À qui s'adresse ce tutoriel ? À ceux qui veulent apprendre comment créer des sites internet : je vais vous apprendre tout de suite la meilleure méthode de le faire. En effet, le HTML est un standard très riche et permissif. Sans un bon guide, il est possible de se perdre entre les différentes méthodes.

Ce fut mon cas : mes premiers sites sont mal faits et ce n'est que petit à petit que j'en suis venu au HTML + CSS. Après ce tutoriel, j'espère que vous aurez le moins possible besoin d'en lire d'autres. J'espère être le plus exhaustif possible. Dans le cas contraire, merci de m'envoyer un e-mail ; À ceux qui connaissent le HTML ou utilisent un éditeur graphique, mais qui souhaitent améliorer la structure de leur site : voici comment le refondre, même juste en partie, ou en modifier la structure vers du CSS ; À ceux qui souhaitent apprendre rapidement la plupart des méthodes utiles en CSS pour se passer de tableaux et avoir un code propre et sain.

Pédagogie du tutoriel HTML ou xHTML ? Tutoriel CSS - Table des matières | Tutoriel CSS | HTML.net. CSS - HTML. 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. 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.