Ejercicios de Html básicos (Atributos Y Tablas)

diciembre 01, 2014

Ejercicios de Html básicos (Atributos Y Tablas)

Hola amigos ya estoy aquí otra vez dando el coñazo con el código html. Bueno no desesperemos vamos a tratar hoy con los atributos y las tablas de este lenguaje. Antes de meternos en faena vamos a dar una pequeña explicación sobre los atributos.

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentosHTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), elelemento HTML tr (contenedor de fila) y el elemento HTML td (celda)

Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th).
(info:http://www.htmlquick.com/es/tutorials/tables.html)

Los atributos dan ciertas características a un elemento (por ejemplo, altura, color, relación, etc.), a veces muy importantes, que al final establecerán cómo el mismo debe ser interpretado. Por ejemplo, el elemento HTML a inserta un vínculo en un documento HTML (una forma de ir del documento actual a otro recurso, usualmente con un click), pero el atributo "rel" establece cuál es la relación entre el documento actual y el recurso destino.

Aún cuando muchos atributos son compartidos por muchos elementos, cada elemento tiene un set de atributos predefinido de acuerdo al estándar que se esté utilizando. Para ver los atributos que un elemento acepta, revisa la descripción de ese elemento en la lista de tags HTML.

Como vimos en el ejemplo genérico cada atributo debe tener un valor y ha de ser definido en el tag de apertura. En este ejemplo insertamos una definición completa (con contenido y tag de cierre) de un elemento HTML a con dos atributos: "href" y "rel".
(info:http://www.htmlquick.com/es/tutorials/tables.html)

Comenzamos con este primer ejercicio donde he creado un archivo llamado uno.html

con titulo atributos y tengo el enlace de una imagen llamada it.gif. inserto imagen
<img src="imagenes/it.gif" con un comentario alt="casas de arquitectura" por cierto imagenes/it.gif en donde se encuentra la imagen en mi disco duro osea la ruta.

Ahora vamos a crear el código de un enlace que en este caso será a www.google.es . Creamos la href a la web www.google.es y nos mandará allí haciendo un clic en la palabra buscador.

En este caso si hubiera tenido conexión a Internet ya estaríamos.

Me acabo de emocionar, ¿y si a ese vínculo al buscador favorito le añadimos una referencia,titulo o comentario con title"buscadores de la mañana"? uhmm. Mirar y contemplar, funciona!!!

En este siguiente ejercicio os dejo pensar......vale si nos fijamos en la palabra imagen está en negrita y grande..porque <h1>imagen<h1> Nos ayuda a contemplar la maravilla de imagen. El resto de código es la ubicación de la imagen.<src ="imagenes/casa.gif" alt="supercasa" />

En esta imagen observamos las características del archivo casa.gif. Nos vale como referencia para poder trabajar las dimensiones con el.

Si nos fijamos bien tiene las dimensiones width="266px" heigth="190px".

Ueeeehh¡¡¡ Le acabo de dar width="366px" un poquito mas para jugar con la imagen.

Ahora como somos unos campeones le ponemos border de grosor =2px

Para ver una diferencia de grosor con el anterior, le he puesto 6px .. se nota

Y ahora quiero la imagen a mi derecha....uhmm tan sencillo como align="right" y figurilla a la derecha¡¡¡¡¡¡

Bueno, bueno .. no nos emocionemos....ya. ya lo se... queréis mas y por eso vamos a los enlaces con archivos. Tenemos un archivo llamado "Basedatos.pdf" y con el titulo archivo pdf como enlace.

Si nos fijamos en la dirección vemos que abrió el archivo pdf llamado basedatos.

Para el correo electrónico sería ídem de lo mismo . mailto:correo y el titulo para enlazar con el mismo que en este caso sería . haz clic aquí y no llevaría al correo.

Y para sacar nota nos vamos a nuestro correo con el encabezamiento y hacia quien va dirigido.

mailto:adolfito@yahoo.com?subjetc=contesta ya&cc=luis@yahoo.com. Es decir si partimos esto tenemos mi correo ? le sigue el mensaje y && la cuenta a quien se lo envío.

El archivo de música tiene la misma dinámica que el de imagen y otros, localizar la ruta o mejor especificar la ruta con el código y se reproduce el sonido.

Ahí lo tenemos, reproduciendo la música.

Formato de los códigos HTML:

Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos:

Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)

Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:

#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:

#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:

#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:

#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:

En este caso empezamos con párrafo este texto se ve>fuente de color y código seguido de la letra que se verá según código especificado. En este caso el rojo.

Ahora viene un proceso paso a paso para que observemos como se hace. Vamos a elegir de la paleta de colores par el texto.

Seleccionamos uno.

Ya tenemos el código.

Y ahora el fondo con" bgcolor"

Ya tenemos el fondo de la web y el texto.

Bueno nos hemos venido arriba. Ahora vamos a poner un fondo con: background y seleccionando la imagen. ualaaa.

Y ahora como somos unos facinerosos le ponemos un texto de color y un titulo al fondo

Entramos en terreno interesante ..Las tablas.

Le hemos puesto un border de "2" Como titulo a la tabla con caption "Ejemplo de las tablas de adolfito"

<TR> Empezamos la tabla

<th> Destacamos la palabra titulo</th>

<td>hueco en blanco</td>

<th>proseguimos condestacando las celdas Autor/Población/Nacionalidad</th>

</finalización y ahora vamos a por las filas.

las colinas de colón/jose Ramírez/Valencia/España

UNIFICACIÓN DE CELDAS

En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos “rowspan” (para unificación vertical) y “colspan” (para unificación horizontal).

Aquí hemos unido titulo y autor horizontalmente.