S

Post Actualizado en marzo 26, 2013


Aprende HTML en pocos pasos

Inserta una imagen Dentro de HTML como comentamos en articulos anteriores, todos los elementos que conforman nuestra pagina web como textos, encabezados, imagenes, se colocan a traves de un codigo especifico. Recomendaciones preliminaries: Si vas a incluir fotografias, archivos de audio u otros elementos te recomendamos ordenarlos todos en carpetas para mantener un orden dentro […]

Inserta una imagen

Dentro de HTML como comentamos en articulos anteriores, todos los elementos que conforman nuestra pagina web como textos, encabezados, imagenes, se colocan a traves de un codigo especifico.

Recomendaciones preliminaries:

  1. Si vas a incluir fotografias, archivos de audio u otros elementos te recomendamos ordenarlos todos en carpetas para mantener un orden dentro de tu pagina.
  2. Los nombres de los archivos deben ser simples, sin guiones, espacios, signos, etc.
  3. El nombre de la carpeta en tu computadora donde contienes los archivos debe ser con el mismo nombre que la que pongas en tu FTP.

Codigo para insertar una imagen:

<img src= “nombredelaimagen + terminacion “ />

La etiqueta img src: Image source (codigo de la imagen) + entre comillas siempre, el nombre de la imagen con la terminacion que puede ser (jpg, png, gif, etc) + cierre de comillas y cierre de etiqueta.

Ejemplo:

<img  src= “imagen.jpg”/>

Propiedades aplicables a una imagen:

  • Tamano: Siempre en pixeles pudes anadir el ancho y el alto de tu imagen.
  • Borde: contorno de la imagen con algun color, grosor y estilo de borde.
  • Color del borde
  • Estilo de borde
  • Ancho del borde
  • Alineacion: Si queremos la imagen a la derecha, izquierda o al centro
  • Margen: Podemos dejar un margen entre el contenido siguiente a la imagen y la misma.
  • Hipervinculos

Puedes colocar una de las propiedades o todas en una imagen, y cada una tiene  una etiqueta especifica:

Tamano:
Ancho: width
Alto: height

Borde: border
Color del borde: border color
Estilo del borde: border-style
Ancho del borde: border-width

Alineacion de la imagen: align
Puede ser alineacion derecha (right) o izquierda (left) o centrada (center)

Margen: margin
Puede ser margen derecho (right) izquierdo (left) arriba (top) bottom (abajo)

Hipervinculo: a href

En el siguiente articulo desglozaremos cada una de las propiedades con su codigo, para que tomes nota y puedas personalizar tu pagina web facil y rapido.