Todos los documentos Html
tienen la estructura que se muesta a continuación, aunque la
etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen
la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
Vamos a analizar más detenidamente las
distintas secciones que componen la página
Entre las
etiquetas
<html> y
<head> se suelen colocar otras
opcionales, como por ejemplo:
<meta
name="description" content="Información
sobre el Centro,las enseñanzas que se pueden cursar, los
departamentos didácticos">
<meta name="keywords"
content="educación,enseñanza,instituto,
profesores, alumnos">
En este caso las etiquetas le indican a los buscadores el
contenido de nuestras páginas (description) y algunas
palabras clave (keywords) para su localización.
La
cabecera
es la sección comprendida entre
<head>
y
</head>. En ella se
encuentra necesariamente el título (entre las etiquetas
<title> y
</title>).
El título de la página debe describir su contenido
por ejemplo:
<TITLE>Colegio
Público de Villamañán - Ámbito de Influencia -
</TITLE>
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si
solo
Dentro de la cabecera también se suele
incluir código en JavaScript, que se reconoce porque va
comprendido entre las etiquetas
<script
language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>
El
cuerpo
(body) del documento html es normalmente lo más importante.
Es aquí donde debemos colocar el contenido de nuestra
página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas
<body> y
</body> La etiqueta <body> suele contener
algunos atributos, a saber:
BGCOLOR parámetro usado para especificar el
color de fondo de la página. El color se define como una
terna de números (#rrggbb) en base hexadecimal en
el orden rojo, verde, azul (Red, Green, Blue). También
se puede usar el nombre en inglés de los colores
predefinidos en los navegadores.
Sintaxis: <BODY
BGCOLOR=#0000FF> o <BODY
BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con
#rrggbb la puedes encontrar en: Paleta
de Colores
TEXT, parametro usado para definir el color del
texto por omision. Su formato es el mismo que el de
BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parámetros usados para
especificar el color por omision de: texto con enlace,
enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y
ALINK=red. El formato es el mismo que BGCOLOR.
BACKGROUND, parámetro usado para especifica la
ruta y nombre de archivo (URL) de la imagen que será
usanda como fondo del documento. Esta se verá como
mosaico para cubrir toda la ventana si es pequeña (lo
habitual).
Sintaxis: <BODY
BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta
de modo relativo, esto quiere decir que si cambiamos el
directorio completo donde están nuestras páginas, desde
C:\ a C:\webs por
ejemplo, la ruta
especificada debe seguir siendo válida.
Por ejemplo si
la página desde la que hacemos el enlace se 
encuentra
en el directorio Aprendiendo Html
y queremos poner como fondo la imagen fondo.gif,
que se encuentra en gifs, se debe
poner:
<BODY
BACKGROUND="gifs/fondo.gif">
Si la página estuviese en ejemplos se
pondría:
<BODY
BACKGROUND="../gifs/fondo.gif">
Títulos
Los títulos o encabezamientos se emplean al comienzo de
una sección. Las etiquetas que se usan son:
| Etiqueta |
Se ve |
| <h1> Título </h1> |
Título
|
| <h2> Título </h2> |
Título
|
| <h3> Título </h3> |
Título
|
| <h4> Título </h4> |
Título
|
| <h5> Título </h5> |
Título
|
| <h6> Título </h6> |
Título
|
Estilos de fuentes
Como ves en la tabla es muy sencillo
conseguir los efectos deseados, solamente tienes que colocar
el texto entre las etiquetas adecuadas.
| Etiqueta |
Se ve |
- <B>Texto en
Negrita</b>
- <I>Itálica</i>
- <B><I>Negrita
e Itálica</i></b>
- <U>Subrayado</u>
- <EM>Enfatizado</em>
- <STRONG>Fuerte</strong>
- <CODE>Code
Texto</code>
- <CITE>
Citation Text</cite>
- <KBD>Keyboard
Text</kbd>
- <SAMP>Sample
Text</samp>
- <TT>Teletype
Text</tt>
- <VAR>Variable
Element Text</var>
- <BIG>Texto
grande</big>
- <SMALL>Texto
pequeño</small>
- <SUB>Subindice</SUB>
- <SUP>Superíndice</SUP>
- <BLINK>
Texto intermitente</blink>
- <STRIKE>Texto
tachado</STRIKE>
|
- Texto en Negrita
- Itálica
- Negrita e Itálica
- Subrayado Solo
Explorer
- Enfatizado
- Fuerte
Code Texto - Citation Text
- Keyboard Text
- Sample Text
- Teletype Text
- Variable Element Text
- Texto grande
- Texto pequeño
- Subíndice Solo
Explorer
- Superíndice Solo
Explorer
- Texto intermitente Solo Netscape
Texto tachado
|
