You are on page 1of 29

HTML BSICO

Para Principiantes

www.ebookred.com |
Miguel A. Fernndez
Confidential
www.ebookred.com

Estimado Cliente

Gracias por descargar este manual gratuito: HTML BSICO.

El presente ebook lo confeccion especialmente para principiantes debido a que todos


alguna vez hemos tenido que comenzar en este nivel, y entiendo lo duro que puede ser
cuando desconoces el mundo en particular de HTML.
Sin embargo, este libro electrnico tambin es para aquellas personas o usuarios que
deseen recordar o profundizar ms en el cdigo de marcas o HTML.
Voy a compartir contigo las lecciones con un sistema muy sencillo de implementar,
pero muy poderoso, ya que podrs crear archivos en HTML y ver el resultado en un
navegador, as cumplir con el reto de aprender este cdigo que te podr llevar a
profundizar en los lenguajes de programacin, siempre y cuando sepas la gnesis de una
pgina web.
As que adelante y suerte en tus proyectos.

Autor: Miguel A. Fernndez


Prohibida la reproduccin total o parcial sin
el previo consentimiento del autor.
www.ebookred.com

SUMARIO
Qu es HTML ? 3
Estructura de un Documento HTML.. 4
Ruta Absoluta y Ruta Relativa 4
Nuestra primera pgina web.. 5
Reglas de Formato. 6
Gnesis de la URL 6
Cabecera. 7
Ttulo. 7
Cuerpo 8
Caracteres especiales.. 9
Etiquetas HTML bsicas... 10
Listas. 14
Hiperenlaces 14
Imgenes 15
Vdeos... 16
Tablas.. 16
Formularios. 18
Ejemplo Formulario 27

Qu es HTML?
HTML es la abreviatura de HyperText Markup Language, y es el lenguaje
de marcas que todos los programas navegadores usan para presentar
informacin en la World Wide Web (WWW).
Est basado en el uso de etiquetas, consistentes en un texto ASCII
encerrado dentro de un par de parntesis angulares(<..>). El texto incluido
dentro de los parntesis nos dar una explicacin de la utilidad de la
etiqueta. As por ejemplo la etiqueta <TABLE> nos permitir definir una
tabla.
Las etiquetas podrn incluir una serie de atributos o parmetros, en su
mayora opcionales, que nos permitirn definir diferentes posibilidades o
caractersticas de la misma. Estos atributos quedarn definidos por su
nombre (que ser explicativo de su utilidad) y el valor que toman separados
por un signo de igual. En el caso de que el valor que tome el atributo tenga
ms de una palabra deber expresarse entre comillas, en caso contrario no
ser necesario.
As por ejemplo la etiqueta <TABLE border=3> nos permitir definir una
tabla con borde de tamao 3.
Entre otras cosas, el manejo de estas etiquetas nos permitir:
Definir la estructura lgica del documento HTML.
Aplicar distintos estilos al texto (negrita, cursiva, subrayado ...).
La inclusin de hiperenlaces, que nos permitirn acceder a otros
documentos relacionados con el documento principal.
La inclusin de imgenes y ficheros multimedia (grficos, vdeo,
audio).
Qu vamos a necesitar para crear un documento HTML?

Un procesador de textos para escribir y editar el cdigo HTML. Este


podr ser cualquiera que no formatee el texto, ya que el leguaje
HTML est basado en el cdigo ASCCI. Si usamos un procesador
como el Word, tendremos que guardar el documento como "slo
texto ".
Un navegador Web como:
Internet Explorer.
Firefox.
Navegador que se encargar de interpretar el cdigo HTML de
nuestro documento y mostrrnoslo eficazmente.

El mtodo de trabajo para crear nuestro documento es:


1. Con el procesador de texto crearemos el documento HTML y lo
guardaremos con el nombre
que deseemos, a excepcin de la extensin, que deber ser
necesariamente .htm .html.

2. Para visualizar nuestro documento HTML abriremos el documento con


el programa navegador.

Estructura de un documento HTML


La estructura bsica de un documento HTML es la siguiente:

<HTML> Indica el inicio del documento


<HEAD> Indica el inicio de la cabecera
<TITLE> Inicio del ttulo del documento
Ttulo de mi web
</TITLE> Final del ttulo del documento
</HEAD> Final de la cabecera
<BODY> Inicio del cuerpo del documento

</BODY> Final del cuerpo del documento


</HTML> Final del documento
Ninguno de estos elementos es obligatorio, pudiendo crear documentos
HTML sin incluir estas etiquetas de identificacin. No obstante es
completamente recomendable la construccin de pginas HTML siguiendo
esta estructura, para una buena concepcin y legibilidad del cdigo.

Ruta Absoluta y Relativa


Un error que cometemos casi todos a la hora de empezar una pgina
web es confundir la ruta absoluta con la ruta relativa. Confeccionamos
nuestra pgina web, y despus en el navegador no se ve nuestra imagen o
lo que hayamos insertado en nuestro contenido. Es un error muy frecuente
por no entender el funcionamiento de las rutas o paths relativas y
absolutas.

Ruta Absoluta:
La ruta absoluta indica la direccin completa del archivo sin importar
donde estemos, es decir, si yo tengo una foto de mi casa llamada
micasa.jpg dentro de la carpeta imgenes en mi dominio ebookred.com
la ruta absoluta es: http://www. ebookred.com /imagenes/micasa.jpg
Podemos utilizar esa ruta para llamar a la imagen desde cualquier sitio,
ya sea en nuestro dominio o en otro cualquiera. Es aconsejable trabajar con
rutas absolutas, para tener un mayor control de la web.
Ruta Relativa:
La ruta relativa llama al mismo archivo pero desde el lugar donde
estamos situados, es decir que solo funciona dentro de nuestro dominio. Por
ejemplo: si nosotros estamos en el directorio principal y queremos insertar
la foto desde el index la ruta relativa desde el index sera:
imagenes/micasa.jpg

Ahora supongamos que estamos dentro de una categoria llamada


"articulos"
http://www. ebookred.com /imagenes/articulos

y queremos insertar la foto, la ruta relativa desde ese punto sera:


../imagenes/micasa.jpg
Los dos puntos antes de la barra (../) significa un paso hacia atrs,
porque teniamos que salir de la carpeta "articulos" y entrar a la carpeta
"imagenes" donde esta la foto.

Nuestra primera pgina HTML


Una vez que conocemos la estructura bsica de un documento HTML,
vamos a crear una pgina HTML muy sencilla.
Lo primero ser abrir el procesador de textos que hayamos elegido y
copiar el siguiente Cdigo fuente
1.
<HTML>
<HEAD>
<TITLE> titulo HTML </TITLE>
</HEAD>
<BODY>
Esta es mi primera <I>pgina de comienzo</I> para aprender <B>HTML</B>
</BODY>
</HTML>

2. Una vez tecleado el cdigo, guardamos el documento como


Pagina1.htm, y por lo tanto lo abriremos con el navegador correspondiente.
El resultado ser:
Esta es mi primera pgina de comienzo para aprender HTML

Reglas de formato
Todos los navegadores usan unas reglas bsicas para poder mostrar una
pgina web con un buen formato:
El espacio en blanco es ignorado. Ya que un documento HTML
puede estar en cualquier tipo de fuente y adems la ventana del navegador
puede ser de cualquier tamao.
Las etiquetas pueden ser escritas en maysculas o en
minsculas. En todo caso se aconseja su escritura en maysculas para
poder distinguirlas del texto normal.
Existe normalmente una etiqueta de inicio y otra de fin. La
etiqueta de fin contendr el mismo texto que la de inicio aadindole al
principio una barra inclinada /. La etiqueta afectar por tanto a todo lo que
est incluido entre las etiquetas de inicio y fin. No obstante, existen algunas
que no necesitan cierre, ya que en estas etiquetas se presupone su final,
como
por ejemplo: <P> prrafo, <BR> salto de lnea <IMG> inclusin de
una imagen.
Por ejemplo:
Instruccin HTML Resultado En Navegador
<B>Texto en negrita</B> Texto en negrita
<I>Texto en cursiva</I> Texto en cursiva
<B><I>Texto en negrita y cursiva</B></I> Texto en negrita y
cursiva

Gnesis de la URL
La URL (ruta) nos va a permitir localizar y acceder a cualquier recurso de
la red desde nuestro programa navegador. A travs de los URL podremos
referenciar cualquier fichero que deseemos incluir en nuestro documento
HTML. Cada elemento de Internet vendr definido por su URL
correspondiente, independientemente del tipo de servidor en el que se
encuentre.

El modo para referenciar la URL es:


servicio: //maquina.dominio: ruta/archivo
Siendo:
Servicio: como su propio nombre indica, hace referencia a alguno de
los servicios de Internet. El servicio correspondiente al WWW es http
(HiperText Transport Protocol), protocolo para la transmisin de hipertexto.
Por lo que cualquier referencia a un documento HTML debera comenzar por
http:// .
Otros servicios a destacar son: ftp, news, telnet o mailto (Importante
para envo de Formularios).
mquina.dominio: indica el nombre del servidor en que se encuentra el
documento al que estamos haciendo referencia, junto con el dominio al que
pertenece dicho servidor.
La ruta o camino indica los directorios que hay que seguir para
encontrar el documento que estamos referenciando.
Finalmente especificaremos el nombre del archivo en que est guardado
el documento en cuestin. Si no indicamos un archivo, accederemos al
archivo por defecto del directorio al que estemos referenciando. En el caso
del servicio http este archivo por defecto suele ser index.html index.php.
Ejemplo: http://www.ebookred.com
Si escribimos este dominio el navegador ir al archivo index.php.

Cabecera del documento HTML


En la cabecera de un documento HTML incluiremos las definiciones
generales que afecten a todo el documento, como por ejemplo el ttulo de la
pgina que aparecer en la parte superior de la ventana
del navegador.
Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la
cabecera de nuestro documento.
Todas la etiquetas de la cabecera son opcionales, aunque se recomienda
incluir en todos nuestros documentos la etiqueta <TITLE> correspondiente
al ttulo del documento.

Ttulo del documento


El ttulo de nuestro documento viene especificado por las etiquetas:
<TITLE> y </TITLE> y, como ya explicamos, este ttulo es el que aparecer

en la ventana de nuestro programa navegador. Lo normal y recomendable


es que el ttulo guarde relacin con el contenido de nuestro documento, ya
que por ejemplo es utilizado por algunos servidores de bsqueda (google)
para poder posicionar el contenido de nuestro documento (Tcnicas SEO).
<TITLE>Titulo HTML</TITLE>

Aparecer en la pestaa del navegador el ttulo que hayamos insertado

Cuerpo
Es la pgina web en s, o sea nuestro contenido que queramos incluir y
del tema que deseemos. En el cuerpo de un documento HTML es donde
incluiremos las distintas instrucciones del lenguaje junto con el contenido en
s de nuestra pgina Web: textos, imgenes, enlaces a otras pginas, etc..
Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo
de nuestro documento.
Los argumentos que podemos incluir son muchsimos como el color del
texto o del color de fondo de nuestra pgina web etc...
Referente a los colores en un documento HTML, estos se pueden
especificar por su nombre (name) o por su cdigo de color, que es un
nmero compuesto de tres pares de cifras hexadecimales que nos indican la
proporcin de los colores primarios (rojo, verde y azul) que forman el color
deseado (#rrggbb):
Nombre #Cdigo de color Color mostrado
Black #000000 Negro
White #FFFFFF
Teal #008080 Teal
Blue #0000FF Azul
Navy #000080 Azul marino
Lime #00FF00 Lima
BlaPurple #800080 Prpura
Yellow #FFFF00 Amarillo
Olive #808000 Oliva
Red #FF0000 Rojo
maroon #800000 Marrn
gray #808080 Gris
fuchsia #FF00FF Fucsia
green #008000 Verde
La etiqueta <BODY> presenta una serie de atributos que van a afectar a
todo el documento en su conjunto. Estos atributos nos van a permitir definir
los colores del texto, del fondo, y de los hiperenlaces del documento.
Incluso nos permitirn insertar una imagen de fondo en nuestra pgina.
<BODY background="URL" bgcolor="#rrggbb name" text="name"

link="name" vlink="name" >


background="URL". Nos va a permitir mostrar una imagen como
fondo de nuestro documento HTML. El camino a esta imagen vendr
especificado por la URL que definamos.
Si la imagen no rellena todo el fondo del documento, sta ser
reproducida tantas veces como sea necesario hasta completar todo el
fondo.
bgcolor=#rrggbb name {bgcolor: Background Color}. Nos va a
permitir definir un color para el fondo de nuestro documento. Este atributo
ser ignorado si previamente hemos utilizado el atributo background.
Por ejemplo, agregar el siguiente cdigo al <BODY> en la pagina1.htm,
y observa el resultado.
<BODY bgcolor="blue">

Caracteres especiales
Hasta ahora hemos escrito algunos ejemplos de cdigo HTML, pero
hemos pasado por alto algunas limitaciones de HTML respecto al uso de
caracteres especiales. Una de estas limitaciones es, por ejemplo, el uso de
los caracteres < y >, que como ya sabemos indican el inicio y fin de una
etiqueta HTML. Pues bien, si quisiramos escribir estos caracteres como
parte normal de un texto, el navegador no sabra si se trata de texto normal
del contenido de una web o del comienzo y final de una etiqueta.
Para ello tendremos los siguientes unos cdigos para poder escribir estos
caracteres y otros relacionados con las etiquetas:
Smbolo Cdigo
< &lt;
> &gt;
& &amp;
" &quot;
Para las letras especficas del idioma castellano tenemos:
Letra - Cdigo
&aacute;
&Aacute;
&ntilde;
&eacute;
&Eacute;
&Ntilde;
&iacute;

&Iacute;
&uuml;
&oacute;
&Oacute;
&Uuml;
&uacute;
&Uacute;
&#191;
&#161;

Etiquetas HTML Bsicas


A continuacin estudiaremos algunas etiquetas fciles de insertar.

Inclusin de espacios en blanco: &nbsp;


Nos aadir la inclusin de ms de un espacio en blanco entre dos textos
consecutivos, de forma que estos espacios se muestren de forma efectiva
en el navegador. Tendremos que incluir tantas expresiones &nbsp; como
espacios en blanco se deseen incluir.
Ejemplo - Resultado
Texto1&nbsp;&nbsp;&nbsp;Texto2 Texto1 Texto2

Salto de lnea: <BR>


Nos permite dar un salto a la lnea siguiente en el punto donde la
etiqueta sea insertada.
Ejemplo - Resultado
Esta frase tiene aqu<BR> un salto de lnea

Cambio de prrafo: <P>


Permite definir un prrafo, introduciendo normalmente un espacio de
separacin de dos lneas con el texto siguiente al punto donde hayamos
insertado la etiqueta <P>.

Lnea Horizontal: <HR>


Nos permite insertar una lnea horizontal, cuyo tamao podremos
determinar a travs de sus atributos.
10

Si no especificamos ningn atributo dibujar una lnea que ocupe el


ancho de la pantalla del navegador. Su gran utilidad es la de permitirnos
dividir nuestra pgina en distintas secciones. No es preciso la etiqueta de fin
</HR>.
El formato de la etiqueta con sus posibles atributos es:
<HR align= left / right / center noshade size=n width=n >
align= left / right / center. Permite establecer la alineacin de la lnea
a la
izquierda, a la derecha o centrarla.
noshade. No muestra la sombra de la lnea, evitando el efecto de tres
dimensiones.
size=n. Indica el grosor de la lnea en pixels.
width=n n%. Especificar el ancho de la lnea, este se podr
especificar en pixels (n)
Ejemplo Resultado
<HR>
<HR size=4 noshade>
<HR size=5
width=50%
align=right>
<HR size=10
width=50%
align=center>

Cabeceras y atributos de texto <H1>...<H6>


En un documento HTML podemos incluir seis tipos distintos de
cabeceras, que van a constituir normalmente el ttulo y los distintos
apartados que forman el documento, aunque podremos utilizarlas en el
punto que deseemos del documento para resaltar cualquier texto.
Estas cabeceras son definidas por las etiquetas:
<H1><H2><H3><H4><H5> y <H6>.
La cabecera <H1>ser la que muestre el texto de mayor tamao, este
tamao ir disminuyendo hasta llegar a la cabecera </H6>. Para alinear las
cabeceras utilizamos el atributo align. El formato sera: <Hn align=center>,
siendo n cualquier nmero del 1 al 6.

11

Ejemplo Resultado
<H1>Cabecera 1</H1>
<H2>Cabecera 2</H2>
<H3>Cabecera
<H4>Cabecera
<H5>Cabecera
<H6>Cabecera

Cabecera 1
Cabecera 2

3</H3> Cabecera 3
4</H4> Cabecera 4
5</H5> Cabecera 5
6</H6> Cabecera 6

Ejemplo Resultado
<H5 align=center>Cabecera 5</H5> Cabecera 5

Atributos del texto


Al texto de nuestro documento HTML le podemos aplicar distintos
atributos (negrita, cursiva, subrayado, etc..), al igual que hacemos cuando
trabajamos con el procesador de textos en la edicin de nuestros
documentos. Para aplicar estos atributos disponemos de distintas etiquetas,
que aplicarn su efecto al texto incluido entre sus indicadores de inicio y fin.
Atributo Etiqueta
Resultado
<B>Texto en negrita</B>
Texto en negrita
<I>Texto en cursiva</I>
Texto en cursiva
<U>Texto subrayado</U>
Texto subrayado
Si queremos aplicar efectos ms espectaculares a nuestro documento
HTML, debemos variar el tamao, el color y el tipo de letra del texto. La
etiqueta que nos permite todo esto es <FONT>...</FONT>, por medio de
sus atributos size, color y face:
<FONT size="n" "+/- n" color="#rrggbb name" face="nombre de
font" >
Veamos los parmetros de la etiqueta <FONT>
size="n" "+/- n". El atributo size nos permite especificar un tamao
determinado para la fuente del texto incluido entre las etiquetas de inicio y
fin, el cual puede estar entre 1 y 7. El texto de tamao normal equivale a la

12

fuente de tamao 3 (fuente base). Por tanto, si especificamos size=+2, el


tamao de la fuente ser 5. Y si especificamos size= -1, el tamao ser 2.
Ejemplo Resultado
<FONT size=2>Tamao 2</FONT> Tamao 2

Tamao 5 (3+2)

<FONT size=+2>Tamao 5 (3+2)</FONT>


<FONT size=-1>Tamao 2 (3-1)</FONT> Tamao 2 (3-1)

color="#rrggbb name". Nos va a permitir definir el color que tendr


el texto incluido entre las etiquetas.
Ejemplo Resultado
<FONT color=red>Texto de color
rojo</FONT>
Texto de color rojo
<FONT color=blue>Texto de color
azul</FONT>
Texto de color azul
<FONT size=5 color=#008000>Texto
verde y de tamao 5</FONT>

Texto verde y de
tamao 5
face="nombre de font". Nos va a permitir escribir texto con el tipo de
letra que especifiquemos. En el caso de que el tipo de letra no estuviera
cargada en el ordenador o computadora, al leer la pgina, se usar el
<Font> por defecto del navegador utilizado.
Ejemplo Resultado
<FONT face=Tahoma>Tipo de letra
Tahoma</FONT>
Tipo de letra Tahoma
<FONT size=4 color=red
face=Tahoma>Texto azul, de tamao
4 y Tahoma</FONT>

Texto azul, de tamao 4 y Tahoma

13

Listas
Las listas son muy importantes, muchas veces tendremos que utilizarlas
para ordenar nuestro contenido. Tendremos que usar dos etiquetas para
formar una lista, la primera es <ul></ul> con la que indicamos que
comenzaremos una lista, y la segunda es <li></li> donde insertamos los
items o texto de la lista, se utiliza as:
<ul>
<li>texto lista 1</li>
<li> texto lista 2</li>
<li> texto lista 3</li>
</ul>

Eso se vera as:

texto lista 1
texto lista 2
texto lista 3

Hiperenlaces
Los hiperenlaces son enlaces de hipertexto que nos van a permitir
acceder de manera directa a otros documentos HTML independientemente
de su ubicacin, o a otras zonas dentro de nuestro propio documento.
Para crear un hiperenlace (enlaces que al clicar llevan a otra pgina)
utilizaremos la etiqueta <a> con varios atributos, uno para indicar la
direccin del enlace y otro para insertar una descripcin:
<a href=http://www.ebookred.com title=Como crear una pagina web
con explicaciones paso a paso>Como crear una pgina Web</a>
Para enlazar una pgina interna de nuestra pagina web tenemos que tener
en cuenta que esta se encuentra en una carpeta comn y corriente,
entonces no hace falta indicar el dominio, quedara as:
<a href=/contacto.html>Contacto</a>
y si el archivo contacto.html se encontrara dentro de otra carpeta
llamada usuarios quedara de esta forma:
<a href=usuarios/contacto.html>Contacto</a>

14

Imgenes
Podremos dar un aspecto mucho ms vistoso a nuestros documentos
HTML con la inclusin de imgenes. Los formatos de imagen que todos los
navegadores reconocen son: gif y jpg. Si queremos insertar una imagen en
otro formato, el visor debera disponer del programa externo que permita
su visualizacin. De todas formas, una buena solucin es utilizar algn
programa de tratamiento de imgenes que nos convierta la imagen a uno
de los formatos mencionados anteriormente.
El formato gif es ms recomendado para la inclusin de iconos, grficos,
y el formato jpg para el caso de insertar fotografas en nuestras pginas.
La etiqueta que nos va a permitir la insercin de imgenes es <IMG>. La
imagen se insertar justo en el punto del documento donde coloquemos
dicha etiqueta, pudiendo insertar imgenes dentro de listas,
tablas o formularios.
El formato de la etiqueta, con sus posibles argumentos, es el siguiente:
<IMG src="URL de la imagen" alt="Texto alternativo"
align="top/middle/botton/left/rigth" border="Tamao"
height="Tamao" width="Tamao" hspace="margen"
vspace="margen">

src="URL de la imagen". El atributo src nos va servir para indicar la


URL de la imagen que queremos insertar, es decir, el servidor y
camino hasta llegar al fichero de la imagen.
Por lo tanto subiremos nuestras imgenes, que vayamos a incluir en
nuestro documento HTML, al servidor remoto o hosting.

alt="Texto alternativo" .Nos va a permitir mostrar un texto


alternativo para el caso en que el navegador no sea capaz de mostrar
la imagen. Su uso es muy recomendable ya que cuando
publiquemos nuestras pginas, no sabremos desde qu tipo de
navegadores
accedern los usuarios a nuestras pginas.

15

Align= top/middle/botton/left/rigth . Va a definir si la imgen va a


estar alineada: arriba/medio/abajo/ izquierda/ derecha en la ventana
del navegador.
border =x Define el tamao numrico del borde de la imagen.
height =x Define la altura numerica de la imagen.
width= x Define el ancho numrico de la imagen.
vspace=x Nos sirve para posicionar la imgen, y define la
distancia entre el borde superior de la imgen y el lmite superior de
la ventana del navegador.
hspace=x Nos sirve para posicionar la imgen, y define la distancia
entre el borde izquierdo de la imgen y el lmite izquierdo de la
ventana del navegador.

Insertar videos y msica


Para insertar contenido multimedia como puede ser un tema de fondo o
un video deberemos usar la etiqueta <embed> as:
<embed src="/mi-video.avi" width=400 height=450>
En el atributo src indicamos la ubicacin del archivo, y con width y
height le decimos que tamao queremos que tenga nuestro video. Son los
mismos atributos de la insercin de la imagen. Ni que decir tiene que el
archivo de vdeo se ha de subir a nuestro servidor o hosting.

Tablas

HTML nos va a permitir la inclusin de cualquiera de los elementos de


nuestra pgina (texto, imgenes, hiperenlaces, listas, etc.), dentro de una
tabla. Por lo que conseguiremos dar una excelente estructuracin a los
contenidos de nuestros documentos. Adems, la definicin de las
tablas en HTML es muy abierta, pudiendo en cualquier momento
redimensionar la tabla, es decir, cambiar su nmero de filas o de columnas,
cambiar el tamao de alguna de sus celdas, etc.
La etiqueta que nos va a permitir la definicin de tablas es <TABLE>
</TABLE>.
El formato general de la etiqueta sin ningn argumento, es el siguiente:
<TABLE>
<TR >
<TH>Contenido de la celda </TH>
<TD>Contenido de la celda </TD>
</TR>
</TABLE>
Vamos a analizar cada una de estas etiquetas de forma separada:
1. <TABLE> </TABLE>: Definicin general de la tabla. Dentro de ella
definiremos las filas y
columnas que la constituyen, pudiendo incluso definir tablas dentro de
tablas, es decir, tablas
anidadas.
2. <TR> </TR>: Definicin de las filas de la tabla. Por cada etiqueta
<TR> que incluyamos se
crear una fila en la tabla. No ser necesario indicar la etiqueta de
cierre.
3. <TH></TH> <TD></TD>: Definicin de cada una de las celdas de
la tabla. Estas etiquetas estn contenidas dentro de otra etiqueta de
16

definicin de fila, de forma que por cada etiqueta <TH> o <TD> que
incluyamos se crear una celda dentro de la fila correspondiente. La
etiqueta <TH> la usaremos para crear celdas de tipo cabecera, es decir,
celdas cuyo contenido est resaltado en negrita, dejando la etiqueta <TD>
para definir celdas de datos. En este caso tampoco es necesario indicar las
etiquetas de cierre.
<table border="1" summary="Ejemplo de tabla simple con celdas de
encabezado.">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
La salida en el navegador es la siguiente:
1

Columna
Celda 1
Celda 4

Columna
Celda 2
Celda 5

Columna
Celda 3
Celda 6

Para algunas tablas puedes necesitar unificar dos o ms celdas en una


sola que tomar el lugar de aquellas afectadas. Estas unificaciones pueden
lograrse mediante los atributos "rowspan" (para unificar verticalmente) y
"colspan" (para unificar horizontalmente), ambos disponibles para celdas.
<table border="1" summary="Ejemplo de tabla simple con
unificaci&oacute;n de celdas de una fila.">
<tr>
<td White #FFFFFF >Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
17

<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
La salida en el navegador es la siguiente:
Campo1

Campo2

Campos 4 y 5
Campo7

Campo3
Campo6

Campo8

Campo9

Formularios
Los formularios es la herramienta ms utilizada en Internet para obtener
datos e informacin acerca de los usuarios que navegan nuestra website.
La idea de los formularios es recoger informacin online con la
interaccin del usuario y luego ejecutar una determinada accin con la
misma, que podra ser por ejemplo, un formulario de venta que el usuario
completa y luego es enviado va email al vendedor en forma encriptada. La
etiqueta HTML que nos va a permitir la creacin de formularios es <FORM>.
Vamos a detenernos en esta importante fase de HTML.
Las etiquetas son las siguientes:

<FORM>, <INPUT>, <SELECT>, <OPTION> y <TEXTAREA>

Etiqueta <FORM>
Todo formulario debe estar encerrado entre el par de etiquetas
<FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier
documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>.
Esta etiqueta <FORM> presenta tres atributos posibles:
ACTION: La Ruta o URL del programa o del Servidor Web utilizado para
procesar la informacin recolectada.
METHOD: Es importante saber que existen dos mtodos, el valor GET
que aade argumentos del formulario o el valor POST, el ms utilizado y
definen la manera en la cual los datos son transferidos al servidor.
ENCTYPE: este atributo est reservado para que la informacin viaje en
forma encriptada a travs de Internet. El ms usado para que lleguen el
contenido a travs de un mail con el mtodo post sera "text/plain". Esta es
la nica etiqueta optativa, los anteriores son obligatorios.

18

Etiqueta <INPUT>
La etiqueta <INPUT> es la segunda etiqueta ms importante de los
formularios. Se la puede definir como una etiqueta multifuncin, ya que con
la misma podemos crear "botones", "radio-buttons", "checkbox", y simples
recuadros para ingresar texto.
Tiene los siguientes parmetros: ALIGN, CHECKED, MAXLENGTH,
NAME, SIZE, SRC, TYPE, y VALUE. Pero no todos son obligatorios. Los
atributos importantes para toda etiqueta <INPUT> son:
NAME, que asocia un nombre con cada variable ingresada.
TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX,
RADIO, SUBMIT, RESET, IMAGE y HIDDEN; de acuerdo al tipo de
elemento que deseemos representar en el formulario.
Ahora veremos cada tipo de TYPE y sus valores detenidamente:

- Botn de type=text
Se utiliza para la entrada de cadenas de texto corto, como por ejemplo
nombre de usuarios, nmeros, fechas o diversos datos que se puedan
expresar en una lnea de texto. Se mostrar un recuadro que ocupa una
lnea y la que ser posible especificar este texto. El formato de la
instruccin es el siguiente:
<INPUT type=text name="variable1" value="valor inicial"
size="tamao" maxlength="longitud mxima" >
Las dimensiones de la ventana de introduccin de texto se fija con el
atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo
se define la parte visible, pero el usuario podr introducir ms texto si lo
desea. Para indicar el mximo nmero de caracteres que se permiten en la
entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la
variable que toma el valor de la entrada y VALUE especifica el valor de
inicializacin del campo. De todos los atributos solo ser obligatorio NAME,
ya que es el nombre de la variable, siendo el resto opcionales.
Aqu tenemos un ejemplo sencillo y su salida:
Usuario: <INPUT type=text name=variable value="Tu nombre">

Usuario:

19

Tu nombre

- Botn de password type= password


En este caso no se imprimen los caracteres segn se van introduciendo,
se muestra un asterisco en vez de los caracteres. Solo se puede ver el
nmero de caracteres, pero no su valor. Se usa para la introduccin de
claves de acceso (passwords) y datos que no deban ser vistos al
introducirlos. El formato es:
Contrasea<INPUT type=password NAME=variable1
VALUE="password">
Contrasea

- Botn de envo de datos: type=submit


Es importante, con este argumento especificamos un botn en el que al
pulsar, los datos sern enviados al programa o direccin de correo
encargada de procesar la informacin recogida por el formulario. El formato
es:
<INPUT type= submit value="Mensaje a mostrar">
En este caso el parmetro value indica el mensaje que se mostrar en el
botn.
Veamos un ejemplo y el resultado siguiente:
<INPUT type=submit value="Enviar Datos">
Enviar Datos

- Botn grfico: type=image


Con este argumento especificamos un botn de tipo imagen en el que, al
igual que con el botn anterior, si pulsamos en la imagen los datos sern
enviados al programa o direccin de correo que procesar la informacin
recogida por el formulario. Es importante resaltar que la imagen tendremos
que subirla a nuestro directorio web del hosting, para que se pueda
visualizar. Su formato es el siguiente:
<INPUT type= image src="URL de la imagen" name="Variable">
Con el parmetro src especificamos la URL de la imagen que ser
insertada en el botn. En este caso, en la variable referenciada por name
se almacenarn las coordenadas de la imagen. Aqu vemos un simple
ejemplo de un botn que enlaza con una imagen tipo gif.
<INPUT TYPE=IMAGE SRC="boton.gif">

20

- Botones de seleccin: type=checkbox


El checkbox es un botn que presenta dos estados: marcado (1) y
desmarcado (0). Podremos variar su estado simplemente pinchando con el
ratn. El formato es:
<INPUT type= checkbox name="Variable" value="Valor" checked>
Si especificamos el argumento checked, el botn aparecer marcado por
defecto. Si incluimos el argumento value, cuando el botn est marcado su
variable asociada adquirir el valor dado por value.
Estar Activada la opcin:
<INPUT type=checkbox name=nombre1 value=Op1 CHECKED> Opcin1
Salida en el Navegador:
Opcin1
NO estar Activada la opcin:
<INPUT type=checkbox name=nombre2 value=Op2> Opcin 2
Salida en el Navegador:
Opcin 2

- Seleccin entre varias opciones: type=radio


Este argumento se usa cuando hay que hacer una seleccin entre varias
alternativas u opciones, pudindose seleccionar nicamente una de las
alternativas. Debemos incluir una etiqueta radio por cada una de las
posibles alternativas. El formato es:
<INPUT type= radio name="Variable" value="Valor" checked>
Si especificamos el argumento checked, el botn aparecer marcado por
defecto. En este caso nicamente uno de los botones de radio podr
aparecer marcado.
Cuando un botn est seleccionado la variable asociada a la lista de
botones adquirir el valor dado por value.

21

Veremos un ejemplo y su posterior representacin:


<INPUT type=radio name= Variable1 value=Op1
checked>Opcin1<br>
<INPUT type=radio name= Variable2 value=Op2> Opcin 2 <br>
<INPUT type=radio name= Variable3 value=Op3 > Opcin 3
Salida en el Navegador (Ntese que est activa la Opc1):
Op1
Op1
Op1

- Campos ocultos: type=hidden


Este tipo de campos no son visibles para el usuario. Su uso tiene sentido
en el caso de enviar algn tipo de informacin que no deba ser visualizada o
modificada por el lector de nuestra pgina Web. El
formato es:
<INPUT type= hidden name="Variable" value="Valor" >
Con esta etiqueta asignaramos a la "Variable" referenciada por name el
"Valor" de value y se enva junto con el formulario, y todo este mecanismo
es desconocido para el usuario de la pgina.
Veamos un ejemplo:
<INPUT type=hidden name=Variable1 value="valor">

- Botn de borrado de datos: type=reset


Este botn se usa para volver a los valores por defecto todos los
elementos del formulario, borrando todos los datos introducidos por el
usuario. Su formato es el siguiente:
<INPUT type= reset value="Texto del botn">
Con el parmetro value especificamos el texto que etiquetar al botn.
Veamos un ejemplo de esta etiqueta.
<INPUT type=reset value="Borrar datos">

22

Etiqueta <SELECT> y <OPTION>


Estas dos de etiquetas definen una lista de elementos los cuales el
usuario debe seleccionar uno o varios, de acuerdo a los atributos que
especifiquemos.
<SELECT name="Variable" multiple size=n>
<OPTION selected value="Valor_1">Primera Opcin
<OPTION value="Valor_2">Segunda Opcin
..........
<OPTION value="Valor_n">Ensima Opcin
</SELECT>
La variable referenciada por name tomar el valor(value) de la opcin
seleccionada.
Si especificamos el argumento mltiple, se mostrarn todas la
opciones en forma de tabla. El nmero de opciones visibles en la tabla
vendr dado por el argumento size.
Con la etiqueta <OPTION> iremos definiendo cada una de las opciones
de la lista.
El argumento selected va a determinar cul es la opcin por defecto.
Ahora vamos a ver el Cdigo fuente, correspondiente a un formulario de
captacin de usuarios que desean los servicios de una web determinada. Lo
aadiremos dentro de las etiquetas <BODY>y </BODY>
Cabe mencionar que se ha de sustituir:
direccion@dominio

23

por la direccin en concreto de la web

Cdigo:
<P align=center><B>Nombre WEB<I></I></B></P>
<FORM action="mailto:direccion@dominio.com" method = post>
<p align="left"><strong>Nombre:</strong>
<INPUT type="text" size="30" name="nombre"></p>
<p align="left"><BR>
<strong>E_mail: </strong>
<INPUT type="text" size="30" name="e_mail"></p>
<P><strong>Deseas recibir informacin sobre:
</strong>
<P><INPUT type="checkbox" name="infoCursos" value="cursos"
id="infoCursos">CURSOS
<P> <INPUT type="checkbox" name="infoManuales" value="manuales"
id="infoManuales">MANUALES
<P>
<INPUT type="checkbox" name="infoSoft" value="sw" id="infoSoft">
SOFTWARE
<P><strong>Quieres estar informado periodicamente?:
</strong><br>
<INPUT type="radio" name="informar" value="si">S
<INPUT type="radio" name="informar" value="no">No
<P><strong>Cmo nos conciste?: </strong><BR>
<SELECT name="referencia" multiple size="3" id="referencia">
<option>buscador
<option>Publicidad
<option>foro
<option>usuario
</SELECT>
<P><strong>Aadir nota:</strong><BR>
<TEXTAREA name="nota" rows="5" cols="40" id="nota"></TEXTAREA>
<P><INPUT type="submit" value="Enviar Datos">
<INPUT type="reset" value="Borrar Datos">datos">

24

La salida en un navegador ser:

Nombre WEB

Nombre:

E_mail:
Deseas recibir informacin sobre:
CURSOS
MANUALES
SOFTWARE
Quieres estar informado periodicamente?:
S

No

Cmo nos conciste?:


buscador
Publicidad
foro

Aadir nota:

Enviar Datos

25

Borrar Datos

Etiqueta <TEXTAREA>
Esta etiqueta nos permite definir un rea de dimensiones arbitrarias que
funciona como un verdadero editor, donde el usuario puede ingresar texto.

Entrada datos en mltiples lneas:


En un formulario tambin podremos introducir un campo de texto que
abarque varias lneas. Para ello utilizaremos la etiqueta
<TEXTAREA> </TEXTAREA>.
Su formato es el siguiente:
<TEXTAREA name="Variable" rows=Filas cols=Columnas>
Texto
</TEXTAREA>
Los argumentos rows y cols nos van a permitir especificar,
respectivamente, el nmero de filas de texto visibles y el nmero de
columnas de texto visibles en el campo.
Ejemplo - Resultado
<TEXTAREA name="Var7" rows=5 cols=40>
Contenido para aadir.
</TEXTAREA>

Para finalizar trabajaremos con otro formulario para familiarizarnos con


este tipo de etiquetas HTML, y sobre todo la importancia que tiene el uso
correcto del envo de datos por correo electrnico. En el siguiente cdigo se
han puesto todas las etiquetas que debe reconocer el navegador para su
correcto funcionamiento y xito de envo.
Acordaros de insertar vuestra direccin web en:
mailto:direccin@dominio.com

26

Ejemplo prctico de envo de datos


mediante Formulario.

<HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION="mailto:direccin@dominio.com" METHOD=POST>
<table align="center" border="0">
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150"><INPUT NAME="nombre"
MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25"
TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo"
MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td><TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150"><INPUT NAME="boton" TYPE="SUBMIT"
VALUE="Enviar">
</td>
</TABLE>
</FORM>
</BODY>
</HTML>

27

Lo que se vera de esta forma en el navegador:

Nombre:
Email:
Motivo:

Mensaje:

Enviar

Autor: Miguel A. Fernndez


Prohibida la reproduccin total o parcial sin el previo consentimiento del autor
www.ebookred.com

28

You might also like