cursoHTML Final

HTML
Hyper Text Markup Language

(Lenguaje marcado de hipertexto)
Lenguaje que permite escribir texto de forma estructurada.
Está compuesto por etiquetas ( indican el inicio y fin

de cada elemento del documento).
Puede contener imágenes, sonido, vídeos, etc.

HTML
Requiere la extensión html o htm, para ser
visualizado en los navegadores.
Los navegadores se encargan de interpretar el

código HTML de los archivos.
HTML no presenta ningún compilador, por lo tanto

los errores de sintaxis no los detectará y se
visualizará en la forma como éste lo entienda.
El entorno para trabajar HTML es

simplemente un procesador de texto.
HTML
Los navegadores tienen que ser compatibles con la
versión HTML para poder interpretar las etiquetas.
Si un navegador no reconoce una etiqueta, la ignora
y el efecto que pretendía la etiqueta no queda
reflejado en la página.
Dos usuarios pueden visualizar la misma página de

forma distinta porque tienen instalados navegadores
diferentes o versiones diferentes del mismo navegador.
Puede ocurrir que alguna etiqueta solamente pueda

ser interpretada por un navegador especifico.
Editores
Programa que nos permiten redactar

documentos.
Existen un gran número de editores que

permiten crear páginas web sin la necesidad de
escribir ni una sola línea de código HTML.
Estos editores disponen de un entorno visual, y

generan automáticamente el código de las
páginas.
julio de 2011 HTML 4

Editores
Nota:
Los editores pueden generar en ocasiones

código basura, es decir, código que no sirve
para nada, en otras ocasiones puede ser más
efectivo corregir directamente el código por lo
que resulta necesario saber HTML para poder
depurar el código.

Editores
Editores visuales:
Macromedia Dreamweaver
Microsoft Frontpage
Adobe Pagemill
NetObjects Fusion
CutePage, HotDog Proffesional
Netscape Composer
Arachnophilia
Etc..

Etiquetas
etiquetas o marcas delimitan cada uno de los

elementos que componen un documento HTML.
Existen dos tipos de etiquetas, la de comienzo

de elemento y la de fin.
La etiqueta de comienzo está delimitada por los

caracteres < y >
La etiqueta de final está delimitada por los

caracteres </ y >

Etiquetas
La etiqueta está compuesta por el identificador o

nombre de la etiqueta, y puede contener una
serie de atributos opcionales
Su sintaxis es:
<identificador atributo1 atributo2 ...>
CONTENIDO
</identificador >
Algunos elementos no necesitan etiqueta de

cierre.
Mi primera Pagina
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola,
Bienvenidos al curso de HTML.</font>
</body>
</html>

Estructura de una página
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Tipo de documento <html>
Todas las páginas web escritas en HTML tienen

que tener la extensión html o htm.
Además deben contener las etiquetas:

<html> y </html>

Cabecera de la página <head>
La cabecera de la página se utiliza para agrupar

información sobre ella, como puede ser el título.
Está formada por las etiquetas <head> y

</head>.
La etiqueta <head> va justo debajo de la

etiqueta <html>.

Título de la página <title>
El título de la página es el que aparecerá en la

parte superior de la ventana del navegador.
Texto deseado como titulo debe estar entre las

etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la

cabecera (etiquetas <head>)

Cuerpo del documento <body>
El cuerpo del documento contiene la

información que deseamos que se visualice
como lo son: el texto de la página, las
imágenes, los formularios, etc.
Todos estos elementos tienen que encontrarse

entre las etiquetas <body> y </body>
Es posible establecer el color de fondo de la

página a través del atributo bgcolor.
La imagen de fondo puede establecerse a

través del atributo background,
Cuerpo del documento <body>
A través de la etiqueta <body> también es

posible establecer el color del texto de la página
a través del atributo text.

Texto
Caracteres especiales y espacios en blanco

Carácter Representación Carácter Representación
< < € €
> > ç ç
á á Ç Ç
Á Á ü ü
é é Ü Ü
É É & &
í í ¿ ¿
Í Í ¡ ¡
ó ó " "
Ó Ó · ·
ú ú º º
Ú Ú ª ª
ñ ñ ¬ ¬
Ñ Ñ © ©
™ ® ®

Texto
Caracteres especiales y espacios en blanco
Para conseguir que se muestre los espacios en

blanco tenemos la siguiente cadena de
caracteres:
Ejercicio:
¡Bienvenidos, esta es mi 1ª página!

Comentarios
Para insertar comentarios dentro del código,

basta con insertar el texto entre:
.
Todo el código que se inserte entre estos

símbolos no será visualizado en los
navegadores.

Saltos de línea <br>
Para que se produzca el salto de línea en el

navegador, en lugar de pulsar la tecla INTRO
hay que insertar la etiqueta <br> donde se
desee que se produzca el salto.
La etiqueta <br> no precisa ninguna etiqueta de

cierre.

Texto preformateado <pre>
Utilizando las etiquetas <pre> y </pre> podemos

tener la seguridad de que en el navegador se
mostrarán todos los espacios en blanco que se
inserten en el texto, así como todos los saltos
de línea resultantes de pulsar la tecla INTRO,
sin la necesidad de utilizar la etiqueta <br>.
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>

Separadores <hr>
Un elemento que suele utilizarse para separar

secciones dentro de una misma página es la
regla horizontal.
Dicha etiqueta no precisa ninguna etiqueta de

cierre.
Atributo Significado Posibles valores
align alineación de la regla left (izquierda)
dentro de la página right (derecha)
center (centro)
width ancho de la regla un número acompañado
de % cuando se desee
que sea en porcentaje
size alto de la regla un número
noshade eliminar el sombreado de no puede tomar valores
la regla

Sangrado de texto <blockquote>
La sangría es una especie de margen que se

establece a ambos lados del texto.
Para que un texto aparezca sangrado, se

inserta entre las etiquetas <blockquote> y
</blockquote>.
El uso de la etiqueta <blockquote> obliga a que

el texto aparezca en una nueva línea.
Insertando el texto entre varias etiquetas

<blockquote> y </blockquote> se consigue que
los márgenes sean mayores.
Formatear el texto <font>
Las propiedades del texto pueden modificarse a

través de la etiqueta <font>.
Para ello, podemos insertar el texto entre las

etiquetas <font> y </font>, especificando
algunos de los atributos de la etiqueta:
face fuente nombre de la fuente, o
fuentes
color color del texto número hexadecimal o
texto predefinido
size tamaño del texto valores del 1 al 7, siendo
por defecto el 3,o
desplazamiento respecto
al tamaño por defecto,
añadiendo + o - delante
del valor

Formatear el texto <font>
También es posible definir una fuente para todo

el documento. Para ello, hay que insertar la
etiqueta <basefont> después de la etiqueta
<body>.
La etiqueta <basefont> no necesita una etiqueta

de cierre, y permite modificar los mismos
atributos del texto que la etiqueta <font>.
<body>
<basefont color="#006699" size="4" face="Arial">
...

Resaltado del texto <b>
Etiqueta Significado Ejemplo

<b> negrita curso HTML
<i> cursiva curso HTML
<u> subrayado curso HTML
<s> tachado curso HTML
<tt> teletipo (máquina de escribir) curso HTML
<big> aumenta el tamaño de la fuente curso HTML
<small> disminuye el tamaño de la fuente curso HTML

Párrafos <p>
El texto de una página puede agruparse en

párrafos. Para ello, el texto de cada uno de los
párrafos debe insertarse entre las etiquetas <p>
y </p>.
No es necesario insertar la etiqueta <br> para

que un nuevo párrafo aparezca debajo del
anterior, ya que las etiquetas <p> y </p> hacen
que se cambie de línea automáticamente.

Párrafos <p>
También es posible cambiar la alineación del

texto de cada párrafo. Para ello se modifica el
valor del atributo align, cuyos valores pueden
ser left (izquierda), right (derecha), center
(centrado) o justify (justificado).
<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute aprenderás a crear páginas web.</p>
<div align="center">Bienvenidos a mi p&aacutegina.</div>

<div>Aqu&iacute aprenderás a crear páginas web.</div>

Párrafos <p>
También es posible insertar el texto entre las

etiquetas <center> y </center> para que
aparezca centrado.
<center>Bienvenidos al curso de HTML.</center>

Encabezados <h1>
Existen una serie de encabezados que suelen

utilizarse para establecer títulos dentro de una
página. La diferencia entre los distintos tipos de
encabezado es el tamaño de la letra, el tipo de
resaltado, y la separación existente entre el
texto y los elementos que tiene encima y debajo
de él. Etiqueta Ejemplo
<H1>
Título 1: HTML
<H2>
Título 2: HTML
<H3>
Título 3: HTML
<H4>
Título 4: HTML
<H5> Título 5: HTML
<H6> Título 6: HTML
Marquesinas <marquee>
Las marquesinas son líneas de texto que

pueden desplazarse de un lado a otro de la
ventana en forma de línea.
A través del atributo behavior puede modificarse

el tipo de movimiento. Puede tomar los valores
alternate (de lado a lado de la ventana, como si
rebotara en los extremos), scroll (de un lado a
otro, continuamente) o slide (de un lado a otro,
pero una sola vez).

Marquesinas <marquee>
A través del atributo direction puede modificarse

la dirección en la que se moverá el texto. Puede
tomar los valores down (de arriba a abajo), up
(de abajo a arriba), left (de derecha a izquierda)
o right (de izquierda a derecha).
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
También es posible insertar imágenes, tablas y

otros elementos entre las etiquetas <marquee>
y </marquee>, no solamente texto.
Hiperenlaces
Un hiperenlace, hipervínculo, o vínculo, no es

más que un enlace, que al ser pulsado lleva de
una página o archivo.
Aquellos elementos (texto, imágenes, etc.)

sobre los que se desee insertar un enlace han
de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página

a la que está asociado el enlace
<a href="http://www.ingenieria.unam.mx">Visita www.ingenieria.unam.mx</a>

Hiperenlaces
Referencia absoluta:
Conduce a una ubicación externa al sitio en el

que se encuentra el documento. La ubicación es
en Internet, en este caso hay que empezar la
referencia por http://
Referencia relativa al sitio:
Conduce a un documento situado dentro del

mismo sitio que el documento actual.
Hiperenlaces
<a href="http://www.ingenieria.unam.mx">Visita www.ingenieria.unam.mx</a>
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Hiperenlaces
Anclas o puntos de fijación:

<a name="miancla"></a>Texto con ancla
<a href="t_4_3.htm#miancla">Enlace al ancla</a>

Hiperenlaces
Destino del enlace:
El destino del enlace determina en qué ventana

va a ser abierta la página vinculada, se
especifica a través del atributo target al que se
le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana
nueva del navegador
_self:
Abre el documento vinculado en el mismo
marco o ventana que el vínculo.
Hiperenlaces
Es interesante utilizar esta opción cuando la

página de destino está fuera de nuestro sitio
para que cuando el usuario cierre la ventana del
explorador, se encuentre automáticamente en la
página desde la que había salido (que vuelva a
nuestro sitio).
<a href="http://www.ingenieria.unam.mx" target ="_blank">Visita

www.ingenieria.unam.mx en una ventana nueva</a>

Hiperenlaces
Los colores de los vínculos pueden

especificarse a través de las propiedades de la
página, en la etiqueta <body>.
Estos colores se asignan a través de los

atributos link (vínculo), alink (vínculo activo), y
vlink (vínculo visitado).
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.ingenieria.unam.mx" target ="_blank">www.ingenieria.unam.mx </a>
...

Hiperenlaces
Otros tipos de enlaces
Correo electrónico:
Abre generalmente la aplicación Outlook
Express para escribir un correo electrónico,
cuyo destinatario será el especificado en el
enlace.
<a href="mailto:webmaster@ingenieria.unam.mx">e-mail para ingenieria</a>

Hiperenlaces
Vínculo a ficheros para descarga:

El valor del atributo href normalmente será una
página web (con extensión htm, html, asp,
php...) pero también puede ser un fichero
comprimido, una hoja de Excel, un documento
Word, un documento con extensión pdf.
<a href="carta.doc" target=_blank >haz clic aquí para descargarte el fichero</a>

Hiperenlaces
Vínculo vacío:
Al pulsar sobre un enlace vacío no se abre
ninguna página ni archivo, pero el formato es el
mismo que el de cualquier otro enlace. El
vínculo debe ser el símbolo almohadilla "#".
<a href="#">vinculo vacio</a>

Imágenes
Etiqueta <img>
Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a

través del atributo src.
<img src="imagenes/logo_animales.gif">

Imágenes
Texto alternativo
Para mostrar el texto que nosotros deseemos, lo

hacemos con el atributo alt.
<img src="gatito.gif" alt="Imagen gato" >
Borde de una imagen
<img src="imagenes/logo_animales.gif" border="4" >

Imágenes
Tamaño de una imagen

Cuando insertamos una imagen, esta se
muestra en los navegadores con su tamaño
original.
A través de los atributos width (anchura) y

height (altura) puede modificarse el tamaño de
la imagen.
<img src="imagenes/logo_animales.gif" width="200" height="80">

Imágenes
Alineación
Se usa el atributo align con el valor:
Valor Significado
absbottom inferior absoluta
absmiddle medio absoluta
baseline línea de base
bottom inferior
left izquierda
middle medio
right derecha
texttop texto superior
top superior
PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales

Tablas
Nos permiten
Distribuir el texto en columnas.
Colocar imágenes al lado de un bloque de texto.
Texto Texto Imagen

Tablas
<table>
</table>
TABLA
Renglón Celda
<tr></tr>
Columna
<td></td>
Tablas
Atributos
Width ancho de la tabla un número, acompañado de % cuando
se desee que sea en porcentaje
height altura de la tabla un número, acompañado de % cuando
se desee que sea en porcentaje
cellpadding espacio entre el contenido un número
de las celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
align alineación de la tabla left (izquierda)
dentro de la página right (derecha)
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

Tablas
Formato de las celdas

Width ancho un número, acompañado de %
cuando se desee que sea en
porcentaje
Height altura un número, acompañado de %
porcentaje
align alineación horizontal del left (izquierda)
contenido de la celda right (derecha)
center (centro)
valign alineación vertical del baseline (línea de base)
contenido de la celda bottom (inferior)
middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal

Tablas
<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="#000000" bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Levantarse tarde</td>
</tr>
<tr>
<td>Ir al cine</td>
<td>Hacer la tarea</td>
</tr>
</table>

Tablas
Encabezado
<th>Encabezado de la tabla</th>  centrado
y en negrita
<table width="50%" border="1" align="center">
<tr>
<th>Sabado</th>
<th>Domingo</th>
</tr>
<tr>
< td>Levantarse tarde</td>
</tr>
<tr>
<td>Ir al cine </td>
< td>Hacer la tarea </td>
</tr>
</table>
Tablas
Título de la tabla
<caption>Título de la tabla</caption>
Atributos:
•align (bottom, center, left, right y top).
•valign (bottom y top). Antes o después de la tabla
<table width="50%" border="1" align="center">

<caption align="right" valign="top">Titulo de la tabla</caption>
<tr>
<th>Sabado</th>
...
</tr>
</table>

Tablas
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos:
•colspan (número de columnas por las que se extenderá
la celda)
•rowspan (número de filas por las que se extenderá la
celda.)
Ejemplo:
<th rowspan="2"> Contenido </th>
<th colspan="2"> Contenido </th>

Tablas
<table width="575" border="2" <tr align="center" valign="middle">

cellspacing="2"> <td>Duración crecimiento</td>
<tr align="center" valign="middle"> <td>10 meses</td>
<th colspan="4">DIFERENCIAS <td>18 a 24 meses</td>
ENTRE EL PERRO Y EL HOMBRE</th> <td>16 años</td>
</tr> </tr>
<tr align="center" valign="middle"> <tr align="center" valign="middle">
<th rowspan="2">DIFERENCIAS</th> <td>Tiempo de gestación</td>
<th colspan="2">PERRO</th> <td colspan="2">58 a 63
<th rowspan="2">HOMBRE</th> días</td>
</tr> <td>9 meses</td>
<tr align="center" valign="middle"> </tr>
<th>PEQUEÑO</th> <tr align="center" valign="middle">
<th>GRANDE</th> <td>Duración de vida del
</tr> pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 años</td>
</tr>
</table>

Marcos
Marcos <frameset>
•Los marcos o frames sirven para distribuir mejor los
datos de las páginas.
•Permiten mantener fijas algunas partes, como pueden
ser el logotipo y la barra de navegación, mientras que
otras sí pueden cambiar.
•Cada uno de los marcos de una página, contiene un
documento HTML individual.
•Se requiere crear una página con la definición del
conjunto de marcos.

Marcos
<head></head> Va después de la
<frameset> etiqueta head
Encabezado (nombre,logo)
Menú Contenido
</frameset>
<body>
Marcos
Atributos de <frameset>
cols tamaño de cada una de las Un número (acompañado de %
columnas en que se divide el cuando se desee que sea en
documento porcentaje) por cada columna,
separados por comas.
rows tamaño de cada una de las Un número (acompañado de %
columnas en que se divide el cuando se desee que sea en
documento porcentaje) por cada fila, separados
por comas.
frameborder aparece o no el borde de los Yes o No
marcos
framespacing separación entre los marcos un número
border grosor del borde un número, acompañado de %
porcentaje

Marcos
Marcos <frameset>
•Se usan los asteriscos como valores para los atributos
cols y rows. Este valor indica que dicha fila o columna
ocupará todo lo que quede de ventana o subventana.
•Si existen varias columnas o filas con este valor, se
repartirán de forma equitativa lo que quede de ventana.
<frameset rows="*" cols="142,*,25%">...</frameset>

•Se pueden dividir marcos en otros marcos
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Marcos
Marcos <frameset>
Entre las etiquetas <frameset> y </frameset> sólo se
pueden encontrar las etiquetas:
• <head>
• <noframe>
• <frameset>
• <frame>
•y sus correspondientes etiquetas de cierre

Marcos
Marcos <frame>
• Nos permiten cargar las distintas páginas en cada uno
de los marcos.
• Se requiere una etiqueta por cada marco.
• Se encuentran entre las etiquetas <frameset> y
</frameset>
• No necesitan etiqueta de cierre.

Marcos
Atributos de <frame>
frameborder aparece o no el borde del marco yes o 1
no o 0
name nombre del marco cualquier valor
noresize si aparece, el usuario no podrá no puede tomar valores
redimensionar el tamaño de este
marco
marginwidth anchura del margen con respecto a un número, acompañado de % cuando se
los bordes del marco desee que sea en porcentaje
marginheight altura del margen con respecto a los un número, acompañado de % cuando se
bordes del marco desee que sea en porcentaje
scrolling se mostrará o no la barra de Yes
desplazamiento cuando la página del no
marco no se pueda visualizar auto
completamente en él
src documento que se cargará en el ruta y nombre del documento
marco
Marcos
<frameset cols="150,*" frameborder="yes" framespacing="3"

border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo"
frameborder="no" scrolling="no" noresize>
<frame src="derecho.htm" name="marcoderecho"
frameborder="no" scrolling="auto">
</frameset>

Marcos
<frameset rows="90,*" framespacing="3" frameborder="yes"

<frame src="superior.htm" name="marcosuperior"
frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes"
<frame src="izquierdo.htm" name="marcoizquierdo"
scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>

Marcos
Etiquetas <noframes>
• Las etiquetas <noframes> y </noframes> se utilizan
para que su contenido sea visualizado en aquellos
navegadores que no soportan los marcos.
•Si un navegador no soporta los marcos, no cargará
ningún documento en ningún marco, por lo que
tendremos que mostrar el cuerpo del documento actual
de algún modo. Para esto se poner las etiquetas <body>
y </body> entre las etiquetas <noframes> y
</noframes>.

Marcos
<html>
<head>
...
</head>
<frameset cols="150,*">
<frame src="izquierdo.htm" name="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho">
</frameset>
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
</body> Mostraría una página con el texto Este
</noframes> documento tiene marcos y tu navegador no los
</html> soporta.

Marcos
Etiquetas <noframes>
•Para que el usuario no se quede sin ver el contenido de
la página porque no soporta los marcos se pueden crear
nuevas páginas con el contenido de los documentos que
deberían mostrarse en los marcos, pero que permitan
pasar de unos a otros dentro de la misma ventana.

Marcos
...
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
<a href="sinmarcos.htm">Pulsa aquí para visualizar la página sin
marcos.</a>
</body>
</noframes>
</html>

Marcos
Destino del enlace

Se indican en qué marco se abrirá con los nombres de
los distintos marcos de la página. Por ejemplo, si
tuviéramos un marco con el nombre marco derecho,
podríamos insertar el enlace:
<a href="http://www.ingenieria.unam.mx"
target="marcoderecho">Ingenieria en el marco derecho</a>
Este enlace cargaría la página de ingeniería en el marco

llamado marcoderecho.

Marcos
Destino del enlace

•_blank: Abre el documento vinculado en una ventana
nueva del navegador.
•_parent: Abre el documento vinculado en la ventana del
marco que contiene el vínculo o en el conjunto de
marcos padre.
•_self: Es la opción predeterminada. Abre el documento
vinculado en el mismo marco o ventana que el vínculo.
•_top: Abre el documento vinculado en la ventana
completa del navegador, lo cual quiere decir que los
marcos de la ventana desaparecerán al abrir el vínculo
en ella.
Formularios
<form>
Elemento que permite recoger datos introducidos por el
usuario.
•Se utilizan para conocer las opiniones, dudas, y datos

sobre los usuarios, para introducir pedidos a través de la
red, entre otros.
•Está formado por etiquetas, campos de texto, menús
desplegables, y botones, entre otras cosas.
•Se recomienda utilizar tablas para organizar los
elementos de los formularios.

Formularios
<form>
Los formularios se insertan a través de las etiquetas
<form> y </form>. Entre dichas etiquetas habrá que
insertar los diferentes objetos que formarán el
formulario.

Formularios
Atributos de <form>
action: indica una dirección de correo electrónico a la que se
mandará el formulario, o la dirección del programa que se
encargará de procesar el contenido del formulario.
• enctype: indica el modo en que será cifrada la información
para su envío. Por defecto tiene el valor application/x-www-
form-urlencoded.
method: indica el método mediante el que se transferirán las

variables del formulario. Su valor puede ser get o post.
• get: se utiliza cuando no se van a producir cambios en ningún

documento o programa que no sea el navegador del usuario
que pretende mandar el formulario, como ocurre cuando se
realizan consultas sobre una base de datos.

Formularios
Atributos de <form>
post: se utiliza cuando sí se van a producir cambios, como ocurre

cuando el usuario manda datos que deben ser almacenados en
una base de datos.
<form action="mailto:formularios@ingenieria.unam.mx"
method="post" enctype="text/plain" >
...
</form>

Formularios
Áreas de texto <textarea>

Las áreas de texto permiten a los usuarios insertar
varias líneas de texto.

Formularios
Atributos de <textarea>
name: indica el nombre del área de texto.
Es necesario dar nombres diferentes a cada uno de los elementos
de un formulario, para poder identificarlos.
• rows: indica el número de líneas que podrán ser visualizadas
en el área de texto por lo que determina al alto del área de
texto.
cols: indica el número de caracteres por línea que podrán ser
visualizados en el área de texto por lo que determina al ancho del
área de texto.
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto

que quieras</textarea>

Formularios
Elementos de entrada <input>

Texto
name: indica el nombre que se desea dar al elemento de entrada,

mediante el cual será evaluado, y el atributo type indica el tipo de
elemento de entrada.

Formularios
Campo de texto <input type=“text”>

El atributo type debe tener el valor text.
• size: indica el número de caracteres que podrán ser
visualizados en el campo de texto, determina el ancho de la
caja.
maxlenght: indica el número de caracteres que podrán ser
insertados en el campo de texto.
• value: indica el valor inicial del campo de texto.
<input name="campo" type="text" value="Campo de texto"

size="20" maxlength="15">

Formularios
Campo de contraseña <input type=“password”>

El atributo type debe tener el valor password.
• size: indica el número de caracteres que podrán ser
visualizados en el campo de texto, determina el ancho de la
caja.
maxlenght: indica el número de caracteres que podrán ser
insertados en el campo de texto.
• value: indica el valor inicial del campo de texto.
<input name="contra" type="password" value="contraseña"

size="20" maxlength="15">

Formularios
Campo de contraseña <input type=“submit”>
El atributo type debe tener el valor submit, restore o button.

• Si el valor es submit, al pulsar sobre el botón se enviará el
formulario.
Si el valor es reset, al pulsar sobre el botón se restablecerá el
formulario, borrándose todos los campos del formulario que hayan
sido modificados y adquiriendo su valor inicial.
• Si el valor es button, al pulsar sobre el botón no se realizará
ninguna acción.
value: indica el texto que mostrará el botón.
<input name="boton" type="submit" value="Enviar">

Formularios
Casilla de verificación: <input type=“checkbox”>

El atributo type debe tener el valor checkbox.
• value: indica el valor asociado a la casilla de verificación. Es
necesario poner este atributo, aunque el usuario no pueda ver
su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá
activada inicialmente. Este atributo no toma valores.
<input name="casilla" type="checkbox" value="acepto" checked>

Formularios
Botón de opción: <input type=“radio”>

El atributo type debe tener el valor radio.
• value: indica el valor asociado al botón de opción. Es
necesario poner este atributo, aunque el usuario no pueda ver
su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá
activada inicialmente. Este atributo no toma valores.
• Se usa cuando se desea que una variable del formulario pueda
tomar un solo valor de entre varios posibles.
• se insertan varios botones de opción con el mismo nombre
(que indica la variable) y con distintos valores.
• Solamente uno de estos botones podrá estar activado.
<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">
Formularios
Archivo <input type=“file”>

Permite que el usuario envíe un archivo a través del
formulario.
Archivo <input type=“hidden”>

Permite definir un campo oculto, campo que no ve el
usuario, en este caso habría que incluir el atributo value
para que el formulario pase ese valor al programa que
recoge los datos del formulario.

Formularios
Campos de selección <select>

Se utilizan para insertar menús y listas desplegables.
• name: indica el nombre del menú o lista será el nombre de la
variable que contendrá el valor seleccionado.
size indica el número de elementos de la lista que pueden ser
visualizados al mismo tiempo, determina el alto de la lista.
• La aparición del atributo múltiple indica que el usuario podrá
seleccionar varios elementos de la lista al mismo tiempo,
ayudándose de la tecla Ctrl. Este atributo no toma valores.
La aparición del atributo disabled indica que la lista estará
desactivada, por lo que el usuario no podrá seleccionar sus
elementos. Este atributo tampoco toma valores.
• Cada uno de los elementos de la lista ha de insertarse entre
las etiquetas <option> y </option>.

Formularios

value indica el valor a enviar si se selecciona el elemento. Si no se
especifica este atributo, se enviará el texto de la opción, que se
encuentra entre las etiquetas <option> y </option>.
• La aparición del atributo selected indica que el elemento
aparecerá seleccionado. Este atributo no toma valores.
<select name="mascota">
<option selected>--- Elige animal ---
</option>
<option>Perro</option>
<option>Gato</option>
</select>

Formularios
<select name="animal" size="3" multiple>

<option selected>---Elige animales---
</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>

Multimedia
Sonido de fondo <bgsound>

Los formatos de sonido más habituales en Internet son
el WAV, el MP3 y en algunas ocasiones el MIDI.
Lo ideal es incluir algún archivo de audio que no ocupe
mucho espacio, y que sea de buena calidad.
El navegador Internet Explorer puede reconocer la
etiqueta <bgsound>, que se utiliza para incluir sonido de
fondo.
Esta etiqueta NO necesita etiqueta de cierre.
Puede situarse en cualquier parte del documento, pero
es preferible que la situemos siempre en un sitio fácil de
encontrar
Multimedia
Sonido de fondo <bgsound>

src: se especifica la ruta y el nombre del archivo de
audio.
loop: indica el número de veces que se tienen que
reproducir el sonido. Si se desea que el archivo de audio
se reproduzca continuamente en un bucle, habrá que
asignarle el valor infinite o -1.
<bgsound src="varios/audio.mid" loop="-1">

Multimedia
Vídeo y audio <embed>

Permite incluir un vídeo en una página web.
Los formatos de vídeo que suelen utilizarse en Internet
son el AVI, el MPEG y el MOV.
Puede incluirse la etiqueta de cierre, pero en realidad no
es necesaria, ya que entre las etiquetas <embed> y
</embed> no hay que insertar nada.
Los videos insertados a través de esta etiqueta se
reproducen automáticamente al cargarse la página, y se
reproducen solamente una vez.

Multimedia
src: hay que especificar la ruta y el nombre del archivo de vídeo.
• autostart: indica si el archivo se reproducirá automáticamente

al cargarse la página, y puede tomar los valores true o false.
width (anchura) y height (altura) sirven para especificar el

tamaño de la consola de control de vídeo. Estos atributos pueden
tomar como valor un número, que indica el tamaño en píxeles. Si
no se especifican estos atributos, la consola de control de vídeo
se mostrará con el tamaño más adecuado al tamaño del vídeo.
• loop: indica si el archivo se reproducirá continuamente en un
bucle, y puede tomar los valores true o false.
<embed src="varios/cotorra.avi" autostart="false" loop="true">

Multimedia

Existen algunos navegadores que no reconocen la
etiqueta <bgsound>, por lo que no es posible utilizar
esta etiqueta para incluir un sonido de fondo. En su
lugar, se utiliza la etiqueta <embed>, que funciona del
mismo modo para los archivos de audio y de vídeo.
<embed src="varios/audio.mid" autostart="false" loop="true">
Si no se deseamos que se muestren los controles de un

archivo de audio, porque va a ser utilizado como sonido
de fondo, puede hacerse que los atributos width
(anchura) y height (altura) valgan cero.
Multimedia

También puede utilizarse el atributo hidden, con los
valores true o false. Cuando su valor es true, se ocultan
los controles de reproducción.
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
<embed src="varios/audio.mid" autostart="true" loop="true" width="0"

height="0" >

Multimedia
Películas Flash <object>

Las películas Flash son animaciones con la extensión
SWF.
Suelen usarse como:
•Intro
•Botones
•Nombre
Requieren que el usuario tenga instalado el plug-in para

poder ser visualizadas.

Multimedia

Puede utilizarse para insertar diferentes objetos dentro
de la página, como pueden ser archivos de audio,
archivos de vídeo, imágenes, etc.
El objetivo de su uso es la de que no se produzcan
incompatibilidades por las distintas etiquetas soportadas
por unos u otros navegadores.

Multimedia
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flas
h/swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="graficos/pelicula.swf">
<param name="quality" value="high">
<embed src="graficos/pelicula.swf" width="200" height="100"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>

Multimedia
Atributos <embed>
quality: especifica la calidad con la que se reproducirá la
animación Flash. Puede valer high (alta), autolow (baja
automática), o low (baja). Si no se incluye este atributo, se
considera que la calidad será automáticamente alta.
• pluginspage: se especifica la página desde la que se podrá

descargar el plug-in necesario para reproducir la animación
Flash, para que si algún usuario no lo tiene aún instalado en su
computadora pueda descargarlo
type: se especifica el tipo de fichero, para que el navegador

pueda saber qué tipo de programa necesita ejecutar para
reproducir la animación.

Multimedia
Atributos <object>
classid: identifica al objeto. Cuando el objeto es una animación

Flash debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.
• codebase: especifica la dirección en la que se encuentran los
componentes externos necesarios para reproducir la
animación.
width y height deben tener el mismo valor que en la etiqueta
<embed>.

Multimedia
Atributos <param>
Se utiliza para especificar los valores necesarios para la
inicialización de un objeto.
No necesita etiqueta de cierre.
name: indica el nombre de la característica que va a ser definida.
• value: indica su valor.

Es necesario incluir también una etiqueta <param>, en la que
name tenga el valor movie.
<param name="movie" value="graficos/pelicula.swf">

Multimedia
Atributos <param>
•Para indicar la calidad de reproducción, que en la
etiqueta <embed> aparece especificado por el atributo
quality, es necesario incluir también una etiqueta
<param>, en la que name tenga el valor quality.
 <param name="quality" value="high">.
•Para hacer que una animación no se reproduzca
automáticamente, habrá que indicarlo mediante el
atributo play, que debe incluirse dentro de la etiqueta
<embed>.  <param name="play" value="false">.
•Si se desea que la reproducción no sea continua se
requiere insertar el atributo loop en la etiqueta <embed>
 <param name="loop" value="false">.
Listas
• Lista ordenada
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
• Lista no ordenada
<ul>
<li>Chocolate amargo</li>
<li>Chocolate con leche</li>
<li>Chocolate blanco</li>
<li>Chocolate relleno</li>
</ul>
Listas
• Lista descriptiva
<dl>
<dt>Chocolate</dt>
<dd>Cacao</dd>
<dd>Azucar</dd>
<dd>Leche</dd>
<dt>Caramelo</dt>
<dd>Azucar</dd>
<dd>Colorantes</dd>
</dl>

Capas
Son unos recuadros, que pueden situarse en cualquier

parte de la página, en los que podemos insertar
contenido HTML.
Las capas pueden ocultarse y solaparse entre sí.
Se insertan a través de las etiquetas <div> y </div>.

Capas
id se le da un nombre a la capa texto
Propiedades deben aparecer entre

atributo se establecen el resto de
style comillas dobles, con un punto y coma
propiedades de la capa
detrás de cada una.
establece la posición de la capa
left (izquierda)
respecto a los márgenes izquierdo y
y top (superior)
superior de la página
número como valor, acompañado de px
width (anchura) cuando haga referencia a píxeles, y
se establece el tamaño de la capa
y height (altura) acompañado de % cuando haga referencia
a un porcentaje
establece el índice de la capa
dentro de la página. Una capa
z-index Valor numerico
podrá ser solapada por aquellas
capas cuyo índice sea mayor
inherit (se muestra la capa mientras la
capa a la que pertenece también se esté
visibility establece la visibilidad de la capa mostrando), visible (muestra la capa,
julio de 2011 HTML aunque la capa a la que pertenece no se 102
esté viendo) y hidden (la capa está oculta)
Capas
layer-background-image se puede establecer una imagen de La ruta y el nombre de la
y background-image fondo para la capa imagen
layer-background-color y establece un color de fondo para la
número hexadecimal
background-color capa
visible
establecerse si se mostrará o no el
hidden
overflow contenido de la capa cuando no pueda
scroll
ser visualizado en su totalidad
auto

Capas
<DIV STYLE="position:absolute; font-size:100px; font-family:impact;

top:110px; left:10px; color:black; z-index:2">
Curso HTML
</DIV>
<DIV STYLE="position:absolute; font-size:100px; font-family:impact;
top:115px; left:15px; color:gray; z-index:1">
Curso HTML
</DIV>

Javascript
Lenguaje para ser interpretado, no para ser compilado,

por lo que no genera ningún archivo ejecutable.
Disponen de variables, métodos y objetos

predefinidos, pero un menor control sobre los tipos de
variables (enteros, cadenas de caracteres, etc.).
Permite variar dinámicamente el contenido del

documento, validar formularios, etc.

Javascript
Es necesario insertar las etiquetas <script> y </script>

dentro de la cabecera (entre las etiquetas <head> y
</head>) o dentro del cuerpo de la página.
El atributo language debe ser “javascript”
las funciones se insertan como comentarios (entre )

Javascript
<script>

</script>
<img src="imagenes/logo_animales.gif" onClick="Muestramensaje">

Hojas de estilo
CSS (Cascading Style Sheets)

Se usan principalmente para definir estilos que luego se
aplicarán a las páginas de nuestro sitio.
La definición de los estilos va a estar en un archivo

externo a las páginas y común a todas las páginas del
sitio.

Hojas de estilo
la etiqueta <link> se usa para vincular una hoja de estilo

a un documento
el atributo href especifica la hoja de estilo que se va a

vincular.
el atributo rel debe ser igual a “stylesheet”.
el atributo type debe ser igual a “text/css”.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >

Hojas de estilo
body { background-color: #006699;

Sintaxis: font-family: Arial,Helvetica;}
.mitexto { font-family: Arial,Helvetica;

font-size:18px;}
<p>texto con estilo</p>
<p class="mitexto">texto con estilo</p>

Hojas de estilo
<style type="text/css">

</style>

cursoHTML Final

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

cursoHTML Final

Cargado por

Copyright:

Formatos disponibles

HTML

Hyper Text Markup Language

Lenguaje que permite escribir texto de forma estructurada.

Está compuesto por etiquetas ( indican el inicio y fin

Puede contener imágenes, sonido, vídeos, etc.

Los navegadores se encargan de interpretar el

HTML no presenta ningún compilador, por lo tanto

El entorno para trabajar HTML es

Dos usuarios pueden visualizar la misma página de

Puede ocurrir que alguna etiqueta solamente pueda

Programa que nos permiten redactar

Existen un gran número de editores que

Estos editores disponen de un entorno visual, y

julio de 2011 HTML 4

Los editores pueden generar en ocasiones

julio de 2011 HTML 5

julio de 2011 HTML 6

etiquetas o marcas delimitan cada uno de los

Existen dos tipos de etiquetas, la de comienzo

La etiqueta de comienzo está delimitada por los

La etiqueta de final está delimitada por los

julio de 2011 HTML 7

La etiqueta está compuesta por el identificador o

Algunos elementos no necesitan etiqueta de

julio de 2011 HTML 9

julio de 2011 HTML 10

Todas las páginas web escritas en HTML tienen

Además deben contener las etiquetas:

julio de 2011 HTML 11

La cabecera de la página se utiliza para agrupar

Está formada por las etiquetas <head> y

La etiqueta <head> va justo debajo de la

julio de 2011 HTML 12

El título de la página es el que aparecerá en la

Texto deseado como titulo debe estar entre las

Estas etiquetas han de estar dentro de la

julio de 2011 HTML 13

El cuerpo del documento contiene la

Todos estos elementos tienen que encontrarse

Es posible establecer el color de fondo de la

La imagen de fondo puede establecerse a

A través de la etiqueta <body> también es

julio de 2011 HTML 15

Caracteres especiales y espacios en blanco

julio de 2011 HTML 16

Caracteres especiales y espacios en blanco

Para conseguir que se muestre los espacios en

¡Bienvenidos, esta es mi 1ª página!

julio de 2011 HTML 17

Para insertar comentarios dentro del código,

Todo el código que se inserte entre estos

julio de 2011 HTML 18

Para que se produzca el salto de línea en el

La etiqueta <br> no precisa ninguna etiqueta de

julio de 2011 HTML 19

Utilizando las etiquetas <pre> y </pre> podemos

julio de 2011 HTML 20

Un elemento que suele utilizarse para separar

Dicha etiqueta no precisa ninguna etiqueta de

julio de 2011 HTML 21

La sangría es una especie de margen que se

Para que un texto aparezca sangrado, se

El uso de la etiqueta <blockquote> obliga a que

<a href="carta.doc" target=_blank >haz clic aquí para descargarte el fichero</a>