 |
Tutorial De HTML.
IMAGENES
Vamos por partes como dijo mi amigo Jack el destripador....
Para poder insertar una imagen en una pagina web debemos hacer uso de la etiqueta <img src="nombre de la imagen con extension y todo"> En internet se pueden usar imagenes de los formatos .GIF .JPG .JPEG .PNG .BMP En la actualidad los formatos mas usados por tamaño son el GIF y el PNG, este ultimo tiene una mejor calidad y el "peso" de la imagen no es elevado, con lo cual se puede usar tranquilamente. No te olvides que dependiendo del tamaño e la imagen, es lo que el navegador se demorar en abrirla. No es lo mismo abrir una imagen de 10 Kb que una de 10 Mb!!
| <img src="imagen.gif"> |
Atento a la jugada, lo anterior sirve SI Y SOLO SI la imagen esta en el mismo directorio que la pagina web. Es decir si nosotros tenemos una carpeta con todas la imagenes (es lo usual) debemos darle la ruta completa de la misma.
| <img src="carpeta_de_imagenes/imagen.gif> |
ALINEACION DE IMAGENES
Ahora bien, las imagenes se pueden alinear de forma horizontal como vertical para ello usamos lo siguiente:
| <IMG SRC="imagen.gif" ALIGN="top">Arriba <IMG SRC="imagen.gif" ALIGN="middle">Medio <IMG SRC="imagen.gif" ALIGN="bottom">Abajo <IMG SRC="imagen.gif" ALIGN="left">Izquierda <IMG SRC="imagen.gif" ALIGN="right">Derecha <center><IMG SRC="imagen.gif"></center>Medio |
TEXTO ALTERNATIVO
Esto se usa SIEMPRE ya que hay navegadores que por defecto o por decisión del usuario, no muestran las imagenes y en lugar de la misma, aparecera un texto explicando que imagen estaba ahi.
| <img src="imagen.gif" ALT="Describo la Imagen"> |
ENLACES
Hay veces que queremos poner un enlace desde la imagen (mas adelante veremos como hacer un enlace, pero les voy dejando esto)
| <a href="pagina a donde queremos dirigirnos"> <img src="imagen.gif" ALT="Describo la Imagen"></a> |
Como les dije mas adelante les voy a explicar la parte del enlace, por ahora, SOLO CREANME!!... lo unico nuevo es la etiqueta <a href> que es la que se usa para indicar enlaces.
MAPA DE IMAGENES
Si bien es una tecnica en deshuso. Esto consiste en dividir una imagen en varias zonas o secciones y que queda seccion vaya a un enlace diferente. Es muyyyy muyyyy muyyy engorroso de hacer ya que necesitamos un editor de imagenes para sacar las coordenadas de los puntos (el paint ayuda mucho) y luego definir la forma que deseamos darle, rectangular, circular o poligonal. Como dije antes es engorroso de hacer pero aca se los dejo, lo mejor es conseguirse algun software gratuit para ello (gratuito es diferente de pirata eh!!!!)
| <center> <IMG src = "grafico.gif" usemap = "#casa"> <MAP name = "casa"> <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm"> <AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm"> <AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm"> <AREA shape = "circle" coords = "80,76,21" href= "arbol.htm"> <AREA shape = "rect" coords = "74,94,81,134" href= "tronco.htm"> <AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm"> </MAP> > |
Aca les dejo la imagen de prueba, no traten de seguir los vinculos porque no existen. Solo lo puse a modo de ejemplo
RESUMEN
- Aprendimos a Colocar un texto Alternativo
- Aprendimos a Alinearlas
- Aprendimos a Colocarles un enlace
- Aprendimos a "mapearlas"
|
<<Anterior |
Siguiente >> |
1- Estructura de un documento en HTML
2- Comandos Básicos
2.1- Formateando texto
2.2- Saltos de Línea
2.3- Formateando Párrafos
2.4- Líneas de separación
3- Listas
3.1 Listas ordenadas
3.2 Listas desordenadas
3.3- Listas de definición.
4- Imágenes
4.1- Texto Alternativo
4.2- Alineándolas
4.3- Enlaces
4.4- Mapas
5- Enlaces
5.1- Enlaces externos
5.2- Enlaces Internos (dentro de un mismo documento)
5.3- Enlaces directos para direcciones de mail
6- Tablas
6.1- Bordes
6.2- Color de fondo a las celdas
6.3- Imagen de fondo
7- Cosillas sueltas
9- Apendice
Este Tutorial esta pensado para gente sin conocimientos previos, si lo lees y te parece muy obvio o sencillo, puedes contactarnos y ampliar los temas.
Tutorial diseñado exclusivamente para el Portal Veperu, el Perú y mas, se prohíbe su reproducción total o parcial salvo que indiques la fuente.
