CURSO DE HTML

CURSO DE HTML

ndice de contenido
1.- INTRODUCCIN...........................................................................................2 1.1 Definicin................................................................................................2 1.2 Versiones................................................................................................2 1.3 Sintaxis..................................................................................................2 1.4 Test........................................................................................................3 2.- ESTRUCTURA DEL DOCUMENTO.....................................................................4 2.1 Informacin.............................................................................................4 2.2 Cabecera................................................................................................5 2.3 Cuerpo...................................................................................................6 2.4 Ejemplo prctico......................................................................................6 2.5 Test........................................................................................................7 2.6 Ejercicio..................................................................................................8 3.- FORMATOS..................................................................................................9 3.1 Formatos de prrafo.................................................................................9 3.2 Formatos de Frase..................................................................................10 3.3 Formato de Letra....................................................................................11 3.4 Estilo de texto........................................................................................12 3.4 Estilo de texto........................................................................................12 3.5 Insercin de espacios..............................................................................14 3.6 Comentarios..........................................................................................15 3.7 Caracteres Especiales..............................................................................15 3.8 Test......................................................................................................16 3.9 Ejercicio................................................................................................17 4.- ENLACES...................................................................................................18 4.1 Tipos de Enlaces.....................................................................................19 4.2 Test......................................................................................................21 4.3 Ejercicio................................................................................................22 5.- LISTAS......................................................................................................23 5.1 Test.....................................................................................................28 5.2 Ejercicio................................................................................................29 6.- IMGENES Y OBJETOS................................................................................30 6.1 Mapas de imagen...................................................................................32 6.2 Test......................................................................................................33 6.3 Ejercicio................................................................................................34 7.- TABLAS.....................................................................................................35 7.1 Test......................................................................................................37 7.2 Ejercicio...............................................................................................38 8.- FORMULARIOS...........................................................................................39 8.1 Test......................................................................................................45 8.2 Ejercicio................................................................................................46 9.- FRAMES....................................................................................................47 9.1 Test......................................................................................................50 9.2 Ejercicio................................................................................................51 10.- MIGRACIN A XHTML................................................................................52 11.- EJERCICIO PRCTICO FINAL.......................................................................54 12.- BIBLIOGRAFA..........................................................................................60 1

CURSO DE HTML

1.- INTRODUCCIN
1.1 Definicin

A lo largo de este manual vamos a descubrir el lenguaje ms utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML. Se puede afirmar que el HTML es el lenguaje usado por los navegadores para mostrar en la pantalla del usuario las pginas webs, es por tanto a da de hoy la interface ms extendida en la red. Con HTML podemos utilizar textos, sonidos, imgenes, colores, enlaces a otras pginas, tablas, formularios, etc. Lo que en un principio poda ser suficiente para hacer llegar la informacin al usuario, lleg un momento que el desarrollo de internet precis que el lenguaje HTML se actualizara. Por ello se introdujeron tecnologas complementarias como es el caso de CSS y Javascript. Otra cuestin a tener en cuenta, es el uso de estndares web. Por qu? Porque las diversas versiones de los navegadores no lo implementan adecuadamente. Por eso el webmaster est obligado a comprobar que su web ser interpretada correctamente. 1.2 Versiones

La primera versin ms usada de HTML fue la 2.0 en el ao 1995. En un principio cumpla ms que suficiente la presentacin del contenido, que primaba sobre el diseo. Pero debido a que Netscape empez a incluir nuevas etiquetas no estndares, fue preciso crear un comit que estableciera las bases estndares web en la versin HTML 3.0. Dado que no fue muy aceptado, la principales compaas de informtica crearon el nuevo comit W3C, que es la que actualmente elabora las versiones de HTML. En 1997 se present entonces la versin 3.2, que incluan nada ms que lo ya hecho hasta el momento. En seguida, tal que el mismo ao, se presenta una nueva versin que es la que contina vigente en este momento la 4.0, y es la que veremos en este curso. En el ao 2000 esta ltima versin junto con el lenguaje XML 1.0. fue reformulado en XHTML 1.0. 1.3 Sintaxis

La sintaxis del lenguaje HTML se basa en la denominada etiqueta. La etiqueta tiene dos partes: una apertura y un cierre. Encontrando en medio un elemento cuyo estilo vendr definido con las reglas CSS. <etiqueta> contenido</etiqueta> La etiqueta que se encuentra al principio activa la orden y la ltima es la misma que la que abre precedida del signo / y lo que hace es desactivarla. No siempre es as, existen etiquetas con una etiqueta al principio y sin etiqueta de cierre. Y su sintaxis es: <etiqueta /> Es importante resaltar que las maysculas o minsculas son indiferentes a la hora de escribir las etiquetas. Pero debido al uso complementario de otras tecnologas es aconsejable escribirlas en minsculas. 2

CURSO DE HTML

1.4

Test

1. La sintaxis de un cdigo HTML comn puede ser: <etiqueta valor="atributo" >elemento</etiqueta> <etiqueta atributo="valor">elemento</etiqueta> <atributo etiqueta="valor">elemento</atributo> <valor etiqueta="atributo">elemento</valor> 2. Con respecto a los estndares de la web. Son creados por la W2C. El HTML debe escribirse en mayscula. No es necesario guiarse por ellos. Ninguna es correcta. 3. HTML significa: HyperText Match Language Lenguaje de Marcado HiperTextual HyperText Markup Language Lenguaje de Marcado HiperTextnico

CURSO DE HTML

2.- ESTRUCTURA DEL DOCUMENTO

Un documento HTML se compone de las siguientes partes: 1. informacin sobre la versin del HTML 2. cabecera declarativa por la etiqueta <head> 3. cuerpo, que contiene el contenido real del documento indicada por <body> Ejemplo: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>mi primer documento html</title> </head> <body> <p>hola mundo!</p> </body> </html> 2.1 Informacin

Un documento HTML vlido declara qu versin de HTML se utiliza en el documento. Esta declaracin est codificada y viene especificada por el DOCTYPE. El objetivo es indicar a un Validador de Versiones, qu versin del HTML utilizar en la comprobacin de sintaxis del documento. Segn los estndares del HTML, cada documento requiere un tipo de declaracin diferente. Se detallan a continuacin las ltimas definiciones del tipo de documento (DTD): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> En esta declaracin se incluyen todos los componentes excepto los frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> En esta declaracin se incluyen todos los componentes de HTML 4.0 Strict ms aquellos desaconsejados de versiones anteriores, sin incluir los frames. Es la versin ms utilizada aunque no obtenga todas las ventajas que persigue HTML 4.0, tiene un soporte mayor por parte de los browsers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> En esta declaracin se incluyen los componentes del HTML Transitional ms los frames. Si queremos seguir la normativa de la W3C: "guiar la web hacia su mximo potencial a travs del desarrollo de estndares", necesitamos crear nuestros documentos con el formato estndar XHTML, es decir, con la extensin del lenguaje de marcado hipertextual (eXtensible HyperText Markup Language). Algo que veremos ms adelante.

CURSO DE HTML

Desde este punto de vista, estandarizar un sitio web con XHTML 1.0 strict, es la mejor forma de crear una pagina web correcta con el DTD. La codificacin, como segundo componente de una declaracin, es el formato en el que se guardan los caracteres en el archivo. Se suele utilizar la Occidental charset=iso-8859-1 o bien Unicode charset=utf-8. <meta http - equiv =" Content - Type " content =" text / html ; charset =utf -8" /> Despus de la declaracin nos encontramos con la etiqueta <html> en la que vamos a encontrar todo el contenido de la pgina web y a veces la indicacin de qu lengua estamos usando. <html xmlns =" http :// www.w3.org /1999/ xhtml \"xml: lang ="es" lang ="es"> en esta etiqueta vamos a encontrar 2 bloques: <head>...</head> que seala la cabecera del documento y encontramos metadatos, scripts, enlaces a archivos externos de CSS, titulo, ... <body>...</body> que contiene el cuerpo del documento, es decir, lo que visualizamos en el navegador con el formato correspondiente. 2.2 Cabecera

El elemento <head> contiene informacin sobre el documento actual, como el ttulo, palabras clave que pueden ser de utilidad para motores de bsqueda, y otros datos que no se consideran estrictamente parte del contenido del documento. Title Es muy conveniente utilizar el elemento <title> para identificar los contenidos de un documento. Metadatos El elemento metadatos es un contenedor de metainformacin sobre el documento relacionado con el protocolo HTTP. Se utiliza para identificar al documento y su contenido. Esta informacin es utilizada por lo buscadores e ndices. Por ejemplo: el autor, la fecha de caducidad, una lista de palabras clave, etc. Siempre van en la etiqueta head. Esta especificacin no define un conjunto normativo de propiedades. Los atributos ms importantes de los metadatos son: name: identifica la informacin que se va a exportar. content: contenido de la informacin. http-equiv: es el nombre de un comando HTTP. Cada atributo va a especificar una pareja propiedad/valor. Por ejemplo, la siguiente declaracin establece un valor para la propiedad Author: <META name="Author" content="Davor Rakleet"> El atributo name identifica la propiedad y el atributo content especifica el valor de la propiedad. 5

CURSO DE HTML

2.3

Cuerpo

El cuerpo de un documento es la parte que contiene el contenido del documento. El contenido puede ser presentado como un lienzo sobre el que aparece el contenido: texto, imgenes, colores, grficos, etc. Para agentes de usuario por voz, el mismo contenido podra ser pronunciado. El estilo que presentar el contenido de nuestra pgina web estar en un archivo css, pero el contenido vendr definido por los siguientes elementos: identificadores de elementos como los atributos id y class elementos en bloque (div) y elementos en lnea (span) encabezados (h1, h2, h3, h4, h5 y h6) 2.4 Ejemplo prctico

A continuacin se propone un ejemplo resuelto con la una estructura bsica de una pgina web: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Aqui va el ttulo de mi pgina web</title> </head> <body> Aqui va el Contenido Principal de mi pgina web </body> </html> Resultado:

CURSO DE HTML

2.5

Test

1. Para hacer una declaracin, que doctype de los siguientes es el correcto: <!DOCTYPE html PUBLIC "-//W2C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Cualquiera de los anteriores 2. En el elemento <head>: Se incluye la etiqueta <hr> Se incluye la etiqueta <h4> Se incluye la etiqueta <bgcolor> Ninguna de las anteriores 3. En un documento HTML podemos incorporar: Hojas de estilo CSS Formularios de contacto Imagenes GIF Todas las anteriores

CURSO DE HTML

2.6

Ejercicio

Le llamaremos ejercicio1.html, simplemente con un editor de texto (notepad, bloc de notas, ultra-edit, etc) escribimos el cdigo y lo guardamos con un nombre y extensin html. Esto es interpretado por el navegador que tengamos instalado en nuestro ordenador. Las caractersticas de esta pgina web son: Utilizamos un DTD transitional. En los metadatos: . http-equiv=content-type . content=text/html . charset=iso-8859-1 El ttulo del navegador es Ejercicio 1 En el body pondremos un encabezado tipo <h2>: Los anuncios que impactan en la web En dos prrafos (<p>) incluir el siguiente texto: . El 92% cree que la publicidad online es un buen mtodo para mantener sitios gratuitos relacionados con el entretenimiento. Tambin revela que la publicidad online puede ser la herramienta de promocin ms efectiva. . Fuente: www.webtaller.com Resultado:

CURSO DE HTML

3.- FORMATOS
Es muy conveniente conocer las etiquetas con las que dar formato a los textos, ya que es la mayor parte del contenido de una pgina web. De esta forma podremos estructurar el texto en prrafos, titulares, citas, etc para darles un estilo. 3.1 Formatos de prrafo

Los prrafos sirven para dar estructura al contenido. Vamos a ver a continuacin las etiquetas ms importantes: <p> y </p>: Esta etiqueta enmarca un texto dentro de un prrafo. Crea un salto de lnea y adems deja una lnea en blanco antes de continuar con el resto del documento.

Para una buena presentacin visual de un prrafo hay que tener en cuenta aspectos tcnicos y de estilo como: Tratamiento del espacio en blanco Saltos de lnea y cambio automtico de lnea Justificacin Divisin de palabras Convenciones del idioma escrito y direccionalidad del texto Formateo de los prrafos con respecto al contenido circundante

<center> y </center>: Permite centrar el prrafo <pre> y </pre>: Esta etiqueta indica que el texto contenido est "preformateado", es decir, ya viene con su fuente de letra, tamao, etc. Por tanto el navegador respeta la forma en que est escrito. Resulta til a la hora de representar cdigo fuente. <blockquote> y </ blockquote>: Se utiliza para citar un texto ajeno. Al implementarse deja mrgenes tanto a izquierda como a derecha. <div align> y </div>: Hay ocasiones en que el texto est compuesto por varios prrafos, y que para poder darle el mismo estilo es conveniente incluirlos en una capa contenedora o ms conocida como div. El atributo a utilizar es align, que permite justificar el texto del prrafo. Es un atributo que ayuda a posicionar el prrafo a la izquierda (div align=left), a la derecha (div align=right), al centro (div align=center) o a ambos mrgenes (div align=justify). Ejemplo: <div align= justify> <p>Aqui va el primer prrafo</p> <p>Aqui va el segundo prrafo</p> </div>

<text-align> y </text-align>: Indica la alineacin del texto. Los valores que admite son left, right, center y justify.

CURSO DE HTML

3.2

Formatos de Frase

<cite> y </cite>: Para citar un texto ajeno. <strong> y </stong>: Esta etiqueta muestra un texto resaltado fuerte que se mostrar en el navegador con caractersticas diferentes a negrita. Esta etiqueta se diferencia de negrita (<b>) en que el texto se presenta en el navegador con otro grosor del texto e inclusive otro color. Mientras que <b> se presenta el texto siempre en negro con el resaltado. <em> y </em>: Marca un enfsis algo menor que strong y aparece en cursiva. Ejemplo:

10

CURSO DE HTML

Una parte importante del texto suelen ser los ttulos o encabezados. Un encabezado es una etiqueta que se refiere al ttulo de una seccin. Da formato al texto. Hay seis niveles de encabezados en HTML: H1, H2, H3, H4, H5 y H6, siendo H1 el ms importante y H6 el menos importante. Los navegadores visuales pueden representar los encabezados ms importantes con fuentes ms grandes que los menos importantes.

3.3

Formato de Letra

<b> y </b>: El texto aparece en negrita. Ejemplo: Este texto est muy negro

<i> y </i>: El texto aparece en cursiva. Ejemplo: Me gusta mirar de lado

<u> y </u>: El texto aparece subrayado. Ejemplo: Es muy importante que aparezca subrayado

^y: Muestra un texto como superndice. Ejemplo: E=mc2

_y: Muestra un texto como subndice. Ejemplo: i=1

<big> y </big>: Incrementa el tamao de letra. Ejemplo: ME VEO GRANDE

11

CURSO DE HTML

<small> y </small>: Decremento del tamao de la letra. Ejemplo:

me veo pequeo

<blink>

y </blink>: El texto parpadea.

Ejemplo: Estoy parpadeando 3.4 Estilo de texto

<font-family> y </font-family>: Determina el tipo de fuente que presenta el texto de la pgina web. Ejemplo: <font-family="Helvetica,Arial,Times">Tengo una fuente de letra Helvetica, Arial o Times.</font-family> Resultado: Tengo una fuente de letra Helvetica, Arial o Times.

<font-size> y </font-size>: Determina el tamao de fuente. Se pude indicar a travs de los siguientes valores: xx-small | x-small | small | medium | large | x-large | xx-large o bien con cualesquiera de las unidades de medidas que se usa en el estndar de CSS. Ejemplo: <font-size="22px">Tamao 22 pxeles</font> Resultado:

Tamao 22 pxeles
<font-color> y</font-color>: Esta etiqueta se usa para indicar el color de la fuente. En el estndar CSS hay varias maneras de definir un color: - Nombre: aunque existen miles de colores slo hay unos 17 que se pueden indicar por su nombre, porque son los que estn incluidos en el estndar CSS.
h1 {color: blue}

- Notacin hexadecimal: Pueden definirse ms de 16 millones de colores al especificarse los valores RGB de un color con la notacin #RRGGBB, donde RR, GG y BB representan, cada uno, un nmero hexadecimal entre 00 y FF para rojo, verde y azul, respectivamente.

12

CURSO DE HTML

h1 {color: #0000FF} o en su forma abreviada h1 { color: #00F } - Notacin decimal: CSS tambin define una notacin en funcin de sus proporciones relativas en porcentaje o en nmeros enteros positivos (cada valor puede ser un nmero entero entre 0 y 255). rgb(100%,100%,100%) rgb(24,125,255) Ejemplo: <div style=color:#ff0000;>Text en color rojo.</div> Resultado: Texto en color rojo. <font-style> y </font-style>: Esta etiqueta nos da variados estilos al texto. - normal (estilo normal) - itlica (estilo cursiva que propone la fuente) - oblicua (estilo oblicuo por deformacin de la fuente) <font-weight> y </font-weight>: Otorga diferentes grosores al tamao de la fuente. Los valores que presenta esta propiedad son: normal (valor por defecto, sin estilo) bold (estilo negrita) lighter (mas pesado) bolder (mas liviano) 100 200 300 400 (grosor por defecto) 500 600 700 800 900

<text-decoration> y </text-decoration>: Con esta etiqueta se permite adornar o no el texto. - none: el texto no tiene decoracin. Es muy til para quitar los subrayados a los enlaces. - underline: el texto aparece subrayado - overline: el texto aparece sobrerayado - line-through:el texto aparece tachado Por ltimo, sealar que normalmente al asignar un formato a un texto indicamos la fuente, su tamao, color, y/o estilo. Por ello se suelen abreviar los valores de la siguiente manera: <style type="text/css"> body {font:bold italic 25px verdana;} </style>

13

CURSO DE HTML

3.5 Insercin de espacios HTML tiene un comportamiento especial con respecto a los espacios en blanco. Como slo respeta los espacios existentes entre palabras, fue preciso crear etiquetas especficas para insertar espacios en blanco. Veamos cuales son: &nbsp;: inserta un espacio en blanco <br>: inserta un lnea en blanco. No necesita etiqueta de cierre, pero se puede usar <br />. Desplaza el texto a la siguiente lnea. <hr>: inserta una lnea horizontal. No necesita etiqueta de cierre.

<line-height>: es el alto de una lnea, sirve para espaciar entre lneas Ejemplo:

14

CURSO DE HTML

3.6

Comentarios

Para insertar aclaraciones dentro del cdigo fuente y que resulten invisibles en la pantalla del navegador, tenemos que escribirlo entre <!-- y -->. Ejemplo: <!-- Inicio del men --> 3.7 Caracteres Especiales

Es preciso tener en cuenta que los ordenadores manejan caracteres especiales para ciertas letras o smbolos. Para insertar el carcter adecuado se toma como referencia la tabla estndar ISO-Latin-1. Se detallan a continuacin los ms usados:

Cdigo &aacute; &Aacute; &eacute; &Eacute; &iacute;&Iacute; ... &ntilde; &Ntilde; &iquest; &iexcl; &nbsp; &lt; &gt; &amp; &quot;

Resultado , , , , , , , , y Inserta espacio en blanco < > & "

15

CURSO DE HTML

3.8

Test

1. La etiqueta de fuente <font> y sus atributos: Actualmente no se promociona su uso con normalidad No cumple con los estndares XHTML Fue sustituida por propiedades CSS Todas son correctas 2. Cual de las siguientes reglas es incorrecta: <font-weight: bolder> <text-decoration: overline> <h7>Titulo</h7> <em>palabra enfatizada</em> 3. Cual de las siguientes definiciones es correcta: Los prrafos <p>son bloques de texto La etiqueta <div> define los bloques de elementos. Esta estructura est creada para definir recuadros como mens o ventanas. La etiquta <title> est dentro de la cabecera. Aparece como ttulo de la ventana en los navegadores. Todas son correctas

16

CURSO DE HTML

3.9

Ejercicio

Para crear el siguiente documento web, llamado ejercicio2.html, insertaremos el siguiente ttulo: 2009 RIBA Award Winners Announced y el siguiente texto: The Royal Institute of British Architects (RIBA) recently announced the winners of the 2009 RIBA Awards. RIBA Awards for architectural excellence have been presented across the country with 103 buildings in the UK and Europe winning awards (97 in the UK and six in the rest of the EU). El estilo que daremos ser el siguiente: - Aadir el siguiente comentario en cualquier parte del cdigo: Noticias sobre arquitectura. - El ttulo ir con el encabezado de nivel 1. - Entre el encabezado y el texto insertar una lnea. - El texto, que va en formato prrafo, ir dentro de un div con una alineacin justificada. - El siguiente texto Royal Institute of British Architects (RIBA) estar enfatizado. Resultado:

17

CURSO DE HTML

4.- ENLACES
En lo que se diferencia HTML de otros lenguajes es en sus caractersticas para hipertexto y documentos interactivos. Es decir, la posibilidad de conectar una parte con otra del documento web o con otra web dondequiera que se encuentre. Para ello se usan los vnculos como estructura bsica y sencilla del hipertexto, lo cual ha posibilitado el xito de la world wide web. Un vnculo o enlace es una rea de texto o imagen que al ser seleccionados nos trasladan a otro documento de hipertexto o a otra posicin dentro del documento actual. El objetivo es que el usuario consiga navegar por los contenidos de la web de tal forma que consiga encontrar la informacin que busca. Veamos a continuacin la estructura de un hipervnculo: <a href="destino">contenido</a> Un vnculo tiene dos extremos llamados anclas y una direccin. El vnculo comienza en el "ancla de origen", que corresponde al origen del vnculo y apunta al "ancla destino" que corresponde al destino del vnculo; ste puede ser cualquier recurso de la Web, desde una imagen a un videoclip, un archivo de sonido, un programa, un documento HTML, un elemento dentro de un documento HTML, etc. Veamos detalladamente cada parte del hipervnculo: 1 Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. De forma que lo que se encuentre entre estas etiquetas se considera un enlace y se va a visualizar de forma diferente en el navegador y es fcilmente detectado por el usuario dentro de la pgina web. El texto aparecer subrayado y de un color distinto al habitual, y las imgenes estarn rodeadas por un borde del mismo color que el del texto del enlace. Basta con deslizar el puntero del ratn sobre las imgenes o el texto y ver como estarn subrayados y coloreados en azul. En el caso de las imgenes que sirvan de enlace, veremos que estn delimitadas por un marco azul por defecto. Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace o direccin. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href. 2 La direccin o destino del enlace estar en formato URL. Una URL nos indica tanto una direccin de Internet como el servicio que esperamos nos ofrezca el servidor al que corresponde la direccin. Tiene el siguiente formato: servicio://mquina:puerto/ruta/fichero@usuario donde el servicio podr ser uno de los siguientes: http: Es el servicio invocado para transmitir pginas web y el que usaremos normalmente en los enlaces. https: Es una innovacin sobre el anterior, que nos permite acceder a servidores (generalmente comerciales) que nos ofrecen el uso de tcnicas de enciptacin para proteger los datos que intercambiemos con l de terceras personas. ftp: Permite trasmitir ficheros desde servidores de ftp annimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargar de mostrarnos el contenido del mismo para que podamos escogerlo cmodamente. Utilizando la @ podremos acceder a servidores privados. 18

CURSO DE HTML

mailto: Para poder mandar un mensaje. Por ejemplo, la URL mailto:info@mipagina.com enviara un mensaje a la bandeja de entrada. news: Para poder acceder a foros de discusin. Se indica el servidor y el grupo. Por ejemplo: news://news.ibernet.es/es.comp.demos nos conectara con el foro es.comp.demos en el servidor de Telefnica. telnet: No es implementado generalmente por los navegadores, que suelen invocar un programa externo. Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. La direccin de la mquina puede ser, o bien una serie de cuatro nmeros entre 0 y 255 (123.3.5.65) o bien algo ms fcil de recordar como es una serie de palabras separadas por puntos (www.programacion.net). El puerto generalmente no se indica, ya que el servicio predetermina uno. La ruta es una serie de directorios separados por el smbolo /, que es el utilizado en UNIX (el sistema operativo ms extendido en los servidores de Internet). Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la misma mquina que la pgina web que estamos creando podemos utilizar este formato: ruta_relativa/fichero En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador. 3 Para acceder al destino del enlace, primero debemos especificar el lugar del documento al que queremos acceder con el llamado ancla: <a name="ancla"> 4.1 Tipos de Enlaces

En funcin del destino los enlaces pueden ser: Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Ejemplo: En el lugar desde el que queremos saltar, escribimos: <a href="#inicio"> Ir al Inicio</a> Y en el punto de destino, escribimos la siguiente etiqueta: <a name="inicio"> </a> Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. Ejemplo: Para ir de la pgina inicial a la pgina final, escribimos: <a href="pagina_final.htm">Ir a pagina final</a> Enlaces remotos: los dirigidos hacia pginas de otros sitios web. Ejemplo: Indicamos la direccin absoluta de una pgina web. <a href="http://www.w3c.es/>Oficina espaola de la W3C</a>

19

CURSO DE HTML

Enlaces usando imgenes: Con frecuencia se emplean imgenes como enlaces. A veces son enlaces a las mismas imgenes con ms resolucin y otras veces nos llevan a una localizacin cualquiera. Ejemplo: Para que un texto sea un enlace a una imagen, escribimos: <a href=" #inicio"><img src="gifs/imagen.gif"></a> Para que una imagen sea un enlace a otra imagen se debe escribir: <a href="carpeta1/imagen1.jpg"><img src="carpeta2/imagen2.gif" ></a> Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. Ejemplo: <a href="mailto: nombre@tienesunemail.es"> nombre_apellido@tienesunemail.es</a> Enlaces con grupos de noticias: para enviar y recibir mensajes, acceder a foros de discusin, etc. Ejemplo:

<a href="news://news.tienesunemail.es/">Acceso al grupo de noticias de tienesunemail</a>

Enlaces con archivos: los usuarios puedan hacer download de ficheros, es importante indicar la ruta donde se encuentran los ficheros.

Ejemplo: <a href="../carpeta1/temario.zip">Descarga del archivo temario</a>

Enlaces que abren nuevas ventanas: si queremos que la informacin a la que queremos acceder se muestre en una nueva ventana, solamente le aadimos target="nueva" Ejemplo:

<a href="index.htm" target="nueva">Indice</a>

La forma en que se accede a los archivos pueden ser: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la direccin. Ejemplo: <a href="http://webcompleta.com/html/imagenes/prueba.jpg" > En las direcciones relativas vemos que no est la url completa. En este tipo de direcciones, las partes que faltan de la direccin el navegador las genera de la propia pgina en la que est el enlace. Ejemplo: <a href="/imagenes/prueba.jpg" >

20

CURSO DE HTML

4.2 Test 1. Seale la sintaxis correcta: <a href="http://www.pagina.com">mi web</a> <href a="/pagina.html">mi web</href> <a href="www.pagina.com">mi web</a> <a title="http://www.pagina.com">mi web</a> 2. Nuestro documento HTML puede tener enlaces hacia: Archivos .exe y .zip Webs .html y .php Documentos .pdf Todas las anteriores 3. Indica cual es verdadera o falsa: Las imgenes que sirven de enlace estn delimitadas por un marco rojo Un ejemplo de direccin absoluta: <a href="https://miweb.com//time.jpg//">

El siguiente enlace lleva a la parte final de la pgina 2.htm <a href="pagina2.htm#sitio>Ir a sitio de la pgina 2</a> Slo se pueden crear 5 enlaces internos por cada pgina web

21

CURSO DE HTML

4.3

Ejercicio

Este ejercicio3.html va a mostrar diferentes formas de hipervnculos: Crear un enlace al buscador Google que se muestre en la misma ventana. Insertar una imagen, la cual al pinchar sobre ella sea un enlace al sitio externo www.noticiasarquitectura.info, y que se muestre en la misma ventana. Que el texto Envio correo electronico sea un enlace a una direccin de email. Mostrar la siguiente web http://www.universitarios.org/ en una nueva ventana, al pinchar sobre el texto Abre la pgina web en una nueva ventana. Que el texto Ir al ejercicio 1 nos muestre en la misma ventana el ejercicio1.html. Resultado:

22

CURSO DE HTML

5.- LISTAS
Las listas sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o ttulos. Al comienzo de cada lnea se antepone un smbolo o nmero para indicar la secuencia de elementos, adems su uso hace que el comienzo de la lnea se desplace hacia la derecha. Veamos los tipos de listas: Listas desordenadas Se delimitan por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista se cita con la etiqueta <li>, aunque no es preciso cerrarlo. Se puede definir el tipo de vieta a emplear. Se especifca con el atributo type, y se incluye con la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista, o dentro de la etiqueta <li> si queremos hacerlo especfico para un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> <li type="tipo de vieta"> donde tipo de vieta puede ser circle, disc, square, etc. Indicar que en algunos navegadores estos smbolos no se presentan bien y muestran el tpico redondo y negro. Ejemplo: Se muestra una lista con un cuadrado en lugar de un redondel, y en el ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectar a todos los elementos de la lista. <ul type="square"> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 <li type="circle">Elemento 4 </ul> Resultado Elemento 1 Elemento 2 Elemento 3 Elemento 3 Elemento 4

23

CURSO DE HTML

Listas ordenadas La etiquetas que se utilizan son <ol>y </ol> (ordered list). Cada elemento sera igualmente precedido de su etiqueta <li>. Ejemplo: <p>Reglas de ordenacin</p> <ol> <li>Primer elemento <li>Segundo elemento </ol> Resultado: Reglas de ordenacin 1. Primer elemento 2. Segundo elemento Las listas ordenadas ofrecen la posibilidad de modificar el estilo de las vietas. Es posible especificar el tipo de numeracin eligiendo entre nmeros, letras y nmeros romanos. Se utiliza, como ya hemos visto, el atributo type, el cual ser situado dentro de la etiqueta <ol>, con uno de los siguientes valores: 1 Para ordenar por nmeros :(1, 2, 3...), a Por letras del alfabeto: (a, b, c...) A Por letras maysculas del alfabeto: (A, B, C,...) i Ordenacin por nmeros romanos en minsculas: (i, ii, iii,...) I Ordenacin por nmeros romanos en maysculas: (I, II, III,...) Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendr como valor un nmero. Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente.

24

CURSO DE HTML

Ejemplo: <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a <li>Elemento b </ol> <p>Ordenamos por nmeros romanos empezando por el 10</p> <ol type="i" start="10"> <li>Elemento x <li> Elemento xi </ol> Resultado: Ordenamos por letras a. Elemento a b. Elemento b Ordenamos por nmeros romanos empezando por el 10 x. Elemento x xi.Elemento xi Listas de definicin Su objetivo es presentar una lista de definiciones, por un lado el objeto definido y por otro su definicin. La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definicin son <dt> (definition term) y <dd> (definition definition) respectivamente. Ejemplo: <p>Definiciones</p> <dl> <dt>Objeto uno <dd>Definicin uno <dt>Objeto dos <dd>Definicin dos </dl> Resultado: Definiciones Objeto uno Definicin uno Objeto dos Definicin dos

25

CURSO DE HTML

Este tipo de etiquetas son usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la izquierda, este efecto lo produce la etiqueta <dd>. Anidar listas Es factible conseguir listas mixtas, mediante su anidamiento y hasta cierto punto y en las que haya ms de un tipo de lista. Ejemplo: <p>Anidamiento de Listas</p> <ul> <li>Lista desordenada uno <ol> <li>Elemento uno.uno <li>Elemento uno.dos </ol> <li>Lista desordenada dos <ol> <li>Elemento dos.uno <li>Elemento dos.dos </ol> </ul> Resultado: Anidamiento de Listas Lista desordenada uno 1. Elemento uno.uno 2. Elemento uno.dos Lista desordenada dos 1. Elemento dos.uno 2. Elemento dos.dos

26

CURSO DE HTML

Ejemplos:

27

CURSO DE HTML

5.1

Test

1. En el siguiente cdigo HTML queremos enumerar los elementos de una lista de forma ordenada, entonces X equivale a: <X> <li>Objeto</li> <li>Cosa</li> <li>Color</li> </X> OL DD UL DT 2. Es correcto el siguiente cdigo: <ul> <li type="square"> <ol>Primero <ol>Segundo <li type="circle">Tercero </ul> 3. Indica cual es verdadera o falsa: La etiquetas <dt> desplaza textos hacia la izquierda. Se puede elegir el tipo de vieta para <li> Tanto si es letra como nmero siempre empieza por a 1 El grado de anidamiento es ilimitado

28

CURSO DE HTML

5.2

Ejercicio

En este ejercicio4.html vamos a crea una lista ordenada de la siguiente forma: Detallar una lista ordenada de 3 puntos numerados. En el punto 2 crear una lista de 2 puntos cuyo marca sea en nmeros romanos en maysculas. En el punto 2.II crear una lista desordenada de 2 puntos cuyo tipo de vieta sea cuadrado. Y en el punto 3 una lista desordenada de 2 puntos cuyo tipo de vieta sea un circulo.

Resultado:

29

CURSO DE HTML

6.- IMGENES Y OBJETOS

No slo encontramos texto en una pginas, tambin encontramos otros objetos que dinamizan estticamente el aspecto de nuestra pgina web. Encontramos todo tipo de objetos, como como applets de Java y vdeos. Aunque el ms comn de los objetos son las imgenes. Hay que precisar que algunas imgenes complementan la informacin textual, mientras que otras son meramente estticas. Esta diferenciacin nos marca cmo codificarlas. En el primer caso se incluyen directamente en el cdigo HTML mediante la etiqueta <img> seguido de src, para indicar la url donde se localiza el archivo y su nombre, mientras que las imgenes estticas se deben incluir en el cdigo de las hojas de estilos CSS para mostrarlas. La sintaxis para inclusin de imgenes es: <img src="carpeta1/imagen1.gif"> como direccin relativa. <img src = "http://fondospantalla.org/imagen/1024/naturaleza/paisajes/paisajes100.jpg> como direccin absoluta. Veamos los atributos que tiene la etiqueta <img>: alt: Es el texto que aparece cuando se sita el cursor sobre la imagen. Tambin se muestra el texto si no la carga el navegador. align: Indica la posicin de la imagen respecto del texto. Toma los siguientes ir los valores: top: texto alineado con la parte superior de la imagen middle: texto alineado con la parte central de la imagen bottom: texto alineado con la parte inferior de la imagen left: fuerza el texto arriba a la derecha dejando la imagen a la izquierda right: fuerza el texto arriba a la izquierda dejando la imagen a la derecha width: Indica la anchura de la imagen. height: Indica la altura de la imagen. Si especificamos las dimensiones de las imgenes, las pginas se cargan ms rpido, porque el navegador les reserva un espacio, mientras sigue cargando. border: Aade un borde a la imagen, como un marco alrededor. hspace: Especifica el espacio horizontal que separa la imagen del texto. vspace: Especifica el espacio vertical entre la imagen y el texto.

Existen muchos formatos para guardar imgenes que tienen diferentes extensiones. Pero bsicamente las ms extendidas son los gif y los jpg. Ambos formatos comprimen las imgenes para reducir su tamao, asegurando una transferencia lo ms rpida por la red. Y porque usar este tipo de imgenes? Sencillamente porque si la imagen tarda en cargar, es posible que el usuario se canse de esperar y abandone la pgina. En los casos en que es necesario poner una imagen con una resolucin elevada para ver los detalles, es mejor colocar una imagen pequea y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe que la imagen va a tardar en cargar y tiene que ser paciente.

30

CURSO DE HTML

Ejemplo: En la siguiente imagen se le aplican los estilos para dar formato a la imagen, y de cmo se alinea el texto. <img src="images/audi-5.jpg" align="left" width="200" height="150" alt="Este es el nuevo Audi 5" border="3">Este texto aparece a la derecha de la imagen <br clear=all>Este texto aparece debajo de la imagen Resultado:

31

CURSO DE HTML

6.1 Mapas de imagen Los mapas de imgenes es otra forma de navegacin que permite definir diferentes zonas "pinchables" dentro de una imagen. Cada zona est definida por figuras geomtricas y apunta a una url diferente, cuyo funcionamiento es exactamente el mismo que otros enlaces. Su uso se ha vista muy reducido debido a que ahora se usa tecnologa Flash. Son utilizados en webs que, por ejemplo, tienen portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. Tambin puede ser muy prctico en mapas geogrficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una pgina. Para crear un mapa de imagen, en primer lugar se inserta la imagen original mediante la etiqueta <img>. A continuacin, se utiliza la etiqueta <map> para definir las zonas o regiones de la imagen. Cada zona se define mediante la etiqueta <area>. As pues, un mapa de imagen esta compuesto de dos partes: La imagen propiamente dicha que estar situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML. Un cdigo, situado en el interior de la etiqueta <map>, que delimitara por medio de lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen. Estas lneas se definen por coordenadas x,y. Siendo el origen la esquina superior izquierda. Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de pequeo tamao que sern distribuidas a lo largo y ancho de la imagen. Veamos a continuacin el cdigo que utilizaremos: <img src="imagen.gif" usemap="#mapa_zonas" /> <map name="mapa_zonas"> <area shape="rect" coords="20,25,84,113" href="rectangulo.html" /> <area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html"/> <area shape="circle" coords="130,114,29" href="circulo.html" /> <area shape="rect" coords="19,156,170,211" href="mailto:rectangulo@direccion.com" /> <area shape="default" nohref="nohref" /> </map> Cada rea se indica con una etiqueta <area>, que tiene los siguientes atributos: alt: Para indicar un texto explicativo que se mostrar cuando situemos el ratn en el rea. Es recomendable indicarlo para hacer la navegacin ms intuitiva. shape: Indica el tipo de rea, rect, circle y poly. coords: Las coordenadas que definen el rea. Son un grupo de valores numricos distintos dependiendo del tipo de rea (shape) que definamos. href: Para indicar el destino del enlace correspondiente al rea. 32

CURSO DE HTML

6.2

Test

1. "src" indica: La La La La direccin direccin direccin direccin de de de de un formulario. una imagen. un enlace. un texto.

2. Indica cual es verdadera o falsa: Las pginas se cargan ms rpido si el navegador no les reserva un espacio, mientras sigue cargando. <img src="../images/car.gif"> es una direccin de tipo relativa En un mapa de imagen las coordenadas determinan un rea para formar un enlace de tipo lnea Un mapa de imagen podra servir para descargar un archivo 3. El cdigo de la siguiente pgina web es:

<a img src="images/barcos.jpg" align="center" width="250" height="250" border="1">La playa en invierno</a> <img src="images/barcos.jpg" align="center" width="250" height="250" border="1">La playa en invierno</img> <img src="images/barcos.jpg" align="center" width="250" height="250" border="1">La playa en verano</img> 33

CURSO DE HTML

6.3

Ejercicio

En este ejercicio5.html vamos a insertar una imagen, con las siguientes dimensiones: ancho de 175 px y alto de 125 px, aadir un borde de 3 px y por ltimo un mapa de imagen de forma rectangular, con sus correspondientes coordenadas. Al pinchar sobre esta imagen nos llevar a otra imagen con las dimensiones que traiga por defecto. Resultado:

34

CURSO DE HTML

7.- TABLAS
Las tablas constituyen el mejor mtodo para la organizacin de datos estructurados en celdas y organizados en filas (horizontales) y columnas (verticales). Es muy importante tener claro que organiza datos y no contenidos. Aunque resulte muy cmodo para maquetar textos e imgenes, ya que presenta un aspecto en que todos los elementos esta muy bien colocados unos respecto a otros, un buen profesional lo hace usando CSS (capas). El cdigo resultante es limpio y sobre todo estndar, para que todos los navegadores encuentren nuestra pgina web accesible y que supere la validacin de la W3C. Las etiquetas que necesitamos para definir una tabla son: <table> y </table>: crea la tabla <tr> y </tr>: indican el comienzo y final de una fila <th> y</th>: indican si es una fila de cabecera <td> y </td>: indican una celda El orden en que se establece la tabla se va definiendo primero declarando una fila y a continuacin las celdas que contiene esa fila, luego otra fila y sus celdas, etc. No es necesario que todas las filas contengan el mismo nmero de celdas. Atributos de la Tabla border: Indica el tamao del borde. Si no se indica nada no aparece. width: Es el ancho de la tabla. Se puede indicar en pxeles o porcentaje. cellspacing: Es el espacio entre las celdas, y por defecto es 2. cellpadding: Es el espacio entre el contenido de las celdas y su borde. Por defecto es 1. align: Para alinear la tabla a la izquierda (left), a la derecha (right) o en el centro (center). Atributos de fila y celda width: Es el ancho de toda la fila o celda. align: Para alinear el contenido a la izquierda (left), a la derecha (right) o en el centro (center). Valign: Para alinear el contenido en la vertical, arriba (top), en el medio (middle) o abajo (bottom). colspan: Indica el nmero de celdas que se fusionan en la columna. rowspan: Indica el nmero de celdas que se fusionan en la fila. bgcolor: Asigna un color de fondo a la fila o celda.

35

CURSO DE HTML

En algunos caso resulta til el uso de tablas anidadas. De forma que puede incluirse una tabla en una celda. El funcionamiento sigue siendo el mismo, aunque no hay que excederse en el grado de anidacin, porque pueden aparecer problemas de visualizacin y tambin que la pgina web tarde ms en cargar.

Ejemplo:
<table border="3" cellspacing="5" width="400"> <tr> <th colspan="2" bgcolor="#dd8811">Aqui va el ttulo de la tabla</th> </tr> <tr> <td align="center">Esta es la celda de la 1 fila y de la 1 columna</td> <td align="center">Esta es de la 1 fila y de la 2 columna</td> </tr> <tr> <td bgcolor="#6D8FFF">Esta celda tiene el fondo azul</td> <td align="right" valign="bottom" bgcolor="#44dd66"> Esta celda tiene el fondo verde y el texto alineado a la derecha </td> </tr> </table> Resultado:

36

CURSO DE HTML

7.1

Test

1. En el siguiente cdigo, X es igual a: <table> <tr> <X>Navegador</X> <X>Uso mundial</X> </tr> <tr> <td>Firefox</td> <td>44%</td> </tr> <tr> <td>I. Explorer</td> <td>46%</td> </tr> <tr> <td>Otros</td> <td>10%</td> </tr> </table> td th tt 2. Las tablas se utilizan para: Organizar Organizar Organizar Organizar contenidos y datos contenidos datos canciones

3. Indica cual es verdadera o falsa: El espacio entre las celdas es cellspacing. Para alinear el contenido arriba o abajo usamos align Si el borde de la tabla es 0 px no aparece ningn borde de tabla El grado de anidamiento es de 9 tablas

37

CURSO DE HTML

7.2

Ejercicio

En este ejercicio6.html vamos a crear una tabla anidada: La primera tabla tiene los espaciados cellspacing y cellpadding de 4px. Un borde de 1 px y un ancho total de 500 px. El tamao es de 2 x 2. En la 1 fila las dos celdas estn unidas, color 456789 y texto Pases del continente americano va centrado. En la 2 fila tenemos 2 celdas y en cada una de ellas el texto Amrica del Norte y Amrica del Sur respectivamente se alinean a la derecha, con 1 px de cellspacing, cellpadding y de border. Insertamos en cada celda de la 2 fila una segunda tabla con dos filas, color de fondo cc77cc y texto alineado en el centro. Con 2 pases para cada celda segn grfico. Resultado:

38

CURSO DE HTML

8.- FORMULARIOS
Uno de los aspectos que hacen atractiva la web es la interactividad, es decir, la posibilidad de intercambio de informacin. Cualquier usuario puede realizar numerosas acciones como comprar, enviar comentarios, apuntarse a foros, solicitar el envo de boletines, rellenar encuestas, etc. Para ello HTML nos proporciona una herramienta muy til: los formularios. Los formularios son un conjunto de cajas de texto y botones que se usan para realizar bsquedas o bien para introducir datos personales. Un usuario rellena este formulario con cierta informacin para realizar una determinada accin de su inters. Estos datos introducidos se envan a travs del correo electrnico al administrador del formulario. Y a partir de aqu se empieza su procesamiento. El tratamiento de los datos requiere del uso de lenguajes como ASP o PHP que realizan buenos tratamientos de los formularios o bien usar programas prediseados que estn albergados en los servidores. A continuacin se va a explicar en qu consisten los elementos bsicos para la realizacin de un formulario: Abrir y cerrar un formulario

Esto se hace con las etiquetas <form>y </form>. Entre medias irn todas las etiquetas que generan campos, casillas, botones, etc, con sus correspondientes estilos. La sintaxis bsica es: <form action="mailto:nombre@tienesunemail.es" METHOD="post" ENCTYPE="text/plain"> ... </form> Veamos esta sintaxis por partes: - action: indica la url que gestiona los datos del formulario, tambin vale una direccin de correo. - method: indica cmo se mandar el formulario, usa valores GET o POST. Si tomamos como eleccin GET, todas las variables se enviarn por la direccin html, es decir, cuando recarguemos la pgina web al haber enviado el formulario, las variables aparecen en la barra de direcciones. Esto no es lo ms recomendable, pues estamos mostrando datos confidenciales. Por eso usamos el mtodo POST, porque consiste bsicamente en enviar las variables de forma oculta para que nadie pueda ver los datos que ha enviado al pulsar el botn de envo de formulario. - enctype: indica en qu forma viaja la informacin. Para el envo del formulario por correo electrnico usaremos "text/plain". No lo indicaremos en el caso de que queramos que lo procese un programa. Entrada de texto corto Se crea una caja de texto con la etiqueta <input> e </input>, con la siguiente estructura: <input type="text" size="30" name="Nombre">

39

CURSO DE HTML

Veamos esta sintaxis por partes: - type: tipo de entrada de los datos - size: es el tamao de la caja de texto - name: es el nombre del contenido Luego tendremos una caja con un ancho de 30 y lo que escribamos nos llegar asociado a la palabra Nombre:

Entrada de texto largo

Para obtener una caja de texto con varias lneas se utiliza la etiqueta <textarea> con su cierre </textarea> de la siguiente manera: <textarea name"comentario" rows=3 cols=50> Escriba su mensaje </textarea> Veamos esta sintaxis por partes: - name: es el nombre del contenido. - rows: para definir el nmero de lneas - cols: para definir el nmero de columnas

Escriba su mensaje

Lista de opciones

La lista de opciones son unos mens desplegables que nos permiten escoger una o varias de las opciones que se proponen. Para su creacin usamos la etiqueta <select> y </select> con su correspondiente cierre, dentro de la siguientes sintaxis: <select name="flores" size="4"> <option selected> rosa <option> lirio <option> buganvilla <option> calas </select> Veamos los atributos de select: - option: cada opcin que queramos que aparezca deber ser incluida en una lnea precedida de la etiqueta <option> - name: asigna un nombre al contenido

40

CURSO DE HTML

- size: indica el nmero de valores mostrados o visibles de la lista. El resto se pueden ver utilizando la barra lateral de desplazamiento - multiple: permitir seleccionar varios elementos de la lista a la vez - selected: atributo de la etiqueta <option>, mediante el cual el elemento est seleccionado por defecto. - value: atributo de la etiqueta <option> al cual debemos asignar un valor numrico. Dicho valor ser el enviado al programa o correo electrnico si el usuario selecciona esa opcin. Botones de radio o de opcin

Nos permite elegir una opcin entre varias posibilidades. Al seleccionar una, se deselecciona otra, es decir, las opciones son excluyentes. La etiqueta empleada en este caso es <input>, sin cierre, en la cual tendremos el atributo type que ha de tomar el valor radio. La sintaxis es: <input type="radio" name="estacion" value="1">Primavera <input type="radio" name="estacion" value="2">Verano <input type="radio" name="estacion" value="3">Otoo <input type="radio" name="estacion" value="4">Invierno Veamos sus atributos: - name: a todas las opciones se les asigna un nombre - value: y para cada opcin un valor distinto El resultado es el siguiente: Primavera Verano Otoo Invierno Si el usuario elige supuestamente Otoo, recibiremos en nuestro correo una lnea como esta: estacion=3. Con lo que ya sabremos que 3 est asociado a otoo. Cabe sealar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked: <input type="radio" name="estacion" value="2" checked>Verano Veamos el efecto: Primavera Verano Otoo Invierno Casillas de verificacin o Checkboxes

Las casillas de verificacin nos permiten elegir entre varias posibilidades, bien una o ms casillas. Recibiremos como dato el valor de la casilla sealada en name.

41

CURSO DE HTML

Ejemplo:

<input type="checkbox" name="color" value="azul"> <input type="checkbox" name="color" value="blanco"> <input type="checkbox" name="color" value="naranja">

Resultado: azul blanco naranja Botones envo y borrado

En los formularios existen dos botones imprescindibles. Son los botones de Enviar y Borrar. Su sintaxis es la siguiente: < input type="submit" value="enviar"> < input type="reset" value="borrar"> Al presionar en el botn de enviar lo que ocurre es que una vez validadas las casillas y est todo correcto, el contenido de todo el formulario ser enviado a la direccin de correo indicada. El botn de borrar lo que produce es un reseteo de todos los contenidos de los campos. Ejemplo de un formulario de viajes: <form action="mailto:nombre@tienesunemail.es" method="post" enctype="text/plain"> <center><table bgcolor="#55cc11" border="0" cellpadding="6" cellspacing="0" width="500"> <tr> <td align="right" valign="top"><b>Nombre completo</b></td> <td><input type="text" size="35" name="Nombre"> </td> </tr> <tr> <td align="right" valign="top"><b>E-mail</b></td> <td><input type="text" size="25" name="e-mail"> </td> </tr> <tr> <td align="right" valign="top"><b>Provincia</b></td> <td><input type="text" size="25" name="Provincia"> </td> </tr>

42

CURSO DE HTML

<tr> <td align="right" valign="top"><b>Pais</b></td> <td><input type="text" size="25" name="Pais"> </td> </tr> <tr> <td align="right" valign="top"><b>Frecuencia de los viajes</b></td> <td><select name="utilizacion"> <option value="1">Varias veces al dia <option value="2">Una vez al dia <option value="3">Varias veces a la semana <option value="4">varias veces al mes </select> </td> </tr> <tr> <td align="right" valign="top"><b>En que estacin del ao prefiere viajar?</ b></td> <td> <input type="radio" name="estacion" value="1">Primavera <input type="radio" name="estacion" value="2">Verano<input type="radio" name="estacion" value="3">Otoo<input type="radio" name="estacion" value="4">Invierno </td> </tr> <tr> <td align="right" valign="top"><b>Comentarios</b></td> <td><textarea cols="30" rows="7" name="comentarios">Introduzca aqui su comentario</textarea><td> </tr> <tr> <td align="right" valign="top"><b>Comentarios</b></td> <td><input type="checkbox" name="recibir_info" checked>Deseo recibir notificacin de las novedades en las lneas de autobuses.</td> </tr> <tr> <td></td> <td align="center"><input type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar" name="B1"> </td> </tr> </table> </center> </form>

43

CURSO DE HTML

Resultado:

44

CURSO DE HTML

8.1

Test

1. Cual de los siguientes atributos pertenece a select: selected value size Todas las anteriores 2. Un checkbox corresponde a:

3. Indica cual es verdadera o falsa: Botones de radio nos permite elegir una opcin entre varias posibilidades. Botones de borrado enva en mensaje. Casillas de verificacin nos permiten seleccionar slo una opcin entre varias. Los formularios son un conjunto de cajas de texto y botones que se usan para introducir datos con los que realizar clculos. 4. Para crear una entrada de texto de 20 caracteres usaremos la etiqueta: <input <input <input <input type="reset" value="Borrar" name="B1"> type="text" size="20" name="Nombre"> type="radio" name="estacion" value="20"> type="checkbox" name="forma" value="redondo">

5. Al presionar un botn de tipo submit se enva la informacin de la forma "get" y "post", stas se diferencian en que: POST se encarga de ocultar y encriptar los valores del envo GET muestra los valores del envo en la barra del navegador Las dos anteriores son correctas Las dos anteriores son incorrectas

45

CURSO DE HTML

8.2

Ejercicio

En el ejercicio7.html vamos a construir un formulario para usuarios: El ttulo Registro de Usuario como una cabecera h5. Insertar el formulario y para que quede organizado crear una tabla de tamao 6 x 2 y sin borde. En la 1 fila Apellido y en la 2 celda una caja de texto de tamao 20. En la 2 fila Nombre y en la 2 celda una caja de texto de tamao 20. En la 3 fila Gnero y en la 2 celda dos radiobuttoms para Hombre y Mujer. En la 4 fila Ocupacin y en la 2 celda un men desplegable para Trabajador, Estudiante, Autnomo, Jubilado y Otro. En la 5 fila los botones de Enviar y Borrar. Resultado:

46

CURSO DE HTML

9.- FRAMES
Los frames o marcos nos sirven para dividir la ventana del navegador en diferentes reas, cada una de las cuales es independiente. De forma que cada marco corresponde a un archivo html distinto con sus propias barras de desplazamiento, propiedades... Se crean frames con la etiqueta <frameset>. Y el habitual <body> es sustituido por frameset. Dentro de esta etiqueta primero definimos cada uno de los marcos ponindoles un nombre y especificando qu fichero html le corresponde mediante la etiqueta <frame>, y por ltimo indicamos lo que debe de aparecer al usuario en el caso de que su navegador no soporte frames utilizando la etiqueta <noframes>. Mediante la etiqueta <frame> y el atributo src definimos la procedencia de cada una de las filas o columnas. El valor del atributo src es la ruta y el nombre del archivo html que va a mostrar el frame. Habr tantas etiquetas <frame> como particiones. Ejemplo: <html> <head> <title>mi primera pgina con marcos</title> </head> <frameset cols="30%,70%"> <frame name="menu" src="index.html"> <frame name="contenido" src="content.html"> <noframes> <p>Si ves esto quiere decir que tu navegador no tiene la capacidad de visualizar marcos.</p> </noframes> </frameset> </html> Resultado: menu Contenido

Cada rea en la que se divide la ventana viene definida por los parmetros cols (columnas) o rows (filas). En el atributo cols o rows colocamos entre comillas el nmero de particiones que deseamos realizar, indicando de paso el tamao que va a asignarse a cada una. Los formatos de tamao son los siguientes: 47

CURSO DE HTML

Porcentajes: porcentaje referido al espacio total disponible. Absolutos: mediante un nmero especificando el tamao en pxeles. Sobre el espacio sobrante: si colocamos un asterisco (*) indicamos que se va a utilizar todo el espacio sobrante. Si ponemos el asterisco en ms marcos lo que hace es repartir por igual el espacio entre todos. Si queremos que algn marco sea mayor anteponemos un nmero al asterisco. Ejemplo: <frameset cols="10%,*,200,2*"> En este ejemplo vamos a tener 4 marcos para un ancho de 800 pxeles: el 1 er marco son 80 px, el 3 200 px y el 4 tendr el doble que el 2, entonces se asigna 140 px al 2 y 280 px al 4 . Los parmetros de esta etiqueta son: name: Asigna un nombre a un marco para que despus podamos referirnos a l. src: Indica la direccin del documento HTML que ocupar el marco. scrolling: Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto auto, que deja al navegador la decisin. Las otras opciones que tenemos son yes y no. noresize: Si lo especificamos el usuario no podr cambiar de tamao el marco. frameborder: Al igual que su homnimo en la etiqueta <frameset>, si lo igualamos a cero se eliminar el borde con todos los marcos contiguos que tengan tambin este valor a cero. marginwidth: Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en pxeles. marginheight: Igual al anterior pero con mrgenes verticales. frameborder: Indica el grosor del borde. Si es 0 el navegador elimina el borde. framespacing: Indica el hueco entre marcos. Qu ocurre cuando pinchamos en un enlace dentro de un marco? Pues que el nuevo contenido se abre slo en ese marco. Para que nos muestre el contenido donde nosotros queramos utilizaremos el parmetro target. Que va con las etiquetas <a> y <area> indicando el marco en el que abriremos ese enlace y con la etiqueta <base> con la que modificaremos el marco en el que se nos muestran los enlaces por defecto. El valor que le asignaremos a target para que nos muestre la informacin que queremos es el nombre del frame: Ejemplo: <a href="contacto.html" target="contenido"> Tambin existen cuatro nombres reservados que podremos utilizar: _top: muestra la nueva pgina en la ventana completa del navegador. _blank: muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self: muestra la nueva pgina en el mismo frame. _parent: muestra la nueva pgina en el frame ''padre'' del que viene el actual. nombre: muestra la nueva pgina en el frame llamado nombre.

48

CURSO DE HTML

Ejemplo: <html> <head> <title> Ejemplos de Frames </title> </head> <frameset cols="150,*"> <frame name="izda" src="left.html"> <frame name="central" src="centre.html"> </frameset> </frameset> <html> Resultado:

49

CURSO DE HTML

9.1

Test

1. La sintaxis para indicar que el contenido de un frame se muestre en una nueva ventana: <a <a <a <a href="contacto.html" href="contacto.html" href="contacto.html" href="contacto.html" target="_blank"> target="contenido"> target="_parent"> target="_top">

2. Identifica la notacin correcta para un ancho de 800px: <frameset cols="100,*,2*,20%"> <frameset cols="500,10%,200,*"> Ninguna de las anteriores Cualquiera de las anteriores 3. Indica cual es verdadera o falsa: Los frames se sitan en el body y poseen la capacidad de anidarse Para mostrar el contenido en la ventana completa del navegador usamos _top Para modificar el tamao del marco usamos la etiqueta noresize Cada frame o marco es independiente del resto de frames

50

CURSO DE HTML

9.2

Ejercicio

En este ejercicio8.html vamos a crear un frame tpico, cuyo espacio se divide en tres marcos. Veamos sus caractersticas: En el ejercicio8.html se divide el espacio en 2 filas, la 1 con el 15% del espacio y que carga head.html y la 2 fila con el resto. En esta 2 fila creamos 2 columnas, la 1 con el 20% del espacio y que carga menu.html y la 2 con el resto que carga cuerpo.html. En head.html ponemos un fondo de color #66ffff, colocar el ttulo de mi pgina web con un encabezado h2 y centrado. En menu.html creamos una lista desordenada con los epgrafes enlace uno, enlace dos y enlace tres que actuarn como hipervnuclo y mostrarn su contenido en el frame cuerpo. En cuerpo.html se va a mostrar el texto Aqui se muestra el contenido principal. En este espacio se puede apreciar la funcionalidad del men, donde se mostrar el contenido de cada epgrafe. Crear enlace1.html, con un contenido a elegir desde un texto, imgenes, etc. Para comprobar que al pinchar sobre el enlace uno, ste funciona adecuadamente, y muestre su contenido en el frame cuerpo.html. Resultado:

51

CURSO DE HTML

10.- MIGRACIN A XHTML

Hasta aqu ya sabemos HTML 4.0 para crear nuestras pginas web, y entonces para que migrar a XHTML 1.0? debido a la rapidez con que el mundo web est cambiando, se demanda otra manera de acceder a nuestros contenidos en la red. El objetivo principal de migrar a XHTML es la creacin de una familia de tipos de documentos que pretende sistematizar el lenguaje para dar soporte a cualquier dispositivo, y que a partir de su modularizacin, y dependiendo de las caractersticas y necesidades de cada plataforma (ordenadores, televisores, consolas de juego, lectores de voz, dispositivos de mano, telfonos, etc.), se d soporte para ms o menos mdulos. Por estos motivos los nuevos sitios web han de crearse ajustndose a los estndares CSS, han de ser optimizados para buscadores y otras herramientas y han de cargar rpidamente en el navegador para que el acceso resulte rpido y eficaz. Veamos algunas generalidades para la migracin: Los documentos deben ser "gramaticalmente correctos" A partir de ahora todos los elementos deben tener etiquetas de cierre. Existen casos como <img> y <br> que no tienen. Esto se resuelve aadiendo la barra / y un espacio antes del cierre, es decir, <img /> y <br />. Los elementos deben estar bien anidados. Se refiere a que elementos block (prrafos, headings, listas, etc) no se pueden meter dentro de elemento inline (etiquetas de formato, enlaces, etc) Minsculas y comillas. Los nombres de elementos y atributos deben escribirse en minscula, ahora no significa lo mismo <li> que <LI>. Todos los atributos tienen que estar entre comillas dobles. Etiquetas y atributos que desaparecen. Debido a que XHTML deja de lado la presentacin del documento, porque ya es controlado por CSS, existen etiquetan que ya no tiene sentido utilizar. Es el caso de <font>, atributos referentes a color, imgenes de fondo, alineacin, negrita, cursiva o lo que tenga que ver con estilo sern sustituidos por reglas CSS. Accesibilidad de un documento Hay que facilitar la compresibilidad de un sitio web. Para ello podemos usar el atributo alt de la etiqueta <img>, que muestra un texto cuando la imagen no se puede cargar o al pasar el cursor por encima. Existe otro atributo muy til en los hipervnculos, que usado en la etiqueta <a>, nos informa de a dnde nos dirige ese enlace y se llama title. Frames y Tablas En cuanto a los frames no se recomienda en absoluto su uso ya que supone ir en contra de la accesibilidad de un documento. Y por consiguiente, el atributo target de la etiqueta <a> tampoco. En cuanto a las tablas, es muy importante resaltar que no se usan para maquetar. Por supuesto que una tabla pasara el anlisis del validador del W3C, pero se ha diseado para representar informacin tabulada, no para disear maquetas o layouts.

52

CURSO DE HTML

Caja contenedora Y entonces, como se maqueta un pgina web?. Pues con CSS. Se dispone una caja contenedora en la que iremos poniendo todas los dems elementos. Es una buena manera de que empecemos a concebir el diseo de forma ms parecida al diseo grfico, de forma que en esta especie de contenedor, al que le damos unas dimensiones determinadas, se colocan todos los elementos sin que sobresalga nada y para que el conjunto funcione correctamente. Usaremos una estructura como la siguiente: <div id="contenedor"> </div>

Caracteres especiales El juego de caracteres o "charset" que definimos al principio del documento le dir al navegador cmo debe interpretar los caracteres que se encuentre en el texto. Para nuestro idioma es el "Occidental ISO-8859-1", que contiene todos los caracteres de los idiomas occidentales como la ee, las vocales con tilde o los circunflejos del francs, y el "UTF-8", que contiene miles de caracteres de los alfabetos de muchos de los idiomas de todo el mundo. El famoso & da muchos problemas al validador del W3C, as que es necesario insertar ciertos caracteres de forma segura. En el caso de & sustituirlo por &amp, los caracteres con acentos, como , ahora es &aacute.

53

CURSO DE HTML

11.- EJERCICIO PRCTICO FINAL

En este Ejercicio_Final.html vamos a crear un sitio web bsico: En Ejercicio_Final.html vamos a crear dos frames. La fila superior tiene un tamao del 10% del total del espacio y se llama cabecera.html. Y la fila inferior abre otro frame con una columna a la izquierda llamado barra.html y dimensin del 25% del ancho total y la columna derecha llamada contenido.html. En cabecera.html insertamos el texto alineado Arquitectura Romana en h2. En barra.html disponemos en un listado los epgrafes siguientes: Templo Principal Tiendas y Mercados Teatros y Anfiteatros Dioses Contacto En contenido.html simplemente poner una introduccin con el texto Principales Caractersticas de la Civilizacin Romana

54

CURSO DE HTML

Bajo el epgrafe Templo Principal, hay un hipervnculo a templo.html en el que se muestra el siguiente contenido, dividido en dos prrafos: El templo principal de la ciudad de Roma, el capitolio, estuvo por lo general localizado en un extremo del foro. El templo romano fue el resultado de una combinacin de elementos griegos y etruscos: planta rectangular, tejado a dos aguas, vestbulo profundo con columnas exentas y una escalera en la fachada dando acceso a su alto pdium o plinto. Los romanos conservaron los tradicionales rdenes o cnones griegos (drico, jnico y corintio), pero inventaron otros dos: el toscano, una especie de orden drico sin estras en el fuste y el compuesto, con un capitel creado a partir de la mezcla de elementos jnicos y corintios. La Maison Carre de la ciudad francesa de Nimes (c. 16 d.C.) es un ejemplo excelente de la tipologa romana templaria. Los templos romanos no se levantaron nicamente en el foro, sino que aparecen tambin a lo largo de toda la ciudad y en el campo. Uno de los ejemplos posteriores ms influyentes fue el Panten (118-128 d.C.) de Roma, que consisti en el habitual vestbulo o prtico columnado cubierto a dos aguas, seguido por un espacio cilndrico cubierto por una cpula, sustituyendo la tradicional cella o habitacin principal rectangular. Los templos rotondos, ms simples, como el construido hacia el 75 a.C. en Tvoli, cerca de Roma, basados en prototipos griegos de cellas circulares perpteras, fueron tambin populares. En Espaa subsisten algunos restos arqueolgicos de templos de poca romana en las ciudades de Barcelona, Mrida (dedicado a la diosa Diana), Crdoba (columnas de la calle Claudio Marcelo) y Sevilla.

55

CURSO DE HTML

Bajo el epgrafe Tiendas y Mercados, hay un hipervnculo a tienda.html en el que se muestra el siguiente contenido, en un nico prrafo: Los edificios ldicos y las tiendas estaban diseminados por toda la ciudad de Roma. Generalmente las tiendas eran unidades de una habitacin (tabernae) abiertas a las aceras. Muchas muestras, incluyendo las que asociaban el molino con la panadera, se conservan an en Pompeya y en otros lugares. A veces, se construy un complejo unificado de tiendas, como los mercados de Trajano (98117 a.C.) en la colina del Quirinal en Roma, que incorporaron numerosos locales comerciales (tabernae) en diferentes niveles y grandes vestbulos abovedados de dos pisos.

56

CURSO DE HTML

Bajo el epgrafe Teatros y Anfiteatros, hay un hipervnculo a teatro.html en el que se muestra el siguiente contenido, dividido en tres prrafos: Los teatros romanos aparecieron por primera vez al final del periodo republicano. Constaban de un alto escenario junto a un foso semicircular (orchestra) y un rea circundante de asientos dispuestos en gradas (cavea). A diferencia de los teatros griegos, situados en pendientes naturales, los teatros romanos se construyeron sobre una estructura de pilares y bvedas y de esta manera pudieron ubicarse en el corazn de las ciudades. Los teatros fueron populares en todos los lugares del Imperio. Podemos encontrar ejemplos impresionantes en Orange (principios del siglo I d.C., Francia) y en Sabratha (finales del siglo II d.C., Libia). Los teatros de Itlica y de Mrida fueron realizados en tiempos de Augusto y de Agripa, respectivamente. El segundo de ellos, aunque presenta diferentes fases constructivas, destaca por su prtico a modo de gran fachada trasera del escenario (frons scaenae) del siglo I d.C. y por su orchestra semicircular. Los anfiteatros (literalmente, teatros dobles) tuvieron planta elptica con una pista (arena) central, donde se celebraban combates entre gladiadores y animales, y un gradero alrededor similar al de los teatros. El anfiteatro ms antiguo conocido es el de Pompeya (75 a.C.) y el ms grande es el Coliseo de Roma (70-80 d.C.), que poda albergar a unos 50.000 espectadores, ms o menos la capacidad actual de los estadios deportivos. En la Hispania romana destacan los anfiteatros de Mrida, Tarragona e Itlica. Los circos o hipdromos se construyeron tambin en las ciudades ms importantes; la plaza Navona de Roma ocupa el lugar de un circo que fue construido durante el reinado de Domiciano (81-96 d.C.). En las ciudades de Tarragona, Sagunto y Toledo pueden hoy da contemplarse algunos restos de antiguos circos romanos.

57

CURSO DE HTML

Bajo el epgrafe Dioses, hay un hipervnculo a tabla.html en el que se muestra el siguiente contenido, estructurado en una tabla de 3 x 15: La tabla tiene un ancho del 100% del espacio. Los ttulos son NOMBRE GRIEGO, NOMBRE ROMANO y PAPEL EN LA MITOLOGA El contenido para las celdas son Afrodita / Venus / Diosa de la belleza y del deseo sexual Apolo / Febo / Dios de la profeca, la medicina y la arquera Ares / Marte / Dios de la guerra Artemisa / Diana / Diosa de la caza Atenea / Minerva / Diosa de las artes y oficios, y de la guerra; auxiliadora de los hroes Dmeter / Ceres / Diosa de los cereales Dionisio / Baco / Dios del vino y de la vegetacin Eros / Cupido / Dios del amor Gaya / Tierra / Madre Tierra Hermes / Mercurio / Mensajero de los dioses; protector de los viajeros, ladrones y mercaderes Hipnos / Sueo / Dios del sueo Poseidn /Neptuno / Dios de los mares y de los terremotos Urano / Urano / Dios de los cielos; padre de los titanes Zeus / Jpiter / Soberano de los dioses olmpicos

58

CURSO DE HTML

Bajo el epgrafe Contacto, hay un hipervnculo a contacto.html en el que se muestra un formulario de contacto: El formulario es de method post y action con tu email de contacto. En la tabla donde va el formulario poner un color de fondo #2255cc, sin borde con cellspacing 0 y cellpadding 6, el ancho de la tabla es de 200 px. Los campos son Nombre con su caja de texto, E-mail con su caja de texto y Comentarios con una caja de texto de 30 columnas y 7 filas. Aadir al final dos botones Enviar que enva datos a la direccin de correo electrnico indicado en el form y Borrar que resetea los datos introducidos.

59

CURSO DE HTML

12.- BIBLIOGRAFA
http://www.w3c.es/ http://es.html.net/ http://www.virtualnauta.com/

60