HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido…) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape).

Bueno como este tutorial que estoy mostrandole pretendo ir al grano y lo interezante y saltarnos algunas etapas que no tiene mucha relevancia al momento de estar contruyendo nuestra web,en si el lenguaje HTML es por desirlo asi,el esqueleto de tu web,ahora inciaremos al mas entretenido y dar forma y vida a nuestra web…

Tables o Tablas en HTML(Definicion y explicacion)

Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags

…..

.

Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.

Cada fila de la tabla se indica mediante las tags
…..

. Las tags y con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags …..

indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags …..

indican que se trata de celdas comunes.

Accesorios para tablas e atributos

Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags
…..

. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align=”top” indicaría encima de la tabla y align=”bottom” indicaría en la parte de abajo.
Alineación de celdas

Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar:

* El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).
* El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).

Celdas extendidas

Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags o

los atributos:

* rowspan= más un valor para indicar el número de filas que se quiere abarcar.
* colspan= más un valor para indicar el número de columnas que se quiere abarcar.

Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las tags a las que hay que asignarlos.

Espaciado

Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas.

* width= Acompaña a

y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags

o para especificar el ancho de las columnas.
* Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border=”0″ indicaría la ausencia de borde.
* Cellspacing= Suele acompañar a la tag

. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2.
* Cellpadding= También acompaña a la tag
. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.

Imagenes

El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:

* src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.

* 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.

* Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

* 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.

Un bebé

Video tutorial en español de HTML


Descargar tutorial…Esperamos tus comentarios o dudas