¿QUE ES EL LENGUAJE HTML?
El lenguaje HTML, es la escritura de instrucciones que permiten la
creación de páginas Web, las cuales son visualizadas por los
navegadores y que permiten mostrar imágenes, enlaces, texto, etc,
en Internet.
El principio esencial del lenguaje HTML (HyperText Markup
Language) es el uso de las etiquetas (tags).
Las tags, son marcas de inicio y fin, que le indican al visualizador
donde debe resaltar, marcar, centrar, editar o incorporar enlaces
(links) de páginas Web.
El lenguaje HTML, son un número limitado de comandos o palabras
“clave”, que el usuario o diseñador debe conocer y aprender, para
elaborar correctamente una página, cumpliendo con normas y
estándares ya establecidos para dicho diseño.
PAGINA BASICA
Las cuales funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas,
indiferentemente.
Por claridad, se recomienda el uso de las letras mayúsculas.
Lo que haya entre ambas etiquetas estará influenciada por ellas.
Por ejemplo: Todo el documento HTML debe estar entre las
etiquetas:
<HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí, está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas:
<HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas:
<BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no
se ve en la pantalla principal, principalmente el:
El título del documento, comprendido entre las etiquetas:
<TITLE> y </TITLE>.
El título debe ser breve y descriptivo de su contenido, pues será lo
que vean los demás cuando añadan nuestra página a su bookmark
(o agenda de direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la
pantalla principal (texto, imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Antes de crear nuestra primera página, unas consideraciones sobre
el texto:
Cuando escribimos en el documento el texto que queremos que
aparezca en la pantalla, veremos que éste se acomoda a ella, sin
que tengamos que pulsar el retorno del carro.
Si queremos separar el texto en distintos párrafos debemos usar la
etiqueta <P>, (no tiene su correspondiente etiqueta de cierre </P>).
El texto puede tener unas cabeceras, comprendidas entre las
etiquetas:
<H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el
número indicativo del tamaño.
El tamaño mayor es el correspondiente al número 1. Puedes
experimentar en el ejemplo que sigue, cambiando el número para
comprobar el efecto que se logra.
Una etiqueta muy interesante es la de centrado:
<CENTER> y </CENTER>
(no la soportan todos los navegadores, aunque sí la mayoría de ellos).
Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes,
etc.
También tenemos los separadores (horizontal rules), que se
consiguen con la etiqueta:
<HR> (no existe la correspondiente de cierre).
Con ella se obtiene una raya horizontal tan ancha como la pantalla, y
con la apariencia de estar embutida sobre el fondo, como se puede
observar a continuación:
EJERCICIO
En un procesador de texto (como WordPad) copiamos lo siguiente:
<HTML>
<HEAD>
<TITLE> Mi pagina Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavía es muy sencilla. (Escribir
nombres y apellidos completos, código de estudiante y programa
académico al que pertenece y el semestre).
<P> Aquí va un segundo párrafo.
</BODY>
</HTML>
¿COMO GUARDAR EL ARCHIVO?
Una vez acabado de introducir el texto lo guardamos de la siguiente
manera:
Menú Archivo opción Guardar como...
Le asignamos un nombre y le ponemos nosotros la extensión htm o
html
Ejemplo: mipag1.htm
Y en la opción de Guardar como tipo elegimos:
En vez de Word para Windows, es la que nos da por defecto,
Documento de texto (este paso es muy importante, ya que si no lo
hacemos así saldrán caracteres raros cuando lo veamos en el
Explorador).
Una vez guardado arrancamos Mozilla o Netscape, seleccionamos
menú Archivo-Abrir y buscamos el fichero que acabamos de
guardar, con lo que tenemos en pantalla el primer ejercicio en HTML
En sucesivas ocasiones, cuando modifiquemos el archivo en el
procesador de texto y lo volvamos a guardar (sin cerrar ni el
procesador ni el Navegador) para ver las modificaciones o cambios
realizados al archivo únicamente pulsaremos en el Navegador el
botón Actualizar.
Las líneas en blanco y las indentaciones del texto se han puesto
para mayor claridad, pero no son necesarias. De hecho, podría estar
todo en una sola línea.
Lo importante es el orden correcto de las etiquetas. Por cierto, una
etiqueta puede estar anidada dentro de otra.
Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de
la etiqueta <H1>.
Es muy importante, en estos casos, que las etiquetas de inicio y de
cierre vayan en el orden correcto, pues de lo contrario se producirían
errores.
Faltan los acentos. Se hablará más adelante sobre el motivo de ello.
Habrá un fichero distinto para cada capítulo; conviene crear un
directorio específico e irlos guardando en él, para poder repasar lo
aprendido, aparte de que pueden ser necesarios para ejecutar otros
ejemplos prácticos.
FORMA AL TEXTO
Como hemos visto en el ejemplo anterior, 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.
Si queremos obtener múltiples líneas en blanco no basta con
repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta
<BR>.
Así por ejemplo, si queremos obtener cuatro líneas en blanco,
pondríamos:
<BR><P>
<BR><P>
<BR><P>
<BR><P>
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 (lo cual no ocurre
normalmente, como hemos visto anteriormente).
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.
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.
Ejemplo:
m2 se consigue de la siguiente manera: m <SUP> 2 </SUP>
vx se consigue con: v <SUB> x </SUB>
A menudo nos interesará presentar las cosas en forma de listas.
Podemos escoger entre tres tipos distintos:
1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. 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> Una cosa
<LI> Otra cosa
<LI> Otra más
<LI> Etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y
luego cada elemento va precedido de la etiqueta <LI> (list item).
El resultado de lo anterior es el siguiente:
• Una cosa
• Otra cosa
• Otra más
• Etc.
Se puede anidar una lista dentro de otra. Ejemplo:
<UL>
<LI> Mamíferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Que daría el siguiente resultado:
• Mamíferos
• Peces
• Sardina
• Bacalao
• Aves
Las listas ordenadas (ordered lists) sirven para presentar cosas 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 cosa.
<OL>
<LI> Primera cosa
<LI> Segunda cosa
<LI> Tercera cosa
<LI> Etc.
</OL>
El resultado es:
1. Primera cosa
2. Segunda cosa
3. Tercera cosa
4. Etc.
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:
1) El nombre de la cosa a definir , que se consigue con la etiqueta
<DT> (definition term).
2) 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>
Su resultado es:
Una cosa a definir
La definición de esta cosa
Otra cosa a definir
La definición de esta otra cosa
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:
<!-- Esto es un comentario al código que no se verá en pantalla -->
Ejemplo práctico
En el procesador de textos copiamos:
<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:
<UL>
<LI> El cine
<LI> El deporte
<UL>
<LI> Natacion
<LI> Baloncesto
</UL>
<LI> La música
</UL>
La música que mas me gusta es <I> (en orden de preferencia): </I>
<OL>
<LI> El rock
<LI> El jazz
<LI> La musica clasica
</OL>
</BODY>
</HTML>
Guardamos el fichero de texto con el nombre mipag2.html y lo
cargamos en el navegador.
