HTML significa HyperText Markup Language. Es
el lenguaje en que se escriben los millones de documentos que hoy existen en el
World Wide Web. Cuando accedemos a uno de estos documentos, el cliente
(Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra.
Una etiqueta HTML consiste en un signo menor
"<", un nombre de una directiva (orden o comando para el
navegador), seguido de los parámetros o atributos y un signo mayor
">". Para cualquier etiqueta que indica el inicio de un elemento
hay otra de cierre que indica que esa directiva ya no debe actuar sobre el
texto que sigue (en algunas ocasiones no es necesario poner, o no existe, la
etiqueta de cierre correspondiente).
<directiva
parámetro="xxxx"> ... </directiva>
HTML no es sensible a mayúsculas y minúsculas. Para
HTML es equivalente <HTML> y <html>, con algunas excepciones.
Aunque es recomendable escribir los nombres de las etiquetas en minúsculas ya
que las nuevas generaciones del HTML están basadas en SGML que requiere de
documentos bien formados. Así que, si nuestra intención es continuar trabajando
con este tipo de documentos en el futuro, nos puede venir bien seguir el modo
de escribir de los documentos bien formados:
- Nombres
de etiquetas y atributos en minúsculas.
- Etiquetas
de cierre para elementos no vacíos.
- Los
valores de los atributos deben estar incluidos entre comillas dobles.
Hay disponibles varios editores WYSIWYG (Composer,
FrontPage, ...). WYSIWYG es acrónimo de what yuo see is what you get (lo
que ves es lo que consigues), que significa que a la vez que se diseña el documento
HTML estamos viendo su aspecto final.
Todas las páginas web tienen la siguiente
estructura:
<html>
<head>
<title>Primera página</title>
</head>
<body>
</body>
</html>
En la primer línea encontramos la etiqueta <html>.
Esta le indica al cliente que comienza un documento HTML.
Luego viene <head>, la cabecera, donde se
pone información sobre el documento, que no se ve en la pantalla del navegador.
Aquí puede ir el título <title> del documento, es lo que veremos como
título de la ventana en los navegadores que lo permitan y como se conocerá
nuestra página en algunos buscadores y en la lista de favoritos de los usuarios
(es importante pensar bien el título del documento).
Tras la cabezera viene <body>, el cuerpo, que
es donde se coloca la información que queremos mostrar en la pantalla principal
del navegador.
<p>...</p>
Indica un comienzo de párrafo.
Tiene como opciones align="center" ,"left" o "right",
para centrar o alinear a derecha o izquierda el texto. Cada comienzo de párrafo
deja un espacio separador.
<h1>...</h1>
Se usan para dividir
correctamente en secciones nuestra página, tal y como se hace en un documento
de texto normal. El mas importante (grande) es <h1>, luego <h2> y
así hasta <h7>.
<center>...</center>
Permite centrar.
<pre>...</pre>
Representa el texto encerrado en
ella con un tipo de letra de paso fijo.
<blockquote>...</blockquote>
Para dejar márgenes tanto a
izquierda como a derecha (sangrar).
<br>
Cuando escribimos un documento
HTML los retornos de carro no tienen ningún efecto (salvo si están contenidos
bajo la directiva <pre>). Agrupaciones de más de un carácter en blanco se
traducen en un solo carácter blanco.
<hr>
Inserta una linea horizontal o
separador. De ellos pueden modificarse varios atributos:
size="num",
"%"
grosor de la barra horizontal, en
pixels o el porcentaje del ancho de página.
width="num"
anchura de la barra horizontal en
pixels.
align="..."
alineamiento de la barra, puede
valer left, right o center .
noshade
elimina el aspecto tridimensional
.
Todas estas etiquetas nos permiten cambiar el
aspecto del tipo de letra que estemos utilizando.
<b>...</b>
Pone el texto en negrita.
<i>...</i>
Representa el texto en cursiva.
<u>...</u>
Para subrayar algo.
<s>...</s>
Para tachar.
<tt>...</tt>
Permite representar el texto en
un tipo de letra de paso fijo.
<sup>...</sup>
Letra superíndice.
<sub>...</sub>
Letra subíndice.
Tipos
de letra, tamaño y colores
Gracias a la etiqueta <font> vamos a poder
cambiar el tamaño, el tipo y el color de las letras en nuestras páginas.
Cambio de color
Para hacerlo se utiliza el parámetro color. La manera de
especificarle el color es común a todas las etiquetas HTML: bien indicando el
nombre, si es un color normal (Black,
Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow,
Navy, Blue, Teal, Aqua),
<font
color="red">Estoy en rojo</font>
o bien especificando la intensidad de rojo,
verde y azul (código RGB) del mismo.
<font color="#xxxxxx">color</font>
Donde cada x
es un dígito hexadecimal, del 0 a la F. Las dos primeras x corresponden al rojo,
las 2 siguientes al verde y las restantes al azul. Por ejemplo: para el blanco
pondremos todos los valores al máximo, #FFFFFF;
y para el rojo, #FF0000.
<font
color="#FF0000">Estoy en rojo</font>
Tamaño de la letra
El parámetro utilizado para indicar el tamaño
es size. Puede
tomar valores desde 1 a 7, siendo el tamaño por defecto 3.
<font
size="2">Tamaño 2</font>
También se puede utilizar los modificadores + y - para indicar un
incremento (o decremento) relativo del tamaño del tipo de letra. Así, por
ejemplo, si indicamos que queremos un tamaño de "-2" estaremos pidiendo al
navegador que nos muestre el tipo de letra dos veces más pequeño.
<font
size="+3">Tamaño 6</font>
Tipo de letra
Por último, podemos especificar el nombre del
tipo de letra que queremos utilizar gracias al parámetro face. Como en principio no
tenemos manera de saber que tipo de letra tiene instalado el ordenador del
usuario que está viendo nuestras páginas, podemos indicar más de uno separado
por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene
por defecto:
<font
face="Helvetica,Arial,Times">No sé como voy a salir
exactamente</font>
