Sesión 2 ESTRUCTURA DE UNA PAGINA WEB 2025

www.UPRIT.edu.pe
Estructura Básica
de una Página Web
Dr. EDWIN RAUL
MENDOZA TORRES
• edwin.mendoza@uprit.edu.pe
DESARROLLO DE
ENTORNOS WEB
1

www.UPRIT.edu.pe
2
1
3
4
5
6
Etiquetas
Marquesinas
Listas
Hiperenlaces
Imágenes
Tablas
2

HTML
HyperText Markup Language
Taller de HTML
3
Dr. Edwin Raul Mendoza Torres

Etiqueta de párrafo <p>
El texto de una página puede agruparse en párrafos (conjunto de frases que
tratan sobre un mismo asunto). 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).
Por ejemplo, para insertar el texto:
.
Habría que escribir:
Taller de HTML
Bienvenidos a mi página.
Aquí encontraréis cursos de formación muy interesantes
<p align="center">Bienvenidos a mi página.</p>
<p>Aquí encontrareís cursos de formación muy interesantes.</p>

Etiquetas de encabezado <H1> <H2> … <H6>
Taller de HTML
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
cuanta 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.
• No se recomienda utilizarlas para aumentar
o disminuir el tamaño del tipo de letra, ya
que cada navegador los muestra diferente.
Se usan para dividir correctamente en
secciones nuestra página.
Ejercicio: Hacer una página web en la que
aparezca 6 frases del tipo:
Esto esta escrito con encabezado 1
Esto está escrito con encabezado 2
Esto está escrito con encabezado 6

Etiquetas de encabezado <H1> <H2> … <H6>
Taller de 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>

Formatear el texto <font>
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. (+1, -3).
Size
fuente a utilizar. Se pueden poner hasta
3 separadas por comas. Elegir tipos de
fuentes estándar si queremos que todo
el mundo vea la página igual. Tipos de
fuente estándar: Arial, Courier,
Verdana, Times New Roman, Helvetica,
Sans- Serif.
Face
color del texto. Número hexadecimal o
nombre del color en inglés.
Color
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:
<font color=“red" size="4" face="Comic Sans,
Arial">Bienvenidos a www.aulaclic.com</font>
Bienvenidos a www.aulaclic.com
Taller de HTML

Formatear el texto <basefont>
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.
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">
...
Ejercicio: Hacer un código para probar esto
Taller de HTML
Por ejemplo:
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>.

Efectos en el texto
Taller de HTML
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
<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 letra:

Efectos en el texto
<cite> cita
<code> ejemplo de código
<dfn> definición
<strong> destacado
<sub> subíndice
<sup> superíndice
<font color=“red" size="4" face="Comic Sans, Arial, Sans Serif">Bienvenidos a
<b><u><tt>www.aulaclic.com</tt></u></b></font>
Taller de HTML
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.
A continuación
se muestran
algunas
etiquetas
asociadas al
tipo de
información:
Bienvenidos a www.aulaclic.com

11
EJERCICIO
Realizar una página web que quede como la de
la siguiente imagen.
Taller de HTML
3

MARQUESINAS
Taller de HTML
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.
La marquesina, por
defecto, se desplaza de
derecha a izquierda
indefinidamente, pero si
lo deseas puedes hacer
que estas propiedades
varíen.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.
También es posible establecer un color de fondo, a través del atributo bgcolor.
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).

Mas atributos de <marquee>
altura de la marquesina. Un nº.
Height
anchura de la marquesina. Un nº.
Width
Número de veces que se desplazará
el texto por la marquesina. Acepta
un número o la palabra infinite.
Loop
Tiempo de desplazamiento en
milisegundos
Scrolldelay

Listas. Etiqueta <li>
Taller de HTML
Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
Perro
Gato
Periquito
• Aparte de las etiquetas li necesitaremos delante del primer elemento de la lista y al
después del último una etiqueta de inicio y de fin indicando el tipo de lista que
queremos establecer.
• El tipo de lista podrá ser desordenada (con viñetas) u ordenada (numerada). También
podemos combinarlas como ahora veremos.
Por ejemplo, para insertar en una lista los
siguientes elementos:

Lista desordenada. Etiqueta <ul>
Taller de HTML
Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.
<ul type=“disc">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Por ejemplo, para insertar la siguiente lista: Habría que escribir:
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).
o Perro
o Gato
o Periquito

Lista ordenada. Etiqueta <ol>
Taller de HTML
Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.
<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
i. Perro
ii. Gato
iii. Periquito
Por ejemplo, para insertar la siquiente lista: Habría que escribir:
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 e
mayúsculas). Por defecto se ordenan con números.

Anidar listas
• Por ejemplo, para insertar la siguiente lista:
• Habría que escribir:
1. Lunes
▪Ingles
▪Frances
2. Martes
1. Ingles
A. Correccion de ejercicios
B. Proponer ejercicios
Es posible anidar listas dentro de otras.
Estas listas pueden ser tanto desordenadas como ordenadas.
Taller de HTML

Anidar listas
<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>
Taller de HTML

Anidar listas
Taller de HTML
• Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos
elementos <li>Lunes y <li>Martes.
• El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul
type="square"> que tiene dos elementos <li>Ingles</li> y <li>Frances</li>.
• El elemento Martes contiene una lista ordenada de un sólo elemento
<li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo
letras mayúsculas <ol type="A"> con los dos elementos <li>Correccion de
ejercicios</li> y <li>Proponer ejercicios </li>

21
EJERCICIO
Realizar una página web que quede como la de
la siguiente imagen.
Taller de HTML
4

Hiperenlace <a>
Taller de HTML
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace sobre el que se puede hacer click para ver al
instante otro tema o documento llamado destino del enlace. Estos enlaces pueden apuntar a otra seccion de la
misma pagina, a otra página, a un documento, …
• 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.
<a href="http://www.google.es">Buscar en Google</a>
Buscar en Google
Por ejemplo, para insertar el enlace:

Hiperenlace
z
Puedes poner el hiperenlace donde quieras. Por ejemplo:
En un párrafo
<a …><p>Texto del parrafo</p></a>
En un trozo de un párrafo
<p>Hola<a …>amigo</a></p>
En una imagen
<a …><img ..></a>
En un titulo
<a …><H1>Titulo</H1></a>
Taller de HTML

Tipos de referencia
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La
ubicación en concreto es Internet. En este caso hay que empezar la referencia por
http:// , el nombre del dominio y algunas veces el nombre de la página.
• Referencia absoluta:
Por ejemplo:
<a href=“http://www.laverdad.es/murcia/ocio/cartelera/cartelera.html”>
Cartelera de cine</a>
Taller de HTML
<a href=“http://www.laverdad.es”> Visita el periodico de la Verdad</a>
Tambien vale:

Tipos de referencia
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, suponed que he hecho 2 paginas web. Una index.html y otra noticias.html. Si queremos
insertar un enlace a la pagina noticias en la pagina index.html, como se muestra en la figura de la
página siguiente, y la pagina noticias.html se encuentra dentro de la misma carpeta que la de índex,
para insertar el enlace tendré que poner:
Si la pagina noticias se encontrara, por ejemplo, dentro de una carpeta llamada maspaginas, y esta
estuviera dentro de la misma carpeta que el documento actual, habría que escribir:
<a href=“noticias.html">noticias</a>
<a href=“maspaginas/noticias.html">noticias</a>
• Referencia relativa a la página o documento actual:
Taller de HTML

Destino del enlace
• De momento sólo te interesa conocer la opción _blank y _self.
• Para insertar el enlace:
Visita GOOGLE en una ventana nueva
Taller de HTML
<a href="http://www.google.es" target ="_blank">Visita GOOGLE en una ventana nueva</a>
_blank: Abre el documento vinculado en una ventana nueva del
navegador.
_self: Es la opción predeterminada. Abre el documento vinculado en
el mismo marco o ventana donde está el enlace.
_parent
_top
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:

Tipos de referencia
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello
el vínculo debe ser
En el caso de estar el ancla en el documento o pagina actual bastaria con
Esta etiqueta de <a href …> la pondre delante del enlace, donde al pinchar me lleve a el punto de
anclaje deseado.
Todavia faltaria crear el punto de anclaje. Para ello también usaremos la etiqueta <a> pero en este
caso deberemos ponerle el atributo name
Por ejemplo, imaginad que tenemos una página web con varios apartados. Una página web muy
larga, que no se puede ver todo su contenido en la pantalla, sino que tenemos que pinchar en la
barra de desplazamiento de la derecha para poder ver lo que hay escrito al final. Imaginad que
queremos poner un enlace al final de dicha página para que al pincha sobre él nos lleve al comienzo
de la misma.
Taller de HTML
• Punto de fijación o anclas:
<a href="nombre_de_documento#nombre_de_punto“>
<a href=“#punto de anclaje>
Mira el ejemplo en: http://aranchaprofe.estoyenred.es

Otros tipos de enlace
Podemos poner un enlace para que al pinchar se abra 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 (el valor del atributo href) debe ser
"mailto:direcciondecorreo".
Correo electrónico:
Taller de HTML
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a aulaClic,
tal como este:
e-mail al profesor
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.
<a href="mailto:aranchaprofesora@gmail.com">e-mail al profesor</a>
Existen otros tipos de enlaces que no conducen a otra página web, los veremos a continuación:

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 en el que el navegador le pide al
usuario permiso para descargar el fichero en su ordenador.
Vínculo a ficheros para descarga
Taller de HTML

De la siguiente forma:
En este caso hemos utilizado una referencia relativa al documento ya que la carta se
encuentra en la misma carpeta que nuestra página.
Taller de HTML
• 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 o una referencia relativa
a la pagina donde se encuentra el enlace.
• Por ejemplo, en la carpeta donde se encuentra la página que estamos creando 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
<a href="carta.doc" target=_blank >haz clic aquí para descargarte el fichero</a>

Formato de los enlaces
Los colores de los vínculos pueden especificarse
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 del
enlace activo (enlace que acaba
de ser pulsado).
alink
permite determinar el color de los enlaces
visitados (enlaces que ya han sido pulsados).
vlink
permite determinar el color de los
enlaces sin visitar (enlace que no ha sido
pulsado ninguna vez).
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.
Taller de HTML

Formato de los enlaces
Mientras no se visite la página www.aulaclic.com, el enlace será de
color rojo
Mientras la página www.aulaclic.com sea la última visitada, el enlace
será de color fucsia (#FF0099)
Cuando se haya visitado la página www.aulaclic.com, el enlace será
de color naranja
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
Por ejemplo, al insertar el siguiente código:
Taller de HTML

EJERCICIO
37
• Al final de la página deberás poner un enlace que abra el Outlook
Express para enviarte un correo.
• Deberás incluir también algún enlace a una ubicación externa, como
Orange, Terra, …
• Los enlaces siempre se verán en negro, aun cuando ya se haya
pinchado sobre ellos.
• Aquí os dejo como quedaría la página:
Modifica tu página creada en la clase 4 de las listas para que al comienzo tengas 5
enlaces que lleven al pinchar a cada una de las secciones de la página.
Taller de HTML
5

Imagen <IMG>
Taller de HTML
Para insertar una imagen es necesario insertar la 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">
Por ejemplo, para insertar el enlace:
Teniendo en cuentra que la imagen se llama logo_animales.gif y que se
encuentra en el mismo directorio que la pagina web.

Texto Alternativo
Taller de HTML
<img src="gatito.gif" alt="Imagen gato" >
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo
directorio que el documento actual, sino que se encuentra dentro de la carpeta
imagenes. En lugar de la imagen se mostrará lo siguiente:
• Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al
especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar,
junto con el nombre de la imagen.
• Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que
nosotros deseemos, gracias al atributo alt.
• Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto
alternativo Imagen gato, para ello insertamos el siguiente código:

Borde de una imagen
Taller de HTML
<img src="imagenes/logo_animales.gif" border="4" >
Hay que tener en cuenta
que el borde de la imagen
siempre será de color
negro, a no ser que la
imagen contenga un
enlace, en cuyo caso el
color del borde será el
color establecido para los
vínculos.
• En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde
alrededor, pero es posible establecer uno a través del atributo border.
• El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.
• Por ejemplo, para insertar la siguiente imagen con borde:

Borde de una imagen
Taller de HTML
<a href="http://www.aulaclic.com" target ="_blank" >
<img src="imagenes/logo_animales.gif" border="4" ></a>
Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde
(que por su color indica que existe dicho vínculo), es necesario establecer border="0".
• Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:

Tamaño de una imagen
<img src="imagenes/logo_animales.gif" width="200" height="80">
• Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño
original, pero por diversos motivos puede interesarnos modificar dicho tamaño.
• A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño
de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de
imagen, sino que lo que varía es la visualización de la imagen en el navegador.
• El valor que pueden tomar los atributos width y height ha de ser un número, acompañado
de % cuando se desee que sea en porcentaje con respecto a la página.
• Por ejemplo, para insertar una imagen con 200 píxeles de anchura y 80 píxeles de altura:
Taller de HTML
Al modificar el tamaño de la imagen a través de estos atributos es
muy probable que la imagen resultante no sea de buena calidad,

45
Alineación de las
imágenes
La alineación de las imágenes se establece a
través del atributo align. Este atributo indica la
alineación de las imágenes con respecto a la
línea de texto en la que se encuentran.
Los valores del atributo align pueden ser los
siguientes:
Taller de HTML

EJERCICIO 1
46
• También tener en cuenta que todas ellas llevan texto alternativo: árbol,
corazón y botella, si nos situamos por encima de ellas.
• La imagen de la botella tiene borde y el tamaño de cada una de las
imágenes es el original.
Realizar la siguiente pagina HTML insertando las imágenes necesarias. Tener en
cuenta que nos encontramos con 3 anclas al principio que nos llevan a cada una de
las imágenes.
Taller de HTML
6

Tablas
En este tema vamos a ver cómo trabajar con tablas.
Podremos insertar tablas, filas y columnas, y modificar sus propiedades.
Hoy en dia, 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.
Taller de HTML

Etiqueta de 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.
La etiqueta necesaria para indicar que comienza una tabla será <TABLE> y
llevará una etiqueta de cierre </TABLE> allá donde termine.
Aparte de esa etiqueta deberemos poner <TR> cada vez que empiece una
fila. Y cada vez que empiece una celda en esa fila pondremos <TD>.
Por ejemplo, para crear una tabla con 2 filas y 3 columnas:
Taller de HTML

<TABLE border=2>
<TR>
<TD>Cód. Artículo</TD>
<TD>Descripción</TD>
<TD>Precio Vta.</TD>
</TR>
<TR>
<TD>JUG/200302</TD>
<TD>Anillo X-MEN</TD>
<TD>8.975</TD>
</TR>
</TABLE>
EJEMPLO
Taller de HTML

EJERCICIOS
Realizar una tabla con 3 filas y 3 columnas
como esta.
Ejercicio 1
Realizar una tabla de 2 filas y 3 columnas
como esta.
Ejercicio 2
Taller de HTML

Encabezados con TH
La etiqueta <TH> es una etiqueta especial
para las celdas que actúan como títulos
de las columnas de la tabla. Se emplea
una etiqueta <TH> por cada una de las
celdas que sean encabezado, en lugar de
ponerle una simple etiqueta de celda
<TD>
<TABLE border=2>
<TR>
<TH>Cód. Artículo</TH>
<TH>Descripción</TH>
<TH>Precio Vta.</TH>
</TR>
<TR>
<TD>JUG/200302</TD>
<TD>Anillo X-MEN</TD>
<TD>8.975</TD>
</TR>
</TABLE>
<TH> se encarga de centrar el texto
dentro de la celda y de escribirlo en
negrita.

Titulo de una tabla
Podemos poner un titulo a una tabla, bien justo encima de la misma o bien abajo.
Para ello haremos uso de la etiqueta <CAPTION>.
Por ejemplo:
<caption align=“top”>Titulo de la tabla</caption>
Taller de HTML
<caption align=“bottom”>Titulo de la tabla</caption>
Tambien vale:
La etiqueta <CAPTION> se pondrá justo después de comenzar la
tabla, o sea justo después de la etiqueta <TABLE>.

Atributos de la etiqueta <TABLE>. Atributo align
Por defecto el navegador pone las tablas en el margen izquierdo de
la página y el texto que hay alrededor se ubica en la parte superior e
inferior de la tabla, pero no en las partes derecha e izquierda.
Para cambiar eso pondremos dentro de la etiqueta TABLE el atributo
align, cuyos posibles valores son left o right. También podemos poner
center, en cuyo caso el texto aparecerá arriba y abajo y la tabla en
el centro.
Taller de HTML

Atributos de la etiqueta <TABLE>
Anchura de la tabla. El valor será un numero. Si le ponemos el
numero y un signo % estaremos expresando porcentaje de
anchura con respecto a la ventana entera del navegador.
Width
color del borde de la tabla.
Bordercolor
imagen de fondo de la tabla
Background
Con este atributo indicamos el
color de fondo de la tabla
Bgcolor
Especifica la cantidad de espacio entre
celdas. La distancia entre ellas.
Indicaremos un número como valor.
Cellspacing
Este atributo indica la cantidad de espacio
entre el borde de una celda y su
contenido. Especificaremos
Cellpadding
Altura de la tabla. El valor será un número. Si le
ponemos el numero y un signo % estaremos
expresando porcentaje de altura con respecto a la
ventana entera del navegador.
Height
Taller de HTML

Atributos de <TD> y <TH>
anchura con respecto a la tabla. Un
valor numerico o un porcentaje.
Width
altura con respecto a la tabla. Un valor
numérico o un porcentaje.
Height
alineacion del texto dentro de la celda.
Valores: left, right, o center.
Align
alineación vertical del texto en la
celda. Valores: top, middle, o
bottom.
Valign
color de fondo de la celda
Bgcolor
imagen de fondo de la celda
Background
Bordercolor: color del borde de la celda
Taller de HTML

Ejercicio
Ejercicio 3:
Realizar la siguiente tabla en una pagina web
Taller de HTML

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.
• La expansión de la celda siempre se realiza hacia abajo y hacia la derecha con respecto a la
celda en la que se han definido las propiedades rowspan y colspan.
• Lo más importante que hay que recordar cuando se dispone de una celda que abarca varias filas
o columnas es que hay que ajustar el número de etiquetas de celdas que se emplean en la fila de
la tabla.
• Si una fila tiene 5 columnas y una de las celdas ocupa 2 de ellas, ¿¿¿Cuántos TD necesito??? 4
Taller de HTML

Ejemplo 1
<table border="1" bordercolor=red>
<tr>
<td rowspan=3> Ocupa tres filas</td>
<td> F1C2</td>
</tr>
<tr>
<td> F2C2</td>
</tr>
<tr>
<td> F3C2</td>
</tr>
</table>
Taller de HTML

Ejemplo 2
<table border="1" bordercolor=red>
<tr>
<td colspan=2> Ocupa dos
columnas</td>
</tr>
<tr>
<td> F2C1</td>
<td> F2C2</td>
</tr>
<tr>
<td> F3C1</td>
<td> F3C2</td>
</tr>
</table>
Taller de HTML

Otro ejemplo de combinación de celdas
62
Taller de HTML
<table width="575" border="2"
cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">DIFERENCIAS ENTRE
EL PERRO Y EL HOMBRE</th>
</tr>
<tr align="center"
valign="middle">
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<tr align="center"
valign="middle">
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>

Continuación código del ejemplo
<td>Duracion crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<td>Tiempo de gestacion</td>
<td colspan="2">58 a 63 dias</td>
<td>9 meses</td>
</tr>
<td>Duracion de vida del pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 años</td>
</tr>
</table>
Taller de HTML

EJERCICIO
64
Realizar la siguiente tabla
Taller de HTML

Sesión 2 ESTRUCTURA DE UNA PAGINA WEB 2025

Más contenido relacionado

Similar a Sesión 2 ESTRUCTURA DE UNA PAGINA WEB 2025

Último

Sesión 2 ESTRUCTURA DE UNA PAGINA WEB 2025