Curso Básico de HTML

Curso Taller de HTML
Universidad de Colima
Jornada Nacional de las Ciencias Computacionales
Universidad de Colima. FIME.
Coquimatlán, Colima.
Agosto, 2005
Expositor: Ing.Rodolfo Gallardo-Rosales,M.C.
gallardo33@gmail.com
www.gallardo.com.mx
Universidad de Colima Derechos Reservados 2000 1

¿Qué es HTML?
Hyper Text Markup Language.
Lenguaje que todos los programas navegadores

usan para presentar información en la World
Wide Web.

Versiones del HTML
HTML 2.0
Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era

el 2.0 (establecido en noviembre del 95)
HTML 3.0 y 3.2
El HTML 3.0, resultó ser demasiado grande para la época

El HTML 3.2, incluía muchas de las mejoras que los principales navegadores
(Netscape y Explorer)
HTML 4.0
En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan

los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de
diciembre de 1997 dicho borrador fue finalmente aprobado.

¿Qué es HTML?
Es un lenguaje sencillo que se basa en el uso de etiquetas,

que es texto ASCII dentro de paréntesis angulares (< ... >)
que explica la utilidad de la etiqueta.
Por ejemplo <TABLE> nos indica que se definirá una tabla.

¿Qué es HTML?
Las etiquetas tienen una serie de atributos o parámetros, y

un valor después de un signo igual.
Si el valor tiene dos o más palabras, irá encerrado entre

comillas.
Por ejemplo <TABLE BORDER=2> define una tabla con bor-

de de tamaño dos.

¿Para qué se usan etiquetas?
Las etiquetas nos permiten:
Definir la estructura lógica del documento HTML
Aplicar distintos estilos de texto.
Incluir hiperenlaces para acceder a otros documentos rela-

cionados con el actual

¿Qué se necesita para crear un do-
cumento HTML?
- Un procesador de texto, para editar y escribir HTML
- un navegador Web, como Netscape, Explorer, Mosaic,

NeoPlanet, etc., para interpretar el código HTML.

¿Cuál es la secuencia para crear
nuestro trabajo?
1. Con el procesador de texto, crear un documento HTML y

guardarlo en el nombre que se desee, y extensión ya
sea .htm o .html
2. Abrir el documento con el programa navegador.

Reglas de formato
- Los espacios en blanco son ignorados
- Las etiquetas pueden ser escritas en mayúsculas o

minúsculas, indistintamente
- Existe normalmente una etiqueta de inicio y una de fin,

-que tiene el mismo texto que la de inicio-, precedida de
un slash
- Algunas etiquetas no necesitan cierre, como es el caso

de <P> <BR> <IMG>

Ejemplo de etiquetas
Instrucción HTML Resultado

<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

Estructura de un documento HTML
<HTML> Inicio del documento

<HEAD> Inicio del encabezado
<TITLE> Inicio del título
</TITLE> Fin del título
</HEAD> Fin del encabezado
<BODY> Inicio del cuerpo
Instrucciones HTML Cuerpo del documento
</BODY> Fin del cuerpo
</HTML> Fin del documento

Mi primera hoja HTML
Abrir el procesador de texto ascii plano que hayamos elegido y copiar el siguiente
código HTML:
<HTML>
<HEAD>
<TITLE>
Mi primera página web
</TITLE>
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Ahora, guardarlo con el nombre de pagina1.html y abrirlo con el navegador correspon-

diente para observar los resultados.

Forma del URL
El URL (Uniform Resource Locator) nos permite localizar y acceder a

cualquier recurso de la red desde nuestro navegador. Su forma general
es:
tipo_de_servicio://maquina.dominio:puerto/path/archivo
Tipo de servicio puede ser http, ftp, news, telnet o mailto
http://www.imta.mx Hyper Text Transport Protocol

ftp://ftp.mcafee.com File Transfer Protocol
news://jet.es Noticias
mailto:gall33@prodigy.net.mx Correo electrónico
file://c:/windows.win.ini Archivo local

Cabecera del documento HTML
<HEAD> ... </HEAD>
Se incluyen definiciones generales para todo

el documento, como título, indicador de refres-
co y el URL base.

Título del documento HTML
<TITLE> ... </TITLE>
Es el título que aparecerá en la ventana del

navegador. Se recomienda que guarde relación
con el contenido del documento,pues es utili-
zado por algunos buscadores.
Ejemplo:
<TITLE>Mi primera hoja web</TITLE>

Indicador de refresco del
documento
Indica que el documento indicado en la URL

deberá sustituir al actual transcurrido un nú-
mero de segundos. Por ejemplo:
<META http-equiv=refresh content="5;url=http://www.imta.mx/index.html">

Indicador de la URL base del
documento <BASE="URL">
Indica la localización de los archivos a que hace

referencia la página web. Si no se indica, el
navegador asumirá que están en el mismo lu-
gar que la página. Por ejemplo:
<BASE href="http://www.imta.mx/otros/tedigo/">

Cuerpo del documento
<BODY> ... </BODY>
Con este, se incluyen las distintas instruccio-

nes junto con el contenido de la página. textos,
imágenes, enlaces a otras páginas, etc.

Composición de colores

Atributos de <BODY>
background="URL"
<BODY background="fondo.gif">
bgcolor=#rrggbb o nombre
<BODY background="fondo.gif" bgcolor=blue>
text=#rrggbb o nombre
<BODY background="fondo.gif" bgcolor=blue text=red>
link=#rrggbb o nombre
<BODY background="fondo.gif" bgcolor=blue text=red link=lime>
vlink=#rrggbb o nombre
<BODY background="fondo.gif" bgcolor=blue text=red link=lime vlink=olive>

Caracteres especiales
Símbolo Código
< (menor que> <
> (mayor que) >
& (ampersand) &
" (comillas) "

Para las letras específicas del idioma castellano: las vocales acentuadas, la ñ,
la ü y los signos ¿ y ¡, existen los siguientes códigos:
Letra Código Letra Código Letra Código

á á Á Á ñ ñ
é é É É Ñ Ñ
í í Í Í ü ü
ó ó Ó Ó Ü Ü
ú ú Ú Ú ¿ ¿
¡ ¡

Otros símbolos especiales son:
Símbolo Código
ç ç
Ç Ç
© ©
® ®

Comentarios
Para la inclusión de comentarios en nuestra página HTML, podemos usar la

etiqueta: . Estos comentarios nos podrán servir para efectuar anota-
ciones en nuestro documento HTML que ayuden a una mayor comprensión
del código.
Ejemplo:


Espaciado y saltos de línea
En HTML sólo se admite un único espacio en blanco separando cualquier ele-

mento o texto, el resto de espacios serán ignorados por el navegador, al igual
que las tabulaciones, retornos de carro, etc. Veamos un ejemplo:
Ejemplo Resultado
Esta frase
no se verá así en el visor. Esta frase no se verá así en el visor.

Inclusión de espacios en blanco
Nos permitirá la inclusión de más 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 como espa-
cios en blanco se deseen incluir.
Ejemplo Resultado
Texto1 Texto2 Texto1 Texto2

Salto de línea <BR>
{BR: Break}
Nos permite dar un salto a la línea siguiente en el punto donde la etiqueta sea
insertada.
Ejemplo Resultado
Esta frase tiene aquí<BR> un salto de línea Esta frase tiene aquí
un salto de línea

Cambio de párrafo <P>
{P: Paragraph}
Permite definir un párrafo, introduciendo normalmente un espacio de separa-
ción de dos líneas con el texto siguiente al punto donde hayamos insertado la
etiqueta <P>.
Ejemplo Resultado
Esta frase tiene aquí<P> un cambio de párrafo Esta frase tiene aquí
un cambio de párrafo

Cambio de párrafo <P>
Tenemos la posibilidad de incluirle el atributo align el cual indica al navegador

la forma de justificar el texto incluido en el párrafo. El formato sería el siguien-
te:
<P align= left / right / center / justify >Texto contenido en el párrafo </P>
Veamos algunos ejemplos:
Ejemplo Resultado
<P align=right>Este es un ejemplo de párrafo Este es un ejemplo de párrafo
alineado a la derecha</P> alineado a la derecha
<P align=center>Este es un ejemplo de Este es un ejemplo de párrafo

párrafo centrado</P> centrado

Línea horizontal
{HR: Horizontal Rule}
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 alineación de la línea a la izquierda, a la derecha o cen-
trarla.
noshade
No muestra la sombra de la línea, evitando el efecto de tres dimensiones.
size=n
Indica el grosor de la línea en pixels.
width=n ó n%
Especificará el ancho de la línea, este se podrá especificar en pixels (n) o en
tanto por ciento del ancho de la ventana (n%).
Texto preformateado
{PRE: Preformatted}
Nos permitirá visualizar el texto tal y como se ha escrito, respetando los saltos
de línea, las tabulaciones, y espacios en blanco de todo el texto incluido entre
las etiquetas <PRE> y </PRE>.
Ejemplo Resultado
<PRE>Este texto está Este texto está
preformateado.</PRE> preformateado.

Cabeceras
Ejemplo Resultado
<H1>Cabecera 1</H1> Cabecera 1


Atributos del texto
Negrita <B></B> <B>Texto en negrita</B> Texto en negrita

Cursiva <I></I> <I>Texto en cursiva</I> Texto en cursiva
Teletype <TT></TT> <TT>Texto en modoteletype</TT> Texto en modo teletype
Subrayado <U></U> <U>Texto subrayado</U> Texto subrayado
Tachado <S></S> <S>Texto tachado</S> Texto tachado
Parpadeo <BLINK></BLINK> <BLINK>Texto parpadeando</BLINK> Texto parpadeando
Texto en modo superíndice
Superíndice <SUP></SUP> <SUP>Texto en modo superíndice</SUP>
Subíndice <SUB></SUB> <SUB>Texto en modosubíndice</SUB> Texto en modo subíndice
Centrado <CENTER></CENTER> <CENTER>Texto centrado</CENTER> Texto centrado

Etiquetas de estilo lógico
Algunas etiquetas de estilo lógico son:
Etiqueta Ejemplo Resultado

<STRONG></STRONG> <STRONG>Especifica texto Especifica texto
resaltado (igual <B>)</STRONG> resaltado (igual <B>)
<CITE></CITE> <CITE>Indica una cita o título Indica una cita o

(igual <I>)</CITE> título (igual <I>)
<STRIKE></STRIKE> <STRIKE>Texto tachado (igual Texto tachado

<S>)</STRIKE> (igual <s>)

Etiqueta <FONT>
<FONT size="n" ó "+/- n" color="#rrggbb ó name" face="nombre de font" >
size="n" ó "+/- n"
Ejemplo Resultado
<FONT size=2>Tamaño 2</FONT> Tamaño 2
<FONT size=+2>Tamaño 5 (3+2)</FONT> Tamaño 5 (3+2)
<FONT size=-1>Tamaño 2 (3-1)</FONT> Tamaño 2 (3-1)

Etiqueta <FONT>
color="#rrggbb ó name"
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 yde tamaño 5</FONT> Texto verde y de
tamaño 5

Etiqueta <FONT>
face="nombre de font"
Ejemplo Resultado
<FONT face=Tahoma>Tipo de letra
Tahoma</FONT> Tipo de letra Tahoma
<FONT size=4 color=blue face=Tahoma>
Texto azul, de tamaño 4 y Tahoma</FONT> Texto azul, de tamaño
4 y Tahoma

Listas
HTML nos permite crear tres tipos distintos de

listas:
Listas no numeradas
Listas numeradas
Listas de definiciones

Listas
Listas no numeradas: <UL>
{UL: Unordered List}
{LH: List Head} {LI: List Item}
<UL type="disk" ó "circle" ó "square">

<LH>Título de la lista</LH>
<LI>Elemento 1
<LI>Elemento 2
....
<LI>Elemento n
</UL>

Listas
Ejemplo Resultado
<UL type=square>
<LI>Europa ■ Europa
<LI>Asia ■ Asia
<LI>Africa ■ África
<LI>América ■ América
<UL type=circle > ● América del Norte
<LI>América del Norte ● América del Sur
<LI>América del Sur ■ Oceanía
</UL>
<LI>Oceanía
</UL>

Listas
Listas numeradas: <OL>
{OL: Ordered List}
<OL start="n" type="Tipo de lista">

<LI>Elemento 1
<LI>Elemento 2
....
<LI>Elemento n
</OL>

Listas
Con el atributo type vamos a especificar el tipo de lista numerada. Sus posi-
bles valores son:
A: Letras mayúsculas (A, B, C, ...)

a: Letras minúsculas (a, b, c, ...)
I: Números romanos en mayúsculas (I, II, III, IV, ...)
i: Números romanos en minúsculas (i, ii, iii, iv, ...)
1: Numéricamente (1, 2, 3, 4, ....) (es la numeración por defecto y por tanto no
habría que indicarla).

Listas
Ejemplo Resultado
<OL type=A>
<LH>Los cinco continentes</LH> Los cinco continentes
<LI>Europa A.Europa
<LI>Asia B.Asia
<LI>África C.África
<LI>América D.América
<LI>Oceanía E.Oceanía
</OL>

Listas
Ejemplo Resultado
<OL type=I start=2>
<LI>Europa II.Europa
<LI>Asia III.Asia
<LI>África IV.África
<LI>América V.América
<OL type=i > i.América del Norte
<LI>América del Norte ii.América del Sur
<LI>América del Sur VI.Oceanía
</OL>
<LI>Oceanía
</OL>

Listas
Listas de definiciones: <DL>

{DL: Definition List}
{DT: Definition Term} {DD: Definition Description}
<DL>
<DT>Término 1
<DD>Definición 1
<DT>Término 2
<DD>Definición 2
....
<DT>Término n
<DD>Definición n
</DL>

Listas
Ejemplo Resultado
<DL>
<DT>París París
<DD>Capital de Francia Capital de Francia
<DT>Roma Roma
<DD>Capital de Italia Capital de Italia
<DT>Madrid Madrid
<DD>Capital de España Capital de España
</DL>

Hiperenlaces
Con este tipo de hiperenlaces vamos a poder acceder tanto a otras páginas
que estén ubicadas dentro de nuestro propio sistema como a páginas ubica-
das en puntos muy distantes del globo. El formato de este tipo de hiperenlaces
es:
<A href="URL a la que se accede">Texto del hiperenlace</A>

Hiperenlaces
Con el atributo href vamos a especificar la URL del documento al que se pre-
tende acceder.
El texto contenido entre las etiquetas de comienzo y fin nos va a servir para
definir el hiperenlace, por lo que debería ser clarificador del contenido del
documento con el que vamos a enlazar. Esta definición aparecerá resaltada
normalmente en azul y subrayada. En la mayoría de los navegadores esta defi-
nición del hiperenlace es sensible, por lo que cuando el cursor pasa por enci-
ma del mismo este cambia de aspecto indicándolo.
Veamos un ejemplo:
Ejemplo Resultado
<A href="http://www.imta.mx"> Página inicial del IMTA
Página inicial del IMTA</A>

Hiperenlaces
Igualmente podríamos indicar el hiperenlace por medio de una imagen. Si esta

imagen tiene definido un borde, este aparecerá resaltado en color azul.
<A href="URL a la que se accede"><IMG src="Imagen"> y también texto</A>
{IMG: Image} {src: Source}
Ejemplo Resultado
<A href="http://www.sun.com">
<IMG src="logo(5).gif"></A>
Sun Microsystems
Sun Microsystems

Hiperenlaces
Enlaces dentro de la misma página: <A name=...>
Para la creación de estos hiperenlaces, debemos seguir dos pasos:
1º) Marcar las distintas zonas o secciones del documento. Esto lo haremos
con el parámetro name:
<A name="Identificador de sección">Texto de la sección</A>
A cada sección le asignaremos un identificador distinto, para poder

referenciarlas posteriormente de manera inequívoca.
2º) Especificar un enlace a cada una de las secciones que hayamos definido.
<A href="#Identificador de sección">Texto del enlace a la sección</A>

Hiperenlaces
Veamos un ejemplo sencillito, pero demostrativo, de todo lo que acabamos de

explicar:
Ejemplo Resultado
<A href="#Cap1">Capítulo1</A> Capítulo 1
............................. ..............................
...................... .................
.............. ..............
<A name="Cap1">Capítulo 1</A> Capítulo 1

Imágenes
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="Tamaño" height="Tamaño" width="Tamaño"
hspace="margen" vspace="margen">
src="URL de la imagen"
alt="Texto alternativo"
align=top/middle/botton left/rigth
border="Tamaño"
height="Tamaño"
width="Tamaño"
hspace="Margen" {hspace: Horizontal Space}
vspace="Margen" {vspace: Vertical Space}

Imágenes
Ejemplo Resultado
<IMG src="ovni.gif">
Ejemplo Resultado
<IMG src="ovni.gif"
alt="OVNI a la vista">
OVNI a la vista

Imágenes
Ejemplo Resultado
<IMG src="ovni.gif" align=top> OVNI mod 747
<b>OVNI</b>modelo 747
<IMG src="ovni.gif" align=middle>

<b>OVNI</b>modelo 747 OVNI mod 747
<IMG src="ovni.gif" align=bottom>

<b>OVNI</b> modelo 747
OVNI mod 747

Imágenes
Ejemplo Resultado
<IMG src="ovni.gif" OVNI
align=top><b>OVNI</b>
<br> (Objeto Volante No Identificado).
Objeto Volante No
Identificado
align=left><b>OVNI</b><br> Objeto Volante No
(Objeto Volante No Identificado). Identificado

align=right><b>OVNI</b><br> Objeto Volante No
(ObjetoVolante No Identificado). Identificado

Imágenes
Ejemplo Resultado
<IMG src="ovni.gif" align=bottom
border=2><i>Ovni.gif</i>
Ovni.gif
Ejemplo Resultado
<IMG src="ovni.gif" border=2
width = 100 height=50>
<IMG src="ovni.gif" border=2

width = 50%>

Imágenes
Ejemplo Resultado
<IMG
src="ovni.gif"><IMG
src="ovni.gif"
hspace=25><IMG
src="ovni.gif"
hspace=30 ><IMG
src="ovni.gif">

Tablas
La etiqueta que nos va a permitir la definición de tablas es <TABLE> </TABLE>.
El formato general de la etiqueta sin ningún argumento, es el siguiente:
<TABLE>
<TR >
<TH>Contenido de la celda </TH>

<TD>Contenido de la celda </TD>
</TR>
</TABLE>
{TR: Table Row} {TH: Table Header} {TD: Table Data}

Tablas
Vamos a analizar cada una de estas etiquetas de forma separada:
1. <TABLE> </TABLE> : Definición general de la tabla. Dentro de ella definire-

mos la filas y columnas que la constituyen, pudiendo incluso definir tablas
dentro de tablas, es decir, tablas anidadas.
2. <TR> </TR>: Definición 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>: Definición de cada una de las celdas de la tabla.

Vemos que estas etiquetas están contenidas dentro de otra etiqueta de defini-
ción de fila, de forma que por cada etiqueta <TH> o <TD> que incluyamos se
creará una celda dentro de la fila correspondiente .

Tablas
Ejemplo Resultado
<TABLE border=1>
<TR>
<TD>Mi primera tabla Mi primera tabla
</TABLE>

Tablas
1. Definición de la tabla: <TABLE>.
<TABLE border="n" cellpadding="n" cellspacing="n" width="n ó %"

height="n ó %" bgcolor="#rrggbb ó nombre" >
...... Contenido ......
</TABLE>

Tablas
border="n"
Si especificamos este argumento, se dibujará un borde alrededor de la tabla

del ancho que le indiquemos.
Ejemplo Resultado
<TABLE border=4>
<TR>
</TABLE>

Tablas
cellpadding="n"
Indica el espacio en puntos que separa el contenido de la celda con el borde

de la misma, siendo 1 por defecto.
Ejemplo Resultado
<TABLE border=4 cellpadding=8>
<TR>
</TABLE>

Tablas
cellspacing="n"
Indica el espacio en puntos que separa a las celdas contenidas dentro de la
tabla, siendo 2 por defecto.
width="n ó %"
Indica el la anchura de la tabla en puntos o en % en función del ancho de la
ventana del visualizador. Si no indicamos este argumento, el ancho de la tabla
se ajustará al tamaño del contenido de las celdas. Esto es lo que ha ocurrido
en el último ejemplo que hemos realizado.
Ejemplo: <TABLE border=4 width=50%><TR><TD>Mi primera tabla</TABLE>
Resultado:
Mi primera tabla

Tablas
bgcolor= "#rrggbb" o "nombre del color"
Nos permite definir un color de fondo para todas las celdas de la tabla.
Más adelante veremos como podemos definir colores específicos para cada
una de las celdas por separado.
Ejemplo Resultado
<TABLE border=4 bgcolor="yellow">
<TR>
</TABLE>

Tablas
2. Definición de las filas de la tabla: <TR>
<TR align="left/right/center" valign="top/middle/bottom bgcolor="#rrggbb

ó nombre">
Ejemplo Resultado
<TABLE border=4>
<TR ><TD>Primera fila Primera fila

Segunda fila
<TR><TD>Segunda fila
</TABLE>

Tablas
align="left/right/center"
Ejemplo:
<TABLE border=4 width=50% > <TR><TD>Primera fila<TR align=right>
<TD>Segunda fila</TABLE>
Resultado:
Primera fila
Segunda fila

Tablas
bgcolor= "#rrggbb" o "nombre del color"
En este caso, este argumento nos permitirá definir un color de fondo para
todas las celdas de una fila.
Ejemplo Resultado
<TABLE border=4>
<TR bgcolor="yellow"><TD> Primera fila

Segunda fila
<TR bgcolor="green"><TD>
</TABLE>

Tablas
3. Definición de las celdas de la tabla: <TH> ó <TD>
<TH ó TD align="left/right/center/justify" valign="top/middle/bottom

bgcolor="#rrggbb ó nombre" width="n" rowspan="n" colspan="n">
Ejemplo Resultado
<TABLE border=4>
<TR ><TH>Cabecera 1<TH>Cabecera 2 Cabecera 1 Cabecera 2

Celda 1.1 Celda 1.2
<TR ><TD>Celda 1.1<TD>Celda 1.2 Celda 2.1 Celda 2.2
<TR><TD>Celda 2.1<TD>Celda 2.2
</TABLE>

Tablas
width="n ó %"
Indica el ancho de la celda en puntos o en % en función del tamaño de la tabla.
Ejemplo Resultado
<TABLE border=4>
<TR ><TH>Cabecera 1<TH>Cabecera 2

Cabecera 1 Cabecera 2
<TR ><TD align=right>Celda 1.1 Celda 1.1 Celda 1.2
<TD bgcolor=red>Celda 1.2 Celda 2.1 Celda 2.2
<TR><TD bgcolor=yellow>Celda 2.1

<TD align=center>Celda 2.2
</TABLE>
Tablas
rowspan="n"
Con este argumento podemos lograr que una celda concreta abarque más de
una fila, ya sabemos que por defecto una celda ocupa una sola fila.
Ejemplo Resultado
<TABLE border=4>

Celda 1.1 Celda 1.2
<TR ><TD rowspan=2> Celda 2.2
Celda1.1<TD>Celda 1.2
<TR><TD>Celda 2.2
</TABLE>
Tablas
colspan="n"
Con este argumento podemos lograr que una celda se expanda a más de una
columna.
Ejemplo Resultado
<TABLE border=4>

Celda 1.1 Celda 1.2
<TR ><TD>Celda 1.1<TD>Celda 1.2 Celda 2.2
<TR><TD colspan=2 align=center>Celda 2.2
</TABLE>

Tablas
Para finalizar este tema sobre la creación de tablas, vamos a ver el siguiente
ejemplo:
Ejemplo
<TABLE border=4>
<TR ><TH colspan=3 bgcolor=red>Título
<TR bgcolor=yellow><TH>Cabecera 1<TH>Cabecera 2<TH>Cabecera 3
<TR ><TD>Celda 1.1<TD>Celda 1.2<TD>Celda 1.3
<TR><TD rowspan=2>Celda 2.1<TD bgcolor=green>Celda 2.2<TD>Celda 2.3
<TR><TD>Celda 3.2<TD>Celda 3.3
</TABLE>

Tablas
Título
Cabecera 1 Cabecera 2 Cabecera 3
Celda 1.1 Celda 1.2 Celda 1.3
Celda 2.1 Celda 2.2 Celda 2.3
Celda 3.2 Celda 3.3

Formularios
El formulario es el elemento de HTML que nos va a permitir interactuar con los

visitantes de nuestras páginas web, de forma que podemos solicitarle infor-
mación al usuario y procesarla. De esta forma, podremos crear en nuestras
páginas: encuestas para solicitar la opinión del visitante sobre algún tema e
incluso sobre el contenido de nuestra propia página web, cuestionarios para
evaluar la asimilación de contenidos sobre un tema concreto que se trate en
la página, etc.
El contenido de la información introducida por medio del formulario será en-
viado a la dirección URL donde resida el programa que se encargará de proce-
sar los datos. A este tipo de programas externos se les denomina programas
CGI (Common Gateway Interface).

Formularios
La etiqueta HTML que nos va a permitir la creación de formularios es <FORM>.

Su formato es el siguiente:
<FORM action="URL del programa que trata el formulario" method="post/get">
..... Elementos del formulario .....
</FORM>

Formularios
Entrada básica de datos:
Para definir los distintos tipos de campos básicos de entrada de datos usare-
mos la etiqueta <INPUT>.
El formato es el siguiente:
<INPUT type= text / password / checkbox / radio / hidden / submit / image /

reset name="Variable" value="Valor inicial">
El argumento type determinará el tipo de campo de entrada que estamos in-

sertando.
El argumento name especifica el nombre de la variable que tomará el valor
introducido en el campo.
El argumento value especifica el valor por defecto que tendrá el campo.

Formularios
Texto corto: type=text
Con este argumento vamos a indicar que el campo a introducir será un texto.
El formato sería:
<INPUT type= text name="Variable" value="Valor inicialización" size="Tamaño"

maxlength="Longitud máxima">
Vamos a ver un ejemplo:

Ejemplo Resultado
Nombre:<INPUT type=text name=Var1
Value="Texto por defecto" size=20 Nombre: Rodolfo Gallardo
maxlength=25>

Formularios
Claves: type=password
Con este argumento indicamos que el campo a introducir será una palabra
clave, por lo que los caracteres que se introduzcan serán sustituidos por
asteriscos en la visualización por pantalla. El formato es:
<INPUT type= password name="Variable" value="Valor inicialización"

size="Tamaño" maxlength="Longitud máxima">
El significado de los distintos argumentos es el mismo que en el caso anterior.

Veamos un ejemplo:
Ejemplo Resultado
Clave:<INPUT type=password name=Var2
Value="tutankamon" size=11 maxlength=10> Clave: **********

Formularios
Botones de selección: type=checkbox
El checkbox es un botón que presenta dos estados: marcado (1) y desmarcado

(0). Podremos variar su estado simplemente pinchando con el ratón. El forma-
to es:
<INPUT type= checkbox name="Variable" value="Valor" checked>
Veamos un ejemplo:
Ejemplo Resultado
<INPUT type=checkbox name=Var3 ✔ Opción1
value=Op1 checked >Opción1 <br> ✔ Opción 2
<INPUT type=checkbox name=Var4
value=Op2> Opción 2

Formularios
Selección entre varias opciones: type=radio
Este argumento se usa cuando hay que hacer una selección entre varias alternativas excluyentes,
pudiéndose 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>
Veamos un ejemplo:
Ejemplo Resultado
<INPUT type=radio name=Var5
value=Op1> Opción1 <br> Opción1
Opción 2
<INPUT type=radio name=Var5 Opción 3
value=Op2 checked> Opción 2
<br>
<INPUT type=radio name=Var5
value=Op3 > Opción 3

Formularios
Botón de envío de datos: type=submit
Con este argumento especificamos un botón en el que al pulsar, los datos

serán enviados al programa o dirección de correo encargada de procesar la
información recogida por el formulario. El formato es:
<INPUT type= submit value="Mensaje a mostrar">
Veamos un ejemplo:
Ejemplo Resultado
<INPUT type=submit value=
"Enviar los Datos"> Enviar los datos

Formularios
Botón de borrado de datos: type=reset
Con este argumento especificamos un botón que al ser pulsado borrará el

contenido actual de todos los campos, dejándolos con sus valores por defec-
to.
Su formato es:
<INPUT type= reset value="Texto del botón">
Con el parámetro value especificamos el texto que etiquetará al botón.
Ejemplo Resultado
<INPUT type=reset value= Borrar datos
"Borrar datos">

Formularios
Entrada datos en múltiples líneas:
Para ello usaremos la etiqueta <TEXTAREA> </TEXTAREA>.
<TEXTAREA name="Variable" rows=Filas cols=Columnas>

Contenido por defecto.
</TEXTAREA>
Ejemplo Resultado
<TEXTAREA name="Var7" Hola, hola, hola
rows=5 cols=40>
Contenido por defecto.
</TEXTAREA>

Formularios
Entrada de datos a través de campos de selección:
Con los campos de selección podremos desplegar una lista de opciones, en-
tre las que podremos seleccionar una. Para ello usaremos la etiqueta <SELECT>
</SELECT>. Su formato es el siguiente:
<SELECT name="Variable" multiple size=n>

<OPTION selected value="Valor_1">Primera Opción
<OPTION value="Valor_2">Segunda Opción
..........
<OPTION value="Valor_n">Enésima Opción

</SELECT>

Formularios
Tercera opción
<SELECT name="Var8" >
<OPTION value=1>Primera Opción
<OPTION value=2>Segunda Opción
<OPTION selected value=3>Tercera Opción
</SELECT>
Primera opción
<SELECT name="Var8" multiple size=3> Segunda opción
Tercera opción
<OPTION value=1>Primera Opción
<OPTION value=2>Segunda Opción
<OPTION selected value=3>Tercera Opción
</SELECT>

Formularios
Ejemplo
<P align=center><B>EDITORIAL <I>EditoPc</I></B></P>
<FORM action="mailto:direccion@ejemplo" method = post>
Nombre:<INPUT type="text" size="30" name="nombre"><BR>
E_mail: <INPUT type="text" size="30" name="e_mail">
<P>Deseas recibir información sobre:
<INPUT type="checkbox" name="infor1" value="Internet">Internet
<INPUT type="checkbox" name="infor2" value="Programación">Programación
<INPUT type="checkbox" name="infor3" value="Sist.Operativo">Sist.Operativo
<INPUT type="checkbox" name="infor4" value="Ofimática">Ofimática
<P>¿Te conectas a Internet desde casa?: <br>
<INPUT type="radio" name="intercasa" value="si">Sí
<INPUT type="radio" name="intercasa" value="no">No
<P>¿Qué uso le das a tu ordenador?: <BR>
<SELECT name="uso" multiple size="3">
<OPTION selected>Profesional
<OPTION>Doméstico
<OPTION>Ocio/Juegos
</SELECT>
<P>Características de tu PC:<BR>
<TEXTAREA name="caract" rows="5" cols="40"></TEXTAREA>
<P><INPUT type="submit" value="Enviar datos"> <INPUT type="reset"
value="Borrar datos">

Frames
Estructura de un documento con frames:

Un documento con frames se estructura de manera diferente a un documento
HTML normal. Así, en este tipo de documentos no aparecerá la etiqueta <BODY>.
En su lugar se incluirá la etiqueta <FRAMESET> </FRAMESET> dentro de la
cual se definirán las distintas frames que se incluyan en el documento.
La estructura general de un documento de este tipo sería, por tanto:
<HTML>
<HEAD>Cabecera</HEAD>
<FRAMESET>
Definición de la distintas frames
</FRAMESET>
<NOFRAMES>
Instrucciones HTML
</NOFRAMES>
</HTML>
Frames
La sintaxis de la etiqueta <FRAMESET> es:
<FRAMESET rows="Lista de filas" cols="Lista de columnas">

<FRAME src="URL de la frame 1" name="Nombre de la frame 1>
<FRAME src="URL de la frame 2" name="Nombre de la frame 2>
......
<FRAME src="URL de la frame n" name="Nombre de la frame n>
</FRAMESET>

Frames
Ejemplo Resultado
<HTML>
<FRAMESET rows Página Web 1
= "50%,25%,25%">
<FRAME
src="Pagweb1.htm"
name="Pagweb1">
<FRAME
src="Pagweb2.htm"
name="Pagweb2"> Página Web 2
<FRAME
src="Pagweb3.htm"
name="Pagweb3"> Página Web 3
</FRAMESET>
</HTML>

Frames
Ejemplo Resultado
<HTML>
<FRAMESET cols = Página Página Página Web 3
"100,150,*"> Web 1 Web 2
<FRAME
src="Pagweb1.htm"
name="Pagweb1">
<FRAME
src="Pagweb2.htm"
name="Pagweb2">
<FRAME
src="Pagweb3.htm"
name="Pagweb3">
</FRAMESET>
</HTML>

Frames
Definición de cada una de las frames:
Como ya sabemos, cada una de las frames que incluyamos en nuestro docu-
mento vendrá definida por la etiqueta <FRAME> correspondiente. Su formato
es el siguiente:
<FRAME src="URL" name="Nombre" marginwidth="n" marginheight="n"

scrolling="yes/no/auto noresize>
src = "URL"
name = "Nombre"
marginwidth = "n"
marginheight = "n"
scrolling = "yes / no / auto"
noresize

Frames
Ejemplo Resultado
<HTML>
<FRAMESET rows Página Web 1
= "50%,*">
<FRAME
src="Pagweb1.htm"
name="Pagweb1"
marginwidth = 50
scrolling="yes">
<FRAME
Página Web 2
src="Pagweb2.htm"
name="Pagweb2"
marginheight = 50
scrolling="yes">
</FRAMESET>
</HTML>
Elementos multimedia
El Explorer de Microsoft incluye etiquetas que permitirán explotar su posibili-

dades multimedia, pero hay que tener en cuenta que éstas no son estándar.
Sonido de fondo: <BGSOUND src="fichero de sonido" loop= n / infinite>
{BGSOUND: Background Sound}
Con el argumento src especificaremos el fichero de sonido que se va a repro-

ducir (.waw, .mid).
Con el argumento loop indicaremos el número de veces (n) que se reproducirá
el sonido. Si indicamos loop=infinite el sonido se reproducirá de manera inde-
finida hasta abandonar la página.
Ejemplo: <BGSOUND src="zbohemia.mid" loop=infinite>

Elementos multimedia
Reproducción de vídeo:
<IMG dynsrc="fichero de video" loop= n / infinite start=fileopen / mouseover

controls>
En este caso podemos reproducir un vídeo en formato .avi dentro de nuestro

documento HTML.
Ejemplo:
<IMG dynsrc="24scrn18.avi" loop=infinite start=fileopen controls>

Para saber más...
Lemay, Laura. HTML para Web.
Morris, Bruce. HTML avanzado.
Petrovsky, Michele. Dynamic HTML.
Soria, Ramón. HTML 4.

Curso Básico de HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso Básico de HTML

Uploaded by

Copyright:

Available Formats

Curso Taller de HTML

Jornada Nacional de las Ciencias Computacionales

Universidad de Colima. FIME.

Universidad de Colima Derechos Reservados 2000 1

Hyper Text Markup Language.

Lenguaje que todos los programas navegadores

Universidad de Colima Derechos Reservados 2000 2

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era

HTML 3.0 y 3.2

El HTML 3.0, resultó ser demasiado grande para la época

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan

Universidad de Colima Derechos Reservados 2000 3

Es un lenguaje sencillo que se basa en el uso de etiquetas,

Por ejemplo <TABLE> nos indica que se definirá una tabla.

Universidad de Colima Derechos Reservados 2000 4

Las etiquetas tienen una serie de atributos o parámetros, y

Si el valor tiene dos o más palabras, irá encerrado entre

Por ejemplo <TABLE BORDER=2> define una tabla con bor-

Universidad de Colima Derechos Reservados 2000 5

Las etiquetas nos permiten:

Definir la estructura lógica del documento HTML

Aplicar distintos estilos de texto.

Incluir hiperenlaces para acceder a otros documentos rela-

Universidad de Colima Derechos Reservados 2000 6

- Un procesador de texto, para editar y escribir HTML

- un navegador Web, como Netscape, Explorer, Mosaic,

Universidad de Colima Derechos Reservados 2000 7

1. Con el procesador de texto, crear un documento HTML y

2. Abrir el documento con el programa navegador.

Universidad de Colima Derechos Reservados 2000 8

- Los espacios en blanco son ignorados

- Las etiquetas pueden ser escritas en mayúsculas o

- Existe normalmente una etiqueta de inicio y una de fin,

- Algunas etiquetas no necesitan cierre, como es el caso

Universidad de Colima Derechos Reservados 2000 9

Instrucción HTML Resultado

Universidad de Colima Derechos Reservados 2000 10

<HTML> Inicio del documento

Universidad de Colima Derechos Reservados 2000 11

Ahora, guardarlo con el nombre de pagina1.html y abrirlo con el navegador correspon-

Universidad de Colima Derechos Reservados 2000 12

El URL (Uniform Resource Locator) nos permite localizar y acceder a

Tipo de servicio puede ser http, ftp, news, telnet o mailto

http://www.imta.mx Hyper Text Transport Protocol

Universidad de Colima Derechos Reservados 2000 13

Se incluyen definiciones generales para todo

Universidad de Colima Derechos Reservados 2000 14

Es el título que aparecerá en la ventana del

<TITLE>Mi primera hoja web</TITLE>

Universidad de Colima Derechos Reservados 2000 15

Indica que el documento indicado en la URL

<META http-equiv=refresh content="5;url=http://www.imta.mx/index.html">

Universidad de Colima Derechos Reservados 2000 16

Indica la localización de los archivos a que hace

Universidad de Colima Derechos Reservados 2000 17

Con este, se incluyen las distintas instruccio-

Universidad de Colima Derechos Reservados 2000 18

Universidad de Colima Derechos Reservados 2000 19

Universidad de Colima Derechos Reservados 2000 20

Universidad de Colima Derechos Reservados 2000 21

Letra Código Letra Código Letra Código

Universidad de Colima Derechos Reservados 2000 22

Otros símbolos especiales son: