Tutorial de HTML Leccion 2
Página 1 de 1.
Tutorial de HTML Leccion 2
aqui va la segunda parte con la imagen solo coloquen la que ustedes quieran solo para que vean como queda.
Hagan click derecho y pongan Guardar Como, y ponganle de nombre animaficionados.jpg
Para agregar la imagen abrimos nuestro archivo guardado de html-kit.
Como veran el codigo tendria que haber quedado asi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial de Html </title>
</head>
<body>
<p> Aca estamos aprendiendo HTML. 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:
<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:
[Tienes que estar registrado y conectado para ver este vínculo]
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.
Anchura: es la anchura de nuestra imagen
Ahora para editar ese codigo e insertar nuestra imagen copiamos este codigo:
<img alt="Imagen para tutorial" src= "imagenes/animaficionados.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 pero 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:
<a href="pagina a la que queramos enlazar"><img alt="Imagen para tutorial" src= "imagenes/animaficionados.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:
<a href="http://tallergamer.foroargentina.net"><img alt="Imagen para tutorial" src= "imagenes/animaficionados.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 animaficionados
Para quien no sepa que es tallergamer, es un grupo de creadores de videojuegos en el cual yo participo
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 eso es todo.
Espero les sirva de algo
Milaras21...
Hagan click derecho y pongan Guardar Como, y ponganle de nombre animaficionados.jpg
Para agregar la imagen abrimos nuestro archivo guardado de html-kit.
Como veran el codigo tendria que haber quedado asi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial de Html </title>
</head>
<body>
<p> Aca estamos aprendiendo HTML. 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:
<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:
[Tienes que estar registrado y conectado para ver este vínculo]
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.
[Tienes que estar registrado y conectado para ver esa imagen]
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.
Anchura: es la anchura de nuestra imagen
Ahora para editar ese codigo e insertar nuestra imagen copiamos este codigo:
<img alt="Imagen para tutorial" src= "imagenes/animaficionados.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 pero 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:
<a href="pagina a la que queramos enlazar"><img alt="Imagen para tutorial" src= "imagenes/animaficionados.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:
<a href="http://tallergamer.foroargentina.net"><img alt="Imagen para tutorial" src= "imagenes/animaficionados.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 animaficionados
Para quien no sepa que es tallergamer, es un grupo de creadores de videojuegos en el cual yo participo
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 eso es todo.
Espero les sirva de algo
Milaras21...
Temas similares
» Tutorial de HTML Leccion 1 Como empezar
» Manual de HTML de desarrolloweb en formato PDF
» tutorial de python
» Manual de HTML de desarrolloweb en formato PDF
» tutorial de python
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
Vie Sep 05, 2014 6:15 pm por JAVIER_77
» Hacker nostale
Vie Jul 20, 2012 5:02 pm por Sweet_Boy
» Chrome OS 20.x pasa al canal estable
Vie Jul 13, 2012 11:15 pm por [D]ement<<<
» Disponible openSUSE 12.2 RC 1
Vie Jul 13, 2012 12:44 am por [D]ement<<<
» NitroShare, comparte archivos y carpetas entre Linux y Windows
Vie Jul 13, 2012 12:26 am por [D]ement<<<
» Linux Mint 13 KDE Release Candidate, disponible
Vie Jul 13, 2012 12:18 am por [D]ement<<<
» LibreOffice 3.5.5, más estabilidad
Vie Jul 13, 2012 12:06 am por [D]ement<<<
» File History, un Time Machine para Windows 8
Miér Jul 11, 2012 9:50 pm por [D]ement<<<
» Como habilitar el logueo automático en Windows
Miér Jul 11, 2012 9:44 pm por [D]ement<<<
» Acronis True Image 2012
Mar Jul 10, 2012 12:15 am por [D]ement<<<
» Virus Informaticos
Mar Mayo 08, 2012 7:10 am por Sokoleonardo