Pour placer des images sur les pages Web est utilisé. Tutoriel illustré sur les graphiques Web. ALT attribut - comme option de rechange

Définition 1.

La page Web est fichier texteCréé en HTML et placé dans World Wide Web (www). La page Web sauf le texte peut contenir des liens hypertextes pour lesquels vous pouvez passer à d'autres pages Web et les afficher, ainsi que des insertions sous forme de graphiques, d'animations, de clips vidéo et de musique.

Utilisation du langage HTML, vous pouvez:

Créez et modifiez des pages Web.
Modifiez les documents de format HTML sur Internet, en tenant compte du fonctionnement de tous les objets implémentés dans le document (images, animations, etc.).
Utilisation des liens hypertextes et la possibilité d'introduire dans un document Dessins, diagrammes, animations, clips vidéo, accompagnement musical et vocal, effets spéciaux de texte, création de présentations multimédia, diaporamas, projets de démonstration.

Note 1.

Les images graphiques sont généralement stockées dans fichiers séparés. Dans HTML, il existe des balises spéciales, à l'aide desquelles dans les codes de pages Web sont des liens prescrits qui sont des adresses réelles de ces fichiers sur Internet. Répondre à de telles balises, le navigateur Web apporte une demande au serveur Web dans le fichier approprié avec l'image, un audio ou une vidéo et la rapporte à la page Web dans l'emplacement de cette balise. Toute données (images, audio et vidéos, etc.), qui sont stockées dans des fichiers individuels à partir de la page Web, sont appelées pages Web intégrées. Considérons une lecture en lecture du processus d'ajout d'une image à la page Web.

Ajouter des images à une page Web

L'attractivité des pages Web est précisément dans les graphiques et d'autres objets différents utilisés sur eux. Ajouter une image à la page n'est pas difficile. Et ajouter des graphiques capables de faire apparence Les pages Web sont plus présentables et professionnelles, beaucoup plus compliquées, des connaissances spéciales seront nécessaires.

Ajouter une image à la page peut utiliser une balise source d'une image qui regarde:

où - la balise elle-même et SCR est son attribut. Étant donné que l'attribut SCR est obligatoire, on peut dire que toute cette entrée est une balise commune. Dans la balise source, la partie de fermeture correspondante n'est pas utilisée, car la balise source est autosuffisante, et donc lorsqu'elle est utilisée, il est nécessaire d'ajouter une ligne oblique de fermeture à la fin :.

Ajouter des inscriptions alternatives

Sur Internet, vous pouvez trouver très souvent diverses inscriptions qui sont affichées lorsque vous survolez le pointeur de la souris sur n'importe quel objet graphique de la page Web. Ces inscriptions contiennent généralement des informations supplémentaires sur l'image elle-même ou sur la zone de la page sur laquelle il se trouve.

Vous trouverez ci-dessous le code NTML dans lequel l'attribut Alt est ajouté à l'intérieur de la balise. Cet attribut est similaire à l'attribut SRC rapporte une sorte de navigateur informations Complémentaires Sur l'image et il peut également être utilisé pour être utilisé avec l'équipe.

alt \u003d "(! Lang: C'est une photo!" />!}

La fonction d'attribut ALT est de déterminer pour l'élément graphique du texte alternatif ajouté à la page Web. C'est ce qu'on appelle une alternative car elle est affichée sur l'écran comme une alternative pour l'image elle-même. L'attribut alt effectue une autre caractéristique importante. Il permet au concepteur Web de s'assurer que si le visiteur de la page ne voit pas l'image sur son écran, il peut au moins être en mesure de se familiariser avec les informations textuelles ajoutées à cette image.

Lorsque vous utilisez l'attribut Alt pour chaque balise, il est important d'être attentif à ne pas attribuer de messagerie texte en éléments graphiques. Par exemple, cela n'a aucun sens dans l'ajout d'inscriptions de texte alternatives aux éléments de l'apparence de la page. Pour éviter de telles erreurs, vous pouvez attribuer un attribut de valeur vide de ces éléments (ALT \u003d "). Si vous ne spécifiez pas les valeurs à d'autres attributs, le navigateur reproduira l'image dans taille de la sourceEn même temps, percevant le bord supérieur de l'image avec le bord supérieur d'une série de chaîne de texte. Cependant, vous pouvez modifier ces deux paramètres à l'aide des balises de style.

Attributs d'image

La balise a des attributs qui vous permettent de changer la taille des images. Voici certains d'entre eux:

hauteur - avec elle, il est déterminé par la hauteur de l'image en pixels ou pourcentages;
largeur - L'utilisation de la largeur de l'image en pixels ou en pourcentages est déterminée.

Réglage de la hauteur et de la largeur de l'image

Les dimensions des images publiées sur les pages Web peuvent être définies à l'aide des attributs ci-dessus. De plus, leurs valeurs sont spécifiées soit comme un nombre fixe de pixels, soit en pourcentage par rapport à la taille de la page. Dans le code HTML ci-dessous, la première balise contient les tailles de l'image d'origine en pixels (60 pixels verticalement et 60 pixels horizontalement), la deuxième largeur d'étiquette de la même image définit égale à 6% de la largeur de la page, et le La hauteur est de 10% par rapport à la hauteur de la page.

alt \u003d "C'est une photo!" Poids \u003d "60" largeur \u003d "60" /\u003e

alt \u003d "C'est une photo!" Hauteur \u003d "10%" largeur \u003d "6%" /\u003e

Note 2.

Lors de la lecture d'images dans votre fenêtre, le navigateur est également bien adapté au traitement des valeurs des deux espèces. Cependant, il est nécessaire de rappeler que les visiteurs de pages Web sur des ordinateurs peuvent être installés à l'écran d'une résolution à l'écran autre que la vôtre. Par conséquent, lorsque la taille de l'image change, vous devez définitivement définir les deux valeurs d'image (hauteur et largeur). Lorsque vous ne changez qu'une de ces valeurs, l'image peut être étirée sur l'écran ou horizontalement.

Vous pouvez utiliser la création d'une illusion d'une image de chargement plus rapide. Pour ce faire, vous devez toujours spécifier les valeurs des attributs de hauteur et de largeur, que les dimensions de l'image soient modifiées ou non. Comme ils informent les informations importantes du navigateur sur le nombre d'espaces requis pour placer l'image sur la page. En réponse, le navigateur indique l'espace dont vous avez besoin pour l'image et continue de construire d'autres éléments de la page, sans arrêter le téléchargement de l'image elle-même. À cet égard, il semble que la page soit chargée plus rapidement, car ses visiteurs n'ont pas à attendre une charge complète de l'image pour voir d'autres informations sur la page.

Pour que l'image sur n'importe quel écran, quelle que soit sa permission, il a pris exactement un espace spécifique sur la largeur de la page, vous devez utiliser des valeurs de pourcentage. S'il est nécessaire que le permanent soit la permission du dessin lui-même (sa taille en pixels), il est nécessaire d'utiliser des valeurs en pixels.

Nivellement du texte et des graphiques

Pour aligner l'image à droite (droite) ou à gauche (à gauche), le bord de la chaîne de texte utilise l'attribut Align Tag. Par example:

alt \u003d "C'est une photo!" Poids \u003d "60" largeur \u003d "60" Align \u003d "Droite" /\u003e

Pour aligner l'image verticalement par rapport à la chaîne de texte, vous pouvez également utiliser cet attribut capable de prendre des valeurs supérieures, inférieures et centrales. La valeur supérieure indique l'alignement du bord supérieur de l'image le long du bord supérieur de son texte environnant. La valeur inférieure indique l'alignement du bord inférieur de l'image le long du bord inférieur de son texte environnant. La valeur centrale indique l'alignement du centre d'image dans le centre de cordes de texte.

Utiliser des images comme références

Les images sont également utilisées pour concevoir des hyperliens vers d'autres documents. Dans le HTML, l'image se transforme en un hyperlien ainsi que l'inscription. Pour ce faire, la TEG est utilisée dans laquelle l'élément de la page est (dans notre cas, l'image), qui devrait être une référence. Le lien suivant sera basculé sur cette image.

Miniatures d'images

Outre la méthode ci-dessus, dans laquelle l'image agit comme un lien hypertexte, elle peut également être utilisée comme un lien hypertexte qui transitions d'une image à une autre. Cela est nécessaire dans les cas où la taille de l'image qui est souhaitée publier sur la page Web est assez grande et sera chargée depuis très longtemps, ce qui est inacceptable pour de nombreux visiteurs. Par conséquent, créez une copie réduite de cette image (Thumbnail) et représente le lien hypertexte. Si le visiteur de la page est intéressé par cette image, il clique sur la vignette, vous pourrez aller voir l'image à part entière. Nous donnons un exemple de code:

alt \u003d "Cliquez pour voir l'image normale."

poids \u003d "60" largeur \u003d "60" /\u003e

Secrets d'utilisation réussie des images

Les images portent beaucoup d'informations visuelles pour les visiteurs et les rend attrayants, en outre, ils sont assez jolis à ajouter à la page Web, mais dans le même temps, vous devez adhérer à certaines règles de création du site, si nous le voulions devenir populaire sur le réseau.

Lors de la création de pages, vous devez essayer de placer des images de petites tailles sur eux, car les images grandes dimensions nécessiteront beaucoup de temps à télécharger et que certains utilisateurs utilisent toujours des canaux de bande passante basse pour accéder au réseau, et donc la taille du téléchargement. Les fichiers ont une importance fondamentale.

Note 3.

La taille globale de l'ensemble du fichier de document HTML est importante, ce qui, à son tour, dépendra non seulement de la taille des images qu'il contient, mais également de leur quantité. Vous devez être attentif lorsque vous utilisez l'attribut Alt afin que le contenu du message texte correspond toujours à l'image elle-même. Et dans le cas contraire: il est nécessaire de s'assurer que l'image correspond aux informations de texte présentées sur la page.

Lorsque vous utilisez des images empruntées sur Internet, sur page crééeVous devez vérifier si ces images sont protégées par le droit d'auteur.

Images HTML ajouté aux pages Web à l'aide d'une étiquette . L'utilisation de graphiques rend les pages Web visuellement plus attrayantes. Les images permettent de mieux transmettre l'essence et le contenu du document Web.

Avec l'aide de tags HTML et peut être créé images de carte avec des zones actives.

Insérer des images dans le document HTML

1. tag

Élément Représente l'image et son contenu de sauvegarde ajouté à l'aide de l'attribut Alt. Comme article est une ligne, alors il est recommandé de le placer à l'intérieur Élément de bloc, par exemple,

Ou alors

Étiqueter Il a un attribut SRC obligatoire, dont la valeur est un chemin absolu ou relatif de l'image:

Pour la balise Les attributs suivants sont disponibles:

Tableau 1. Attributs de tag

Attribut	La description
Alt.	L'attribut alt ajoute un texte alternatif à l'image. Il est affiché sur l'apparence de site avant de le charger ou lorsque le graphique est désactivé et est également affiché avec une pointe pop-up lorsque vous survolez le curseur de la souris sur l'image. Syntaxe: alt \u003d "(! Lang: image Description" . !}
Crossorigin.	L'attribut Crossorigin vous permet de télécharger des images d'autres ressources de domaine à l'aide de requêtes Cors. Les images chargées en toile à l'aide de requêtes Cors peuvent être réutilisées. Valeurs admissibles: Anonyme - La requête en croix est effectuée à l'aide d'une en-tête HTTP et les informations d'identification ne sont pas transmises. Si le serveur ne donne pas les informations d'identification au serveur à partir duquel le contenu est demandé, l'image sera endommagée et son utilisation sera limitée. Utilisez-les-identificiels - La requête transversale est exécutée avec le transfert des informations d'identification. Syntaxe: Crossorigin \u003d "anonyme".
Hauteur	L'attribut hauteur définit la hauteur d'image en px. Syntaxe: Hauteur \u003d "300".
islam	L'attribut ISMAP indique que l'image fait partie d'une carte d'image située sur le serveur (image de la carte - une image avec des zones interactives). Lorsque vous cliquez sur la carte image, les coordonnées sont transmises au serveur en tant qu'URL de la chaîne de requête. L'attribut ISMAP n'est autorisé que si l'élément C'est un élément descendant Avec l'attribut href actuel. Syntaxe: ISMAP.
Longdesc.	URL d'une description d'image étendue qui complète l'attribut ALT. Syntaxe: longdès \u003d "http://www.example.com/description.txt".
Src	L'attribut SRC définit le chemin de l'image. Syntaxe: src \u003d "flower.jpg".
Tailles.	Spécifie la taille de l'image en fonction des paramètres d'affichage. Cela ne fonctionne qu'avec un attribut SRCset spécifié. La valeur d'attribut est une ou plusieurs lignes spécifiées par la virgule.
Srcset.	Crée une liste de sources pour l'image qui sera sélectionnée en fonction de la résolution de l'écran. Il peut être utilisé ensemble ou au lieu de l'attribut SRC. La valeur d'attribut est une ou plusieurs lignes séparées par la virgule.
usemap	L'attribut USEMAP définit l'image comme une image de carte. La valeur doit commencer avec le symbole #. La valeur est associée à la valeur d'attribut de nom ou d'identifiant de tag et crée une connexion entre les éléments et . L'attribut ne peut pas être utilisé si l'élément C'est un élément descendant ou alors
largeur	L'attribut de largeur définit la largeur de l'image en px. Syntaxe: largeur \u003d "500".

1.1. Adresse de l'image

L'adresse d'image peut être entièrement indiquée (URL absolue), par exemple:
URL (http://anysite.ru/images/anyphoto.png)

Ou à travers le chemin relatif de document ou alors catalogue de racines Placer:
URL (../ images / anyphoto.png) - chemin relatif du document,
URL (/Images/anyphoto.png) est un chemin relatif du catalogue racinaire.

Ceci est interprété comme suit:
../ - signifie grimper d'un niveau, au catalogue racinaire,
Images / - Allez dans le dossier Image,
anyphoto.png - Indique le fichier image.

1.2. Dimensions d'image

Sans spécifier la taille de l'image, le dessin est affiché sur une page de taille réelle. Vous pouvez modifier les dimensions de l'image à l'aide des attributs de largeur et de hauteur. Si un seul des attributs est spécifié, la seconde sera automatiquement calculée pour préserver les proportions de modèle.

1.3. Formats de fichiers graphiques

Format JPEG (Groupe d'experts photographiques conjoints). Jpeg images Idéal pour les photos, ils peuvent contenir des millions de couleurs différentes. Squeeze les images mieux que GIF, mais le texte et les grandes zones avec une couleur unie peuvent être recouvertes de taches.

Format gif Format d'interchange graphique). Idéal pour compresser des images dans lesquelles il existe des zones de couleur unie, telles que des logos. Les fichiers GIF vous permettent de définir l'une des couleurs transparentes, de sorte que le fond de la page Web puisse se manifester à travers une partie de l'image. De plus, les fichiers GIF peuvent inclure une animation simple. Les images GIF contiennent seulement 256 nuances, car les images ont l'air de couleur tachetée et irréaliste comme des affiches.

Format png PORTABLE NETWORK GRAPHICS). Inclut les meilleures caractéristiques des formats GIF et JPEG. Contient 256 couleurs et permet de faire l'une des couleurs transparentes tout en comprimant les images dans une taille plus petite que le fichier GIF.

Format apng Graphiques réseau portables animés). Format d'image basé sur format png. Vous permet de stocker l'animation et de soutenir la transparence.

Format SVG Image Vectorielle). Le dessin SVG consiste en un ensemble de formes géométriques décrites au format XML: ligne, ellipse, polygone, etc. Pris en charge des graphiques statiques et animés. Un ensemble de fonctions comprend diverses conversions, masques alpha, effets de filtrage, capacité d'utiliser des modèles. Les images du format SVG peuvent varier en taille sans réduire la qualité.

Format BMP (Image bitmap). C'est un bitmap (original) non compressé, dont le gabarit est une grille de pixels rectangulaire. Le fichier bitmap est composé d'une en-tête, d'une palette et de données graphiques. Le titre stocke les informations graphiques et fichiers (profondeur des pixels, hauteur, largeur et nombre de couleurs). La palette n'est indiquée que dans ces fichiers bitmap contenant des images à la palette (8 et moins de bits) et consistent en pas plus de 256 éléments. Les données graphiques représentent la photo elle-même. Profondeur de couleur B. ce format Peut-être 1, 2, 4, 8, 16, 24, 32, 48 bits par pixel.

Format ICO (Icône Windows). Icônes de stockage de fichiers dans Microsoft Windows.. En outre, l'icône Windows est utilisée comme icône sur les sites Web sur Internet. C'est une image de ce format qui est affiché à côté de l'adresse du site ou du signet du navigateur. Un fichier ICO contient une ou plusieurs icônes, la taille et la chromaticité de chacune d'elles sont définies séparément. La taille de l'icône peut être n'importe où, mais la plupart des icônes carrées utilisées avec des soirées 16, 32 et 48 pixels.

2. tag

Étiqueter Sert pour la représentation graphique Sous la forme d'une carte avec des zones actives. Les zones actives sont déterminées en modifiant le type de curseur de la souris lors de la planche. En cliquant sur des zones actives, l'utilisateur peut passer aux documents associés.

La balise est disponible à l'attribut Nom, qui spécifie le nom de la carte. Nom Attribut Valeur pour la balise Doit correspondre au nom de l'attribut d'élément USEMAP :

...

Élément Contient un certain nombre d'éléments Définir des zones interactives dans l'image de la carte.

3. tag

Étiqueter Il ne décrit qu'une seule zone active dans le cadre des cartes d'image du côté du client. L'élément n'a pas de balise de fermeture. Si une zone active chevauche l'autre, le premier lien sera mis en œuvre dans la liste des zones.

Tableau 2. Attributs de tag

Attribut	Brève description
Alt.	Spécifie du texte alternatif pour la carte active.
Coords.	Définit la position de la zone à l'écran. Les coordonnées sont définies en unités de longueur et sont séparées par des virgules: pour cercle - coordonnées centrales et rayon du cercle; pour rectangle - les coordonnées des coins inférieurs gauche et droite; pour polygone - Les coordonnées des sommets du polygone dans l'ordre souhaitée, il est également recommandé d'indiquer les dernières coordonnées égales au premier, pour l'achèvement logique de la figure.
Télécharger	Complète l'attribut href et indique au navigateur que la ressource doit être chargée au moment où l'utilisateur clique sur le lien, au lieu de, par exemple, pour le pré-ouvrir (en tant que fichier PDF). En spécifiant le nom de l'attribut, nous définissons ainsi le nom sur l'objet téléchargeable. Il est autorisé à utiliser l'attribut sans spécifier sa valeur.
href.	Spécifie l'URL pour référence. Une adresse de liaison absolue ou relative peut être spécifiée.
hreflang.	Spécifie la langue du document Web associé. Utilisé uniquement avec l'attribut href. Les valeurs reçues sont une abréviation composée d'une paire de lettres dénotant du code de langue.
Médias	Détermine pour quels types d'appareils le fichier sera optimisé. La valeur peut être n'importe quelle requête multimédia.
Rel.	Complète l'attribut HREF avec des informations sur la relation entre le document actuel et associé. Valeurs totales: Alternatif - référence à une version alternative du document (par exemple, formulaire d'impression Pages, traduction ou miroir). Auteur - Lien à l'auteur du document. Bookmark est une URL permanente utilisée pour les signets. Aide - Lien de référence. Licence - Référence aux informations de copyright sur ce document Web. Suivant / prev - Spécifie le lien entre l'URL individuelle. Grâce à ce marquage, Google peut déterminer que le contenu des données de la page est connecté dans une séquence logique. Nofollow - interdire moteur de recherche Allez sur les liens sur cette page ou pour un lien spécifique. NOREFERRER - Indique que la liaison du navigateur ne doit pas envoyer l'en-tête de requête HTTP (référent), qui enregistre le visiteur du site de quelle page. Prefetch - indique que le document cible doit être mis en cache, c'est-à-dire Le navigateur de l'arrière-plan charge le contenu de la page à votre cache. Recherche - Indique que le document cible contient un outil de recherche. Tag - indique mot-clé Pour le document actuel.
façonner	Spécifie la forme d'une zone active sur la carte et ses coordonnées. Peut prendre les valeurs suivantes: Zone recto-active de forme rectangulaire; Le cercle est une zone active sous la forme d'un cercle; Poly est une zone active sous la forme d'un polygone; Par défaut - La zone active prend toute la zone de l'image.
cible.	Spécifie où le document sera téléchargé lorsque le lien est affiché. Prend les valeurs suivantes: _Self - la page est chargée dans la fenêtre actuelle; _Blank - La page s'ouvre dans une nouvelle fenêtre de navigateur; _Parent - la page est chargée dans le parent parent; _Top - la page est chargée dans la fenêtre du navigateur complet.
Taper	Spécifie le type MIME de fichiers de référence, c'est-à-dire extension de fichier.

4. Un exemple de création d'une image de carte

1) Emplacement de l'image d'origine sur les zones actives du formulaire souhaité. Les coordonnées des zones peuvent être calculées à l'aide d'un programme de traitement de photos, par exemple, Adobe Photoshop. ou alors Peindre..

Figure. 1. Un exemple de balisage d'image pour créer une carte

2) Nous demandons le nom de la carte en l'ajoutant à la balise En utilisant l'attribut Nom. La même valeur attribuer l'attribut de la balise USMAP .

Jpg "alt \u003d" (! Lang: fleurs_foto" width="680" height="383" usemap="#flowers"> !}
Figure. 2. Un exemple de création d'une image cartographique lorsque vous appuyez sur le curseur de la souris sur la fleur, transition vers la page décrivant

La plupart des pages Web sont programmées. Cela vous permet de colorer et de présenter clairement des informations. Dans de nombreux cas, il est préférable de montrer une image que de donner une longue description de texte.

Il y a deux façons de placer des pages d'image sur la page:

insérer des images individuelles;
remplir le fond avec une image.

Dans tous les cas, l'image graphique est extraite du fichier.

Insérer des images graphiques

L'insertion sur la page graphique du fichier de format graphique est effectuée à l'aide de la balise (de l'image - image anglaise) avec une indication de l'adresse de fichier comme argument de l'attribut SRC:

< IMG SRC = "адрес_графического_файла" >

L'adresse du fichier graphique est une URL Etolybo, ou le nom du fichier, indiquant éventuellement le chemin. Par exemple, pour afficher un fichier graphique logotiP.jpg doit être écrit Tag:

< IMG SRC = "logotip.jpg" >

Pour augmenter la vitesse de la transmission d'image graphique dans la balise Vous pouvez utiliser l'attribut ( paramètre supplémentaire) LOWSRC, qui prend l'adresse du fichier graphique comme argument. Vous pouvez créer deux fichiers graphiques: un (par exemple, laisser le fichier logotip.jpg) contient une image obtenue avec haute résolution, et l'autre (par exemple, logotiP.gif) est une image obtenue avec une résolution basse. Alors tag:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... Il préalcule d'abord le navigateur pour télécharger le fichier logotiP.gif, puis pour le recevoir pour le remplacer par le fichier logoP.jpg.

Une autre façon d'accélérer le téléchargement de graphiques consiste à spécifier la taille de la zone rectangulaire dans laquelle l'image graphique sera placée à l'aide d'attributs. Largeur (largeur) et Hauteur (Hauteur) mesurée en pixels. Si vous spécifiez ces attributs, le navigateur mettra d'abord en surbrillance la place sous la planification, préparer la mise en page du document, affiche le texte et ne chargez que le calendrier. Notez que le navigateur comprime ou étire l'image, l'intégrant dans le cadre taille spécifiée. Un exemple d'indication de la taille de l'image:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Les graphiques sont couramment utilisés avec le texte, de sorte que la tâche d'alignement de texte et l'image graphique se produisent. Cette tâche est résolue à l'aide de l'attribut Aligner. Étiqueter. Avec l'utilisation de divers arguments. Par exemple, nous pouvons souhaiter le texte couché à droite ou à gauche. Habituellement, la photo est intégrée de près avec le texte, qui peut être laid. Afin d'éviter cela, vous pouvez définir des champs vides autour de l'illustration. Les champs sont créés en utilisant des attributs VSRA Pour les champs supérieurs et inférieurs et Nspace. Pour les champs latéraux dans la balise . Les arguments de ces attributs sont indiqués sous la forme de nombres qui déterminent la taille des champs en pixels. Pour annuler le flux autour des graphiques, le texte sert une balise
.

La balise suivante définit le flux autour des graphiques du fichier logotiP.jpg à droite (la photo reste du texte):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Si vous souhaitez localiser la photo à la droite du texte, vous avez besoin d'un attribut. Aligner. Attribuer un argument Droite:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Pour définir des champs autour de l'image, vous devez écrire une balise du formulaire:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Ici, les chiffres 20 et 10 déterminent la taille des champs.

Considérons un exemple de partage de graphiques et de textes. Ouvrez le Bloc-notes (Notepad Stores Editor) Windows. Ecrivez-en un code HTML en informant des balises discutées ci-dessus. Vous trouverez ci-dessous un programme qui affiche du texte et des graphiques. En tant que fichier graphique, vous pouvez utiliser n'importe lequel de vos fichiers disponibles. Ici est utilisé logoP.gif.

< HTML >

< HEAD >

< TITLE > Exercice 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Le texte diffuse l'horaire à droite< / H1 >

Figure. 657.. Le texte renforce la photo à droite

Les grandes possibilités de positionnement précis des images (ainsi que d'autres éléments) sur la page fournissent les tables et modes. Ces éléments HTML seront discutés plus tard. Par exemple, vous pouvez définir une table sans cadres visibles et dans les cellules de cette table, il s'agit d'images, de textes et d'autres éléments.

Il existe des centaines de formats graphiques, mais seuls certains d'entre eux sont pris en charge par des navigateurs Web. Dans cet article, nous décrivons divers formats graphiques de fichiers disponibles pour les concepteurs Web et, inversement, ils doivent être utilisés.

Les formats graphiques de fichiers supportés par les navigateurs Web les plus populaires sont les suivants: Format d'interchange graphique (GIF), groupe d'experts photographiques (JPEG), graphiques de réseau portables (PNG) et graphiques vectoriels. Quelques propriétés des fichiers graphiques:

Transparence - Cette propriété permet à l'image d'être dans différents degrés de transparence à partir d'un état solide à complètement transparent.
La compression est une propriété permettant de stocker l'image dans un fichier beaucoup plus petit, à l'aide d'algorithmes mathématiques pour traiter un groupe de pixels en tant qu'élément unique.
Tisser - permet à l'image d'être chargée d'abord par des lignes impaires, puis même. Cela permet au visiteur de voir l'image plus.
Animation - crée la visibilité du mouvement à l'aide d'une série d'instantanés consécutifs. Pour un GIF animé, un plugin dans le navigateur n'est pas requis et peut fonctionner presque sur tous les appareils.
Le chargement progressif est similaire à l'entrelacement par le fait qu'elle charge uniquement une partie de l'image initialement, mais non basée sur des lignes alternées.

GIF a été fondée en 1980 et accepté par des concepteurs Web au début des années 90 en tant que format graphique principal pour les pages Web. Fichiers GIF Utilisez l'algorithme de compression qui rend la taille du fichier petit pour un téléchargement rapide. GIF est limité à 256 couleurs (8 bits), support pour la transparence et le micrologiciel. Il est également possible de créer des graphiques animés en utilisant ce format. Tous les navigateurs peuvent afficher des fichiers GIF sans problèmes.

Avantages GIF:

Le format graphique le plus largement pris en charge
Les schémas ont l'air mieux dans ce format
Prise en charge de la transparence

Les fichiers sont compressés, mais prennent en charge les "vraies couleurs" (24 bits) et sont un format préféré pour les photos où la question de la qualité est très importante. JPEG prend en charge un format progressif qui vous permet de voir presque instantanément une image qui améliore la qualité lorsque le téléchargement est terminé.

Contrairement aux fichiers GIF, les concepteurs Web peuvent contrôler les fichiers JPEG compressés, ce qui vous permet d'avoir différents niveaux de qualité d'image et de tailles de fichiers.

Avantages JPEG:

La grande compression signifie une vitesse de téléchargement plus rapide.
Produit une excellente qualité pour les photos et les dessins complexes.
Supporte la couleur 24 bits.

PNG est un format relativement récent qui a été saisi comme alternative aux fichiers GIF. PNG prend en charge jusqu'à 24 bits, la transparence, l'entrelacement et peut contenir une description de texte courte de l'image utilisée dans les moteurs de recherche.

Avantages de PNG:

Surmonise la couleur de 8 bits de restrictions dans GIF
Permet la description du texte des images pour les moteurs de recherche
Soutient la transparence
Les schémas ont l'air mieux que JPEG

Graphiques vectoriels

La plupart des graphiques Web sont image raster Ou un motif qui consiste en une grille de pixels de couleur. Illustrations doit être créée dans un graphique vectoriel, qui consiste en une description mathématique de chaque élément qui constitue des lignes et des couleurs d'image. Les graphiques vectoriels sont créés en attirant des programmes tels que Adobe Illustrator ou CorelDRAW. Les graphiques vectoriels doivent être convertis en un format GIF, JPEG ou PNG pour une utilisation sur les pages Web.

Quel format doit être utilisé?

Le concepteur Web peut choisir le format GIF ou JPEG pour la plupart des applications. Mais puisque la taille des fichiers GIF est généralement petite par rapport à la taille fichier JPEGLa plupart des concepteurs Web utiliseront format gif Pour fond, boîtes, cadres et tout autre élément graphique qui a l'air de manière parfaite en utilisant une couleur de 8 bits.

La plupart des concepteurs choisiront format JPEG Pour les photos et les illustrations où la compression ne compromet pas la qualité d'image visuelle.

Comme mentionné, HTML est aujourd'hui la base de la rédaction de toute page Web dans le World Wide Web. Lorsque vous utilisez CSS, les codes de la langue HTML changent radicalement. Vous pouvez dire au revoir à la répugnation de maladroite HTML TAGOV juste pour atteindre l'un ou l'autre effets visuels. Sur certaines tags ou attributs HTML, tels que, par exemple, une étiquette obsolète ...

le principal

Commandez un site Web et gérer les affaires!

Cette phrase peut être entendue et voir sur de nombreux sites, ce qui n'est pas en vain!

Site Internet — C'est le visage de la société. Et c'est le canal de communication le plus moderne et le plus efficace avec un consommateur potentiel. Seules les capacités du site Internet vous permettent d'utiliser pleinement toutes les manières de signaler le message d'information à l'utilisateur. Les informations texte, audio et vidéo peuvent être archivées dans un seul site pour familiariser le consommateur avec eux.

Passant par logiciel Le site peut être reçu par les paiements, parler au téléphone, base de données, envoyer et recevoir des télécopies, échanger des SMS et faire de nombreuses autres actions. Le site Internet moderne est un centre d'information non seulement de toute entreprise, mais également de tout utilisateur Internet.

Et ceci est une méthode gagnant-gagnant d'efficacité et en même temps un rapport simple et visuel de leurs idées ou de leurs développements au public le plus large. Et aujourd'hui, les documents Web écrits dans la langue de balisage HTML Hypertext continuent de rester la principale forme de présentation de données dans l'environnement Web.

Les avantages les plus importants de HTML sont:

Facile, vous permettant d'apprendre HTML dans le temps le plus court.
Possibilité de créer vos propres pages Web
Et HTML fonctionne absolument la même chose sur toutes les plateformes existantes aujourd'hui, l'achat d'équipement supplémentaire n'est pas nécessaire. Et il suffit d'utiliser tout disponible Éditeur de texte, par exemple, Bloc-notes.

Dans ce site, j'ai essayé de décrire en détail tout le processus de création d'un site Web d'un site Web, à savoir la publication d'un projet fini d'Internet afin de fournir un accès à tous les utilisateurs.

J'espère que beaucoup de mes articles seront très utiles, car je ne suis pas un programmeur moi-même, mais ce travail est très inspiré par moi.