Introducción
HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y
con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). Se basa en el formato
ASCII (con 7 bits, por lo que no tiene acentos ni caracteres especiales). Un documento HTML usa una serie de
instrucciones para el browser que lo va a interpretar: estas instrucciones se denominan etiquetas o tags y se
distinguen del texto porque van entre guiones (< >). Estas etiquetas contienen todo el resto de la información
de la página web.
Escribir un documento complejo exige un conocimiento de las numerosas etiquetas existentes y sus normas de
utilización; los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas
modificaciones durante el proceso de creación. Con bastante frecuencia se hará necesario consultar el código
completo, con las etiquetas HTML (lo que se suele denominar código fuente) para depurar las disfunciones.
Esquema mínimo de un documento HTML
Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está
construido con dicho lenguaje. La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio
de la acción y </...> indica el fin de dicha acción.
Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>. Por otra parte,
todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body); La cabecera
contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta
(pareada) es <HEAD>. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
Ejemplo 1:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Se puede agregar una etiqueta para agregarle un título a la página web añadiendo la etiqueta <TITILE>
</TITLE> entre las etiquetas HEAD
Ejemplo 2:
<HTML>
<HEAD>
<TITLE>Página web de prueba</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Estos dos ejemplos los escribiremos en el editor online: [Link]
La etiqueta básica
La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT> la cual es una etiqueta pareada. Por
tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta
aún no sirve para nada.
Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente
manera (en este caso, la fuente escogida es Arial): <FONT FACE="Arial">...</FONT>.
Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para especificar los
colores, conviene saber al menos lo siguiente:
Cada color posee su correspondiente código.
Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones
de tres colores básicos: rojo, verde y azul.
Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
Rojo: color:#ff0000;
Verde: color:#00ff00;
Azul: color:#0000ff;
Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
Rojo: color:rgb(255,0,0);
Verde: color:rgb(0,255,0);
Azul: color:rgb(0,0,255);
Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos
programas que proporcionan los valores de todos los colores que el usuario puede componer.
Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente
(en inglés). Por ejemplo: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El valor del tamaño
("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc.,
teniendo en cuenta que el valor por defecto es 3).
Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el
tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.
Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos formalizar así:
<ETIQUETA [ATRIBUTO="valor"]>. Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede
llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual
(="arial", ="#0000FF", etc.).
Esto será válido para todas las etiquetas HTML, practica con las posibilidades de la etiqueta <FONT>.
Ejemplo 3:
<HTML>
<HEAD>
<TITLE>Página de prueba</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.
<FONT SIZE="1">Este texto es tamaño 1.</FONT>
<FONT FACE="Courier" SIZE="2">Este texto es tamaño 2.</FONT>
<FONT SIZE="4">Este texto es tamaño 4.</FONT>
<FONT FACE="Verdana" SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de
formato.</FONT>
</BODY>
</HTML>
Para agregar un salto de línea se usa la etiqueta <BR> que no tiene contraparte.
Etiquetas de formato de caracteres
La tabla siguiente muestra las más comunes:
Código Función
<B>...</B> Negrita
<I>...</I> Cursiva
<U>...</U> Subrayado
<SUB>...</SUB> Subíndice
<SUP>...</SUP> Superíndice
Ejemplo 4:
<BODY>
<FONT FACE="Verdana" SIZE=4>En este <b>texto</b> se pueden <i>poner a prueba</i> las diferentes
<SUB>etiquetas</SUB> de formateo de <SUP>texto</SUP></FONT><BR>
Se usan las <SUP><B>diferentes etiquetas <I>que se pueden</I></B></SUP> combinar.
</BODY>
Los párrafos y su alineamiento
La etiqueta <BR> inserta un salto de línea, pero no un salto de párrafo. En cambio, la etiqueta <P>...</P> inserta
una salto de línea y una línea en blanco, por lo que, en la práctica, equivale a un nuevo párrafo. Sólo podemos
separar los párrafos con líneas completas (una, dos, etc.), pero no podemos controlar el espacio entre los
párrafos con la precisión que permite, para ello usamos las etiquetas siguientes:
Un párrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:
<P align="left">...</P> Párrafo alineado a la izquierda
<P align="center">...</P> Párrafo centrado
<P align="right">...</P> Párrafo alienado a la derecha
<P align="justify">...</P> Párrafo justificado
Otra forma de controlar los párrafos es usando la siguiente etiqueta:
<DIV align="left">...</DIV> Línea(s) alineada(s) a la izquierda
<DIV Línea(s) centrada(s)
align="center">...</DIV>
<DIV align="right">...</DIV> Línea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV> Línea(s) alineada(s) justificadas
Ejemplo 5:
<BODY>
<P align="left">Este párrafo está alineado a la izquierda. En la práctica, equivale sencillamente a la misma
etiqueta sin indicación de alineación.</P>
<P align="center">Este párrafo está centrado. Hay una línea en blanco entre este párrafo y el anterior, Todo lo
que se escriba ira igual.</P>
<P>Ahora vamos a alinear tres líneas seguidas de tres maneras diferentes, pero sin dejar líneas vacías entre
ellas, por medio de otras etiquetas:</P><BR>
<DIV align="left">alineado izquierdo alineado izquierdo alineado izquierdo alineado izquierdo</DIV><BR>
<DIV align="center">alineado centrado alineado centrado alineado centrado alineado centrado</DIV><BR>
<DIV align="right">alineado derecho alineado derecho alineado derecho alineado derecho </DIV><BR>
</BODY>
Realiza el siguiente ejercicio en el editor de código.
<HTML>
<HEAD>
<TITLE>Página de prueba</TITLE>
</HEAD>
<body>
<font color="Olive" face="Comic Sans MS,arial">
<h1 align="center"><i>Cocina para Todos</i></h1>
<h2 align="center">La cocina a tu alcance</h2>
</font>
<P><font face="Comic Sans MS,arial">
Descubre los platos más exquisitos, fáciles y económicos que puedas imaginar.
<br></font></P>
<DIV align="justify"><font face="Soberana, Verdana" SIZE=3 color="navy">Dentro de este sitio podrás tener
acceso a gran variedad de <b>recetas</b> de preparacion sencilla,
aprenderás como realizar <SUP>operaciones comunes</SUP> dentro de una cocina y podras plantear tus
preguntas
<font color=40,180,10 size=4>en nuestro <b>consultorio</b> gourmet </font>donde nuestro cocinero virtual
podrá ayudarte con tus proyectos culinarios.</font></DIV>
<P> También te será posible adquirir los <b>libros</b> gastronómicos más populares al precio més accesible...
<br>
<I> Adéntrate en los misterios de la cocina sin quemar más cacerolas ni llamar al pizzero.</I></P>
</body>
</HTML>
