revista virtual

INTRODUCCION A IDIOMA E HISTORIA HTML

PAGINA WEB E INTERNET

POR VICTOR HURTADO

El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el

lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue

creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas

preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual

permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación

General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe

verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic,

etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún

error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste

lo entienda.

El entorno para trabajar HTML es simplemente un procesador de texto, como el que

ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que

ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la

extensión .htm o .html

Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en

Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.

También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la

versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que

vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio

publicitario giratorio entre página y página.

A continuación vamos a hablar un poco de historia:

Orígenes del HTML

1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language,

origen del HTML.

1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares

presenta su artículo Information Management: A Proposal dedicándose de lleno al

desarrollo de un sistema que permitiera el acceso en línea de manera uniforme a la

información disponible en muchos recursos distintos, y que pudiese funcionar en máquinas

que conectadas por redes basadas en TCP/IP.

1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard

Generalized Markup Language), que más tarde se llamará nivel 0; soporta encabezados,

listas y anclas. Se crea el nombre World Wide Web.

1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en

modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares

realiza la apertura del primer sitio con acceso público de World Wide Web el 17 de mayo

(http://info.cern.ch).

1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el

lenguaje, llamada HTML 1.0, agregando a la definición original atributos para modificar el

estilo físico del texto. Se distribuye Viola, primer visor gráfico de Web y disponible sólo

para X.11.

1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad

de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por el Centro Nacional para

Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno gráfico que se

hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A

fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas

de circulación masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para

presentar el borrador de la primera norma (RFC -Recommendation for Comments) de

HTML para Internet.

1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores

prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML

que no requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell.

Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora

soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un

nuevo visor de World Wide Web, Netscape (también conocido como Mozilla), que tiene

una amplia aceptación entre los usuarios, pero que soporta elementos de programación que

equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define un

equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality

Modeling Language), que permite moverse dentro de los ambientes definidos. En este

mismo año se realizan la Primera y Segunda conferencias internacionales de WWW, en

Ginebra y Chicago, respectivamente. Se crea la W3 Organization.

1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del

nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas.

Microsoft produce su primer visor de Internet, el cual también utiliza elementos de HTML

degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de encuadres.

Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje

de programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de

WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el

Pacífico en Wagga-Wagga.

1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores

que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que

implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la

modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos

definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt.

1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la

versión 4.0, experimental.

1998. HTML 4.0.

Creación de páginas web con lenguaje HTML

Para crear una página web se pueden utilizar varios programas especializados en esto, como

por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de

diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este

sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las

etiquetas con las que trabaja este lenguaje.

A continuación les mostraremos las etiquetas más comunes que deben aprenderse para

hacer una página Web.

Estructura de los documentos de HTML

Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien

escritos comparten una estructura en común. Un documento de HTML empieza con la

etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones

primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos

<HEAD> cabeza y <BODY> cuerpo.

La cabecera puede contener información y siempre contiene el titulo del documento

encerrado por el elemento <TITLE>.

En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes,

sonidos, hipervínculos, etc.

Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:

Ejemplo:

<HTML>

<HEAD>

<TITLE> Título de mi página de Internet </TITLE>

</HEAD>

<BODY>

<H1> <CENTER> Primera pagina </CENTER> </H1>

<HR>

Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es

difícil, pronto estaremos en condiciones de hacer cosas más interesantes.

<P> Aquí va un segundo párrafo.

</BODY>

</HTML>

Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número.

Ejemplo:

<h1>Titulo principal</h1>

<h2>Titulo secundario</h2>

<h3>Titulo terciario</h3>

<h4>Titulo cuarto nivel</h4>

<h5>Titulo quinto</h5>

<h6>Titulo sexto</h6>

Quedaría más o menos así:

Título principal

Titulo secundario

Titulo terciario

Titulo cuarto nivel

Titulo quinto

Titulo sexto

Etiquetas de párrafo

Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno

escribe algo (en el editor que se esté utilizando) por mucho espacio que uno le de siempre

al texto, siempre va a aparecer en la misma línea.

Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de

la etiqueta <P>. Se puede alinear de tres formas diferentes:

<p align="left"> Párrafo... </p> Alinea a la izquierda.

<p align="center"> Párrafo... </p> Realiza un centrado.

<p align="right"> Párrafo... </p> Alinea a la derecha.

Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el

comando <BR>.

Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar

un párrafo de otro que es <HR>

Etiquetas para darle formato al texto:

Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres

atributos: tamaño (Size), Tipo de letra o fuente (face) y color

Formato:

<B> y </B> Sirve para colocar un texto en Negrita.

<U> y < /U> Sirve para subrayar un texto

<STRIKE> y </STRIKE> Sirve para tachar un texto.

<STRONG> y </STRONG> Cumple la misma función que <B>

<I> y <I> Para colocar un texto en cursiva.

<EM>texto con énfasis</EM> texto con énfasis

<CITE>citación</CITE> citación

<DFN>definición</DFN> definición

<KBD>teclado</KBD> teclado

<SAMP>ejemplo</SAMP> ejemplo

SIZE: Regula el tamaño de los caracteres.

Ejemplo:<font> texto... </FONT>.

FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.

Ejemplo:

<FONT> texto…</FACE>

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir

los colores en HTML:

1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal

(RGB=Red/Green/Blue, valores Rojo/Verde/Azul)

2. Mediante la especificación del nombre del color en ingles

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de

utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los

navegadores Web.

Si especificamos el nombre del color, podemos evitar la definición del color en forma

hexadecimal que es un poco más difícil. Actualmente están estandarizados tan sólo 16

colores. Existen colores adicionales los cuales son dependientes de los navegadores Web.

Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras para la

definición del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor

verde y las 2 últimas el valor azul.

Las cifras hexadecimales son:

0 (corresponde al decimal 0)










A (corresponde al decimal 10)

B (corresponde al decimal 11)

C (corresponde al decimal 12)

D (corresponde al decimal 13)

E (corresponde al decimal 14)

F (corresponde al decimal 15)

(mirar el cuadro de la página anterior)

Para ponerle color de fondo a la página escribir:

<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro.

Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué

ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links

son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con

claridad o incluso que no se puedan distinguir en absoluto del fondo.

Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado

oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta

en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que

tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:

text="#número" Para el color del texto.

link="#número" Para el color de los enlaces.

vlink="#número" El color con que aparecerán los enlaces ya visitados.

alink="#número" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la

etiqueta:

background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>.

Ejemplo:

<body background="/documentos/html/gifs/dragonball.gif">

Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.

Etiquetas META

Son usadas para poner meta-información del documento. Esta "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 (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva

para incluir la página en sus bases de datos.

Ejemplo:

<META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon">

Indica al visor el nombre de la página y sus contenidos principales.

<META NAME="Author" content="Pablo Ravioli">

Indica el nombre de la persona que elabora la pagina WEB

<META NAME = "keywords" content = "Información de Sailor Moon">

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

Para hacer listas:

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza

cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer

al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).

Las listas pueden ser: Lista desordenada, <UL> (Unordered List).

Lista ordenada, <OL> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con números romanos:

<ol>

<li type=I>Manzana

<li type=I>Zanahoria

<li type=I>Lechuga

<li type=I>Tomate

</ol>

Manzana

Zanahoria

Lechuga

Tomate

Lista numerada:

<ol>

<li>Manzana

<li>Zanahoria

<li>Lechuga

<li>Tomate

</ol>

Manzana

Zanahoria

Lechuga

Tomate

Lista con puntos:

<ul>

<li> Manzana

<li> Zanahoria

<li> Lechuga

<li>Tomate

</ul>

Manzana

Zanahoria

Lechuga

Tomate

Lista con círculos:

<ul>

<li type=circle> Manzana

<li type=circle> Zanahoria

<li type=circle> Lechuga

<li type=circle> Tomate

</ul>

Manzana

Zanahoria

Lechuga

Tomate

Lista con cuadrados:

<ul>

<li type=square> Manzana

<li type=square> Zanahoria

<li type=square> Lechuga

<li type=square> Tomate

</ul>

Manzana

Zanahoria

Lechuga

Tomate

Como insertar una imagen

A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo

hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG.

La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada

de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que

contiene la imagen a insertar.

Es decir:

<IMG SRC="lugar donde guardo la imagen">

Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo

directorio en donde está la página y que la queremos insertar. La etiqueta apropiada sería:

<IMG SRC="dragonball.gif">

Y el usuario verá en el browser:

Para poner la imagen en la izquierda escribir:

<IMG ALIGN=LEFT SRC=" dragonball.gif ">

A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif">

Y si se quiere poner la imagen en el centro:

<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>

Hiperenlaces, Hyperlinks, Anclas o Links

Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir

dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el

destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a

href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí

para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en

nuestro texto HTML:

<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>

Que se vería de esta forma: Pulse aquí para visitar a la NASA

Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:

<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá la

imagen.gif.

También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es

cambiar el texto por una imagen:

<a href="http://www.altavista.com"><img src="Logo.jpg"></a>

Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del

Logo.jpg (que podría ser el logo del Altavista) y se convierta en una "manito", al hacer clic

nos envíe al buscador Altavista.

Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente

manera:

<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>

Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto)

el Microsoft Outlook Express con la dirección del destinatario ya escrita.

Caracteres especiales

Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente

en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en

HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo

queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya

sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el

texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en

este caso <. Los símbolos afectados por esta limitación, y la forma de escribirlos, se

detallan a continuación:

< (Menor que): <

>(Mayor que): >

& (símbolo de and, o ampersand): &

" (comillas dobles): "

Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos poner

<"hola">.

El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por

ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar códigos como las que

antes se presentaron para escribir ciertos símbolos. Los códigos comienzan siempre con el

símbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del

carácter que queremos que se escriba. Los códigos necesarias en nuestro idioma son:

á: á

é: é

í: í

ó: ó

ú: ú

Á: Á

É: É

Í: Í

Ó: Ó

Ú: Ú

ü: ü

Ü: Ü

ñ: ñ

Ñ: Ñ

¿: ¿

¡: ¡

?: ?

!: !

@: @

Por lo tanto la palabra página la podríamos escribir como :

página

página

Otro ejemplo: ¿En qué año estamos?

Sería: &#191En qué año estamos?

Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras

acentuadas de nuestro documento debemos utilizar sus correspondientes códigos para

representarlas.

Recuerden que las etiquetas se pueden escribir en mayúsculas o en minúsculas, es lo mismo

poner <HTML>, <html> o <HtmL>.

Una vez que terminamos de escribir todo nuestro documento, lo guardamos poniéndole un

nombre, y necesariamente lo debemos guardar con la extensión .HTM o .HTML.

Para ir visualizando lo que hemos estado haciendo tendríamos que abrir nuestro browser

(Netscape o Internet Explorer), hacemos click en la opción FILE o ARCHIVO, estando allí

seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el

archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrirá nuestra

pagina.

Conclusión

Sin HTML no existiría el Internet que hoy conocemos, si no se hubiera inventado,

seguiríamos con el aburrido FTP (Protocolo de Transferencia de Ficheros) mandándonos o

bajando archivos que a veces ni sabíamos lo que eran, sin tener la posibilidad de

visualizarlo antes. Ahora por medio de una página llena de colores y botones por la cual se

puede navegar, se puede tener acceso a bastante información y archivos.

El lenguaje de HTML abrió una puerta al mundo permitiéndoles a las personas expresar sus

ideas por medio de páginas y mostrárselas a todas las personas de todos los países.

Con el HTML se logró un gran movimiento económico ya que muchísimas empresas

publican, venden, y ofrecen sus productos, sus servicios y sus ofertas atrayendo a mayor

cantidad de personas. También gracias al HTML nacieron muchas empresas que ofrecen

diversos servicios como Yahoo, Altavista, HotMail, Terra, Yupi, Mercadolibre, De Remate,

etc.

Infinitas son las posibilidades que te brindan las páginas WEB ya que no solo te dan la

posibilidad de pasar el tiempo navegando, sino que también hasta se puede comprar un auto

por Internet, solo basta con llenar un formulario con los datos personales y el número de

tarjeta de crédito y en ocho días lo tenemos en nuestra casa.

Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con las que

se compone la World Wide Web están hechas con el lenguaje de programación HTML.

¿QUÉ ES INTERNET?

Internet ha revolucionado al mundo y probablemente sea el invento más importante del

siglo XX. Usted puede descargar música o software, ver segmentos de película, realizar

investigaciones, hacer compras, enviar y recibir mensajes, entre otras cosas.

Internet: es una red de redes que conecta computadoras distribuidas en todo el mundo,

permitiendo el intercambio de información entre ellas.

ORÍGENES DEL INTERNET

Internet surgió en 1969 en Estados Unidos con un proyecto militar llamado

ARPANET,desarrollado en el Departamento de Defensa de EEUU.

Arpanet era una red experimental en la cual se probaron las teorías y software en los que

está basado Internet en la actualidad. Esta red no existe en la actualidad.

Esta red gestionada por DARPA, es el origen de Internet, basado en el intento de conectar

esta red (ARPAnet) a otras redes mediante enlaces de satélite, radio y cableado.

La filosofía de esta red consiste en que cada uno de los ordenadores que componen la

misma sea capaz de comunicarse, como elemento individual, con cualquier otra

computadora de la red.

Arpanet en principio interconectaba 4 grandes ordenadores en localizaciones secretas de

EEUU.

Mas tarde de fueron añadiendo a esta red empresas, universidades y también alguna

personas desde su casas, con lo cual comenzó el desarrollo vertiginosa de la red de Internet,

abriendo un canal de comunicaciones en todo el mundo.

Principales Característica de Internet

Universal. Internet está extendida prácticamente por todo el mundo.

Fácil de usar. No es necesario saber informática para usar Internet.

Variada. En Internet se puede encontrar casi de todo,

Económica. En Internet el ahorro de tiempo y dinero es impresionante.

Útil. Disponer de mucha información y servicios rápidamente accesibles

Algunas cosas que puedo hacer en Internet

Consultar información.

Consulta de Servicios Públicos.

Consultas a periódicos y revistas.

Oír la radio y ver vídeos.

Intercambiar información.

Mensajes a móviles.

Conversar con otras personas.

Videoconferencia.

Juegos en red.

Comprar productos y servicios.

Recibir formación.

Descargar archivos.

Qué es una página web

Una página web es un documento electrónico diseñado para el World Wide Web (Internet)

que contiene algún tipo de información como texto, imagen, video, animación u otros. Una

de las principales características de las páginas web son los Hipervínculos — también

conocidos como links o enlaces — y su función es la de vincular una página con otra.

Es por ello que a Internet se le conoce como la telaraña (Web) mundial, porque una página

web se vincula con otra y así sucesivamente hasta ir formando una enorme telaraña de

documentos entrelazados entre sí.

Una página web forma parte de un Sitio Web o Sitio de Internet, este no es más que el

conjunto de páginas web que lo componen ordenadas jerárquicamente bajo una misma

dirección de Internet (URL). Las páginas web son visualizadas a través de Navegadores

Web que interpretan el código con el que son diseñadas estas.

revista virtual

Documents