Tutorial de HTML Leccion 2: Insertar imagenes y enlaces
Página 1 de 1.
Tutorial de HTML Leccion 2: Insertar imagenes y enlaces
Zixther Dom Dic 04, 2011 11:42 pm
Buenas gente, bienvenidos a la segunda parte del curso de html.
En la parte anterior habíamos visto como agregar texto a una página.
Como prometi vamos a aprender a insertar imagenes en codigo html.
La imagen que yo use fue esta:
Hagan click derecho y pongan Guardar Como, y ponganle de nombre bannertallergamer.jpg
Para agregar la imagen abrimos nuestro archivo guardado de html-kit.
Como veran el codigo tendria que haber quedado asi:
Bien ahora para agregar la imagen, escribimos entre las etiquetas <body> y</body> antes del texto este codigo:
Ahora explicaremos que es cada cosa en ese codigo:
Descripcion de la imagen: luego de alt= iria la descripcion de nuestra imagen por si en algunas pc no se llega a ver que imagen es.
Ubicacion de la imagen: Iria luego de src= y es la direccion para encontrar a nuestra imagen. Hay 2 tipos de direcciones:
La primera, es la direccion absoluta, es decir, la direccion completa, por ejemplo: C://documents&settings/Misdocumentos/Imagenes/Imagenimaginaria.png
Y la otra es la direccion relativa. Esta es la mejor forma para elegir imagenes, porque no hay que poner el codigo entero, solo una
pequeña parte. Yo uso esta forma pero hay que tener las cosas acomodadas, no desparramadas por toda la pc.
Por eso es bueno crear una carpeta llamada "Mi pagina web de prueba" y dentro de esa carpeta, hacemos otra que sea "imagenes", en minusculas para
no confundir, porque el html distingue entre mayusculas y minusculas.Una vez hecho esto ponemos todas las imagenes de nuestra pagina en esa carpeta, y, volviendo a lo de la direccion, para escribir la direccion relativa hacemos asi: escribimos: "imagenes/nombredeimagen.jpg"
PD: Si quieren pueden crear un workspace para tener la carpeta con sus archivos junto a la pagina para editar, pero es solo para comdidad
Para crear esto hacemos click en la pestaña Workspace en el menu de herramientas del programa y situamos el mouse en donde dice: Add Folder/FTP server y luego en Add local / Network Folder, entonces se nos va a abrir una pantalla que tiene dos campos de texto.
En el primero elegimos la ubicacion de nuestra carpeta, y en el segundo elegimos un nombre para mostrar, luego hacemos click en ok y ya tenemos nuestro workspace.
Recuerden poner todo en minusculas y las direcciones entre comillas, ya que es un error muy comun y muy dificil de encontrar.
Altura: es la altura de nuestra imagen xD
Anchura: es la anchura de nuestra imagen
Ahora para editar ese codigo e insertar nuestra imagen copiamos este codigo:
Recuerden no copiar y pegar el codigo ya que la escritura ayuda al aprendizaje.
Bien recuerden simpre que luego de la anchura y la altura de la imagen tienen que agregar "px" que significa pixeles.
entonces si hacemos click preview ahora podremos ver la imagen:
Una forma mas rapida de agregar imagenes es desde el menu de herramientas del programa, para ello hacemos click en tags y nos
vamos a donde dice image y luego a insert image.
En donde dice add elegimos la carpeta en la que se encuentra nuestra imagen y luego elegimos la imagen, pero antes de dar click
en "ok" modifiquen las celdas de height y width y agreguenle px justo despues del numero, y no agreguen espacio.
Y bueno hasta ahi es lo de agregar imagenes perooooo tambien les enseñare a agregar un enlace a alguna pagina.
Para ello antes del codigo de nuestra imagen escribimos <a y al final escribimos </a>
entonces el codigo quedaria:
Entonces explicamos lo que acabamos de agregar:
<a y </a> son las etiquetas que indican el inicio y el final de nuestro enlace
href="pagina a la que queramos enlazar": como bien dice, ahi escribimos la pagina a la que queremos enlazar y el href da la orden de
enviarnos a esa pagina.
entonces, cambiando el codigo, escribimos:
Damos click en guardar y luego en preview
entonces vemos que al hacer click en la imagen, nos manda al portal de tallergamer
Y para la forma directa de agregar links, marcamos el codigo de la imagen y luego hacemos click en tags y luego en make link y donde
dice href escribimos la URL de la pagina a la que queremos llegar.
Y bueno eso es todo por hoy gente, esperen el proximo tutorial de html.
En la parte anterior habíamos visto como agregar texto a una página.
Como prometi vamos a aprender a insertar imagenes en codigo html.
La imagen que yo use fue esta:
Hagan click derecho y pongan Guardar Como, y ponganle de nombre bannertallergamer.jpg
Para agregar la imagen abrimos nuestro archivo guardado de html-kit.
Como veran el codigo tendria que haber quedado asi:
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial de Html </title>
</head>
<body>
<p> Aca estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p>
</body>
</html>
Bien ahora para agregar la imagen, escribimos entre las etiquetas <body> y</body> antes del texto este codigo:
- Código:
<img alt="Descripcion de la imagen" src= "ubicacion de la imagen" height=" Altura de la imagen px" width="Anchura de la imagen px" />
Ahora explicaremos que es cada cosa en ese codigo:
Descripcion de la imagen: luego de alt= iria la descripcion de nuestra imagen por si en algunas pc no se llega a ver que imagen es.
Ubicacion de la imagen: Iria luego de src= y es la direccion para encontrar a nuestra imagen. Hay 2 tipos de direcciones:
La primera, es la direccion absoluta, es decir, la direccion completa, por ejemplo: C://documents&settings/Misdocumentos/Imagenes/Imagenimaginaria.png
Y la otra es la direccion relativa. Esta es la mejor forma para elegir imagenes, porque no hay que poner el codigo entero, solo una
pequeña parte. Yo uso esta forma pero hay que tener las cosas acomodadas, no desparramadas por toda la pc.
Por eso es bueno crear una carpeta llamada "Mi pagina web de prueba" y dentro de esa carpeta, hacemos otra que sea "imagenes", en minusculas para
no confundir, porque el html distingue entre mayusculas y minusculas.Una vez hecho esto ponemos todas las imagenes de nuestra pagina en esa carpeta, y, volviendo a lo de la direccion, para escribir la direccion relativa hacemos asi: escribimos: "imagenes/nombredeimagen.jpg"
PD: Si quieren pueden crear un workspace para tener la carpeta con sus archivos junto a la pagina para editar, pero es solo para comdidad
Para crear esto hacemos click en la pestaña Workspace en el menu de herramientas del programa y situamos el mouse en donde dice: Add Folder/FTP server y luego en Add local / Network Folder, entonces se nos va a abrir una pantalla que tiene dos campos de texto.
En el primero elegimos la ubicacion de nuestra carpeta, y en el segundo elegimos un nombre para mostrar, luego hacemos click en ok y ya tenemos nuestro workspace.
Recuerden poner todo en minusculas y las direcciones entre comillas, ya que es un error muy comun y muy dificil de encontrar.
Altura: es la altura de nuestra imagen xD
Anchura: es la anchura de nuestra imagen
Ahora para editar ese codigo e insertar nuestra imagen copiamos este codigo:
- Código:
<img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/>
Recuerden no copiar y pegar el codigo ya que la escritura ayuda al aprendizaje.
Bien recuerden simpre que luego de la anchura y la altura de la imagen tienen que agregar "px" que significa pixeles.
entonces si hacemos click preview ahora podremos ver la imagen:
Una forma mas rapida de agregar imagenes es desde el menu de herramientas del programa, para ello hacemos click en tags y nos
vamos a donde dice image y luego a insert image.
En donde dice add elegimos la carpeta en la que se encuentra nuestra imagen y luego elegimos la imagen, pero antes de dar click
en "ok" modifiquen las celdas de height y width y agreguenle px justo despues del numero, y no agreguen espacio.
Y bueno hasta ahi es lo de agregar imagenes perooooo tambien les enseñare a agregar un enlace a alguna pagina.
Para ello antes del codigo de nuestra imagen escribimos <a y al final escribimos </a>
entonces el codigo quedaria:
- Código:
<a href="pagina a la que queramos enlazar"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a>
Entonces explicamos lo que acabamos de agregar:
<a y </a> son las etiquetas que indican el inicio y el final de nuestro enlace
href="pagina a la que queramos enlazar": como bien dice, ahi escribimos la pagina a la que queremos enlazar y el href da la orden de
enviarnos a esa pagina.
entonces, cambiando el codigo, escribimos:
- Código:
<a href="http://tallergamer.foroargentina.net"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a>
Damos click en guardar y luego en preview
entonces vemos que al hacer click en la imagen, nos manda al portal de tallergamer
Y para la forma directa de agregar links, marcamos el codigo de la imagen y luego hacemos click en tags y luego en make link y donde
dice href escribimos la URL de la pagina a la que queremos llegar.
Y bueno eso es todo por hoy gente, esperen el proximo tutorial de html.
Zixther- Fundador
- Mensajes : 69
Fecha de inscripción : 06/11/2011
Edad : 28
Localización : Bahia Blanca,Buenos Aires,Argentina
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.