HTML

¿ QUÉ ES? 1 - Etiquetas del lenguaje HTML El lenguaje HTML es un lenguaje de marcas. Estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo: <B> Letra Negrita, del inglés Bold (negrita). <TABLE> Definirá una tabla. <IMG> Inclusión de una imagen.

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Un ejemplo de atributo será: <A HREF="http://www.uca.es">Pagina principal de la UCA</A> En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es. Igualmente una etiqueta podría presentar varios atributos: <HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%> 2.ATRIBUTOS DE LA ETIQUETAS

#000000 Negro(Negro) #FFFFFF Blanco(Blanco) #FF0000 Rojo(Rojo) #00FF00 Verde(Verde) #0000FF Azul(Azul) Antes de especificar los atributos de la etiqueta BODY, indicaremos la forma de representar los distintos colores. Se usa el siguiente formato: #rrvvaa 3. CUERPO DE UN DOCUMENTO HTML

COLOR MUESTRA COL0R MUESTRA BLACK NEGRO RED ROJO BLUE AZUL LIMA LIMON WITHE BLANCO GREEN VERDE 3.2Algunos colores están predefinidos y pueden ser referenciados por su nombre; estos colores predefinidos son :

3.3 Atributos de <BODY> La etiqueta BODY presenta algunos atributos que son de definición global para todo el documento. Éstos definirán los colores y el fondo del documento HTML. Los atributos de BODY son: <BODY BACKGROUND="imagen" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa > BACKGROUND="imagen": definirá la imagen que se utilizará de fondo del documento HTML. La imagen se muestra debajo del texto y las imágenes del documento HTML. En el caso de que la imagen no rellene todo el fondo del documento, ésta será reproducida tantas veces como sea necesario. BGCOLOR=#rrvvaa o nombre del color : indicará el color del fondo del documento HTML. Sólo se utilizará si no se ha definido una imagen de fondo, o si esta imagen no puede obtenerse. TEXT=#rrvvaa o nombre del color : especificará el color del texto normal dentro del documento HTML. Por defecto será normalmente negro. LINK=#rrvvaa o nombre del color : indicará el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto será azul. VLINK=#rrvvaa o nombre del color : color de los enlaces que ya han sido visitados. Por defecto es un color azul más oscuro.

3.4.- Espaciados y saltos de línea ALIGN=LEFT, RIGTH o CENTER: indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la pantalla del navegador, a la izquierda, derecha o centrada. NOSHADE: no muestra la sombra de la barra, evitando el efecto en tres dimensiones. SIZE= n : indicará la altura de la regla en puntos de la pantalla. WIDTH= n o n %: especificará el ancho de la regla. Se puede especificar en tanto por ciento del ancho de la ventana <HR WIDTH=50%>, o en valor absoluto en puntos de la pantalla <HR WIDTH=75>.

3.6.-Cabeceras <H1> - <H6> Cabeceras de títulos En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos subapartados que lo forman. Las etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, siendo H1 la que muestre el texto de mayor tamaño. Puede presentar un atributo que especificará que la cabecera se mostrará centrada: <H n align=CENTER>: Alineación de la cabecera

3.7.-Tamaño y Color de las fuentes de caracteres <FONT SIZE= n > : Tamaño de la fuente El atributo SIZE permite indicar el tamaño de la fuente. Su valor puede estar entre 1 y 7. Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 que es la de mayor tamaño. < BASEFONT SIZE= n > : Fuente por defecto Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuente relativos. <FONT COLOR= texto color ó rrvvaa > : Color de la fuente El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas de inicio y fin.

3.8.-Estilos Etiqueta HTML Ejemplo Descripción <B> Ejemplo Negrita. <I> Ejemplo Cursiva. <TT> Ejemplo Maquina de escribir, muestra una fuente de caracteres de espaciado fijo. <BLINK> Ejemplo Parpadeo. <SUB> Ejemplo Subíndice. Para Netscape 2.0+ <SUP> Ejemplo Superíndice. Para Netscape 2.0+ <BIG> Ejemplo Texto grande, se utilizará el mayor tamaño de fuente. Para Netscape 2.0+ <SMALL> Ejemplo Texto pequeño, se utilizará la fuente de menor tamaño. Para Netscape 2.0+

3.9.-Definición de Listas <UL> Listas no ordenadas Este tipo de lista se usa para enumerar elementos que no tengan un orden definido, precedidos de una marca o viñeta que nosotros podemos definir. Para la definición de los límites de la lista utilizaremos la etiqueta <UL>… </UL>, y para determinar cada uno de los elementos que la componen, usaremos la etiqueta <LI>. El formato es el siguiente: <UL type = “DISC” o “CIRCLE” o “SQUARE” > <LH> Título de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 . . . <LI> Elemento n </UL>

<OL> Listas ordenadas </OL> El punto de comienzo siempre será el 1, si no se indica en START otro valor de comienzo, y el tipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son: A: Letras mayúsculas. a: Letras minúsculas. I: Número romanos en mayúsculas. i: Número romanos en minúsculas. 0: Números (es la numeración por defecto, por tanto no hay que indicarlo).

DL> Listas de definiciones Estas listas sirven para especificar una serie de términos y sus definiciones correspondientes. Para la definición de la lista usaremos la etiqueta <DL>… </DL>´; para especificar los términos usaremos la etiqueta <DT>; y para especificar la definición correspondiente a cada término usaremos la etiqueta <DD>. El formato es el siguiente: <DL> <LH> Titulo de la lista </LH> <DT> Termino 1 <DD> Definición 1 <DT> Termino 2 <DD> Definición 2 . . . <DD> Termino N <DT> Definición N </DL> El titulo de las lista <LH> como en los casos anteriores es opcional. Es posible anidar cualquier tipo de lista entre sí, incluso listas de distinto tipo.

3.10.- Hiperenlaces Son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicación, o a otras zonas dentro de nuestro propio documento. Por ejemplo: Puede encontrar más información sobre vacas pulsando aqui Se podría sustituir por: Disponible mas iinfo. Sobre vacas El usuario que lea el texto ya sabrá al verlo resaltado que puede pulsar ahí. Enlaces a otras páginas: <A HREF=...> Son los enlaces con documentos externos al actual. En este caso se indicará una URL que definirá el documento al que se accede si se sigue el enlace. La forma de indicarlo será: <A HREF=" URL a la que se accede "> Texto del Hiperenlace </A>

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</A> En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace. URL absolutas y relativas Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. Enlaces dentro de la misma página: <A name=…> Cuando estemos trabajando con páginas muy grandes, sería muy interesante poder trasladarnos de una zona a otra de la página, visualizando así la parte que nos interese de una forma rápida Marcar las distintas zonas o secciones del documento. Esto lo haremos con el parámetro name : <A name=”Identificador de sección”> Texto de la sección </A> A cada sección le asignaremos un identificador distinto, para poder referenciarlas posteriormente de manera inequívoca. Especificar un enlace a cada una de las secciones que hayamos definido. <A href = “#Identificador de sección”> Texto del enlace a la sección </A>

3.11.-Imágenes en los documentos HTML Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia. En este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML. Inclusión de Imágenes La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato: <IMG src=" URL de la Imagen " alt=" Texto alternativo a la imagen " align=”top/middle/bottom/left/right” border=”Tamaño” height=”Tamaño” width=”Tamaño” hspace=”margen” vspace=”margen”> En el punto del fichero HTML en el que queramos que se muestre la imagen, incluimos esta etiqueta .

A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG . <IMG alt=...> Texto alternativo El atributo ALT , indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, para mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos; de esta forma, se consigue que todos los usuarios puedan consultar sus páginas. <IMG align=...> Alineación de la imagen Indica como se alinea el texto que sigue a la imagen con respecto a ésta. Indicará si la primera frase del texto se colocará en la parte alta de la imagen, TOP , en el punto medio de la imagen, MIDDLE , o en la parte de abajo de la imagen, BOTTOM .

<IMG border=...> Borde de la imagen Indicará el tamaño del borde de la imagen. Si la imagen se encuentra dentro de un hiperenlace, el borde de esta será del color apropiado para indicarlo; en caso contrario el borde será invisible. Si se desea que no se muestre el borde cuando la imagen sea un enlace se usará border=0. <IMG height=”Tamaño”> Alto de la imagen El atributo HEIGHT Determina el alto de la imagen a mostrar. Se especifica en puntos de la pantalla (píxeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o menor, se escalará a este tamaño. <IMG width=”Tamaño”> Ancho de la imagen El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También se expresará en píxeles o en tanto por ciento. <IMG hspace=”Margen”> Espaciado horizontal de la imagen Permite especificar el número de espacios horizontales (en puntos) que separarán a la imagen de cualquier elemento que le siga o le anteceda. <IMG vspace=”Margen”> Espaciado vertical de la imagen Permite especificar el margen vertical (en puntos) que habrá entre la imagen y cualquier otro elemento de nuestro documento.

3.12.- TABLAS Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. <TABLE> ... Definición de la tabla ... </TABLE> En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla; todos los atributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará como tal, pudiendo definir tablas anidadas (tablas dentro de tablas). Puede presentar los siguientes atributos: BORDER =n : si se utiliza, se dibujará un borde alrededor de la tabla y separando los distintos campos que presenta. Indicaremos un número que especificará el tamaño del borde; por defecto será 0, es decir, no se dibujará ningún borde. Aunque no se dibuje el borde, sí se mantendrá el espaciado los elementos de la tabla. CELLSPACING=n : indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si se indica 0, no habrá ningún espacio entre las celdas.

Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla. <TR> Fila de la tabla Definirá cada una de las filas de la tabla y especificará los parámetros que afectarán a todas las celdas de la fila. Por cada elemento TR que se incluya, se creará una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta de cierre. Atributos de <TR> Se podrá especificar por defecto la alineación que tendrán los elementos dentro de las celdas. ALIGN = LEFT | CENTER | RIGHT: Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valores situados en la fila actual, también se podrá indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores: LEFT: Alineación a la izquierda de la celda. Este el valor que se toma por defecto. RIGHT: Alineación a la derecha. CENTER: Indicará centrado. VALIGN = TOP | MIDDLE | BOTTOM: Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocarán los datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son: TOP: Parte superior de la celda.

<TH> y <TD> Una celda de la tabla Define cada una de las celdas de una fila de la tabla. TH se usará para definir una celda de tipo cabecera, mostrándose el contenido en negrita, y TD para definir una celda de datos. Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila. Existirá una columna por cada elemento TD o TH que se defina. Aunque se puede indicar la etiqueta de cierre, no es necesario, al tomarse implícitamente. Utilizaremos los elementos TH para los títulos de las filas o columnas y los elementos TD para los datos. Pueden presentar los siguientes atributos: ALIGN: Indica la alineación horizontal del dato dentro de la celda. Se especificará individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR. VALIGN: Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cada celda, el formato es el mismo que el expresado para TR. WIDTH: Especifica el ancho que tendrá la columna de la tabla. Se puede especificar en valor absoluto, en puntos de la pantalla o en tanto por ciento del tamaño de la tabla. BGCOLOR : Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna.

CELLPADDING=n : es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0, las celdas aparecerán sin separación. WIDTH=valor o porcentaje %: será el ancho de la tabla. Se puede indicar como valor absoluto o como porcentaje del ancho del documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del documento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño del documento. HEIGHT=valor o porcentaje %: definirá el alto de la tabla. Al igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más difícil que pueda coincidir con el tamaño de la ventana. Dentro de las etiquetas de tabla, se incluirán las diversas etiquetas que definen el contenido de la misma.

HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a HTML

Similar a HTML (20)

Último

Último (20)

HTML