Mire hoxe en día algunha páxina web e notarás que comparten certas cousas en común. Un destes trazos compartidos son imaxes. As imaxes certas engádense tanto á presentación dun sitio web. Algunhas destas imaxes, como o logotipo dunha empresa, axudan a marcar o sitio e conectan esa entidade dixital á súa empresa física.
Para engadir unha imaxe, icona ou gráficos á súa páxina web, cómpre usar a etiqueta no código HTML dunha páxina. Coloca a etiqueta IMG no teu HTML exactamente onde desexa mostrar o gráfico. O navegador web que está a renderizar o código da páxina substituirá esta etiqueta co gráfico axeitado unha vez que se vexa a páxina. Volvendo ao exemplo do noso logotipo da empresa, aquí podes engadir esa imaxe ao teu sitio:
Atributos de imaxe
Mirando o código HTML anterior, verá que o elemento inclúe dous atributos. Cada un deles é necesario para a imaxe.
O primeiro atributo é o "src". Este é literalmente o ficheiro de imaxe que quere que se amose na páxina. No noso exemplo estamos utilizando un ficheiro chamado "logo.png". Este é o gráfico que o navegador web mostraría cando renderice o sitio.
Tamén notarás que antes deste nome de ficheiro, agregamos algunha información adicional, "/ images /". Esta é a ruta do ficheiro. A barra de diante inicial di ao servidor que busque a raíz do cartafol. Buscará entón un cartafol chamado "imaxes" e finalmente o ficheiro chamado "logo.png". Usar un cartafol chamado "imaxes" para almacenar todos os gráficos dun sitio é unha práctica moi común, pero a súa ruta de arquivo cambiaríase ao que sexa relevante para o seu sitio.
O segundo atributo requirido é o texto "alt". Este é o "texto alternativo" que se amosa se a imaxe non se carga por algún motivo. Este texto, que no noso exemplo lese "Logotipo da empresa", mostraríase se a imaxe non se carga. Por que isto ocorrería? Unha variedade de razóns:
- Ruta de ficheiro incorrecta
- Nome de ficheiro incorrecto ou erro ortográfico incorrecto
- Erro de transmisión
- O ficheiro foi eliminado do servidor
Estas son só algunhas posibilidades de por que a nosa imaxe especificada pode faltar. Nestes casos, o noso texto alt mostraríase no seu lugar.
O software de lectura de pantalla tamén usa o texto Alt para "ler" a imaxe a un visitante que ten problemas de visión. Dado que non poden ver a imaxe como o que facemos, este texto permítelles saber que imaxe é a mesma. É por iso que se require un texto alt e por que debe indicar claramente que imaxe é.
Un malentendido común do texto alt é que está pensado para motores de busca. Isto non é certo. Mentres que Google e outros motores de procura ler este texto para determinar que é a imaxe (recordade que tampouco poden "ver" a súa imaxe), non debe escribir texto alt para apelar exclusivamente aos motores de busca. Autor claro o texto alt que se usa para os humanos. Se tamén pode engadir algunhas palabras clave á etiqueta que apelará aos motores de busca, está ben, pero sempre asegúrese de que o texto de alto cumpre o seu obxectivo primario, indicando que imaxe é para quen non pode ver o ficheiro gráfico.
Outras atributos
A etiqueta IMG tamén ten outros dous atributos que podes ver en uso cando engades un gráfico na túa páxina web: o ancho eo alto. Por exemplo, se usa un editor de WYSIWYG como Dreamweaver, engade automaticamente esta información para ti. Aquí tes un exemplo:
Os atributos WIDTH e HEIGHT indican ao navegador o tamaño da imaxe. O navegador entón sabe exactamente o espazo no deseño para asignar e pode pasar ao seguinte elemento da páxina mentres se descarga a imaxe. O problema co uso desta información no teu HTML é que non sempre queres que a túa imaxe se mostre a ese tamaño exacto. Por exemplo, se ten un sitio web sensible cuxos cambios de tamaño se basan nunha pantalla de visitantes e tamaño do dispositivo, tamén quererá que as súas imaxes sexan flexibles. Se establece no seu HTML o tamaño fixo, atopará que é moi difícil substituír as consultas multimedia sensibles ao CSS . Por este motivo, e para manter unha separación de estilo (CSS) e estrutura (HTML), recoméndase que non engada atributos de ancho e alto ao seu código HTML.
Unha nota: se deixas estas instrucións de tamaño e non especifica un tamaño en CSS, o navegador mostrará a imaxe no seu tamaño nativo por defecto.
Editado por Jeremy Girard