Estructura de Una Pagina

Estructura de una página web
Una página web mantiene siempre la misma estructura, consistente en dos partes:
 La cabecera de la página, donde se definen algunos datos que no se

representan cuando se ve la página, como información sobre el título de la
página, el autor de la página, editor con el que se ha creado la página,
juego de caracteres que debe usar para representar la página, etc. Por
ejemplo:
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="GENERATOR" content="Microsoft FrontPage 4.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<META name="Autor" content="Nombre del autor">
<TITLE>Título de la página</TITLE>
</HEAD>
Todo lo definido entre las etiquetas <HEAD> .... </HEAD> conforma la cabecera
del documento.
Entre los elementos de la cabecera hay que destacar el elemento <TITLE>, que es
obligatorio, e indica el título de la página. Este título es utilizado por los
navegadores visuales para dar nombre a la ventana en la que se está viendo la
página.
 El cuerpo del documento, donde se define el contenido visible de la página

web. Por ejemplo:
<BODY>
Este es el cuerpo de la página
</BODY>
Al igual que para la cabecera, todo lo definido entra las etiquetas <BODY> ...
</BODY> constituye el cuerpo de la página.
Además, existe otra etiqueta (<HTML>) que sirve para indicar donde comienza y
termina la página web. De esta forma, la estructura completa de la página web
sería:
<HTML>
<HEAD>
.........
</HEAD>
<BODY>
.........
</BODY>
</HTML>
Los editores de páginas web nos ahorran mucho trabajo ya que sólo con
seleccionar la opción de crear una nueva página, han escrito automáticamente
todas la etiquetas que definen la estructura del nuevo documento. En el caso de
Front Page se crea una nueva página pulsando sobre el icono
A partir de aquí veremos los elementos básicos que podemos poner en una
página web, con las características que se pueden definir sobre cada uno de ellos,
así como la forma en que se especifican estas características en Front Page.
1. TITLE
Como ya se ha dicho es una frase que indica el título que va a tener la página.
Dentro de Front Page, pulsando con el botón derecho del ratón sobre cualquier
parte de la página aparecerá un menú en el que seleccionando Propiedades de la
página... se muestra el siguiente cuadro de opciones:
Rellenando la casilla Título establecemos el nuevo título que deseamos que tenga
la página.
2. BODY
Como características generales del cuerpo de una página se pueden especificar

las siguientes (entre paréntesis aparece el nombre del atributo HTML que define la
característica en cuestión):
 Color de fondo de la página (BGCOLOR)

 Gráfico de fondo (BACKGROUND)
 Color predeterminado del texto de la página (TEXT)
 Color predeterminado de los hiperenlaces no visitados (LINK)
 Color predeterminado de los hiperenlaces visitados (VLINK)
 Color predeterminado de los hiperenlaces activos (ALINK)
Al igual que para el título, seleccionando Propiedades de la página..., pero en esta

ocasión seleccionando las opciones de Fondo obtenemos el cuadro de opciones
que se muestra seguidamente.
Si se desea que la página tenga una imagen de fondo (es decir que el atributo
BACKGROUND tenga un valor) hay que activar la casilla Imagen de fondo,
especificando en el cuadro, dónde se encuentra el archivo que tiene la imagen que
se quiera como fondo de la página (en las páginas web sólo usaremos los
formatos GIF, JPEG o PNG).
Es necesario comprender en este punto que la imagen que se especifique es un
elemento externo a la página web. Es decir, en el documento escrito en HTML
únicamente va una referencia al lugar en el que encontrar la imagen, pero no va la
imagen. Si cargamos la página con el navegador y el fichero que contiene la
imagen no se encuentra en el sitio al que apunte la referencia, la imagen no se
mostrará en pantalla.
El color de fondo se especifica seleccionando un color en la opción Fondo.
El color del texto se especifica seleccionando un color en la opción Text.
El color de los hiperenlaces no visitados se indica en la opción Hipervínculo.
El color de los hiperenlaces visitados se indica en la opción Hipervínculo visitado.
El color de los hiperenlaces activos se indica en la opción Hipervínculo activo.
3. Características generales del texto
Al igual que en programas de tratamiento de textos como Word o Wordperfect, en

HTML es posible definir diversas características sobre el texto de una página web.
Entre estas características se incluyen, entre:
 Fuente: etiqueta <FONT>, atributo FACE. Si la fuente que se indica no

existiera en el ordenador desde el que se esté visualizando la página se
aplicaría la fuente por defecto que tenga definida este navegador.
 Tamaño de la fuente: etiqueta <FONT>, atributo SIZE
 Color de la fuente: etiqueta <FONT>, atributo COLOR
 Negrita: etiqueta <B> o <STRONG>
 Cursiva: etiqueta <EM> o <I>
 Subrayado: etiqueta <U>
 Subíndice: etiqueta <SUB>
 Superíndice: etiqueta <SUP>
Para indicar en Front Page estas opciones se selecciona el trozo de texto sobre el
que se desean aplicar, y nuevamente pulsando con el botón derecho del ratón
sobre la selección realizada se pulsa sobre Fuente..., obteniendo el cuadro de la
figura:
4. Encabezados
En HTML existen 6 tipos de encabezados predefinidos, que los navegadores

visualizan de una forma determinada. Estos encabezados se indican en HTML por
las etiquetas <H1>...</H1>, <H2>...</H2>, ...
En Front Page se selecciona el texto que se desee que tenga un encabezado en
concreto y se elige el tipo de encabezado pulsando en la opción:
5. Listas
Existen distintos tipos de listas en HTML. Los más usados:
 Con viñetas:
Código HTML Representación en el navegador

<UL>
<LI>Elemento 1</LI>  Elemento 1
<LI>Elemento 2</LI>  Elemento 2
...  ...
</UL>
 Numeradas

<OL>
<LI>Elemento 1</LI>  1. Elemento 1
<LI>Elemento 2</LI>  2. Elemento 2
...
 3. ...
</OL>
 De definiciones

<DL>
<DT>Término 1</DT> Término 1
<DD>Definición del término 1</DD> Definición del término 1
<DT>Término 2</DT> Término 2
<DD>Definición del término 2</DD> Definición del término 2
... ...
</DL>
En Front Page se seleccionan las líneas que se desea que compongan la lista y se
escoge algún formato de lista predefinido con:
Si queremos cambiar el tipo de lista, podemos seleccionar nuevamente sobre la
lista que hay en pantalla con el botón derecho del ratón y elegimos propiedades de
la lista, llegando al siguiente cuadro de opciones:
donde podemos configurar la lista deseada.
6. Tablas
Las tablas son un poderoso medio de distribución de los elementos de una página
web por toda la pantalla.
Una tabla no es más que un conjunto de filas, compuesta cada una de ellas por
una serie de celdas. En cada celda de la tabla se pueden poner los elementos de
HTML que se deseen, en concreto, dentro de una celda se pueden incluir nuevas
tablas.
Dentro de las características que definen una tabla hay que distinguir aquellas que
hacen referencia a la tabla como un elemento completo, de aquellas otras que se
refieren a las celdas individuales de la tabla.
En el primer grupo de propiedades se pueden mencionar:
 Alineación de la tabla: Indica si la tabla se alineará a la izquierda, al centro

o a la derecha del elemento en el que está contenida.
 Margen de las celdas: Margen de separación del contenido de la celda con
respecto al borde de la celda.
 Espaciado entre celdas: Separación que van a tener unas celdas de otras.
 Tamaño de los bordes: Qué grosor va a tener el borde.
 Color de los bordes.
 Color de fondo de la tabla.
 Imagen de fondo de la tabla: Es el mismo concepto que indicar una
imagen de fondo para la página, sólo que en este caso se aplica
exclusivamente a la tabla.
Entre las propiedades de cada celda podremos indicar:
 Si es celda de encabezado: Las celdas de encabezado ya tienen un

formato particular de visualización en los navegadores.
 Alineación horizontal: Describe si el contenido de la celda se alineará a la
izquierda, al centro o a la derecha.
 Alineación vertical: Describe si el contenido de la celda se alineará a la
parte superior, al medio o al inferior de la celda.
 Ancho y alto de la celda.
 Color de fondo.
 Imagen de fondo.
Para insertar una tabla en Front Page se selecciona el menú Tabla, eligiendo la
opción Insertar ---> Tabla. Tras esto se indica el número de filas y columnas que
vaya a tener la tabla.
Para especificar las propiedades generales de la tabla o las particulares de una
celda en concreto, se pulsa con el botón derecho sobre cualquier parte de la tabla
o de la celda en cuestión, seleccionando Propiedades de la tabla... o Propiedades
de la celda..., respectivamente. Se obtienen los siguientes cuadros de opciones:
Cuadro de propiedades de la tabla
Cuadro de propiedades de la celda

El código HTML correspondiente a una tabla sería:
<table border="1" width="100%" border=1>

<tr> Celda 1 Fila 1 Celda 2 Fila 1
<th width="50%">Celda 1 Fila 1</th> Celda 1 Fila 2 Celda 1 Fila 2
<th width="50%" align=right>Celda 2 Fila 1</th>
</tr> Celda 1 Fila 3 Celda 2 Fila 3
<tr>
<td width="50%" align=center>Celda 1 Fila
2</td>
<td width="50%">Celda 2 Fila 2</td>
</tr>
<tr>
</tr>
</table>
Con las celdas de una tabla se pueden realizar siguientes operaciones:
 Combinación: Se seleccionan varias celdas contiguas para formar una sola

celda.
 División: Un celda se subdivide en varias celdas
 Eliminación de celdas.
 Inserción de filas.
La especificación de medidas (ancho y alto) se puede realizar tanto en píxels
como en porcentajes. Se usan píxels si queremos una medida absoluta,
independiente del tamaño de la pantalla. Usaremos porcentajes como medidas
relativas a las dimensiones de la ventana del navegador que estemos usando para
ver la página.
7. Imágenes
Otro de los elementos que se pueden encontrar en una página web son las
imágenes, que como ya se ha mencionado con anterioridad, deben ser en formato
GIF, JPEG o PNG.
El formato GIF ofrece la posibilidad de escoger un color de la imagen como
transparente y la posibilidad de utilizar el formato GIF animado, mientras que el
formato JPEG permite disponer de imágenes de calidad pero que, usando un
grado de compresión mayor, ocupan menos espacio que con otros formatos.
Hay que tener presente que las imágenes son elementos externos a la página
escrita en HTML. Es decir, los gráficos que aparecen en una página se almacenan
en ficheros independientes del documento HTML. En el documento HTML sólo
aparecen etiquetas con atributos, cuyos valores hacen referencia a la ubicación de
los ficheros que contienen los gráficos.
Es importante tener en cuenta cuando se crea una página web con muchos
gráficos, que quien se vaya a conectar a esta página va a tener que descargar
tanto el documento HTML como los ficheros de los gráficos que estén
referenciados en ella. Por lo tanto, si ponemos excesivo número de gráficos o
gráficos cuyos ficheros ocupan demasiado espacio en disco, la descarga de la
página completa a través de Internet puede resultar demasiado lenta.
Dentro de un documento HTML podemos insertar una imagen en cualquier

elemento de los definidos con anterioridad (dentro de una tabla, dentro de un
elemento de una lista, etc...).
La etiqueta HTML que denota la inserción de una imagen es <IMG>. no tiene

etiqueta de cierre, y tiene como atributo fundamental SRC, que sirve para
especificar la ubicación del fichero donde está almacenada la imagen (Ver el
epígrafe de enlaces para más información sobre como especificar una URL).
Si se especifican los atributos WIDTH y HEIGHT, estamos indicando unas
dimensiones distintas a las dimensiones reales de la imagen.
Para insertar una imagen en Front Page pulsamos en
Obtenemos el siguiente cuadro donde se pide la ubicación del fichero que

contiene la imagen en disco:
Una vez que tengamos la imagen en la página, se puede pulsar con el botón
derecho del ratón sobre ella y seleccionar la opción Propiedades de la imagen...
para perfilar todas las características, obteniendo:
Es importante indicar que para cada imagen que se incluya en una página se le
debe dar un valor al atributo ALT, cuyo significado es el de mostrar una
representación alternativa a la imagen, sobre todo, teniendo en cuenta la
existencia de navegadores que funcionan en entornos no visuales y que, por lo
tanto, no tienen la posibilidad de mostrar imágenes.
8. Enlaces (Links)
Quizás lo más destacado de una página web es la posibilidad de incluir enlaces

(también llamados links, hiperenlaces o hipervínculos) a otras páginas, otros
objetos e incluso a otros servicios de Internet.
En realidad los enlaces se hacen a otro recurso de Internet, y HTML proporciona
un medio común de especificar todos estos recursos, aunque sean de distinta
índole. Este medio es a través de lo que se llama una URI (Universal Resource
Identifier o Identificador de Recursos Universal).
Una URI consta de tres partes:
 Esquema de nominación o mecanismo usado para acceder al recurso.

Entre los esquemas de nominación podemos encontrar:
http Para un recurso del Web

ftp Para un recurso alojado en un servidor Web
mailto Para referirse a una dirección de correo
news Para referirse a un servidor de grupos de noticias
telnet Para conexión con un servidor a través del servicio de Terminal Virtual
 El nombre de la máquina que sirve ese recurso.

 El nombre del recurso como tal, expresado como un path (como camino
donde está ese recurso en el servidor)
Centrándonos en los enlaces a otros recursos alojados en páginas web, hay que
distinguir entre dos formas de especificar un enlace:
 De forma absoluta: Hay que indicar todas las partes de la URI. Por ejemplo
http://www.uma.es/servicios/
 De forma relativa: La ubicación del recurso enlazado está en el mismo
servidor en el que está la página en la que reside el enlace. La forma de
especificar el camino del recurso enlazado es a partir del directorio en el
que reside la página donde está el enlace, siguiendo una notación similar a
la de MS-DOS para identificar los caminos donde residen los ficheros. Por
ejemplo: ../../dibujos/fondo.gif , que indica que el recurso está dos
directorios por encima de donde se encuentre la página donde esté este
enlace, y, dentro de él, en un subdirectorio llamado dibujos.
En el caso de un enlace a una página web, también existe la posibilidad de indicar

un enlace que salte no a una página determinada sino a un punto determinado
dentro de una página. Para poder hacer esto, HTML tiene la posibilidad de insertar
marcadores en distintos puntos de una página. Estos marcadores no son más que
determinados puntos de la página a los que se le ha dado un identificador.
En Front Page, los marcadores se crean seleccionando el menú Insertar ®

Marcador....
Una referencia a un marcador de una página sería de la forma

http://cdrombbl.uma.es/index.html#Introduccion , donde el nombre que se le ha
dado al marcador es Introducción. El carácter # indica que lo que viene a
continuación es un marcador. Si no existe el marcador en la página, pero sí existe
la página, el enlace salta al principio de la página.
Un enlace se puede hacer sobre cualquier objeto de una página web. En Front
Page se haría seleccionando el objeto sobre el que se desea el enlace y después
pulsando en
En el cuadro que obtenemos sólo hay que rellenar el cuadro con el URI al que se
desea que el enlace vaya destinado.
La etiqueta HTML que se usa para definir un enlace o un marcador es <A>. En

esta etiqueta, el atributo HREF indica la URI del enlace. Como se indicó antes, la
URI no tiene por qué representar exclusivamente a otra página web sino que
puede indicar por ejemplo un documento en PDF o un archivo ZIP, etc...
Por otra parte, el atributo NAME se utiliza para establecer un marcador en la
página.
http://webpersonal.uma.es/~RGARCIAF/paginas/estructura_de_una_pagina_web.
htm
http://www.rafelsanso.com/la-estructura-de-una-pagina-web/
https://disenowebakus.net/domine-html-y-dhtml-primeros-pasos.php

Estructura de Una Pagina

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Estructura de Una Pagina

Cargado por

Copyright:

Formatos disponibles

Estructura de una página web

 La cabecera de la página, donde se definen algunos datos que no se

 El cuerpo del documento, donde se define el contenido visible de la página

Como características generales del cuerpo de una página se pueden especificar

 Color de fondo de la página (BGCOLOR)

Al igual que para el título, seleccionando Propiedades de la página..., pero en esta

3. Características generales del texto

Al igual que en programas de tratamiento de textos como Word o Wordperfect, en

 Fuente: etiqueta <FONT>, atributo FACE. Si la fuente que se indica no

En HTML existen 6 tipos de encabezados predefinidos, que los navegadores

Existen distintos tipos de listas en HTML. Los más usados:

Código HTML Representación en el navegador

Código HTML Representación en el navegador

Código HTML Representación en el navegador

En el primer grupo de propiedades se pueden mencionar:

 Alineación de la tabla: Indica si la tabla se alineará a la izquierda, al centro

Entre las propiedades de cada celda podremos indicar:

 Si es celda de encabezado: Las celdas de encabezado ya tienen un

Cuadro de propiedades de la tabla

Cuadro de propiedades de la celda

<table border="1" width="100%" border=1>

Con las celdas de una tabla se pueden realizar siguientes operaciones:

 Combinación: Se seleccionan varias celdas contiguas para formar una sola

Dentro de un documento HTML podemos insertar una imagen en cualquier

La etiqueta HTML que denota la inserción de una imagen es <IMG>. no tiene

Para insertar una imagen en Front Page pulsamos en

Obtenemos el siguiente cuadro donde se pide la ubicación del fichero que

Quizás lo más destacado de una página web es la posibilidad de incluir enlaces

 Esquema de nominación o mecanismo usado para acceder al recurso.

http Para un recurso del Web

 El nombre de la máquina que sirve ese recurso.

En el caso de un enlace a una página web, también existe la posibilidad de indicar

En Front Page, los marcadores se crean seleccionando el menú Insertar ®

Una referencia a un marcador de una página sería de la forma

La etiqueta HTML que se usa para definir un enlace o un marcador es <A>. En

También podría gustarte