Lenguaje HTML Introduccin

Breve resea sobre la World Wide Web

La World Wide Web, nace en 1989 por un investigador del Centro Europeo de Investigacin Nuclear (CERN), llamado Tim Berners-Lee quien invent un sistema de intercambio de informacin en la Red con posiblidades multimedia, que se conocera posteriormente como World Wide Web. Para ello dise un esquema basado en tres pilares: 1. URI (Universal Resource Identifier, Identificador Universal de Recursos) para que todos los documentos tengan un nombre nico. 2. HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) para la gestin de trfico documental. 3. HTML (HyperText Markup Language, Lenguaje para el Formato de Documentos de Hipertexto) para la creacin y edicin de los documentos web. Podra, este sistema, conceptuarse como una gran red de discos duros donde se alojaran los millones de documentos web enlazados entre s. Podemos pensar a Internet como un espacio de flujos incesantes en el cual permanentemente circulan representaciones simblicas en forma de arte, dinero, conocimiento, entretenimiento, luchas sociales y polticas, etc. Es decir, podemos pensar en la red como un espacio privilegiado por donde fluyen el lenguaje y el pensamiento, bajo una forma especfica de sociabilidad. Dado que actualmente existen varios protocolos que gestionan el trafico documental y de contenido en Internet se hace necesario estandarizar la normativa que haga posible su compatibilidad. Desde los comienzos, el Consorcio de la World Wide Web (W3C) presidida por su ideador, es la organizacin que elabora y publica los estndares que hacen posible la web.

Qu es el HTML?

Los elementos pueden ser representados por cabeceras, prrafos, enlaces de hipertexto, listas, archivos multimedia incrustados y una gran variedad de otras estructuras El HTML, acrnimo ingls de HyperText Markup Language, es el cdigo que posibilita la creacin y edicin de documentos web. Es un metalenguaje heredado del SGML basado en etiquetas (tags) que tiene como virtud entre otras, la de poder ser implementado por cdigo de otros lenguajes como JavaScript o Visual Basic Script que amplan y mejoran su capacidad original. El cdigo HTML utiliza el cdigo ASCII puro que puede teclearse en cualquier editor bsico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla.

La sintaxis de HTML est estructurada segn el siguiente protocolo o sintaxis: 1. 2. 3. 4. Una etiqueta inicial que seala el comienzo de un elemento Un nmero determinado de atributos (y sus valores asociados) Una cierta cantidad de contenido (caracteres y otros elementos) Una etiqueta que marca el final.

Muchos componentes o elementos de HTML incluyen atributos especficos en las etiquetas de comienzo, que definen el comportamiento, o indican propiedades adicionales de dichos elementos. La etiqueta que delimita el final es opcional para algunos elementos. En muy pocos casos, un elemento vaco puede no contener o requerir la etiqueta de final. Hay algunos elementos que no forman parte de las definiciones del tipo de documento (DTDs) oficiales. En la actualidad, muchas de stas son soportadas por algunos navegadores y se utilizan en algunas pginas. Dichos elementos pueden ser simplemente ignorados o, en el peor de los casos, puede que no se muestren con el resultado que se esperaba cuando se disearon, o provoquen errores en aquellos navegadores que no los soporten.

Historia
Internet naci gracias a ARPANET, un proyecto militar desarrollado con la finalidad de mantener una red de transmisin de paquetes entre ordenadores. ARPANET data de 1969 y sus desarrolladores pretendan que sirviera como arma defensiva en caso de una guerra nuclear. De esta forma, si se atacaba una ciudad de Estados Unidos, el resto de nodos (usuarios) de ARPANET se enterara de los acontecimientos y podra mantener el flujo de las comunicaciones. Los desarrolladores de ARPANET comenzaron a investigar protocolos para transmitir paquetes de informacin. Su primer logro fue el desarrollo del protocolo TCP, que todavia se utiliza a en la mayora de redes, y posteriormente inventaron otros como el protocolo para el correo electrnico, el FTP para la transferencia de archivos... En los aos 80 se crea una red paralela, la NSFNET, para cientficos y a la que algunas personas tenan acceso, sobre todo en universidades. Pero nadie se plante crear un protocolo para transmitir datos con formato. Era posible transmitir informacin y archivos pero no archivos con interactividad que se transmitieran y fueran mostrados. Lo que se hizo fue basarse en un lenguaje ya inventado denominado SGML, el cual se basaba en etiquetas tipo <etiqueta atributo="valor">, para crear un lenguaje que indicara cmo se ven la informacin en forma de hipertexto. Con esto naci el HTML, que tena etiquetas SGML, como <a href="http://www.google.es"> (algo as como <vnculo direccin="google.es">). En los aos 90 el protocolo sali a la luz junto a la INTERNET, cuando se abandonaron ARPANET y NSFNET y se us INTERNET nicamente para un pblico abierto de forma que todos pudieramos usarlo. Con ello, se utiliz el protocolo HTTP para que desde nuestras casas llamramos a otro ordenador y ste nos enviara el cdigo HTML de la pgina a nuestro ordenador. De esto se encarga un navegador, que nos permite contactar con el susodicho ordenador y cuando la pgina se enve mostrarla. El navegador interpreta el cdigo HTML y nos lo muestra.

El cdigo
Como su nombre indica el HTML es un lenguaje de "marcado". Si tenemos un texto y queremos convertirlo en una pgina web hemos de ir aadindole marcas que identifiquen que es cada cosa y como debe ser mostrada. Para esto el HTML nos proporciona tres conceptos: elemento, atributo y valor. Para representarlos usaremos las etiquetas.

El elemento y sus etiquetas

Los tags o etiquetas tienen gran importancia en un documento HTML ya que brindan informacin especial que es utilizada para determinar la representacin final del documento. Esto significa que donde se define una etiqueta en el cdigo, algo suceder en la representacin del documento, algunas veces visualmente y otras de manera oculta. Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">". Por ejemplo: el elemento html tiene dos etiquetas: La etiqueta de inicio <html> define el inicio del documento HTML. La etiqueta de cierre </html> define el final del documento HTML. Estas etiquetas le indican al navegador que todo lo hay entre ellas debe ser interpretado como un documento HTML. La etiqueta final se diferencia de la inicial por el signo: /. Si no, no se podra saber cundo empieza y termina un elemento <div>, ya que se pueden contener unos dentro de otros. OJO! Elementos y etiquetas no son la misma cosa, las etiquetas son una plasmacin textual de los elementos. Por ejemplo: el elemento html siempre esta presente en un documento HTML, sin embargo sus etiquetas son opcionales, pueden omitirse, aunque no es recomendable hacerlo. Tambien es necesario tener una lista impresa cuando se inicia el trabajo con html

Los atributos y sus valores

Son las propiedades que se le pueden asignar a los elementos. Por ejemplo,'html se le puede asignar un atributo para indicar en que idioma esta escrito el documento (lang es el atributo) y podemos asignarle como valor un cdigo de idioma ("es" para el espaol, "en" para el ingles...) <html lang='es'>...</html> O sea: <elemento atributo='valor'> ... </elemento> Por supuesto un elemento puede tener varios atributos: <elemento atributo='valor' atributo='valor'> ... </elemento> Los atributos deben estar en la etiqueta inicial, nunca en la final. El orden de los atributos dentro de la etiqueta es indiferente. Deben separarse con un espacio en blanco del nombre del elemento y de otros atributos. Atributo y valor deben estar unidos por el signo: = Los valores deben estar encerrados con comillas, dobles o simples. Esto no es totalmente cierto pero acta como si lo fuera.

Explcito e implcito
El autor (t, por ejemplo) puede asignarle atributos a un elemento de manera explcita, o puede no hacerlo. Si no lo hace, esto no significa necesariamente que el elemento no tenga atributos asignados. Es decir, el elemento puede tener atributos implcitos obedeciendo a la especificacin del W3C, o ms comnmente, puede que la especificacin otorgue libertad a las aplicaciones de usuario (navegadores, por ejemplo) para que le asignen atributos a los elementos segn el criterio de la aplicacin, siempre y cuando el autor no lo haya hecho. Lo dicho tambin es de aplicacin a los valores: el autor puede asignar explcitamente valores a los atributos, si no lo hace... Por ejemplo: cuando escribimos un texto, puede que necesitemos resaltar alguna frase o palabra importante. Para ello, HTML nos proporciona el elemento em para enfatizar texto, pero la especificacin no indica la manera concreta de hacerlo; si el autor tampoco lo hace, la aplicacin de usuario es libre de actuar. La mayora de los navegadores muestran en cursiva el texto marcado con la etiqueta em, pero esto es slo una eleccin de los navegadores, no una caracterstica de em. Sucede lo mismo con la etiqueta strong, que normalmente se representa en negrita. HTML se ha constituido en un OP

Estructura de un documento HTML

Lenguaje HTML/Estructura de un documento HTML

En esta seccin conoceremos los cuatro elementos bsicos que "marcan" la estructura de un documento HTML. Pero antes de nada veamos el esqueleto de un documento HTML vaco:
<!DOCTYPE> <html> <head> </head> <body> </body> </html>

La primera lnea est reservada al DOCTYPE (tipo de documento), despus viene el documento HTML, que est dividido en dos secciones: head (cabecera) y body (cuerpo).

Contenido

1 DOCTYPE 2 Elemento html 3 Elemento head o 3.1 Elemento title 4 Elemento body 5 Ejemplo

DOCTYPE
Define el tipo de documento. Este elemento, que muchos websmaster obvian (incorrectamente), le indica al navegador la versin y tipo de HTML empleado en el documento. De esta forma, el navegador usar el modelo de renderizacin adecuado al tipo de documento. Para HTML 4.01 existen 3 tipos de doctype:

strict: este doctype es el que contiene la definicin de html recomendada por el W3C.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

transitional: este doctype es igual al strict, ms algunos elementos y atributos antiguos que han quedado desfasados, pero que se conservan por aqullo de la compatibilidad.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

frameset: este doctype es igual al transitional ms los elementos especficos para la creacin de marcos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

De no poner el doctype, el navegador interpretar el cdigo html escrito tal y como le parezca mejor. Se obtendrn resultados muy variopintos y distintos de esta forma, incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es poner siempre el doctype correcto.

Elemento html
Delimita el documento HTML, indicando al navegador el comienzo y fin de la pgina html. Sus etiquetas son: <html> (Siempre al comienzo despues del doctype) y </html> (Siempre al terminar el documento); (ambas opcionales salas de todos modos!)

Elemento head
head viene del ingles cabeza y su funcin es delimitar cabecera del documento. Sus etiquetas son: <head> y </head>; (ambas opcionales salas de todos modos!) La cabecera es la seccin apropiada para incluir informacin sobre el documento, la mayora de la cual no ser mostrada a los lectores. Para incluir esta informacin tenemos diversos elementos, de momento solo comentaremos el ms importante:
Elemento title

Indica el ttulo del documento. En general, los navegadores modernos lo muestran en la barra de ttulo de la ventana. Sus etiquetas son: <title> y </title> (ambas obligatorias), por ejemplo:
<html> <head> <title>Turismo en sudamrica</title> </head> </html>

Elemento body
Delimita el cuerpo del documento. Aqu van todos los contenidos de la pgina (texto, imgenes...) Todo lo que queremos mostrar a los lectores de nuestro documento. Sus etiquetas son: <body>, (Para delimitar el comienzo); y </body>, (al terminar, siempre antes de </html>) Continuando con el documento de arriba, ejemplo:
...<'''body'''> El Turismo en sudamnerica... <'''/body'''> </html>

La etiqueta <body> puede tener los siguientes atributos:

text="..." color del texto link="..." color de enlaces no visitados vlink="..." color de enlaces visitados alink="..." color del link activo bgcolor="..." color del fondo background="..." Imagen de fondo

Ejemplo
Si queremos crear nuestra primera pgina Web en HTML 4.01 estricto, con un ttulo original "Mi primera pgina", y un texto igualmente original "Hola mundo". El cdigo sera el siguiente:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf8"/> <title>Mi primera pgina</title> </head> <body> <p>Hola mundo</p> </body> </html>

Formateo de texto
Lenguaje HTML/Formateo de texto

Los documentos suelen tener un ttulo, el texto esta dividido en prrafos, pueden tener partes resaltadas. incluir citas... En esta seccin veremos los elementos HTML que nos permiten darle forma a un documento.

Encabezados
Una buena forma de estructurar un documento es dividirlo en secciones. El HTML permite hacerlo mediante encabezados, que son los ttulos de cada seccin. El elemento de encabezado es el carcter h seguido de un nmero del 1 al 6. As tenemos que los encabezados son:
h1, h2, h3, h4, h5

y h6.

El h1 es el encabezado de mayor tamao y el h6 es el encabezado de menor tamao. Se pueden utilizar los encabezados para anidar secciones, creando una estructura jerrquica. De este modo, el encabezado h1 ser la primer seccin sin anidar, y el sexto ser el mximo nivel de anidamiento.
El siguiente grupo de encabezados...

<h1>Encabezado 1 - Seccin 1</h1> <h2>Encabezado 2 - Seccin 1.1</h2> <h2>Encabezado 2 - Seccin 1.2</h2> <h2>Encabezado 2 - Seccin 1.3</h2> <h3>Encabezado 3 - Seccin 1.3.1</h3> <h3>Encabezado 3 - Seccin 1.3.2</h3> <h2>Encabezado 2 - Seccin 1.4</h2> <h1>Encabezado 1 - Seccin 2</h1> <h1>Encabezado 1 - Seccin 3</h1> <h1>Encabezado 1 - Seccin 4</h1>

...se vera en el navegador, de la siguiente manera:

Encabezado 1 - Seccin 1
Encabezado 2 - Seccin 1.1 Encabezado 2 - Seccin 1.2 Encabezado 2 - Seccin 1.3
Encabezado 3 - Seccin 1.3.1 Encabezado 3 - Seccin 1.3.2

Encabezado 2 - Seccin 1.4

Encabezado 1 - Seccin 2 Encabezado 1 - Seccin 3 Encabezado 1 - Seccin 4

Prrafos

El elemento: p

Es el componente bsico de edicin de textos. Es un elemento en bloque que no puede contener elementos en bloque. Sus etiquetas son: <p> y </p> (la de cierre es opcional, pero sala de todos modos!) Sus principales atributos genricos son:

identificadores: id; class; style; title; i18n: lang; dir;

Sus atributos de transicin:

align - (alineacin)

El elemento: br

La etiqueta <br> introduce un "retorno de carro", es decir que el texto a continuacin de la etiqueta pasa al rengln siguiente.

Citas
Para incluir citas en nuestro texto tenemos tres elementos:

Elemento blockquote

(blockquote = cita-bloque) Es apropiado para citas extensas. Sus etiquetas son: <blockquote> y </blockquote> El efecto de blockquote es que el texto encerrado entre las etiquetas se muestre con sangra a ambos lados.

Elemento q

(quote = cita) Es apropiado para citas cortas. Sus etiquetas son: <q> y </q> (ambas obligatorias)

Elemento cite

(cite = cita) Es el elemento indicado para sealar la fuente o el autor de la cita. Sus etiquetas son: <cite> y </cite> (ambas obligatorias)

Ejemplo de cita corta

El gran filsofo <cite>Scrates</cite> dijo: <q>slo s que nada s.</q>

Ejemplo de cita larga

La <cite> especificacin del HTML 4.01 </cite> dice: <blockquote> Nota. Recomendamos

que las implementaciones de hojas de estilo porporcionen un mecanismo para insertar signos de puntuacin de citas antes y despus de una cita delimitada por un BLOCKQUOTE de un modo apropiado segn el contexto del idioma actual y el grado de anidamiento de las citas. </blockquote>

Dndole nfasis a lo importante

Elemento em

Sirve para darle nfasis al texto. Sus etiquetas son <em> y </em> (ambas obligatorias)

Elemento strong

Sirve para darle mucho nfasis al texto. Sus etiquetas son <strong> y </strong> (ambas obligatorias)
Ejemplo de nfasis em

Codificado as

Se muestra as*

Sirve para darle <em>nfasis</em> al texto

Sirve para darle nfasis al texto

Ejemplo de nfasis strong

Codificado as

Se muestra as*

Sirve para darle <strong> mucho nfasis </strong>al texto

Sirve para darle mucho nfasis al texto

* El ejemplo muestra como se representan los elementos por defecto, la forma de ser representados varia entre navegadores y puede ser modificada mediante CSS.

Definiendo que es gerundio

Elemento dfn

(definition = definicin) Indica que el texto marcado es una definicin. Sus etiquetas son <dfn> y </dfn> (ambas obligatorias)

Elemento abbr

(abbreviation = abreviatura) Indica que el texto marcado es una abreviatura. Sus etiquetas son <abbr> y </abbr> (ambas obligatorias)

Elemento acronym

(acronym = acrnimo) Indica que el texto marcado es un acrnimo. Sus etiquetas son <acronym> y </acronym> (ambas obligatorias)

Centrar textos o imgenes

Elemento center

Las etiquetas <center> y </center> sirven para centrar todo lo que se encuentre entre dichas etiquetas, ya sean textos o imgenes.

Texto con estilo

Elementos de estilo
Nos sirven para indicar cmo queremos que se muestre el texto; podemos dividirlos en dos categoras: Los que modifican texto entre dos etiquetas y Los que modifican el texto que les sigue.
Los que modifican texto entre dos etiquetas Elemento b (bold = negrita) muestra el texto en negrita. Sus etiquetas son: <b> y </b> (ambas obligatorias) Elemento strong (strong = negrita) muestra el texto en negrita. Sus etiquetas son: <strong> y </strong> (ambas obligatorias)

Elemento i (italic = itlica) muestra el texto en cursiva. Sus etiquetas son <i> y </i> (ambas obligatorias) Elemento tt Muestra el texto con caracteres monoespaciados. Sus etiquetas son <tt> y </tt> (ambas obligatorias) Elemento big (big = grande) aumenta el tamao del texto seleccionado. Sus etiquetas son: <big> y </big> (ambas obligatorias) Elemento small (small = pequeo) reduce el tamao del texto seleccionado. Sus etiquetas son: <small> y </small> (ambas obligatorias) Elemento u (underlined = subrayado) Subraya el texto seleccionado. Sus etiquetas son: <u> y </u> (ambas obligatorias) Elemento sup (sup = super) Convierte el texto seleccionado en superndice, por ejemplo: E=mc2. Sus etiquetas son: ^y (ambas obligatorias) Elemento sub (sub = por debajo) Convierte el texto seleccionado en subndice, por ejemplo:texto normal, texto en subndice. Sus etiquetas son: _y (ambas obligatorias) Elemento strike (strike = roto) Convierte el texto seleccionado en tachado, por ejemplo:Texto tachado. Sus etiquetas son <strike> y </strike> (ambas obligatorias) Los que modifican el texto que les sigue

Elemento FONT

Descripcin: El elemento <FONT> puede servirnos para cambiar la fuente del texto que escribimos, el tamao, el color... Por ejemplo: <FONT face="Comic Sans MS"> Mi texto en Comic Sans </FONT> quedara:Mi texto en Comic Sans. Para cambiar la fuente del

texto tendras que poner <FONT face="FUENTE DEL TEXTO"> el texto </FONT> , la fuente tiene que estar instalada en tu ordenador, si quieres puedes poner ms de una fuente por si no reconoce la primera, por ejemplo: <FONT face="Comic Sans MS, Verdana, Script MT Bold"> texto </FONT>, as, si no reconoce la primera fuente, pasar a la segunda, y si no, a la tercera. Para cambiar el tamao del texto el cdigo es: <FONT size="1"> y el tamao ser segn el nmero que indiques. Para cambiar el color tienes que poner este cdigo:<FONT color="*">; el asterisco lo pongo porque hay 2 formas de poner el color, 1: poner el nombre del color en ingls, blue, red... o en el color hexadecimal correspondiente por el color poniendo antes una almohadilla (#), por ejemplo #660033.

Elemento INPUT

La tag <input> define la introduccin de variables. Junto a esta tag encontraremos los siguientes atributos:
type="" Indicar el tipo de variable a introducir. text Indica que el campo a introducir ser un texto. Sus atributos: maxlenght="" Seguido de un valor que limitar el nmero mximo de carcteres a introducir en ese campo. size="" Seguido de un valor que limitar el numero de carcteres a mostrar en pantalla. value="" Indica que no hay valor inicial del campo. Password Indica que el campo a introducir ser una palabra de paso. Mostrar asteriscos en lugar de letras escritas. Sus atributos sern los mismos que para text. Checkbox El campo se elegir marcando de entre varias opciones una casilla cuadrada. value="" Entre comillas se indicar el valor de la casilla. checked La casilla aparecer marcada por defecto. Radio El campo se elegir marcando de entre varias opciones una casilla circular. value="" Entre comillas se indicar el valor de la casilla. Image El campo contendr el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio: src="" Entre comillas escribiremos el nombre del archivo de imagen. hidden El visitante no puede modificar su valor ya que no est visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas. Name="" Indicar el nombre que se asigna a un determinado campo.

Formularios

<FORM ACTION="mailto:unaprueba" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"> Password: <INPUT TYPE="password" NAME="contra"> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche

<INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>

Listas
En este captulo veremos los tres tipos de listas que podemos incluir en nuestros documentos y las herramientas que HTML nos proporciona.

Listas no ordenadas
Son listas en las que la informacin se muestra de forma no secuenciada. Para construirlas emplearemos los elementos: ul y li.

Elemento ul

(unordered list = lista desordenada) Es el que define y delimita la lista. Sus etiquetas son: <ul> y </ul> (ambas obligatorias) Sus principales atributos genricos son: style - (estilo) define estilos. Sus principales atributos de transicin son: type - (tipo) estilo de vieta. Valores posibles: 'disc' (disco), 'circle' (crculo) y 'square' (cuadrado)

Elemento li

(list item = item de la lista ) Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional sala de todos modos!) Sus principales atributos genricos son: style - define estilos. Sus principales atributos de transicin son: type - tipo de vieta. Valores posibles: Los mismos que en ul; 'disc', 'circle' y 'square'

Ejemplo de lista no ordenada

<ul> <li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas de definiciones</li> </ul>

El resultado ser este: Listas ordenadas Listas no ordenadas Listas de definiciones

Listas ordenadas
(Comnmente se les llama listas numeradas) Son listas en las que la informacin se muestra secuenciada numrica o alfabticamente. Para construirlas emplearemos los elementos: ol y li.

Elemento ol

(ordered list = lista ordenada) Es el que define y delimita la lista. Sus etiquetas son: <ol> y </ol> (ambas obligatorias) Sus principales atributos genricos son: style - define estilos. Valores posibles: text-decoration: underline; - Subraya las palabras de la lista, pero no subraya las vietas de la lista en s. Ejemplo:
<ol style="text-decoration: underline"> <li>Empezamos</li>

<li>Continuamos</li> <li>Terminamos</li> </ol>

El resultado ser este: 1. Empezamos 2. Continuamos 3. Terminamos Si aplicamos el valor solo a una de las etiquetas <li> el valor se aplicar solo a dicha parte. Ejemplo: Ejemplo:
<ol> <li>Empezamos</li> <li style="text-decoration: underline">Continuamos</li> <li>Terminamos</li> </ol>

El resultado ser este: 1. Empezamos 2. Continuamos 3. Terminamos Sus principales atributos de transicin son: type - tipo de secuencia. Valores posibles: '1' - secuencia numrica. 'I' - secuencia numrica romana en mayscula. 'i' - secuencia numrica romana en minscula. 'A' - secuencia alfabtica en mayscula. 'a' - secuencia alfabtica en minscula. start - valor inicial de la secuencia. Valores posibles: un nmero.

Elemento li.

Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional sala de todos modos!) Sus principales atributos genricos son: style - define estilos.

Sus principales atributos de transicin son:

type - tipo de secuencia. Valores posibles:'1', 'I', 'i', 'A', 'a'. value - valor de reinicio de la secuencia. Valores posibles: un nmero.

Ejemplo de lista ordenada

<ol> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol>

El resultado ser este: 1. Empezamos 2. Continuamos 3. Terminamos Ejemplo de lista ordenada con secuencia numrica romana en minscula
<ol type="i"> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol>

El resultado ser este: i. ii. iii. iv. Empezamos Continuamos Terminamos Verificando

Listas de definiciones o glosario

Son listas en las que la informacin se divide en dos secciones: concepto y definicin. Para construirlas emplearemos los elementos: dl, dt y dd.

Elemento dl

Es el que define y delimita la lista. Sus etiquetas son: <dl> y </dl> (ambas obligatorias)

Elemento dt

Es el que define y delimita el concepto a definir. Sus etiquetas son: <dt> y </dt> (la de cierre, opcional, sala de todos modos!)

Elemento dd

Es el que define y delimita la definicin del concepto. Sus etiquetas son: <dd> y </dd> (la de cierre, opcional, sala de todos modos!) Las listas de definiciones se puede anidar.

Ejemplo de lista de definiciones

<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>WWW</dt> <dd>World Wide Web</dd> </dl>

Tablas
Son una herramienta muy til y muy potente para mostrar informacin de una manera estructurada. Una aclaracin importante: Las tablas no son una herramienta para maquetar o dar formato a los documentos. Las tablas son para tabular datos. Los elementos de los que nos serviremos para crearlas son:

Contenido

1 Elementos bsicos o 1.1 table o 1.2 tr o 1.3 td o 1.4 Ejemplos 2 Elementos de encabezado o 2.1 caption o 2.2 th 3 Fusionando celdas

Elementos bsicos
table

(table = tabla) Es el elemento que define y delimita la tabla. Sus etiquetas son: <table></table> (ambas obligarorias) Sus atributos principales son:
width - anchura de la tabla (valor en pixeles o en porcentaje) border - grosor del borde de la tabla (valor en pixeles) cellspacing - espacio entre celdas (valor en pixeles) cellpadding - espacio entre el contenido y los bordes de la celda (valor en pixeles) tr

(table row = fila de tabla, rengln de tabla) Es el elemento que define y delimita las filas de la tabla. Sus etiquetas son: <tr></tr>
td

(table data = datos de tabla) Es el elemento con el que crearemos las celdas de la tabla. Sus etiquetas son: <td></td> Sus atributos principales son:
align --alineacin horizontal. valign --alineacin vertical. colspan-- nmero de columnas ocupados por la celda. rowspan-- nmero de filas ocupados por la celda. Ejemplos

Una tabla bsica escrita as:

<table border='1' cellspacing='1' cellpadding='2' width='50%'> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table> Se ver as:
1 3 5 2 4 6

Elementos de encabezado
caption

Es el elemento con el que podemos darle un ttulo a la tabla. Debe ir inmediatamente despues de la etiqueta <table>. Sus etiquetas son: <caption></caption> (ambas obligatorias) Sus atributos principales son: align - DESAPROBADO!
th

Es el elemento con el que crearemos las celdas de encabezado Sus etiquetas son: <th></th> (la de cierre es opcional sala de todos modos!) Sus atributos principales son:
align - alineacion horizontal valign - alineacion vertical colspan- nmero de columnas abarcado por la celda rowspan- nmero de filas abarcado por la celda

Fusionando celdas
Paras las etiquetas anteriormente mencionadas,<td> y <th> existen atributos para la combinacin de celdas, que son:

rowspan: especifica cuantas celdas dentro de una columna sern combinadas colspan: especifica cuantas columnas dentro una fila sern combinadas Para el atributo colspan: Por ejemplo, <table border=1>
<tr> <td colspan="2">Combinacin de columnas</td> </tr> <tr> <td>Columna 1</td> <td>Columna 2</td> </tr>

</table>
Combinacin de columnas Columna 1 Columna 2

Tendr como resultado que, en la primera fila, esten combinados las 2 primeras columnas. Tmese en cuenta que, al escribir este atributo(si slo existen 2 columnas), no se debe de aadir ms etiquetas de columnas, caso contrario, se deber tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar. Para el atributo rowspan: <table border=1>
<tr> <td rowspan="2">Combinacin de celdas de filas en una columna</td> <td>Columna2, fila1</td> </tr> <tr> <td>Columna2, fila2</td> </tr>

</table>
Columna2, fila1 Combinacin de celdas de filas en una columna Columna2, fila2

Tendr como resultado que, en la primera columna, esten combinados las 2 filas definidas. Tmese en cuenta que, al escribir este atributo(si slo existen 2 filas), no se debe de aadir ms etiquetas de columnas, caso contrario, se deber tomar en cuenta la cantidad de celdas de filas combinadas y las que se quieran agregar. </marque>

Enlaces
Un documento html es sobre todo un hipertexto, un documento en el que los contenidos pueden estar enlazados, a otros contenidos dentro del mismo documento o en otro distinto, que puede estar en el mismo ordenador, o en cualquier punto de la web. Desde este punto de vista, los enlaces pueden clasificarse de la siguiente manera:

Tipos de enlaces

Internos

Dentro del mismo documento.

Externos

A otro documento, y dependiendo de donde se halle:

Elemento a
a (anchor = ancla) Sus etiquetas son: <a></a> (ambas obligatorias) Sus principales atributos son: href -(hipertexto-referencia) indica el recurso al que queremos acceder desde el ancla origen name - (nombre) asigna un nombre al elemento a para que pueda ser usado como ancla destino

Su estructura bsica consiste en el tag <a href="pgina"> al principio del enlace y cerrando con el tag </a>. El trmino pgina hace referencia a una URL (Localizacin de Recurso Universal, por sus siglas en ingls) que puede indicar la referencia a un documento HTTP, FTP, MAIL y otros protocolos de Internet que permiten localizar informacin en la Red. Ejemplos:

Referencia a una pgina local...

<a href="index.html">Principal </a>

Referencia a una pgina en un servidor HTTP... <a href="http://www.wikipedia.org/index.html"> Bienvenido a Wikipedia </a>

Referencia a un archivo en un servidor FTP... <a href="ftp://ftp.debian.org/gcc.zip"> Archivo del compilador GCC </a>

URL absoluta y relativa

absolutas - contienen la ruta de acceso completa al recurso. relativas - contienen la ruta de acceso desde la ubicacin del documento que contiene el ancla origen. Supongamos que en el directorio /home/yo/Desktop/enlaces/ tenemos los siguientes directorios y archivos: indice.html doc-0.html 11/doc-11.html 22/doc-22.html 22/222/doc-222.html Los vnculos locales con referencias absolutas a estos archivos seran: <a href='/home/yo/Desktop/enlaces/indice.html'>vnculos al indice.html</a> <a href='/home/yo/Desktop/enlaces/doc-0.html'>vnculos a doc-0.html</a> <a href='/home/yo/Desktop/enlaces/11/doc-11.html'>vnculos a doc-11.html</a> <a href='/home/yo/Desktop/enlaces/22/doc-22.html'>vnculos a doc-22.html</a> <a href='/home/yo/Desktop/enlaces/22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que indice.html incluya vnculos locales relativos a los otros documentos: <a href='doc-0.html'>vnculos a doc-0.html</a> <a href='11/doc-11.html'>vnculos a doc-11.html</a> <a href='22/doc-22.html'>vnculos a doc-22.html</a> <a href='22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que doc-11.html incluya vnculos locales relativos a los otros documentos: <a href='../doc-0.html'>vnculos a doc-0.html</a> <a href='../indice.html'>vnculos a indice.html</a> <a href='../22/doc-22.html'>vnculos a doc-22.html</a> <a href='../22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que doc-222.html incluya vnculos locales relativos a los otros documentos: <a href='../../doc-0.html'>vnculos a doc-0.html</a>

<a href='../../indice.html'>vnculos a indice.html</a> <a href='../doc-22.html'>vnculos a doc-22.html</a> <a href='../../11/doc-11.html'>vnculos a doc-11.html</a> </body> </html>

Imgenes
En esta seccin veremos como aadir imgenes a nuestras pginas web. Las imgenes tienen dos funcionalidades: sirven para mejorar la esttica y ademas pueden ser un buen complemento al texto, ya sabes, una imagen vale mas que mil palabras.

Contenido

1 insertando imgenes o 1.1 Elemento img 2 Los mapas de imgenes 3 Los formatos grficos o 3.1 Vectoriales o 3.2 Mapa de bits 3.2.1 Ideales para logotipos, esquemas y dibujos sencillos 3.2.2 Ideales para fotografas

insertando imgenes
Elemento img

Sus etiquetas son: <img> (sin etiqueta de cierre) Sus principales atributos son:
src - indica la direccin de origen de la imagen - valores posibles: la URL de la imagen a insertar. Tambien podemos insertar imagenes que esten almacenados en nuestro equipo.

Para lograr esto lo unico que tenemos que hacer sera lo siguiente: Primer caso: Suponiendo que queremos usar la imagen de alguna pgina web esto quedaria as: <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Gambling_chips.jpg/190 px-Gambling_chips.jpg"> Segundo caso: Ahora si queremos que usar alguna imagen de nuestro equipo hariamos lo siguiente.

<img src="file:///C|/20.jpg">

si nosotros tenemos en la imagen en la misma carpeta el documento html en la que estamos trabajando, o si estan dentro de esta, el codigo quedaria reducido de la siguente manera: suponiendo que hay una carpeta imagenes dentro de la carpeta mi web donde esta nuestro archivo seria <img src="imagenes/20.jpg">
alt - permite poner un texto alternativo (Esta etiqueta por no estar en el estandar no sera entendida por todos lo navegadores web) - valores posibles: un texto descriptivo title - permite hacer que aparezca una descripcin - cuando se pasa el cursor la imagen.

Atributos sobre el tamao:

height - especificar nueva altura width - especificar nueva anchura

Los mapas de imgenes

Los mapas de imgenes (tambin los llaman mapas) son imgenes que contienen zonas sensibles. Hay tres formas de zonas sensible: circulares, rectangulares y poligonales. Las ms sencillas de usar son las de forma rectangular y circular, en las cuales slo se define X e Y. En las poligonales se define Xn e Yn. Un ejemplo de esto es:

1<map name="ejemplo"> 2<area shape="polygon" coords="210,7,210,198,10,198" href="ejemplo.html" alt="ejemplo"> 3<area shape="circle" coords="432,72,58" href="ejemplo_crculo.html" alt="ejemplo_crculo"> 4<area shape="default" nohref> 5</map> 6<img src="imagen.gif" usemap="#ejemplo">

Si se fija el elemento shape="" indica el tipo de figura y coords las coordenadas X e Y.

En la segunda lnea de cdigo se ven las coordenadas X e Y. Cada par de nmeros corresponde con un vrtice de la figura. En este caso la figura es un tringulo. En el crculo aparece una tercera coordenada, que equivale al radio. La figura default corresponde con las zonas de la imagen que no son sensibles. La imagen sobre la que se quiere "poner" el mapa se "llama"

despus de definir todas las zonas sensibles (lnea 6).

Los formatos grficos

Vectoriales

SVG - (Scalable Vector Graphics)

Mapa de bits Ideales para logotipos, esquemas y dibujos sencillos

PNG - (Portable Network Graphics) MNG - (Animaciones en PNG, es un formato en desarrollo; no usar, preferentemente) GIF - (Graphics Interchange Format) (usar slo para animaciones, para imgen esttica, es mejor PNG)
Ideales para fotografas

JPEG - (Joint Photographic Experts Group) BMP - (Bitmap) El formato BMP no debe ser usado bajo ningn concepto, pues ocupa demasiado espacio en disco; si lo que se desea es no perder calidad, una buena opcin es usar el formato PNG.

Estilos CSS
Las Hojas de Estilo en Cascada (Cascade Style Sheet) son una serie de instrucciones que nos permiten dar formato aprovechando las limitaciones que nos presenta el HTML y sus etiquetas de formato al momento de dar formato a una pgina.

Contenido

1 Posibles mtodos de utilizacin o 1.1 Insertado en una etiqueta o 1.2 En una etiqueta <style> o 1.3 En un fichero externo 2 Unidades de la longitud de los CSS 3 Tabla de colores 4 Atributos

Posibles mtodos de utilizacin

Los estilos CSS pueden utilizarse de tres maneras:
Insertado en una etiqueta

De esta manera quedara <etiqueta style="">;

En una etiqueta <style>

En la seccin <head> de la pgina se puede incluir una etiqueta <style> que integre todas las reglas de estilo de la pgina. La seccin quedara: <head>
<style> Reglas de estilo </style>

</head>
En un fichero externo

Mediante la etiqueta <link> se puede incluir un fichero externo que incluya todas las reglas. Esta etiqueta permite incluir los siguientes atributos:

HREF (obligatorio): indica la URL del fichero. REL: identifica el tipo de relacin del enlace con la pgina. TYPE: especifica el tipo MIME.

TITLE: especifica el ttulo de la hoja de estilo. En caso de no existir, el enlace pasa a ser persistente MEDIA: indica el soporte al que va dirigida la hoja de estilo. Se pueden indicar varios medios separndolos por comas.

Algunos ejemplos:

<LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen" /> <LINK REL="StyleSheet" HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print" /> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print" /> <LINK REL="StyleSheet" HREF="aural.css" TYPE="text/css" MEDIA="aural" />

Unidades de la longitud de los CSS

Las medidas colocadas en nuestras hojas de estilos indican una unidad de la longitud. Se conocen dos tipos de unidades: relativa y absoluta. Una unidad relativa especifica una longitud en lo referente a otra caracterstica de la longitud. Las unidades relativas escalan mejor a partir de un dispositivo de salida a otro, por ejemplo de un monitor a una impresora. Una unidad absoluta especifica pulgadas o centmetros. Las unidades absolutas de la longitud son tiles cuando las caractersticas fsicas del dispositivo de salida se saben.

Tabla de la unidad de la longitud del CSS

Unidades relativas de la longitud em ex px % La altura de la fuente del elemento. La altura de la letra x. Pixeles. Porcentaje. Unidades absolutas de la longitud

in cm

Pulgadas (1 pulgada = 2,54 centmetros). Centmetros.

mm Milmettros. pt pc Puntos (1 punto = 1/72 pulgada). Picas (1 pica = 12 puntos).

Tabla de colores
Los colores se pueden especificar en pginas HTML de dos maneras una especificando el nombre del color y otra usando una numeracin para denotar un valor de color del sistema RGB. Un valor del color del RGB consiste en tres nmeros hexadecimales de dos dgitos que especifican la intensidad del color correspondiente. Por ejemplo, el valor #FF0000 del color se hace rojo porque el nmero rojo se fija a su valor ms alto, FF (o 255 en forma decimal).

aliceblue (#F0F8FF) azul (#F0FFFF) blanchedalmond (#FFEBCD) burlywood (#DEB887) coral (#FF7F50) cinico

antiquewhite (#FAEBD7) amarillento (#F5F5DC) azul (#0000FF) cadetblue (#5F9EA0) cornflowerblue (#6495ED) azul marino

aqua (#00FFFF) bisque (#FFE4C4) blueviolet (#8A2BE2) chartreuse (#7FFF00) cornsilk (#FFF8DC) darkcyan

aquamarine (#7FFFD4) negro (#000000) marrn (#A52A2A) chocolate (#D2691E) carmes (#DC143C) darkgoldenrod

(#00FFFF) gris oscuro (#A9A9A9) darkolivegreen (#556B2F) darksalmon (#E9967A) darkturquoise (#00CED1) dimgray (#696969) forestgreen (#228B22) oro (#FFD700) greenyellow (#ADFF2F) ail (#4B0082) lavenderblush (#FFF0F5) lightcoral (#F08080) gris claro (#D3D3D3) lightskyblue (#87CEFA) cal (#00FF00)

(#00008B) verde oscuro (#006400) anaranjado oscuro (#FF8C00) darkseagreen (#8FBC8B) darkviolet (#9400D3) dodgerblue (#1E90FF) fuchsia (#FF00FF) vara de oro (#DAA520) ligamaza (#F0FFF0) marfil (#FFFFF0) lawngreen (#7CFC00) lightcyan (#E0FFFF) rosa claro (#FFB6C1) lightslategray (#778899) limegreen (#32CD32)

(#008B8B) darkkhaki (#BDB76B) darkorchid (#9932CC) darkslateblue (#483D8B) de color rosa oscuro (#FF1493) firebrick (#B22222) gainsboro (#DCDCDC) gris (#808080) hotpink (#FF69B4) de color caqui (#F0E68C) lemonchiffon (#FFFACD) lightgoldenrodyellow (#FAFAD2) lightsalmon (#FFA07A) lightsteelblue (#B0C4DE) lino (#FAF0E6)

(#B8860B) darkmagenta (#8B008B) rojo oscuro (#8B0000) darkslategray (#2F4F4F) deepskyblue (#00BFFF) floralwhite (#FFFAF0) ghostwhite (#F8F8FF) verde (#008000) indianred (#CD5C5C) lavanda (#E6E6FA) azul claro (#ADD8E6) verde claro (#90EE90) lightseagreen (#20B2AA) amarillo claro (#FFFFE0) magenta (#FF00FF)

marrn (#800000) mediumpurple (#9370DB)

mediumaquamarine (#66CDAA) mediumseagreen (#3CB371)

mediumblue (#0000CD) mediumslateblue (#7B68EE) midnightblue (#191970) navajowhite (#FFDEAD) olivedrab (#6B8E23) palegoldenrod (#EEE8AA) papayawhip (#FFEFD5) ciruelo (#DDA0DD) rosybrown (#BC8F8F) sandybrown (#F4A460) plata (#C0C0C0) nieve (#FFFAFA) teal (#008080) violeta (#EE82EE) amarillo

mediumorchid (#BA55D3) mediumspringgreen (#00FA9A) mintcream (#F5FFFA) marina de guerra (#000080) anaranjado (#FFA500) palegreen (#98FB98) peachpuff (#FFDAB9) powderblue (#B0E0E6) royalblue (#4169E1) verdemar (#2E8B57) skyblue (#87CEEB) springgreen (#00FF7F) thistle (#D8BFD8) trigo (#F5DEB3) de color verde amarillo

mediumturquoise mediumvioletred (#48D1CC) (#C71585) mistyrose (#FFE4E1) oldlace (#FDF5E6) naranja-rojo (#FF4500) paleturquoise (#AFEEEE) Per (#CD853F) prpura (#800080) saddlebrown (#8B4513) seashell (#FFF5EE) slateblue (#6A5ACD) steelblue (#4682B4) tomate (#FF6347) blanco moccasin (#FFE4B5) aceituna (#808000) orqudea (#DA70D6) palevioletred (#DB7093) color de rosa (#FFC0CB) rojo (#FF0000) salmones (#FA8072) sienna (#A0522D) slategray (#708090) tan (#D2B48C) turquesa (#40E0D0) whitesmoke

(#FFFFFF)

(#F5F5F5)

(#FFFF00)

(#9ACD32)

Atributos
Son la cualidades que podemos afectar en un objeto; en las cascadas de estilos tenemos la posibilidad de dar atributos tan sencillos como la especificacin de una familia de fuente o el mismo tamao en si para un objeto hasta atributos y filtros ms complejos como transformaciones de texto, decoraciones, sombras, brillo, desenfoque entre otros.

Comportamiento
<body onload="startclock()"> <script language="JavaScript"> </script> <form name="clock" onsubmit="0"> <input type="button" name="face" value="hh:mm:ss am" onclick="reloj()"> </form> </body>

Propiedades de Fuentes y Texto

Notes que la mayora de las etiquetas empiezan <?> y tienen la etiqueta que marca el cierre de la misma </?>

Propiedades del Texto

Las propiedades del texto pueden modificarse a travs de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta: FACE: fuente. nombre de la fuente, o fuentes COLOR: color del texto. nmero hexadecimal o texto predefinido SIZE: tamao del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor Por ejemplo, para insertar el texto:
Bienvenidos a Wikilibros

Habra que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Bienvenidos a Wikilibros</font>

Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> despus de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta . Por ejemplo:
<body> <basefont color="#006699" size="4" face="Arial"> ...

Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta <basefont> o , el navegador encuentra otra etiqueta , la que prevalece es siempre la ltima que se encuentra.

Resaltado del Texto

<b> negrita negrita <i> cursiva cursiva <u> subrayado subrayado <s> tachado tachado <tt> mquina de escribir mquina de escribir <big> aumenta el tamao de la fuente aumenta el tamao de la fuente <small> disminuye el tamao de la fuente disminuye el tamao de la fuente Por ejemplo, para insertar el texto:

Bienvenidos a El
Habra que escribir:

estudiante

<font color="#0000FF" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u> <big>Wikilibros</big></u></b></font>

Propiedades de color y fondo

Para agregar un color de fondo a una pagina html se inserta la siguiente etiqueta a continuacion de /body:

<body bgcolor="color de fondo> por ejemplo <body bgcolor=#000000> Ahora para poner una foto de fondo simplemente: <body background="imagen de fondo"> por ejemplo <body background=http://www.google.com.ar/intl/en_com/images/logo_plain.png>

Colores Hexadecimales
Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal.

Marcos
Los marcos aportan un mtodo de dividir la ventana del navegador en secciones para poder visualizar varios documentos web al mismo tiempo. Las diferencias principales entre un documento con marcos y un documento HTML normal son dos:

La declaracin del DOCTYPE Un documentos con marcos carece del elemento body, en su lugar usaremos el elemento frameset

Contenido

1 Elemento frameset 2 Elemento frame 3 Elemento noframes 4 Enlazando frames

Elemento frameset
Sus etiquetas son <frameset> </frameset> (ambas obligatorias) Sus principales atributos son: rows cols

Elemento frame
Sus etiquetas son <frame> </frame> (la de cierre opcional) Sus principales atributos son: name src noresize

Elemento noframes
Sus etiquetas son <noframes> </noframes>

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto ira entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignoraran las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre estas ltimas. Por el contrario un browser capaz de gestionar paneles interpretara las marcas <NOFRAMES> y </NOFRAMES> y sabra que debe ignorar el texto comprendido entre ellas. Esta etiqueta debe ser usada entre <FRAMESET> y </FRAMESET> de la siguiente manera:
<FRAMESET ...> ...Codigo de definicion de frames... <NOFRAME> ...Codigo alternativo... </NOFRAME> </FRAMESET>

Los navegadores que tengan soporte para frames simplemente ignoraran todo lo que haya entre la instruccion de inicio, <NOFRAME >, y la instruccion de fin, </NOFRAME> . Por su parte los navegadores que no entiendan frames, directamente ignoraran todas estas etiquetas (no las entienden) y pasaran a interpretar las etiquetas que siguen a <NOFRAME >. Entre ellas debe estar la etiqueta BODY, ya que esta etiqueta era imprescindible para las paginas sin frames, y para los navegadores que no las soporten todas las paginas son sin frames. En esta ocasion BODY no provocara problemas con FRAMESET porque, como hemos dicho, los navegadores que entiendan esta ultima ignoraran todo el codigo entre <NOFRAME> y < /NOFRAME>.

Un uso habitual de NOFRAME es:

<FRAMESET COLS="200,*"> <FRAME SRC="f1.htm">

<FRAME SRC="f2.htm"> <NOFRAME> <BODY> Esta pagina usa frames y su navegador no los soporta, por favor vaya a <A HREF="sinframe.htm"> nuestras pginas sin frames </A> </BODY> </NOFRAME> </FRAMESET> Si no hubieramos usado la etiqueta NOFRAME el resultado de ver la pagina con este codigo con un navegador sin soporte para frames seria simplemente una pantalla en blanco.

Enlazando frames
El uso de marcos o tambin llamados frame es una herramienta muy til para crear pginas dinmicas ya que se hace el uso de no solo un archivo sino un nmero determinado de archivos. El nmero de archivos usados para hacer el uso de un frame es el nmero de

frame mas uno que es el que controla todos los frame; en el ejemplo se mencionan Archivo1.html, Archivo2.html, y el Archivo3.html ms el frame.html.

<html> <head> <title>Prueba con Frame</title> </head> <frameset rows="20%,*%"> <frame name="menu" src="archivo1.html" noresize framespacin=9 scrolling="no"></frame> <frameset cols="20%,*%"> <frame name="trabajo" src="archivo2.html" noresize framespacin=5 bordercolor="red"></frame> <frame name="trabajo" src="archivo3.html" noresize framespacin=5 bordercolor="red"></frame> </frameset> </frameset> </html>

Formularios
Mediante el envo de formularios se pueden enviar datos de un artculo, de una encuesta o normalmente para enviar un mensaje a un e-mail. Para hacer esto deberamos saber un poco sobre los lenguajes de tipo servidor, ASP o PHP, pero por el momento seguiremos con html. La etiqueta para un formulario, es <form>, y sus atributos son los siguientes: method: Indica el mtodo por el que se enviarn los datos. Existen 2: POST: Enva datos por la entrada estndar STDIO (utilizado normalmente). GET: Enva datos por medio de un URL (enlace). action: Indica el mail a donde se enviarn los datos o el nombre del archivo .php o .asp Ejemplo: <form action="mail@dominiio.com" method="post"></form> o <form action="form.php" method="post"></form> ELEMENTOS: Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es <input> (no tiene etiqueta de cierre) y tiene varios atributos: type:

Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser: text: Cualquier tipo de texto como el nombre, e-mail, direccin... password: Se usa para ocultar las claves o datos confidenciales (al escribir en este, muestra *******. hidden: Datos escondidos, asunto, e-mail de destino... button: Crea un botn. image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo src). submit: Enva el formulario. reset: Borra los campos del formulario. value: Indica el valor de un atributo o el nombre que se mostrar (en el cuadro). name: Nombre del campo. maxlength: Indica el nmero de caracteres mximo para escribir. size: Indica el tamao del cuadro de texto. Ejemplo: <form method="post"> Nombre <input type="text" name="nombre" maxlength="10" size="15"> Password <input type="password" name="contrasea" maxlength="10" size="15"> <input type="submit" name="enviar" value="Enviar"> <input type="reset" name="Borrar" value="Borrar Todo"> </form> Resultado: Si queremos que una persona enve algn comentario o sugerencia, ponemos un cuadro de texto grande, con la etiqueta <textarea>. Sus atributos son: rows: Filas que tendr el cuadro. cols: Columnas que tendr el cuadro. Ejemplo: <textarea cols="30" rows="4" name="comentario"></textarea> Resultado:

Lista de Opciones: Son listas en las que se pueden especificar una o varias opciones. Podramos poner pises, asuntos... y que el usuario seleccione la adecuada. La etiqueta para hacer esto es <select>, y cada opcin se define por la etiqueta <option>. Adems, deben contener los atributos value y name, ejemplo: <select name="pais"> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Resultado:

Se puede seleccionar una opcin por defecto, con el atributo selected en la opcin que queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar ms de una opcin. Esto se hace con el atributo multiple y size (indica el nmero de valores a mostrar): <select name="pais" size="3" multiple> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Resultado:

Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar ms de una opcin de la lista. Botones de crculo: Si queremos que solo se pueda seleccionar una opcin, adems de las listas desplegables, tenemos los botones en forma de crculo. Se usa la etiqueta input, pero con el valor radio en el atributo type. Para seleccionar una opcin por defecto, es el atributo

checked: <input type="radio" name="pais" value="Arg">Argentina <input type="radio" name="pais" value="Br">Brasil <input type="radio" name="pais" value="Ch">Chile <input type="radio" name="pais" value="Eu">E.U. <input type="radio" name="pais" value="Mx" checked>Mxico <input type="radio" name="pais" value="Vz">Venzuela Resultado:

Cuadros de seleccin: Adems de poner el valor multiple en las listas desplegables para poder seleccionar ms de una opcin, podemos utilizar el valor checkbox en el atributo type, y con el atributo checked se selecciona una (o varias) opcin(es): <input type="checkbox" name="pais" value="Arg"> Argentina <input type="checkbox" name="pais" value="Br"> Brasil <input type="checkbox" name="pais" value="Ch"> Chile <input type="checkbox" name="pais" value="Eu"> E.U. <input type="checkbox" name="pais" value="Mx" checked> Mxico <input type="checkbox" name="pais" value="Vz"> Venezuela Resultado:

Un ejemplo de un formulario: <form action="mail@dominio.com" method="post"> Nombre: <input type="text" name="nombre" size="15" maxlength="20"> E-Mail: <input type="text" name="email" size="15" maxlength="20"> Pas: <select name="pais"> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Sexo: <input type="radio" name="sexo" value="hombre"> Hombre <input type="radio" name="sexo" value="mujer"> Mujer Urgente: <input type="checkbox" name="prioridad" value="si"> S Comentario: <textarea rows="3" cols="40" name="comentario"></textarea> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> Resultado:

Y en nuestro e-mail recibiramos algo asi: nombre: Leo email: anonimo@dominio.com pais: Mx sexo: hombre prioridad=on comentario: hola, quiero informacin. Nota: Si est activada un cuadro de seleccin, el valor al recibir el mail ser on, si no se activ el valor ser off. Consejo: Para alinear la descripcin de los campos y los campos, podras crear una tabla con dos columnas.

Importante: En esta ocasin se abrir el programa de envos de mail por defecto de la computadora del usuario (suele ser Outlook Express). Si queremos que enve los datos a un mail sin tener que abrir el programa, debemos crear un archivo PHP y en el atributo action poner el valor del archivo (esto lo puedes ver en el manual de PHP).