How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us. HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware. Using CSS3 we can do away with what would have required the use of several background images and possibly an additional wrapping container or two and rely (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Step 1. Step 2. the Underlying Page Save this as nav.html in the nav folder.
Soumettre un site à Google, Yahoo, Bing, etc. Le referencement est l'ensemble des techniques permettant d'améliorer la visibilité d'un site web dans les moteurs de recherche. Ainsi, pour référencer son site, il suffit : d'obtenir des liens depuis des sites eux mêmes régulièrement indexés par les moteurs de recherche, afin que ces derniers identifient l'existence du votre. de déclarer votre site directement via l'interface des principaux moteurs de recherche. Quel prix ? Combien coûte le référencement ? Toutefois, les méthodes à mettre en oeuvre sont nombreuses et parfois complexes et une simple erreur peut avoir des récpercussions importantes, c'est pourquoi de nombreuses sociétés font appel à des professionnels du référencement pour les conseiller, voire les assister. Voir: Prix des agences de référencement Dans quels annuaires faut-il présenter son site ? Globalement, les annuaires ne sont pas la meilleure façon de référencer son site, ce qui compte avant tout c'est d'obtenir des liens de la part de sites faisant référence. DMOZ.
How to Code a Clean Website Template in HTML5 & CSS3 Last week on MediaLoot we posted a tutorial on designing a clean homepage template using Adobe Fireworks, the result was a sleek web page concept that we're now going to imagine that we have shown to our client, and they have just given us the go ahead to start coding it up into HTML and CSS! Premium Members Get Source Files Premium members can download the source files for this tutorial here. Alright, without any further ado, let’s get started on this thing! To refresh your memory here is the design we created last week. Plan structure and write HTML codeExport images from the layoutStyle the HTML with CSS So, with that in mind, let’s begin by writing our HTML. Preparation Start by creating a new folder and index.html and styles.css files. Doctype and Structure Open up the index.html file in a text editor, my preferred editor for code is MacRabbit Espresso (Mac only), for Windows try Notepad++ or Dreamweaver if needs be. <! Header Main Feature Featured Services About Us and Testimonials Footer
Accordion with CSS3 | Codrops - Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. View demo Download source Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing. There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. So, let start! Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. The Markup We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Note that we need to give each input an ID which we will then use in the for attribute of the label. Each article will have a class that will help us determine to which height we it to expand to. The CSS Demos
Technos - The WebSocket API Abstract This specification defines an API that enables Web pages to use the WebSocket protocol (defined by the IETF) for two-way communication with a remote host. Status of This document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the most recently formally published revision of this technical report can be found in the W3C technical reports index at If you wish to make comments regarding this document, you can enter feedback using this form: You can also e-mail feedback to public-webapps@w3.org (subscribe, archives), or whatwg@whatwg.org (subscribe, archives). Implementors should be aware that this specification is not stable. The latest stable version of the editor's draft of this specification is always available on the W3C CVS server and in the WHATWG Subversion repository. E-mail notifications of changes Table of Contents 1 Introduction WebIDL
CSS Debutant : Boite à outils CSS Aller aux menus #CSS {débutant;} Vous êtes ici > CSS Débutant | Boite à Outils Boite à Outils CSS Générateur de CSS Formulaire permettant d'obtenir le code d'une feuille de style. Outils de développement NotePad++ : éditeur html en code source gratuit ;BlueGriffon : éditeur html et CSS wysiwyg réalisé par Daniel Glazman (co-chairman CSS au W3C et papa du feu Nvu) ;KompoZer : éditeur html wysiwyg successeur de Nvu ;TopStyle : éditeur de CSS. Outils de développement pour Firefox Très pratique pour pourvoir tester, visualiser et modifier des codes (x)html et CSS au sein même du navigateur. Transformations d'unités de tailles L'EM-calculator : application en ligne très pratique pour calculer l'équivalence des pixels en em. Choisir ses couleurs Générateurs Liste de Discussion Si vous désirez faire partager ou approfondir vos connaissances sur les feuilles de style et le (x)html, vous pouvez rejoindre notre liste de discussion. Liens Utiles Haut Contact : pascale at mammouthland.net Premiers pas en CSS
Creating a HTML5 & CSS3 Single Page Web Layout Creating a HTML5 & CSS3 single page template Today we will create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation menu), promo area (I will use jQuery Nivo Slider), center area with some content, bottom area (which you can use for footer links as example), and footer itself. Live Demo download in package Now, you can download package, check our prepared demo and lets start! Step 1. As usual, quite each webmaster (designer) start thinking about initial idea which he like to build. And only after – we can start thinking about initial layout of that page – HTML Step 2. I separated whole layout to few sections: header section – place, where we will put our logo, menu, promo slidercentral section – place for main content, bottom sections with some custom contentfooter section – where you will able to put some links, company name In HTML code I will use next HTML5 tags: <header>, <nav>, <section> and <footer>. index.html
Slider with Sliding Backgrounds Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.
Technos - HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
Making a Beautiful HTML5 Portfolio Martin Angelov In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. Beautiful HTML5 Portfolio with jQuery The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags. script.js – Part 1