Gía básica HTML

1

ÍNDICE

Elementos del lenguaje HTML 2

Estructura de un documento HTML 3

Head, Title, Meta, Base 3

Separadores de bloques de texto 4

Tipos de letra 6

Colores 8

Hiperenlaces 9

Listas 11

Tablas 14

Formularios 17

Imágenes 22

2

Elementos del lenguaje HTML

A las instrucciones que forman el lenguaje HTML las denominaremos elementos. Se distinguen dos tipos de elementos:

Elementos llenos:

Estos elementos se forman mediante una marca de inicio y otra de final. En HTML las marcas se demilitan con los signos < (inferior a) y > (superior a). La marca de fin es idéntica a la inicial pero con el añadido de la barra inclinada, /, justo antes del nombre de la misma. Un texto marcado tendrá por tanto este aspecto: ...texto normal <marca> texto afectado por la marca </marca> resto del texto...Por ejemplo, para resaltar un texto en negrita, se emplea la marca <B> de la siguiente forma: ...texto normal <B> texto en negrita </B> resto del texto...Si en este ejemplo nos hubiesemos olvidado de la marca de final, el resto de la página estaría también en negrita.

Elementos vacíos:

Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en sí, sino que definen separadores.

Por ejemplo el elemento <HR> que sirve para mostrar una línea horizontal en la pantalla, se escribirá: <HR>

Elementos con argumentos:

Algunos elementos tienen argumentos, los cuales son denominados atributos. Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es alfanumérico: <marca atributo1 atributo2=numerico atributo3="alfanumetrico">

Ejemplos:

<HR NOSHADE><TABLE WIDTH=300> ... </TABLE><A HREF="/home/default.html"> ... </A>

Si se quieren utilizar caracteres como < o > en el texto normal, habrá que acudir a un artificio para que el browser no intente interpretarlos como marca. Estos caracteres así como otros símbolos utilizados en el código HTML se reemplazarán por los siguientes grupos de caracteres:

el caracter < será reemplazado por &amplt; el caracter > será reemplazado por &ampgt;

3

Estructura de un documento HTML

Opcionalmente los documentos escritos en HTML empezarán por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez.

Los documentos escritos en HTML están estructurados en dos partes diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).

Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos:

<TITLE> para dar nombre al documento; <META> para forzar a la página activa a ser cargada cada cierto tiempo. <BASE> para prefijar la dirección base de los documentos referenciados mediante un URL

relativo.

El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser.

HEAD, TITLE, META, BASELa cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Normalmente esta información no se ve cuando se navega por el documento.

Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y </TITLE>. El uso de TITLE es obligatorio ya que además de un carácter informativo tiene otras razones para existir:

Es el texto que el browser almacenará en el fichero hotlist o bookmark. Es lo que se indica en la lista que aparece en la orden Go de la barra de menu. Es lo que aparece en la esquina superior izquierda cuando se imprime el documento. En un contexto Xwindow, cuando se minimiza la ventana, el título será tomado como nombre

por el icono.

A continuación se muestra un ejemplo del formato mínimo de la cabecera. <HTML> <HEAD> <TITLE> Aqui va el nombre del documento </TITLE> </HEAD> Cuerpo del documento ...</HTML>

El título del documento que está usted leyendo ahora mismo se encuentra en la parte superior de esta ventana y es "Estructura de un documento HTML", como usted mismo podrá comprobar.

En la cabecera puede utilizarse también el elemento <META> que puede forzar a que la página activa se cargue cada cierto tiempo (indicado en segundos mediante el atributo CONTENT).

4

<HEAD> <TITLE> Título de la página </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10"></HEAD>Este ejemplo hace que el browser vuelva a cargar la página cada 10 segundos. También puede hacerse a un servidor, así:

<HEAD> <TITLE> Título de la página </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm"></HEAD>Esto ha de ser utilizado con mucha precaución ya que podrá sobrecargar el servidor. Si el contenido de la página no va a cambiar es inútil hacerlo, de hecho, solo tendrá utilidad en casos muy especiales.

El elemento <BASE HREF="URL"> define la información a prefijar a todo URL incompleto en el documento. Por ejemplo, el URL relativo "/html/test.html" corresponderá de hecho a "URL/html/test.html".

BODYEl resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML:

<HTML> <HEAD> <TITLE>Estructura mínima de un documento HTML</TITLE> </HEAD> <BODY> Documento ... </BODY></HTML>

ComentariosEn el código fuente de una página HTM, los comentarios se introducirán entre las marcas: . Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible.

Ejemplo:



Separadores de bloques de texto

Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial como direcciones o citas. Marcas de bloques:

Párrafos. <P>

5

Saltos de línea. <BR> Bloques tabulados. <BLOCKQUOTE> Línea horizontal. <HR> Divisiones. <DIV> Texto preformateado. <PRE> Direcciones. <ADDRESS> Centrado de bloques. <CENTER>

P<P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>.

Ejemplo:

<P> Este texto está contenido dentro del primer párrafo, así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.</P><P> Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.</P>

Normalmente no suele utilizarse la marca de fin de párrafo, </P> ya que el texto continuará hasta que encuentre otro comienzo de párrafo <P>.

Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:

LEFT: Justifica el texto a la izquierda. (por defecto) RIGHT: Justifica el texto a la derecha. CENTER: El texto aparece centrado.

Ejemplo:<P ALIGN=LEFT> Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda. </P><P ALIGN=RIGHT> Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.</P><P ALIGN=CENTER> Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado.

6

</P>Esto dará como resultado:

Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.

Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.

Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado.

Tipos de letra

En este apartado se indica cómo definir cabeceras mediante el elemento <Hn>, y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento <FONT> y sus atributos SIZE y COLOR.

Finalmente se definen los estilos de caracteres disponibles distinguiendo entre los estilos físicos (negrita, cursiva, ...) y los lógicos (variables, citas, ejemplos, ...).

HnEl elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6. Los más grandes tienen valor 1 y los más pequeños valor 6. El texto entre estas marcas se trata en negrita. Se inserta automáticamente un salto de párrafo, como puede comprobar en el siguiente ejemplo:

Ejemplo:

<H1>Cabecera H1</H1> Cabecera H1

<H2>Cabecera H2</H2>Cabecera H2





FONTEl elemento <FONT> permite definir el tamaño, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos:

7

El atributo SIZE: Regula el tamaño de los caracteres (1 - 7).El atributo COLOR: Especifica el color de los caracteres. Para consultar los códigos de los colores que le

interesen puede consultar la tabla de códigos de colores.El atributo FACE: permite definir el tipo de letra: Algerian, Arial, Times New Roman, Courier, MS Serif,

Symbol, System, Times New Roman, Windsort, ... Este atributo es soportado tan solo por algunos browsers. (El Netscape no lo reconoce)

Ejemplos:

Tamaños 1 2 3 4 5 6 7 6 5 4 3 2 1

Colores CO LO RE S . D E . L ET RA S

<FONT SIZE=4 COLOR=#008000> Texto de color verde y tamaño 4.<FONT>Texto de color verde y tamaño 4.

<FONT SIZE=6 COLOR=#FF0000> Texto de color rojo y tamaño 6.<FONT>Texto de color rojo y tamaño 6.

Estilos de CaracteresLos siguientes elementos llenos permitirán definir distintos estilos para el grupo de caracteres que se defina entre sus marcas de inicio y cierre.

Ejemplo:

<i> Texto en cursiva (itálica) </i>Texto en cursiva (itálica)

Estilos físicos

Negrita <b>

Cursiva <i>

Subrayado <u>

Tachado <strike>

ASuperíndice <sup>

BSubíndice <sub>

Parpadeo <blink>

Máquina de escribir (Teletipo)

<tt>

Texto grande <big>

Texto pequeño <small>

8

Negrita y cursiva <b><i> Negrita y cursiva </i></b> Negrita y tachado <b><strike> Negrita y tachado </strike></b> Parpadeo, tachado y tipo código <blink><strike><code> Parpadeo,tachado y tipo código </code></strike></blink>

Colores

Los colores se identifican mediante el nombre del color en inglés o bien mediante un código del tipo #rrggbb donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul.Para buscar el código de algún color determinado puede consultar la tabla de códigos de colores. Ha de tener en cuenta que algunos colores no se verán o se verán mal si la máquina no soporta 256 colores.

Color del texto

En este apartado se indicará cómo cambiar el color de un grupo definido de caracteres en un texto mediante el elemento <FONT>.

Colores del entorno

Aquí se verá cómo cambiar los colores definidos por defecto para el fondo, el texto normal y los enlaces mediante el elemento <BODY>. Este elemento también permite utilizar una imagen como fondo de página.

Color del textoSe puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR.A continuación se muestran algunos ejemplos:

<FONT COLOR="red"> ROJO </FONT> ROJO

<FONT COLOR="blue"> AZUL </FONT> AZUL

<FONT COLOR="navy"> AZUL MARINO </FONT> AZUL MARINO

<FONT COLOR="green"> VERDE </FONT> VERDE

<FONT COLOR="olive"> OLIVA </FONT> OLIVA

<FONT COLOR="yellow"> AMARILLO </FONT> AMARILLO

<FONT COLOR="lime"> LIMA </FONT> LIMA

<FONT COLOR="magenta"> MAGENTA </FONT> MAGENTA

<FONT COLOR="purple"> PURPURA </FONT> PURPURA

9

<FONT COLOR="cyan"> CYAN </FONT> CYAN

<FONT COLOR="brown"> MARRON </FONT> MARRON

<FONT COLOR="black"> NEGRO </FONT> NEGRO

<FONT COLOR="gray"> GRIS </FONT> GRIS

<FONT COLOR="teal"> TEAL </FONT> TEAL

<FONT COLOR="white"> BLANCO </FONT> BLANCO

Como se comentó en la introducción el color se puede indicar tanto mediante su nombre en inglés como por determinados códigos hexadecimales. (Ver tabla de códigos de colores)

En el siguiente ejemplo se muestra una combinación de colores y tamaños de letra:(Para mayor detalle ver <FONT>)

<FONT SIZE=6 COLOR="navy">C</FONT><FONT SIZE=4>apítulo </FONT> <BR><FONT SIZE=5 COLOR="red">E</FONT><FONT SIZE=3>rase una vez un ...</FONT>Resulta:

Capítulo IErase una vez un ...

Hiperenlaces

El siguiente elemento es uno de los más importantes del HTML, ya que es el que realmente permite "navegar" por uno o varios documentos, que pueden residir en cualquier parte, dando, sin embargo, la impresión de que se trata de un solo documento.

Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento <A> y sus atributos: NAME, HREF y TARGET. El lector podrá por tanto explorar el documento picando con el ratón sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen, o bien una porción de imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la dirección URL del documento que sustituirá al visualizado cuando se pulse con el ratón sobre esa zona. (Ver El protocolo de direccionamiento de documentos: URL)

Un puntero puede colocarse en cualquier lugar del texto. Puede ser un elemento de una lista, o texto normal; puede estar enriquecido con atributos de estilo físico, lógico o de párrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automáticamente (color y subrayado), siempre y cuando el usuario no realice una parametrización especial del browser.

La definición por defecto del color de los enlaces de un documento puede ser modificada mediante el elemento <BODY> y los atributos LINK, ALINK y VLINK.

Para especificar la partida y la llegada de un enlace hipertexto se define:

10

Ancla de partida: es la zona activa sobre la que el lector pulsará con el ratón para llamar a una nueva página. Este ancla se define mediante el atributo HREF.

Ancla de llegada: es una zona inactiva que especifica el punto de llegada de un enlace de hipertexto. Esta es pues una dirección. Este ancla se define mediante el atributo NAME.

AEl elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Este elemento nunca se utiliza solo, por tanto siempre vendrá acompañado por, al menos, uno de sus dos atributos principales:

El atributo HREF que define un ancla de partida. El atributo NAME que define un ancla de llegada.

Además permite El atributo TARGET para ordenar la apertura de una nueva ventana del browser con la página indicada por HREF.

A continuación se detallan cada uno de estos atributos.

El atributo NAMEEste atributo define un punto de llegada en el documento destino asignándole un nombre o etiqueta:

<A NAME="etiqueta"> Zona no activable </A>Luego mediante el atributo HREF desde el fichero de partida se indicará el documento y la posición dentro de dicho documento a la que se quiere acceder:

<A HREF="documento#etiqueta"> Zona activable </A>

Hay que tener en cuenta que la etiqueta debe estar compuesta por un texto sin espacios en blanco, caracteres especiales ni caracteres codificados. Dicha etiqueta no deberá estar repetida dentro del mismo documento destino.

El atributo HREFEste atributo define un ancla de partida hacia un enlace externo o interno, o sea, crea un enlace hacia un nuevo documento propuesto por dicho servidor o hacia un punto determinado dentro del documento actual. La sintáxis típica es:

<A HREF="url_de_destino">zona activable con atributos visuales</A>

Ejemplos:

<A HREF="http://ccdis.dis.ulpgc.es/logo.html"> Logotipo del Departamento de Informática y Sistemas de la ULPGC</A>Logotipo del Departamento de Informática y Sistemas de la ULPGC

11

El atributo TARGETEste atributo ordena la apertura de una nueva ventana con el documento indicado por el atributo HREF.

Ejemplo:

<A HREF="indice.htm" TARGET="ventana2"> Nueva ventana</A>Nueva ventana

Si pulsa con el ratón sobre este hiperenlace se visualizará el Indice en una nueva ventana del browser.

Enlaces a puntos internos a un documento (ANCLAJE)Como hemos visto hasta ahora el atributo HREF sirve para enlazar con otro documento que puede estar en un servidor o ser un fichero local. Dicho documento se presentará siempre desde la primera página.

Para acceder a un punto determinado de un documento se debe definir el ancla de llegada en el documento destino mediante el atributo NAME , como se vió anteriormente. Luego se debe indicar la dirección del documento destino y del punto de comienzo, en el documento de partida, mediante el atributo HREF. La sintáxis es:

En el punto adecuado del documento destino:

<A NAME="etiqueta"> </A>En el documento de partida:

<A HREF="destino.htm#etiqueta"> Zona activable </A>De igual manera se puede referenciar un punto determinado dentro del mismo documento activo:

<A HREF="#etiqueta"> Zona activable </A>Todo esto es muy útil cuando se trabaja con documentos grandes llenos de secciones.

Listas

Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

1. Ficheros HTML2. Ficheros de texto3. Ficheros de imágenes

1. Ficheros de sonido1.1 Ficheros WAV

2. Ficheros de imágenes2.1 Ficheros GIF2.2 Ficheros BMP

12

HTML define varios tipos de listas: Listas sin orden, sin numeración: <UL> , <LI> Listas ordenadas, con numeración: <OL> , <LI> Listas de directorio, similares a las listas sin orden: <DIR> , <LI> Listas de menú , similares a las listas sin orden: <MENU> , <LI> Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>

Cualquiera de los tipos de listas nombrados puede ser anidado. En el caso de las listas ordenadas no se consique una numeración escalonada al anidar una lista dentro de otra, como se vió en el ejemplo anterior. Las listas sin orden cambian el símbolo de comienzo al anidarse unas dentro de otras.

LILa marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares. La sintáxis general de estas listas será:

<marca de comienzo> <li> Primer elemento de la lista <li> Segundo elemento de la lista <li> ...<marca de cierre>

ULLa marca <UL> permite generar listas no ordenadas, cada uno de los elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.

Ejemplo de lista no ordenada

Fichero HTML Fichero de imagen Fichero de sonido Fichero de vídeo Fichero de ejemplo

<H3>Ejemplo de lista no ordenada</H3><UL> <LI>Fichero HTML</LI> <LI>Fichero de imagen</LI> <LI>Fichero de sonido</LI> <LI>Fichero de vídeo</LI> <LI>Fichero de ejemplo</LI></UL>

OLLa marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista.

Ejemplo:

Ejemplo de lista ordenada

1. Fichero HTML 2. Fichero de imagen 3. Fichero de sonido

<H3>Ejemplo de lista ordenada</H3><OL> <LI>Fichero HTML</LI> <LI>Fichero de imagen</LI> <LI>Fichero de sonido</LI>

13

4. Fichero de vídeo 5. Fichero de ejemplo

<LI>Fichero de vídeo</LI> <LI>Fichero de ejemplo</LI></OL>

Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores:

TYPE=1

(por defecto) para números,

TYPE=A

para letras mayúsculas,

TYPE=a

para letras minúsculas,

TYPE=I

para numeración romana en mayúsculas,

TYPE=i

para numeración romana en minúsculas.

Por ejemplo, esto es una lista ordenada con letras mayúsculas:

A. Primera línea B. Segunda línea C. Tercera línea D. Cuarta línea

<OL TYPE=A> <LI>Primera línea <LI>Segunda línea <LI>Tercera línea <LI>Cuarta línea</OL>

En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

E. Primera línea F. Segunda línea G. Tercera línea H. Cuarta línea

<OL TYPE=A START=5> <LI>Primera línea <LI>Segunda línea <LI>Tercera línea <LI>Cuarta línea</OL>

El número que se pone en el atributo START indica en que número o letra comenzará la lista. La E es la quinta letra.

14

Tablas

La estructura de una tabla se define mediante:

una marca de inicio de la tabla (TABLE), una marca de comienzo de una nueva línea (TR) y una marca de comienzo de una celda (TD).

Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente. Esta estructura es bastante simple y muy fácilmente modificable.

Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).

Una celda puede contener algunos de los siguientes elementos:

texto listas otras tablas imágenes enlaces de hipertexto elementos de formulario

La representación de una tabla es actualmente muy dependiente del browser utilizado.

TABLELa marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>.

Se puede indicar alguno de los siguintes atributos:

BORDER: define el grosor del marco exterior (puede ser cero).CELLPADDING: define el espacio alrededor del texto de una celda.CELLSPACING: define el espacio entre celdas.

El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto.

El valor por defecto del atributo BORDER es cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no.

Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamaño fijo en unidades, mediante los atributos:

WIDTH: define el ancho de la tabla, bien en % o en unidades.HEIGTH: define el alto de la tabla, bien en % o en unidades.

15

Ejemplos:

celda 1 celda 2

celda 3 celda 4

<TABLE><TR><TD>celda 1</TD><TD>celda 2</TD></TR><TR><TD>celda 3</TD><TD>celda 4</TD></TR></TABLE>

celda 1 celda 2

celda 3 celda 4

<TABLE BORDER><TR><TD>celda 1</TD><TD>celda 2</TD></TR><TR><TD>celda 3</TD><TD>celda 4</TD></TR></TABLE>

celda 1 celda 2

celda 3 celda 4

<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8><TR><TD>celda 1</TD><TD>celda 2</TD></TR><TR><TD>celda 3</TD><TD>celda 4</TD></TR></TABLE>

Definiendo el ancho y alto de la tabla en %

Ancho (WIDTH) 50%

Alto (HEIGHT) 30%

<TABLE BORDER WIDTH=50% HEIGHT=30%><CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION><TR ALIGN="center"><TH>Ancho (<I>WIDTH</I>)</TH><TD>50%</TD><TR ALIGN="center"><TH>Alto (<I>HEIGHT</I>)</TH><TD>30%</TD></TABLE>

Definiendo el ancho y alto de la tabla en unidades.

Ancho (WIDTH) 300

Alto (HEIGHT) 80

<TABLE BORDER WIDTH=300 HEIGHT=80><CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION><TR ALIGN="center"><TH>Ancho (<I>WIDTH</I>)</TH><TD>300</TD><TR ALIGN="center"><TH>Alto (<I>HEIGHT</I>)</TH>

16

<TD>80</TD></TABLE>

TRLa marca <TR> inicia una línea de la tabla que terminará con </TR>. Admite los atributos:

VALIGN: permite una alineación del texto en el sentido vertical de la celda.Admite los valores: TOP, BOTTOM, MIDDLE

ALIGN: permite una alineación del texto en el sentido horizontal de la celda.Admite los valores: RIGHT, CENTER, LEFT

Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD> contradice esta alineación.

TDLa marca <TD> delimita el inicio de una celda. Admite los atributos:

VALIGN: permite una alineación del texto en el sentido vertical de la celda.Admite los valores: TOP, BOTTOM, MIDDLE

ALIGN: permite una alineación del texto en el sentido horizontal de la celda.Admite los valores: RIGHT, CENTER, LEFT

COLSPAN: define una celda con una anchura múltiplo de la columna básica.ROWSPAN: define una celda con una anchura múltiplo de la fila básica.NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola línea.

En las tablas el ajuste es automático, la anchura de una celda depende del texto más largo inscrito en una de las celdas de la columna. De modo predeterminado, si la línea es demasiado larga, el browser la cortará en varias líneas, no ser que esté presente el atributo NOWRAP.

Titulo Superior (por defecto)

Atributos de alineación, Align y VAlign

AlineaciónVertical

TopMiddle

Bottom

AlineaciónHorizontal

Left Center Right

<CENTER><TABLE BORDER><CAPTION>Titulo Superior (por defecto)</CAPTION><TR> <TD></TD> <TH COLSPAN=3>Atributos de alineación, Align y VAlign</TH><TR> <TH>Alineación<BR>Vertical</TH>

17

<TD VALIGN=top>Top</TD> <TD VALIGN=middle>Middle</TD> <TD VALIGN=bottom>Bottom</TD><TR> <TH>Alineación<BR>Horizontal</TH> <TD ALIGN=left>Left</TD> <TD ALIGN=center>Center</TD> <TD ALIGN=right>Right</TD></TABLE></CENTER>

Formularios

Los formularios generan en la pantalla cuadros de diálogo con el lector permitiendo así la interacción con el usuario para consultas de bases de datos, solicitudes de documentación, ...

Como en un formulario en 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á estas zonas en su formulario las cuales 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. A dichos programas se les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este efecto: el CGI o Common Gateway Interface.

Para la creación de formularios se utilizarán las siguientes marcas, que permiten generar una interfaz de edición, sin hacer referencia aún a la programación de scripts de CGI:

la marca FORM que delimita el comienzo y fin de la definición del formulario. la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos

tipos de botones; la marca SELECT que permite crear listas: menús despegables y listas con barras de

desplazamiento; la marca TEXTAREA que genera una zona de edición de texto libre.

Atributos comunesLos siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

El atributo VALUE puede ser definido para un campo de:

Texto: permite definir el contenido del campo.Botón SUBMIT: indica el texto a escribir en el botón.

18

Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste está pulsado. El valor especificado por NAME identifica el bloque de botones.

FORMLa marca <FORM> y </FORM> definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.

El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del 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/inscripcion">

INPUT

La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

Permite varios atributos además de los ya comentados de modo general:

El atributo SIZE define la longitud de la ventana de texto. El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la

ventana.

Ejemplo:

Definir una zona de entrada de texto simple de longitud 10 y longitud máxima de la cadena 15.

<input name="identidad" size=10 maxlength=15>

Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa.

El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

19

TEXT: es la opción seleccionada por defecto. Define una zona de entrada de texto simple. El texto definido en VALUE aparecerá en dicha zona, para poder ser completado o modificado por el usuario.

Champiñon <form><input type="text" value="Champiñones"></form>

SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:

Salida<form><input type="submit" value="Salida"></form>

RESET: permite borrar los datos ya entrados:

Borrar<form><input type="reset" value="Borrar"></form>

PASSWORD: permite entrar una palabra clave de forma confidencial:

<form><input type="password" name "pwd"></form>

CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:

Macintosh

PC

<form><input type="checkbox" name="micro" value="mac">Macintosh<input type="checkbox" name="micro" value="pc">PC</form>

RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones

CD-ROM

Disquete

<form><input type="radio" name="media" value="cd" checked>CD-ROM<input type="radio" name="media" value="dk">Disquete</form>

20

HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.

<input type="hidden" name=nombre_de_variable value=valor_de_la_variable>

IMAGE: hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formato envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n y .y=m donde n y m son los números de las coordenadas x,y del punto en el que estaba el ratón en el momento del envío. Para representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:

<form method="post" action="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi"><input type=image name="imagen" src="sugeren.gif"></form>

Una posible respuesta podría ser:

imagen.x=7 & imagen.y=38

Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

SELECTLa marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican 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 menu desplegable (pop-list). En caso contrario 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 visibles en la ventana. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.

Ejemplos:

Menú despegable:

Entrada directa

<form><select NAME="sede"><option>Entrada indirecta<option>Entrada lateral<option SELECTED>Entrada directa</select></form>

Ventana con barra de desplazamiento: ( con opción de selección múltiple )

21

AdaC++Cliper

<form><select MULTIPLE NAME="lenguaje" SIZE="3"><option SELECTED>Ada<option>C++<option>Cliper<option>Pascal<option>Fortran<option>Cobol</select></form>

La longitud de la ventana de selección se autoajusta al valor más largo de la lista. Se debe de procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben contruir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parámetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

Ejemplo:

A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.

Pista 1Pista 2Pista 3

<form><select name="lista" size=3><option> Pista 1<option> Pista 2<option> Pista 3<option value="Pista 4"> Pista 4 (para novatos)<option> Pista 5<option> Pista 6</select></form>

TextareaLa marca <TEXTAREA> 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) y COLS (columnas) delimita el tamaño de esta ventana.

Es posible predefinir un texto (entre las marcas <TEXTAREA> y </TEXTAREA>) que el usuario podrá reemplazar o completar con su propio texto.

22

Ejemplo:

<form><textarea name="comment" rows=5 cols=40>Introduzca aquí sus comentarios</textarea></form>

Estas líneas de código muestran la siguiente ventana:

Introduzca aquí sus comentarios

Imágenes

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráfico utilizado se pueden conseguir efectos realmente sorprendentes.

IMGEste elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen:

<IMG SRC="dirección_URL_del_fichero_gráfico">

Ejemplos:

Imagen situada en un fichero local:

<IMG SRC="images/wmelon.gif">

Imagen residente en un servidor:

<IMG SRC="http://www.iconbazaar.com/misc/apple.gif">

Esta última opción de insertar una imagen de un servidor exterior en un texto no es muy recomendable ya que ralentiza mucho la carga de la página y además no se asegura que la imagen pueda ser siempre accedida. Realmente el resultado del ejemplo sería ver directamente la imagen, no un enlace a ésta,

23

pero como se ha dicho anteriormente esto puede dar problemas al cargar la página. Esta opción, por tanto, se utiliza sólo en casos excepcionales de imágenes que son actualizadas periódicamente (p.e: un mapa metereológico).

Si el fichero indicado no es encontrado el browser mostrará un símbolo en lugar de la imagen, indicando el error. Por ejemplo:

<IMG SRC="directorio/imagen.gif">En los documentos HTML se suelen insertar diversos iconos con significados implícitos, como es el caso de "página en construcción":

Este elemento permite además los siguientes atributos:

ALT: Define un texto alternativo que sustituirá a la imagen en caso de que el browser no sea capaz de tratar imagenes. Esto es importante sobretodo cuando la imagen soporta un enlace. Por ejemplo:

<IMG SRC="images/toucan.gif" ALT="Imagen de un TUCAN">

ALIGN: Situa la imagen en la posición que se le indique respecto a la línea de texto en la que está. Este atributo se explica con mayor detalle en el apartado que viene a continuación.

El atributo ALIGNAlinea la imagen, según la posición que se le indique, respecto a la línea de texto en la que está. Puede tomar los siguientes valores:

TOP: alinea la parte superior de la imagen con la línea actual. MIDDLE: alinea el centro de la imagen con la línea actual. BOTTOM: alinea la base de la imagen con la línea actual.

Ejemplos:<IMG SRC="images/flor.gif" ALIGN="top">

WIDTH: Redefine el ancho de la imagen.

HEIGHT: Redefine el alto de la imagen.

BORDER: Dibuja un marco alrededor de la imagen.

VSPACE: Define el margen vertical a dejar entre la imagen y el texto.

24

HSPACE: Define el margen horizontal a dejar entre la imagen y el texto.

Imágenes como fondo de páginaMediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página. El valor que deberá tomar dicho atributo es la dirección donde se encuentra el fichero que contiene la imagen. La sintaxis será:

<BODY BACKGROUND="direccion_del_fichero_grafico">Ejemplo:

<BODY BACKGROUND="images/blanco51.gif">Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.

Símbolos

¿Por qué hay que usar códigos?Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a la máquina.

Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene su teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si se escriben directamente desde el teclado.

Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si se está ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.

Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá:

Ñ o bien ÑEsto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto, los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. Desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.

A continuación se muestra una tabla con todos los caracteres, también están las letras, pero éstas sólo le serán útiles en caso de necesitar escribir textos un tanto raros.

Como puede comprobar, la tabla tiene una columna con el carácter deseado seguida de su código numérico, una descripción del carácter y después un nombre corto (una especie de alias) que para los

25

más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico.

Tabla de símbolos

Caracter Código Descripción Alias

< < Menor <

> > Mayor >

Espacio sin separación

¡ ¡ Abrir exclamación ¡

© © Copyright ©

° ° Grados °

± ± Más-menos ±

º º Género masculino º

¿ ¿ Abrir interrogación ¿

Á Á A mayúscula, acento agudo Á

É É E mayúscula, acento agudo É

Í Í I mayúscula, acento agudo Í

Ñ Ñ Eñe mayúscula Ñ

Ó Ó O mayúscula, acento agudo Ó

Ú Ú U mayúscula, acento agudo Ú

Ü Ü U mayúscula, diéresis Ü

á á a minúscula, acento agudo á

é é e minúscula, acento agudo é

í í i minúscula, acento agudo í

ñ ñ eñe minúscula ñ

ó ó o minúscula, acento agudo ó

ú ú u minúscula, acento agudo ú

ü ü u minúscula, diéresis ü

Gía básica HTML

Documents

Transcript of Gía básica HTML