Lenguaje HTML

Colegio Don Bosco – El Prado 3ro.
Secundaria
EL LENGUAJE HTML
El Lenguaje HTML (HiperText Markup Lenguaje; Lenguaje de Marcación de Hipertexto) fue diseñado en
1989, por el físico nuclear TIM BERNERS-LEE el cual propuso diseñar un sistema de acceso unificado a datos
del “Centro Europeo para la Investigación Nuclear” (CEIN). Es entonces que se desarrollo un programa
basado en el manejo de texto y enlaces, A LO QUE SE DENOMINA Hipertexto; para lo cual también se
desarrollo un protocolo de comunicaciones, denominado HTTP (Hyper Text Transfer Protocol); con dicho
programa los científicos de la CEIN podían acceder a la información de su interés, desde cualquier Terminal
unificada en la organización o fuera de ella. El programa alcanzo un éxito enorme, de tal forma se comenzó a
definir un lenguaje de creación de documentos estructurados, al cual se denomino HTML.
EL HTML
El Lenguaje HTML no es propiamente catalogado como un lenguaje de programación al igual que Visual Basic o
Java, puesto que carece de muchos elementos (estructura de control, tipos de datos, operadores, etc). Más
bien es un lenguaje que permite definir una serie de instrucciones (etiquetas o marcas) aplicados al texto, el
cual será interpretado por un programa conocido como navegador. El HTML es el código base utilizado para
desarrollar los documentos WEB.
HTML es un lenguaje basado en "etiquetas". La mayoría de las funciones o comandos tienen una etiqueta inicial
y una etiqueta final. No todos los navegadores (browsers) soportan todas las funciones o comandos de HTML.
CARACTERISTICAS
 El Lenguaje HTML no posee un entorno integrado propio para escribir el código, entonces se recurre
a cualquier editor de texto, así como: el Block de Notas, Editor del D.O.S., o cualquier editor que
almacene texto sin formato. También existen programas específicos que permiten desarrollar o
diseñar los documentos Web, así como: el Dreamwaver, Front Page, Microsoft Visual InterDev y otros
que se pueden encontrar en el Internet.
 El lenguaje HTML es un soporte para que se puedan incluir instrucciones de los lenguajes de
secuencias de comandos como el JavaScrip VBScrip, ActionScrip, PHP a ASP.
 El lenguaje HTML no esta provisto de un depurador, puesto que no verifica los errores de sintaxis
cometidos, la única forma de detectar el error es cuando el documento no se visualiza correctamente
en el navegador.
 Los documentos Web desarrollados íntegramente con el lenguaje HTML, llevan la extensión .HTM o
bien .HTML.
LAS INSTRUCCIONES
Las instrucciones en HTML son denominadas etiquetas o marcas (Tag en Ingles). Las Etiquetas presentan dos
formatos diferentes:
Formato 1. ** Etiquetas Cerradas **

<Etiqueta [Aributo1, atributo2,…]>
Texto que es afectado por la etiqueta
</Etiqueta>
Sergio B. Ojeda 1
Colegio Don Bosco – El Prado 3ro. Secundaria
En este caso la etiqueta se inicia en un punto específico y debe terminar o cerrarse en otro necesariamente,
en caso contrario la etiqueta seguirá activa hasta que se cierre.
Por Ejemplo:
<FONT FACE = Verdana SIZE = 7>
Este texto tiene tipo de letra Verdana y tamaño 7
</FONT>
Este texto no tiene formato
Forma 2. ** Etiquetas Abiertas **

<Etiqueta [Atributo1, atributo2, . . .]>
Este otro caso la etiqueta se inicia en un punto y no tiene la necesidad de terminar en otro, como ser: insertar
líneas horizontales <HR>, imágenes <IMG> o saltos de línea <BR>.
Por Ejemplo:
<Hr NosHade>
Este texto no tiene formato
ESTRUCTURA BASICAS DE UN DOCUMENTO WEB
<HTML>
<HEAD>
<TITLE>
Sección de
Encabezado Identificador interno del documento Web
</TITLE>
Sección del
</HEAD>
Cuerpo
<BODY>
Todo elemento definido en esta zona es visible en el Navegador
</BODY>
</HTML>
LA ETIQUETA HTML
La etiqueta HTML inicia y termina el documento Web.
LA ETIQUETA HEAD
La etiqueta HEAD inicia y termina la sección del encabezado, en esta sección se pueden incluir segmentos de
códigos de otros lenguajes, principalmente los Scripts; también se define el titulo interno del documento con
<TITLE>; se puede incluir el nombre de programa que utilizo para generar el código HTML.
LA ETIQUETA BODY
La etiqueta BODY, define la apariencia global del documento, además inicia y termina la sección visible e
interpretable (texto, imágenes, enlaces, etc.) del documento en el explorador Web.
2 Sergio B. Ojeda
Ejemplo 1: Crearemos una página Web que muestre el nombre del conocido Juan Pérez.
Primero: En el Bloc de Notas escriba el siguiente código.
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mi nombre es Juan Pérez y no te olvides visitar mi página
www.juan-perez.com
</BODY>
</HTML>
Segundo: En el Explorador de Windows

crea una carpeta donde guardaras tus
archivos.
Tercero: Guárdalo con el nombre
"Ejemplo1.htm" y recuerda colocar las
comillas.
Cuarto: Abre el Internet Explorer y
mediante su menú Archivo/Abrir carga
tu documento.
Puedes ver el resultado en la ventana de
a derecha.
 Observa que el título de la ventana

es lo que pusiste entre las etiquetas
<TITLE> y </TITLE>.
 Observa que lo que parece en la
página es lo que pusiste dentro de
las etiquetas <BODY> y </BODY>.
Recomendación Súper Importante: Es mejor colocar todos los elementos de tu página Web en una sola
carpeta, para que el HTML no tenga problemas al ubicar los archivos, por ejemplo puedes guardarlo todo en la
carpeta: E:\Tu Nombre\HTML\.
ENCABEZADOS
Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaños de encabezado el más
grande esta comprendido entre las etiquetas <H1> y </H1> y el más pequeño esta comprendido entre las
etiquetas <H6> y </H6>.
Formato:
<Hx ALIGN=”Alineación”> Texto Afectado </Hx>
Donde:
x puede asumir los valores de 1, 3, 4, 5, 6

“Alineación” es LEFT (Izquierda), CENTER (Centro) o RIGHT (Derecha)
Sergio B. Ojeda 3
Si quiere alinear el encabezado utilicé el atributo ALIGN con la opción LEFT(izquierda), CENTER(Centro),
RIGHT(Derecha) o JUSTIFY(Justificado). Si no usa ALIGN el HTML supondrá la alineación LEFT(Izquierda).
Ejemplo 2: Crearemos una página Web que muestre el uso de los encabezados.
Primero: En el bloc de notas escriba el siguiente código.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Frases Famosas</H1>
<H2>Ganar no es todo, es lo único.</H2>
<H3>El secreto de andar sobre las aguas, es saber donde están las piedras.</H3>
<H4 ALIGN=RIGHT>Si piensas que puedes o no puedes, siempre tienes razón.</H4>
<H5 ALIGN=RIGHT>El conocimiento es poder.</H5>
<H6> Prohibido, prohibir.</H6>
Que bonitas frases.
</BODY>
</HTML>
Segundo: Guárdalo con el nombre "Ejemplo2.htm"

Tercero: Abre el Internet Explorer y mediante su menú Archivo/Abrir carga tu documento
El resultado se muestra en la siguiente ventana:
4 Sergio B. Ojeda
ESTILOS DE LETRA
Los estilos más conocidos utilizan las siguientes etiquetas:
FORMATO VISTA
<B> Texto en Negrita </B> Texto en Negrita
<U> Texto Subrayado </U> Texto Subrayado
<I> Texto en Cursiva </I> Texto en Cursiva
<S> Texto Tachado </S> Texto Tachado
Texto en Superindice
<Sup> Texto en Superíndice </Sup> X
<Sup> Texto en Subíndice </Sup> X
Texto en Subindice
LA ETIQUETA <FONT>
La etiqueta FONT, permite cambiar el tamaño, color y el tipo de texto en todo el documento o una parte
específica, incluyendo formularios, tablas y otros elementos; los atributos se pueden utilizar de manera
independiente.
Formato:
<FONT FACE=”TipodeFuente” COLOR=“Color” SIZE=“Tamaño”>
Texto afectado
</FONT>
Donde:
“TipodeFuente” es el tipo de letra deseado, por ejemplo: ARIAL, TAHOMA, IMPACT, etc.
“Color” es el color de la letra (escrita en inglés);
“Tamaño” es el tamaño de la letra y puede tener un valor entre 1 y 7, aunque si le coloca otro número no
mandará error, pero tampoco le hará caso. Por defecto el tamaño es 3.
También:
<FONT FACE=”TipodeFuente” COLOR=“Color” SIZE=+“T”> y </FONT>
<FONT FACE=”TipodeFuente” COLOR=“Color” SIZE=-“T”> y </FONT>
Donde:
+“T” indica que la letra saldrá T puntos más grande del tamaño que tiene actualmente.
-“T” indica que la letra saldrá T puntos más pequeño del tamaño que tiene actualmente.
Ejemplo 3: Crearemos una página Web que muestre el uso de los estilos de letra.
Primero: En el bloc de notas escriba el siguiente código.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT FACE=IMPACT COLOR=BLUE>Fórmulas
Conocidas</FONT></U></H1>
Las siguientes <I>Formulas</I> son muy conocidas y <B>peligrosas de usar</B>.
Sergio B. Ojeda 5
Por lo tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio <S>super

seguro</S> en lo más profundo de la <FONT FACE=VERDANA
COLOR=BROWN>tierra</FONT>.
Fórmula del <FONT FACE=ARIAL COLOR=GREEN
SIZE=+4>agua</FONT>:H<SUB>2</SUB>O
Fórmula de la energía una <FONT FACE=ARIAL SIZE=-2>partícula</FONT>:
E=mc<SUP>2</SUP>
</BODY>
</HTML>

Tercero: En Internet Explorer carga tu documento Ejemplo3.htm
El resultado se muestra en la siguiente ventana:
ALINEACIÓN DE TEXTO
LA ETIQUETA <P>
La etiqueta P, permite definir y alinear párrafos.
Formato:
<P ALIGN=”Alineación”>
Párrafo afectado
</P>
Donde:
“Alineación” es LEFT (Izquierda), CENTER (Centro) o RIGTH (Derecha)
6 Sergio B. Ojeda
LA ETIQUETA <CENTER>
La etiqueta CENTER, se utiliza para centrar el texto o la imagen en el documento.
Formato:
<CENTER>
Texto o imagen afectados
</CENTER>
PÁRRAFOS Y ESPACIOS EN BLANCO
Como habrá notado en el ejemplo anterior, el HTML no hace caso a los retornos de carro (o sea los ENTER)
normales ni tampoco a múltiples espacios en blanco de la barra espaciadora.
Las siguientes etiquetas permiten manipular los retornos de carro y los espacios en blanco, note que ninguna
tiene etiqueta de cierre:
<P> Inicia un nuevo párrafo dejando una línea en blanco.

<BR> Inicia un nuevo párrafo sin dejar ninguna línea en blanco.
Produce un espacio en blanco. En realidad no es una etiqueta sino el carácter de
espacio en blanco.
Ejemplo 4: Modifique el ejemplo anterior para que se vea más presentable.

Primero: En el bloc de notas modifique el código del ejemplo anterior, tal como se muestra.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER><U><FONT FACE=IMPACT COLOR=BLUE>Fórmulas
Conocidas</FONT></U></H1> Las siguientes <I>Formulas</I> son muy conocidas y
<B>peligrosas de usar</B>.<P>
Por lo tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio<BR>
<S>super seguro</S> en lo más profundo de la <FONT FACE=VERDANA
COLOR=BROWN>tierra</FONT>.<BR>
Fórmula del agua:
<FONT FACE=ARIAL COLOR=GREEN SIZE=+4>
H<SUB>2</SUB>O<BR></FONT>
La siguiente Fórmula es el resultado de la genialidad de Einstein:
<P ALIGN=CENTER>
<FONT FACE=ARIAL COLOR=RED SIZE=6>E=mc<SUP>2</SUP></FONT>
</P>
</BODY>
</HTML>
Sergio B. Ojeda 7
Tercero: Abre el Internet Explorer y

mediante su menú Archivo/Abrir carga
tu documento Ejemplo4.htm el
resultado se muestra a continuación.
LÍNEAS
LA ETIQUETA <HR>
Las líneas que se pueden insertar en HTML pueden tener distinto color, alineación, ancho horizontal y espesor.
<HR> Dibuja una línea horizontal de lado a lado del documento.

Formato:
<HR COLOR=“Color” ALIGN=“Alineación” WIDTH=“Ancho” SIZE=“Espesor” >

Donde:
“Color” es el color de la línea horizontal

“Alineación” puede ser LEFT, RIGHT o CENTER
“Ancho” que puede estar en píxeles o ser un porcentaje del ancho de la ventana
“Espesor” es el grosor igual a píxeles.
Ejemplo 5: Dibujemos algunas líneas.
<HTML>
<HEAD>
</HEAD>
<BODY>
Línea de lado a lado<HR>
Línea en el centro con un ancho de 50%<HR WIDTH=50%>
Línea a la derecha con un ancho de 25%<HR ALIGN=RIGHT WIDTH=25%>
Línea a la izquierda con un ancho de 75%<HR ALIGN=LEFT WIDTH=75%>
Línea azul a la izquierda con un ancho de 25%<HR COLOR=BLUE ALIGN=LEFT WIDTH=25%>
Línea verde en el centro con un ancho de 50% y un espesor de 10 píxeles
<HR COLOR=GREEN WIDTH=50% SIZE=10>
Línea roja a la derecha con un ancho de 25% y un espesor de 20 píxeles
8 Sergio B. Ojeda
<HR COLOR=RED ALIGN=RIGHT WIDTH=25% SIZE=20>

</BODY>
</HTML>
El resultado se muestra a continuación:
LISTAS DE ELEMENTOS
HTML permite crear tres tipos de listas de elementos. Las etiquetas son las siguientes:
<OL TYPE=“Tipo” > y </OL> Lista ordenada o numerada. “Tipo” define el tipo de numeración
y puede ser 1, a, A, i, I.
Cada elemento de la lista debe ir precedido por la etiqueta <LI>
<UL TYPE=“Tipo” > y </UL> Lista desordenada o de viñetas. “Tipo” define el tipo de viñeta
y puede ser disk, square, circle escritas en minúsculas.
Cada elemento de la lista debe ir precedido por la etiqueta <LI>
<DL> y </DL> Lista de glosario o tipo índice. Los títulos principales deben ir
precedidos por la etiqueta <DT> y los títulos de párrafo
sangrados deben ir precedidos por las etiquetas <DD>
Ejemplo 6: Ahora combinemos todo lo aprendido para crear la página personal de Alan Brito
Delgado el niño Genio.
<HTML>
<HEAD>
Sergio B. Ojeda 9
</HEAD>
<BODY>
<H1 ALIGN=CENTER><FONT COLOR=GREEN><B><I>Página Personal de Alan</I></B>
</FONT></H1>
<HR COLOR=BLUE WIDTH=80% SIZE=5>
<P ALIGN=JUSTIFY>Hola, mi nombre es <FONT SIZE=+3>Alan Brito Delgado</FONT><P> En mi
computadora tengo muchos juegos, te daré una lista de los más emocionantes:
<OL>
<LI>Age of Empires
<LI>WarCraft III
<LI>Quake III Arena
<LI>FIFA 2008
<LI>Need For Speed
</OL>
<H2 ALIGN=CENTER><U>Otros juegos importantes</U></H2>
<UL TYPE=circle>
<LI>StarCraft 2
<LI>Counter Strike Zero
<LI>Vice City
<LI>Pacman
<LI>Mario Bros.
</UL>
</BODY>
</HTML>
10 Sergio B. Ojeda
TABLAS
Las tablas son cuadrículas que uno crea por ejemplo para colocar un horario escolar o un modelo de
factura o recibo.
Las tablas se crean con la etiqueta <TABLE> para indicar donde comienza y </TABLE> para indicar
donde termina.
Las tablas se construyen especificando, fila a fila, el contenido de cada celda mediante las etiquetas
<TD> y </TD>. Para cambiar de fila usamos la etiqueta <TR>.
Ante de entrar en más detalles, en el siguiente ejemplo crearemos una tabla., verás que facilísimo
es.
Ejemplo 7: En este ejemplo crearemos nuestro horario escolar de vacaciones útiles. Será una tabla
de 5 filas por 4 columnas.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Horario Escolar</H1>
<TABLE>
<TD>Hora</TD><TD>Lunes</TD><TD>Miércoles</TD><TD>Viernes</TD>
<TR>
<TD>8-10</TD><TD>Natación</TD><TD>Natación</TD><TD>Computación</TD>
<TR>
<TD>10-12</TD><TD>Karate</TD><TD>Karate</TD><TD>Natación</TD>
<TR>
<TD>12-14</TD><TD>Inglés</TD><TD>Computación</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Computación</TD><TD>Inglés</TD><TD>Inglés</TD>
</TABLE>
</BODY>
</HTML>
Sergio B. Ojeda 11
Vemos que a nuestra tabla le falta algo de decoración. Los siguientes atributos pueden ayudarnos:
<TABLE ALIGN=“Alineación” BGCOLOR=“Color de Fondo” BORDER=“Borde”
BORDERCOLOR=“Color de Borde” CELLPADDING=“Margén Interior” CELLSPACING=“Espacio
Entre Celdas” WIDTH=“Ancho” > y </TABLE>
“Alineación” determina la alineación de la tabla (LEFT, CENTER o RIGHT). “Color de
Fondo” determina el color del fondo de la tabla. “Borde” determina el ancho del borde
exterior de la tabla. “Color de Borde” es el color de todas las líneas de la tabla.
“Margen interior” indica el margen entre el borde de la celda y el contenido de la
celda. “Espacio Entre Celdas” indica la separación entre las celdas y WIDTH es el
ancho de toda la tabla en porcentaje, donde 100% es el ancho de toda la página.
Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo anterior.
<HTML>
<HEAD>
</HEAD>
<BODY>
12 Sergio B. Ojeda
<TABLE ALIGN=CENTER BGCOLOR=LIGHTYELLOW BORDER=12 BORDERCOLOR=BLUE

width=90%>
<TR>
<TR>
<TR>
<TR>
</TABLE>
Otro modelo del horario escolar:
<TABLE ALIGN=CENTER BORDER CELLPADDING=10 CELLSPACING=20 BORDERCOLOR=RED>
<TR>
<TR>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Sergio B. Ojeda 13
Todavía podemos mejorar la tabla usando los atributos mostrados en la siguiente página:
<TH ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”
ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TH>
Define las cabeceras de las columnas. “Alineación” es la alineación horizontal dentro
de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL. “Color de
Fondo” es el color de fondo dicha celda. “Combinar Columnas” indica cuantas celdas
horizontales se van a unir. “Combinar Filas” indica cuantas celdas verticales se van a
unir. ”Alineación Vertical” determina la orientación vertical dentro de la celda, puede
ser BOTTOM, CENTER, TOP o BASELINE.
<TD ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”
ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TD>
Define una celda de la tabla. La descripción de los atributos son iguales a la etiqueta
anterior.
Ejemplo 9: Continuemos modificando nuestro horario.
<HTML>
<HEAD>
14 Sergio B. Ojeda
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=4 CELLPADDING=10 CELLSPACING=20
BORDERCOLOR=PURPLE>
<TH BGCOLOR=YELLOW>Hora</TH><TH>Lunes</TH><TH>Miércoles</TH><TH>Viernes</TH>
<TR>
<TD>8-10</TD><TD ALIGN=CENTER COLSPAN=2>Natación</TD><TD>Computación</TD>
<TR>
<TR>
<TD>12-14</TD><TD>Inglés</TD>
<TD ALIGN=CENTER ROWSPAN=2 VALIGN=TOP>Computación<br>e<br>
inglés</TD><TD>Karate</TD>
<TR>
<TD>14-16</TD><TD>Computación</TD><TD>Inglés</TD>
</TABLE>
</BODY>
</HTML>
EL FONDO DE PÁGINA
<BODY BACKGROUND=“Imagen de fondo” BGCOLOR=“Color de fondo”> y </BODY>
Sergio B. Ojeda 15
“Imagen de fondo” es el nombre del archivo que contiene la imagen, debe estar en la
misma carpeta donde estas guardando todo. “Color de fondo” es el color escrito en inglés,
en la página Web te di una lista de colores.
 Los archivos de imagen que soporta el HTML son de formato JPG o GIF.
 JPG es de menor tamaño que un GIF. JPG suele utilizarse para fotografías e imágenes
grandes y GIF para imágenes pequeñas.
 Como recomendamos al principio del curso es conveniente tener las imágenes en el mismo
lugar donde estas guardando los documentos HTML, y así evitaras la molestia de colocar la
ruta del archivo de imagen.
INSERCIÓN DE IMÁGENES
La inserción de una imagen dentro del documento HTML se hace mediante la etiqueta:
<IMG SRC=“Archivo de imagen” ALT=“Nombre alternativo” ALIGN=“Alineación”
BORDER=“Borde” HEIGHT=“Altura” WIDTH=“Ancho”>
“Archivo” es el nombre del archivo de imagen, debe estar en la misma carpeta donde
estas guardando todo. “Nombre alternativo” es un texto que aparecerá debajo de la
imagen cuando coloque el puntero sobre la imagen. “Alineación” permite alinear la imagen
en la página puede ser LEFT o RIGHT o también para alinear el texto que viene a
continuación de la imagen donde puede ser TOP, MIDDLE o BOTTOM. “Borde” es un
número que determina el ancho del borde alrededor de la imagen. “Altura” y “Ancho” son
números que permiten definir el tamaño de la imagen.
 Se recomienda usar siempre los atributos HEIGHT y WIDTH ya que esto permite que el
navegador reserve un espacio para la imagen y continué cargando la página mientras va
cargando la imagen. Si no usa estos atributos el navegador esperará a terminar de cargar la
imagen para luego continuar con la carga del resto de la página.
 Para centrar una imagen en la página use las etiquetas <CENTER> y </CENTER> alrededor de
la imagen. También para alinear puede usar <P ALIGN= “Alineación” y </P> donde “Alineación”
puede ser LEFT, CENTER o RIGHT.
16 Sergio B. Ojeda
 Existen programas que pueden unir varias imágenes GIF en secuencia y formar un solo
archivo GIF, lo que dará una sensación de movimiento. Este archivo GIF resultante se conoce
como GIF ANIMADO y en Internet se puede conseguir muchos y gratis.
Ejemplo 10: Crearemos una página con muchas imágenes. Las imágenes que usaré están en la
carpeta que bajaste de mi página, búscalas y cópialas a tu carpeta.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<H1 ALIGN=CENTER>Mis GIF ANIMADOS Favoritos</H1>
<IMG SRC="computadora.gif" ALT="La supercomputadora" ALIGN=LEFT HEIGHT=150
WIDTH=150>
<BR><BR>Esta es la computadora del Profe Sergio donde se la pasa jugando y escribiendo
los laboratorios para publicarlas en su página Web <B>www.lanzadera.com/elprofewiser</B>. Si
quieres bajar a tu computadora estos GIF animados, visita mi página y coloca el puntero sobre
la imagen, luego haces clic con el botón derecho del mouse y finalmente haces clic en<B> Guardar
imagen como...</B>
<P ALIGN=RIGHT>Esta es la pizarra del Profe Sergio <IMG SRC=pizarra.gif ALT="La pizarra"
ALIGN=middle HEIGHT=120 WIDTH=150><BR>
<CENTER><U>Otros GIF animados<U></CENTER><BR>
<IMG SRC=trabajador.gif ALT="Trabajador" ALIGN=LEFT BORDER=3 HEIGHT=130
WIDTH=120>
<IMG SRC=perrito.gif ALT="Corre Firulais" ALIGN=RIGHT HEIGHT=150 WIDTH=80></P>
</BODY>
</HTML>
Sergio B. Ojeda 17
ENLACE CON OTRAS PÁGINAS
Los enlaces o hiperenlaces o hipervínculos más importantes son aquellos que nos permiten
conectarnos con otra de nuestras páginas o con una página cualquiera de Internet.
Todo enlace tiene la siguiente forma:
<A HREF=“Página Web”>HiperTexto o HiperImagen</A>

Donde “Página Web” es la dirección de la página Web a la que deseamos conectarnos y
el HiperTexto o HiperImagen es cualquier texto o imagen a la que se deberá hacer clic
para saltar a la página deseada.
Ejemplo 11: Ahora construiremos un documento que nos conectará con la página de Microsoft, con
la página del Profe Díaz y con una de las páginas creadas en esta hermosa separata. Recuerde mi
recomendación al principio del curso: Para que no tengas problemas con las rutas, guarda todo en una
sola carpeta. Por ejemplo yo lo he guardado todo en la carpeta E:\Tu Nombre\HTML
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Mis Páginas Favoritos</H1>
Para obtener información de Windows has clic en
<A HREF="http://www.microsoft.com">Microsoft</A><BR>
Para bajar separatas de computación has clic en
18 Sergio B. Ojeda
<A HREF="http://www.google.com">Separatas del Profe Sergio</A><BR>

Para ver el ejemplo 10 has clic en <A HREF="Ejemplo10.html">GIF Animados</A><P>
Para obtener información de Windows has clic en
<A HREF="http://www.microsoft.com"><IMG SRC=parlante.gif></A><P>
Para bajar separatas de computación has clic en
<A HREF="http://www.google.com">
<IMG SRC=estrella.gif ALT="Has clic para ir a la página de Google"
BORDER ALIGN=MIDDLE HEIGHT=80 WIDTH=80></A><P>
Para ver el ejemplo 10 has clic en
<A HREF="ejemplo10.html"><IMG SRC=perrito.gif ALIGN=TOP BORDER></A>
</BODY>
</HTML>
ENLACE CON DIRECCIONES DE CORREO ELECTRONICO
En este caso, haciendo clic en el enlace, no se inicia una nueva página, sino más bien se abre un
programa de correo electrónico como, por ejemplo, el Outlook Express. La etiqueta utilizada es la
siguiente:
<A HREF=mailto:“Dirección de correo”>HiperTexto o HiperImagen</A>
Sergio B. Ojeda 19
Donde “Dirección de correo” es la dirección de correo electrónico a la que deseamos

escribir y el HiperTexto o HiperImagen es cualquier texto o imagen a la que se deberá
hacer clic para abrir el programa de correo electrónico.
Ejemplo 12: Ahora construiremos un documento que nos permitirá enviar un saludo al Profe.
<HTML>
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN=CENTER>Envíe un saludo al Profe.</H1>
Para enviar un mensaje al Profe. has clic en
<A HREF=mailto:Ojeda_Sergio@hotmail.com>Ojeda_Sergio@hotmail.com</A><BR>
También puedes hacer clic en su pizarra
<A HREF=mailto:Ojeda_Sergio@hotmail.com>
<IMG SRC=pizarra.gif ALIGN=MIDDLE></A><BR>
</BODY>
</HTML>
20 Sergio B. Ojeda
Al hacer clic en el hipertexto o hiperimagen se abre el programa de gestión de correo electrónico

instalado en tu máquina: Outlook, Eudora, etc.
TEXTO E IMAGEN EN MOVIMIENTO
Para ello usamos las marquesinas que es un cuadro donde se desplaza el texto (sólo es valido para
Internet Explorer). La etiqueta es:
<MARQUEE WIDTH=“Ancho” BGCOLOR=“Color de fondo” DIRECTION=“Dirección”

SCROLLAMOUNT=“Avance” SCROLLDELAY=“Tiempo” BEHAVIOR=“Comportamiento”>Texto o
Imagen</MARQUEE>
Donde “Ancho” es el ancho en porcentaje o píxeles del cuadro que contiene la marquesina.
“Color de fondo” es el color de fondo del cuadro que contiene la marquesina. “Dirección”
es la dirección en la que se mueve la marquesina puede ser LEFT o RIGHT. “Avance” es la
cantidad de píxeles que salta el texto o imagen en cada avance, cuanto mayor es, más
rápido avanza. “Tiempo” define el tiempo en milisegundos entre cada salto del texto o
imagen, cuanto mayor es, más lento avanza. “Comportamiento” define el tipo de
movimiento si toma el valor de SCROLL entonces el texto o imagen aparece por un lado y
desaparece por el otro antes de volver a aparecer, si toma el valor de SLIDE entonces
aparece por un lado y se detiene en el otro y si es ALTERNATE entonces rebota de un
lado a otro.
Ejemplo 13: Crearemos algunos textos e imagen en movimiento.
Nota.- Necesitarás el archivo de imagen foto.bmp que es una carita sonriente. Sí no la tienes
puedes dibujarla tu mismo en el Paint y guardarla con el nombre “foto”.
<HTML>
<HEAD>
<TITLE>Ejemplo 13 - Marquesinas</TITLE>
</HEAD>
<H1 ALIGN=CENTER>Texto e imagen en movimiento</H1>
<MARQUEE>Hola amigos</MARQUEE>
<CENTER>
<MARQUEE WIDTH=50% BGCOLOR=YELLOW DIRECTION=RIGHT>de todo el mundo</MARQUEE>
</CENTER><MARQUEE SCROLLAMOUNT=10>bienvenidos a mi página</MARQUEE>
<MARQUEE SCROLLDELAY=200>regresa pronto</MARQUEE>
<MARQUEE BEHAVIOR=SLIDE>no te olvides</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>que siempre publicamos novedades.</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>
<IMG SRC=foto.bmp WIDTH=200 HEIGHT=200></MARQUEE>
</BODY>
Sergio B. Ojeda 21
</HTML>
El resultado final es todo en movimiento:
FRAMES O MARCOS
(MULTIVENTANAS)
Significa crear varias ventanas independientes en un solo documento, también se les conoce como
FRAMES, es decir cada ventana es un frame.
Esto se hace con las siguientes etiquetas (estas etiquetas reemplazaran a las etiquetas <BODY> y
</BODY> de un documento normal.).
<FRAMESET COLS=“Columnas” ROWS=“Filas”> y </FRAMESET>

Crea los frames, donde “Columnas” da las dimensiones de los frames verticales y “Filas”
da las dimensiones de los frames horizontales. COLS y ROWS no pueden ser usados al
mismo tiempo en la misma etiqueta FRAMESET.
<FRAME SRC=“Página” NAME=“Nombre” MARGINWIDTH=“Márgenes horizontal”
MARGINHEIGHT= “Márgenes vertical” SCROLLING= “Desplazamiento” NORESIZE
FRAMEBORDER=“Borde”>
Coloca las páginas Web en los frames creados con FRAMESET. “Página” es la dirección
de la página que se colocará en el frame. “Nombre” es un nombre que se usará para
hacer referencia al frame. “Márgenes horizontal” es el margen izquierdo y derecho del
frame en píxeles. “Márgenes vertical” es el margen superior e inferior del frame en
píxeles. “Desplazamiento” permite colocar o no barras de desplazamiento puede ser
22 Sergio B. Ojeda
YES, NO o AUTO, por defecto es auto o sea que las colocará si es necesario.
NORESIZE no permite cambiar el tamaño del frame. “Borde” permite eliminar el borde
del frame cuando toma el valor de NO.
Ejemplo 14: Crearemos 3 frames horizontales donde colocaremos algunas de las páginas que hemos
creado en esta súper separata.
<HTML>
<HEAD>
<TITLE>Ejemplo 14 - Frames</TITLE>
</HEAD>
<FRAMESET COLS=28%,*,40%>
<FRAME SRC=ejemplo1.htm>
</FRAMESET>
</HTML>
El asterisco (*) en la cadena 28%,*,40% significa que dejamos que HTML coloque el porcentaje que
falta para completar el 100%.
La página resultante es:
Sergio B. Ojeda 23
Ejemplo 15: Continuando con este curso de HTML crearemos unos frames muy bonitos desde donde
podremos apreciar todas nuestras páginas creadas.
Primero: Cree la página título.htm
<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<H1><FONT COLOR=BLUE>
<MARQUEE>Bienvenidos a los ejemplos del 3ro.X</MARQUEE>
</FONT></H1>
</BODY>
</HTML>
Segundo: Cree la página lista.htm
<HTML>
<HEAD>
<TITLE>Lista</TITLE>
</HEAD>
<H4 ALIGN=CENTER>Lista de Ejemplos</H4>
<A HREF=ejemplo1.htm TARGET=PRINCIPAL>Ejemplo1</A><BR>
</BODY>
</HTML>
*TARGET permite enviar la página al frame que llamaremos PRINCIPAL, vea el siguiente paso.
Tercero: Crearemos los frames en un documento que guardaremos como inicial.htm. Esta será la
página que iniciará toda nuestra presentación:
<HTML>
<HEAD>
<TITLE>Inicial</TITLE>
</HEAD>
<FRAMESET COLS=20%,*>
24 Sergio B. Ojeda
<FRAME SRC=lista.htm>
<FRAMESET ROWS=15%,*>
<FRAME SRC=título.htm>
<FRAME NAME=PRINCIPAL>
</FRAMESET>
</FRAMESET>
</HTML>
El resultado final es:
La hacer clic en el hipervínculo Ejemplo3, verá lo siguiente:
Sergio B. Ojeda 25
FORMULARIOS
Hemos visto como hacer que el usuario pueda comunicarse con nosotros a través del correo
electrónico (vea el ejemplo 12), pero a veces quisiéramos que el usuario respondas a ciertas
preguntas o nos dé algunos comentarios como en una encuesta, en este caso usamos los formularios.
Lamentablemente está utilidad sólo servirá si la computadora donde ve la página tiene un servicio de
correo electrónico proporcionado por algún proveedor de Internet. Si ese no es el caso entonces
esta utilidad no servirá para nada y no se podrá enviar ningún dato.
Estructura general de un formulario que envié los datos a un correo electrónico: Por ejemplo
enviemos los datos al correo del Profe.
<FORM ACTION=“mailto:elprofe@hotmail.com” METHOD=“post” ENCTYPE=“text/plain”>

Cuerpo del formulario
Botones de envío y borrado.
</FORM>
 El cuerpo del formulario esta formado por tres clase de entrada que son: “Input”, “Textarea” o
“Select”
 Los botones de opción son entradas del tipo “Input”
Describamos estos elementos:
26 Sergio B. Ojeda
Input: Crea un cuadro de texto, una casilla de verificación, un círculo de opción o un botón.
<INPUT Type =“Text” Name=“Nombre” Value=“Valor” Size=“Tamaño”

MaxLenght=“TamMáximo”>
Crea un cuadro de texto. El “Nombre” identifica al cuadro de texto, “Valor” es el texto
por defecto que aparece en el cuadro, “Tamaño” es el tamaño en caracteres del cuadro
de texto y “TamMáximo” es el máximo número de caracteres que puede escribir.
Si no usa Size el tamaño por defecto será 20.
Al terminar de escribir en el cuadro de texto, este texto es almacenado en la variable
“Nombre”, la cual será enviada al correo electrónico.
<INPUT Type =“Password” Name=“Nombre” Value=“Valor” Size=“Tamaño”
En lugar de letras aparecerán asteriscos en el cuadro de texto.
<INPUT Type =“Hidden” Name=“Nombre” Value=“Valor” Size=“Tamaño”

Ni siquiera aparecerá lo que escriba.
<INPUT Type =“Checkbox” Name=“Nombre” Value=“Valor” Checked>

Crea una casilla de verificación, que el usuario puede activarla o desactivarla con un clic.
“Valor” es el dato que se almacenará en la variable “Nombre” cuando la casilla es
activada. Si escribe Checked la casilla aparece activada .
<INPUT Type =“Radio” Name=“Nombre” Value=“Valor” Checked>

Crea un círculo pequeño de opción, que el usuario puede activar o desactivar con un clic.
Si escribe Checked el círculo aparece activado .
<INPUT Type =“Submit” Name=“Nombre” Value=“Valor”>

Crea un botón que provoca el envío del formulario al correo electrónico. “Valor” es el
texto que aparece en el interior del botón.
<INPUT Type =“Reset” Name=“Nombre” Value=“Valor”>

Crea un botón que provoca el borrado de todos los datos ingresados al formulario,
regresando todo a su forma por defecto.
Ejemplo 16: Crearemos una ficha de datos que el usuario deberá llenar y enviar automáticamente al
correo electrónico del Profe.
<HTML>
<HEAD>
</HEAD>
Sergio B. Ojeda 27
<BODY>
<H1 ALIGN=CENTER>Ficha de datos</H1>
<FORM ACTION="mailto:elprofediaz@hotmail.com" METHOD="post" ENCTYPE="Text/Plain">
Nombre:
<INPUT Type="Text" Name="Nombre" MaxLenght=15><P>
Primer Apellido:
<INPUT Type="Text" Name="Primer Apellido" MaxLenght=15>
Segundo Apellido:
<INPUT Type="Text" Name="Segundo Apellido" MaxLenght=15><P>
Domicilio:
<INPUT Type="Text" Name="Domicilio" Size=40 MaxLenght=30><P>
Sexo: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Hombre: <INPUT Type="Radio" Name="Sexo" Value="Hombre">
Mujer: <INPUT Type="Radio" Name="Sexo" Value="Mujer"><P>
Película favorita: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
The Matrix: <INPUT Type="Checkbox" Name="The Matrix" Value="Si">
Star Wars: <INPUT Type="Checkbox" Name="Star Wars" Value="Si">
Time Machine: <INPUT Type="Checkbox" Name="Time Machine" Value="Si"><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>
28 Sergio B. Ojeda
Select: Crea una lista desplegable desde la cual podemos escoger una o más opciones.
<SELECT Name=“Nombre” size=“Tamaño” Multiple>

Especificación de opciones
</SELECT>
El “Nombre” identifica a la lista desplegable, el “Tamaño” determina la altura inicial de
la lista en líneas de texto. Si escribe Multiple el usuario podrá elegir más de una opción.
La “Especificación de opciones” contiene la lista de elementos que aparecen en la lista y tiene la

siguiente estructura:
<OPTION Value=“Valor” Selected>Descripción</OPTION>

“Valor” es el dato que se almacenará en “Nombre” cuando se seleccione esta opción y
será enviada al correo electrónico. Si escribe Selected está opción aparece
seleccionada por defecto.
Sergio B. Ojeda 29
Ejemplo 17: Crearemos un menú a la carta de un restaurante paceño, donde el usuario escogerá lo
que desea y lo enviará automáticamente al correo del Profe.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Restaurante Paceño "El Paisano"</H1>
Entrada (elija solo uno):<BR>
<SELECT Name="Entrada" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Sopa de pollo">Sopa de pollo</OPTION>
<OPTION Value="Ensalada">Ensalada</OPTION>
<OPTION Value="Ensalada de Frutas">Ensalada de Frutas</OPTION>
<OPTION Value="Papa a la huancaína">Papa a la huancaína</OPTION>
<OPTION Value="Sopa del día">Sopa del día</OPTION>
</SELECT><P>
Segundo (puede elegir más de uno):<BR>
<SELECT Name="Segundo" size=4 Multiple>
<OPTION Value="Ninguno">Ninguno</OPTION>
<OPTION Value="Adobo de chancho">Adobo de chancho</OPTION>
<OPTION Value="Arroz chaufa">Arroz chaufa</OPTION>
<OPTION Value="Arroz con pato">Arroz con pato</OPTION>
<OPTION Value="Bistec con papas">Bistec con papas</OPTION>
<OPTION Value="Chicharrón de pescado">Chicharrón de pescado</OPTION>
<OPTION Value="Lomo saltado">Lomo saltado</OPTION>
<OPTION Value="Tallarin saltado">Tallarín saltado</OPTION>
</SELECT><P>
Refresco (elija solo uno):<BR>
<SELECT Name="Refresco" size=1>
<OPTION Value="Ninguna">Ninguna</OPTION>
<OPTION Value="Coca Cola">Coca Cola</OPTION>
<OPTION Value="Pepsi">Pepsi</OPTION>
<OPTION Value="Fanta">Fanta</OPTION>
<OPTION Value="Agua Mineral" Selected>Agua Mineral</OPTION>
</SELECT><P>
<INPUT Type="Submit" Value="Enviar datos"> <INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>
30 Sergio B. Ojeda
TextArea: Crea un cuadro donde el usuario puede escribir un texto tan largo como desee.
<TEXTAREA Name=“Nombre” Cols=“Columnas” Rows=“Filas” Wrap=“Valor”>

Texto que aparece por defecto (si desea puede dejarlo en blanco)
</TEXTAREA>
El “Nombre” identifica al cuadro, “Columnas” determina el ancho del cuadro, “Filas”
determina la altura del cuadro. Cuando “Valor” es igual a “off” el usuario tendrá que
presionar ENTER para cambiar de línea en cambio si “Valor” es igual a “virtual” el
cambio de línea es automático, por defecto es “virtual”.
Ejemplo 18: Crearemos una página donde el usuario escribirá un comentario u opinión acerca de “La
contaminación en nuestro planeta Júpiter” y lo enviará automáticamente al correo del Profe.
<HTML>
<HEAD>
</HEAD>
Sergio B. Ojeda 31
<BODY>
<H1 ALIGN=CENTER>Cuidemos Nuestro Planeta</H1>
Mi opinión respecto a la contaminación es:<P>
<TEXTAREA Name="Opinión" Cols=30 Rows=5>
No olvides firmar tu comentario.
</TEXTAREA><P>
<INPUT Type="Submit" Value="Enviar datos">
<INPUT Type="Reset" Value="Borrar datos">
</FORM>
</BODY>
</HTML>
32 Sergio B. Ojeda

Lenguaje HTML

Uploaded by

Document Information

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

Lenguaje HTML

Uploaded by

Copyright:

Available Formats

Colegio Don Bosco – El Prado 3ro.

Formato 1. ** Etiquetas Cerradas **

Forma 2. ** Etiquetas Abiertas **

ESTRUCTURA BASICAS DE UN DOCUMENTO WEB

La etiqueta HTML inicia y termina el documento Web.

Segundo: En el Explorador de Windows

 Observa que el título de la ventana

x puede asumir los valores de 1, 3, 4, 5, 6

Segundo: Guárdalo con el nombre "Ejemplo2.htm"

Los estilos más conocidos utilizan las siguientes etiquetas:

Por lo tanto <U><I><B>recomendamos</U></I></B> experimentarlas en un laboratorio <S>super

Segundo: Guárdalo con el nombre "Ejemplo3.htm"

La etiqueta P, permite definir y alinear párrafos.

“Alineación” es LEFT (Izquierda), CENTER (Centro) o RIGTH (Derecha)

La etiqueta CENTER, se utiliza para centrar el texto o la imagen en el documento.

PÁRRAFOS Y ESPACIOS EN BLANCO

<P> Inicia un nuevo párrafo dejando una línea en blanco.

Ejemplo 4: Modifique el ejemplo anterior para que se vea más presentable.

Segundo: Guárdalo con el nombre "Ejemplo4.htm"

Tercero: Abre el Internet Explorer y

<HR> Dibuja una línea horizontal de lado a lado del documento.

<HR COLOR=“Color” ALIGN=“Alineación” WIDTH=“Ancho” SIZE=“Espesor” >

“Color” es el color de la línea horizontal

Ejemplo 5: Dibujemos algunas líneas.

<HR COLOR=RED ALIGN=RIGHT WIDTH=25% SIZE=20>

El resultado se muestra a continuación:

Cada elemento de la lista debe ir precedido por la etiqueta <LI>

y puede ser disk, square, circle escritas en minúsculas.

Cada elemento de la lista debe ir precedido por la etiqueta <LI>

precedidos por la etiqueta <DT> y los títulos de párrafo

sangrados deben ir precedidos por las etiquetas <DD>

El resultado se muestra a continuación:

<TD> y </TD>. Para cambiar de fila usamos la etiqueta <TR>.

de 5 filas por 4 columnas.

El resultado se muestra a continuación:

<TABLE ALIGN=“Alineación” BGCOLOR=“Color de Fondo” BORDER=“Borde”

BORDERCOLOR=“Color de Borde” CELLPADDING=“Margén Interior” CELLSPACING=“Espacio

Entre Celdas” WIDTH=“Ancho” > y </TABLE>

“Alineación” determina la alineación de la tabla (LEFT, CENTER o RIGHT). “Color de

exterior de la tabla. “Color de Borde” es el color de todas las líneas de la tabla.

“Margen interior” indica el margen entre el borde de la celda y el contenido de la

ancho de toda la tabla en porcentaje, donde 100% es el ancho de toda la página.

Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo anterior.

<TABLE ALIGN=CENTER BGCOLOR=LIGHTYELLOW BORDER=12 BORDERCOLOR=BLUE

El resultado se muestra a continuación:

<TH ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”

ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TH>

Define las cabeceras de las columnas. “Alineación” es la alineación horizontal dentro

de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL. “Color de

unir. ”Alineación Vertical” determina la orientación vertical dentro de la celda, puede

ser BOTTOM, CENTER, TOP o BASELINE.

<TD ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”

ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TD>

Ejemplo 9: Continuemos modificando nuestro horario.

El resultado se muestra a continuación:

<BODY BACKGROUND=“Imagen de fondo” BGCOLOR=“Color de fondo”> y </BODY>

en la página Web te di una lista de colores.

grandes y GIF para imágenes pequeñas.

ruta del archivo de imagen.

<IMG SRC=“Archivo de imagen” ALT=“Nombre alternativo” ALIGN=“Alineación”

BORDER=“Borde” HEIGHT=“Altura” WIDTH=“Ancho”>

estas guardando todo. “Nombre alternativo” es un texto que aparecerá debajo de la

continuación de la imagen donde puede ser TOP, MIDDLE o BOTTOM. “Borde” es un

números que permiten definir el tamaño de la imagen.

Formato 1. Etiquetas Cerradas

Forma 2. Etiquetas Abiertas