TABLA DE CONTENIDO

LECCIÓN 1. INTRODUCCIÓN_____________________________________________________________________ 2

¿QUÉ ES HTML?_____________________________________________________________________________________2
CARACTERÍSTICAS DE HTML:_________________________________________________________________________5
VERSIONES DE HTML:_______________________________________________________________________________6
VERSIÓ N 2.0__________________________________________________________________________________________6
VERSIONES 3.0 Y 3.2_________________________________________________________________________________6
Caracteres.__________________________________________________________________________________________7
Caracteres de control______________________________________________________________________________8
Herramientas de Edició n.__________________________________________________________________________8

LECCIÓN 2: UNA PÁGINA WEB SENCILLA._____________________________________________________9

CREAR UNA PÁGINA WEB LOCAL._____________________________________________________________________9

LA MARCA <TITLE>.______________________________________________________________________________13
CABECERAS._________________________________________________________________________________________14
LECCIÓN 1. INTRODUCCIÓN

“HTML” (HiperText Markup Language) significa: Lenguaje de marcas de

hipertexto.

LECCIÓN 1: PRINCIPIOS BÁSICOS

¿Qué es HTML?

El protocolo HTML fue creado para transferir por la red ficheros en formato
ASCII, formados por texto plano. Pero, con el progreso de las tecnologías y con
la inclusión de diferentes tipos de ficheros no ASCII en las aplicaciones por
Internet (imágenes, vídeos, sonidos, etc.), surgió la necesidad de transformar
estos formatos a tipo ASCII (u otros juegos de caracteres compatibles), para su
correcta recepción en el navegador.

Este problema se produjo al principio en las aplicaciones de correo electrónico,

cuando se necesitaba enviar por e-mail archivos que no estaban formados por
texto plano, y por tanto, no eran compatibles con los juegos de caracteres
permitidos.

Para subsanar el problema el Internet Engineering Task Force (IETF) creó en

1992 los tipos Mime (Multipurpose Internet Mail Extensions), especificaciones
para dar formato a mensajes no-ASCII, de forma que pudieran ser enviados por
Internet e interpretados correctamente por los programas de correo locales.

Fue tan grande e importante la ampliación que se dio con los tipos Mime al
correo que pronto se aplicaron también a los documentos web, lo que permitió
incluir en las páginas HTML archivos varios (al principio casi siempre eran
imágenes, y luego vídeos, sonidos, applets de Java, etc.), que dieron nueva
vida a la web.

Página 2
HTML tiene entre otras, dos ventajas principales que lo hacen prácticamente
imprescindible a la hora de diseñar una presentación web: su compatibilidad y
su facilidad de aprendizaje, debido al reducido número de etiquetas que usa.

Además podríamos destacar otras ventajas como son:

 flexibilidad
 independencia
 Barato, no cuesta un céntimo.

Básicamente, los documentos escritos en HTML constan del texto mismo del
documento y las etiquetas que pueden llevar atributos. Esto, llevado a la
práctica, vendría a ser:

<etiqueta><atributo> texto</atributo> </etiqueta>

La etiqueta “<etiqueta>” activa la orden, y esta otra “</etiqueta>” la desactiva.

No todas las etiquetas tienen principio y final, pero esto lo veremos más
adelante.

Una etiqueta es una unidad de marca, con un significado especial.

Comienzan con el signo (<), seguido del la palabra clave y terminan con el
signo (>), estos signos se conocen con el nombre de paréntesis angulares.

Por ejemplo:
<HR>
<STRONG>
<I>

Todas estas etiquetas llevan su paréntesis angular al comienzo y cierre de la

palabra clave.

Nota: Las etiquetas se pueden escribir tanto en minúsculas como en

mayúsculas, tienen el mismo significado.

Por ejemplo es lo mismo:

<b> que <B> Las dos aplican negrita al texto que va entre la etiqueta de
apertura y la de cierre. Porque no debemos de olvidar que muchas de las
etiquetas llevarán además de la etiqueta de apertura, también la de cierre.

<b> texto en negrita </b>

<B>texto en negrita </B>

Como hemos comentado brevemente la mayoría de las etiquetas llevan

atributos que afectan al comportamiento de esta.

Un atributo es una palabra clave que sigue al nombre de la etiqueta separada

por un espacio.

Página 3
Hay algunos atributos que requieren un valor precedido por un signo igual.

Por ejemplo:

<HR width=”200”>

En este ejemplo tenemos la etiqueta <HR> que va acompañada del atributo

Width y este toma como valor 200, que en este caso es el ancho que va a
tomar la línea que nos dibujara en la página la etiqueta <HR>.

Esta etiqueta podría haberse usado sin atributo, pero en este caso, nos hubiera
dibujado una línea con ancho estándar.

Ahora después de aplicarle el atributo Width=”200” a la etiqueta <HR> hemos

conseguido poder personalizar el ancho.

La mayoría de los atributos en HTML son opcionales, sólo unos pocos son
requeridos en la etiqueta de apertura.

En los atributos requeridos existen algunos lógicamente necesarios por ejemplo

la etiqueta <IMG> no tendría sentido sin el atributo src, pero también el hecho
de que el Consorcio (W3C) califica el atributo alt en esta etiqueta <IMG> como
necesario, y no lo es absolutamente.

Página 4
Características de HTML:

 Información por hipertexto: Diversos elementos (texto o imágenes) de

la información que se nos muestra en la pantalla están vinculados con
otras informaciones, que pueden ser de otras fuentes. Para mostrar en
pantalla esta otra información, bastará con hacer clic sobre ellos.
 Gráfico: En la pantalla aparece simultáneamente texto, imágenes e
incluso sonidos.
 Global: Se puede acceder a él desde cualquier tipo de plataforma,
usando cualquier navegador, y desde cualquier parte del mundo.
 Pública: Toda su información está distribuida en miles de ordenadores,
que ofrecen su espacio para almacenarla. Toda esta información es
pública, y toda puede ser obtenida por el usuario.
 Dinámica: La información, aunque esté almacenada, puede ser
actualizada por el que la publicó, sin que el usuario deba actualizar su
soporte técnico.
 Independiente: Dada la inmensa cantidad de fuentes, es independiente
y libre.

Página 5
Versiones de HTML:

Versión 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba

era el 2.0 (establecido en Noviembre del 95), de modo que cualquier navegador
que encontremos será capaz de interpretarlo.

Versiones 3.0 y 3.2

Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de
herramientas para tener un control mínimamente complejo de los documentos.
No se consideró necesario que lo tuviera, ya que por aquel entonces Internet
era un fenómeno más bien circunscrito a la actividad académica, y el contenido
primaba sobre el diseño. Debido a ello, Netscape (líder del mercado de
navegadores, por aquel entonces) empezó a incluir etiquetas nuevas no
incluidas en ningún estándar.

Por estos problemas, el IETF (el comité que suele decidir todos los estándares
dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resultó
ser demasiado grande para la época, lo que dificultó su aceptación en el
mercado.

Esto llevó a una serie de compañías (entre ellas Netscape, Microsoft, IBM, Sun,
etc.) a crear un nuevo comité llamado W3C, que es el que actualmente elabora
las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador
del HTML 3.2, que incluía muchas de las mejoras que los principales
navegadores (Netscape y Explorer) habían introducido en Internet, como son
las tablas, los applets, etc.

Este borrador fue aprobado en Enero de 1997, e inmediatamente el W3C se

puso a trabajar en la elaboración del siguiente estándar: el 4.0.

VERSIÓN 4.0

En Julio de 1997 se presenta el borrador de este estándar. Por fin, se

estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras
cosas). El 17 de Diciembre de 1997 dicho borrador fue finalmente aprobado.

Página 6
Caracteres.

Las máquinas manejan la información en formato binario (es decir, en unos y

ceros). Estos, a su vez, forman números, los cuales se traducen en letras
mediante tablas. Podemos asignar el valor 64 a la letra “a”, el 65 a la “b”, etc. El
problema está en que cada ordenador es de un fabricante distinto, y puede
adoptar una tabla diferente al resto. Para evitarlo existen diversos estándares, y
el más extendido es el ASCII. De hecho, actualmente todos los ordenadores
tienen la misma tabla ASCII para los primeros 127 caracteres. Pero, esa tabla
no contiene vocales con acento, ni eñes, ni símbolos de abrir interrogación o
exclamación.

El HTML 2.0 eligió como tabla estándar la ISO-Latin-1, que comparte con la
ASCII los 127 caracteres e incluye unos cuantos más, hasta el número 255.

Caracteres extendidos en HTML

La manera de incluir los caracteres extendidos (cuyo número está más allá del
127) consiste en encerrar el código entre los caracteres &# y ;. Así pues, lo
siguiente:

&#189;

nos debería dar un medio (½). También existe una serie de sinónimos para
poder recordar con más facilidad estos caracteres. Así, por ejemplo, &#189;

también se puede escribir como &frac12;. Vamos a ver algunos de estos

códigos, los más útiles a la hora de escribir en español:

Código Resultado
Acento agudo
&acute; ´
 á &aacute;
 é &eacute;
 í &iacute;
 ó &oacute;
 ú &uacute;
 Á &Aacute;
 É &Eacute;
 Í &Iacute;
 Ó &Oacute;
 Ú &Uacute;

Página 7
Caracteres de control

En el HTML existen cuatro caracteres de control, que se usan para formar

etiquetas, establecer parámetros, etc. Para poder emplearlos sin riesgo,
deberemos escribir los siguientes códigos:

Código Resultado
&lt; <
&gt; >
&amp; &
&quot; "

Herramientas de Edición.

Una herramienta de edición es aquella que nos va a permitir escribir el código

HTML, grabarlo con la extensión htm ó html y poder visualizarlo en nuestro
navegador.

Podemos distinguir entre varias herramientas de diseño y edición automáticas,

es decir, nos permiten generar el código automáticamente, como son:

 Front Page de Microsoft.

 Composer de Netscape.
 Dreamweaver de Macromedia.

Otras herramientas de edición “manuales” son los procesadores de texto

tradicionales (Bloc de Notas, Word Pad, Word, etc.), que como ya hemos
comentado, nos van a permitir salvar nuestros documentos con la extensión
htm o html.

Trabajar con editores de texto “manuales” es fundamental para conocer el

código HTML; si bien, las herramientas de edición tienen la gran ventaja de
“acelerar” el desarrollo de nuestra página web (enlaces o llamadas a otras
páginas (links), creación de tablas, inserción de imágenes, creación de frames,
etc.).

Por ello, es fundamental que antes de utilizar estas herramientas aprendamos

a identificar las etiquetas y atributos del código HTML, utilizando los
procesadores de texto.

Página 8
LECCIÓN 2: UNA PÁGINA WEB SENCILLA.

Crear una página web local.

Podríamos definir una página web como aquello que el usuario ve en la

ventana de su navegador, mientras que un documento web será el código
interno que genera la página, y que por lo tanto éste, contendrá elementos
visibles en la página web y otros elementos que no serán visibles en ningún
momento en la ventana del navegador.

Los documentos HTML son un conjunto de elementos anidados que, como ya

hemos visto, se componen de etiquetas y atributos.

Tres son las etiquetas que describen la estructura general de un documento, y

dan una información sencilla sobre él. Estas etiquetas no afectan a la
apariencia del documento, y sólo interpretan y filtran los archivos HTML.

<HTML>: Limita el documento e indica que se encuentra

escrito en este lenguaje.

<HEAD>: Especifica el prólogo del resto del archivo.

<TITLE> que será utilizado por los marcadores del navegador

e identificará el contenido de la página. Sólo puede haber un
título por documento, preferiblemente corto, aunque
significativo, y no caben otras etiquetas dentro de él. En
“head” no hay que colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.

Vamos a crear nuestra primera página, en la que vamos a empezar a utilizar

etiquetas y atributos; para ello, vamos a utilizar el “Bloc de notas” de Windows
(InicioProgramasAccesoriosbloc de notas):

Ejemplo:

<HTML>
<HEAD>
<TITLE> Título del documento</TITLE>
</HEAD>

<BODY>

cuerpo del documento

Página 9
 <BODY>
</HTML>

Figura 1.1

El resultado en nuestro navegador es el siguiente:

Figura 1.2

Página 10
La marca <HTML>.

Lo primero que deberemos indicar es que el texto que estamos componiendo

es un documento HTML. Lo indicaremos así:

<HTML> ... </HTML>

Si editamos una página con cualquier editor de texto veremos que lo primero
que pone es algo así (dan igual mayúsculas que minúsculas, pero, a partir de
ahora, usaremos las mayúsculas por cuestión de claridad):

<HTML>

Y que lo ultimo es

</HTML>

Coge cualquier página Web y accede a su código fuente a través del menú de
Ver del navegador, seleccionando la opción código fuente, y observa como la
primera etiqueta que encuentras es <HTML> y la última </HTML>

Las marcas <HEAD> y <BODY>.

Un documento HTML tiene una estructura que lo separa en dos partes:

cabecera y cuerpo. Lo primero que hay que incluir en el código es la cabecera.
La escribimos:

<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>

que indica la cabecera de la pagina, la cual sirve para introducir gran cantidad
de información que le es sobre todo útil al servidor donde colocas tu página,
una de las mas importante es:

<HEAD>

<TITLE>

Esto es el título del documento

Página 11
 </TITLE>

</HEAD>

Más adelante hablaremos de <TITLE>

Ahora, vamos a indicar el contenido. Lo primero será indicar que estamos en el
cuerpo del documento:

<BODY> ... </BODY>

Luego, pondremos el título algo recalcado y centrado (estos atributos los

veremos más adelante):

<CENTER><H1> ... </H1></CENTER>

Con esto, colocaremos el texto centrado (<CENTER>) y en formato <H1>

(cabecera 1), que nos asegura que aumentará el tamaño del tipo de letra lo
suficiente como para que se vea bastante resaltado. Luego, separaremos ese
título que le hemos puesto a la página del texto, por medio de una línea
horizontal (la línea horizontal se explica en el punto 2.7):

<HR>

La línea horizontal, como veremos más adelante, carece de etiqueta de cierre.

<P> lo utilizamos para indicarle que queremos separar el texto de la línea
horizontal con un espacio vertical correspondiente a un párrafo nuevo, le
decimos (párrafos se explica en el punto 2.6):

<P> Esta es mi primera p&aacutegina. De momento

no tiene mucho pero ya pondr&eacute
muchas m&aacutes cosas interesantes.</P>

Vamos a ver cuáles son los parámetros que admite la etiqueta “<BODY>”:

Parámetro Utilidad
BACKGROUND Permite definir un gráfico de fondo para la página.
BGCOLOR Permite definir el color de fondo de la página.
BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo
de la página permanecerá inmóvil, aunque utilicemos las
barras de desplazamiento.
TEXT Cambia el color del texto.
LINK Cambia el color de un enlace no visitado (por defecto,
azul)
VLINK Cambia el color de un enlace ya visitado (por defecto,
púrpura).
ALINK Cambia el color que toma un enlace mientras lo estamos
pulsando (por defecto, rojo).
LEFTMARGIN y Especifican el número de píxeles que dejará de margen
TOPMARGIN entre el borde de la ventana y el contenido de la página.
Página 12
 Se suelen utilizar para dejarlos a cero.

La marca <TITLE>.

La utilizaremos para poner el título al documento, de modo que cuando se

cargue la página en el navegador aparecerá ese título en la barra de título, en
el caso de omitirlo la página aparecería como intitulada, rompiendo en parte la
estética del documento.

Esta etiqueta lleva etiqueta de apertura y de cierre.

La marca “<TITLE>” la escribiremos siempre dentro de la cabecera “<HEAD>”.

La escribimos:

<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>

Con esto que hemos visto tenemos ya una página muy básica pero completa,
campos a poner un ejemplo:

<HTML>
<HEAD>
<TITLE>
Titulo de mi página
</TITLE>
</HEAD>
<BODY>
Este es un ejemplo MUY básico de una Página reducida puedes
copiarla y guardarla con tu editor de textos favorito con el nombre
que prefieras, guardarlo con la extensión *.htm o *.html, y así
poder abrir tu primera obra en HTML con cualquier navegador.
Fíjate que en el código fuente hay un salto de línea, pero no sale
en el navegador.
Y aquí hay un gran                        espacio, pero tampoco sale.
Ya veremos como se soluciona esto.

</BODY>
</HTML>

Cabeceras.

Página 13
La cabecera abarca todo el código entre las etiquetas <HEAD> y </HEAD>, su
contenido no es visible en la ventana del navegador y puede contener los
siguientes elementos:

 Titulo de la página
 Etiquetas BASE, LINK, ISINDEX
 META Tags
 Declaraciones de estilos, mediante la etiqueta STYLE
 Códigos de lenguajes de script en cliente: JavaScript, VBScript, etc.
 Códigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.

Dentro de la cabecera escribiremos el título de la página. Es lo que veremos

como título de la ventana en los navegadores que lo permitan. Es como se
conocerá nuestra página en algunos buscadores y en la agenda de direcciones
(bookmarks) de los usuarios. Por tanto, parece importante pensarnos bien
cómo llamarla.

Suele ser el lugar más indicado para colocar aquellos elementos de la página
que no alteren el contenido de la misma, aunque sí la forma de presentarlo y
su comportamiento. Es por eso que es el lugar más recomendable para colocar
los scripts y las hojas de estilo, como veremos en los capítulos
correspondientes.

Página 14