Lenguaje de programación para paginas web

Indice
1.
Introducción
2. Que es el HTML
3. Orígenes del
HTML
4. Creación de páginas web
con lenguaje HTML
5. Etiquetas de
párrafo
6. Como insertar una
imagen
7. Conclusión
8. Bibliografía

1.
Introducción

El HTML no es
más que una aplicación del SGML (Standard
Generalized Markup Language), un sistema para
definir tipos de documentos
estructurados y lenguajes de marcas para
representar esos mismos documentos. El
término HTML se suele
referir a ambas cosas, tanto al tipo de documento como al
lenguaje de
marcas.
A medida que nos afianzamos en el manejo de Internet cada uno de
nosotros pasa por tres etapas diferentes: Al principio solamente
conocemos unas pocas páginas, luego nos damos cuenta que
existen buscadores lo
cual lo hace más interesante y por último nos damos
cuenta que en Internet no solamente se
puede ver la información sino que también se
puede publicar. ¿y qué otra manera más
fácil y más sencilla? Si Internet tiene acceso a
todos los rincones del mundo.
Para que varias personas se comuniquen es necesarios que
éstas hablen un mismo idioma. El lenguaje
que utilizan las computadoras
que están conectadas a Internet es HTML. A través
de esta monografía
explicaremos que es HTML, sus orígenes y el proceso de
creación de una página
web.

2. Que es el
HTML

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:

3. 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.

4. 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 mas comunes
que deben aprenderse para hacer una pagina 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 pagina, aunque todavía es muy
sencilla. Como el lenguaje HTML no es difícil, pronto
estaremos en condiciones de hacer cosas mas 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 mas o menos así:
Titulo principal
Titulo secundario
Titulo terciario
Titulo cuarto nivel
Titulo quinto
Titulo sexto

5. 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 este 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

Ejemplos:

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)
1 (corresponde al decimal 1)
2 (corresponde al decimal 2)
3 (corresponde al decimal 3)
4 (corresponde al decimal 4)
5 (corresponde al decimal 5)
6 (corresponde al decimal 6)
7 (corresponde al decimal 7)
8 (corresponde al decimal 8)
9 (corresponde al decimal 9)
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

6. 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 &lt;. Los símbolos afectados por esta
limitación, y la forma de escribirlos, se detallan a
continuación:

• < (Menor que): &lt;
• >(Mayor que): &gt;
• & (símbolo de and, o ampersand):
  &amp;
• " (comillas dobles): &quot;

Es decir, que para escribir <"hola"> en nuestro
texto HTML original debemos poner
&lt;&quot;hola&quot;&gt;.
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:

• á: &aacute;
• é: &eacute;
• í: &iacute;
• ó: &oacute;
• ú: &uacute;
• Á: &Aacute;
• É: &Eacute;
• Í: &Iacute;
• Ó: &Oacute;
• Ú: &Uacute;
• ü: &uuml;
• Ü: &Uuml;
• ñ: &ntilde;
• Ñ: &Ntilde;
• ¿: ¿
• ¡: ¡
• ?: ?
• !: !
• @: @

Por lo tanto la palabra página la
podríamos escribir como :
página
p&aacute;gina
Otro ejemplo: ¿En qué año estamos?
Sería: &#191En qu&eacute; a&ntilde;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.

7.
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éndole 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.

8.
Bibliografía

Clarín
Guía práctica de Internet
Buenos Aires
Editorial Sol 90 Barcelona
1999
Volumen 14
Páginas 316 a 323
Masanti Luis Alejandro
Diseño
WEB
Ciudad de Buenos Aires
Ñ Ediciones
Abril de 2000
Fascículo 01
Páginas 1 a 9

Sergio Talens Oliag – José Hernández
Orallo
HTML. Manual de
Referencia
Editorial Paraninfo
1996
Thomas A. Powell – Mc Craw Hill
Manual de
Referencia HTML
Buenos Aires
Osborne
1999
Capitulo 2

Autor:

Pablo Ravioli

18 años y este año termino 5° año de la
secundaria.