ESTRUCTURA HTML
[Link]
documento-html
<HTML>
<HEAD>
<TITLE> Mi pagina en el Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera Pagina </CENTER> </H1>
<HR>
Esta es mi primera página, aunque todavía es muy sencilla.
Como él lenguaje HTML no es difícil, pronto estaré en condiciones de
hacer cosas más interesantes.
<P> Aquí va un segundo párrafo, que les parece.
</BODY>
</HTML>
Una etiqueta puede estar anidada dentro de otra. En el ejemplo anterior cómo lo está la
etiqueta <CENTER> dentro de la etiqueta <H1>.
Cuando queremos poner un texto sin ninguna característica especial, lo ponemos
directamente. Únicamente, la separación entre párrafos (dejando una línea en blanco) la
conseguimos con la etiqueta <P>.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en
blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta
de cierre.
Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras
observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo
haga, debemos poner el código " " (non-breaking space).
Para destacar alguna parte del texto se pueden usar:
<B> y </B> para poner algo en negrita (bold).
<I> y </I> para poner algo en cursiva (italic).
Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella
estará preformateado, es decir que aparecerá como si hubiera sido escrito con una
máquina de escribir, con una fuente de espaciado fijo (tipo Courier). Además se
respetarán los espacios en blanco y retornos del carro, tal como estaban en nuestro
documento HTML. Es muy apropiada para confeccionar tablas y otros documentos
similares.
Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño
menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La
diferencia con la anterior es que no preformatea el texto, sino que únicamente cambia su
apariencia.
La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para
destacar una cita textual dentro del texto general. Este párrafo está escrito
entre ambas etiquetas. Obsérvese los márgenes a ambos lados
En las fórmulas matemáticas puede interesar poder escribir índices y subíndices, que se
consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente.
A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre
tres tipos distintos:
Listas desordenadas (no numeradas)
Listas ordenadas (numeradas)
Listas de definición.
Las listas desordenadas (Unordered Lists) sirven para presentar cosas que, por no tener
un orden determinado, no necesitan ir precedidas por un número. Su estructura es la
siguiente:
<UL>
<LI> Un elemento
<LI> Otro elemento
<LI> Otro más
<LI> etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada elemento
va precedida de la etiqueta <LI> (list ítem). El resultado de lo anterior es el siguiente:
Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamíferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Las listas ordenadas (Ordered Lists) sirven para presentar elementos en un orden
determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en
el resultado aparecerá automáticamente un número correlativo para cada elemento.
<OL>
<LI> Primer Elemento
<LI> Segundo Elemento
<LI> Tercer Elemento
<LI> etc.
</OL>
Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
El tercer tipo lo forman las listas de definición. Como su nombre indica, son apropiadas
para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las
etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de
la lista tiene dos partes:
El nombre de la cosa a definir, que se consigue con la etiqueta <DT>
(definition term).
La definición de dicha cosa, que se consigue con la etiqueta <DD>
(definition definition).
<DL>
<DT> Una cosa a definir
<DD> La definición de esta cosa
<DT> Otra cosa a definir
<DD> La definición de esta otra cosa
</DL>
Comentarios no visibles en la pantalla
A veces es muy útil escribir comentarios en el documento HTML sobre el código que
escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y
que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y -->
EJEMPLO:
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis aficiones </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> aficiones </B> son las siguientes:
<!-- Una lista sin orden alguno -->
<UL>
<LI> El cine
<LI> El deporte
<UL>
<LI> Natación
<LI> Baloncesto
</UL>
<LI> La música
</UL>
La música que más me gusta es <I> (en orden de preferencia): </I>
<!-- Una lista con un orden -->
<OL>
<LI> El rock
<LI> El jazz
<LI> La música clásica
</OL>
</BODY>
</HTML>
[Link]
HTML no es sensible a mayúsculas y minúsculas. En otros lenguajes de la familia
HTML, como WML para teléfonos móviles, es obligatorio escribir los nombres de
etiquetas y atributos en minúsculas, poner etiquetas de cierre en elementos no
vacios y poner los valores de los atributos entre comillas dobles, así que podemos ir
aplicando estas reglas.
El elemento <META>:
Este elemento se sitúa dentro de la cabecera <HEAD>, y con él se puede dar
información sobre el documento. Sus atributos son:
name = nombre. Este atributo identifica un nombre de propiedad.
content = cadena de caracteres. Este atributo especifica el valor de una
propiedad.
scheme = cadena de caracteres. Este atributo especifica un esquema que
se usará para interpretar el valor de la propiedad
http-equiv = nombre. Este atributo puede utilizarse en lugar del atributo
name. Los servidores HTTP utilizan este atributo para obtener información
sobre los encabezados del mensaje de respuesta HTTP.
lang = cdata. Este atributo se usa para especificar un idioma.
Ejemplos de su uso:
Información sobre el autor y el contenido:
<META name="Beatriz Prieto" content="Introduccion al HTML " lang="esp">
Para especificar palabras clave que pueden usar los motores de búsqueda para
mejorar la calidad de los resultados de una búsqueda. Por ejemplo:
<META name="keywords" lang="es" content="vacaciones, España, sol, playa">
El elemento META puede utilizarse para especificar el lenguaje de los scripts por
defecto, el lenguaje de hojas de estilo por defecto y la codificación de caracteres del
documento.
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">