Manual HTML

Elaboracin de Pginas WEB (HTML) Cobaq 1 Satlite
L.I. Sandra Trejo Ferrusca Herramientas informticas 2 2011A

0
HTML Fcil
HTML Fcil _________________________________________________________________ 0
Conceptos bsicos _________________________________________________________________ 1
La organizacin de una presentacin Web _____________________________________________ 1
Objetivos ________________________________________________________________________ 1
Contenidos _______________________________________________________________________ 1
Primer paso ______________________________________________________________________ 2
Organizacin _____________________________________________________________________ 2
Secuenciacin _____________________________________________________________________ 2
Revisin de objetivos _______________________________________________________________ 2
El lenguaje HTML ________________________________________________________________ 2
Editores y convertidores ____________________________________________________________ 2
Estructura bsica de un documento HTML: Cabecera y cuerpo del documento ______________ 3
Primeros pasos ____________________________________________________________________ 3
Creacin de enlaces ________________________________________________________________ 4
URL (Localizador universal de recursos) ______________________________________________ 4
Listas ____________________________________________________________________________ 5
Estilos de caracter _________________________________________________________________ 7
Texto preformateado _______________________________________________________________ 8
Saltos y lineas _____________________________________________________________________ 8
Carcteres especiales _______________________________________________________________ 9
Tablas ___________________________________________________________________________ 9
Alineacin de celdas ______________________________________________________________ 10
Celdas extendidas ________________________________________________________________ 10
Espaciado _______________________________________________________________________ 10
Imgenes ________________________________________________________________________ 11
Formularios _____________________________________________________________________ 11
Campos de entrada _______________________________________________________________ 12
Campos de seleccin ______________________________________________________________ 13
Areas de texto ___________________________________________________________________ 13
Botones _________________________________________________________________________ 14
1

Conceptos bsicos
World Wide Web (WWW): Digamos, simplemente, que es un sistema de informacin, el sistema de
informacin propio de Internet. Sus caractersticas son:
Informacin por hipertexto: Diversos elementos (texto o imgenes) de la informacin que se nos
muestra en la pantalla estn vinculados con otras informaciones que pueden ser de otras fuentes.
Para mostrar en pantalla esta otra informacin bastar con hacer clic sobre ellos.
Grfico: En la pantalla aparece simultneamente texto, imgenes e incluso sonidos.
Global: Se puede acceder a l desde cualquier tipo de plataforma, usando cualquier navegador y
desde cualquier parte del mundo.
Pblica: Toda su informacin est distribuida en miles de ordenadores que ofrecen su espacio para
almacenarla. Toda esta informacin es pblica y toda puede ser obtenida por el usuario.
Dinmica: La informacin, aunque esta almacenada, puede ser actualizada por el que la publico
sin que el usuario deba actualizar su soporte tcnico.
Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.
Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un
servidor y comprender el lenguaje de todas las herramientas que manejan la informacin de Web. Puede
decirse que cada casa de software podra tener su navegador propio, aunque los mas populares sean
Netscape e Internet Explorer.

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un
protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.

HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wde
Web utilizan para mandar documentos HTML a travs de Internet.

URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la direccin que localiza una
informacin dentro de Internet.

HTML: De momento, le basta saber que estas siglas se corresponden con la definicin "Lenguaje para
marcado de hipertexto". Ms claro an, se trata de un lenguaje para estructurar documentos a partir de texto
en World Wide Web. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben
mostrarse) y atributos (parmetros que dan valor a la etiqueta).
La organizacin de una presentacin Web
Para hacer una buena presentacin Web lo ideal es crearnos un boceto inicial de la estructura. Si hacemos esto, no
solo estamos procurando una presentacin agradable y facilitando la tarea de navegar sino que tambin nos
facilitamos el mantenimiento de futuras revisiones y modificaciones.
Objetivos
Lo primero que debemos hacer el fijarnos los objetivos que queremos alcanzar segn la informacin que vayamos a
aportar. Para crear nuestra primera pgina, estos objetivos deberan no ser muy pretenciosos o tener un sentido
nicamente personal. Tener claros los objetivos nos ayudara a no plasmar contenidos confusos o innecesarios.
Contenidos
Una vez tenemos los objetivos, hay que organizar el contenido por temas o secciones, que se ajusten a nuestros
objetivos, reuniendo las informaciones relacionadas bajo el mismo epgrafe. Es conveniente que los temas sean
razonablemente cortos y si fuera necesario divida en subtemas. Si por el contrario tenemos temas muy cortos, lo
correcto sera agruparlos bajo un encabezado de tema algo ms general.
2
Primer paso
Una presentacin Web consiste de una o ms pginas Web que contienen texto y grficos y que estn vinculadas
entre si creando un cuerpo de informacin. La pgina principal o pgina base es desde donde se comienza a visitar la
presentacin y su URL ser la que figure como direccin de la presentacin. Esta pgina base debe ofrecer un
panorama general del contenido de la presentacin.
Organizacin
Ha llegado la hora de estructurar la informacin recopilada en un conjunto de pginas Web. Podemos crearnos una
estructura propia pero lo ms lgico es guiarnos por una estructura clsica. Para ms informacin sobre la estructura
consulte las pginas "La estructura" y "Tipos de estructuras" de la gua de estilo.
Secuenciacin
Consiste en decidir que contenido va en cada pgina, elaborar la trama de vnculos para navegar entre ellas e
incluso, hacernos una idea de que tipo de grficos vamos a poner y que ubicacin van a tener. Para ello puede
utilizarse un "Tablero de Secuencia", un esquema grfico que nos ayudar a recordar en todo momento donde encaja
cada pgina en el global de la presentacin.
Revisin de objetivos
Finalmente y antes de ponernos a crear nuestra presentacin Web, debemos prestar atencin a que lo que tenemos
plasmado en el "Tablero de Secuencia" cubre los objetivos que nos habamos propuesto. Si es as, ya podemos
comenzar a manejarnos con HTML.
El lenguaje HTML
Como ya se ha dicho, este lenguaje estructura documentos. La mayora de los documentos tienen estructuras
comunes (ttulos, parrafos, listas...) que van a ser definidas por este lenguaje mediante etiquetas. Cualquier cosa que
no sea una etiqueta es parte del documento mismo.
Este lenguaje no describe la apariencia del diseo de un documento sino que ofrece a cada plataforma que le de
formato segn su capacidad y la de su navegador (tamao de la pantalla, fuentes que tiene instaladas...). Por ello y
para no fustrarnos, no debemos disear los documentos basndonos en como lucen en nuestro navegador sino que
debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fcil de leer y entender.
No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prcticamente imprescindibles a la
hora de disear una presentacin web: Su compatibilidad y su facilidad de aprendizaje debido al reducido nmero de
etiquetas que usa.
Bsicamente, los documentos escritos en HTML constan del texto mismo del documento y las etiquetas que pueden
llevar atributos. Esto llevado a la prctica, vendra a ser:

<etiqueta> texto afectado </etiqueta>

La etiqueta del principio activa la orden y la ltima (que ser la del principio precedida del signo /) la desactiva. No
todas las etiquetas tienen principio y final pero esto lo veremos ms adelante.
Editores y convertidores
Antes de comenzar al trabajar sobre un editor, le recomendara que visionase el cdigo fuente de nuestra pgina
principal. Todos los navegadores dan la opcin de editarla (Men ver / Cdigo fuente). Si visita otras pginas y
visualiza su cdigo fuente encontrar similitudes en la forma en que estn organizadas las pginas y en los etiquetas
utilizadas.
Dnde hay que editar el cdigo fuente? Pues, si usted es usuario de Windows le bastara con el Bloc de Notas y si
utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto ms potentes debe guardar sus documentos
como "solo texto" ya que HTML ignora todos los espacios en blanco. Una vez guardado convierta la extensin de
texto por la extensin html o htm (en los sistemas DOS).
Los convertidores se utilizan para tomar los archivos de un procesador de textos y convertirlos a HTML. Pero
debido a la propia limitacin de este lenguaje, por muy elegante que hagamos un documento en nuestro procesador,
un convertidor no obrar milagros y quiz acabe por crear cosas ilegibles en HTML. Adems, la mayora de los
3
convertidores no convierten imgenes y no automatizan los vnculos hacia los documentos en Web debiendo
corregir esto de manera manual.
A travs de Internet o de revistas especializadas, usted podr hacerse con editores y convertidores gratuitos o de muy
reducidos costes. Quiz ms adelante, cuando este acostumbrado a trabajar con HTML, puedan resultarle
interesantes pero eso se lo dejo a su futura eleccin. De momento, hgame caso, si quiere aprender HTML use solo
un procesador de texto simple.
Estructura bsica de un documento HTML: Cabecera y cuerpo del documento
Tres son la etiquetas que describen la estructura general de un documento y dan una informacin sencilla sobre l.
Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

<HEAD>: Especifica el prlogo del resto del archivo. Son pocas las etiquetas que van dentro de ella,
destacando la del titulo <TITLE> que ser utilizado por los marcadores del navegador e identificar el
contenido de la pgina. Solo puede haber un ttulo por documento, preferiblemente corto aunque
significativo, y no caben otras etiquetas dentro de l. En head no hay que colocar nada del texto del
documento.

<BODY>: Encierra el resto del documento, el contenido.
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

Primeros pasos
Tres son la etiquetas que describen la estructura general de un documento y dan una informacin sencilla sobre l.
Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de
titulares, el texto que deseamos que sea un titular se pone entre las etiquetas <H1> Titular </H1>. Se
definen mediante las etiquetas <H1>.....</H1> hasta <H6>.....</H6>
<P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras caractersticas, digamos que se
definen por las etiquetas <P>.....<P>. Esta etiqueta, en un principio, se dise para saltar de prrafo por lo
que puede ir sola "<P>" al final de un texto indicando que a continuacin se quiere una lnea en blanco
aunque le recomendamos que se acostumbre a utilizarla abrindola y cerrndola.
<BR>: Saltos de lnea. Esta etiqueta sirve para realizar un salto de linea, puede poner tantas como desee y
realizar un salto de lnea por cada una de ellas.
: Comentarios. Son directivas que nunca se mostrarn a travs del navegador y que le servirn para
recordatorios en futuras revisiones del documento.
Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos.
<HTML>
<HEAD>
</HEAD>
<BODY>
H1>Mi primera pgina</H1>

<P>Hola mundo, esta es un pgina con titular,
que tiene tambin un prrafo y unos cuantos
4
saltos de lnea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>

Creacin de enlaces
Lo caracterstico del lenguaje HTML es el poder generar vnculos de hipertexto para enlazar con ellos todos sus
documentos en web.
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su direccin URL) y el texto que
servir de punto de activacin del otro documento. Este segundo elemento ser el que veamos en pantalla y que se
servir del primero para saltar de documento.
Los enlaces se generan mediante la etiqueta <A>.....</A> y, a diferencia de los vistos anteriormente, llevar siempre
dentro de la etiqueta un atributo ya sea <A HREF=""> o <A NAME="">.
<A HREF="URL">.....</A>: Es el ms habitual de los atributos y sirve para saltar entre diferentes URLs.
De momento veremos:
Saltar en una presentacin del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A
HREF="archivo2.html">Siguiente pgina</a>
Saltar de nuestra presentacin a otra presentacin web llamada www.bienvenidos.es: <A
HREF="http://www.bienvenidos.es">Visita esta pgina</A>

<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una seccin de
nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vnculo a dicha
seccin escribiremos: <A HREF="#parte1">Ir a la primera parte</A>
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>

URL (Localizador universal de recursos)
Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes:
Protocolo: Es el programa que utilizar el navegador para obtener el archivo elegido. Les suena HTTP,
FTP, Gopher...
Nombre del host: Se trata del sistema donde se encuentra almacenada la informacin que buscamos.
Ruta del fichero: Se trata de la ubicacin del archivo dentro del host.
5
http://www.bienvenidos.es/publico/saludos.html

Entre los principales tipos de URL destacan:
HTTP: Son los ms populares ya que son los utilizados por los servidores de WWW para mandar
documentos a travs de Internet.
FTP: Se utilizan para apuntar hacia los archivos que estn en servidores que usan el protocolo FTP (File
Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo
que se usa para enviar nuestras pginas al servidor de internet. Como ya se puede imaginar en estos
servidores se almacenan los archivos que forman parte de nuestra presentacin web.
File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy
interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema
apunte hacia este URL, generalmente fallar en su intento y no podr tener acceso a l.
Mailto: Se usa para mandar correos electrnicos. Cuando seleccionamos este tipo de URL se abre la
aplicacin de correo electrnico de nuestro ordenador para enviar un correo a la direccin hacia la que
apunta el URL. La forma estandar es: mailto:webmaster@bienvenidos.es
News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten
sobre direfentes temas.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Diferentes tipos de URLs</H1>
Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.
<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:webmaster@bienvenidos.es">
mailto:webmaster@bienvenidos.es</a>.
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.
<br>
</BODY>
</HTML>

Listas
Junto con encabezados y prrafos, son otro de los elementos HTML ms comunes. Pueden darse cinco tipos
diferentes de listas, cada uno con etiquetas distintas aunque con alguna en comn:
Listas numeradas u ordenadas: Se engloban por las etiquetas <ol>.....</ol> y cada elemento de la lista
estar encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li>. Es conveniente que
cada elemento de la lista est en una lnea nueva aunque todo seguido consiga en la presentacin el mismo
efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma
secuencial, aunque se introduzcan modificaciones.

Listas con vietas o sin orden: Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista,
tambin estar encabezado por la etiqueta <li>. El resultado es que el navegador inserta vietas
(marcadores) delante de cada elemento.

6
Listas de men y de directorio: Estn en desuso puesto que su resultado suele ser, prcticamente, idntico al
de las listas con vietas.
Men: Englobadas por las etiquetas <menu>.....</menu> y cada elemento encabezado por la
etiqueta <li>.
Directorio: Englobadas por las etiquetas <dir>.....</dir> y cada elemento encabezado por la
etiqueta <li>.

Listas de glosario: Cada elemento de la lista est compuesto por un trmino y una definicin y cada una de
estas partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el trmino
se usa la etiqueta <dt> y para la definicin la etiqueta <dd>. Generalmente el navegador colocar trmino y
definicin en dos lneas diferentes pero esto se puede evitar aadiendo a la etiqueta de apertura el atributo
compact: <dl compact>.

Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre
respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las
etiquetas: Las etiquetas de la lista principal englobarn todo el conjunto de las listas y las etiquetas de las
listas secundaras se cerraran antes de volver a la lista principal. Ahora quiz le empiece a convenir sangrar
el propio cdigo conforme lo va escribiendo en HTML.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>
Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
7
<li>Tres</li>
</ul>
</BODY>
</HTML>

Estilos de caracter
Estos estilo son etiquetas que afectan a palabras o carcteres dentro de otras entidades de HTML modificando el
aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos:
Estilos lgicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear.
<em>.....</em>: Indica que los carcteres estarn enfatizados de alguna manera, generalmente en
cursiva aunque depender del navegador.
<strong>.....</strong>: Los carcteres tendrn mayor nfasis, generalmente en negrita.
<code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier.
<samp>.....</samp>: Muy similar a code.
<kdb>.....</kdb>: Texto que el usuario debe escribir.
<var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real.
Generalmente en cursiva o subrayada.
<dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir.
<cite>.....</cite>: Se usa para citas cortas.

Estilos fsicos: Modifican la presentacin real del texto.
<b>.....</b>: Pone el texto en negrita.
<i>.....</i>: Pone el texto en cursiva.
<tt>.....</tt>: Pone el texto en fuente monoespaciada.
<u>.....</u>: Subraya el texto afectado.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>
</BODY>
</HTML>

8
Texto preformateado
Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una
excepcin a esta regla cuando utilizamos las etiquetas <pre>.....</pre>. Sin embargo esta etiqueta convertir el texto
afectado a fuente monoespaciada (posiblemente Courier).
Esta etiqueta se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse
a convertir a HTML, rpida y fcilmente, archivos de correo electrnico y publicaciones de grupos Usenet.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Texto preformateado</H1>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
<PRE>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
</PRE>
</BODY>
</HTML>

Saltos y lineas
Lneas divisorias: Se crean con la etiqueta <hr> que no tiene etiqueta de cierre ni lleva texto asociado. Se
puede especificar el ancho de la lnea con el siguiente atributo
<hr width="80%">.
Saltos de lnea: La etiqueta <br> inserta un salto de lnea donde se coloque. Puede colocar tantas como
desee y se insertar un salto de lnea por cada una de ellas.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Saltos y lineas</H1>
<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">
----
<br><br><br>
----
</BODY>
</HTML>

9
Carcteres especiales
Es posible que en un momento dado deseemos insertar un carcter que no sea ASCII en nuestro documento HTML.
Muy probablemente, si lo creamos nosotros con las combinaciones de teclas habituales no llegue a poder ser ledo
por otra plataforma una vez publicado en Internet. Para solventar este conflicto, HTML ofrece la posibilidad de
insertar unas entidades de carcter que podrn ser interpretados por todas las plataformas. Estas entidades pueden
ser:
Nombradas: Se suelen construir con el signo &, la abreviatura del carcter y acabado con el signo punto y
coma. El smbolo de registrado se construira: ®
Numeradas: Se construyen con los signos &#, el nmero correspondiente a la posicin del carcter en el
conjunto ISO-Latin-1 (ISO-8859-1). El mismo smbolo de registrado, sera ahora: ®
Existen unas entidades reservadas, exclusivamente, para carcteres usados en etiquetas pero que nosotros
no los pretendemos usar dentro de ninguna de ellas. Estos son:
signo <, entidad <
signo >, entidad >
signo &, entidad &
signo ", entidad "
Tablas
Las tablas surgieron con la versin HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de
nuestra presentacin en diferentes filas y columnas de modo que podamos resumir grandes cantidades de
informacin de una manera que puede representarse rpida y fcilmente.
El contenido de una tabla lo debemos desarrollar entre las etiquetas <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se
calcularn automticamente segn las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las etiquetas <tr>.....</tr>. Las etiquetas <th> y <td> con sus
correspondientes etiquetas de cierre, indican para indicar las filas individuales dentro de cada fila. Las etiquetas
<th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita.
Las etiquetas <td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
</HEAD><BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>

10
Ttulo
Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las etiquetas
<caption>.....</caption>. Las etiquetas de ttulo van dentro de las etiquetas de la tabla y son opcionales, el ttulo no
es obligatorio. La etiqueta de apertura puede llevar consigo el atributo align que indicar si el ttulo va encima o
debajo de la tabla. align="top" indicara encima de la tabla y align="bottom" indicara en la parte de abajo.
Alineacin de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. As, dentro de cada etiqueta de celda
podemos encontrar:
El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado
(center).
El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o
centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las etiquetas <th> o <td> los atributos:
rowspan= ms un valor para indicar el nmero de filas que se quiere abarcar.
colspan= ms un valor para indicar el nmero de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentacin web, la cosa se complica bastante. Nuestra recomendacin:
Coja lpiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque as tendr mucho
ms claro los valores que debe asignar a los atributos rowspan y colspan y las etiquetas a las que hay que asignarlos.
Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de
las mismas.
width= Acompaa a <table> y especifica el ancho de la tabla, tanto en nmero de pixeles como en
porcentaje respecto al ancho de la pantalla. Tambin puede acompaar a las etiquetas <th> o <td> para
especificar el ancho de las columnas.
Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que
indicar el ancho del borde en pixeles. Border="0" indicara la ausencia de borde.
Cellspacing= Suele acompaar a la etiqueta <table>. Indica el nmero de pixeles que separan cada celda. El
valor predeterminado suele ser 2.
Cellpadding= Tambin acompaa a la etiqueta <table>. Indica el espacio en pixeles entre el borde de la
celda y su contenido. El valor predeterminado suele ser 1.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
11
</HTML>

Imgenes
El uso de imgenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imgenes en una
presentacin web es muy sencillo, solo debe de tener en cuenta que las imgenes tienen que tener los formatos GIF,
JPEG o PNG. Las imgenes en lnea, se especifican a partir de la etiqueta <img> que no tiene una etiqueta
correspondiente de cierre pero que puede acompaarse de los siguientes atributos:
src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se
va a representar.
Align= Permite controlar la alineacin de una imagen con respecto a una lnea de texto adyacente o a otras
imgenes en esa lnea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

Alt= Es la alternativa que se estableci cuando todava existan visualizadores de solo texto. Entre comillas
podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando,
visualizando ya la imagen, pasamos el ratn por encima.
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la
imagen, significa el ancho de la imagen que vamos a representar.
HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la
imagen.

BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb">
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Imágenes</H1>
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé"
ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un bebé"
ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML>

Formularios
La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas y, los
formularios han sido una de las herramientas que han ayudado a este auge.
Los formularios nos van a permitir, desde dentro de una presentacin web, solicitar informacin al visitante. Estos
formularios estarn compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los
valores en estos campos sern enviados a una URL donde se procesar toda esta informacin.
Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas etiquetas que lo especifiquen. La
declaracin de formulario queda recogida por las etiquetas <form>.....</form> y dentro de ellas se recogern todas
las variables de entrada.
A la etiqueta de apertura <form> le acompaarn estos atributos:
action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un
guin CGI o la URL mailto.
Method="" Indica el mtodo de transferencia de las variables. Post, si se enva a travs del STDIO. Get, si
se enva a travs de la URL.
12
<HTML>
<HEAD>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>

Campos de entrada
La etiqueta <input> define la introduccin de variables. Junto a esta etiqueta 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.
<HTML>
<HEAD>
</HEAD>
<BODY>


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

13
<BR><BR>
</FORM>

</BODY>
</HTML>

Campos de seleccin
Las etiquetas <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que
acompaan a la etiqueta de apertura son:
name="" Indicar el nombre del campo de seleccin.
Size="" Indicar el nmero de opciones visibles. Si le asignamos 1, la seleccin se presentar como un
men desplegable. Si le asignamos un valor mayor se presentar como una lista con barra de
desplazamiento.
multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarn mediante la etiqueta <option> que puede acompaarse del atributo
selected para indicar cual es la opcin que aparecer por defecto. Si no lo especificamos, siempre ser la primera de
la lista.
<HTML>
<HEAD>
</HEAD>
<BODY>


<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
</FORM>

</BODY>
</HTML>

Areas de texto
Con las etiquetas <textarea>;.....</textarea> definimos un texto de mltiples lneas para que el visitante pueda incluir
un comentario junto a sus datos.
Junto a la etiqueta de apertura pueden aparecer los siguientes atributos:
name="" Nombre del campo.
Cols="" Numero de columnas de texto visible.
14
Rows="" Numero de filas de texto visible.
<HTML>
<HEAD>
</HEAD>
<BODY>


<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
</FORM>

</BODY>
</HTML>

Botones
Se definen mediante la etiqueta <input> a la que le acompaan los atributos:
type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que
se han introducido.
Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.
<HTML>
<HEAD>
</HEAD>
<BODY>


<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
</FORM>

</BODY>
</HTML>

Manual HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual HTML

Caricato da

Copyright:

Formati disponibili

Elaboracin de Pginas WEB (HTML) Cobaq 1 Satlite

L.I. Sandra Trejo Ferrusca Herramientas informticas 2 2011A

Potrebbero piacerti anche