TECNOLOGÍA LOLA

CONTINUAMOS CON EL CÓDIGO HTML:

INSERTANDO IMÁGENES, HIPERVINCULOS Y LISTAS

​

I M Á G E N E S

​

Para insertar imágenes con código HTML utilizamos la siguiente etiqueta:

​

<Img>: 

Esta etiqueta permite insertar una imagen; esta también es una etiqueta vacía lo que quiere decir que no requiere etiqueta de cierre.

Para las imágenes siempre usaremos el siguiente atributo:

​

• Src: Se usa para especificar el nombre y tipo de imagen que vamos a mostrar; es muy importante que siempre que vayamos a usar una imagen verifiquemos que:

​

1. Tanto la imagen como el documento html en el que estamos trabajando, se DEBEN    guardar en la misma carpeta, de lo contrario no se visualizará la imagen en el navegador.

2. El nombre y la extensión de la imagen que estamos insertando deben ser iguales al nombre y la extensión que la imagen tiene donde esta guardada

​

 Las extensiones en imágenes  más usadas son: .JPG .JPEG .GIF  y .PNG

​

Ejemplo:

<img src=”imagen.gif”>

​​

 

• Width y Height: Estos dos Atributos permiten modificar el ancho y el alto, de la imagen, respectivamente, asignándole valores que se tomarán como pixeles; es importante aclarar que con estos valores no se modifica directamente el tamaño de la imagen sino que  varía es el tamaño de visualización en el navegador. Su uso también es opcional.

​

Ejemplo: 

​

<img src=”imagen.gif” width=”100” height=”100”>

​

​

​

E  N  L A C E S   O   H I P E R V I N C U L O S

<A></A>:

Permite hacer vínculos, hiper vínculos o hiper enlaces, es decir, que al pulsar nos va a llevar a otra web o archivo; 

Para su uso se requiere la utilización del siguiente atributo:

​

• Href: Es el que nos permite especificar el nombre del archivo que se pretende abrir. Ambos archivos tienen que  estar guardados en la misma carpeta y se debe verificar que el nombre del archivo de web que deseamos abrir sea idéntico al que se está digitando y tener claro con que extensión se guardó (.html o .htm).

 

Ejemplo:

<a href=”2pág.html”>texto_de_enlace</a>

​

​

​

​

​

L i s t a s

​

Se usan con el propósito de organizar una determinada información, estas se clasifican en:

​

• Lista Desordenada: Los elementos que pertenecen a este tipo lista deben encontrarse dentro de las etiquetas <ul>  </ul>, y cada elemento de la lista va  acompañado de la etiqueta <Li>   </Li>.

       En el  navegador se podrá visualizar cada elemento con una viñeta.

​

Ejemplo:

​

<ul>                              

     <li>León</li>                                 

     <li>Tigre</li>                        

</ul>   

​

​

• Lista Ordenada o Numerada: Para aplicar este tipo de lista se debe utilizar la etiqueta <ol> </ol>; y cada uno de sus elementos  deben encontrarse dentro de las etiquetas <li> </li>.

​

Ejemplos:

​

<ol>                              

     <li>León</li>                                 

     <li>Tigre</li>                        

</ol>          

 

 

 

PRACTICAR: Realizando dos paginas con lo visto hasta el momento.