Veamos cómo trabajar con imágenes cuando tienes un sitio web en HTML CSS así que vamos a abrir lo que
es nuestro diseño puedes ver que este logotipo es una imagen bien podría haber sido texto pero lo coloqué
como imagen así que vamos a abrir estudio y puedes ver que vienen por ejemplo el logotipo y luego las
lo que es el menú por lo tanto poner aquí una imagen la colocas con una etiqueta llamada M.G. se le
basta.
Puedes ver que MGP autocompletar solamente una etiqueta de apertura no tiene etiqueta de cierre esto
es de las etiquetas no son tantas en realidad pero es una de las etiquetas que solamente tiene apertura
si la pones como cierre no pasa nada.
En realidad todo esto lo vemos pero por ejemplo a quienes les reces lo que se conoce como el source
es decir donde está ubicada la imagen que vas a mostrar.
Puedes ver que nuestro proyecto se encuentra en nuestro archivo Index junto a HTML y tenemos esta carpeta
con imágenes por lo tanto voy a abrir la carpeta de imágenes y solamente aquí le pongo y MG diagonal
y después eliges la imagen que quieres mostrar.
En este caso es logo punto que se ve si guardamos cambios y abrimos nuestro proyecto puedes ver que
no se ve nada pero aquí está el logo no se ve porque el fondo es blanco el texto también es blanco y
puedes ver que el cierre y M.G. No afecta a HTML de nueva cuenta muy flexible no afecta no porque no
afecte es necesario ponerla de hecho no debes de ponerla es recomendado no tenerla ya que no es necesaria.
Tengo conocidos que han sido rechazados un trabajo porque algunos editores por ejemplo sublime te exite
autocompletar la de cierre MG aunque no lo requiera así que no lo debe llevar después de ver que aparece
la imagen correctamente ahora también puedes ver que nos autocompletar este que dice alta y tal vez
digas bueno y qué es lo que vende siendo este atributo que está aquí.
Esto se les conoce como atributos tonto.
Por ejemplo este MGA es una etiqueta este Source es un atributo de aquí también algunas veces también
se les conoce como propiedades esto es Alt significa texto alternativo es decir si la imagen por algo
no llega a cargar este se va a mostrar.
Digamos que ponemos aquí logotipo de bienes raíces si guardas cambios puedes ver que no se ve nada porque
solamente es un texto alternativo que se muestra si la imagen no se ve.
Es decir si Oki carga una imagen que no existe puedes ver que es el logotipo de bienes raíces entonces
el logotipo se va a mostrar o mejor dicho alternativo a mostrar cuando el logotipo no carga en este
caso pues puedes ver que colocó de nueva cuenta la imagen bien y no se muestra texto alternativo algo
importante y por experiencia de usuario es que siempre que tienes un logotipo el usuario espera que
al dar clic en ese logotipo te lleve a lo que es la página principal.
Sitios como Guber sitios como Netflix al dar clic en lo que viene siendo el logotipo te llevan hacia
la página principal y eso lo logras colocando un enlace aquí enlace y vamos a poner aquí además una
diagonal.
Eso nos va a llevar a la carpeta principal y lo que viene siendo el cierre de la rodea lo que viene
siendo la imagen siempre que vemos que nuestro logotipo nos va a llevar a la página principal.
Y esto es una buena experiencia de usuario es casi siempre cualquier usuario va a requerir o quiere
que cuando den clic en el logo los lleve hacia la página principal.
Tenemos más imágenes vamos a continuar practicando un poco más se da un poco de scroll.
Estos tres logotipos los tres que van aquí deben de ser imágenes por lo tanto vamos a abrir el código
de scroll aquí después de este H3 antes de ver que en el diseño aparece lo que viene siendo la imagen
logo seguridad antes del H3 vamos a colocar un MGI y éste va a ser más fácil de ver si exponemos y MGA
a la carpeta diagonal y se llama icono 1.12 BG.
Aquí le ponemos iconos seguridad icono seguridad guardamos cambios abrimos nuestro proyecto y aparece
el icono continuábamos un poco más voy a copiar este código de aquí.
Aquí antes del H3 lo va a pegar y también antes de éste.
Este va a ser icono 2 si este va a ser icono 3 15 iconos seguridad es decir icono mejor precio.
Y finalmente el último icono a tiempo.
Entonces si guardamos cambios y abrimos nuestro proyecto puedes ver que se ven las imágenes que ahora
formatos puedes ver que estoy utilizando SVG.
Este es un formato que puedes hacerlo muy grande la imagen y no se va a distorsionar un programa que
yo utilizo para generar estos SVG.
Es ilustrador y también se pueden generar con Adobe xD.
Existen otros formatos como JPG muy común y PNG que los puedes colocar de esta forma lo que viene siendo
el nombre de archivo junto al formato y con eso es suficiente para mostrar un gráfico en un sitio web.
Existen un par de atributos que puedes pasarle a lo que vienen siendo estas imágenes.
Por ejemplo puedes ver que se ven de ese tamaño tal vez quieras hacerlas más grandes aquí le puedes
poner Whit y digamos 600.
Esas son 600 píxeles y puedes ver que la imagen es un poco más grande o también existe Jaitt y digamoslo
pones 1200 puedes ver que se hace mucho más grande.
Estos atributos se usan muy poco en realidad solamente cuando no podemos cargar por ejemplo una hoja
de estilos y tenemos que darle cierto tamaño se recomienda utilizar usualmente es algo que logra ya
con CSS y se recomienda utilizarse para algo así.