Insertando parrafos y saltos de linea en nuestra pagina
Ahora aprenderemos las etiquetas basicas de HTML, para insertar parrafos y saltos de linea. Código HTML: insertar parrafos
La etiqueta que se utiliza para insertar parrafos en HTML es: <p> y finalizar el párrafo: </p> Ahora vamos a abrir el archivo index.html de nuestra pagina web para probar esta etiqueta:
En la lección de conceptos básicos de HTML vimos que cuaquier tipo de contenido visible debe ir dentro de las etiquetas "<body>" y "</body>", entonces para agregar un párrafo lo haremos así:
<html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> </body> </html> Código HTML: insertar saltos de linea
Para insertar saltos de linea en HTML utilizaremos la etiqueta: <br /> ¿o no que es fácil? jeje, al ejemplo anterior le insertaremos un salto de linea y un párrafo mas, de esta forma: <html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> <br /> <p>Creado gracias a CCUSW</p> </body> </html>
Tan simple como eso, y ahora si lo vemos en vista preliminar quedaría así:
Bien, ya sabes crear párrafos y saltos de linea, ¡Pronto tendrás tu primer pagina web terminada! y harás webs mejores que esta, eso te lo aseguro jeje
Creando enlaces con HTML
Ahora veremos como crear enlaces con código HTML para tu pagina web. Para crear un enlace necesitamos la ubicación, o mejor dicho, la dirección hacia donde nos llevará ese enlace al hacer clic en el, podemos poner una ruta absoluta (por ejemplo http://www.comocrearunsitioweb.com/u...on-enlace.html) o bien, una ruta relativa ( "/enlace.html" si es que el archivo desde donde enlazamos se encuentra en el mismo directorio del archivo en el que estamos en ese momento, o sea el "index.html" que creamos al principio). La etiqueta para crear enlaces es <a> y </a>, pero claro, aun falta algo ¿no?, falta poner la dirección hacia donde nos llevará ese enlace, para eso esta el atributo href, se utiliza de esta forma: <a href="http://www.comocrearunsitioweb.com">Crear Web</a> El texto del enlace va encerrado entre <a> y </a>, esto daría como resultado: Nota: cada vez que nos toque crear un enlace hacia otra pagina web (es decir, que no sea una sección de nuestra pagina) utilizaremos la dirección absoluta con el prefijo "http://". Ahora vamos a insertar un enlace a nuestra pagina web de ejemplo, el texto del enlace será CCUSW (ComoCrearUnSitioWeb) : <html> <head><title>Mi primer pagina Web</title></head> <body> <p>Este es mi primer párrafo</p> <br /> <p>Creado gracias a <a href="http://www.comocrearunsitioweb.com">CCUSW</a></p> </body> </html>
El enlace ya esta creado, ahora cambiaremos de pestaña para ver como queda:
Crear enlace de email
Podemos crear enlaces que al hacer clic nos abra un programa para enviar email directamente, para crear estos enlaces solo tenemos que escribir "mailto:" antes de la dirección de email, de esta forma: <a href="mailto:[email protected]">Texto del enlace</a> Insertar imagenes com HTML
Ahora veremos cómo insertar o colocar imágenes con código HTML, y también veremos como hacer que esa imagen tenga un enlace. Llego el momento de insertar nuestra primera imágen con HTML, la etiqueta que sirve para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imágen. Para insertar una imágen lo haremos así: <img src="ubicación" alt="descripción" /> "alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella.
Si cambiamos a la pestaña
"Vista preliminar" veremos el resultado final:
Ahí vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de todas las lecciones anteriores. Pero ¿que pasa si queremos crear un enlace en la imagen para que cuando hagamos clic en ella nos abra otra dirección? eso es lo que voy a explicar ahora
Crear enlace en imágen
Para crear un enlace en la imágen para que al hacer clic en ella nos abra otra pagina, solo debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma: <a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a>