background preloader

The W3C Markup Validation Service

The W3C Markup Validation Service
Related:  Javascript, jQuery, SQL, HTML

Édition de pages web avec KompoZer Édition de pages web avec KompoZer Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général

Brackets, l'éditeur spécialisé front-end Brackets est un éditeur de code open-source nouvelle génération, multi-plateformes, et tout particulièrement adapté au profil d'intégrateur et de webdesigner. L'interface de Brackets est avant tout conçue pour être agréable et ergonomique. Nul besoin d'aller fouiller dans la console ou des fichiers XML pour modifier la configuration ou installer des plugins. En outre, de nombreuses fonctionnalités sont natives sur Brackets alors qu'elles nécessitent des extensions sur d'autres éditeurs. Principaux avantages Les éditeurs récents, notamment SublimeText, Atom et Brackets, s'adaptent de plus en plus aux nouvelles contraintes du front-end et apportent des fonctionnalités toujours plus riches. Brackets est clairement moins orienté PHP et back-end que certains concurrents mais compense largement ce déficit dans le domaine du webdesign. Jugez par vous-même : Live refresh Aperçus divers en live (images, couleurs, dégradés) Édition rapide Mais aussi Raccourcis-claviers utiles Du côté des extensions Divers

Quel DOCTYPE choisir? Le DOCTYPE indique au navigateur comment traiter une page Web, il peut donc influer sur la façon dont la page sera présentée. A priori, on choisira le code HTML 5 pour les nouvelles pages, car avec lui les anciens navigateurs tendront à les afficher en mode standard. Pour les pages déjà en ligne, il n'est pas nécessaire de changer le doctype, il indiquera aux nouveaux navigateurs qu'il faut afficher la page selon les conventions de l'époque et non selon les nouvelles normes. La directive doit être placée sur la première ligne du document, avant la balise <html>. C'est une méta instruction pour le navigateur et non une balise HTML. Dans la version 5, la directive indique simplement que l'on a une page Web à afficher: Elle peut être en majuscules ou minuscule ou une combinaison des deux comme ci-dessus. On doit ajouter pour Internet Explorer: Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks. Un doctype typique en HTML 4 à la forme suivante: <! Conclusion

- Une présentation du langage HTML agrémentée de nombreux exemples Accès rapide : Petit historique Lien avec d'autres technologies Web La langage HTML (HyperText Markup Language) est utilisé pour décrire la structure d'une page Web. C'est un langage déclaratif à base de balises (de tags, en anglais). Petit historique Ce langage a été inventé par Tim Berners-Lee au début des années 1990. A cette époque le langage HTML était très basique et ne proposait que quelques tags. Très rapidement (milieu des années 1990), plusieurs navigateurs ont proposé des jeux de tags différents. Afin de rectifier le tir, Tim Berners-Lee fonda en 1994 le W3C : le World Wide Web Consortium. Fin 1995, apparait la recommandation HTML 2.0. Durant les années 2000, le W3C va étudier la possibilité d'utiliser un langage dérivé de HTML : XHTML. Du coup, un retour en force de HTML 5.0 fut constaté fin 2014. Lien avec d'autres technologies Web

Canvas - Le graphisme dans un navigateur La balise canvas est définie dans HTML 5, et elle implémentée dans tous les navigateurs. Elle permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches. Comment utiliser Canvas La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id, name, class... Son but est de marquer l'emplacement où l'on veut insérer une surface de dessin (techniquement appellée "contexte de rendu"). Le corps de la balise n'est pas affiché par les navigateurs qui implémentent Canvas mais seulement par les autres, et constitue donc un moyen de fournir un contenu alternatif. Utiliser Canvas est très simple, le code ci-dessous montre une application minimale: <canvas id="c1" width="400" height="100"> Non implémenté. Cela a défini un emplacement et son identifieur, reste à ajouter un contenu graphique: window.onload.canvasFun; Test et démo de Canvas Afficher un rectangle bleu Code HTML Code JavaScript

Les meilleurs cours et tutoriels sur la programmation et l'informatique professionnelle Nos et nous-mêmes stockons et/ou accédons à des informations stockées sur un terminal, telles que les cookies, et traitons les données personnelles, telles que les identifiants uniques et les informations standards envoyées par chaque terminal pour diffuser des publicités et du contenu personnalisés, mesurer les performances des publicités et du contenu, obtenir des données d'audience, et développer et améliorer les produits. Avec votre permission, nos partenaires et nous-mêmes pouvons utiliser des données de géolocalisation précises et d’identification par analyse du terminal. En cliquant, vous pouvez consentir aux traitements décrits précédemment. Vous pouvez également accéder à des informations plus détaillées et modifier vos préférences avant de consentir ou pour refuser de donner votre consentement.

Atom Dans le top 4 des éditeurs de code source nouvelle génération aux côtés de SublimeText, Brackets et Visual Studio Code, Atom est certainement l'un des plus hackable comme l'annonce son slogan. Outre ce qui fait la force de tous les éditeurs récents (commandes rapidement accessibles, thèmes, extensions, arborescence des fichiers) ses avantages sont : Visuellement, on peut voir les fichiers qui ont été modifiés depuis le commit précédent, ce qui est bien pratique (orange : modifications, vert : ajouts, rouge : suppressions). Il y a également un outil préinstallé d'aperçu markdown. Packages pratiques Voici une sélection des meilleures extensions pour Atom disponibles actuellement. L'intégration Git est très pratique, elle permet de lancer la plupart des opérations directement dans l'éditeur, pour des projets sur un serveur git quelconque ou GitHub. Bref, si vous êtes encore sur un éditeur d'ancienne génération, pensez-y ! Raccourcis pratiques Ctrl + P ou Ctrl + T : fichiers du projet

Visual Studio Code Visual Studio Code est un éditeur de code source récemment lancé par Microsoft, avec la particularité d'être diffusé sur Github donc en open source. Il est disponible pour Windows mais aussi Linux et Mac OS X et vient concurrencer directement les éditeurs modernes tels que Atom, Brackets et SublimeText. Il comprend donc un certain nombre de fonctionnalités devenues bien pratiques : Coloration syntaxique HTML, CSS/Sass/Less, JavaScript, C#, JSON, XML, etc Aide à l'édition de certains langages comme aperçu des couleurs en CSS Ouverture d'un dossier pour voir tous les fichiers dans une arborescence "Split view" pour éditer jusqu'à 3 fichiers dans la même fenêtre (Side by Side) Accès rapide à tous ces fichiers avec un raccourci clavier (Ctrl+P) Recherche dans fichiers multiples (mais pas encore remplacement) Support de Git natif Debugger intégré pour quelques langages (NodeJS, Mono) Intégration avec des tâches externes (de type Make, Gulp, Ant...)

Référence des éléments HTML - HTML (HyperText Markup Language) Cette page répertorie tous les éléments HTML, qui sont créés à l'aide de balises. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci. **Note :**Pour plus d'informations sur les bases des éléments et attributs HTML, voir la section sur les éléments dans l'article Introduction au HTML. Racine principale Métadonnées du document Les métadonnées contiennent des informations à propos de la page. Racine de sectionnement Sectionnement du contenu Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Contenu textuel Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante <body> et la balise fermante </body>. Sémantique du texte en ligne Images et médias Contenu embarqué SVG et MathML Scripts Gestion de l'édition Formulaires

Les balises sémantiques en HTML5 - HTML | Ronan HELLO Dans cet épisode nous allons parler de balises sémantiques, de structure de page, de structure de contenu dans le but d’organiser au mieux votre code pour concevoir de pages web optimisées, le tout en respectant les dernières normes HTML 5 en vigueur. Qu’est-ce qu’une balises sémantiques ? Une balise sémantique est une balise qui donne une indication sur le contenu qu’elle entoure. Certaines balises plus récente comme les balises <header>, <footer> ou encore <article> ont alors été ajouté à HTML pour permettre un découpage plus précis de votre page web en délimitant des zones spécifiques. Pour vous qui allez devoir incorporer ces balises dans vos pages, comprenez qu’elles permettent de mieux structurer votre code et donc qu’il sera plus pratique de s'y retrouver, quelques mois ou semaines plus tard. La sémantique a donné un rôle précis à certaines nouvelles balises. Les balises de structure de page L'entête du site avec <header> Les menu de navigation avec <nav> Le pied de page avec <footer>

Découverte du langage HTML - HTML | Ronan HELLO Bienvenue dans cette série de tutoriels où vous allez apprendre, pas à pas, à rédiger des documents en HTML 5 pour vous permettre de créer votre premier site internet. L’objectif de la série est de vous apprendre les concepts importants du HTML et de parcourir l’ensemble des balises que vous serez amenés à utiliser pour créer un site de A à Z. Mais tout d'abord, nous allons chercher à comprendre pourquoi le HTML est si important aujourd’hui, et pourquoi c’est en général le premier langage que l’on apprend lorsque l’on débute sa formation web. A qui s’adresse cette formation ? Avant cela, vous vous demandez surement ce que contient cette formation et s’il est judicieux de se jeter dedans ? Et vous avez bien raison, cette formation s’adresse à plusieurs types de personnes, et je suis sûr que vous allez vous reconnaître. Si vous suivez la formation jusqu’au bout, vous devriez alors être en bonne posture pour continuer avec l’apprentissage du CSS. Un langage pour structurer l’information

Related: