ALEJANDRO CAURA GUIAHTML.pdf

1NDICE

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

Imgenes 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 idntica a la inicial pero con el aadido de la barra inclinada, /, justo antes del nombre de la misma. Un texto marcado tendr por tanto este aspecto: ...texto normal texto afectado por la marca resto del texto...Por ejemplo, para resaltar un texto en negrita, se emplea la marca de la siguiente forma: ...texto normal texto en negrita resto del texto...Si en este ejemplo nos hubiesemos olvidado de la marca de final, el resto de la pgina estara tambin en negrita.

Elementos vacos:

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 que sirve para mostrar una lnea horizontal en la pantalla, se escribir:

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 alfanumrico:

Ejemplos:

... ...

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 smbolos utilizados en el cdigo HTML se reemplazarn 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 empezarn por la marca y finalizarn con la marca . Esta marca tan solo sirve como identificacin del contenido del fichero para ciertos programas que realizan cambios masivos en muchas pginas a la vez.

Los documentos escritos en HTML estn estructurados en dos partes diferenciadas: la cabecera () y el cuerpo ().

Entre las marcas del elemento se podrn utilizar los siguientes elementos:

para dar nombre al documento; para forzar a la pgina activa a ser cargada cada cierto tiempo. para prefijar la direccin base de los documentos referenciados mediante un URL

relativo.

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

HEAD, TITLE, META, BASELa cabecera se emplea para facilitar informacin acerca del documento y est delimitada por prlogo . Normalmente esta informacin no se ve cuando se navega por el documento.

Dentro de la cabecera se podr definir una breve descripcin que identifica el documento mediante las marcas y . El uso de TITLE es obligatorio ya que adems de un carcter 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 ttulo ser tomado como nombre

por el icono.

A continuacin se muestra un ejemplo del formato mnimo de la cabecera.

Aqui va el nombre del documento Cuerpo del documento ...

El ttulo 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 tambin el elemento que puede forzar a que la pgina activa se cargue cada cierto tiempo (indicado en segundos mediante el atributo CONTENT).

4

Ttulo de la pgina

Este ejemplo hace que el browser vuelva a cargar la pgina cada 10 segundos. Tambin puede hacerse a un servidor, as:

Ttulo de la pgina

Esto ha de ser utilizado con mucha precaucin ya que podr sobrecargar el servidor. Si el contenido de la pgina no va a cambiar es intil hacerlo, de hecho, solo tendr utilidad en casos muy especiales.

El elemento define la informacin 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 y . Esta es la estructura mnima que debe poseer todo documento HTML:

Estructura mnima de un documento HTML Documento ...

ComentariosEn el cdigo fuente de una pgina HTM, los comentarios se introducirn 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 prrafos, texto preformateado o bloques con significado especial como direcciones o citas. Marcas de bloques:

Prrafos.

5 Saltos de lnea. Bloques tabulados. Lnea horizontal. Divisiones. Texto preformateado. Direcciones. Centrado de bloques.

P se utiliza para separar prrafos. Dado que para el HTML todo el texto es continuo, necesitamos algn mecanismo para indicar el principio y el fin de un prrafo. Las marcas inicial y final son y .

Ejemplo:

Este texto est contenido dentro del primer prrafo, as que lo denominaremos: parrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1, prrafo 1.

Este otro texto est contenido dentro del prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2, prrafo 2.

Normalmente no suele utilizarse la marca de fin de prrafo, ya que el texto continuar hasta que encuentre otro comienzo de prrafo .

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:

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.

6

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 cmo definir cabeceras mediante el elemento , y cmo modificar el tamao y color de algn grupo de caracteres mediante el elemento y sus atributos SIZE y COLOR.

Finalmente se definen los estilos de caracteres disponibles distinguiendo entre los estilos fsicos (negrita, cursiva, ...) y los lgicos (variables, citas, ejemplos, ...).

HnEl elemento se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamao a los caracteres, dependiendo del valor n, el cual vara de 1 a 6. Los ms grandes tienen valor 1 y los ms pequeos valor 6. El texto entre estas marcas se trata en negrita. Se inserta automticamente un salto de prrafo, como puede comprobar en el siguiente ejemplo:

Ejemplo:

Cabecera H1 Cabecera H1

Cabecera H2Cabecera H2





FONTEl elemento permite definir el tamao, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos:

7El atributo SIZE: Regula el tamao de los caracteres (1 - 7).El atributo COLOR: Especifica el color de los caracteres. Para consultar los cdigos de los colores que le

interesen puede consultar la tabla de cdigos 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:

Tamaos 1 2 3 4 5 6 7 6 5 4 3 2 1

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

Texto de color verde y tamao 4.Texto de color verde y tamao 4.

Texto de color rojo y tamao 6.Texto de color rojo y tamao 6.

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

Ejemplo:

Texto en cursiva (itlica) Texto en cursiva (itlica)

Estilos fsicos

Negrita

Cursiva

Subrayado

Tachado

ASuperndice

BSubndice

Parpadeo

Mquina de escribir (Teletipo)

Texto grande

Texto pequeo

8 Negrita y cursiva Negrita y cursiva Negrita y tachado Negrita y tachado Parpadeo, tachado y tipo cdigo Parpadeo,tachado y tipo cdigo

Colores

Los colores se identifican mediante el nombre del color en ingls o bien mediante un cdigo del tipo #rrggbb donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturacin de los colores rojo, verde y azul.Para buscar el cdigo de algn color determinado puede consultar la tabla de cdigos de colores. Ha de tener en cuenta que algunos colores no se vern o se vern mal si la mquina no soporta 256 colores.

Color del texto

En este apartado se indicar cmo cambiar el color de un grupo definido de caracteres en un texto mediante el elemento .

Colores del entorno

Aqu se ver cmo cambiar los colores definidos por defecto para el fondo, el texto normal y los enlaces mediante el elemento . Este elemento tambin permite utilizar una imagen como fondo de pgina.

Color del textoSe puede controlar el color del texto utilizando el elemento con el atributo COLOR.A continuacin se muestran algunos ejemplos:

ROJO ROJO

AZUL AZUL

AZUL MARINO AZUL MARINO

VERDE VERDE

OLIVA OLIVA

AMARILLO AMARILLO

LIMA LIMA

MAGENTA MAGENTA

PURPURA PURPURA

9 CYAN CYAN

MARRON MARRON

NEGRO NEGRO

GRIS GRIS

TEAL TEAL

BLANCO BLANCO

Como se coment en la introduccin el color se puede indicar tanto mediante su nombre en ingls como por determinados cdigos hexadecimales. (Ver tabla de cdigos de colores)

En el siguiente ejemplo se muestra una combinacin de colores y tamaos de letra:(Para mayor detalle ver )

Captulo Erase una vez un ...Resulta:

Captulo IErase una vez un ...

Hiperenlaces

El siguiente elemento es uno de los ms 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 impresin de que se trata de un solo documento.

Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento y sus atributos: NAME, HREF y TARGET. El lector podr por tanto explorar el documento picando con el ratn sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen, o bien una porcin de imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la direccin URL del documento que sustituir al visualizado cuando se pulse con el ratn 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 fsico, lgico o de prrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automticamente (color y subrayado), siempre y cuando el usuario no realice una parametrizacin especial del browser.

La definicin por defecto del color de los enlaces de un documento puede ser modificada mediante el elemento 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 ratn para llamar a una nueva pgina. 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 direccin. Este ancla se define mediante el atributo NAME.

AEl elemento se utiliza para definir los enlaces hipertexto de los documentos HTML. Este elemento nunca se utiliza solo, por tanto siempre vendr acompaado 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.

Adems permite El atributo TARGET para ordenar la apertura de una nueva ventana del browser con la pgina indicada por HREF.

A continuacin se detallan cada uno de estos atributos.

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

Zona no activable Luego mediante el atributo HREF desde el fichero de partida se indicar el documento y la posicin dentro de dicho documento a la que se quiere acceder:

Zona activable

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 sintxis tpica es:

zona activable con atributos visuales

Ejemplos:

Logotipo del Departamento de Informtica y Sistemas de la ULPGC

Logotipo del Departamento de Informtica 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:

Nueva ventana

Nueva ventana

Si pulsa con el ratn 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 pgina.

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 direccin del documento destino y del punto de comienzo, en el documento de partida, mediante el atributo HREF. La sintxis es:

En el punto adecuado del documento destino:

En el documento de partida:

Zona activable De igual manera se puede referenciar un punto determinado dentro del mismo documento activo:

Zona activable 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 estructurndolo de la forma ms clara posible para hacerlo ms 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 numeracin automtica para niveles jerrquicos diferentes:

1. Ficheros HTML2. Ficheros de texto3. Ficheros de imgenes

1. Ficheros de sonido1.1 Ficheros WAV

2. Ficheros de imgenes2.1 Ficheros GIF2.2 Ficheros BMP

12

HTML define varios tipos de listas: Listas sin orden, sin numeracin: , Listas ordenadas, con numeracin: , Listas de directorio, similares a las listas sin orden: , Listas de men , similares a las listas sin orden: , Listas de definicin, tpicamente un glosario: , ,

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

LILa marca es un elemento vaco, o sea, no requiere de marca de fin, y es comn a las denominadas listas regulares. La sintxis general de estas listas ser:

Primer elemento de la lista Segundo elemento de la lista ...

ULLa marca permite generar listas no ordenadas, cada uno de los elementos de la lista ir precedido por un smbolo (fijo por defecto) que puede variar segn el nivel de anidamiento de la lista.

Ejemplo de lista no ordenada

Fichero HTML Fichero de imagen Fichero de sonido Fichero de vdeo Fichero de ejemplo

Ejemplo de lista no ordenada

Fichero HTML Fichero de imagen Fichero de sonido Fichero de vdeo Fichero de ejemplo

OLLa marca se utiliza para una lista ordenada o numerada. Cada marca incrementar el nmero 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

Ejemplo de lista ordenada

Fichero HTML Fichero de imagen Fichero de sonido

13

4. Fichero de vdeo 5. Fichero de ejemplo

Fichero de vdeo Fichero de ejemplo

Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE del elemento con los siguientes valores:

TYPE=1

(por defecto) para nmeros,

TYPE=A

para letras maysculas,

TYPE=a

para letras minsculas,

TYPE=I

para numeracin romana en maysculas,

TYPE=i

para numeracin romana en minsculas.

Por ejemplo, esto es una lista ordenada con letras maysculas:

A. Primera lnea B. Segunda lnea C. Tercera lnea D. Cuarta lnea

Primera lnea Segunda lnea Tercera lnea Cuarta lnea

En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE.

Esto es una lista ordenada con letras maysculas y que comienza por la E:

E. Primera lnea F. Segunda lnea G. Tercera lnea H. Cuarta lnea

Primera lnea Segunda lnea Tercera lnea Cuarta lnea

El nmero que se pone en el atributo START indica en que nmero 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 lnea (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 fcilmente modificable.

Se pueden definir adems textos de cabecera en las celdas (TH) y ttulos para las tablas (CAPTION).

Una celda puede contener algunos de los siguientes elementos:

texto listas otras tablas imgenes enlaces de hipertexto elementos de formulario

La representacin de una tabla es actualmente muy dependiente del browser utilizado.

TABLELa marca permite la apertura de una tabla; el fin de tabla se especifica con .

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 pxels. Cuando no se les asigna ningn valor explcitamente estos atributos tomarn 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 alineacin 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 tamao de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamao 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

celda 1celda 2celda 3celda 4

celda 1 celda 2

celda 3 celda 4


celda 1 celda 2

celda 3 celda 4


Definiendo el ancho y alto de la tabla en %

Ancho (WIDTH) 50%

Alto (HEIGHT) 30%


Ancho (WIDTH)50%

Alto (HEIGHT)30%

Definiendo el ancho y alto de la tabla en unidades.

Ancho (WIDTH) 300

Alto (HEIGHT) 80


Ancho (WIDTH)300

Alto (HEIGHT)

16

80

TRLa marca inicia una lnea de la tabla que terminar con . Admite los atributos:

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

ALIGN: permite una alineacin 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 contradice esta alineacin.

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

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

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

COLSPAN: define una celda con una anchura mltiplo de la columna bsica.ROWSPAN: define una celda con una anchura mltiplo de la fila bsica.NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola lnea.

En las tablas el ajuste es automtico, la anchura de una celda depende del texto ms largo inscrito en una de las celdas de la columna. De modo predeterminado, si la lnea es demasiado larga, el browser la cortar en varias lneas, no ser que est presente el atributo NOWRAP.

Titulo Superior (por defecto)

Atributos de alineacin, Align y VAlign

AlineacinVertical

TopMiddle

Bottom

AlineacinHorizontal

Left Center Right

Titulo Superior (por defecto)

Atributos de alineacin, Align y VAlign

AlineacinVertical

17

Top Middle Bottom

AlineacinHorizontal Left Center Right

Formularios

Los formularios generan en la pantalla cuadros de dilogo con el lector permitiendo as la interaccin con el usuario para consultas de bases de datos, solicitudes de documentacin, ...

Como en un formulario en papel, se podrn tener zonas en las que se introducir un texto, casillas de verificacin, listas de seleccin, etc... El usuario rellenar estas zonas en su formulario las cuales se identifican con un nombre simblico. Cuando el formulario se enva 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 creacin de formularios se utilizarn las siguientes marcas, que permiten generar una interfaz de edicin, sin hacer referencia an a la programacin de scripts de CGI:

la marca FORM que delimita el comienzo y fin de la definicin del formulario. la marca INPUT que permite crear diferentes tipos de entradas: campos de edicin y diversos

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

desplazamiento; la marca TEXTAREA que genera una zona de edicin 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.Botn SUBMIT: indica el texto a escribir en el botn.

18

Botn RADIO, Botn CHECKBOX: valor que se le asocia al botn cuando ste est pulsado. El valor especificado por NAME identifica el bloque de botones.

FORMLa marca y definen un formulario y entre ellas se situarn todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompaada 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 programacin basadas en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta ms longitud es POST, y ser el que utilicemos en casi todos los ejemplos.

El atributo ACTION define la accin a ejecutar cuando se pulse el botn de sumisin, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

INPUT

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

Permite varios atributos adems de los ya comentados de modo general:

El atributo SIZE define la longitud de la ventana de texto. El atributo MAXLENGTH define la mxima 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 mxima de la cadena 15.

Como se puede observar en este ejemplo, el nmero mximo de caracteres puede ser mayor que el tamao de la ventana y viceversa.

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

19

TEXT: es la opcin 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.

Champion

SUBMIT: desencadena el envo del formulario hacia el script; el texto definido en VALUE se escribir en el botn:

Salida

RESET: permite borrar los datos ya entrados:

Borrar

PASSWORD: permite entrar una palabra clave de forma confidencial:

CHEKBOX: crea un bloque de botones que permiten una seleccin mltiple de opciones:

Macintosh

PC

MacintoshPC

RADIO: crea un bloque de botones que permiten una seleccin exclusiva entre varias opciones

CD-ROM

Disquete

CD-ROMDisquete

20

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

IMAGE: hace que el visualizador presente una imagen que es sensible al ratn. Lo que el formato enva al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parmetros .x=n y .y=m donde n y m son los nmeros de las coordenadas x,y del punto en el que estaba el ratn en el momento del envo. Para representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:

Una posible respuesta podra 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 permite generar listas de seleccin simple o de seleccin variable. Se programa con una lista en la que los items se especifican mediante la marca . La presentacin 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 nmero de lneas visibles en la ventana. La opcin de selecin multiple se deriva de la presencia del atributo MULTIPLE.

Ejemplos:

Men despegable:

Entrada directa

Entrada indirectaEntrada lateralEntrada directa

Ventana con barra de desplazamiento: ( con opcin de seleccin mltiple )

21

AdaC++Cliper

AdaC++CliperPascalFortranCobol

La longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. Se debe de procurar que los contenidos de los campos sean lo ms cortos posibles; una excesiva longitud implica mayor trfico por la red, pero se deben contruir las listas de forma clara, y que resulten de fcil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parmetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

Ejemplo:

A continuacin se muestra una lista contenida en una ventana con barras de desplazamiento.

Pista 1Pista 2Pista 3

Pista 1 Pista 2 Pista 3 Pista 4 (para novatos) Pista 5 Pista 6

TextareaLa marca 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 (lneas) y COLS (columnas) delimita el tamao de esta ventana.

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

22

Ejemplo:

Introduzca aqu sus comentarios

Estas lneas de cdigo muestran la siguiente ventana:

Introduzca aqu sus comentarios

Imgenes

Insertar imgenes en un documento permite crear pginas mucho ms atractivas. Segn el tipo de grfico utilizado se pueden conseguir efectos realmente sorprendentes.

IMGEste elemento permite incluir una imagen en un documento. Vendr siempre acompaado por el atributo SRC que indica la direccin del fichero grfico que contiene la imagen:

Ejemplos:

Imagen situada en un fichero local:

Imagen residente en un servidor:

Esta ltima opcin de insertar una imagen de un servidor exterior en un texto no es muy recomendable ya que ralentiza mucho la carga de la pgina y adems no se asegura que la imagen pueda ser siempre accedida. Realmente el resultado del ejemplo sera ver directamente la imagen, no un enlace a sta,

23

pero como se ha dicho anteriormente esto puede dar problemas al cargar la pgina. Esta opcin, por tanto, se utiliza slo en casos excepcionales de imgenes que son actualizadas peridicamente (p.e: un mapa metereolgico).

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

En los documentos HTML se suelen insertar diversos iconos con significados implcitos, como es el caso de "pgina en construccin":

Este elemento permite adems 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:

ALIGN: Situa la imagen en la posicin que se le indique respecto a la lnea de texto en la que est. Este atributo se explica con mayor detalle en el apartado que viene a continuacin.

El atributo ALIGNAlinea la imagen, segn la posicin que se le indique, respecto a la lnea de texto en la que est. Puede tomar los siguientes valores:

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

Ejemplos:

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.

Imgenes como fondo de pginaMediante el elemento y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de pgina. El valor que deber tomar dicho atributo es la direccin donde se encuentra el fichero que contiene la imagen. La sintaxis ser:

Ejemplo:

Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.

Smbolos

Por qu hay que usar cdigos?Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente despus de encender el ordenador, y son los que se encargan de darle "vida" a la mquina.

Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene su teclado y algunos ms que no estn en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadamente, no son siempre las mismas, y varan 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 pgina debe verse como su creador desea, sin importar si se est ante un ordenador que "habla" en ingls o en espaol, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad estn todos, pero generalmente slo se usa para caracteres especiales) que se escriben con un cdigo 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 nmeros y unos pocos signos, como el punto, la coma, el guin y algunos otros. Desde luego hay que codificar todas las letras acentuadas, ees, cedillas, etc., etc.

A continuacin se muestra una tabla con todos los caracteres, tambin estn las letras, pero stas slo le sern tiles en caso de necesitar escribir textos un tanto raros.

Como puede comprobar, la tabla tiene una columna con el carcter deseado seguida de su cdigo numrico, una descripcin del carcter y despus un nombre corto (una especie de alias) que para los

25

ms habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el cdigo numrico.

Tabla de smbolos

Caracter Cdigo Descripcin Alias

< < Menor <

> > Mayor >

Espacio sin separacin

Abrir exclamacin

Copyright

Grados

Ms-menos

Gnero masculino

Abrir interrogacin

A mayscula, acento agudo

E mayscula, acento agudo

I mayscula, acento agudo

Ee mayscula

O mayscula, acento agudo

U mayscula, acento agudo

U mayscula, diresis

a minscula, acento agudo

e minscula, acento agudo

i minscula, acento agudo

ee minscula

o minscula, acento agudo

u minscula, acento agudo

u minscula, diresis

ALEJANDRO CAURA GUIAHTML.pdf

Documents

Transcript of ALEJANDRO CAURA GUIAHTML.pdf