background preloader

HTML5 : structure globale du document

HTML5 : structure globale du document
Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> L'attribut lang (sur <html>) Initializr Related:  TUTORIELS, COURS, FORMATIONS etc

Passer du HTML au XHTML Introduction Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Que vos pages existantes soient actuellement conformes ou non aux différentes versions du HTML importe peu. Vous allez rapidement constater que les convertir en XHTML n'est pas sorcier du tout. En effet, puisque le XHTML n'est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML, il ne vous suffit que d'apprendre quelques règles syntaxiques propres à XML pour commencer à coder selon les normes du W3C. Tout ce qui vous sépare de votre but, c'est un peu moins d'une dizaine de petites lois et quelques principes d'application. Cet article n'a qu'un seul but, celui de vous aider à franchir ce pas entre le HTML du siècle dernier et celui d'aujourd'hui ou, si vous préférez, à mettre un peu de X dans votre HTML. Chaque balise nécessite une fermeture Invalide : <p>Lorem ipsum dolor sit amet. Valide : <p>Lorem ipsum dolor sit amet.

Target=”_blank” — the most underestimated vulnerability ever People using target='_blank' links usually have no idea about this curious fact: The page we're linking to gains partial access to the linking page via the window.opener object. The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf... Users trust the page that is already opened, they won't get suspicious. Example attack: create a fake "viral" page with cute cat pictures, jokes or whatever, get it shared on Facebook (which is known for opening links via _blank) and every time someone clicks the link - execute window.opener.location = ' …redirecting to a page that asks the user to re-enter her Facebook password. Add this to your outgoing links. rel="noopener" Update: FF does not support "noopener" so add this. rel="noopener noreferrer" var newWnd = window.open(); newWnd.opener = null; PS.

Exercice d'intégration Html/Css n°2 - Copier coller Un deuxième petit exercice d’intégration, pour une pag type blog, à partir d’un, voici le rendu final: le PSD Comme on le voit la page est découpée en plusieurs lignes, on peut imaginer une grille derrière la page : ici je vais utiliser html5 Boiler, qui utilise 960 grid gs pour découper et organiser la page.Une police particulière pour le titre, un texte d’introduction, un bloc d’ images à la une, trois blocs de rubriques, puis encore trois blocs d’info. Voici le code Ici l’import de la police n’est pa possible donc le titre est mal positionné, si vous répliquez le code, pensez à importer aussi la police.

HTML5 This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability. This section describes the status of this document at the time of its publication. Other documents may supersede this document. This document was published by the Web Platform Working Group as a W3C Recommendation for HTML 5.2 that would obsolete the HTML 5.1 Recommendation. All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. This document was produced by a group operating under the W3C Patent Policy.

CSS - Conditional comments Page last changed today Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 up until IE9 (inclusive). Older IE versions frequently need some extra CSS in order to show your pages right. If you need special styles for IE10 or up you’ll have to find another method, since conditional comments were disabled in IE10. Conditional comments work as follows: <! Their basic structure is the same as an HTML comment (<! Below I added a lot of conditional comments that print out messages according to your IE version. Note that conditional comments were removed from IE10, so IE10 and up will not understand the test. Below are a few conditional comments that reveal the IE version you're using. According to the conditional comment this is not IE 5-9 The syntax I use is: <p class="accent"><! Note the special syntax: gt: greater thanlte: less than or equal to Also note the last one. <! Are conditional comments CSS hacks?

An Exhaustive Guide on Creating Responsive Website Using HTML5 & CSS3 Over the recent years, it has been observed that people are preferring mobile phones over desktop computers for browsing the Internet. Building a website that looks perfect and functions appropriately on multiple hand-held gadgets has become the most-trusted method of gaining an edge over your competitors. It is responsive design which plays a vital role in creation of sites that can be accessed smoothly on a variety of devices with different screen sizes and resolutions. HTML5 and CSS3 have emerged as two of the most applauded web technologies for creating responsive designs that can easily adapt to contemporary mobile browsers and devices. Creating a basic Responsive Website skeleton using HTML5 and CSS3 Well, there are two methods of creating a responsive design. Method No.1- Using your own coding technique As the very first method, you can create a responsive design using your own code as shown below: .col { float: left; margin: 1%; width: 23%; min-height: 50px; background: #F0F0F0; .col {

DISIC/guide-integrateur: Un guide destiné aux intégrateurs chargés de réaliser des gabarits HTML et CSS accessibles. Guide de développement HTML - Guides pour développeurs Web HyperText Markup Language (HTML), ou langage de balisage hypertexte, est le langage au cœur de presque tout contenu Web. La majorité de ce que vous voyez dans votre navigateur est décrit en utilisant HTML. Plus précisément, HTML est le langage qui décrit la structure et la sémantique du contenu d'un document Web. Les articles listés ci-dessous vous guideront pour obtenir tout le potentiel offert par HTML. Guide sur les formulaires HTMLBienvenue dans le guide sur les formulaires HTML. Aperçu Guides Guide sur les formulaires HTML Bienvenue dans le guide sur les formulaires HTML. Introduction à HTML Cet article sert d'introduction à HTML, et vous aidera à apprendre comment il fonctionne et comment structurer une page web basique. Exemple de code Autres pages Astuces de création de pages HTML à affichage rapide C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. Rejoignez la communauté Web layout

Comment indiquer la langue d’un contenu en HTML? Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale. Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut. Indiquer la langue de traitement On commencera par veiller à ce que chaque page HTML ait un attribut lang sur l’élément racine, qui indique la langue principale de la page. Mettons que notre page est en français: Ensuite, pour chaque contenu dont la langue diffère de celle indiquée sur l’élément racine, on va utiliser l’attribut lang pour indiquer le changement de langue. <blockquote><p> Ça va plus du tout. <p><cite lang="en">Blade Runner</cite> est une adaptation du roman <cite lang="en">Do Androids Dream of Electric Sheep? Content-Language: fr-FR

Spécifier la langue d'un document (X)HTML De nombreuses sources encouragent les auteurs à préciser la langue de leur document : les directives d'accessibilité, les bonnes pratiques qualités, les spécifications (X)HTML , les conseils pour l'internationalisation, l'optimisation du reférencement, etc. Le plus souvent, cette démarche semble d'autant plus simple que le document est rédigé dans une langue unique, ou comporte tout au plus quelques citations dans une autre langue. Cependant, même dans ces cas simples, ce sont en fait deux notions bien distinctes qui sont à l'oeuvre : les langues primaires de la ressource et les langues de traitement de son contenu. Toutes deux répondent à des problématiques opérationnelles différentes, que nous allons analyser ici. Nous pourrons alors déterminer quelles sont les techniques appropriées pour communiquer efficacement ces deux types d'informations aux agents utilisateurs, en précisant également les normes de codification des langues qui assureront la pertinence de ces informations.

Les balises h1 multiples autorisées en HTML5 C'est suite à plusieurs conversations m'invitant à ne pas utiliser de multiples balises h1 dans mes intégrations HTML (et plus récemment une demande « insistante » sur le fait de ne pas le faire) que je me vois forcé de marcher sur les pas de Raphaël Goetter -qui avait déjà abordé le sujet- pour expliquer pourquoi : en plus d'être tout à fait valide, cette pratique est bénéfique. Tout document HTML5 dispose de cloison de contenu (Sectionneur de contenu) que sont article, aside, nav et section. Ces zones de contenu peuvent chacune contenir une balise header et footer (ne cloisonnant pas elles-mêmes le contenu) et de multiple éléments de titrage (Titre en HTML) allant de h1 à h6. Bien que l'utilisation de plus d'une balise h1 ai pu rationnellement laisser à débattre (même si techniquement les standards ne l'interdise pas), les recommandations et même l'interdiction d'une telle pratique ne sont plus pertinentes et rationnelles à l'heure du HTML5. La balise h1 et les balises entêtes h2-h6

Une présentation du langage HTML agrémentée de nombreux exemples La langage HTML (HyperText Markup Language) est utilisé pour décrire la structure d'une page Web. C'est un langage descriptif à base de marqueurs (de tags, en anglais). Parfois, le terme de balise est aussi utilisé en lieu et place de marqueur. Le langage HTML est utilisé conjointement avec les langages CSS et Javascript. Le langage CSS permet d'appliquer un style visuel (une charte graphique) à vos pages, tandis que Javascript permet d'y adjoindre des effets dynamiques. La syntaxe HTML Le langage HTML utilise des marqueurs (nous parlerons à partir de maintenant de tags) pour structurer vos documents. Un tag ouvrant : un tel tag commence par un caractère < et se termine par un caractère >. Définitions d'attributs sur un tag HTML Un tag ouvrant peut de plus posséder des attributs. Les entités HTML prédéfinies Enfin, notez qu'il est possible d'utiliser des entités HTML prédéfinies. Exemple de code

Related: