Les icons en css
Fermé
hello1324789
Messages postés
120
Date d'inscription
vendredi 17 février 2012
Statut
Membre
Dernière intervention
3 avril 2023
-
Modifié le 6 janv. 2022 à 18:44
Totor - 7 janv. 2022 à 14:17
Totor - 7 janv. 2022 à 14:17
A voir également:
- Icone css
- Fichier icone - Guide
- Icone windows - Guide
- Icône iphone - Guide
- Icone capture d'écran samsung - Guide
- Que représente cette icône ? - Forum Windows
1 réponse
Bonjour,
si vous connaissez le principe d'une page web vous savez que ses contenus peuvent être intégrés directement dans son écriture(HTML étant du texte il s'écrit) ou à des ressources externes duits hypertextes(une référence à l'emplacement où se trouve la ressource qui permet de la lier au texte HTML de l'inclure au résultat affiché par le navigateur.
Exemple : pour une image n'est pas un texte mais l'adresse de l'image qui fournit le fichier qui est chargé AVEC et PAR le texte de la page.
C'est quoi une image informatique?
Il y a plusieurs possibilités d'images en informatique qui sont autres qu'un fichier image et un fichier d'image peut avoir différentes formes(technologies différentes) pour être générée(exister en tant qu'image qui sont fournies à des yeux humains).
Une image comme tout fichier informatique peut avoir différents formats et "type".
Le format c'est le nom(extension) derrière le point du fichier. .jpg .png .gif etc...
Ce sont des images bitmap, les informations de chaque élément sont des cases de couleurs qui affichées ensemble forment l'image entière. On parle aussi de pixels(éléments de l'image en français) et sont enregistrées en bits(bitmap = carte des bits qui composent l'image).
TYPE d'IMAGES
(le mot type est abusif mais par défaut d'autre mot j'utiliserais celui ci)
Un autre "type" d'image est le format vectoriel. Contrairement au images bitmap ce ne sont pas des pixels qui indiquent chaque partie de l'image mais des vecteurs qui indiquent forment et couleurs. Exemple : une ligne ce sont les 2 points qui la composent, une épaisseur et la couleur utilisée pour cette ligne. Ce genre de fichiers contient donc les points, lignes, épaisseur et formes qui seront utilisées, éventuellement comment chacun de ces élément s'agencent par rapport aux autres.
Exemple avec e format SVG qui est compatible avec le format HTML:
https://www.w3schools.com/graphics/svg_intro.asp
Comme vous pouvez voir avec cet exemple l'image du'n cercle jaune se compose(en texte ):
De l'indication du format indiquant une hauteur et largeur(width et height)
De l'indication de ce que comprends l'image SVG par la forme qu'il utilise
Un cercle:
les positions x et y (sur un repère cartésien) du centre du cercle
de son rayon
des informations sur la couleur des contours(stroke) du cercle et l'épaisseur de celui ci(stroke-width)
et de la couleur de remplissage à utiliser (fill)
Un fichier d'une image vectoriel est donc un fichier de texte qui contient toutes les formes et couleurs des différentes "parties" de l'image.
Le format svg est un format vectoriel fréquent mais pas le seul bien sûr.
Autre chose que les images bitmap(des listes de bits contenant les points de couleur dans une grille) ou images vectorielles(un descriptif des propriétés de formes, couleurs, épaisseurs etc...) existe t'il?
Oui.
si vous connaissez le principe d'une page web vous savez que ses contenus peuvent être intégrés directement dans son écriture(HTML étant du texte il s'écrit) ou à des ressources externes duits hypertextes(une référence à l'emplacement où se trouve la ressource qui permet de la lier au texte HTML de l'inclure au résultat affiché par le navigateur.
Exemple : pour une image n'est pas un texte mais l'adresse de l'image qui fournit le fichier qui est chargé AVEC et PAR le texte de la page.
C'est quoi une image informatique?
Il y a plusieurs possibilités d'images en informatique qui sont autres qu'un fichier image et un fichier d'image peut avoir différentes formes(technologies différentes) pour être générée(exister en tant qu'image qui sont fournies à des yeux humains).
Une image comme tout fichier informatique peut avoir différents formats et "type".
Le format c'est le nom(extension) derrière le point du fichier. .jpg .png .gif etc...
Ce sont des images bitmap, les informations de chaque élément sont des cases de couleurs qui affichées ensemble forment l'image entière. On parle aussi de pixels(éléments de l'image en français) et sont enregistrées en bits(bitmap = carte des bits qui composent l'image).
TYPE d'IMAGES
(le mot type est abusif mais par défaut d'autre mot j'utiliserais celui ci)
Un autre "type" d'image est le format vectoriel. Contrairement au images bitmap ce ne sont pas des pixels qui indiquent chaque partie de l'image mais des vecteurs qui indiquent forment et couleurs. Exemple : une ligne ce sont les 2 points qui la composent, une épaisseur et la couleur utilisée pour cette ligne. Ce genre de fichiers contient donc les points, lignes, épaisseur et formes qui seront utilisées, éventuellement comment chacun de ces élément s'agencent par rapport aux autres.
Exemple avec e format SVG qui est compatible avec le format HTML:
https://www.w3schools.com/graphics/svg_intro.asp
Comme vous pouvez voir avec cet exemple l'image du'n cercle jaune se compose(en texte ):
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
De l'indication du format indiquant une hauteur et largeur(width et height)
De l'indication de ce que comprends l'image SVG par la forme qu'il utilise
Un cercle:
les positions x et y (sur un repère cartésien) du centre du cercle
de son rayon
des informations sur la couleur des contours(stroke) du cercle et l'épaisseur de celui ci(stroke-width)
et de la couleur de remplissage à utiliser (fill)
Un fichier d'une image vectoriel est donc un fichier de texte qui contient toutes les formes et couleurs des différentes "parties" de l'image.
Le format svg est un format vectoriel fréquent mais pas le seul bien sûr.
Autre chose que les images bitmap(des listes de bits contenant les points de couleur dans une grille) ou images vectorielles(un descriptif des propriétés de formes, couleurs, épaisseurs etc...) existe t'il?
Oui.
7 janv. 2022 à 14:11
Un jeu de de caractère peut correspondre à la liste des symboles alphabétiques permettant l'écriture. Parmi ces symboles il y a ce qu'on appelle les lettres. Ces lettres peuvent avoir différentes casse: minuscule et majuscule qui correspondent à des règles de langage. Il y a aussi des caractères de ponctuation.
En informatique et sur le web un jeu de caractère(charset) peut être appliqué à un document qui permet de définir les conventions utiles aux langages utilisés et les différences possibles pour écrire ces différents langages. La particularité la plus simple qui explique cette différente est la présence de caractères accentués(é, è, à...) dans certains langages(comme le français)à et leur absence dans d'autres(en anglais les accents n'existent pas). Bien sûr il y a d'autres différents pour d'autres langages(la rota de l'espagnol, l'esset allemand...).
Je ne parle bien sûr que des langages alphabétiques.
La solution donc de pouvoir indiquer et utiliser différents jeux de caractères pour une écriture de texte correspond donc à des différences régionales de conventions d'écriture et langages qui sont différents: des jeux de caractères différents qui incluent ces différences dans les symboles qui sont utilisés(lettre avec ou sans accent possible par ex.)
Quel rapport avec les images?
Un caractère alphabétique est une image à laquelle l'esprit de celui qui l'utilise associe un son ou une règle formée en grammaire formant un son, dans le mot en les associant un sens.
Ou pas du tout, ce sont les symboles qui ne sont pas de l'alphabet mais sont utilisé dans la langue(les caractères de ponctuation comme , : ; ! . etc...).
Il y a 2 choses auxquelles je veut en venir à partir de l'explication de jeux de caractères différents et la nécessité de les indiquer pour prendre en compte ces différences:
_la nécessité d'utiliser des normes pour les différentes écriture est à prendre en compte dans un contexte global(Internet) et le jeu de caractères la solution qui y réponds. S'il n'est pas pris en compte cela donne une erreur d'affichage de ces caractères.
_un jeu de caractères n'est que la liste des images correspondant aux éléments du langage qui est utilisé. On peut donc l'utiliser comme une liste d'images si on veut et comme c'est pratique il n'y a pas de raison de ne pas le faire bien qu'on perde son affiliation à un ou des langages à des langues particulières.
Et pour ces 2 points les correspondances utilisées en HTML(ou en informatique tout court)
_On peut indiquer dans les documents que l'on écrit de caractères (dits) spéciaux qui correspondent à d'autres notation que celle passant par le jeu de caractères.
Par exemple la notation ASCII qui est une norme informatique(un jeu de caractères) et ainsi étendre à l'affichage de symboles différents en évitant un problème d'affichage.
En HTML la convention(ou norme) pour afficher un caractère du jeu de caractères ASCII est d'indiquer avec le symbole "&" le début de l'appel à la notation ASCII et avec le symbole ";" la fin de ce caractère à utiliser.
Exemple concret < et > sont l'appel aux notations ASCII en HTML des symboles "<" et ">" qui sont des symboles que le langage HTML utilise déjà mais pour séparer les éléments de son langage(les balises).
Voici le lien des normes d'écriture pour le ASCII en HTML:
https://www.w3schools.com/charsets/ref_html_ascii.asp
_Un jeu de caractère n'étant qu'une liste de symboles(les lettres de l'alphabet et les différences des conventions d'écriture des langues différentes du monde: minuscule ou majuscule(bas et haut de casse), italique ou caractères gras. On peut très bien remplacer les lettres par d'autres symboles correspondant à des images hors de tout langage.
Ah ben c'est la définition communément admise de ce qu'est une icône informatique ça!
Une image simple et expressive.
Voici un exemple d'images qui peuvent être indiquées comme cela en HTML:
https://www.w3schools.com/charsets/ref_html_symbols.asp
Voilà la question que vous posez semble faire appel à ce principe.
Je n'ai pas l'envie de faire la recherche pour vous de quel jeu de caractère de type symbolique(et non entité de sens alphabétique pour un langage) et il en existe quantité qui apportent donc des "icônes" de différents type.
A vous de trouver celui qui peut vous correspondre une fois que vous saurez utiliser ceux ci.
Je vous ait montré comment le faire avec l'ASCII pour le HTML qui est la norme commune.
Le site en lien propose des tutos et est fait par le consortium web qui indique les normes à utiliser. Donc plutôt fiable car ce sont eux qui font les règles et ajoutent les possibilités nouvelles au fur à mesure que celles ci ont prouvé leur utilité et intérêt sans risques.
Modifié le 7 janv. 2022 à 14:17
Je vous met uniquement la source de la référence indiquée:
caractères ASCII en HTML:
https://www.w3schools.com/charsets/ref_html_ascii.asp
utilisation de symboles(icônes) en HTML:
https://www.w3schools.com/charsets/ref_html_symbols.asp
Les liens sont une partie des listes complètes (que vous pouvez retrouver facilement) de ce qui est "officiellement" accepté et d'une explication complète de comment les utiliser que vous trouverez facilement en naviguant un peu sur le site indiqué(vous pouvez aussi changer la langue pour passer en français par le menu en haut).