El Lenguaje HTML

El lenguaje HTML
Las pginas Web estn creadas con el lenguaje HTML (Hyper Text Markup Languaje).
Un documento HTML es un fichero de texto ASCII, en el que se incluye el texto que se desea
mostrar por pantalla. Adems de este texto hay que introducir ciertas instrucciones o comandos,
tambin denominadas etiquetas, que indicarn al navegador como se debe visualizar el
documento en pantalla.
Estructura bsica de un documento HTML
Todo documento HTML est dividido en una serie de bloques que forman su estructura.
<HTML> y </HTML> indica que el texto contenido entre estas dos etiquetas est escrito en
lenguaje HTML.
<HEAD> y </HEAD> informacin del documento que no se muestra, suele contener el ttulo de la
pgina Web, que visualizar la barra de ttulo del navegador.
<BODY> y </BODY> definen la parte principal o el cuerpo del documento, que se mostrar en la
ventana del navegador.
La estructura bsica del documento HTML queda de esta manera:
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>
Como crear un documento HTML
Crear una carpeta dentro del disco duro, denominada 1Bachillerato Ciencias o CC.SS
Abrir el bloc de notas (Men Inicio /Programas /Accesorios)
Escribir en el bloc de notas el documento HTML
Guardar el documento anterior (Men Archivo /Guardar) en la carpeta creada anteriormente , con
el nombre PaginaWeb.htm (ojo la extensin es obligado que sea .htm .html)
Para abrir la pgina web creada basta con ir a la carpeta creada y hacer doble clic sobre el fichero
PaginaWeb
Ejemplo:
<HTML>
<HEAD>
<TITLE> Mi primera pgina Web </TITLE>
</HEAD>
<BODY>
Informtica de 1 Bachillerato
Esta pgina ha sido creada por: Fulanito
</BODY>
</HTML>
Modificar una pgina web anteriormente creada
Para modificar una pgina web:
Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo)
Activar el men Ver y elegir la opcin Cdigo Fuente
Dentro del bloc de notas podremos realizar las oportunas modificaciones
Guardamos los cambios efectuados mediante el men Archivo / Guardar
Cerramos el bloc de notas
Dentro del navegador: activar el men Ver y elegir la opcin Actualizar o pulsar F5
Encabezados
Se utiliza para destacar un texto. Existen seis niveles de encabezados, descritos por las siguientes
etiquetas:
<H1>Encabezado de Tamao 1</H1> Encabezado de mayor tamao
<H2>Encabezado de Tamao 2</H2>

<H6>Encabezado de Tamao 6</H6> Encabezado de menor tamao
Atributos:
ALIGN=left/center/right: Definen el alineamiento del encabezado. Por defecto es left.
Ejemplos: Hay que poner esto dentro del BODY o cuerpo del documento HTML
<H1 ALIGN = "center"> Encabezado de mayor tamao, alineado al centro </H1>
<H6 ALIGN = "right"> Encabezado de menor tamao, alineado a la derecha </H6>
Prrafos
La separacin entre prrafos (dejando una lnea en blanco) la conseguimos colocando la etiqueta
<P> al inicio de cada uno. Cuando escribimos en el documento el texto que queremos que
aparezca en la pantalla, veremos que ste se acomoda a ella, sin considerar los retornos del carro
en el documento fuente.
Atributos:
ALIGN=left/center/right/justify: Definen el alineamiento del encabezado. Por defecto es left.
Nota: Con los prrafos no es necesario colocar la etiqueta de final de prrafo </P>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Mi pgina web - 1</TITLE>
</HEAD>
<BODY>
<H1 align=center>Mi primera pagina</H1>
<P>Esta es mi primera pagina, aunque todava es muy sencilla.
Como el lenguaje HTML no es difcil, pronto estar en condiciones de hacer
cosas mas interesantes.
<P ALIGN="RIGHT">Aqu va un segundo prrafo alineado a la derecha.
</BODY>
</HTML>
Crear lneas horizontales
Para crear lneas horizontales debemos utilizar la etiqueta <HR>
Nota: Al igual que con los prrafos, no es necesario poner la etiqueta de fin de lnea </HR>
Ejemplo: </P>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Mi pgina web - 2</TITLE>
</HEAD>
<BODY>
<H1 align="center">Mi segunda pagina</H1>
<P> A continuacin aparecer una lnea horizontal
<HR>
</BODY>
</HTML>
Formato fsico
El texto formateado de esta manera se vera igual en todos los navegadores.
<B>[Texto]</B> Texto en Negrita

<I>[Texto]</I> Texto en cursiva
<U>[Texto]</U> Texto Subrayado
<STRIKE>[Texto]</STRIKE> Texto Tachado
<TT>[Texto]</TT> Texto tipo Mquina
<BIG>[Texto]</BIG> Texto en Fuente Grande
<SMALL>[Texto]</SMALL> Texto en Fuente Pequea
<SUB>[Texto]</SUB> Texto como Subndice
<SUP>[Texto]</SUP> Texto como Superndice
Nota: Con la etiqueta <TT> y </TT> conseguimos tambin que el texto tenga un tamao menor y la
apariencia de los caracteres de una mquina de escribir (typewriter).
Imgenes
Los tres tipos de imgenes que soportan una pgina Web son:
Imgenes GIF (soportan hasta 256 colores), utilizado para dibujos, ilustraciones, cuadros, etc.
Imgenes JPEG/JPG (pueden presentar 16,7 millones de colores), utilizado principalmente para
fotografas.
Imgenes PNG que no es soportado por las versiones ms antiguas de los navegadores.
Estos formatos de imagen utilizan algoritmos de compresin que permiten reducir
significativamente el tamao de la imagen a comparacin de otros formatos grficos, lo que
permite una carga ms rpida.
Un aspecto muy importante a tener en cuenta, es el tamao de las imgenes, pues una imagen
grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el
consiguiente riesgo de que quien est intentando cargar nuestra pgina se canse de esperar, y
desista de ello.
Para tener una imagen en nuestra pgina hay que cumplir 2 requisitos:
Tener guardada en la misma carpeta donde este nuestra pgina, la imagen que queremos mostrar
Incluir la etiqueta siguiente dentro del BODY de nuestra pgina web: <IMG SRC="foto.gif"> (caso
de llamarse nuestra imagen "foto" y ser de tipo GIF)
El comando IMG SRC (IMaGe SouRCe, fuente de la imagen), indica el nombre de la imagen.
Atributos:
Con el atributo ALT se introduce una descripcin (una palabra o una frase breve) indicativa de la
imagen, que aparece cuando el puntero del ratn se posiciona dentro de la imagen o durante el
proceso de carga de la imagen.
<IMG SRC="foto.gif" ALT="descripcin">
Con el atributo ALIGN se puede elegir la posicin de la imagen con respecto al texto:
<IMG SRC="foto.gif" ALIGN="TOP"> Texto alineado arriba
<IMG SRC="foto.gif" ALIGN="MIDDLE"> Texto alineado en medio
<IMG SRC="foto.gif" ALIGN="BOTTOM"> Texto alineado abajo

<IMG SRC="foto.gif" ALIGN="RIGHT"> Texto alineado a la derecha
<IMG SRC="foto.gif" ALIGN="LEFT"> Texto alineado abajo
Con el atributo WIDTH y HEIGHT, se especifica la anchura y altura en pxeles con las que se va a
mostrar la imagen. Es muy importante que figuren los atributos de anchura y altura, porque eso
permite al navegador que reserve un espacio para la imagen y contine cargando el resto de la
pgina aunque no haya recibido completamente la imagen.
Ejemplo:
<IMG SRC="foto.jpg" WIDTH="28" HEIGHT="25" ALIGN="center" ALT="marca de aviso">
Nota: Para poder saber el alto y ancho en pxeles de una imagen hay que pulsar el botn derecho
sobre el archivo de imagen y elegir Propiedades.
Color en la pgina Web
Se consigue aadiendo el atributo BGCOLOR (color de fondo) y TEXT (color del texto) a la etiqueta
<BODY> (situada al principio del documento), de la siguiente manera:
<BODY BGCOLOR="blue" TEXT = "yellow">
Nota: Se puede utilizar cualquier color expresado en ingls (red, green, maroon, etc.)
Tambin los colores se pueden expresar de la siguiente forma:
<BODY BGCOLOR="#rrggbb" TEXT = "#rrggbb">
donde:
rr es un nmero indicativo de la cantidad de color rojo

gg es un nmero indicativo de la cantidad de color verde
bb es un nmero indicativo de la cantidad de color azul
Estos nmeros estn en numeracin hexadecimal (0 1 2 3 4 5 6 7 8 9 A B C D E F).
Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color
rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores.
Adems del nmero, es posible escribir en su lugar el nombre del color elegido (como hemos visto
anteriormente). Esto solo es posible para algunos colores definidos en la programacin de los
navegadores, por lo que slo se vern en algunos de ellos. El estndar HTML 3.2 propone los
siguientes colores:
Black = "#000000" White = "#FFFFFF", Yellow = "#FFFF00", Green = "#008000"
Red = "#FF0000", Blue = "#0000FF", Maroon = "#800000", Navy = "#000080"
Silver = "#C0C0C0", Lime = "#00FF00", Gray = "#808080", Olive = "#808000"
Purple = "#800080", Teal = "#008080", Fuchsia = "#FF00FF", Aqua = "#00FFFF"
Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros
dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro
con #550000.
Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar los otros dos
colores hacindolos ms claros (nmero ms alto), en una cantidad igual. As, podemos convertir
el rojo en rosa con #FF7070.
Enlaces a otras paginas o a direcciones de correo

Para crear un enlace a una pgina web de Internet tenemos que utilizar la etiqueta:
<A HREF="http:direccin de la pgina web"> Texto que sale en la pgina </A>
Ejemplo: si queremos tener un enlace a la pgina web de Ya.com, cuando nos aproximemos al
texto pagina web de ya y hacer clic sobre l, tenemos que incluir la siguiente etiqueta:
<A HREF="http:\\www.ya.com"> pgina web de ya </A>
Para crear un enlace a una pgina web creada por nosotros tenemos que utilizar la etiqueta:
<A HREF="nombre de la pgina web"> texto que sale en la pgina </A>
Ejemplo: si queremos tener un enlace a una pgina web denominada pagina.htm, cuando nos
aproximemos al texto mi pagina y hacer clic sobre l, tenemos que incluir la siguiente etiqueta:
Nota: La pgina donde va el enlace deber estar creada en la misma carpeta que la pgina
principal
<A HREF="pagina.htm"> mi pgina
Para crear un enlace a una direccin de correo electrnico tenemos que utilizar la etiqueta:
<A HREF="mailto:direccin de correo"> texto que sale en la pgina </A>
Ejemplo: si queremos tener un enlace a la direccin de correo electrnico juan@yahoo.es, cuando

nos aproximemos al texto correo de Juan y hacer clic sobre l, tenemos que incluir la siguiente
etiqueta:
<A HREF="mailto:juan@yahoo.es"> Correo de Juan </A>

Tablas
Para definir una tabla en una pgina web utilizaremos la estructura siguiente, dentro del <BODY> o
cuerpo de la pgina web:
<TABLE BORDER> </TABLE> indican el principio y fin de una tabla
<TR> </TR> muestran una fila de la tabla
<TD> Texto que aparece en la celda </TD> celda que pertenece a una determinada fila
Ejemplo: Para construir una tabla de 2 filas y 3 columnas deberemos incluir las siguientes
etiquetas:
<TABLE BORDER>
<TR>
<TD> 1 CELDA </TD>
<TD> 2 CELDA </TD>
<TD> 3 CELDA </TD>
</TR>
<TR>
<TD> 4 CELDA </TD>

<TD> 5 CELDA </TD>
<TD> 6 CELDA </TD>
</TR>
</TABLE>
Uniones de celdas:
Para conseguir que una celda ocupe 2 o ms filas tendremos que aadir el siguiente atributo a la
celda:
<TD RowSpan="2"> la celda ocupar 2 filas
<TD RowSpan="3"> la celda ocupar 3 filas
Para conseguir que una celda ocupe 2 o ms columna tendremos que aadir el siguiente atributo a
la celda:
<TD ColSpan="2"> la celda ocupar 2 columnas
<TD ColSpan="3"> la celda ocupar 3 columnas
Ejemplo: Si queremos crear una tabla de 2 filas y 2 columnas de tal forma que la 1 fila contenga
una sola celda que ocupe las dos columnas:
<TABLE BORDER>
<TR>
<TD ColSpan="2"> Esta celda ocupa 2 columnas </TD>
</TR>
<TR>
<TD> Una celda </TD>
<TD> Otra celda </TD>
</TR>
</TABLE>
Listas
A menudo nos interesar presentar las cosas en forma de listas. Podemos escoger entre tres tipos
distintos:
Listas desordenadas (no numeradas)
Listas ordenadas (numeradas)
Listas de definicin.
1. Listas desordenadas: (Unordered Lists)
Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas
por un nmero. Su estructura es la siguiente:
<UL>
<LI> Primer tem
<LI> Segundo tem
<LI> Etc.
</UL>
Es decir, toda la lista est dentro de la etiqueta <UL> y </UL>, y luego cada tem va precedido de la
etiqueta <LI> (List Item).
Nota: no es necesario cerrar la etiqueta <LI> con </LI>
Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
2. Las listas ordenadas (Ordered Lists)
Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior.
La diferencia est en que en el resultado aparecer automticamente un nmero correlativo para
cada cosa.
<OL>
<LI> Primer tem
<LI> Segundo tem
<LI> Tercer tem
<LI> Etc.
</OL>
Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas.
3. Listas de definicin.
Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista
debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto,
cada rengln de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con la
etiqueta <DT> (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta
<DD> (definition definition).
<DL>
<DT> Una cosa a definir
<DD> La definicin de esta cosa
<DT> Otra cosa a definir
<DD> La definicin de esta otra cosa
</DL>
Marcos
Podramos decir que una estructura de marcos es una artimaa que hace posible dividir la pantalla
en varias zonas que nos permiten presentar en cada una de ellas una pgina independiente.
Las etiquetas que nos sirven para contener la definicin del marco son <frameset> </frameset>
Internet Explorer presenta la pgina aunque olvidemos el cierre </frameset>, pero Netscape no.
Estas etiquetas no se colocan en el <BODY> como todas las anteriormente vistas, sino que detrs
de la cabecera </HEAD> y antes del <BODY>
Distribucin del espacio en columnas o filas
Lgicamente la mera indicacin de que queremos crear una estructura de frames no es suficiente:
habr que indicar si la distribucin se har en vertical o en horizontal y cuantas zonas queremos
crear.
La definicin de los espacios se puede hacer en trminos absolutos (pxeles) o relativos (% de
ventana). El signo * representa el resto de la ventana.
A continuacin se muestran algunos ejemplos de posibles divisiones de la pantalla.
Dos columnas con una medida absoluta para la primera:
<frameset cols="130,*">
Dos columnas con medidas relativas
<frameset cols="25%,75%*">
Tres filas con medidas absolutas para la superior y la inferior
<frameset rows="25,*,50">
Dos filas con definicin relativa
<frameset rows="10%,*">
Contenido de los marcos
Una vez establecida la distribucin general habr que indicar al navegador cul es el contenido
que tendr que mostrar en cada marco la primera vez que se cargue la pgina.
Para indicar el contenido de cada marco se utiliza la etiqueta <frame>, que no necesita cierre con
los siguientes atributos:
name: Servir para identificar el marco cuando se realicen enlaces a una pgina con este tipo de
estructura.
src: Indicar cul es el contenido inicial del marco cuando se cargue por primera vez la pgina.
Lo que se acaba de comentar podra ser suficiente para crear una pgina basada en marcos, pero
lo ideal es crear una pgina siguiendo el esquema siguiente, en el que se indica la estructura de los
marcos pero se ofrece, a travs de la etiqueta noframes, una alternativa para el caso de
navegadores que no puedan mostrarlos y, adems, se incluye un ttulo en la cabecera.
Ejemplo:
<html>
<head>
<title> Pgina de Marcos</title>
</head>
<frameset cols="25%,*">
<frame name = "izquierda" src ="Indice.htm" >
<frame name = "derecha" src = "Contenidos.htm">
</frameset>
<noframes>
<body>
[Aqui van las etiquetas para definir la pagina en caso de que no soporte los marcos]
</body>
</noframes>
</html>
Los vnculos en los marcos
Establecer un vnculo que apunte a una determinada pgina ser una tarea que realizaremos de la
forma habitual. Sin embargo tendremos que tener en cuenta un pequeo detalle: cada enlace se
abrir en el marco desde el que ha sido invocado, por lo que, cuando queramos que una pgina se
presente en un marco diferente a aqul desde el que la llamamos tendremos que especificarlo.
Para especificar en que marco queremos que se abra un determinado enlace, tenemos que aadir
el atributo target en la etiqueta <frame> de la siguiente forma:
<frame name="Nombre_Marco" src="Pagina.htm" target = "Nombre_del_Marco_Enlace">
Ejemplo:
Si escogemos el ejemplo anterior, est claro que nuestra intencin es mantener siempre visible el
listado de posibilidades en el marco denominado izquierda, de forma que las pginas a las que nos
referimos aparezcan en el marco al que hemos llamado derecha (o arriba y abajo si hemos optado
por una definicin en filas), para conseguir esto tenemos que aadir el atributo target al marco de
la izquierda de la siguiente forma:
<frame name = "izquierda" src ="Indice.htm" target="derech

El Lenguaje HTML - Teoria

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

El Lenguaje HTML - Teoria

Uploaded by

Copyright:

Available Formats

Estructura bsica de un documento HTML

La estructura bsica del documento HTML queda de esta manera:

<TITLE> Ttulo de la pgina </TITLE>

[Aqu van las etiquetas que visualizan la pgina]

Como crear un documento HTML

Abrir el bloc de notas (Men Inicio /Programas /Accesorios)

Escribir en el bloc de notas el documento HTML

<TITLE> Mi primera pgina Web </TITLE>

Modificar una pgina web anteriormente creada

Para modificar una pgina web:

Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo)

Activar el men Ver y elegir la opcin Cdigo Fuente

Dentro del bloc de notas podremos realizar las oportunas modificaciones

Guardamos los cambios efectuados mediante el men Archivo / Guardar

Cerramos el bloc de notas

<H1>Encabezado de Tamao 1</H1> Encabezado de mayor tamao

<H2>Encabezado de Tamao 2</H2>

<H3>Encabezado de Tamao 3</H3>

<H4>Encabezado de Tamao 4</H4>

<H6>Encabezado de Tamao 6</H6> Encabezado de menor tamao

ALIGN=left/center/right: Definen el alineamiento del encabezado. Por defecto es left.

<H1 ALIGN = "center"> Encabezado de mayor tamao, alineado al centro </H1>

<H6 ALIGN = "right"> Encabezado de menor tamao, alineado a la derecha </H6>

ALIGN=left/center/right/justify: Definen el alineamiento del encabezado. Por defecto es left.

<TITLE>Mi pgina web - 1</TITLE>

<H1 align=center>Mi primera pagina</H1>

<P>Esta es mi primera pagina, aunque todava es muy sencilla.

Como el lenguaje HTML no es difcil, pronto estar en condiciones de hacer

cosas mas interesantes.

<P ALIGN="RIGHT">Aqu va un segundo prrafo alineado a la derecha.

Crear lneas horizontales

Para crear lneas horizontales debemos utilizar la etiqueta <HR>

<TITLE>Mi pgina web - 2</TITLE>

<H1 align="center">Mi segunda pagina</H1>

<P> A continuacin aparecer una lnea horizontal

El texto formateado de esta manera se vera igual en todos los navegadores.

<B>[Texto]</B> Texto en Negrita

<U>[Texto]</U> Texto Subrayado

<STRIKE>[Texto]</STRIKE> Texto Tachado

<TT>[Texto]</TT> Texto tipo Mquina

<BIG>[Texto]</BIG> Texto en Fuente Grande

<SMALL>[Texto]</SMALL> Texto en Fuente Pequea

<SUB>[Texto]</SUB> Texto como Subndice

<SUP>[Texto]</SUP> Texto como Superndice

<IMG SRC="foto.gif" ALT="descripcin">

<IMG SRC="foto.gif" ALIGN="TOP"> Texto alineado arriba

<IMG SRC="foto.gif" ALIGN="MIDDLE"> Texto alineado en medio

<IMG SRC="foto.gif" ALIGN="BOTTOM"> Texto alineado abajo

<IMG SRC="foto.gif" ALIGN="LEFT"> Texto alineado abajo

<IMG SRC="foto.jpg" WIDTH="28" HEIGHT="25" ALIGN="center" ALT="marca de aviso">

Color en la pgina Web

<BODY BGCOLOR="blue" TEXT = "yellow">

Tambin los colores se pueden expresar de la siguiente forma:

<BODY BGCOLOR="#rrggbb" TEXT = "#rrggbb">

rr es un nmero indicativo de la cantidad de color rojo

bb es un nmero indicativo de la cantidad de color azul

Estos nmeros estn en numeracin hexadecimal (0 1 2 3 4 5 6 7 8 9 A B C D E F).

Black = "#000000" White = "#FFFFFF", Yellow = "#FFFF00", Green = "#008000"

Red = "#FF0000", Blue = "#0000FF", Maroon = "#800000", Navy = "#000080"

Silver = "#C0C0C0", Lime = "#00FF00", Gray = "#808080", Olive = "#808000"

Purple = "#800080", Teal = "#008080", Fuchsia = "#FF00FF", Aqua = "#00FFFF"

Enlaces a otras paginas o a direcciones de correo