Introducción al HTML: septiembre 2012

Imagenes y tablas de HTML

Imagenes:

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 imagen:

}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:

Imagen de como crear imagen en HTML:

<img src="img1.gif" width="28" height="21" alt="Tamaño original" border="3">
< br>
< br>
< img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
< br>
< br>
< img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
< br>
< br>
< img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">

Tablas de HTML:

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 <table>.....</table>.

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 <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

Imagen de como crear una en Tabla de HTML:

Video de Como crear Tablas, Audio y Video Imagenes en HTML:

Listas de Html

Listas Numeradas:

Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el código HTML. La numeración se realiza con números empezando por el 1.

Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior.

Este tipo de listas queda delimitado por la etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>.
En la figura 4.5 vemos un ejemplo de uso de listas ordenadas

es decir listas de definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <DL>...</DL > (DL: Definition List, Lista de definición). La inserción de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>.

Listas no Numeradas:

Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se especificará con el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierre formará la lista. Con los elementos <LI> se indicarán cada uno de los componentes de la lista. El formato es el siguiente:

Para marcar los distintos elementos de la lista se usarán unos símbolos, que pueden ser un disco (DISK), un circulo (CIRCLE) ó un cuadrado (SQUARE), seleccionables con el atributo TYPE.
Con la etiqueta <LH> definiremos el titulo de la lista, este es opcional y aparecerá en la parte superior de esta.
Igualmente es posible definir listas de varios niveles, que será listas anidadas, listas dentro de listas. Y combinar este tipo de lista con las que se explicarán en los proximos apartados.

Listas de definicion:

En esta lista existirán dos elementos la definición y el termino, se usará principalmente para listas en las que se incluirán una palabra o frase y su definición (diccionario). El termino aparecerá pegado en el borde izquierdo y la definición aparecerá ligeramente tabulada a partir del borde izquierdo.

Se puede usar de forma separada la definición y el termino, pudiendo por tanto incluir solo definiciones o solo términos. El incluir solo términos podría usarse para sangrar el comienzo de un párrafo.

Imagen de HTML:

Video de como crear Listas De HTML:

Fuentes o Tipos de Letras de HTML

Fuentes y Letras

Para aplicar diferentes tipos ó estilos de letras se pueden utilizar una varieda de códigos. Los siguientes códigos muestran varios ejemplos de como lograr esto y sus resultados.

Código:	Resultado:
<b>Letra en Bold</b>	Letra en Bold
<i>Letra en italica</i>	*Letra en italica*
<u>Letra subrayada</u>	Letra subrayada

Además de estos estilos existen otros códigos para adjudicar diferentes tamaños, colores y formas. Veamos el siguiente ejemplo:

Código:	Resultado:
<font face="Arial" color="orange" size=1>El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1"</font>	El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1"

Otros tipos de letras que se pueden utilizar son "Tahoma", "Comic Sans", "Impact", "Verdana"; otros tipos de colores que se pueden utilizar son "green" (verde), "yellow" (amarillo), "blue" (azul), "gray" (griz); y para aumentar el tamaño (size) de las letras solo debes aumentar el número dentro del código y listo.

Recuerda que para los códigos tengan efecto debes escribirlos exactamente como aparecen aquí. Si te sirve de ayuda solo copia y pega (copy paste) los códigos de ejemplos en un editor de texto para que vayas practicando.

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:

<FONT FACE="raro, courier" SIZE=4 COLOR="red">
 Texto de prueba 12345 con tipos alternativos</FONT>

Imagen de como quedan al crear los Tipos de Letras de Html:

Video de como crear Letras en HTML:

Cabecera y Cuerpo de Html

Cabecera

La cabecera es una colección de información acerca del documento. Las marcas de principio y fin son <HEAD>y</HEAD>

La cabecera puede contener los siguientes datos, sin importar el orden en que aparezcan:
//Título// (TITLE). Indica el nombre del documento, los visores lo emplean generalmente como etiqueta de la ventana. Este campo es el único obligatorio en la cabecera.
~- //Dirección de base// (##

BASE). Proporciona una dirección de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto (por ejemplo cuando está guardado en un disco).
//El documento es un índice// (ISINDEX). Si se pone la palabra clave ##ISINDEX##, el cliente interpretará que la página es un índice y permitirá al usuario introducir palabras clave para buscarlas.
//Enlaces relacionados// (LINK). En la cabecera podemos incluir varios enlaces relacionados con el documento como versiones anteriores, dirección del autor, etc.
//Metainformación// (META). Este campo sirve para proporcionar información sobre el documento que no pueda ser expresada en los ampos anteriores. La información se escribe usando pares nombre/valor que pueden ser empleados para dos propósitos:
~~1) Proporcionar datos al servidor de ##HTTP## para que genere campos de cabecera (como por ejemplo la fecha de caducidad de un documento que se actualiza periódicamente) o,
~~1) Para que un usuario incluya información adicional sobre el documento, como palabras clave o el nombre del autor.

Cuerpo

Como ya hemos dicho, el cuerpo contiene el texto de la página que se va a presentar al usuario. Las marcas de principio y fin del cuerpo son ##<BODY>## y ##</BODY>## respectivamente.

A continuación describiremos los elementos que pueden aparecer en el cuerpo, clasificados por categorías.

Encabezados

Los encabezados se emplean para dividir los documentos en secciones, o más concretamente para marcar los títulos de esas secciones. Las marcas son del tipo ##<H#>Título</H#>##, donde ##### puede ser un numero cualquiera entre 1 y 6.

Imagen de Ejemplo:

sábado, 8 de septiembre de 2012