8 de noviembre de 2016

Programación básica de HTML: Imágenes

Finalizando nuestras clases de programación HTML. Aprendimos a insertar imágenes.

Comencemos añadiendo imágenes a nuestro documento HTML, pero como siempre empezaremos escribiendo las etiquetas más básicas (<head> </head>...). Para insertar una imagen en HTML utilizaremos el código:

<img src="Dirección del archivo">

Si añadimos a nuestro documento HTML, dos imágenes, el código y la página nos quedarían así:


Como en otro códigos, podemos editar el formato de nuestra imagen, con las siguientes etiquetas:

ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o  a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y  bottom.  
WIDTH= Este atributo es opcional, pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el    alto de la imagen.  
BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

Si añadimos más imágenes a nuestra página y además cambiamos su formato, nuestro código quedaría de la siguiente manera:


Y nuestra página quedaría de la siguiente manera:











Leer mas..

Programación básica de HTML: Tablas y listas

Siguiendo con nuestra programación de una página web HTML. Vamos a aprender cómo hacer listas y tablas. 
Para hacer tablas numeradas o no, utilizamos los siguientes comandos:

Seguimos utilizando los mismo codigo (<html> </html> ; <head> </head>; <body> </body>) para la estructura de la página y añadiremos nuestras listas:

Nuestra página se vería así:


Para añadir una tabla a nuestra página web tenemos varios códigos donde también la configuramos:


También podemos añadirle los siguientes atributos:


Para crear una tabla, primeros crearemos filas ( <tr> </tr> ) y dentro de ellas todas las celdas que necesitemos ( <td> </td> ). Tenemos que configurar nuestras tablas por filas:



El siguiente código quedaría así:


























Leer mas..