Gestion des images en HTML Mars 2014 Comment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité. La balise IMG du langage HTML permet d'insérer des images dans une page HTML. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son URL complète. Seuls les formats d'images suivants sont acceptés en standard dans les spécifications du W3C : Les principaux attributs de la balise IMG sont les suivants : SRC: Indique l'emplacement de l'image (il est obligatoire) ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Ainsi pour insérer une image, il faudra saisir une balise du type suivant : Texte enveloppant une image Il existe en fait plusieurs façons, nous allons en voir deux :
5 Online Logo Makers & Generators to Design Your Brand You have a product that will fly off the shelves, but are struggling with your branding. You need a logo but don’t have any idea about how to design a great one. You could hire a designer, but you don’t want to spend all of your startup costs on your logo. This is a side project for you after all. We’ve got you covered. You’ll be up and running with a beautiful logo in no time. Bonus Guide: Eager to make your first sale online? Why A Logo is Important For Your Brand Logos act as the “face” of your business. While Shopify does automatically generate text based logos for you, it’s still important to have a custom logo to define your brand and make your store stand out from the competition. Logo Design 101 DesignBuddy recently did a fantastic data analysis on the world’s top brands, and what their logos have in common. 95% of the world’s top brand’s logos use one or two colors41% of the brands use stylized type as their logo93% are simple enough to be recognized at smaller sizes Logoshi Logaster
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
Balise <img> ou feuille de style CSS ? Pour concevoir le design d'une page web, doit-on placer les images dans les feuilles de styles CSS, par exemple en arrière-plan grâce à la propriété background-image, ou utiliser la classique balise <img> ? Ces deux alternatives répondent à des besoins précis et sont complémentaires. Il ne faut surtout pas privilégier l'une aux dépends de l'autre. Lorsque les feuilles de style sont désactivées, ou lors d'un rendu sur un navigateur non graphique ou un média différent de l'écran (navigateur textuel, imprimante, plage braille, synthèse vocale, etc.), les images d'arrière-plan ne sont pas restituées, contrairement aux éléments <img> qui font partie intégrante du document. Si l'image est décorative Il peut s'agir d'illustration de fond, de bordures, d'arrondis, de puces ou toute autre décoration qui n'apporte rien au contenu de la page (c'est à dire que la page demeure lisible et compréhensible sans ces illustrations). Elle peut être gérée de deux manières : Si l'image apporte du contenu
Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.
Mettre en place le CSS Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu). Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attributstylesur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe). Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises : l'attributclass;l'attributid. Que les choses soient claires dès le début : les attributsclassetidsont quasiment identiques. Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. Oui mais que met-on comme valeur à l'attributclass? <! Quel intérêt ? Les balises universelles
Tutoriel balises meta : guide complet en français Est-ce que Google tient compte de toutes les balises meta ? C'est sans doute un classique mais cette fois la réponse vient de Google directement... L'occasion de revenir sur chaque balise pour préciser son intérêt pour le référencement. Voici donc un tuto balises meta sous forme de liste complète de ces "meta tags" et de leur impact sur le référencement. Article mis à jour le 27/10/2014, publié initialement le 28/01/2009 Sommaire : Les explications ci-après proviennent initialement de l'article de Google (rédigé par John Mueller, ingénieur Google à Zurich). Les balises meta et leur utilité pour le référencement naturel (SEO) Balise title Même si ce n'est pas une balise meta, Google confirme que la balise <title> est utilisée par Google dans son algorithme de classement. A ma connaissance, la balise meta title n'existe pas et n'est donc pas prise en compte par les moteurs : Ordre des balises meta Balise meta description Balise meta keywords Balise meta news_keywords Balise meta robots
HTML Cheat Sheet (including new HTML5 tags) for Beginners How many times have you Googled: “how to add forms in HTML” or “what are new HTML5 tags” … only to end up twenty minutes later staring blankly at 30 new browser tabs, forgetting what got you here in the first place? Remembering each HTML element off the top of your head at a moment’s notice is impossible. So instead of falling down yet another Google blackhole, use this HTML cheat sheet page as your go-to web development resource when learning HTML, CSS, PHP or Javascript. #1 HTML CHEAT SHEET in .PDF Download .PDF (size: 151kb) #2 HTML CHEAT SHEET in .PNG Download .PNG (size: 1.8mb) Further resources: If you already know a bit about HTML, go and check our Web Development & Design guide here. If you want to speed up your website (without changing web host), check this post. If you want to make your website more secure, go see this guide.
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 CSS Margin