MARCAS
Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc. Y son utilizados para dar un tratamiento diferente al texto que se encuentra entre las marcas.
En HTML las marcas se delimitan con los signos < y >, es decir, para abrir utilizamos <, para cerrar > , adicionando la diagonal inversa / al finalizar.
ATRIBUTOS DE LAS MARCAS
Algunas marcas pueden admitir atributos pudiendo tener cada uno de estos atributos con un valor; como por ejemplo: color, textura, estilo, formato, ancho, alto. Este valor irá “si dicho valor es alfanumérico”.
ESTRUCTURA DE LOS DOCUMENTOS
Estructura Básica Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento HTML será:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que se muestren sin ningún problema sin incluir estas etiquetas de identificación. Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no serán reconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>.
En los próximos apartados explicaremos de forma separada los componentes de la cabecera y del cuerpo de un documento HTML.
CABECERA
La cabecera se emplea para facilitar información acerca del documento y está delimitado por <HEAD> y </HEAD>.
Dentro de la cabecera podemos destacar el titulo que indica el nombre del documento, está delimitado por <TITLE> y </TITLE>
<HTML>
<HEAD>
<TITLE> …Bienvenido… </TITLE>
<HEAD>
<BODY>
<BODY>
<HTML>
CUERPO
El resto del documento residirá entre las marcas <BODY> y </BODY>
ENCABEZADO
Los encabezados se emplean para dividir los documentos en secciones o más concretamente para marcar los títulos de las secciones. Las marcas son del tipo:
<H1> Tamaño mayor </H1>
<H6> Tamaño menor </H6>
DEFINICION DE BLOQUES
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas:
<P> Se utiliza para separar párrafos. Dado que para HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y fin de un párrafo. Las marcas inicial y final son: <P> y </P>
<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado respetando el formato con el que fue escrito en el fichero fuente HTML.
<ADDRESS> Empleada para indicar que un texto representa una dirección o firma. Generalmente se activa en cursiva y suele estar tabulada.
<BLOCKQUOTE> Se suele representar con tabulaciones a la izquierda y derecha y en cursiva. En sistemas que no permuten representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas.
<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir, un salto de renglón.
<HR> Sólo tiene marca inicial y se emplea para representar una línea horizontal.
COMENTARIOS
Todo texto que empiece por <!...comentario…> será ignorado por el browser y por lo tanto no será visible. Esto sirve al autor del documento para comentar en su fichero fuente.
FONDOS Y COLORES DE TEXTO
Un cierto número de atributos de la marca body permite controlar el color del fondo de la ventana, el color de los caracteres del texto y finalmente el color de los enlaces:
<BODY atributo1 aributo2 ….atributo N>
El atributo BGCOLOR permite escoger un color para el fondo de la página <BGCOLOR=”#rrggbb”> Donde “rr”, “gg”, “bb” son valores hexadecimales 00 à FF
BACKGROUND: especifica una imagen residente en el servidor la cual se utilizara como fondo de página.
<BODY BACKGROUND= “fichero_grafico.gif”>
TEXT Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace.
<BODY TEXT= “#rrggbb”>
LINK Color de enlace que aún no ha sido visitado.
<BODY LINK= “#rrggbb”>
ALINK Color muy fugas que aparece cuando se hace clic sobre el link.
<BODY ALINK= “rrggbb”>
VLINK Es el color de un enlace que ya ha sido visitado.
<BODY VLINK= “#rrggbb”>
LETRA Es la marca que asigna el tamaño de los caracteres donde n varía de 1 a 6. Los más grandes tienen valor de 1 y los más pequeños valor de 6. El texto entre estas marcas se trata en negrita.
TITULO <Hn>
Se puede dar mayor o menor importancia a los textos cambiando el tamaño y aplicando "negrita". Esto se puede hacer manteniendo un criterio si utilizamos la etiqueta<hN></hN>, en donde N es un valor valor entero comprendido entre 1 y 6 (el 1 formatearía títulos de mayor importancia, y el 6 los de menor importancia). Estos títulos son párrafos, y producen saltos de línea. Veamos un ejemplo:
<html>
<head>
<title>Encabezados o Títulos</title>
</head>
<body>
<h1>Ejemplo de Encabezado 1 - etiqueta <h1></h1>
<h2>Ejemplo de Encabezado 2 - etiqueta <h2></h2>
<h3>Ejemplo de Encabezado 3 - etiqueta <h3></h3>
<h4>Ejemplo de Encabezado 4 - etiqueta <h4></h4>
<h5>Ejemplo de Encabezado 5 - etiqueta <h5></h5>
<h6>Ejemplo de Encabezado 6 - etiqueta <h6></h6>
</body>
</html>
TAMAÑO DE LA LETRA Y EL COLOR
<FONT> permite actuar sobre bloques distintos de caracteres situados en la misma línea.
El atributo *SIZE: regula la altura de los caracteres (1 a 7) *COLOR: especifica el color de los caracteres. Ejemplo:
<FONT SIZE=3 COLOR=#008000> ….texto…. </FONT>
ESTILO FISICO O ESTILO DE LOS CARACTERES
<B> Negrita <b> hola! </b>
<I> Cursiva <I> hola! </I>
<V> Subrayado <V> hola! </V>
ESTILOS LOGICOS, ESTILOS DE PÁRRAFOS
<CITE> Cita
<CODE> Código Fuente
<DFN> Definido
<EM> Enfatiza
<KDB> Palabra Clave
<SAMP> Ejemplo
<STRONG> Resalta
<VAR> Variable
COMBINACION DE TAMAÑO Y ESTILO
Toda ventana trabaja bajo el efecto de sólo un par de cerrado de marcas.
<i>
<font size = 5>
<b> Hola, </b> cómo
<font size=6> estas? </Font>
</Font>
</i>
LISTAS IRREGULARES
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
LISTAS ANIDADAS
Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
HIPERENLACES
El lector explora un documento en la web haciendo clic sobre las zonas activas para así hacer aparecer nuevos documentos.
En HTML definimos una zona activa (que puede ser un texto o una imagen) que se asocia al URL (protocolo de direccionamiento de documentos) del documento que sustituirá el documento visualizado cuando se haga clic sobre esa zona. Un ancla, por lo tanto sirve para especificar la partida y la llegada de un enlace de hipertexto ( <A> ).
El atributo HREF, ancla de partida hacia un enlace externo.
Crea un enlace hacia un servidor situado en algún punto de internet, o hacia un documento, por dicho servidor. La marca especifica el atributo HREF cuyo valor precisa el URL del documento a recuperar.
ZONA ACTIVABLE
<A HREF=”URL_de_destino”> zona_activable </A>
El atributo HREF, ancla de partida a un enlace interno crea un enlace a un punto determinado del fichero en ejecución. Para ello hay que colocar un ancla activa (anclas de partida) y un ancla inactiva (ancla de llegada)
ZONA ACTIVABLE CON ATRIBUTOS VISUALES
<A HREF=#Etiqueta> zona_activable_con_atributos_visuales </A>
NAME à Define el ancla de llegada, lugar que se podrá acceder haciendo un clic sobre un ancla de partida.
ZONA ACTIVABLE SIN ATRIBUTOS VISUALES
<A NAME= “Label”> zona_no_activable_sin_atributos_visuales </A>
TABLE à una tabla se define entre las marcas, <TABLE> y </TABLE> esta primera marca regula la presentación general de la tabla mediante 3 atributos:
*BORDER: Define el grosor del marco exterior.
*CELLPADDING: Define el espacio alrededor del texto de una celda.
*CELLSPACING: Define el espacio entre celdas.
*WIDTH: Define la anchura de la tabla relativa a la anchura de la ventana.
MARCA TR
Las marcas que definen una nueva fila son <TR> y </TR> que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila:
VALIGN (alineación vertical) que puede tomar los valores:
*TOP à Coloca el texto en la parte superior de la celda.
*BOTTOM à Coloca el texto en la parte inferior de la celda.
*MIDDLE à Coloca el texto en el centro de la celda.
ALIGN (alineación horizontal) que puede tomar los valores:
*RIGHT à Coloca el texto a la derecha de la celda.
*LEFT à Coloca el texto a la izquierda de la celda.
*CENTER à Coloca el texto en el centro de la celda.
MARCA TD
Es el elemento de inicio de una columna. Puede completarse con los atributos VALIGN y ALIGN que será entonces prioritario sobre los mismos valores definidos en la marca TR.
Dos atributos suplementarios, COLSPAN y ROWSPAN permiten generar celdas cuya superficie es un múltiplo de la celda elemental. La matriz de la tabla que define el número de celdas elementales se calcula por el número de líneas de la tabla 8num. De instrucciones TR), multiplicado por el numero de celdas (núm. De celdas TD) de las líneas que definen mas celdas (mayor numero TD).
El número de celdas por línea de la tabla se calcula sobre la línea que define el mayor número de celdas.
El atributo TD es NOWRAP que impide dividir el texto de la celda en varias líneas.
MARCA <TH>
Funciona de forma similar a TD admitiendo los mismos atributos pero se considera como una marca de titulo de una celda. Automáticamente centra el texto y lo pone en negrita.
<CAPTION>
Permite poner un titulo encima (atributo Align=TOP) o debajo (atributo Align=bottom) de la tabla.
IMAGENES <IMG>
<IMG> permite incluir una imagen. Esta marca irá siempre complementada por el atributo SRC que permite dar la dirección del fichero gráfico que contiene la imagen.
El valor del atributo SRC permite especificar un URL y es por tanto encontrar imágenes definidas como sigue:
<IMG SRC = “http://..../Rosa.gif”>
ALINEACION DE IMAGENES
La marca <IMG> admite el atributo Align que permite situar la imagen en relacion a la línea de texto actual y puede tomar los siguientes valores:
TOP à Para alinear la parte superior de la imagen.
MIDDLE à Para alinear el centro de la imagen.
BOTTOM à Para alinear la base de la imagen.
IMÁGENES EXTERNAS
Este tipo de imágenes no aparecen en la pantalla cuando se carga la página, si no que se crea un enlaces de hipertexto cuyo extremo puede ser una imagen.
<A HREF = “imagen.gif” > hacer click </A>
LAS IMAGENES COMO ANCLAS
Se puede reemplazar la imagen del ancla por una marca que define una imagen. En este caso la imagen tiene un borde de color para indicar que se trata de un enlace hipertexto sobre el que se puede hacer un clic.
<A HREF = “imagen.gif” > <IMG SRC = “info.gif”> </A>
FORMULARIOS
Es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de dialogo con el lector, como un formulario de papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc.
El usuario rellenará zonas en su formulario que se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va a tratar éste recibe el identificador de cada zona y el valor introducido.
Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas junto con servidores, ya que las acciones asociadas son programas (generalmente scripts de CGI). Estos programas deben funcionar en un servidor al que se le proporcionan los datos de un formulario para ser procesados.
DECLARACION DEL FORMULARIOS
La marca <FORM> y </FORM> definen un formulario entres ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por 2 atributos:
METHOD à Está dirigido al programador que codifica el script encargado de dar valor a post o el valor GET que define el modo de transferencia de los datos hacia el script.
ACTION à Que define el URL de un programa script encargado de tratar los datos adquiridos desde el formulario.
<FORM METHOD = tipo_de_metodo ACTION = URL_del_script >
<FORM METHOD= “post” ACTION= “cgi_bin/inscripción >
Todas las marcas que se definirán tienen los siguientes atributos comunes:
NAME à Define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.
VALUE à Definido para un campo de:
*Texto: permite definir el contenido del campo.
*BOTON SUBMINT: indica el texto a escribir en el botón.
*BOTON RADIO y BOTON CHECKBOX: valor asociado al botón cuando está pulsado. Identifica el bloque de botones.
CAMPO DE ENTRADA
La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es el siguiente:
< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >
El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por defecto.
CAMPOS DE SELECCIÓN
La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los ítems se especifiquen mediante la marca <OPTION> .
La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente la lista se interpreta como un menú desplegable (pop-list). En este caso, la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el número de líneas en la ventana. La opción de selección múltiple se deriva de la presencia del atributo MULTIPLE.
*Menú desplegable:
<Form>
<select Name= “sede”>
<option> Entrada indirecta
<option> Entrada lateral
<option SELECTED> Entrada directa
</select>
</form>
*Ventana con barra de desplazamiento:
<Form>
<select MULTIPLE NAME= “lenguaje” SIZE= “3” >
<option SELECTED> Ada
<option> C++
<option> Clipper
<option> Pascal
<option> For tran
<option> Cabol
</select>
</form>
AREA DE TEXTO
La marca <TEXT AREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas), COLS (columnas), delimita el tamaño de esta ventana. Ejemplo:
<form>
<text area name= “comment” rows=5 cols=40>
Introduzca aquí sus comentarios…
</text area>
</form>
