Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Directivas
Las directiva (tags) en HTML proporcionan información adicional al cliente que visualiza
el documento. Un documento sin ninguna directiva no resaltará ninguna parte del texto.
Las directivas en HTML son códigos especiales que estan contenidos en un documento. Se
usan caracteres especiales para delimitarlas. La directiva para iniciar el enfatizado de texto
se muestra a continuación:
<EM>
Las directivas, por lo general, se agrupan por pares: uno inicia la acción, mientras su par la
finaliza. La directiva para finalizar el enfatizado es:
</EM>
Como se puede ver, el par de final de acción es el mismo que el de inicio incluyendo el
caracter /
HTML no es sensible a mayúsculas; esto es, la directiva puede escribirse como <em> y
</em>, o como <Em> y </eM>.
Los caracteres < y > son códigos reservados. Si se quieren mostrar dichos caracteres dentro
del texto, se debe utilizar el concepto de entidades que se verá en el siguiente punto.
2. Entidades
Las entidades proporcionan un método para incluir caracteres especiales o reservados
dentro de un documento:
á á a agudo
Á Á A agudo
â â a circunflejo
  A circunflejo
à à a grave
À À A grave
å å a
Å Å A
ñ ñ n tilde
Ñ Ñ N tilde
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
4.1. Título
...
<HEAD>
<TITLE>Introduccion a HTML</TITLE>
<HEAD>
...
4.2. Cabeceras
...
<H1>Cabecera de nivel 1</H1> Más general
<H2>Cabecera de nivel 2</H2> .
<H3>Cabecera de nivel 3</H3> .
... .
<H6>Cabecera de nivel 6</H6> Más especifico
Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3
Cabecera de nivel 6
4.3. Párrafos
La mayor parte del texto que se escribe forma parte de un párrafo de texto.
Para establecer una separación de párrafos, las dos porciones de texto que pertenecen a
párrafos diferentes deben formar parte de distintas secciones dentro de un documento
HTML. La simple escritura de un retorno de carro no es suficiente (uno o más retornos de
carro son tratados como un simple espacio en blanco).
Para crear un párrafo, basta con escribir el texto que lo forma dentro de la directiva
<P>...</P>:
...
<P>Este es mi primer párrafo.
aunque escriba este texto en otra linea,
seguirá perteneciendo al mismo párrafo.</P>
<P>Este es mi segundo párrafo. Mira
como se ha creado una separación entre párrafos.</P>
El usuario verá:
Este es mi primer párrafo. aunque escriba este texto en otra linea, seguirá perteneciendo al
mismo párrafo.
Este es mi segundo párrafo. Mira como se ha creado una separación entre párrafos.
...
<P>Yo realmente veré la siguiente linea<BR>
en otra linea.</P>
El usuario verá:
De la misma forma, para que un texto parpadee se utiliza la directiva <BLINK> ...
</BLINK>
5. Texto enfatizado
Dentro de un documento HTML se puede indicar que un texto tenga un estilo o tipografía
especial. Hay 2 tipos de estilos: lógicos y físicos.Con estilos lógicos se formatea el texto de
acuerdo con su significado, mientras que las de estilo físico indican la apariencia específica.
Por ejemplo, en la anterior frase las palabras ``estilos lógicos'' fue marcado como una
``definición.'' El mismo efecto (enfatizar esas palabras con italics), podría haber sido
alcanzado uti lizando otra directiva que indica "pon esas palabras en italics".
6.1. Direcciones
C/ Miguel Iscar, 10
6.2. Citas
Cuando se referencia el nombre o título de un trabajo, se debe dejar bien claro que es una
cita.
6.3 Ejemplos
La directiva <SAMP> es usada para mostrar el texto que se visualizará, mientras que
<KBD> mostrará el texto que el usuario debe introducir. Un breve ejemplo (usando el
formato del comando Unix man) podría ser:
7. Texto preformateado
A menudo se hace necesario que algún texto aparezca exactamente como lo escribimos:
La directiva <PRE> es usada para englobar todo aquel texto que se quiere formatear
exactamente.
<PRE>Este es un ejemplo de texto preformateado. Como puede ver, se
controla donde empiezan
las nuevas lineas
y el texto
El lector verá:
8. Texto citado
En alguna ocasión es necesario copiar un pasage de texto. Por ejemplo:
William Shakespeare
El lector verá:
• No se puede garantizar que el ancho de una imagen sea el correcto. Las divisiones
horizontales dependen del ancho de la ventana del visualiazor.
• No se puude garantizar que el usuario vea la imagen. Las divisiones horizontales
suelen funcionar tanto en visualizadores en formato texto como gráfico.
• Una página con texto e imagen puede no formatearse correctamente.
10. Listas
Una lista para HTML no es más que un agrupamiento o enumeración de elementos de
información. HTML soporta tres tipos de listas:
1. Listas marcadas
2. Listas enumeradas
3. Listas de definiciones
Las listas marcadas sirven para mostrar información agrupada y sin ningún orden
particular:
Para hacer una lista, se debe utilizar la directiva <UL>...</UL>; mientras que, para cada
elemento de la lista debe utilizarse la directiva <LI>...</LI>:
<UL>
<LI>Sr. Chema Pamundi</LI>
<LI>Sr. German Tequilla</LI>
<LI>Sr. Carmelo Coton</LI>
<LI>Sra. Carmen Tirosa</LI>
</UL>
Para hacer una lista enumerada, se deberá especificar con la directiva <OL>...</OL>. Cada
elemento de la lista estará contenida entre <LI>...</LI>:
<OL>
<LI>Está conectado a la corriente?</LI>
<LI>Está el interruptor a ON?</LI>
<LI>Está la pantalla encendida?</LI>
<LI>Está la linea de alimentación caida?</LI>
</OL>
Las listas de de definiciones se usan para formatear un conjunto de palabras con sus
correspondientes descripciones.
<B>
Negrita (bold).
<I>
Cursiva (italic).
Para formatear una lista de descripciones se usarán las directivas <DL>...</DL>. Cada
elemento debe especificarse entre <DT>...</DT>. Cada definición debe especificarse entre
<DD>...</DD>.
<DL>
<DT><B></DT>
<DD>Negrita (bold).</DD>
<DT><I></DT>
<DD>Cursiva (italic).</DD>
</DL>
Listas anidadas
Dentro de un elemento de una lista se puede especificar otra lista.
El usuario verá:
Texto de enlace
11.2. Creando enlaces
Un atributo es un código que está ubicado dentro de una directiva de apertura. Para
especificar un enlace, es necesario utilizar el atributo HREF.
El atributo HREF (hypertext reference) es un enlace a otro objeto. Puede ser desde un
enlace a otra parte del documento (referencias locales) hasta un enlace a un documento en
otra máquina diferente.
El usuario verá:
Texto de enlace. Indice
Los enlaces absolutos son aquellos que contienen la dirección completa de un documento.
Si el documento reside en otra máquina, o si se necesita utilizar otro protocolo (ej. wais,
ftp), se deberá utilizar un enlace absoluto.
Enlaces absolutos
Para crear un enlace absoluto, basta con especificar la dirección en el atributo HREF de la
directiva anchor:
<A HREF="http://www.w3.org/">World Wide Web</A>
El lector verá:
World Wide Web
Enlaces relativos
Para crear un enlace relativo, basta con especificar la dirección relativa en el atributo HREF
de la directiva anchor:
<A HREF="introHTML">Página inicial</A>
El usuario verá:
Página inicial
Si el documento está en la misma máquina se puede especificar el camino entero del
documento. Por ejemplo:
<A HREF="/AdminRed/busqueda.html">Búsqueda en Internet </A>
Las referencias locales (named anchors) son usadas como un destino opcional de un enlace.
Permiten poner nombre a un punto particular dentro del mismo documento.
Para crear una referencia local se usará el atributo NAME de la directiva anchor.
Para crear una referencia local llamada ejemplo se hará de la siguiente forma:
<A NAME="ejemplo">ejemplo</A>
El usuario verá:
ejemplo
Como se puede apreciar, la referencia local es, probablemente, la misma que el resto del
texto. Recordar que puede ser el destino de un enlace.
Para enlazar a una referencia local, simplemente se añade la referencia local a la dirección:
#ejemplo
El usuario verá:
Párrafos
Lo arriba indicado se leería como `la referencia local parrafos en el documento docuini'.
12. Imágenes
1. Imágenes inline
2. Alineado de texto e imagen
Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el
JPEG lo es por bastantes. Ante esta situación, ¿Cual de los dos debemos utilizar?
El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que,
por ello, no alcanza unas altas cotas de reducción. Este formato trabaja con un máximo de
256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering
(aproximación del color por los vecinos más próximos).
Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes
pequeñas y JPEG para imágenes grandes o de calidad.
Para insertar una imagen en un documento HTML se utilizará la directiva simple <IMG>
<IMG src="/icons/network.gif">
El usuario lo verá:
TOP
El texto coincide con la parte superior de la imagen.
MIDDLE
El texto aparece centrado en la imagen.
BOTTOM
El texto coincide con la parte inferior de la imagen.
El usuario verá:
Alineado TOP
Alineado MIDDLE
Alineado BOTTOM
Con los valores mostrados, la alineación se restringe a una linea de texto, pues si se rebasa,
la linea siguiente aparecerá debajo de la imagen. Para solucionarlo, se introducen dos
nuevos valores como son LEFT (izquierda) y RIGHT (derecha).
La imagen anterior se ha especificado con <IMG src="/icons/network.gif" align=RIGHT>
13. Tablas
Al igual que las listas, las tablas son componentes dedicados a mejorar la visualización de
datos tabulados:
1. Tablas Básicas
2. Títulos y bordes
3. Tablas con celdas multicolumna
4. Tablas con celdas multifila
Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues
la fila 2, etc. La directiva que se utiliza para delimitar una tabla es <TABLE>...</TABLE>.
Cada fila se especifica con la directiva <TR>...</TR> y, dentro de ella, cada celda se
especifica con la directiva <TD>...</TD>
<TABLE>
<TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR>
<TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR>
<TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR>
<TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD>
</TABLE>
El usuario verá:
Las directivas TR, TD y TH (ver más adelante) admiten dos atributos de centrado:
VALIGN para el centrado vertical y ALIGN para el horizontal; donde los valores que
pueden tomar son, TOP (superior), BOTTOM (inferior), MIDDLE (centrado vertical),
RIGHT (derecha), LEFT (izquierda) y CENTER (centrado horizontal).
El usuario verá:
Ejemplo de tabla
Primera columna Segunda columna Tercera columna
100,3 1,8 313,1
22,7 200,8 23,1
8100,3 1300,5 4100,1
2,6 81,8 8,1
En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello
utilizaremos el atributo colspan de la directiva <TH> o <TD>:
<TABLE border>
<CAPTION> Ejemplo de tabla con celdas multicolumna</CAPTION>
<TR><TH colspan=2>Dos columnas</TH></TR>
<TR><TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera
columna</TH></TR>
<TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR>
<TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR>
<TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR>
<TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD>
</TABLE>
El usuario verá:
Como vemos en el ejemplo anterior, cada una de las celdas ocupa únicamente una fila, si
deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la
directiva <TH> o <TD>.
<TABLE border>
<CAPTION> Ejemplo de tabla con celdas multifila</CAPTION>
<TR><TH colspan=2>Dos columnas</TH>
<TH rowspan=2>Tercera columna</TH></TR>
<TR><TH>Primera columna</TH><TH>Segunda columna</TH></TR>
<TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR>
<TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR>
<TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR>
<TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD>
</TABLE>
El usuario verá:
<TABLE border>
<CAPTION>Ejemplo combinado</CAPTION>
<TR><TH rowspan=2></TH><TH colspan=2>Valores</TH><TH
rowspan=2>Precio</TH></TR>
<TR><TH>Peso</TH><TH>Potencia</TH></TR>
<TR ALIGN=CENTER><TH>Modelo
1</TH><TD>890</TD><TD>70</TD><TD>995</TD></TR>
<TR ALIGN=CENTER><TH>Modelo
2</TH><TD>1200</TD><TD>110</TD><TD>2245</TD>
</TABLE>
El usuario verá:
Ejemplo combinado
Valores
Precio
Peso Potencia
Modelo 1 890 70 995
Modelo 2 1200 110 2245
Ejemplo:
<BODY BACKGROUND=/imagen/fondo-etsii.gif>
15. Formularios
1. La directiva FORM
2. La directiva INPUT
3. La directiva SELECT
4. La directiva TEXTAREA
El principio del formulario es bien sencillo: el usuario rellena una serie de campos y los
envia a un programa de tratamiento, denominado genéricamente CGI (Common Gateway
Interface). Los campos pueden ser de diversa naturaleza, como campos de edición, menús
desplegables, listas de opciones, texto, etc.
Para iniciar un formulario en HTML se utilizará la directiva <FORM> ... </FORM>.
Dentro de ella especificaremos todos los campos que intervienen en el formulario:
Con esta directiva especificaremos el tratamiento que se realizará con los campos
introducidos por el usuario. Para ello existen dos atributos:
El atributo METHOD
Se especifica la forma de pasar los valores de los campos al programa de
tratamiento. Admite los valores GET y POST.
El atributo ACTION
Indicaremos el nombre del programa de tratamiento.
Ej. <FORM METHOD=post ACTION="cgi-bin/respuesta"> ... </FORM>
El atributo TYPE
Indicaremos el tipo o clase de campo. Los valores que puede tomar son:
Texto no específico
Cuando a la directiva INPUT no le asociamos ningún tipo, estamos indicando una
entrada de texto simple con desplazamineto horizontal. Podemos especificar el
tamaño de visualización en número de caracteres; para ello utilizaremos el atributo
SIZE .
SUBMIT
Es el botón que realiza el envio de la información al programa de tratamiento.
Ejemplo:
Todo este capítulo es un formulario, si hacemos click en enviar, ejecutará un
programa de tratamiento que mostrará los valores de todos los campos de este
formulario.
<FORM> <INPUT TYPE=submit VALUE="enviar"> </FORM> Se visualizará:
enviar
RESET
Botón de borrado de todos los datos introducidos en el formulario. Ejemplo:
<FORM> <INPUT TYPE=reset VALUE="borrar"> </FORM> Se visualizará:
borrar
CHECKBOX
Es un campo multivalor ya que permite asignar uno o varios valores a una misma
variable. Ejemplo:
<FORM>
<INPUT TYPE=checkbox NAME="so" VALUE="msdos">MS-DOS<br>
<INPUT TYPE=checkbox NAME="so" VALUE="os2">OS/2<br>
<INPUT TYPE=checkbox NAME="so" VALUE="unix">UNIX<br>
</FORM>
Se visualizará:
MS-DOS
OS/2
Unix
RADIO
Es un campo multivalor excluyente, permite escoger una y sólo una opción de un
conjunto de valores. Ejemplo:
<FORM>
<input type=radio name="sexo" value="hombre">Hombre
<input type=radio name="sexo" value="mujer">Mujer
</FORM>
PASSWORD
Es una zona de texto donde los caracteres se reemplazan por asteriscos.Ejemplo:
<FORM>
<input type=password name="passwd">
</FORM>
Se visualizará:
HIDDEN
Permite ocultar al usuario un campo en el formulario dando un valor a la variable
asociada.
15.3. La directiva SELECT
Menús desplegables
Es un botón que muestra la opción seleccionada. Si se hace click sobre el botón se
desplegará la lista de opciones. Como atributo de la directiva OPTION se puede
especificar SELECTED, de esta forma especificaremos la opción seleccionada por
defecto. Ejemplo:
<FORM>
<SELECT name="pueblo">
<OPTION>Berrueces
<OPTION SELECTED>Ceinos de Campos
<OPTION>Laguna de Duero
<OPTION>Villalón
</SELECT>
</FORM>
Se visualizará:
Se visualizará:
15.4. La directiva TEXTAREA
Permite crear una zona de texto especificando el número de filas (atributo ROWS)
y de columnas (atributo COLS) de la ventana. Si se desea especificar un texto, se
hará entre la directiva de apertura y la de cierre. Ejemplo:
<FORM>
<TEXTAREA NAME="opinion" ROWS=5 COLS=60>
Introduzca la opinión de esta introducción a HTML:
</TEXTAREA>
</FORM>
Se visualizará:
Introduzca la opinión de esta introducción a HTML:
Una vez el cliente a formado la cadena URL, la envía al servidor según el valor
especificado para el atributo METHOD:
GET
Cuando se utiliza el método GET, la cadena URL de datos del formulario se adosa al
nombre del CGI. La separación entre el nombre del CGI y los datos de entrada se realizará
con el caracter ?. Así pués, se formará una cadena URL del siguiente aspecto:
nombre_cgi?campo1=valor1&campo2=valor2& ...
18. Mapas
En HTML se pueden tener imágenes, asociando un URL a una cierta parte de la misma:
imágenes mapeadas o mapas.
Para confeccionar un mapa es necesario crear la imagen al tamaño de visualización y
delimitir cada una de las diferentes zonas deseadas. Para delimitar una zona se realizará en
forma de círculo, rectángulo o polígono. Las coordenadas que forman cualquiera de las
formas mencionadas vendrán expresadas en pixels de imagen: la parte superior izquierda de
la imagen corresponde con el origen de coordenadas, mientras que la parte inferior-derecha
corresponde con la coordenada más alta de la imagen.
<MAP NAME="nombre">
...
</MAP>
En medio especificaremos cada una de las zonas de la imagen. Para lo cual se utilizará una
directiva AREA para cada zona. Los atributos a especificar en la directiva AREA son:
SHAPE
Es la forma de la zona. Los valores que admite son: RECT, POLYGON, CIRCLE
o DEFAULT para el resto de la imagen que no haya sido incluida dentro de una
zona.
COORDS
Indicaremos las coordenadas de la zona; dependiendo de la forma:
RECT
Las coordenadas de los vértices superior-izquierda e inferior-derecha
("X0,Y0,X1,Y1").
POLYGON
Las coordenadas de cada uno de los vértices del polígono
("X0,Y0,X1,Y1,X2,Y2,...,Xn,Yn").
CIRCLE
La coordenada del centro del círculo y su radio ("X,Y,r").
HREF o NOHREF
Indicaremos el URL (HREF) o nada (NOHREF).
Ejemplo
Hemos construido una imagen con tres zonas:
Se visualizará: