Professional Documents
Culture Documents
Universidad de Colima
Coquimatlán, Colima.
Agosto, 2005
Expositor: Ing.Rodolfo Gallardo-Rosales,M.C.
gallardo33@gmail.com
www.gallardo.com.mx
Universidad de Colima
¿Qué es HTML?
Universidad de Colima
Versiones del HTML
HTML 2.0
HTML 4.0
Universidad de Colima
¿Qué es HTML?
Universidad de Colima
¿Qué es HTML?
Universidad de Colima
¿Para qué se usan etiquetas?
Universidad de Colima
¿Qué se necesita para crear un do-
cumento HTML?
Universidad de Colima
¿Cuál es la secuencia para crear
nuestro trabajo?
Universidad de Colima
Reglas de formato
Universidad de Colima
Ejemplo de etiquetas
Universidad de Colima
Estructura de un documento HTML
Universidad de Colima
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>
Universidad de Colima
Forma del URL
tipo_de_servicio://maquina.dominio:puerto/path/archivo
Universidad de Colima
Cabecera del documento HTML
<HEAD> ... </HEAD>
Universidad de Colima
Título del documento HTML
<TITLE> ... </TITLE>
Universidad de Colima
Indicador de refresco del
documento
Universidad de Colima
Indicador de la URL base del
documento <BASE="URL">
<BASE href="http://www.imta.mx/otros/tedigo/">
Universidad de Colima
Cuerpo del documento
<BODY> ... </BODY>
Universidad de Colima
Composición de colores
Universidad de Colima
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>
Universidad de Colima
Caracteres especiales
Símbolo Código
< (menor que> <
> (mayor que) >
& (ampersand) &
" (comillas) "
Universidad de Colima
Caracteres especiales
Para las letras específicas del idioma castellano: las vocales acentuadas, la ñ,
la ü y los signos ¿ y ¡, existen los siguientes códigos:
Universidad de Colima
Caracteres especiales
Símbolo Código
ç ç
Ç Ç
© ©
® ®
Universidad de Colima
Comentarios
Ejemplo:
Universidad de Colima
Espaciado y saltos de línea
Ejemplo Resultado
Esta frase
no se verá así en el visor. Esta frase no se verá así en el visor.
Universidad de Colima
Inclusión de espacios en blanco
Ejemplo Resultado
Texto1 Texto2 Texto1 Texto2
Universidad de Colima
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
Universidad de Colima
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
Universidad de Colima
Cambio de párrafo <P>
<P align= left / right / center / justify >Texto contenido en el párrafo </P>
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
Universidad de Colima
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 >
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%).
Universidad de Colima Derechos Reservados 2000 30
Curso Taller de HTML
Universidad de Colima
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.
Universidad de Colima
Cabeceras
Ejemplo Resultado
Universidad de Colima
Atributos del texto
Universidad de Colima
Etiquetas de estilo lógico
Universidad de Colima
Etiqueta <FONT>
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)
Universidad de Colima
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
Universidad de Colima
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
Universidad de Colima
Listas
Listas no numeradas
Listas numeradas
Listas de definiciones
Universidad de Colima
Listas
Universidad de Colima
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>
Universidad de Colima
Listas
Universidad de Colima
Listas
Con el atributo type vamos a especificar el tipo de lista numerada. Sus posi-
bles valores son:
Universidad de Colima
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>
Universidad de Colima
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>
Universidad de Colima
Listas
<DL>
<LH>Título de la lista</LH>
<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>
Universidad de Colima
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>
Universidad de Colima
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:
Universidad de Colima
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>
Universidad de Colima
Hiperenlaces
Ejemplo Resultado
<A href="http://www.sun.com">
<IMG src="logo(5).gif"></A>
Sun Microsystems
Sun Microsystems
Universidad de Colima
Hiperenlaces
1º) Marcar las distintas zonas o secciones del documento. Esto lo haremos
con el parámetro name:
2º) Especificar un enlace a cada una de las secciones que hayamos definido.
Universidad de Colima
Hiperenlaces
Ejemplo Resultado
<A href="#Cap1">Capítulo1</A> Capítulo 1
............................. ..............................
...................... .................
.............. ..............
<A name="Cap1">Capítulo 1</A> Capítulo 1
Universidad de Colima
Imágenes
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}
Universidad de Colima
Imágenes
Ejemplo Resultado
<IMG src="ovni.gif">
Ejemplo Resultado
<IMG src="ovni.gif"
alt="OVNI a la vista">
OVNI a la vista
Universidad de Colima
Imágenes
Ejemplo Resultado
<IMG src="ovni.gif" align=top> OVNI mod 747
<b>OVNI</b>modelo 747
Universidad de Colima
Imágenes
Ejemplo Resultado
<IMG src="ovni.gif" OVNI
align=top><b>OVNI</b>
<br> (Objeto Volante No Identificado).
Objeto Volante No
Identificado
<IMG src="ovni.gif" OVNI
align=left><b>OVNI</b><br> Objeto Volante No
(Objeto Volante No Identificado). Identificado
Universidad de Colima
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>
Universidad de Colima
Imágenes
Ejemplo Resultado
<IMG
src="ovni.gif"><IMG
src="ovni.gif"
hspace=25><IMG
src="ovni.gif"
hspace=30 ><IMG
src="ovni.gif">
Universidad de Colima
Tablas
<TABLE>
<TR >
</TR>
</TABLE>
Universidad de Colima
Tablas
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.
Universidad de Colima
Tablas
Ejemplo Resultado
<TABLE border=1>
<TR>
</TABLE>
Universidad de Colima
Tablas
</TABLE>
Universidad de Colima
Tablas
border="n"
Ejemplo Resultado
<TABLE border=4>
<TR>
</TABLE>
Universidad de Colima
Tablas
cellpadding="n"
Ejemplo Resultado
<TABLE border=4 cellpadding=8>
<TR>
</TABLE>
Universidad de Colima
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.
Resultado:
Mi primera tabla
Universidad de Colima
Tablas
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>
Universidad de Colima
Tablas
Ejemplo Resultado
<TABLE border=4>
</TABLE>
Universidad de Colima
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
Universidad de Colima
Tablas
En este caso, este argumento nos permitirá definir un color de fondo para
todas las celdas de una fila.
Ejemplo Resultado
<TABLE border=4>
</TABLE>
Universidad de Colima
Tablas
Ejemplo Resultado
<TABLE border=4>
</TABLE>
Universidad de Colima
Tablas
width="n ó %"
Ejemplo Resultado
<TABLE border=4>
</TABLE>
Universidad de Colima Derechos Reservados 2000 70
Curso Taller de HTML
Universidad de Colima
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>
<TR><TD>Celda 2.2
</TABLE>
Universidad de Colima Derechos Reservados 2000 71
Curso Taller de HTML
Universidad de Colima
Tablas
colspan="n"
Con este argumento podemos lograr que una celda se expanda a más de una
columna.
Ejemplo Resultado
<TABLE border=4>
</TABLE>
Universidad de Colima
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>
Universidad de Colima
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
Universidad de Colima
Formularios
Universidad de Colima
Formularios
</FORM>
Universidad de Colima
Formularios
Para definir los distintos tipos de campos básicos de entrada de datos usare-
mos la etiqueta <INPUT>.
El formato es el siguiente:
Universidad de Colima
Formularios
Con este argumento vamos a indicar que el campo a introducir será un texto.
El formato sería:
Universidad de Colima
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:
Ejemplo Resultado
Clave:<INPUT type=password name=Var2
Value="tutankamon" size=11 maxlength=10> Clave: **********
Universidad de Colima
Formularios
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
Universidad de Colima
Formularios
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:
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
Universidad de Colima
Formularios
Veamos un ejemplo:
Ejemplo Resultado
<INPUT type=submit value=
"Enviar los Datos"> Enviar los datos
Universidad de Colima
Formularios
Ejemplo Resultado
<INPUT type=reset value= Borrar datos
"Borrar datos">
Universidad de Colima
Formularios
Ejemplo Resultado
<TEXTAREA name="Var7" Hola, hola, hola
rows=5 cols=40>
Contenido por defecto.
</TEXTAREA>
Universidad de Colima
Formularios
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:
Universidad de Colima
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>
Universidad de Colima
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">
Universidad de Colima
Frames
<HTML>
<HEAD>Cabecera</HEAD>
<FRAMESET>
Definición de la distintas frames
</FRAMESET>
<NOFRAMES>
Instrucciones HTML
</NOFRAMES>
</HTML>
Universidad de Colima Derechos Reservados 2000 88
Curso Taller de HTML
Universidad de Colima
Frames
Universidad de Colima
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>
Universidad de Colima
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>
Universidad de Colima
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:
src = "URL"
name = "Nombre"
marginwidth = "n"
marginheight = "n"
scrolling = "yes / no / auto"
noresize
Universidad de Colima
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>
Universidad de Colima Derechos Reservados 2000 93
Curso Taller de HTML
Universidad de Colima
Elementos multimedia
Universidad de Colima
Elementos multimedia
Reproducción de vídeo:
Ejemplo:
Universidad de Colima
Para saber más...