COLEGIO DE ESTUDIOS CIENTIFICO Y TECNOLOGICOS

PLANTEL TLALTENANGO

TEMA:
TUTORIAL DE HTML

TESIS QUE PARA OBTENER EL TITULO DE:

TECNICO EN PROGRAMACION

PRESENTAN:
SAUL REYNA CORTES
CARLOS JAVIER CORREA HERRERA
OMAR ALEJANDRO RODRIGUEZ VILLALOBOS

ASESOR: NORMA MURILLO MOTA

TLALTENANGO ,ZAC JUNIO 2013

Dedicatorias

Esta tesis es dicada todos y cada uno de nuestros maestros por habernos
apoyado en todo el ciclo escolar gracias a ellos hemos superado nuestras metas y
ser cada da mejores.
Gracias por haber fomentado en nosotros el deseo de superacin y el anhelo de
lograr un triunfo y ser mejores en la vida.
Agradecemos su paciencia y compresin haca nosotros que estuvieron da a da
de sus vidas.

AGRADECIMIENTOS
A LOS MAESTROS:
Solo para reconocer su tiempo dedicado a nosotros y su empeo en crear de
nosotros personas con gran futuro en verdad muchsimas gracias.
A NUESTRA ASESORA DE TESIS:
Un gran agradecimiento a nuestra profesora Norma Murillo Mota que nos da ms
que su tiempo realizando las labores lo mejor posible y teniendo tanta paciencia
para nosotros sus alumnos en verdad muchsimas gracias.

ndice

Introduccin.............................................................................................................5
CAPITULO I: INTRODUCCIN
Planteamiento del problema.6
Justificacin..7
Objetivo....8
CAPITULO Il: INTRODUCCIN DE LENGUAJE HTML
Introduccin.......9
Qu es y para qu sirve HTML?..........................................................................10
Bases.........11
Estructuras de una pgina web......12
CAPITULO Ill: CREACIN DE UNA PGINA WEB
Etiquetas de HTML...15
Encabezados.15
Etiquetas para crear una lnea horizontal.16
Etiquetas para el grosor de la lnea...16
Etiqueta para centrar el texto..17
CAPITULO lV: FORMATO
Como insertar imgenes en una pgina...18
Como hacer un enlace de hipertexto.18
Como cambiar el tamao de texto.19
Como cambiar el color de texto..20
Etiquetas para color de texto y color de fondo....20
Colores...21
Etiquetas necesaria para crear listas.22
Borde de las imgenes....23

Marquesinas animadas....25
Botones de eleccin.26
Creacin de pginas con frames27
Como quitar el borde....28
Grosor del borde...29
Valores especiales del atributo target31
Atributos de los frames flotantes....32
Cambiando el color del borde....33
No frame........34
Cuadros de seleccin......35
CAPITULO V: CONCLUSIONES
Conclusin.38
Fuentes de informacin...39
Cronograma...40

INTRODUCCIN
HTML es uno de los programas ms utilizados en la elaboracin de pginas web,
en este tutorial llevamos a cabo el conocimiento sobre la elaboracin de un
pgina web, aqu aprenderemos sobre lo que es HTML, para que sirve, la
importancia que lleva y el mtodo para poder crear tus propias pginas web, es
un sistema basado en etiquetas que nos dan introducciones para que nuestra
pgina queden a nuestros gustos.
Son sencillos pasos para el comienzo intercambio de etiquetas las cuales realizan
todo tipo de modificaciones y gustos por los cuales editaremos nuestras pginas.
Este lenguaje es sencillo y prctico, todos nos imaginamos que este lenguaje ser
difcil de programar pero ya entrando de lleno al mundo HTML nos daremos
cuenta que es muy sencillo por ello los invito a que no se despeguen de este
tutorial HTML.

CAPTULO I
INTRODUCCIN
Planteamiento del problema
Actualmente existen diferentes medios de consulta a los cuales tenemos acceso
para consultar. Debido a que en el acervo bibliogrfico del Colegio de Estudios
Cientficos y Tecnolgicos plantel Tlaltenango no se cuenta con material del
lenguaje de programacin HTML, se elabora un tutorial con la finalidad de
proporcionar a los estudiantes una forma de fcil acceso a la informacin al
momento de crear una pgina web.

Justificacin
Es importante el conocimiento de HTML y que sea ste el punto de partida para
todo estudiante que desee ampliar sus habilidades, pues la constante evolucin
de la web, obliga en buena forma estar al da con las nuevas tecnologas que han
comenzado a dominar esta etapa.
El mercado actual altamente competitivo del diseo web, requiere de expertos
capacitados con una formacin constante en las nuevas tecnologas de diseo
que se implementan en forma acelerada tanto el mbito social como en el laboral.
Este tutorial presenta informacin sobre cmo crear una pgina web en HTML, el
cual est realizado para utilizar el manejo de herramientas y comandos, para que
ste nos facilite la creacin de una pgina web. En la enseanza, se ve ms
prctica al llevarnos paso a paso con informacin muy extensa y explicita de lo
que se debe hacer al requerir una pgina web y sea necesaria la programacin de
esta sin importar su fin o uso de la misma.

Objetivos
General:
Proporcionar informacin para crear una pgina web, dando a conocer todo lo
relacionado con el uso de HTML y todos sus comandos para obtener una mejor
creacin de ellas y favoreciendo al usuario para que su interface sea muy
accesible y agradable para sus visitas.

Especficos:

Simplificar la tarea haciendo ms sencilla la elaboracin de un sitio web

con las nuevas etiquetas utilizadas.

Adquirir hbitos de trabajo y procedimientos modernos y actuales que

beneficien la optimizacin de tiempo y recursos.

Elaborar pginas web con estructura semntica adecuada.

CAPITULO II
INTRODUCCIN AL LENGUAJE HTML
Introduccin
Las siglas HTML (HyperText Markup Language) en espaol (lenguaje de marcas
de hipertexto).
Es un estndar que sirve de referencia para la elaboracin de pginas web en sus
diferentes versiones, define una estructura bsica y un cdigo (Llamado cdigo
HTML) para la definicin de contenido de una pgina web, como texto, imgenes,
etc.
El lenguaje HTML basa su desarrollo en la referencia. Para aadir un elemento
externo a la pgina imagen, vdeo, escritos etc., este no se incrusta directamente
en el cdigo de la pgina, sino que se hace una referencia a la ubicacin de dicho
elemento mediante texto.
A lo largo con el paso del tiempo de sus diferentes versiones, se han incorporado
y suprimido diversas caractersticas, con el fin de hacerlo ms eficiente y fcil el
desarrollo de pginas web compatibles con distintos navegadores y plataformas.
Berners-Lee consideraba a HTML una ampliacin de SGML ("Estndar de
Lenguaje de Marcado Generalizado"), pero no fue formalmente reconocida como
tal hasta la publicacin a mediados de 1993, por la IETF, de una primera
proposicin para una especificacin de HTML: el boceto Hypertext Markup
Language de Berners-Lee y Dan Connolly, el cual inclua una Definicin de Tipo
de Documento SGML para definir la gramtica. El boceto expir luego de seis
meses, pero fue notable por su reconocimiento de la etiqueta propia del
navegador Mosaic usada para insertar imgenes sin cambio de lnea.

Qu es y para qu sirve HTML?

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.
Est compuesto por una serie de etiquetas que el navegador interpreta y da forma
en la pantalla. HTML dispone de etiquetas para imgenes, hipervnculos que nos
permiten dirigirnos a otras pginas, saltos de lnea, listas, tablas, etc.

Podramos decir que HTML sirve para crear pginas web, darles estructura y
contenido. Un ejemplo sencillo de cdigo HTML podra ser:
<html>
<body>
<p>Esto es un prrafo. Bienvenidos a esta pgina web.</p>
</body>
</html>

Este ejemplo est formado por 3 etiquetas HTML. Como podemos observar cada
una de las etiquetas debe acabar con su homloga de cierre. En este caso la
etiqueta <html> debe cerrarse con </html>, la etiqueta <body> con </body> y la
etiqueta <p> con </p>.
Hay muchas ms etiquetas que veremos ms adelante pero nos debe quedar
claro que por cada etiqueta que abramos, deberemos incluir la correspondiente
etiqueta de cierre. As conseguiremos un cdigo HTML bien formado y que los
navegadores puedan interpretar sin ambigedad.
Este sencillo ejemplo mostrara por pantalla lo siguiente.
10

Qu ocurrira si una etiqueta que abramos no tiene su correspondiente cierre?

Digamos que se tratara de un cdigo HTML mal construido, y los navegadores
esto lo pueden interpretar de distintas maneras. Quizs nos muestren la pgina tal
y como esperbamos sin aparente error. Quizs nos muestren una pgina de
error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre
construir pginas HTML bien estructuradas y sin ambigedades, es decir, hacer
un correcto uso del lenguaje para que los navegadores puedan saber
exactamente qu es lo que pretendemos mostrar.
Bases
La programacin de pginas Web en general entraremos de lleno en la
programacin con este lenguaje. Pronto nos daremos cuenta de la sencillez de
este lenguaje lo que le convierte en un lenguaje muy fcil de aprender y que nos
permitir crear pginas con mayor facilidad an. Las rdenes de este lenguaje
estarn formadas por unas etiquetas que pueden tener o bien la siguiente
estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura est formada por una nica instruccin y la
segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final,

11

con texto entre ambas. Para comenzar a crear una pgina web es necesario
empezar con unas etiquetas bsicas en HTML.
Estructura de una pgina web
La estructura de una pgina web es la siguiente:

<html>
<head></head>
<body>
</body>
</html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>.
Todo lo que est en medio ser la pgina web. Dentro de <html></html> se
encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la pgina. Aqu ir cierta
informacin que no es directamente el contenido de la pgina. Aqu se pone el
ttulo de la pgina, los metadatos, estilos, cdigo java script. La primera que se
suele estudiar es <title></title>, que indica el ttulo de la pgina (lo que el
navegador pone en la parte superior izquierda).

12

CAPITULO lIl
CREACIN DE UNA PGINA WEB
Dependiendo de nuestro sistema operativo en su contenido tendr un espacio
para notas como es el caso del bloc de notas que se encuentra en Windows, ya
que Windows es el ms comercial comenzaremos la programacin en el bloc de
notas.
Ya que tengamos nuestro bloc de notas abierto como lo muestra la imagen
iniciaremos:
Figura 1.1

Nuestra pgina web, como lo habamos visto anteriormente abre y cierra

totalmente con las etiquetas que van encerradas entre los signos menor que (<) y
mayor que (>), en este caso lleva las etiquetas <html> que abre y </html> que
cierra todo el contenido que lleva nuestra pgina web.
Todas nuestras pginas que elaboremos llevan de por fuerza estas etiquetas ya
que sin estas la pgina no realiza su diseo.
Despus dentro de estas 2 etiquetas introducimos 2 ms que seran <head> y
</head> que sera la cabeza de nuestra pgina o bien dicho el ttulo de esta para
ello dentro de las etiquetas head lleva 2 ms que seran <title> y </title> estas le
daran el ttulo que nosotros le queramos dar a nuestra pgina web.
13

Finalmente lleva en la parte inferior y sin salir de las etiquetas HTML las etiquetas
de <body> y </body> que nos daran el cuerpo de nuestra pgina o la informacin
que nuestra pgina va a contener.
Como habrn notado el ttulo y la informacin de nuestra pgina van dentro de las
etiquetas. Ejemplo mostrado en la siguiente figura:
Figura 1.2

Una vez que nuestras etiquetas estn como en el ejemplo mostrado

anteriormente nos vamos a guardar la pgina con el nombre que le queramos dar
sin olvidar que al terminar el nombre le debemos poner una extensin .html para
que la maquina sepa que este se trata de una pgina web.
Nota: Se recomienda guardar el archivo en una carpeta especialmente para la
pgina y guardar cada que introduzcan una etiqueta para generar los cambios
realizados.

Despus iremos a nuestros documentos donde se guard nuestra pgina damos

doble clic y se correr dndonos la interfaz de nuestra primer pgina web.
14

Nos quedara como el ejemplo mostrado en la siguiente figura:

Figura

1.3

Como observamos en la figura el encabezado o ttulo de nuestra pgina aparece

hasta arriba diciendo MI PRIMERA PAGINA WEB y en el cuerpo o contenido de
nuestra pgina aparece solo un mensaje que dice hola a todos y as es como se
crea tu primera pgina web, nos aparece una interfaz casi en blanco porque a
nuestra pgina no hemos metido demasiada informacin como las pginas que
conocemos.
Etiquetas de HTML
Encabezados
Los encabezados se forman en parte por el tamao y la importancia que le
daremos a cada uno de ellos. Para esto existen Una serie de etiquetas que nos
dar como objetivo el tamao de los encabezados.
Son 6 etiquetas las que realizan este trabajo esas son:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

15

Estas son las 6 etiquetas de encabezados que como hemos visto abren y cierran,
conforme su valor aumenta o disminuye el tamao de la letra o mejor dicho la
importancia del encabezado, en estas etiquetas van del menor al mayor.
Ejemplo en la siguiente figura:
Figura 1.4

Etiqueta para crear una lnea horizontal

<hr>
Ejemplo:

figura

16

Etiquetas para el grosor de la lnea

Estas etiquetas nos darn una lnea ms gruesa o ms delgadas dependiendo de
cmo la necesitemos. Ejemplo:

Etiqueta para centrar el texto

Con la etiqueta <center> es posible centrar cualquier elemento de nuestra pgina
ejemplo:

17

CAPTULO IV
FORMATO
Cmo insertar imgenes en una pgina
La etiqueta usada para insertar imgenes es: <imgsrc=aqu el nombre de la
imagen con su extensin>. Esta etiqueta est compuesta por una nica
instruccin y por tanto no se cierra.
Nota:
La imagen debe de estar en la carpeta o en la ubicacin que se encuentra
guardada la pgina creada o copiar la ubicacin de la imagen para que pueda
detectarla.
En la imagen siguiente se puede observar cmo hemos insertado una flecha en
medio de la frase y despus de la imagen hemos seguido escribiendo. Existen
multitud de formatos para almacenar una imagen en un archivo: BMP, GIF, JPEG,
XPM, XBM, PNG, TIFF, etc. Los archivos que contienen imgenes con formato
JPEG suelen tener la terminacin .jpg.

En el ejemplo de la figura;
Pulsa en la flecha <imgsrc="flecha1.gif">
Como hacer un enlace de hipertexto
18

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las pginas

enlaces hipertexto. Su atributo href permite indicar cul es la pgina a la que
debe saltar el usuario al pulsar sobre el texto adecuado.
<a href="direccin_URL">
Texto que ser sensible (hipertexto)
</a>

Si la pgina a la que queremos crear el enlace no se encuentra en el mismo

directorio que la actual es necesario indicar el directorio (o ruta de directorios,
path) donde est.
<ahref="varios/hobbies.html">hobbies</a>
Como cambiar el tamao de texto
La etiqueta FONT permite tener un gran control sobre el tamao de un texto. Este
tamao se especifica con su atributo SIZE y afectar al texto que encierren la
instruccin de inicio (<FONT SIZE="Tamao de letra">) y de fin (</FONT>).

19

Cuando se indica el tamao del texto usando el mtodo relativo (+n o -n) ser
necesario usar comillas.
Aunque algunos navegadores podran entender el valor aunque no se usen la
nica manera de estar seguro de que la visualizacin ser correcta en todos ellos
ser entrecomillar el valor dado al atributo SIZE.
Como cambiar el color del texto
Se puede cambiar el color del texto con la misma facilidad con la que hasta ahora
se ha cambiado su tamao.
En un principio la nica forma de indicar un color. Existe un segundo mtodo de
indicar el color que sin duda le resultar al lector ms sencillo. Este mtodo
consiste en poner como valor de COLOR el nombre del color en ingls. Los
colores aceptados son: Black (negro), White (blanco),green (verde), maroon
(marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo),
yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul
claro), fuchsia (fusia), silver (gris claro). Aunque adems de estos existen otros
valores, no son soportados en todos los navegadores.
Etiquetas para color de texto y color de fondo
Estas son las etiquetas que nos darn color en nuestro texto y fondo,
dependiendo el color que le queramos dar, ms adelante llevaremos a cabo el

20

desarrollo de donde pondremos estas etiquetas y lo que tenemos que saber para
dar color a nuestro texto.
Etiqueta es para poner color de fondo. Estas etiquetas van dentro de la etiqueta
<body>
Color de fondo
<body bgcolor="#RRGGBB">O bien<body bgcolor="Blue">
Color de texto
<body text="#FFFFFF">
<font color="blue">
</font>

COLORES

21

<font color="blue">
azul
</font>
<font color="red">
rojo
</font>,
Etiquetas necesarias para crear listas
La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta
ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y
despus deben insertarse cada uno de los elementos de lista. Al crear una lista
deberemos indicar su inicio y su fin. Para empezar la lista usaremos la instruccin
de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de
lista, por ejemplo, para crear una lista no ordenada ser necesario usar la etiqueta
UL (su instruccin de inicio ser <UL>). Una vez hemos abierto la lista deberemos
insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello
usaremos una nueva etiqueta (o dos en algn caso) que depender del tipo de
lista. En el caso de la lista no ordenada los elementos se introducen con la
etiqueta de una nica instruccin LI, por ejemplo:

22

El ltimo paso, que ya hemos anticipado en este ejemplo, ser cerrar la lista, para
lo cual usaremos la instruccin de fin de UL: </UL>.
Yo practico:
<UL>
<LI>Ftbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>
Borde de las imgenes
El lenguaje HTML permite recuadrar a las imgenes que incluyamos en nuestras
pginas con un borde de grosor variable. En general este borde es invisible, a no
ser que especifiquemos lo contrario. Sin embargo cuando vimos las imgenes
enlace observamos que alrededor de estas imgenes apareca un borde azul
indicando que se poda pulsar sobre ellas.
Como enseguida veremos que es posible conseguir que las imgenes normales
SI tengan ese borde y que las imgenes enlace no lo tengan o que sea de otro
grosor distinto al que aparece por defecto.

23

La manera de controlar el borde es usar un nuevo atributo, BORDER, que debe

ser usado dentro de la etiqueta IMG.
Debemos usar BORDER=5. De esta forma podremos conseguir que aparezca el
borde en las imgenes enlace.

En el primero de ellos no hemos usado el atributo BORDER:

<A HREF="otra.htm">
<IMG SRC="izda.gif">
</A>
En el segundo lo hemos usado dndole el valor cero para eliminar el borde:
<A HREF="otra.htm">
<IMG SRC="izda.gif" BORDER=0>
</A>
Y en el tercero le hemos dado el valor 10:
<A HREF="otra.htm">
<IMG SRC="izda.gif" BORDER=10>
24

</A>

En este caso la imagen representa una mesa con diferentes objetos encima cada
uno de los cuales representa una seccin del sitio Web al que saltaremos si
pulsamos sobre l.
La gran ventaja de este mtodo consiste en que funcionar con cualquier
navegador, el nico requisito es tener el programa en el servidor Web. El principal
inconveniente es que, por lo general no todo el mundo tiene acceso.
<A HREF="img.map"<
<IMG SRC="img.gif" ISMAP>
</A>
Marquesinas animadas
Cuando de HTML se trata, una marquesina animada consiste en una lnea de
texto que se desplaza por la pantalla de izquierda a derecha, de derecha a
izquierda o en ambas direcciones alternativamente. La etiqueta especfica de
Internet Explorer MARQUEE nos permitir crear este tipo de marquesina con
25

gran facilidad y rapidez. No sern necesarias imgenes ni vdeos. Tal y como

ocurra con las dos extensiones que acabamos de ver, la etiqueta MARQUEE
sigue siendo especfica de Explorer y no es soportada por ningn otro
navegador ni ha sido aceptada por el estndar HTML.

El texto de una marquesina se sita siempre en una nueva lnea, y l es mostrado

con las mismas caractersticas que sera cualquier texto normal de la pgina, por
ello podemos usar las etiquetas para formatear texto que conocemos para
cambiar el formato del texto de una marquesina. Por ejemplo para conseguir un
encabezado de tamao 1 movindose podramos usar:
<H1>
<MARQUEE>
Me estoy moviendo
</MARQUEE>
</H1>
Igualmente podemos cambiar el color o el tipo de fuente del texto encerrando la
marquesina con la etiqueta FONT:
<FONT COLOR="#FF0000"
FACE="arial"

26

SIZE="4">
<MARQUEE>
Me estoy moviendo
</MARQUEE>
</FONT>
Botones de eleccin
Estos controles reciben tambin el nombre de botones de radio, como traduccin
directa de su denominacin inglesa radio buttons y porque en general los
navegadores suelen darles una forma circular. Para insertar un botn de eleccin
usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE
ser radio:
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no
seleccionado (OFF), estando inicialmente todos en la posicin OFF. Tambin es
posible especificar que un botn determinado est seleccionado inicialmente
insertando el atributo CHECKED en la etiqueta INPUT.

Cdigo de imagen anterior:

<FORM>
27

<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz

<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>

Creacin de pginas con frames

Los Webs con frames constarn de varios documentos HTML. Al haber tres
frames sern necesarios 4 documentos HTML.

Ejemplo:

Sern necesarios 4 documentos HTML. El primero simplemente contiene el

cdigo que le indica al navegador el nmero de frames de la pgina, su tamao,
su posicin y el nombre de los archivos donde est el contenido de los 3 frames, a
este documento HTML le llamaremos documento de definicin de frames. Los
otros 3 documentos HTML tienen el contenido de cada uno de los tres frames y
deben ser creados de la misma manera que hemos venido creando los
documentos HTML hasta ahora, eso s, hay que tener en cuenta que ese
contenido ser mostrado en un espacio reducido (el del frame correspondiente) y
no en toda la ventana del navegador.

28

Etiqueta para crear el documento de definicin de frames:

<html>
<frameset ="0" rows="80%,350%">
<frame src=" Definicin de la estructura(Titulo.html)">
<frameset cols="25%,125%">
<frame src=" Contenido del frame 1 (Menu.html)">
<frame name="central" src="(color de fondo.html)">
</frameset>
</frameset>
</html>
Como quitar el borde
La etiqueta FRAME tiene un atributo que puede ser usado para quitar los bordes
de los frames: FRAMEBORDER.
Este atributo puede tomar dos valores: "1" y "0" que significan mostrar los bordes
y ocultarlos respectivamente.
El valor por defecto es mostrar los bordes (FRAMEBORDER="1") y si queremos
que estos desaparezcan debemos escribir explcitamente:

<FRAME FRAMEBORDER="0">
Figura 171. Usando FRAMEBORDER="0" ocultamos los bordes de los frames con
lo que se consigue una gran mejora en la apariencia.

29

En la mayora de las ocasiones quitando el borde de los frames se consigue una

apariencia muy mejorada de nuestras pginas.
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm" FRAMEBORDER="0">
<FRAMESET ROWS="100,*">
<FRAME SRC="frame21.htm" FRAMEBORDER="0">
<FRAME SRC="frame22.htm" FRAMEBORDER="0">
</FRAMESET>

Grosor del borde

Una de las ltimas extensiones de Netscape Navigator relacionadas con los
frames es el atributo BORDER. Con l podemos indicar el grosor del borde que
separa los frames asignndole un valor en pixeles. La forma de usar este atributo
es:
<FRAMEBORDER BORDER="TamaoBordeEnPixeles">
...
30

</FRAMEBORDER>
Si existen varias etiquetas FRAMEBORDER en una misma pgina (es decir si las
hemos anidado) podemos usar el atributo BORDER en cualquiera de ellas, pero
es conveniente usarla una nica vez.

<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm">
<FRAMESET ROWS="100,*" BORDER="20">
<FRAME SRC="frame21.htm">
<FRAME SRC="frame22.htm">
</FRAMESET>
</FRAMESET>

Valores especiales del atributo target

31

El atributo TARGET nos permite mostrar el resultado de un enlace en el frame que

queramos indicando el nombre de dicho frame. Existen, adems, ciertos valores
que puede tomar este atributo que tienen un significado especial:
TARGET="_blank" fuerza que el documento referenciado por el enlace sea
mostrado en una nueva ventana del navegador.
TARGET="_self" usando este valor el documento enlazado ser mostrado en el
mismo frame o ventana donde est el enlace. Este valor es especialmente til
cuando se ha usado la etiqueta BASE para especificar un frame destino por
defecto distinto del actual.
TARGET="_parent" este valor provoca que el documento sea mostrado en el
FRAMESET padre del frame actual.
TARGET="_top" fuerza a que el enlace sea mostrado usando todo el espacio de
la ventana del navegador destruyendo toda estructura de frames. Este valor debe
ser usado siempre que creemos un enlace a una pgina externa a nuestro sitio
web.

<A HREF="prueba.htm" TARGET="_self">

32

Atributos de los frames flotantes

En el cdigo anterior incluimos tres puntos suspensivos en el interior de la
instruccin <FRAME>, estos representan los atributos que debemos usar para
indicar el documento HTML donde se encuentra el contenido que queremos
insertar en el frame flotante, el tamao de ste, el alineamiento y otras
caractersticas variadas.
El atributo SRC es de uso obligatorio y toma como valor la direccin URL,
absoluta o relativa, del documento HTML que servir como contenido.
<TITLE>Frames flotante</TITLE>

<HTML>
<HEAD>
<TITLE>Frames flotante</TITLE>
</HEAD>
<BODY>
<H2>A continuacin vemos un ejemplo de un frame flotante:</H2>
<IFRAME SRC="doc.htm">
Tu navegador no soporta frames flotantes, para ver el contenido ve a <A
HREF="doc.htm">doc.htm</A>
33

</IFRAME>
</BODY>
</HTML>
Cambiando el color del borde
El primero de los atributos, BORDERCOLOR, nos permitir cambiar el color del
borde. El color puede indicarse tanto con el nmero hexadecimal RGB (por
ejemplo #99CC99) o bien usando uno de los nombres predeterminados.
Por ejemplo para poner el borde de color rojo podramos usar:
<FRAME BORDERCOLOR="red">
O bien:
<FRAME BORDERCOLOR="#FF0000">

34

Hay que admitir que el cambio en la apariencia de la pgina no es muy

importante, sin embargo puede ser muy til en ciertos Webs en los que los
colores estn muy cuidados.
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm" BORDERCOLOR="#FF0000">
<FRAMESET ROWS="100,*">
<FRAME SRC="frame21.htm" BORDERCOLOR="#FF0000">
<FRAME SRC="frame22.htm" BORDERCOLOR="#FF0000">
</FRAMESET>
</FRAMESET>

No frame
Los navegadores que tengan soporte para frames simplemente ignorarn todo lo
que haya entre la instruccin de inicio, <NOFRAME >, y la instruccin de fin,
</NOFRAME>. Por su parte los navegadores que no entiendan frames,
directamente ignorarn todas estas etiquetas (no las entienden) y pasarn a
interpretar las etiquetas que siguen a <NOFRAME >. Entre ellas debe estar la
etiqueta BODY, ya que esta etiqueta era imprescindible para las pginas sin
frames, y para los navegadores que no las soporten todas las pginas son sin
frames. En esta ocasin BODY no provocar problemas con FRAMESET porque,
como hemos dicho, los navegadores que entiendan esta ltima ignorarn todo el
cdigo entre <NOFRAME> y < /NOFRAME>.

35

Si no hubiramos usado la etiqueta <NOFRAME > el resultado de ver la pgina

con este cdigo con un navegador sin soporte para frames sera simplemente una
pantalla en blanco.
Un uso habitual de <NOFRAME> es:
<FRAMESET COLS="200,*">
<FRAME SRC="f1.htm">
<FRAME SRC="f2.htm">
<NOFRAME>
<BODY>
<P>Esta pgina usa frames y su navegador no los soporta, por favor vaya a
<A HREF="sinframe.htm">
nuestras pginas sin frames
</A>
</BODY>
</NOFRAME>
</FRAMESET>
Cuadros de seleccin
ste control para crear formularios que nos ofrece el lenguaje HTML. Su funcin
ser dar a elegir entre una serie de opciones de manera que el usuario pueda
elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como
una lista con desplazamiento, o mediante una persiana desplegable.

36

Para insertar un cuadro de seleccin usaremos la etiqueta SELECT, que consta

de una instruccin de inicio y de una instruccin de fin, entre las cuales
introduciremos las diferentes opciones para el usuario. Para insertar estas
opciones usaremos una nueva etiqueta, OPTION, que consta de una nica
instruccin.

Cuando se pulse el botn Enviar eleccin se mandar al servidor el texto que

sigue a la etiqueta OPTION, que se haya escogido (Por ejemplo color=Rojo).
<FORM>
Elija un color:<BR>
<CENTER>
<SELECT NAME="color">
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT TYPE="submit"
VALUE="Enviar eleccin">
</FORM>
37

CAPITULO V
CONCLUSIONES
La Finalidad de este tutorial es darles a conocer sobre la creacin de pginas web
paso a paso para un mejor entendimiento a este tutorial, este fue creado para
ayudar a todos aquellos que quieren crear su propia pgina web para cualquier
propsito, esperamos que este tutorial haya servido de mucho y no tengan ningn
problema en la elaboracin de sus pginas web.
En conclusin este lenguaje es uno de nuestros favoritos y no es nada difcil
gracias a sus prcticas etiquetas nada ms es cuestin de aplicarlas.
38

Fuentes de informacin
http://es.wikipedia.org/wiki/HTML
http://www.monografias.com/trabajos7/html/html.shtml
http://www.uv.es/jac/guia/index.html
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf

39

Cronograma de actividades
ACTIVIDADES
INVESTIGACI

MARZO

ABRIL

MAYO

JUNIO

N
CAPTURA DE
INFORMACI
N
FORMATO DE
INFORMACI
N

40

41