HTML

Desarrolla aplicaciones web que se ejecutan con el cliente
Saberes
1. Manipulación del lenguaje HTML

2. Distribución de una página web.
3. Operación del texto
4. Vinculando páginas web
5. Manipulación de tablas
6. Manejo de formularios
Ejemplos
1. Etiquetas
2. Crear una página básica.
3. Bienvenido a mi página.
4. Otros tipos de enlaces.
5. Diferencias entre el perro y el hombre.
6. Insertar los botones de opciones.
Ejercicios
1. Mi primera página.
2. Deportes.
3. Inserta texto con diferentes propiedades.
4. Inserta hiperenlaces.
5. Deportes con tablas.
6. Deportes con formularios.
Prácticas
1. Realiza tu primera página web solo

2. Manos a la obra.
3. Realiza páginas web con diferentes tipos de texto y listas.
4. Realiza diferentes páginas aplicando diversos códigos de hiperenlaces.
5. Páginas web con diferentes tipos de tablas.
6. Páginas web con diversos tipos de formularios.
Introducción a la competencia
Actualmente existen diferentes tecnologías para crear páginas web. Las páginas web que
envían el texto codificado en la propia página se llaman páginas estáticas. Las páginas
estáticas requieren que el editor republique toda la página cuando se hagan cambios.
Podemos imaginar a las páginas estáticas como las publicaciones impresas; sin embargo, la
creación de páginas estáticas es algo trivial actualmente, gracias a los programas
especializados que existen.
El código fuente de las páginas web es “interpretado” por los navegadores web, como el
Internet Explorer, Google Chrome o Mozilla Firefox. Una bonita página web llena de gráficos
tiene un muy aburrido código fuente que los navegadores pueden leer. El código fuente de las
páginas estáticas está escrito en un lenguaje de marcas llamado HTML o Lenguaje de Marcas
de Hipertexto. Aunque algunas personas se refieran al HTML como un lenguaje de
programación, los verdaderos programadores de computadoras pueden encontrar esto
chocante.
Los primeros desarrolladores web () aprendimos a crear páginas web escribiendo el código
web en los mas simples editores de texto, como el Bloc de Notas que viene con el sistema
operativo Windows. Lo que hace el HTML es decirle al navegador dónde poner el texto en la
página, cómo darle formato, cómo poner las gráficas, cuáles son los nombres de las imágenes
y dónde encontrarlas, etc. Es como describir cómo quieres que se vea tu página.
Actualmente existen un gran número de programas de cómputo que automágicamente

generan el código HTML por tí. Estos programas permiten a los desarrolladores trabajar en un
modo llamado WYSIWYG siglas en inglés que significan “Lo que ves es lo que obtienes”. De
este modo, en vez de concentrarse escribiendo código, los desarrolladores pueden
simplemente diseñar la página en un ambiente gráfico y el programa escribirá el código por
nosotros. Algunos de los mas populares programas WYSIWYG son Adobe Dreamweaver, Net
Objects Fusion y Microsoft Expression.
Introducción a HTML
Estructura de una página
El texto
Hiperenlaces
Tablas
Formularios
Saberes
1. Manipulación del lenguaje HTML

2. Distribución de una página web.
3. Operación del texto
4. Vinculando páginas web
5. Manipulación de tablas
6. Manejo de formularios
Instrucciones para el alumno
Realiza una lectura previa sobre la elaboración de páginas web estáticas y su codificación en
html, analiza páginas web ya creadas y observa la distribución de la misma.
Saberes a adquirir
1 Manipulación de HTML
2 Estructura de una página web
3 Insertando texto
4 Hipertexto
5 Manejo de tablas
6 Utilizando formularios
Saberes
1 Manipulación del lenguaje HTML
¿Qué es 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 de forma
estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido,

vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar
a los usuarios las páginas web resultantes del código interpretado.
Los navegadores. Compatibilidad
Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta
el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios
visualicen la misma página de forma distinta porque tienen instalados navegadores
distintos o incluso versiones distintas del mismo navegador.
Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML.
Es necesario realizar extensiones de los navegadores para que puedan ser compatibles
con esta última versión.
Dos de los navegadores que continuamente están realizando extensiones son Internet
Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se
establezcan los estándares, intentando incluir las nuevas funciones incluidas en los
borradores.
Los navegadores tienen que ser compatibles con la última versión HTML para poder
interpretar el mayor número posible de 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.
Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las
etiquetas ya existentes, o se añaden nuevas etiquetas.
Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado
completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos
o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su
totalidad en los navegadores más actualizados.
En este último caso también puede ocurrir que alguna etiqueta de la página solamente
pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador
diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún
navegador.
Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas
utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas
de compatibilidades para que el mayor número de internautas vean sus páginas tal como
las ha diseñado.
Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en día 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. Al poder ver en todo momento cómo quedará
la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite
ganar rapidez.
Estos editores visuales 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 de nuestra
páginas.
Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia
Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la
ventaja de ser gratuitos.
Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener
que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje,
para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera
necesario.
Para crear páginas web escribiendo directamente el código HTML puedes utilizar la
herramienta Wordpad o el Bloc de notas que proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras páginas,
ya que se trata de un editor de textos muy sencillo de manejar, que nos permitirá crear páginas
a través del código HTML.
1 Etiquetas
Las 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 o cierre de
elemento.
La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el
identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que
permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar
cualquier valor propio del usuario, o valores HTML predefinidos.
La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el
identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>
Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan
etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras
etiquetas de comienzo y de cierre.
A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro

de la etiqueta <p..>.:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS

Sans Serif">Bienvenidos www.tuzostv.com/ </font></p>
Este código daría como resultado el siguiente texto:
Bienvenidos a www.tuzostv.com
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro
ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto
la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta
<font..>.
Ejercicio 1
1 Mi primera página
Instrucciones para el Alumno:
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al menú
Inicio, Programas, Accesorios, opción Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<bodybgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>
Guarda el documento con la extensión htm, con el nombre miprimpag.htm. Puedes

guardarlo a través del menú Archivo, opción Guardar.
Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse
automáticamente en el navegador que tengas instalado en tu ordenador.
El navegador deberá mostrar una página como la de la derecha.
Como puedes ver, la página resultante es una página que solamente tiene una línea de texto.
Si observas la barra de título del navegador, verás que el título de la página es MI PRIMERA
PAGINA. Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>.
El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha insertado a través de línea <font

color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.
Práctica
1. Realiza tu primera página web solo
2 Distribución de una página web

Realiza una lectura previa sobre la estructura de las páginas web estáticas y su codificación
en html, analiza páginas web ya creadas y observa la distribución de la misma.
A lo largo de este tema vamos a aprender a crear una página básica.
La estructura básica de una página es:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ahora veamos cómo funcionan estas etiquetas.
Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al
mismo tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la
página.
Por ejemplo:
<html>
...
</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>.
Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se
utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante),
<title> que te explicamos a continuación.
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,

cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las
etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head>
y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
...
</html>
Cuerpo del documento <body>
El cuerpo del documento contiene la información propia del documento, es decir lo que
queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que
van justo debajo de la cabecera.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
...
</body>
</html>
A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la
página.
El color de fondo puede establecerse a través del atributo bgcolor, al que es posible
asignarle un color representado en hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos
que escribir:
...
<body bgcolor="#0000FF">
...
</body>
</html>
Sería equivalente a poner:
...
<body bgcolor="blue">
...
</body>
</html>
La imagen de fondo puede establecerse a través del atributo background, indicando la
ruta en la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif,
que se encuentra en el mismo directorio en el que se encuentra guardada la página,
tendremos que escribir:
...
<bodybackground="fondo.gif">
...
</body>
</html>
En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se

encuentre dentro de la carpeta imagenes, que sí se encuentra en el mismo directorio que
la página, tendremos que escribir:
...
<body background="imagenes/fondo.gif">
...
</body>
</html>
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.
Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos
que escribir:
...
<body text="#FF0000">
...
</body>
</html>
Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en
píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y
topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape,
pero sí los atributos marginwidth (anchura del margen) y marginheight (altura del
margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen
izquierdo de 20 píxeles, tendremos que escribir:
...
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
...
</body>
</html>
Ejemplo 2
2 Crear una página básica

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio.
2 Escribe el código que aparece a continuación:
<html>
<head>
<title>Inicio</title>
</head>
<body bgcolor="#99CC99">
</body>
</html>
Con este código estarás creando un documento con el título "Inicio", y con el color de
fondo verde (#99CC99).
3 Haz clic sobre el menú Archivo.
4 Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como.
5 En el recuadro Tipo: elige Todos los archivos.
6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis

documentos/ejercicios_html de tu disco duro.
7 Abre el documento que acabas de crear en un navegador, y comprueba que obtienes
una página. Fíjate en el color de fondo de la página y en la barra de título.
Ejercicio 2
2 Deportes.
Práctica 2
2 Manos a la obra
Saberes 3 Operación del texto.
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, así como
a insertar caracteres especiales o separadores.
Caracteres especiales y espacios en blanco
Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta.
Si se desea insertar estos caracteres como texto hay que escribir el nombre que los
representa:
< Se representa con <
> Se representa con >
Existen otra serie de caracteres que no se visualizan correctamente en algunos

navegadores, como es el caso de la ñ y las letras acentuadas, por lo que al igual que
ocurre con los caracteres especiales < y >, para insertarlos como texto habría que escribir
el nombre que los representa.
A continuación se muestra una lista con algunos caracteres y el nombre con el que han de
ser representados:
Carácter Representación
€ €
ç ç
Ç Ç
ü ü
Ü Ü
& &
¿ ¿
¡ ¡
" "
· ·
º º
Carácter Representación
< <
> >
Á á
Siempre que se inserta texto Á Á en HTML hay que
tener en cuenta que si se escriben varios
espacios en blanco seguidos É é sólamente se
mostrará uno en el É É navegador. Para
conseguir que se muestren Í í varios espacios en
blanco seguidos puede Í Í sustituirse cada uno
de ellos por .
Ó ó
Por ejemplo, para insertar el Ó Ó texto:
Ú ú
¡Bienvenidos, esta es mi 1ª Ú Ú página!
Ñ ñ
Habría que escribir:
Ñ Ñ
¡Bienvenidos, esta ™ es
ª ª
¬ ¬
© ©
® ®
mi 1ª página!
Comentarios
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de

manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento.
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.
Por ejemplo, para insertar el texto siguiente con un comentario:
¡Bienvenidos, esta es mi 1ª página!


¡Bienvenidos, esta es mi 1ª página!
Saltos de línea <br>
En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar
la tecla INTRO.
Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código,
pero no se mostrará en el navegador. 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. No hay que insertar la etiqueta
</br> después de ella, ya que dicha etiqueta no existe.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva

secci&oacuten.
Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido
insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.
Utilizando estas etiquetas 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>.

Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden
incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como
animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema).
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma página es la
regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha
etiqueta no precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores
left (izquierda)
alineación de la regla
align right (derecha)
dentro de la página
center (centro)
un número, acompañado de % cuando se
width ancho de la regla
desee que sea en porcentaje
size alto de la regla un número
eliminar el sombreado de
noshade no puede tomar valores
la regla
Por ejemplo, para insertar el texto y la regla horizontal siguientes:
Inicio
Bienvenidos a mi página.
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi

página.
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>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de
los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar
texto se ha generalizado.
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.
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Queridos usuarios,
<blockquote>
<blockquote>
tengo el placer de comunicaros que hay una nueva secci&oacuten.
</blockquote>
</blockquote>
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
valores del 1 al 7, siendo por defecto el 3,
size tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Serif">Bienvenidos a www.tuzostv.com</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>.
Por ejemplo:
<body>
<basefont color="#006699" size="4" face="Arial">
...
Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño
4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra
otra etiqueta <font>, la que prevalece es siempre la última que se encuentra.
Resaltado del texto <b> ...
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se
encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden
agruparse según vayan asociados al tipo de letra o a la información que represente el texto.
No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que
pueden aplicarse varias etiquetas al mismo texto.
A continuación se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta Significado
<b> Negrita
<i> Cursiva
<u> subrayado
<s> Tachado
<tt> teletipo (máquina de escribir)
<big> aumenta el tamaño de la fuente
<small> disminuye el tamaño de la fuente
A continuación se muestran algunas etiquetas asociadas al tipo de información:
Etiqueta Significado
<cite> Cita
<code> ejemplo de código
<dfn> definición
<del> eliminado
<em> Énfasis
<ins> insertado
<kbd> Teclado
<samp> Muestra
<strong> destacado
<sub> subíndice
<sup> superíndice
<var> Variable
Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de
recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta
diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo.
Incluso a veces algunos estilos asociados al tipo de información pueden representarse de
forma distinta según el navegador.
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Serif">Bienvenidos a <b><u><tt>www.tuzostv.com</tt></u></b></font>
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.
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).
Aquí encontraréis cursos de formación muy interesantes.
<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy
interesantes.</p>
Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>,
para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta
<p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación
entre ellos es menor.
Aquí encontraréis cursos de formación muy interesantes.
<div align="center">Bienvenidos a mi p&aacutegina.</div>

<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy
interesantes.</div>
También es posible insertar el texto entre las etiquetas <center> y </center> para que
aparezca centrado.
<center>Bienvenidos a mi p&aacutegina.</center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el
cambio de línea (como en el caso de <p> y <div>), son las etiquetas <span> y </span>
volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.
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. Hay que tener en cuenta que el navegador del usuario es el que
aplicará el estilo del encabezado por lo que el mismo título se puede visualizar de forma
diferente según el navegador.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas
etiquetas precisan una etiqueta de cierre.
A continuación se muestran los distintos encabezados existentes:
Etiqueta Ejemplo
<H1> Título 1: HTML
Para todas estas etiquetas es posible especificar el valor del atributo align.
El lenguaje HTML
Apartado 1: Las etiquetas
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
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.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee>
y </marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si

lo deseas puedes hacer que estas propiedades varíen.
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).
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 left (de izquierda a derecha).
También es posible establecer un color de fondo, a través del atributo bgcolor.
Por ejemplo, para insertar la siguiente marquesina:
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 sólamente texto.
Las listas <li> ...
Elemento de lista <li>
Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y
</li>.
Por ejemplo, para insertar en una lista los siguientes elementos:
 Perro
 Gato
 Periquito
...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...
Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen
si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a
continuación.
Lista desordenada <ul>
Para que una lista sea desordenada, sus elementos deberán encontrarse entre las
etiquetas <ul> y </ul>.
A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo),
disc (disco) o square (cuadrado).
Por ejemplo, para insertar la siquiente lista:
o Perro
o Gato
o Periquito
<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Lista ordenada <ol>
Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas
<ol> y </ol>.
A través del atributo type es posible elegir el tipo de numeración, que puede ser 1
(números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en
minúsculas) o I (números romanos en mayúsculas).
i. Perro
ii. Gato
iii. Periquito
<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas
como ordenadas.

1. Lunes
 Ingles
 Frances
2. Martes
1. Ingles
A. Correccion de ejercicios
B. Proponer ejercicios
<ol>
<li>Lunes
<ul type="square">
<li>Ingles</li>
<li>Frances</li>
</ul>
</li>
<li>Martes
<ol>
<li>Ingles</li>
<ol type="A">
<li>Correccion de ejercicios</li>
<li>Proponer ejercicios </li>
</ol>
</li>
</ol>
</li>
</ol>
Ejemplo 3
3 Bienvenido a mi pagina
<center>Bienvenidos a mi p&aacutegina.</center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el
cambio de línea (como en el caso de <p> y <div>), son las etiquetas <span> y </span>
volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.
Ejercicio 3
3 Insertar texto con diferentes propiedades
Instrucciones para el alumno:
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Crea una carpeta llamada animales donde guardaras los trabajos.3 Inserta una línea en
blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella:
<basefont color="red" size="1 ">
Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del
documento.
Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la
página no tiene texto.
4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto:
Inicio
5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y

pequeño.
Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro
(#003333) y subiremos el tamaño de las letras.
6 Rectifica la etiqueta <basefont para que quede así:
<basefont color="#003333" size="4">
Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el
texto del documento.
7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.
8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:
<h1>Inicio</h1>
Con este código estarás conviertiendo el texto en un encabezado de primer nivel.
9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece

destacado y más grande.
10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.
Con esta etiqueta estarás insertando una regla horizontal.
11 Guarda el archivo y visualízalo en tu navegador, observa la regla
12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código
en ella:
<blockquote>
<blockquote>
<p align="left">
<em>
Somos una asociación de veterinarios, estudiantes de veterinaria, o
simplemente amantes de los animales.
<br>
Desde esta página web intentaremos resolver tus dudas acerca de
cómo cuidar a tus mascotas.
</em>
</p>
</blockquote>
</blockquote>
Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).
Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y

tendrá doble sangrado (<blockquote>).
13 Guarda el archivo y visualízalo en tu navegador, comprueba que obtienes una página.

Para apreciar mejor el efecto del párrafo ve cambiando el tamaño de la ventana de tu
navegador y verás como el texto se va escribiendo en más líneas pero siempre alineado a
la izquierda y saltando de línea después de la primera frase.
Práctica 4
3 Realiza páginas web con diferentes tipos de textos y listas.
Saberes 4 Otros tipos de enlaces.

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un
elemento esencial para cualquier página web.
Hiperenlace <a>
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, la página
que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
www.tuzostv.com
<a href="http://www.tuzostv.com">Visita www.tuzostv.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del atributo
href.
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:// , el nombre
del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la
página se cargará la página de inicio asociada al dominio.
Por ejemplo, "http://www.tuzostv.com" tendrá el mismo efecto que

"http://www.tuzos.com/index.htm"
Para insertar el enlace:
Visita www.tuzostv.com
<a href="http://www.tuzostv.com">Visita www.tuzostv.com</a>
 Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio
web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar
o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como
carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente

dentro de la carpeta raíz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra
inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por
ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz
del sitio, habría que escribir:
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la
misma carpeta que el documento actual, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.
Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada
tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría que
escribir:
<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente.
Para ello el vínculo debe ser
"nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama

tipos.
Al final de este tema verás cómo definir el punto de fijación.
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.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones
de destino, ya que se volverán a ver en el tema de Marcos. De momento sólo te interesa
retener la opción _blank y _self.
Para insertar el enlace:
Visita www.tuzostv.com en una ventana nueva
<a href="http://www.tuzostv.com" target ="_blank">Visita www.tuzostv.com en una

ventana nueva</a>
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).
Formato de los enlaces
En general, un texto que tiene un vínculo asociado suele aparecer subrayado.
Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de
puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen
(un mapa), aparece el contorno de esa zona.
Aqui tienes dos vínculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor.
Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos más
adelante.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al
situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado
o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en
cada navegador, pero nosotros podemos cambiar esos colores.
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).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado
ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido
pulsados).
Por ejemplo, al insertar el siguiente código:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.tuzostv.com" target ="_blank">www.tuzostv.com</a>
...
Mientras no se visite la página www.aulaclic.com, el enlace será de color rojo (#FF0000):
www.tuzostv.com
Mientras la página www.tuzostv.com sea la última visitada, el enlace será de color fucsia
(#FF0099):
www.tuzostv.com
Cuando se haya visitado la página www.tuzostv.com, el enlace será de color naranja

(#FF9900):
www.tuzostv.com
Puntos de fijación. Anclas
Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder

ir directamente al apartado deseado, en lugar de ir al comienzo del documento.
Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices.
Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar
cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.
Por ejemplo, para insertar un punto de fijación delante del siguiente texto:
Texto con ancla
<a name="miancla"></a>Texto con ancla
Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin
mirar el código no hay nada que indique que delante del texto haya un ancla.
Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior
se llama miancla, podríamos crear un enlace que nos llevara directamente a la línea de
texto en la que se encuentra el ancla. Por ejemplo:
Enlace al ancla
<a href="t_4_3.htm#miancla">Enlace al ancla</a>
Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero en
lugar de cargarse desde el principio, la primera línea de texto será la línea en la que hemos
insertado el ancla.
Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este
caso, podemos prescindir de poner el nombre de la página en el atributo href.
En el ejemplo anterior podríamos haber escrito:
<a href="#miancla">Enlace al ancla</a>
Otros tipos de enlaces
Existen otros tipos de enlaces que no conducen a otra página web, los veremos a
continuación:
Correo electrónico:
Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario
será el especificado en el enlace. Para ello la referencia del vínculo debe ser
"mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a tuzostv, tal
como este:
e-mail para tuzostv
<a href="mailto:webmaster@tuzostv.com">e-mail para tuzostv</a>

Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene
instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario
rellenado con la direcciondecorreo. Podemos hacer que esté rellenado algún campo más
como es el asunto. En este caso habría que escribir:
<a href="mailto:webmaster@tuzostv.com?subject=el asunto del mensaje">e-

mail para tuzostv</a>
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. Cuando el enlace no es a una página Web nos
aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador
le pide al usuario permiso para descargar el fichero en su ordenador.
El navegador reconoce algunas extensiones como asociadas a un determinado programa

(por ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobar
Reader, .xls al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva
opción, la de abrir el fichero sin descargarlo en el disco duro del usuario.
Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una
referencia relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word
carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el
fichero en su disco duro, en este caso definiremos el enlace:
haz clic aquí para descargarte el fichero
De la siguiente forma:
<a href="carta.doc" tarjet=_blank >haz clic aquí para descargarte el

fichero</a>
En este caso hemos utilizado una referencia relativa al documento ya que la carta se
encuentra en la misma carpeta que nuestra página.
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 "#".
Por ejemplo, para insertar el enlace vacío:
vinculo vacio
<a href="#">vinculo vacio</a>
Este tipo de enlace resulta útil para trabajar con comportamientos javascript
Ejemplo 4
4 Otros tipos de enlaces
Existen otros tipos de enlaces que no conducen a otra página web, los veremos a
continuación:
Correo electrónico:
Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario
será el especificado en el enlace. Para ello la referencia del vínculo debe ser
"mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a tuzostv, tal
como este:
e-mail para tuzostv
<a href="mailto:webmaster@tuzostv.com">e-mail para tuzostv</a>
Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene
instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario
rellenado con la direcciondecorreo. Podemos hacer que esté rellenado algún campo más
como es el asunto. En este caso habría que escribir:
<a href="mailto:webmaster@tuzostv.com?subject=el asunto del mensaje">e-mail

para tuzostv</a>
Ejercicio 4
4 Insertar un hiperenlace
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a
continuación.
Ejercicio 1: Deportes.
1 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis

documentos/ejercicios_html/deportes
2 Rectificar la página para que la palabra E-MAIL sea un enlace de correo electrónico a tu
dirección de correo.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Práctica 4
4 Realiza diferentes páginas web aplicando diversos códigos de hiperenlaces.
Saberes 5 Manipulación de tablas.
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y
columnas, y modificar sus propiedades.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran
utilidad al mejorar notablemente las opciones de diseño.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a
las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque
de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
imagen y texto COLUMNA
Texto dentro de
una celda
FILA CELDA
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas
etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla.
Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario también
especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que
podremos especificar el número de celdas por fila, que equivale a especificar el número de
columnas por fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan
cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las
etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las
celdas. Por ejemplo, para insertar la siguiente tabla:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:

width ancho de la tabla
height altura de la tabla
espacio entre el contenido de
cellpadding un número
las celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla dentro de
la página
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
Por ejemplo, para modificar la tabla de la página anterior para que quedase como la
siguiente:
Sabado Domingo
<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="#000000" bgcolor="#FFCC99">
...
</table>
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho
de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador
y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que
el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones
internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de
la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla
es negro (#000000) y el fondo naranja (#FFCC99).
Formato de las celdas

Es posible modificar los siguientes atributos de una celda:
width ancho de la tabla
height altura de la tabla
left (izquierda)
alineación horizontal del
contenido de la celda
center (centro)
baseline (línea de base)
alineación vertical del bottom (inferior)
valign
contenido de la celda middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
También es posible modificar estos atributos de toda una fila, especificándolos en la

etiqueta <tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos
para una celda que cuando son establecidos para una fila completa. Al mismo tiempo,
tienen más prioridad los atributos establecidos para una fila que los establecidos para toda
la tabla.
Por ejemplo, si escribiéramos el siguiente código:
<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>Curso HTML</td>
</tr>
<tr>
</tr>
</table>
Obtendríamos la siguiente tabla:

Sabado Domingo
Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código
<tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de
fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja.
Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color
verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en
vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap,
que hace que el contenido de la celda no se ajuste de manera automática al ancho de la
columna sino que el ancho de la celda se adapta al ancho del contenido para que el
contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade
o no a las etiqueta <td>.
Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero
podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>,
pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por
lo que se utiliza para definir los encabezados o títulos de las columnas.
<table width="50%" border="1" align="center">

<tr>
<th>Sabado</td>
<th>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
</tr>
<tr>
</tr>
</table>
Obtendríamos la siguiente tabla:

Sábado Domingo
Título de tabla <caption>
No solamente es posible establecer títulos para las columnas, también es posible

establecer un título para la tabla mediante las etiquetas <caption> y </caption>.
Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de

los atributos align (con los valores bottom, center, left, right y top) y valign (con los
valores bottom y top).
<table width="50%" border="1" align="center">

<caption align="right" valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>
Obtendríamos la siguiente tabla con título:

Titulo de la tabla
Sábado Domingo
El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la

tabla (valign="top").
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan
para combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se
extenderá la celda, y a través del atributo rowspan se especifica el número de filas por
las que se extenderá la celda.
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para
insertar la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años
Habría que escribir el siguiente código:
<table width="575" border="2" cellspacing="2">

<tr align="center" valign="middle">
<th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<td>Tiempo de gestación</td>
<td colspan="2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<td>Duración de vida del pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 años</td>
</tr>
</table>
Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que
primero intentaras entender el código comparándolo con la tabla que de él se obtiene.
En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la
tabla. En este caso serían cuatro columnas. Para saber el número de columnas total de
la tabla, tenemos que fijarnos en el número total de celdas que podemos obtener por fila
al trazar las líneas verticales que separan las columnas entre sí.
En la primera fila, la línea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL

HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna
actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo
colspan de la celda vale cuatro, no hay que definir más celdas para esa misma fila.
En la segunda fila, la línea <th rowspan="2">DIFERENCIAS</th> indica que la celda
ocupará dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th
rowspan="2">HOMBRE</th>.
Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como
mucho cuatro columnas, por lo que como en la línea <th colspan="2">PERRO</th> el
atributo colspan vale dos, ya tenemos las cuatro celdas.
En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo
que en la tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de
sus celdas se corresponden con las definidas en la fila anterior.
Las dos nuevas celdas son <th>PEQUEÑO</th> y <th>GRANDE</th>.
El uso de los atributos colspan y rowspan puede resultar algo complicado al principio.
Es cuestión de práctica.
Ejemplo 5
5 Diferencias ente el perro y el hombre.
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar
la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años
Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">
<th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
Ejercicio 5
5 Deportes Con tablas.
1 Abrir el documento donde.htm, de la carpeta deportes.
2 Modificar la página para colocar la lista de centros en una tabla como esta:
3 Rectificar la tabla para que las celdas de la primera fila sean títulos de columna.
Saberes 6 Manejo de Formularios.
Formulario <form>
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre
los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús
desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios.
Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo
que facilita su comprensión y mejora su apariencia.
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. la etiqueta
<form> tiene los siguientes atributos:
El atributo 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.
El atributo 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.
El atributo method indica el metodo mediante el que se transferirán las variables del
formulario. Su valor puede ser get o post.
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 realizan consultas sobre una base de datos.
El valor 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.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:
<form action="mailto:formularios@aulaclic.com" method="post"

enctype="text/plain" >
...
</form>
Áreas de texto <textarea>
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen
utilizarse para que incluyan comentarios.
Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea>
entre las etiquetas <form> y </form> del formulario.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas
<textarea> y </textarea>.
El atributo 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 a la hora de
procesarlos.
El atributo 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.
El atributo 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.
Gracias a las barras de desplazamiento, es posible insertar más líneas de las

especificadas en el atributo rows, y más caracteres por línea de los especificados en el
atributo cols.
Por ejemplo, para insertar el área de texto:
Escribe el texto que quieras
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que

quieras</textarea>
Elementos de entrada <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las
etiquetas <form> y </form> del formulario.
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.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que
pueden definirse para cada uno de ellos.
Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo
de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el
campo de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Campo de te
<input name="campo" type="text" value="Campo de texto" size="20"

maxlength="15">
Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única
diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas
como asteriscos.
Por ejemplo, para insertar el campo de contraseña:
<input name="contra" type="password" value="contraseña" size="20"

maxlength="15">
Botón:
Para insertar un botón, 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 restore, 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.
El atributo value indica el texto que mostrará el botón.
Por ejemplo, para insertar el botón:

<input name="boton" type="submit" value="Enviar">
Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo 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.
Por ejemplo, para insertar la casilla:
<input name="casilla" type="checkbox" value="acepto" checked>
Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo 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 el botón aparecerá activado inicialmente.
Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda
tomar un solo valor de entre varios posibles. Para ello, 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, el que esté activado cuando se envía el formulario, su
valor será el que tendrá la variable.
Por ejemplo, para insertar los botones de opción:
<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere

será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar.
Observa que lo que ponemos como valor no aparece escrito en la página es un datos
interno.


interno.
Existen otros tipos como el tipo hidden que sirve para 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.
Para que el usuario envié un fichero suyo a través del formulario tenemos el tipo file,
este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier
internauta nos envié cualquier tipo de fichero nos podríamos encontrar con sorpresas
no siempre agradables.
Campos de selección <select> ...
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y
</select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable que
contendrá el valor seleccionado.
El atributo 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 multiple 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>.
El atributo 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.
Por ejemplo, para insertar el menú:
Gato
<select name="mascota">
<option selected>--- Elige animal ---</option>
<option>Perro</option>
<option>Gato</option>
</select>
Y para insertar la lista:
---Elige animales---
Loro
Perro
<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>
Ejemplo 6
Insertar los botones de opción
Por ejemplo, para insertar los botones de opción:

interno.


interno.
Existen otros tipos como el tipo hidden que sirve para 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.
Para que el usuario envié un fichero suyo a través del formulario tenemos el tipo file,
este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier
internauta nos envié cualquier tipo de fichero nos podríamos encontrar con sorpresas
no siempre agradables.
Campos de selección <select> ...
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y
</select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable que
contendrá el valor seleccionado.
El atributo 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 multiple 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>.
El atributo 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.
Ejercicio 6
6 Deportes con formularios
1 Abrir el documento que has realizado durante esta competencia y y modifica los botones.
2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis

documentos/ejercicios_html/deportes
En dicho documento hay dos botones de opción.

3 Modificar el primer botón de opción para que tenga el valor si, y esté activado
inicialmente.
4 Modificar el segundo botón de opción para que tenga el valor no.

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Cargado por

Información del documento

Descripción 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

HTML

Cargado por

Copyright:

Formatos disponibles

Desarrolla aplicaciones web que se ejecutan con el cliente

1. Manipulación del lenguaje HTML

1. Realiza tu primera página web solo

Actualmente existen un gran número de programas de cómputo que automágicamente

1. Manipulación del lenguaje HTML

1 Manipulación del lenguaje HTML

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido,

Los navegadores. Compatibilidad

A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS

Este código daría como resultado el siguiente texto:

Instrucciones para el Alumno:

Seguidamente introduce, en el documento en blanco, el texto siguiente:

Guarda el documento con la extensión htm, con el nombre miprimpag.htm. Puedes

El navegador deberá mostrar una página como la de la derecha.

El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">.

El texto Hola, estoy haciendo pruebas. se ha insertado a través de línea <font

1. Realiza tu primera página web solo

2 Distribución de una página web

A lo largo de este tema vamos a aprender a crear una página básica.

La estructura básica de una página es:

Ahora veamos cómo funcionan estas etiquetas.

Identificador del tipo de documento <html>

Cabecera de la página <head>

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,

Cuerpo del documento <body>

Sería equivalente a poner:

En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se

2 Crear una página básica

2 Escribe el código que aparece a continuación:

3 Haz clic sobre el menú Archivo.

5 En el recuadro Tipo: elige Todos los archivos.

6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis

Saberes 3 Operación del texto.

Caracteres especiales y espacios en blanco

< Se representa con &lt;

> Se representa con &gt;

Existen otra serie de caracteres que no se visualizan correctamente en algunos

En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de

Por ejemplo, para insertar el texto siguiente con un comentario:

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

Habría que escribir:

Saltos de línea <br>

Por ejemplo, para insertar el texto:

Habría que escribir:

Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se

Por ejemplo, para insertar el texto:

Habría que escribir:

Es posible especificar algunos atributos de la regla horizontal:

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi

Sangrado de texto <blockquote>

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que

Por ejemplo, para insertar el texto:

Habría que escribir:

< Se representa con <

> Se representa con >