CAPITULO 5

INTRODUCCIN AL LENGUAJE DE MARCACIN DE HIPERTEXTOS

El World Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones e incluso sonido y video.

Una de las caractersticas ms importantes de las pginas Web es que son hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una pgina para navegar hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir que palabras o frases sern activas y a donde nos conducir pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orgenes el WWW constaba nicamente de texto en la actualidad es un sistema principalmente grfico y se puede hacer que las zonas activas sean, no slo texto, sino imgenes, videos, botones, en definitiva cualquier elemento d e una pgina. Aun as, el trmino original no ha sido reemplazado todava.

5.1. INTRDODUCCION A HTML

El HTML (Hiper Text Markup Language) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Adems de texto normal incluye tambin, elementos multimedia (grficos, vdeo, audio) y existen enlaces

(links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet. Otra caracterstica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las pginas con cualquier sistema operativo y, por supuesto tambin crearlas.

Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se pueden controlar los elementos tipogrficos del texto: tipo, color y tamao de las fuentes, el estilo (negrita, cursiva, etc), as como tambin la inclusin de tablas, listas, formularios, la insercin de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.

Las etiquetas se pueden modificar por medio de sus atributos, stos son del tipo atributo="valor" y se colocan detrs del nombre de la etiqueta. El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado. El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difcil.

Cmo empiezo a escribir HTML? Para comenzar tan slo necesitas un editor de texto para escribir las pginas y un navegador para visualizarlas. El editor no debe formatear el texto. Se puede usar el Bloc de notas en Windows adems se carga muy rpido y adems es el programa que se abrir por defecto desde el navegador. Las etiquetas y sus atributos se pueden escribir en maysculas o minsculas. El lenguaje ignora, tambin, los espacios en blanco seguidos, donde slo cuenta uno de ellos. Una vez que se haya escrito una pgina, se gurda en un fichero con extensin .htm o .html. Cuando se de doble click sobre l se abrir el navegador y se mostrar la pgina.

Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Bloc de notas se puede crear un acceso directo al mismo en la carpeta "SendTo" del directorio "Windows" y aparecer como opcin en "Enviar a " cuando se de click con el botn dereho del ratn sobre el fichero.

Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no sobre imgenes) pulsar el botn derecho y elegir "Ver cdigo fuente". En el Comunicator tambin se puede "Ver el origen" pero en un visor propio que no permite modificar el texto. Hay que tener cuidado con el nombre de los ficheros, pues los servidores donde se alojan las pginas s distinguen maysculas de minsculas y no es lo mismo Inicio.htm que inicio.htm

5.2. ESTRUCTURA DEL DOCUMENTO

Todos los documentos HTML tienen la estructura que se muestra a continuacin, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD>

<BODY> Aqu ira el contenido de la pgina </BODY> </HTML>

Vamos a analizar ms detenidamente las distintas secciones que componen la pgina.

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="keywords" content="educacin, enseanza, profesores, alumnos">

En este caso la etiqueta le indican a los buscadores el contenido de nuestras pginas (description) y algunas palabras clave (keywords) para su localizacin.

La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra necesariamente el ttulo (entre las etiquetas <title> y </title>).

El

ttulo

de

la

pgina

debe

describir

su

contenido

por

ejemplo:

<TITLE>Colegio Pblico de Villaman - mbito de Influencia - </TITLE>.

Dentro de la cabecera tambin se suele incluir cdigo en JavaScript, que se reconoce porque va comprendido entre las etiquetas:

<script language="JavaScript"> <!-Aqu ira el cdigo // --> </SCRIPT>

El cuerpo (body) del documento HTML es normalmente lo ms importante. Es aqu donde debemos colocar el contenido de nuestra pgina: texto, fotos, etc. El cuerpo est delimitado por las etiquetas <body> y </body>. La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR parmetro usado para especificar el color de fondo de la pgina. El color se define como una terna de nmeros (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). Tambin se puede usar el nombre en ingls de los colores predefinidos en los navegadores.

Sintaxis:

<BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>.

TEXT es el parmetro usado para definir el color del texto por omisin. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro. LINK, VLINK, ALINK, son parmetros usados para especificar el color por omisin de texto con enlace, enlace ya visitado y enlace activo. Los colores por omisin son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND es el parmetro usado para especificar la ruta y nombre de archivo (URL) de la imagen que ser usada como fondo del documento. Esta se ver como mosaico para cubrir toda la ventana si es pequea (lo habitual). Su Sntaxis es <BODY BACKGROUND="ruta/archivo.gif">.

5.3. FORMATO DE DOCUMENTO HTML

El texto del documento se puede modificar de muchas formas, a continuacin se muestran las ms usuales.

Ttulos Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas que se usan se muestran en la siguiente tabla:

Etiqueta <h1> Ttulo </h1> <h2> Ttulo </h2> <h3> Ttulo </h3> <h4> Ttulo </h4> <h5> Ttulo </h5> <h6> Ttulo </h6>
TABLA N 5.1. ETIQUETAS DE TITULOS.

Se ve

Ttulo
Ttulo
Ttulo
Ttulo
Ttulo
Ttulo

Estilos de fuentes Como se muestra en la tabla n 5.2 es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas. Cdigo <b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itlica</i> <small>Texto pequeo</small> <strong>Texto fuerte</strong> _{Texto subndice} ^{Texto superndice} <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt> Resultado Texto normal Texto en negrita Texto normal Texto grande Texto normal Texto enfatizado Texto normal Texto en itlica Texto normal Texto pequeo Texto normal Texto fuerte Texto normal Texto subndice Texto normal Texto superndice Texto normal Texto subrayado Texto normal Texto tachado Texto normal Texto teletipo
TABLA N 5.2. ESTILO DE FUENTES.

Tamao de fuentes El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio de un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo:

<font size=1> Esta es la letra ms pequea que se puede conseguir </font> que se ver como Esta es la letra ms pequea que se puede conseguir

Otra forma es por medio de una referencia relativa como se muestra a continuacin:

<font size="+1"> Esto es igual que poner size=4 </font>, que se ve como:

Esto es igual que poner size=4

El tamao por defecto es el 3

Tipos de fuentes El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis: <font face="Courier">Eso se ver en la fuente Courier</font> que se ve como: Eso se ver en la fuente Courier

Color de las fuentes Es otro atributo de Font. Mira en la pgina de colores para saber cmo se especifican los colores. La sintaxis es la siguiente: <font size=2 face="MS Sans Serif" color="navy"> Como se observa se pueden poner varios atributos separados por un espacio</font>, lo cual se ver as:
Como ves se pueden poner varios atributos separados por un espacio

5.4. ETIQUETAS BSICAS

Las etiquetas (en ingls: tags) son marcas insertadas en un documento HTML para proporcionar informacin sobre una unidad o contenido.

Reglas bsicas Las etiquetas estn encerradas entre los signos "<" y ">". Generalmente vienen en pares <p> y <p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento.

Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo mismo que <B>.

En la tabla n 5.3 se muestran las etiquetas de texto bsicas.

Etiquetas <h1> a <h6> <p> <!-- --> <br> <hr>

Descripcin Define el tamao de los encabezados Define un prrafo Define un comentario Define un salto de lnea Define una lnea horizontal
TABLA N 5.3. ETIQUETAS BASICAS.

5.5. LISTAS
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas:

Ordenadas. Desordenadas. De definicin.

Listas ordenadas Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el que se muestra en la siguiente tabla.

ESCRIBIMOS EN HTML <ol type=i> <li >Primer trmino de la lista <li >Segundo trmino <li>Tercer trmino <li>Cuarto <li>Quinto </ol> i. ii. iii. iv. v.

SE VER COMO

Primer trmino de la lista Segundo trmino Tercer trmino Cuarto Quinto

TABLA N 5.4. LISTA ORDENADA.

Listas desordenadas Exponen la lista anteponiendo un punto, cuadrado o tringulo negro. Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>, un ejemplo se muestra a continuacin.

ESCRIBIMOS EN HTML <ul> <li>Primer trmino de la lista <li>Segundo trmino <li>Tercer trmino </ul>

SE VER COMO

Primer trmino de la lista Segundo trmino Tercer trmino

TABLA N 5.5. LISTA DESORDENADA.

Listas de definicin Se utilizan para definir trminos. Las listas de definicin se representan con la etiqueta <dl>. Los trminos de las mismas con <dt>. La definicin de esos trminos comienza con <dd>.

ESCRIBIMOS EN HTML <dl> <dt >Trmino 1 <dd>Definicin del elemento 1 <dt>Trmino 2 <dd>Definicin del elemento 2 <dt>Trmino 3 <dd>Definicin del elemento 3 </dl>

SE VER COMO

Trmino 1 Definicin del elemento 1 Trmino 2 Definicin del elemento 2 Trmino 3 Definicin del elemento 3

TABLA N 5.5. LISTA DE DEFINICIN.

5.6. TABLAS
Las tablas son herramientas muy tiles para presentar datos en forma de tablas y para el diseo de pginas y ubicacin de textos y grficos dentro de las mismas.

Caractersticas de las tablas Definimos las tablas con la etiqueta <table>. La tabla est dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc.

Sintaxis <table> <tr> <td>contenido celda 1</td> <td>contenido celda 2</td> </tr> </table>

Un ejemplo se muestra a continuacin:

Cdigo <table border="1px"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>

Y el resultado es: Nombre Apellido Pedro Garcia

5.7. HIPERVNCULOS
Los enlaces o links (en Ingls) nos permiten conectarnos con otros documentos como son:

una imagen un video un archivo de sonido sitios en la web(otra pgina web) mandar un email

Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). La etiqueta <a> tiene como cierre </a>.

Sintaxis <a atributo="valor">Texto del enlace</a>

Ejemplo: <body> <a href="/http://www.virtualnauta.com/">La home de Virtualnauta</a> </body>

El cual da resultado el siguente hipervnculo: La home de Virtualnauta

5.8. INSERCIN DE IMGENES

Para insertar imgenes en un sitio usaremos la etiqueta <img>. Esta etiqueta debe ir acompaada del atributo src que es el que contiene el URL de la ubicacin del

archivo de la imagen. El atributo alt se utiliza para dar una breve descripcin de la imagen, la cual podremos observar en caso que el navegador del usuario, por

alguna razn, no muestre la misma. La etiqueta <img> no tiene cierre.

Sintaxis <img src="/URL" alt="texto descriptivo">

Ejemplo: <img src="/../imagenes/foto1.jpg" alt="Dos nias de la mano">; el resultado es: