Cabecera del documento

La directiva delimita la cabecera del documento. Dentro de la cabecera es

importante definir el título de la página por medio de la directiva . Este título

será el que aparezca en la barra de nuestro visor de páginas Web.

Ejemplo:

Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La

directiva indica al visor de Internet las palabras clave y contenido de nuestra página

Web. Muchos de los buscadores de páginas Web de Internet (Google, Yahoo, Lycos, etc...) utilizan

el contenido de esta directiva para incluir la página en sus bases de datos. La directiva

lleva generalmente dos parámetros, name y content.

Ejemplos:

Indica al visor la descripción de la página y sus contenidos principales.

Indica al visor las palabras clave para los buscadores de Internet.

Indica el título de la Página

Hay páginas para registrar automáticamente, por ejemplo: Agregaweb, Recursos gratis,...

Otro uso de la directiva es la de indicar documentos con "refresco automático". Si se

indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de

segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el visor el documento

en uso transcurridos los segundos indicados. Esto es útil para páginas que cambian de contenido

con mucha frecuencia o para redireccionar a la persona que visita nuestra página Web a una nueva

dirección donde se encuentra una versión actualizada de nuestra página Web.

Ejemplo :

Transcurridos 15 segundos se accederá a la pagina Web de Pangea.

La directiva indica la localización de los ficheros, gráficos, sonidos, etc... a los que se

hace referencia en nuestra página Web. Si no se incluye esta directiva el visor entiende que dichos

elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web.

Ejemplo:

Cuerpo del documento

La directiva indica el inicio y final de nuestra pagina Web. Será entre el inicio

y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos,

enlaces, etc.... Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la

"apariencia" global del documento:

background= "nombre de fichero gráfico"

Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la

imagen no ocupa todo el fondo del documento, esta será reproducida tantas veces como sea

necesario.

bgcolor = "código de color"

Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro

background. Aun así es bueno indicarlo ya que en el caso de que el visor que utilicemos

tenga desactivado los gráficos sí se verá.

text = "código de color"

Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.

link = "código de color"

Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul.

vlink = "código de color"

Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con

nuestro visor. Por defecto es azul oscuro.

El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la

proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del

símbolo #.

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción

de color Verde y, las dos últimas, la proporción de color Azul. Estos números están en numeración

hexadecimal. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los 10 habituales).

Estos dígitos son:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Algunos códigos HTML

Subrayar un Link al pasar el mouse: 

Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado. 

<STYLE type="text/css"> 
<!-- 
A:link {COLOR: red; TEXT-DECORATION: none} 
A:visited {COLOR: gray; TEXT-DECORATION: none} 
A:active {TEXT-DECORATION: none} 
A:hover {COLOR: blue; TEXT-DECORATION: underline} --> 
</STYLE> 
</p> 
<p><a href="l1.htm">El texto que quieras.</a><br> 
<a href="l2.htm">otro texto.</a><br> 
<a href="l3.htm">Otro texto.</a><br> 
</p> 





Cuadro explicativo de los enlaces: 

Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. 

<p> 
<script language="JavaScript"><!-- 
function escribe(frase){document.desplaza.cuadro.value=frase; } 
// --></script> 
</p> 
<table border="0"> 
<tr> 
<td width="200"><p align="center"><strong>Opciones.</strong></p> 

<p><a href="http://www.pauluk.8k.com" 
onmouseover="escribe(' Página principal\n ----------------\n\n Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página 
principal</a><br> 
<a href="http://www.suweb.net/users/pauluk/trucosprin.htm" 
onmouseover="escribe(' Trucos PC\n -----------\n\n Este enlace te llevará a la página de Trucos PC en la que podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos PC</a><br> 
<a href="http://www.suweb.net/users/pauluk/GLOSARIO.HTM" 
onmouseover="escribe(' Glosario\n -------------- \n\n Diccionario de Términos Informáticos. Enterate el significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br> 
</p> 
</td> 
<td><form name="desplaza"> 
<p><textarea name="cuadro" rows="8" cols="30" 
wrap="physical"></textarea></p> 
</form> 
</td> 
</tr> 
</table> 





Otra barra con mas colores: 

A continuación veremos otro código para ponerle color a la barra de desplazamiento, en este caso vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los nombres de los colores por otros o por los código de letras y números. Mas abajo está la tabla de colores. 

<style> 
<!-- 
body { scrollbar-face-color: darkgreen ; 
scrollbar-shadow-color: yellow; 
scrollbar-highlight-color: violet; 
scrollbar-3dlight-color: navy; 
scrollbar-darkshadow-color: magenta; 
scrollbar-track-color: blue; 
scrollbar-arrow-color: black } 
--> 
</style> 

Observación: para ver este truco, es necesario tener instalada las últimas versiones de los navegadores 





Crear un formulario: 

Con este código podemos crear un formulario para que complete el visitante. Por ejemplo un libro de visitas, luego que el visitante apriete el botón enviar, los datos serán enviados a tu casilla de correo. 

<H2>Libro de visitas</H2> 
<FORM ACTION="mailto:tunombre@tuservidor.com" METHOD="post"> 

<TABLE> 

<TD ALIGN=RIGHT>Nombre:</TD> 
<TD><INPUT type="text" size=36 name="nombre"></TD> 
<TR><TD ALIGN=RIGHT>Direccion E-mail:</TD> 
<TD><INPUT type="text" size=36 name="direccion"></TD> 
<TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD> 
<TD><INPUT type="text" size=36 name="procedencia"></TD> 
<TR><TD ALIGN=RIGHT>Tus comentatios:</TD> 
<TD><TEXTAREA rows=5 cols=30 name="comentarios"></TEXTAREA></TD> 

</TABLE> 

<INPUT type="reset" value="Borrar todo"> <INPUT type="submit" value="Enviar"> 

</FORM> 





Insertar un sonido o música de fondo: 

Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando. 

Se recomienda usar sonidos en formato "midi" que son los de menor peso. 

<BGSOUND SRC="sonido.mid" LOOP=none> 
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true"> 

¿Qué es el HTML?

El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos

documentos pueden ser mostrados por los visores de páginas Web en Internet, como Netscape,

Mosaic o Microsoft Explorer. Por el momento no existe un estándar de HTML, aunque existen

diferentes revisiones o niveles de estandarización, el 1.0, el 2.0 , el 3.0, el 3.2 y el 4.0, lo que

produce que algunos visores no "comprendan" en su totalidad el contenido de un documento. En

este manual se ha utilizado la revisión 3.2 de HTML. Esto quiere decir que algunas de las órdenes

de HTML que aquí se indican puede que no sean reconocidas por algunos visores de páginas Web.

Netscape 2.x y Microsoft Explorer 3.x reconocen prácticamente todas las órdenes HTML vistas en

este manual. (Para los estilos, tendrá que ser Netscape 4.x).

Estructura básica de un documento HTML

Indica el inicio del documento.

Inicio de la cabecera.

Inicio del título del documento.

Final del título del documento.

Final de la cabecera del documento.

Inicio del cuerpo del documento.

Final del cuerpo del documento.

Final del documento.

Elementos de HTML

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. ) y una etiqueta de cierre (p.ej. ). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. Contenido). Algunos elementos, tales como
, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML.

El marcado estructural describe el propósito del texto. Por ejemplo,

Golf

establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título "Marcado HTML" al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, negritaindica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de negrita e itálica, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: enfásis fuerte y énfasis. Es fácil ver cómo unlector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en cascada.

El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma Wikipedia. También se pueden crear enlaces sobre otros objetos, tales como imágenes .

html

HTML, siglas de HyperText Markup Language es Lenguaje de Marcado de Hipertexto.