HTML.


Esta es una pequeña introducción al lenguaje de Internet: el HTML. Aquí te explicaremos cómo interpretar el código que compone y dar forma a las páginas Web. Este no pretende ser un repaso exhaustivo, pues requeriría un curso completo, si no una iniciación.

HTML es la abreviatura de Hiper Text Markup Language. Es decir, lenguaje de marcado de hipertexto. Se trata de un lenguaje muy sencillo basado en tags o 'etiquetas' , que nos permiten marcar trozos de texto u objetos (como imágenes), haciendo que pasen a tener unas características determinadas. Este trabajo era el que muchos programadores tenían que hacer en el nacimiento de Internet y de las páginas Web, pero actualmente los editores visuales, como es el FrontPage, hacen todo el trabajo y sólo debemos recurrir al código en momentos determinados.

Esta es una etiqueta HTML: <b><\b>.

Las etiquetas suelen tener dos partes, la etiqueta de inicio y la de finalización, que es la que tiene el carácter \. Al poner texto entre estas etiquetas aparecerá en pantalla en negrita.

Este es el código en lenguaje HTML: <b> esto está en negrita <\b>

Este es el efecto que se ve en pantalla con dicho código: esto está en negrita

Para comprobar que esto es así, solo debemos seleccionar el texto o la parte de la Web que nos interese y hacer clic entonces en el botón HTML, que está situado en la parte de abajo-izquierda de la pantalla. De esta forma FrontPage nos buscará ese texto en el código y nos lo mostrará seleccionado, de forma que lo encontremos rápidamente. Para volver a la vista normal pulsaremos en Normal. Como veremos, el texto está entre estas etiquetas, que son las que le dicen al navegador que ponga el texto en negrita. Además de estas etiquetas veremos probablemente otras. Las etiquetas se pueden anidar, es decir, unas están dentro de otras, haciendo que el texto entre ellas tome diversos efectos.

Otra forma bastante visual es pulsar las teclas CONTROL + }. Nos saldrá algo parecido a esto:

 

Las etiquetas aparecerán, aunque no todas. No podemos seleccionarlas ni modificarlas, pero sí el texto o los objetos, cambiando entonces las etiquetas.

Para hacer que desaparezcan, basta con volver a pulsar CONTROL + }.

Etiquetas más usadas para formatear texto

Efecto Código
negrita <b>negrita</b>
cursiva <i>cursiva</i>
tamaño (puede ser positivo, negativo o absoluto) <font size="4">tamaño</font>
color (el numero esta en formato hexadecimal) <font color="#FF0000">color</font>
Tipo de letra (en este caso Times New Roman) <font face="Times New Roman">Tipo de letra</font>
Centrado a izquierda <p align="left">centrado a la izquierda</p>

Centrado al centro

<p align="center">centrado en el centro</p>

Centrado a derecha

<p align="right">centrado a la derecha</p>
listas <ol></ol> y entre cada elemento de la lista <li></li>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

 

<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
Párrafos

Este es el primer párrafo

Este es el segundo párrafo

<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>

Encabezado 1

Encabezado 2

Encabezado 3

<H1>Encabezado 1</H1>
<H2>Encabezado 2</H2>
<H3>Encabezado 3</H3>

(hay hasta 6 encabezados)

Etiquetas más usadas en la construcción de una página Web

Las tablas se usan a menudo para ayudar a mostrar información. Una tabla está compuesta de filas y columnas.

Su sintaxis es: <table></table>

Por cada fila pondremos <tr></tr> y por cada columna <td></td>

Ejemplo: tabla de 2 columnas en la 1ª fila y 1 columna en la 2ª fila

esto es
una tabla
<table>
<tr>   <td>esto</td>    <td>es</td>   </tr>
<tr>una tabla</tr>
<table/>


Etiquetas de una página Web

Toda página Web tiene un código muy parecido al siguiente:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Este es el titulo</title>
</head>


<body>
¡Hola mundo!
</body>


</html>

Si observas esta misma página Web o cualquier otra, distinguirás las siguiente etiquetas:

  • En negro: Son las etiquetas que contiene el cuerpo del documento. Son <html></html>. Indican que es una página Web.

  • En azul: Es la cabecera de la página Web.  Son las etiquetas <head></head>.
    En las etiquetas META se encuentra información acerca del autor, el programa utilizado, el título, el color de fondo, etc.

  • En verde: Es la propia página Web, es decir, su contenido. Todos lo textos, imágenes, etc. aparecerán aquí. Se encuentra entre las etiquetas <body></body>.


Colores por defecto

<BODY BACKGROUND=... BGCOLOR=.. TEXT=.. LINK=.. VLINK=.. ALINK=..>

BACKGROUND: Indica el nombre de la imagen que constituirá el fondo de la página.

BGCOLOR: Indica el color del texto de la página.

TEXT: Indica el color del texto.

LINK: Indica el color del texto para los hiperenlaces. VLINK es para los hiperenlaces visitados y ALINK para los hiperenlaces activos.

El color se indica en formato RGB-hexadecimal, que es un poco especial. Son una serie de 6 cifras, de dos en dos, que indican la cantidad de color rojo, la cantidad de color verde y la cantidad de color azul. Comienzan por el símbolo #. Las cifras pueden ser 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, siendo 00 cantidad nula y FF la máxima cantidad. Así, #000000 es el color blanco y #FFFFFF es el color negro. Como este sistema es poco intuitivo, FrontPage tiene una paleta de colores que podemos ver pulsando aquí (pulsar en la flechita)

También podemos seleccionar un texto en particular y pulsar en el color que queramos, tomando el texto ese color (la etiqueta de color está explicada al principio). El último color usado se queda guardado, y tan sólo hemos de pulsar en el botón para hacer que un texto adquiera ese color. Si queremos que un texto no tenga color, sencillamente le damos el color automático, que equivale a eliminar sus etiquetas de color.

   
Aviso legal: Este curso es gratuito siempre que se visualice desde la página Web de aulaClic. No está permitido descargar el curso.
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.
Julio-2003.