Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), 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 Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin.
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. 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 Brackets propose par défaut un aperçu en direct dans le navigateur très pratique car il intègre la possibilité de mettre en exergue les éléments HTML et CSS ciblés dans le document au fur et à mesure de la frappe. Édition rapide Mais aussi Du côté des extensions
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. 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... 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: var canvas = document.getElementById(c1); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(100,0,80,80); } 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.
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...)
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. Comprenez que les balises <div> ou <span> ne peuvent donner aucune indication sur les éléments qu’elles contiennent du fait que la documentation HTML ne donne pratiquement aucune limite au type de contenu possible entre ces balises, ce ne sont donc pas des balises sémantiques. 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. La sémantique a donné un rôle précis à certaines nouvelles balises. Les balises de structure de page 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 ? Si vous êtes passionné par le web, étudiant, en reconversion, en recherche de nouvelles compétences, ou que vous souhaitez prendre de l’avance dans vos études, cette formation est faite pour vous. Un langage pour structurer l’information Séparer la structure et l’aspect visuel
JQUERY JAVASCRIPT | Créer son site web | Apprendre HTML CSS PHP Javascript JQuery MySQL Bootstrap Twitter | vulgarisation informatique internet | cours tutoriel débutants Crée en 1995, javascript est un language de programmation qui est utilisé le plus souvent pour des pages web. La plupart du temps javascript sert à contrôler les données saisies dans les formulaires HTML et à interagir avec le document via l'interface DOM fourni par la navigateur. Contrairement à des languages serveur comme PHP, le code Javascript est lisible par l'utilisateur. Il est donc déconseillé de coder avec des notions / mots clé confidentiels. La balise <script> La balise <script> permet d'insérer du javascript qui s'execute coté client. Exemple script externe: Exemple script interne: Exemple code inline dans une balise HTML: Les commentaires Pour écrire un commentaire dans votre code, c'est à dire du texte qui ne sera pas interprété mais juste lisible pour le programmeur: Déclarer une variable La syntaxe pour déclarer une variable en javascript est la suivante Les alertes Vous pouvez utiliser des commandes qui controleront votre navigateur. Vous pouvez lui transmettre une variable:
C'est quoi une base de données ? - Partie 3 Suite de : C’est quoi une base de données ? – Partie 2 Dans la partie 2, nous avons vu des données stockées dans une seule table. Mais dans la “vraie vie”, cela est très rare car on doit stocker bien plus d’informations. Ces informations sont en relations entre elles (ou pas) alors comment faire pour stocker tout cela sans que ce soit trop le bazar ? Pour bien comprendre, prenons un exemple simple de logiciel de facturation qui doit gérer : les clients,les articles des factures,et les factures Pour que tout cela reste clair, j’ai volontairement simplifié. Comment faire pour stocker tout cela dans une table ou plusieurs tables ? On comprend facilement qu’il faut au moins avoir une table client et une table article, voici ce qu’on pourrait avoir : Table client : Table article : et maintenant, il faut stocker les factures qui sont composées d’un client et d’un ou plusieurs articles. Le mauvais exemple C’est vraiment très mauvais, et ce pour plusieurs raisons : Ce qu’il faudrait faire : Table facture et