Imagenes
Insertar Imágenes en HTML
El tag básico para colocar una imagen es "img". Esta etiqueta, a diferencia de la gran mayoría de los tags de html, no necesita un cierre.La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
Donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
puede acompañarse de los siguientes atributos:
- src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
- Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left (lado izquierdo) , right (derecha),center (centrar la imagen),top (extremo superior),middle (mitad), bottom (extremo inferior) , absbottom (borde inferior), o absmiddle (borde de la mitad).
img src=“imagen.gif”
<img src="imagen.gif" align="center">
<img src="imagen.gif" align="right">
<img src="imagen.gif" align="left">
- Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.
- WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
- HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.
- BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
- ejemplo
- <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
Donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
- img src=“imagen.gif”
- <img src="imagen.gif" align="center">
- <img src="imagen.gif" align="right">
- <img src="imagen.gif" align="left">
Donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Para ponerle un color de fondo a tu Pagina, tienes una opción den la etiqueta o tag <BODY>, que es:
<BODY BGCOLOR=rgb> donde rgb es un código de color semejante al que vimos en la directiva <FONT COLOR=rgb>
Si lo que quieres es poner una imagen de fondo, tienes otra opción que también se añade al tag <BODY>:
<BODY BACKGROUND="nombre de la imagen"> donde "nombre de la imagen" es el nombre del fichero gráfico que queres usar como fondo.
Un ejemplo muy simple de esto es:
<HTML>
<HEAD>
<TITLE>
Ejemplo de imagen de fondo
</TITLE>
</HEAD>
<BODY BACKGROUND="html.GIF">
</BODY>
</HTML>
Estimado aprendiz, cree una carpeta en el escritorio y descargue una imagen de Internet , guárdela en la carpeta creada .
Luego en Notepad ++ cree la estructura HTML anterior y sustituya el nombre de la imagen html.GIF por el nombre de la imagen que guardo.
Guarde el archivo como Prueba.html
<BODY BGCOLOR=rgb> donde rgb es un código de color semejante al que vimos en la directiva <FONT COLOR=rgb>
Si lo que quieres es poner una imagen de fondo, tienes otra opción que también se añade al tag <BODY>:
<BODY BACKGROUND="nombre de la imagen"> donde "nombre de la imagen" es el nombre del fichero gráfico que queres usar como fondo.
Un ejemplo muy simple de esto es:
<HTML>
<HEAD>
<TITLE>
Ejemplo de imagen de fondo
</TITLE>
</HEAD>
<BODY BACKGROUND="html.GIF">
</BODY>
</HTML>
Estimado aprendiz, cree una carpeta en el escritorio y descargue una imagen de Internet , guárdela en la carpeta creada .
Luego en Notepad ++ cree la estructura HTML anterior y sustituya el nombre de la imagen html.GIF por el nombre de la imagen que guardo.
Guarde el archivo como Prueba.html
Listas
Listas
La lista mas elemental no tiene ningún tipo de numeración, solo tiene marcas que, en principio, son iguales para todos los elementos Esta marca por defecto puede variar según el navegador que uses, aunque, generalmente, es un punto. La lista se construye según la siguiente estructura:
<UL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</UL>
Donde <UL></UL> son los tags que acotan a toda la lista y <LI></LI> acotan a cada elemento de esta. Realiza Ejemplo
<HTML>
<HEAD>
<TITLE>
EJEMPLO DE LISTA
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1><B>EJEMPLO DE LISTA</B></FONT>
<UL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI > Elemento con cuadradito </LI>
<LI> Sigue habiendo cuadradito (supongo) </LI>
<LI> Otro elemento </LI>
<LI > Elemento con círculo vacio</LI>
<LI> Último elemento </LI>
</UL>
</BODY>
</HTML>
Listas Numeradas
<OL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</OL>
O sea, que solo hemos cambiado el tag <UL></UL> por <OL></OL>. La diferencia con la anterior es que en esta, en lugar de una marca, cada elemento se indica con su número de orden (1 para el primero, 2 para el sgundo, ect). Además, tú no tienes que preocuparte por saber por recordar que número tienes que poner en la línea, eso ya lo hace el navegador.
¿Y si no quieres empezar por el número uno? Pues para eso tienes el atributo , que se aplica a <OL> y toma como valor el número por el que quieres empezar a contar. (Si pones <OL >, el primer elemento llevaría el número 3, el segundo el 4 ...ect)..
La lista mas elemental no tiene ningún tipo de numeración, solo tiene marcas que, en principio, son iguales para todos los elementos Esta marca por defecto puede variar según el navegador que uses, aunque, generalmente, es un punto. La lista se construye según la siguiente estructura:
<UL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</UL>
Donde <UL></UL> son los tags que acotan a toda la lista y <LI></LI> acotan a cada elemento de esta. Realiza Ejemplo
<HTML>
<HEAD>
<TITLE>
EJEMPLO DE LISTA
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1><B>EJEMPLO DE LISTA</B></FONT>
<UL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI > Elemento con cuadradito </LI>
<LI> Sigue habiendo cuadradito (supongo) </LI>
<LI> Otro elemento </LI>
<LI > Elemento con círculo vacio</LI>
<LI> Último elemento </LI>
</UL>
</BODY>
</HTML>
Listas Numeradas
<OL>
<LI> Primer elemento </LI>
<LI> Segundo elemento </LI>
<LI> Tercer elemento </LI>
...
</OL>
O sea, que solo hemos cambiado el tag <UL></UL> por <OL></OL>. La diferencia con la anterior es que en esta, en lugar de una marca, cada elemento se indica con su número de orden (1 para el primero, 2 para el sgundo, ect). Además, tú no tienes que preocuparte por saber por recordar que número tienes que poner en la línea, eso ya lo hace el navegador.
¿Y si no quieres empezar por el número uno? Pues para eso tienes el atributo , que se aplica a <OL> y toma como valor el número por el que quieres empezar a contar. (Si pones <OL >, el primer elemento llevaría el número 3, el segundo el 4 ...ect)..
Estimado aprendiz, Adicione al ejemplo anterior las listas Numeradas y de definición .
- Cree un nuevo archivo html, donde estructure una pagina web, sobre las Música que mas le Guste, esta pagina debe contener:
- Un poco de historia, grupos musicales, Utilice etiquetas de alineación de imágenes, listas y Etiquetas para darle propiedades al texto.
- Recomendación, Utilice una imagen de fondo en un solo color, para que la información sea legible