¿HTML?
"HYPERTEXT MARK-UP LANGUAGE", engloba documentos que tienen estas características:
Las características anteriores se consiguen debido a que HTML es un lenguaje de , es decir, mediante las marcas podremos formatear los elementos que conforman nuestro documento, añadiendo también la pecularidad de que es un lenguaje interpretado, añadiéndole así una mayor velocidad.
La interpretación del documento es llevada a cabo mediante cualquier navegador de Internet, como son Internet Explorer, NetScape, Mosaic... étc. haciendo hincapié en la elección, al igual que la versión correspondiente, ya que permitirá que varie el conjunto de marcas a utilizar, puesto que existen marcas estandarizadas y otras que no son reconocidas por el navegador, que pasará a ignorarlas sin producir error.Un caso particular son las imágenes, que serán sustituidas por defecto por un icono característico de cada navegador para indicarnos de su posible existencia.
El documento HTML a crear, se realizará en un editor, ya sea un editor ASCII corriente, o un editor especializado que nos dará ciertas facilidades. Editores específicos de HTML son: HoTMetal, Hot Dog, WebEdit, ...etc.
H T M L
Un documento HTML tiene como esqueleto el siguiente esquema:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Como podemos observar las partes de un documento HTML están muy bien delimitadas por las marcas que son los caracteres introducidos entre los signos de mayor '<' y menor '>'. A partir de ahora a las marcas pasaremos a denominarlas . Los pares de etiquetas anteriores tienen el siguiente significado:
ETIQUETAS
Las etiquetas es el elemento básico del documento, ya que es la estructura que proporciona las características del HTML.
El formato de las etiquetas es bien simple:
<ETIQUETA> </ETIQUETA> La mayoría de las sentencias siguen el esquema anterior, una etiqueta de apertura y otra de cierre, que delimitan el radio de acción de dicha etiqueta, pero existen excepciones donde solo se debe indicar la etiqueta de comienzo, ya que el final viene implícito.
Finalmente hay que resaltar la existencia de parámetros/atributos dentro de las etiquetas que realizan funciones útiles referentes a la etiqueta que acompañan, o necesarias para su uso. Los atributos son declarados en la etiquetas de inicio, como muestra el esquema:
<ETIQUETA ATRIBUTO1=VALOR1...... ATRIBUTOn=VALORn>
COMENTARIOS <!-- Comentario -->
HEAD
La cabecera es una colección de elementos que tienen efecto global en el documento, son de carácter opcional ya que son elementos que se utilizan en casos excepcionales, exceptuando la etiqueta TITLE que aportará el título del documento y se recomienda su inclusión.
Las etiquetas que podemos utilizar dentro de HEAD son:
<BASE>
El elemento BASE permite tener una dirección(URL) base, la cual es
útil cuando en nuestro documento tenemos direcciones relativas,
manteniendo así los enlaces de forma correcta.La especificación
de dicha dirección se realizará en los atributos.
ATRIBUTOS
Por ejemplo:
<BASE HREF="http://www.home.com/">
<ISINDEX>
El mandato ISINDEX nos indica que el documento será tratado como un índice. Al tratarlo como un índice da la posibilidad de introducir elementos a buscar en el documento, mediante una ventana de diálogo.
ATRIBUTOS
<LINK>
La etiqueta LINK indica una relación entre el documento y otros objetos, dándose la posibilidad de que el documento tenga más de un "LINK". Entre sus usos cabe destacar la utilización para refenciar índices y glosarios, versiones nuevas y antiguas de un producto, así como referenciar a una hoja de estilos. ("STYLE SHEET")
ATRIBUTOS
Por ejemplo:
<LINK REL="stylesheet"
TYPE="text/css"
HREF="http://www.foo.com/sheet"
TITLE="coolsheet">
<TITLE>
Es el mandato más importante y obligatorio de los que se encuentran en la sección de la cabecera, ya que es el que pondrá nombre al documento para su identificación posterior.No conforma parte del documento en sí, sino que la cadena que representa el título se visualizará en el navegador.
SIN ATRIBUTOS
Por ejemplo:
<HEAD>
<TITLE> TITULO DEL DOCUMENTO </TITLE>
</HEAD >
<META>
Con este elemento es posible incluir información útil no definida por otros elementos de HTML. Como uso principal permite ir cambiando de documento actual en un tiempo determinado por otro que se indique.
ATRIBUTOS
Por ejemplo:
<META HTTP-EQUIV="Refresh" CONTENT="x; URL=Dirección documento">
<STYLE>
Es usado para delimitar la información de Style Sheet
Por ejemplo:
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
</STYLE>
BODY
El cuerpo de un documento HTML contiene todo el texto e imágenes a visualizar, además de los elementos que permiten del control-formateo de la página.
Cuando no se definen las etiquetas principales como son <HTML> y <HEAD> todos los elementos definidos en el documento forman parte por defecto del cuerpo.
Gracias a los atributos que componen esta etiqueta podemos elegir tanto como un dibujo de tapiz, como el color de los carácteres a visualizar.
El formato sería:
<BODY BACKGROUND="dir" BGCOLOR=color TEXT=color LINK=color VLINK=color ALINK=color>
Y El significado de los atributos:
MODIFICADORES DE TEXTO
Bajo este apartado se incluyen las etiquetas que variarán el aspecto del texto en el documento, ya sean por el estado físico o lógico de los caracteres así como los encargados del formateado del texto en sí, debido a la pecularidad que tiene el HTML al ignorar la existencia de dos espacios seguidos.
Permite delimitar un párrafo de otro, produciendo entre ellos normalmente dos líneas en blanco. Es una etiqueta sin cierre, es decir, no es obligatorio especificar el fin con </P>. Tiene un atributo que es ALIGN, que nos permite alinear el párrafo. FORMATO: <P ALIGN=LEFT|CENTER|RIGHT>
<P>
Es de utilidad parecida al mandato <P>. Realiza un salto de línea, sin dejar líneas en blanco entre texto y texto.Es una etiqueta sin cierre. FORMATO: <BR>
Define una línea horizontal que puede tener como uso la división de secciones de texto. Por defecto, realizará una línea que cruzará de extremo a extremo la pantalla, añadiendo un salto de línea como la separación de párrafo. FORMATO: <HR ALIGN=LEFT|CENTER|RIGHT NOSHADE SIZE=n WIDTH=n> ATRIBUTOS: -- ALIGN: Indicará la posición donde se ubicará la línea, si esta no ocupa el ancho completo. -- NOSHADE: Elimina el efecto de sombra de la línea. Por defecto la mostrará. -- SIZE: Indica el ancho de la línea. Por defecto es uno. -- WIDTH: Definimos la longitud de la línea, ya sea por puntos o por un cálculo de tanto por ciento si ponemos n%.
Directiva que permite mostrar un texto con el formato propio del código fuente. Por tanto esta directiva hace que se respeten los espacios en blanco, así como los retornos de línea. Existe un problema en cuanto a los retornos de carro, y es que si no se incluyen estos específicamente en el documento fuente , no se harán efectivos en el documento final, produciendo así una línea más larga de lo esperada. <XMS> es una etiqueta con un uso muy parecido a la anterior, aunque se ha hecho obsoleta. FORMATO: <PRE> TEXTO PREFORMATEADO </PRE>
Todo elemento que se encuentre entre las etiquetas de apertura y cierre aparecerá centrado en el documento final. Cuando nos referimos a todo elemento, nos referimos a texto,imágenes,tablas,listas... etc. FORMATO: <CENTER> TEXTO CENTRADO </CENTER>
Bajo este nombre se incluirán caracteres que se tratarán de forma especial para su correcta interpretación. La especificación de estos caracteres va precedida del signo ampersan(&), código del carácter, finalizado con un punto y coma. A modo de ejemplo, el carácter ñ es ñ .. Uno de los casos en que necesitamos estos caracteres especiales es cuando hacemos referencia a elementos del HTML, debido a que si se introdujeran de forma habitual serían interpretados por secuencias de control y no como caracteres normales. Esta situación es muy útil a la hora de tener que especificar ejemplos de comandos. .. Otro caso se corresponde con la especificación de caracteres que no conforman parte del vocabulario de la lengua inglesa, entiéndase estos como caracteres acentuados, la ñ y todos los caracteres que sobrepasen del código ascii 127 (ASCII 7 BITS). Todo esto también se verá influenciado por el navegador a utilizar, ya que si es especifico de un lenguaje, leerá los caracteres de dicho lenguaje sin tener que especificarlos con un código de escape, pero al leerse ese documento con otro navegador no serán visualizados correctamente si no se introduce de esta forma especial. .. Como caso especial tomamos el código de escape del espacio en blanco, ya que si se introduce de esta forma será respetado por el intérprete y no lo eliminaría.
Secuencia Escape
Códigos
Espacio en blanco
< <
> >
& &
ñ ñ
&vocalacute;
á é í ó ú
¡ ¡
HTML define seis niveles de cabeceras. Este elemento permite destacar títulos con tipos de letras variables y estilo negrita, forzando un salto de línea cuando se cierran. El nivel más alto de cabecera lo impone <H1>, seguido <H2> ... <H6>.
FORMATO:
<Hn TEXTO ALIGN=LEFT|CENTER|RIGHT> </Hn>
ATRIBUTO:
-- ALIGN=Especifica la colocación del texto de la cabecera, ya sea
centrado a la izquierda o derecha.
| EJEMPLO |
MODIFICADORES DE FUENTE DE LOS CARACTERES
Estos elementos surgen debido a la rigidez que presenta la variación del formato de texto dentro de una cabecera, ya sea tanto como las fuentes
como el color. Haremos una distinción entre el comando font, los estados
físicos y los estados lógicos.
Etiqueta que tendrá dos funciones dependiendo de los atributos que le asignemos, ya sea SIZE o COLOR. Antes de comenzar con la especificación de dichos atributos haremos referencia a un elemento a tener en cuenta en relación a las fuentes.
<BASEFONT>Este elemento es utilizado para variar el tamaño base de las fuentes relativas. ¡No cambia el tamaño de la fuente por defecto como se puede pensar intuitivamente!. El atributo SIZE de FONT detallado posteriormente hará uso de su valor para realizar el cálculo del tamaño de las fuentes. Por defecto tiene el valor 3, siendo el rango válido de 1 a 7,ambos inclusive. ATRIBUTOS: -- SIZE=n: Donde n es el número de cálculo base, es decir,a partir de n se sumará el valor especificado en los comandos fuente. FORMATO: <BASEFONT SIZE=n><FONT SIZE >Permite modificar el tamaño de la fuente mediante un número asignado al atributo SIZE, dándose el caso de tener dos formas de llevarlo a cabo, bien sea directamente, es decir, indicándolo con un valor de 1-7; o bien haciendo uso del concepto de tamaño relativo indicado en <BASEFONT>, y que se realizaría mediante la indicación del signo matemático más o menos antepuesto al dígito en cuestión. FORMATO: <FONT SIZE=[n|±n]><FONT COLOR >Su función es variar el color del texto que abarque su radio de acción, teniendo como excepción los enlaces, a los cuales no se le variará el color. El formato de especificación del color es similar al explicado en el apartado BODY. FORMATO: <FONT COLOR=#rrggbb>
EJEMPLO
Los Estados Físicos son aquellos que nos permiten modificar el texto de forma determinada (negrita,cursiva..), mientras que los Estados lógicos son aquellos que son asignados a un determinado texto por sus características.
| ESTADOS FÍSICOS | ESTADOS LÓGICOS | ||
|---|---|---|---|
| Comando | Acción | Comando | Representa |
| <B> | Negrita | <ADDRESS> | |
| <I> | Cursiva | <CODE> | Código de un lenguaje |
| <BLINK> | Parpadeo | <STRIKE> | Texto tachado |
| <SUB> | Subíndice | <STRONG> | Texto resaltado |
| <SUP> | Superíndice | <VAR> | Variable |
| <BIGgt | Mayor tamaño fuente | <EM> | Enfasis |
| <SMALL> | Menor tamaño fuente | <DFN> | Definición |
LISTAS
Las listas nos proporciona una manera habitual de organizar la información. En HTML podemos hacer uso de cinco tipos de listas:
Colección de elementos que no tienen un orden predefinido. La colección comienza con las etiquetas <UL> y cada elemento de la lista va predecido de las etiquetas <LI>. El título de la lista se podrá definir con la etiqueta <LH>. ATRIBUTOS: -- TYPE= Define el símbolo que se antepondrá a los elementos que forman la lista. Sus valores son DISK|CIRCLE|SQUARE. FORMATO: <UL TYPE= Valor> <LH> Título lista </LH> <LI> Elemento 1</LI> .............. <LI> Elemento n</LI> </UL>
Otro de los tipos de lista que tenemos son las listas ordenadas, en las que se definen un orden basándose en la posición de los elementos no siguiendo un orden alfabético. El formato de especificación es el mismo que en el caso anterior. ATRIBUTOS: -- TYPE= Define el atributo para realizar la numeración de la lista teniendo las posibilidades:
LISTAS DE DEFINICIONES
LISTA DIRECTORIO
LISTAS MENU
HIPERENLACES
El hiper-enlace es el elemento característico de HTML, nos permite realizar enlaces a otros documentos HTML o incluso dentro del mismo documento a elementos a los que se quiera referenciar. El hiper-enlace será indicado mediante el elemento origen subrayado (texto, imagen...etc) y con color que está definido en BODY. El destino será denominado ancla.
Para la definición de enlaces necesitamos las etiquetas <A HREF> y <A NAME>, donde una nos muestra el origen y otra el destino del hiper-enlace. El correcto uso de estas etiquetas, permite que varios orígenes puedan ir al mismo destino, pero en caso contrario (un origen-varios destinos), el resultado es impredecible, dependiendo en todo caso del navegador utilizado. En el caso del Netscape se irá al último definido.
Tenemos dos casos de enlaces posibles: -- Hiperenlaces a documentos externos al actual. FORMATO:
<A HREF="Dirección"> Elemento del Hiper E.</A>Donde la dirección especifica URL donde se accede y el elemento del hiperenlace es el elemento que aparecerá resaltado, ya sea un texto o una imagen. -- Hiperenlaces a elementos locales . FORMATO:<A HREF="#Id. del Ancla"> Elemento de enlace</A>El identificador del ancla será utilizado para el enlace y no será mostrado en el documento final.Elemento Ancla, es decir, elemento destino al cual iremos tras referenciarlo con el enlace origen. FORMATO:
<A NAME="Id. del Ancla"> Elemento de enlace</A>Donde el identificador del ancla del origen y destino deben ser los mismos para un enlace en concreto, ya que gracias a este elemento podremos realizar el enlace.
TABLAS
Es otra posibilidad que nos da HTML de tabular los elementos que componen el documento. Los elementos serán representados mediante filas y columnas de forma tabular, ya sea un dibujo, un texto, étc.
La definición de la tabla es muy flexible ya que no obliga a indicar el número de columnas ni filas, sino que siempre tiende al número mayor de especificaciones, es decir, si una columna tiene seis elementos y otra tres, la dimensión de la columna será seis, rellenando la columna de tres con celdas vacías.
<TABLE>
Presenta la definición de la tabla de forma global, es decir,
esta etiqueta se especificará las características de la tabla.
ATRIBUTOS:
-- BORDER=Valor. Define el grosor de la línea que sirve de
separación de los distintos campos. Por defecto su valor es
cero y por tanto no habrá línea a mostrar aunque seguirán
los espacios entre las celdas.
-- CELLSPACING=Valor. Indica el espacio a dejar entre las celdas
que conforman la tabla.Su valor por defecto es dos. En el caso
de que el valor sea cero, no habrá separación.
-- CELLPADDING=Valor. Definen la separación entre el borde de la
celda y el contenido, siendo por defecto 1 y si el valor es
cero no habrá la correspondiente separación.
-- WIDTH=Valor|%Valor. Representa el ancho de la ventana, ya sea
como valor relativo (%) al tamaño de la ventana del
visualizador o al ancho total en puntos.
-- HEIGHT=Valor|&Valor. Funciona de forma semejante a WIDTH, pero
se diferencia a la anterior en que esta se refiere a la
altura de la ventana y no a su ancho.
FORMATO:
<TABLE atributos> Tabla </TABLE>
<CAPTION>
Especifica el título de la tabla, que será mostrado en la parte
superior de esta de forma centrada.
ATRIBUTOS:
-- ALIGN= Colocará el título en la parte superior o inferior de
la tabla.
FORMATO:
<CAPTION ALIGN=Top|Bottom> Título </CAPTION>
<TR>
Define las filas de una tabla y los atributos que se
incluyan en su definición afectarán a los elementos que forman
parte de dicha línea.
ATRIBUTOS:
-- ALIGN= Presenta la alineación de los elementos que conforman
las celdas. Los posibles valores son: LEFT,RIGHT,CENTER.
Por defecto será LEFT.
-- VALIGN= De forma similar a la alineación anterior, está nos
especifica la alineación vertical. Sus valores son:
TOP,MIDDLE,BOTTOM.
-- BGCOLOR= Indica el color que tendrán las celdas de la misma
línea.
<TD>
Especifica los elementos concretos, es decir, los elementos
que formarán parte de cada una de las celdas que conforman la tabla.
Estos elementos deben formar parte de la definicines de las líneas
de las tablas, es decir, dentro de las etiquetas TR, ya que estas
etiquetas definirán las columnas. Existirá una columna por cada TD.
Un caso especial de esta etiqueta sería la etiqueta TH que definiría
una celda tipo cabecera, la cual se destaca de las demás en negrita.
ATRIBUTOS:
-- ALIGN: Alineación horizontal del dato en la celda, pero es
forma individual a cada celda.
-- VALIGN: Alineación vertical del dato que forma parte de la
celda. Definición local a cada celda.
-- WIDTH: Ancho de la celda, se especificará en valor relativo
o absoluto.
-- BGCOLOR: Color del fondo de la celda. Definición local.
-- ROWSPAN: Indica el número de celdas que ocupará la celda en
esa fila, es decir, una celda se podrá expandir
ocupando tantas celdas como se especifique.
-- COLSPAN: Utilidad semejante a la anterior, pero basada en el
número de columnas.
-- NOWARP: No permite que se divida el texto que forma parte de
la celda, obligando así que la celda será tan
grande como sea el texto.
FORMATO:
<TH ALIGN=x VALIGN=x WIDTH=n BGCOLOR=color ROWSPAN=nºF COLSPAN=nº C NOWRAP>
| EJEMPLO |
IMÁGENES
Las imágenes son uno de los elementos que forman parte de las características de un documento HTML. Los formatos que se pueden incluir en una página son GIF y JPEG, donde el primero es aconsejable para representar elementos que requieran poca definición como son por ejemplo los iconos y los JPEG se dejarían para una mayor definición como son el caso de los paisajes, fotos ...étc.
<IMG>
Es la etiqueta encargada de representar la imagen.
ATRIBUTOS:
-- SRC= Especifica la dirección donde está ubicada la imagen, es
decir, tendrá la URL.
-- ALT= Indica un texto alternativo que se mostrará en caso que la
imagen no sea cargada en la página, bien porque no se ha
encontrado o por especificación en el navegador.
-- ALIGN= Alinea el texto que sigue a la imagen. Si tomamos el valor
TOP, la primera línea de texto se visualizará en la parte
superior del dibujo, en caso de elegir MIDDLE lo hará en la
mitad del dibujo y si elegimos BOTTOM lo situará en la
parte inferior. Otros valores de posicionamiento serían
LEFT y RIGHT que dejarían la imagen a la izquierda y
derecha del texto respectivamente.
-- BORDER= Permite la posibilidad de añadir un borde a la imagen,
especificando su grosor. Por defecto no se visualizará.
-- HEIGHT= Determina el alto de la imagen a mostrar, ya sea una
dimensión total o parcial que dependa del tamaño de
ventana.
-- WIDTH= De definición similar a la anterior, pero especificando
el ancho de la imagen.
-- HSPACE= Indica la separación horizontal que debe haber entre
una imagen y otro elemento que este junto a ella.
-- VSPACE= Variación de la anterior para la separación vertical.
FRAMES
Nos permite dividir la pantalla del navegador en varias regiones o
frames, permitiendo así que cada frame haga referencia a una URL
distinta. Es útil por ejemplo cuando tenemos un documento como este,
el cual posee un índice de contenido, que nos permite mantener en
una región el índice y saltar de posición en posición en el texto con
el índice de la otra frame.Existen navegadores que no soportan este
mandato, por lo cual habrá que especificar entre la etiqueta