HTML
El HTML (Hyper Text Markup Language) es el
lenguaje con el que se escriben las páginas
web. Es un lenguaje de hipertexto, es decir,
un lenguaje que permite escribir texto en
forma estructurada, y que está compuesto
por etiquetas, que marcan el inicio y el fin de
cada elemento del documento.
Los documentos html pueden ser
multimediales.
Los navegadores se encargan de interpretar
el código html de los documentos y mostrar
el resultado.
Compatibilidad con Navegadores
Los distintos navegadores o las distintas
versiones de uno mismo, pueden visualizar de
manera diferente una misma página.
Si un navegador no reconoce una etiqueta, la
ignora y el efecto que pretendía la etiqueta no
queda reflejado en la página.
Etiquetas
Básicamente, los documentos escritos en HTML
constan del texto mismo del documento y las
tags que pueden llevar atributos. Esto llevado a
la práctica, vendría a ser:
<tag> texto afectado </tag>
La tag del principio activa la orden y la última
(que será la del principio precedida del signo /) la
desactiva. No todas las tags tienen principio y
final pero esto lo veremos más adelante.
Estructura de la página
Una página básica:
<html>
<head>
.....
</head>
<body>
.....
</body>
</html>
 <html> : etiqueta de comienzo de toda página
escrita en este lenguaje. La extensión del
archivo que la contiene debe ser html o htm
 <head> : cabecera. Se utiliza para agrupar
información propia de la página, como puede
ser su título, entre otras.
 <title> : el título de la página que aparecerá
en la parte superior de la ventana del
navegador, cuando la página esté cargada en
él. Cierra con el tag </title>.
<html>
<head>
<title> curso de html </title>
</head>
Cuerpo del documento
 Contiene la información propia del documento, o
sea, lo que queremos que se visualice: texto,
imágenes, etc. Todos estos elementos tienen que
encontrarse entre las etiquetas <body> y </body>
que van justo debajo de la cabecera.
El texto
Algunos tags del texto:
 <br> : salto de linea. No necesita etiqueta de
cierre.
 <pre> y </pre> : texto preformateado.
 <b> y </b> : resaltado de texto.
 <i> y </i> : cursiva.
 <u> y </u> : subrayado.
 <sub> y </sub> : subíndice.
 <p> y </p> : párrafo.
 <div align=.....> y </div> : alineación del
Ejemplo
<html>
<head>
<title>página con varios tags</title>
</head>
<body>
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<p align="center">párrafo centrado</p>
<p align="center">Otro párrafo centrado</p>
<div align="center">Párrafo usando la etiqueta div</div>
<div align="center">Otro párrafo usando la etiqueta
div</div>
<div align="center">&nbsp;</div>
<div align="center">En este texto se incluye el
<b>resaltado</b>, <u>subrayado</u>,
<i>cursiva</i>, <sub>subíndice</sub>.</div>
<div align="center">
<p align="left">&nbsp;</div>
<pre>
Tambien está este
Hiperenlaces
Es la utilidad básica del hipertexto, permite indicar zonas
de texto o imágenes que si son seleccionados por el
lector del documento nos traslada a otros documentos
HTML o otras zonas del documento actual.
Para definir un hiperenlace podemos utilizar casi
cualquier elemento HTML, no debe ser texto
necesariamente, podemos usar, cabeceras (<Hn>),
cualquiera de los estilos, una imagen, etc .... Un
hiperenlace igualmente podrá definirse dentro de
cualquier elemento HTML: listas, párrafos de texto,
tablas, formularios.
Hiperenlaces - sintaxis
<A HREF="URL a la que se accede">Texto del
Hiperenlace</A>
<A HREF="URL a la que se accede"><IMG
SRC="Imagen"> y también texto</A>
Para definir la URL podemos utilizar direcciones
absolutas o relativas. Por direcciones absolutas
entenderemos la URL completa, es decir,
http://maquina.dominio/camino/fichero.html. En el
caso de las relativas todo lo que no pongamos de la
URL se tomará de la URL del documento que contiene
el hiperenlace, por ejemplo si no indicamos el
servidor, se considerará el actual y si sólo indicamos
un fichero html se considerará que se encuentra en el
Nos encontramos en el documento
http://www.unav.es/cti/web.html y en éste se encuentran
los siguientes hiperenlaces.
URL relativa: <A HREF="cti/reserva.html"> ..
URL que sea activa: http://www.unav.es/cti/reservas.html
Explicación: En este caso se indica la URL completa, por tanto
no es relativa y no se podrá utilizar ningún dato de la
posición actual.
URL relativa: <A HREF="../cti/reserva.html"> ..
URL que sea activa: http://www.unav.es/reservas.html
Explicación: En este caso al no indicar el servidor tomaremos
el servidor del documento donde estaba el hiperenlace:
www.uca.es y al comenzar la directorio por / se indica que
éste se toma desde la raíz del servidor, no siendo válido en
este caso ningún dato del directorio actual.
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.
 _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.
Punto de fijación
Sirve para indicar puntos de un documento que son
accesibles directamente. Marcará las distintas zonas
de un documento.
<A NAME="Id. del ancla">Texto del ancla</A>
La forma de especificar un enlace que acceda a un punto
determinado del mismo documento es:
<A HREF="#Id. del ancla">Texto del enlace al
ancla</A>
También es posible acceder a un ancla de un documento
externo de la forma:
<A HREF="Dirección URL#Id. del ancla">Texto del
enlace al ancla</A>
Otros tipos de enlace
 Correo electrónico
<a href= mailto: “direccion de mail”> texto </a>
<a href= mailto: “direccion de mail?subject=asunto”> texto
</a>
 Vínculo a archivo para descarga
<a href= “ejemplo.wav” target=_blank> texto </a>
Tablas
Las tablas están formadas por celdas, que se obtienen
como resultado de la inserción entre una fila y una
columna.
Para crear una tabla hay que crear las etiquetas <table> y
</table>. Entre dichas etiquetas habrá que especificar
las filas y las columnas que formarán la tabla.
Fila: Es necesario insertar las etiquetas <tr> y </tr> por
cada una de las filas de la tabla.
Columna: Es necesario insertar las etiquetas <td> y </td>
por cada una de las celdas que compongan cada una
de las filas de la tabla. Habrá que insertar esas
etiquetas entre las etiquetas <tr> y </tr>.
Ejemplo de una tabla
<table border= “1”>
<tr>
<td>Jueves</td>
<td>Viernes</td>
</tr>
<tr>
<td>Seminario</td>
<td>Seminario</td>
</tr>
<tr>
<td>Programación Av. 2</td>
<td>Programación Av. 2</td>
</tr>
Otro ejemplo de Tabla
<html>
<head>
<title>Otro ejemplo de tabla</title>
</head>
<body>
<table with="70%" border="2" align="center" cellspacing="0"
bordercolor="#000000" bgcolor="#FFCC99" height="68%"
width="70%">
<tr>
<td height="19" align="center">Jueves</td>
<td height="19" align="center">Viernes</td>
</tr>
<tr>
<td height="19" align="center">Seminario</td>
<td height="19" align="center">Seminario</td>
</tr>
<tr>
<td height="18" align="center">Programacion Av. 2</td>
Marco
Marco
 Los conjuntos de marcos se definen a través de las
etiquetas <frameset> y </frameset>, que van
después de la etiqueta <head>. A través de estas
etiquetas se indica el número de marcos en que se
dividirá la ventana, cada uno de los cuales será una
especie de subventana.
 Cuando se insertan estas etiquetas no hay que
insertar las etiquetas <body> y </body>, ya que el
cuerpo del documentos será el cuerpo de las páginas
que se carguen en cada uno de los marcos del
conjunto de marcos.
 Los atributos que pueden especificarse sobre estas
etiquetas son: cols, rows, frameborder, framespacing,
border, bordercolor.
Marco
<frameset rows=“*”cols=“ 142,*,25% ”>...</frameset>
 Como el atributo rows tiene el valor asterisco,
solo habría una fila, que ocuparía todo el alto
de la ventana.
 Como el atributo cols tiene tres valores,
estaríamos dividiendo el documento en tres
columnas. La primera sería de 142 pixeles de
ancho, la tercera del 25% de la ventana y la
segunda lo que queda.
 <frame>: indica qué documento se cargará en
el marco. Se ubica entre las etiquetas
<frameset> y </frameset> y no necesita
etiqueta de cierre.
Marco - Ejemplo
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<frameset rows="*" framespacing="1"
frameborder="yes" border="1">
<frameset cols="*,75%" framespacing="1"
frameborder="yes" border="1">
<frame src="index3.html" name="mainFrame">
<frame src="index2.html" name="rightFrame"
scrolling="yes" noresize>
</frameset>
Sin Marcos
 Las etiquetas <noframes> y </noframes> se
utilizan para que su contenido sea visualizado
en navegadores que no soportan marcos.
 Si un navegador no soporta 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. Por ello,
han de introducirse las etiquetas <body> y
</body> entre las etiquetas <noframes> y
</noframes>.
Otros destinos de enlace
Además de los destinos para los enlaces,
también podemos usar los nombres de los
distintos marcos de la página.
<a href=“htpp://www.utn.edu.ar”
target=“marcoderecho”>Página Principal<a>
Meta Tags
 Tags que indican información sobre el
contenido de la página.
 Se ubican en la cabecera del documento.
 Forma: <meta name=“nombre” content=“valor”>
<meta http-equiv=“nombre”
content=“valor”>
Formularios <form> y </form>
Es un elemento que permite recoger datos
introducidos por el usuario.
Es aconsejable utilizar tablas para organizar los
elementos de los formularios.
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.
Atributos de la etiqueta <form>
 action: indica una dirección de correo electrónico a
la que 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.
method
 El valor 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 hacen
consultas sobre una base de datos.
 El valor post se utiliza cuando sí se van a producir
cambios, como ocurre cuando el usuario mando
datos que deben ser almacenados en una base de
datos.
 Se recomienda utilizar el valor post.
 <form action=mailto:[email protected]
method=“post” enctype=“text/plain”>.....</form>
Área de Texto <textarea>
Las áreas de texto permiten a los usuarios
insertar varias líneas de texto.
Se incluyen las etiquetas <textarea> y
</textarea> entre las etiquetas <form> y
</form> del formulario.
El atributos name indica el nombre del área de
texto. El atributo rows indica el número de
líneas que podrán ser visualizadas en el área
de texto (determina el alto). El atributo cols
indica el número de caracteres por línea que
podrán ser visualizados en el área de texto.
<textarea name=“ejemplo area” cols=“30”
Elementos de entrada <input>
Se incluye la etiqueta <input> entre las
etiquetas <form> y </form>.
El atributo 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.
Existen diferentes tipos de elementos de
entrada.
Distintos elementos de entrada
 Campo de texto: para insertar un campo de texto, el atributo
type debe tener el valor text.
Otros atributos:
– size: indica el número de caracteres que podrán ser
visualizados en el campo de texto, determina el ancho de la
caja.
– maxlenght: número de caracteres que podrán ser
insertados en el campo.
– value: valor inicial del campo te texto.
<input name=“campo” type=“text” value= “Campo de texto” size=“20”
maxlenght=“15”>
 Campo de contraseña: para insertar un campo de contraseña,
el atributo type debe tener el valor password.
Los otros atributos son iguales al campo de texto.
Distintos elementos de entrada

Botón: sirve para insertar un botón en el formulario, el atributo type debe tener el
valor submit, restore o button.
– Submit: al pulsar sobre el botón se enviará el formulario.
– restore: al pulsar sobre el botón se reestablecerá el formulario,
borrándose todos los campos del formulario y adquiriendo su valor
inicial.
– button: al pulsar sobre el botón no se realizará ninguna acción.
– value: indica el texto que mostrará el botón.

Casilla de verificación: para insertar una casilla en el formulario, el atributo type
debe tener el valor checkbox.
Otros atributos:
– value: indica el valor asociado a la casilla de verificación. Es necesario,
aunque el usuario no lo vea.
– checked: indica que la casilla aparecerá activada inicialmente.
<input name=“casilla” type=“checkbox” value=“acepto” checked>
Distintos elementos de entrada
 Botón de opción: Para insertar un botón de
opción, el atributo type debe tener el valor radio.
Se usan cuando se desea que una variable del
formulario pueda tomar un solo valor entre varios.
Otros atributos:
– value: indica el valor asociado al botón de opción. Es
necesario, aunque el usuario no lo vea. Es el valor a
enviar.
– checked: indica que el botón aparecerá activado
inicialmente. Este atributo no toma valores.
<input name = “prefiere” type=”radio” value=”estudiar”
chequed>
<input name = “prefiere” type=”radio” value=”trabajar”
chequed>
Distintos elementos de entrada
 Campos de selección: Se utilizan para insertar menús y
listas desplegables. Ejemplo:
<HTML>
<head> <title>Campos de seleccion</title> </head>
<BODY>
<select name="mascota">
<option selected>---Texto visible---</option>
<option>Perro</option>
<option>Gato</option>
</select>
<br /><br /><br /><br /><br />
<select name="animal" size="3" multiple>
<option selected>---Elije animal---</option>
<option value=”ave”>LORO</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
Campos de selección
Es necesario insertar las etiquetas <select> y </select>
Atributos:
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.
multiple: indica que el usuario podrá seleccionar
varios elementos de la lista al mismo tiempo.
disable: indica que la lista estará desactivada,
por lo que el usuario no podrá seleccionar sus
elementos.
Cada uno de los elementos de la lista ha de