Mini-manual
con los elementos básicos de HTML
El lenguaje HTML es el lenguaje con el que se escriben las
páginas web y que entienden los navegadores, de modo que quede
determinada la forma en que mostrar la información (qué
tipos, tamaños y colores de las letras, dónde colocar las
imágenes, cómo enlazar a otras páginas, ...).
Estructura
de una página web
código | <html>
<head>
<title>Primera pagina de
Pepe</title>
</head>
<body>
Ésta es la primera página de Pepe
</body>
</html> |
título |
Primera
pagina de Pepe |
visualización |
Ésta
es la primera página de Pepe |
<HTML> …
</HTML>
Delimita y engloba toda la página web, que consta de
cabecera y cuerpo.
<HEAD> … </HEAD>
Delimita y engloba la cabecera de una página, que contiene
un
conjunto de informaciones que no se muestran en la ventana, entre ellas
el título de la página, pero que pueden ayudar a
los
navegadores y a los buscadores para interpretar o a encontrar
correctamente la página.
<TITLE> … </TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aquí se
muestra en la barra del título de la ventana del navegador.
Metadatos
La cabecera admite otras muchas etiquetas (ver
apuente 6 y 6.1.)
<BODY> … </BODY>
Delimita y engloba el cuerpo de la página, que son el
conjunto
de informaciones (texto e imágenes) que se muestran en la
página, así como las indicaciones de
cómo deben
mostrarse.
Admite atributos (ver
jac 8 y apuente 5.3 y 14.3).
Formatos
de párrafo
El texto de la página se puede estructurar en
encabezamientos de
los diferentes apartados de la página, que pueden tener
distintos niveles de 1 a 6 (siendo 1 el más importante) y
párrafos normales.
<H1> ... </H1> o
<H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se
puede
aplicar igual a las etiquetas <H1>, <H2>,
etc ...
<BR>
Permite partir un párrafo empezando una línea
nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos) (ver
apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
Formatos
de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como
su tamaño y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a
un grupo de caracteres:
Formatos Físicos:
- Negrita:
<B>…</B>
- Cursiva:
<I>…</I>
- Subrayado:
<U>…</U>
- Teletipo:
<TT>…</TT>
- Tachado:
<STRIKE>…</STRIKE>
- Grande:
<BIG>…</BIG>
- Pequeña:
<SMALL>…</SMALL>
- Superíndice:
<SUP>…</SUP>
- Subíndice:
<SUB>…</SUB>
Formatos Lógicos:
- Cita:
<CITE>…</CITE>
- Código:
<CODE>…</CODE>
- Definición:
<DFN>…</DFN>
- Énfasis:
<EM>…</EM>
- Grueso:
<STRONG>…</STRONG>
- Palabras
clave:
<KEY>…</KEY>
- Ejemplos:
<SAMP>…</SAMP>
- Usuario:
<KBD>…</KBD>
- Variables:
<VAR>…</VAR>
- Ejemplo
literal:
<XMP>...</XMP> (ignora las etiquetas HTML
de dentro)
Posibilidad de combinar etiquetas (anidándolas,
esto es, una
dentro de otra):
- <B>…<I>…</I>…</B>
(Correcto)
- <B>…<I>…</B>…</I>
(Incorrecto)
<FONT COLOR="red"> ...
</FONT>
Indicación expresa del tipo de letra a usar, en este caso el
color (ver
jac 8.2)
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el
tamaño (ver
jac 8.1-segunda
parte)
La etiqueta FONT permite combinaciones cualesquiera de los
atributos
COLOR, SIZE y FACE
Caracteres
especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden
representar directamente en un documento HTML, puesto que forman parte
del propio vocabulario del lenguaje, como por ejemplo los
símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de
puntuación deben ser especificados de forma distinta, puesto
que
los navegadores pueden no entender el código del
carácter
utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
- á
á
- é
é
- í
í
- ó
ó
- ú
ú
- à
à
- ñ
ñ
- <
<
- >
>
- &
&
- ç
ç
- "
“
-
espacio
en blanco
(ver
apuente 10.1)
Listas
(ver
apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
Enlaces
Sirven para acceder desde una página a otra
página o a otro recurso disponible (ver
apuente 15).
<a href="http://servidor/recurso.html">texto
del
enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del
enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del
enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del
enlace</a>
Enlace a un marcador de otra página (que puede darse con
dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto
del
enlace</a>
Enlace a otra página (absoluta o relativa, con o sin
marcador) que se abra en otra ventana.
Imágenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos (ver
apuente 14).
Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto
de la página.
(ver
apuente 11.1)
Enlaces
de interés de
referencia