Cuarta entrega de HTML


En la cuarta entrega del lenguaje html aprenderemos a colocar una imagen en la web, aprenderemos qué son y para qué sirven las hojas css y tambien a poner un link en la web.

Lo primero, vamos a hacer el ejemplo practico:

-----------------CODIGO----------------------

< html>
< head>
< link type="text/css" rel="stylesheet" href="http://elsitiodetuweb.com/estilo/style.css"/>
< /head>
< body>
< img width="250" height="250" src="elsitiodondeestealojadalaimagen">
< a href="http://lenguajes.blogcindario.com">Lenguajes de programacion y noticias de informatica
< /body>
< /html>

-----------------CODIGO------------------------

Advertencia: No pongais los espacios que salen entre el simbolo < y el contenido de la etiqueta.

A ver, ahora la explicacion:

-Como anunciabamos en la entrega anterior del curso y en la introduccion de esta parte, aprenderiamos qué son y para qué sirven las hojas de estilo en cascada o css. Bueno, pues estas hojas son archivos de texto con la extension .css que sirven fundamentalmente para definir un estilo general a todas las paginas de tu web. Hay ocasiones en las que hay que asignarle el mismo estilo a muchas cosas de tu web teniendo que escribir lineas y lineas de codigo innecesarias en cada pagina. Para que no se tuvieran que escribir tantas lineas de codigo se inventaron las hojas css. Cuando hablo de estilo es por ejemplo el color de fondo de la pagina, el color del texto, el color de los links... (Que ya aprendimos en la entrega anterior del curso). Las hojas de estilo en cascada se organizan en bloques que definen los estilos de cada elemento de la pagina. Para poderlas utilizar hay que usar la etiqueta que lleva por contenido "link type..." siempre colocada en el head.

-Tambien deciamos que aprenderiamos a colocar una imagen, pues bien, esta imagen te recomiendo que sea una imagen gif o jpg ya que aparte de que son las mas utilizadas en la red, son las que menos tamaño tienen con lo cual la pagina tardaria menos en descargarse y evitarias perder mas de una visita. Para poner la imagen utilizaremos la etiqueta "img src..." el "width" y el "height" son atributos opcionales y sirven para definir el ancho y el alto de la imagen en píxeles. El width se utiliza para designar el ancho y el heigh para el alto. Despues de estos atributos vendria el "src..." que es donde se pone la url donde este alojada la imagen.

-Para poner un link en tu pagina tendras que utilizar la etiqueta . Entre medias de la etiqueta de comienzo y la de final iria el texto que quieres que aparezca en el link, en este caso es "Lenguajes de programacion y noticias de informatica" pero puede ser el que tu quieras.

Bueno, pues hasta aqui nada mas, pronto continuaremos con la siguiente parte del curso.

Un saludo!

Tags: html