Sesion HTML

Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY
Pg. N 1
HTML
l lenguaje utilizado por la World Wide Web es el HTML, actualmente

el lenguaje hipermedia ms aceptado a nivel mundial. El HTML (Hyper
Text Markup Language) es el lenguaje con el que se escriben las
pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite
escribir texto de forma estructurada, y que est compuesto por etiquetas,
que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener
imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento
multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en
los navegadores (programas que permiten visualizar las pginas web). Los navegadores se
encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las
pginas web resultantes del cdigo interpretado.
Qu se necesita para crear una pgina Web?

Lo principal de HTML es que no necesitas ningn lenguaje de programacin o programa especial
para crear pginas Web. Tan solo necesitas un editor como el Bloc de Notas o WordPad de
Windows.
Un editor es un programa que permite redactar documentos, pero hoy en da existen editores
que le permiten crear pginas Web sin la necesidad de escribir ni una sola lnea de cdigo HTML.
Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las
pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la
creacin de las pginas, y el uso de mens permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve
para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que
resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.
Pg. N 2

Entre los editores visuales ms comunes para crear pginas web son: Microsoft Frontpage,
Macromedia Dreamweaver, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, EditPlus, entre otros, de los cuales algunos tienen la ventaja
de ser gratuitos.
Interfaces del editor EditPlus
Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML.
Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el
identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que
permiten aadir ciertas propiedades.
Sintaxis es:
<identificador atributo1 atributo2...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar
cualquier valor propio del usuario, o valores HTML predefinidos.
La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador
o nombre de la etiqueta, y no contiene atributos.
Sintaxis es:
</identificador>
Existen excepciones de algunos elementos que no necesitan etiqueta de cierre. Tambin es
posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de
cierre.
Pg. N 3

Estructura bsica de una pgina web
La estructura bsica de una pgina es:
<html>
<head>
<title>
...
</title>
</head>
<body>
...
</body>
</html>
Identificador del tipo de documento <html>

Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo
tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la
pgina.
Cabecera de la pgina <head>
La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el
ttulo. Est formada por las etiquetas <head> y </head>.
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan
son:
<link>, <style>, <script>
<meta>
<title>
<meta>
Esta etiqueta se utiliza para aadir informacin sobre la pgina, la cual puede ser utilizada
por los buscadores. Los buscadores consultan la informacin de la etiqueta <meta> de las
pginas, buscando coincidencias con lo que el usuario pretende encontrar. A travs de
esta etiqueta pueden especificarse los atributos name y content.
o
o
El atributo name indica el tipo de informacin. y

El atributo content indica el valor de dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos,
como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la
Pg. N 4

mayora de buscadores estn en ingls, es preferible que el tipo de informacin se
especifique en ingls. Entre los tipos de informacin ms utilizados son los siguientes:
Tipo
author
classification
description
generator
keywords
Significado
Autor de la pgina
Palabras para clasificar la pgina en los buscadores
Descripcin del contenido de la pgina
Programa utilizado para crear la pgina
Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es
posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas
<meta> en un mismo documento.
La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. Ejemplo:
<head>
...
<meta name="author" content="Jose Castro">
<meta name="description" content="Curso de HTML ">
</head>
Ttulo de la pgina <title>
El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador,
cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario
escribir el texto deseado entre las etiquetas <title> y </title>.
<head>
<title>
Mi Primera pagina Web
</title>
</head>
Cuerpo del documento <body>
El cuerpo del documento contiene la informacin propia del documento, es decir lo que
queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que
van justo debajo de la cabecera.
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la
pgina, aplicar formato al texto, a los mrgenes.
Pg. N 5

Atributo bgcolor define el color de fondo, se le debe asignarle un color representado en
hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos
que escribir:
<body bgcolor="#0000FF">
...
</body>
<body bgcolor="blue">
...
</body>
Atributo background permite establecer una imagen de fondo, indicando la ruta en la que
se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen mifondo.gif,
que se encuentra en el mismo directorio en el que se encuentra guardada la pgina,
tendremos que escribir:
<body background="mifondo.gif">
...
</body>
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se
encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que
la pgina, tendremos que escribir:
<body background=" imagenes/mifondo.gif">
...
</body>
Atributo text permite establecer el color del texto de la pgina.
Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos
que escribir:
<body text=" red">
...
</body>
Atributos leftmargin (margen izquierdo) y topmargin (margen superior) permite
establecer el borde de la ventana y el contenido de la pgina, cuyo tamao se da en
pxeles
Atributos marginwidth (anchura del margen) y marginheight (altura del margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Pg. N 6

Comentarios
Para insertar comentarios dentro del cdigo, basta con insertar el texto entre .
<!Esto es un comentario -->
Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.
Saltos de lnea <br>

Para insertar un salto de lnea, se utiliza la etiqueta <br> donde se desee que se produzca el salto.
La etiqueta <br> no necesita la etiqueta de cierre. Por ejemplo, para insertar el texto:
Bienvenidos <br> a la Provincia de Huarmey
Bienvenidos
a la Provincia de Huarmey
Texto preformateado <pre>

Las etiquetas <pre> y </pre> permite que el texto aparezca en el navegador tal cual ha sido
insertado dentro de estas etiquetas, es decir, los espacios en blanco que se inserten en el texto,
as como todos los saltos de lnea.
El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir
las etiquetas <img> (para incluir imgenes), <object> (para incluir objetos como animaciones),
<big>, <small>, <sub> ni <sup>.
Separadores <hr>
<hr> permite insertar una regla horizontal, que suele utilizarse para separar secciones dentro de
una misma pgina. No se necesita de la etiqueta de cierre.
Atributo
align
width
size
noshade
Significado
Posibles valores
alineacin de la regla dentro de la left (izquierda), right (derecha),
pgina
center (centro)
ancho de la regla
un nmero, acompaado de % cuando se
desee que sea en porcentaje
alto de la regla
un nmero
eliminar el sombreado de la regla
no puede tomar valores
Sangrado de texto <blockquote>

Las etiquetas <blockquote> y </blockquote> permite aplicar sangra. Su uso de esta etiqueta
obliga a que el texto aparezca en una nueva lnea.
Pg. N 7

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los
mrgenes sean mayores.
Formateado de texto <font> ...

Si desea formatear un texto utilice la etiqueta <font>. Para ello, podemos insertar el texto entre
las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:
Atributo
face
color
size
Significado
fuente
color del texto
tamao del texto
valores Posibles
nombre de la fuente, o fuentes
nmero hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3.
Ejemplo:
<font color="#993366" size="4" face="Comic Sans MS ">Bienvenidos a la Web </font>
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la
etiqueta <basefont> despus de la etiqueta <body>, la cual no necesita una etiqueta de cierre, y
tiene los mismos atributos que la etiqueta <font>. Por ejemplo:
<body>
<basefont color="blue" size="4" face="Arial">
Resaltado del texto <b> ...

Existen etiquetas que permiten la apariencia o el estilo del texto, que por lo general se utilizan
para resaltarlo. Estas etiquetas son:
Etiqueta
<b>
<i>
<u>
<s>
<tt>
<big>
<small>
<strong>
<sub>
<sup>
Significado
Negrita
Cursiva
Subrayado
Tachado
Teletipo (mquina de escribir)
Aumenta el tamao de la fuente
Disminuye el tamao de la fuente
Destacado
Subndice
Superndice
Debe de tener en cuenta que todas estas etiquetas necesitan una etiqueta de cierre, y pueden
aplicarse varias etiquetas al mismo texto.
Pg. N 8

<b>Bienvenidos a la Web </b>
<i>Bienvenidos a la Web </i>
<u>Bienvenidos a la Web </u>
<s>Bienvenidos a la Web </s>
<tt>Bienvenidos a la Web </tt>
<big><big>Bienvenidos a la Web </big></big>
<small><small>Bienvenidos a la Web </small ></small >
Bienvenidos a la <sub>Web </sub >
<sup>Bienvenidos </sup>a la Web
Prrafos <p> ...

Para agrupar textos en prrafos diferentes se debe de utilizar las etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior,
ya que las etiquetas <p> y </p> hacen que se cambie de lnea automticamente.
Tambin puede alinear el texto de cada prrafo utilizando los atributo align, cuyos valores pueden
ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
Agrupacin de bloques <div> ...

La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con
la diferencia de que la separacin entre ellos es menor. Tambin debe de utilizar la etiqueta de
cierre </div>, y puede utilizar el atributo align. As mismo, hacen que se cambie de lnea
automticamente
Pg. N 9

Agrupacin de bloques <spam> ...
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de
lnea, son las etiquetas <span> y </span>.
Encabezados <h1> ...

Existen seis tipos de encabezados que suelen utilizarse para establecer ttulos dentro de una
pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de
resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de
l. Todas ellas precisan una etiqueta de cierre.
Etiqueta
Ejemplo
Para todas estas etiquetas es posible especificar el valor del atributo align.
Marquesinas <marquee>
Son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y
</marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas
puedes hacer que estas propiedades varen.
atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores
alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado
a otro, continuamente) o slide (de un lado a otro, pero una sola vez).
atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar
los valores down (de arriba a abajo), up (de abajo a arriba), right (de derecha a izquierda) o
left (de izquierda a derecha).
Pg. N 10

atributo bgcolor permite establecer un color de fondo.
Por ejemplo:
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">HUARMEY *** PERU </font></b>
</marquee>
Las listas <li> y </li>

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Ejemplo:
Carreras
Profesionales
<li>Computacin</li>
<li>Sistemas</li>
<li>Informtica</li>
Listas Desordenadas Vietas <ul> y </ul>:
Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas
<ul> y </ul>.
A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo),
disc (disco) o square (cuadrado). Ejemplo:
Carreras Profesionales
<ul type="circle">
<li>Computacin</li>
<li>Sistemas</li>
<li>Informtica</li>
</ul>
Pg. N 11
<ul type="square">
<li>Computacin</li>
<li>Sistemas</li>
<li>Informtica</li>
</ul>
Lista ordenada Numeracin <ol> y </ol>:
Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas <ol>
y </ol>.
A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1
(nmeros), a (letras minsculas), A (letras maysculas), i (nmeros romanos en minsculas) o
I (nmeros romanos en maysculas). Ejemplo:
<ol>
<li>Computacin</li>
<li>Sistemas</li>
<li>Informtica</li>
</ol>
<ol type=" A">
<li>Computacin</li>
<li>Sistemas</li>
<li>Informtica</li>
</ol>
Anidar Listas:
Se puede anidar listar utilizando numeracin y vietas a la vez.
Ejemplo:
Pg. N 12
COMPUTACION Y SISTEMAS
<ul type="square">
<li>Primer Ciclo</li>
<ul type="circle">
<li>Formacin General</li>
<ol>
<li>tica</li>
<li>Matemtica</li>
<li>Comunicacin</li>
</ol>
<li>Formacin Profesional</li>
<ol>
<li>Fundamentos</li>
<li>Computacin Bsica</li>
</ol>
</ul>
<li>Segundo ciclo</li>
<ul type="circle">
<li>Formacin General</li>
<ol>
<li>Responsabilidad</li>
<li>Matemtica II</li>
<li>Fsica</li>
</ol>
<li>Formacin Profesional</li>
<ol>
<li>Programacin</li>
<li>Base de Datos</li>
</ol>
</ul>
</ul>
Pg. N 13

Hiperenlace <a>
Un hipervnculo o vnculo, es un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos
elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse
entre las etiquetas <a> y </a>.
A travs del atributo href se especifica la pgina a la que est asociado el enlace.
Por ejemplo El siguiente cdigo permite abrir la pgina Web de google:
<a href="http://www.google.com.pe">ir a www.google.com.pe</a>

TIPOS DE REFERENCIAS
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.
Referencia absoluta: Conduce a una ubicacin externa (internet) al sitio en el que se
encuentra el documento. En este caso hay que empezar la referencia por http://. Ejemplo:
<a href="http://www.google.com.pe">ir a www.google.com.pe</a>
Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el
documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,
con un diseo similar o un objetivo comn, estando todos ellos dentro de una misma
carpeta, conocida como carpeta raz del sitio.
Por ejemplo, si el archivo web.htm se encuentra directamente dentro de la carpeta raz del
sitio, para insertar el enlace se escribira:
<a href="/web.htm">ir al tema Web</a>
El smbolo "/" delante del nombre del archivo la carpeta raz del sitio. Si el archivo web.htm
se encontrara dentro de una carpeta llamada cursoweb, la cual se encuentra dentro de la
carpeta raz del sitio, se habra que escribir:
<a href="/cursoweb/web.htm">ir al tema Web</a>
Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio
que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
Teniendo en cuenta que el documento web.htm se encuentra dentro de la misma carpeta

que el documento actual, para insertar el enlace, se tendra que escribir:
<a href="web.htm">ir al tema Web</a>
Pg. N 14

En este caso no aparece el smbolo "/" delante del nombre del documento.
Teniendo en cuenta que el documento web.htm se encontrara dentro de una carpeta

llamada cursoweb y esta estuviera dentro de la misma carpeta que el documento actual,
se tendra que escribir:
<a href="cursoweb/web.htm">ir al tema Web</a>
Punto de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o
de otro diferente. Para ello el vnculo debe ser: "nombre_de_documento#nombre_de_punto"

Por ejemplo, si dentro del archivo web.htm existiese un punto de fijacin llamado
estructura, entonces se tendra que escribir:
<a href="web.htm#estructura">ir a la Estructura de una pgina Web</a>
PUNTOS DE FIJACIN. ANCLAS
Los puntos de fijacin se utilizan cuando se tienen documentos extensos, divididos en varios
apartados. Estos puntos de fijacin nos permiten ir directamente al apartado deseado, en lugar
de ir al comienzo del documento. Son muy tiles a la hora de crear ndices.
Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar
cualquier nombre o valor inventado por el usuario, se recomienda no utilizar caracteres
especiales.
Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:
La estructura de una pgina
Se tendra que escribir:
<a name="estructura"></a> La estructura de una pgina
Si el documento actual se llama web.htm, y el ancla se llama estructura, el enlace que nos llevara
directamente a la lnea de texto en la que se encuentra el ancla sera:
<a href="web.htm#estructura">ir a la Estructura de una pgina Web</a>
Si el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, ya no es
necesario escribir el nombre de la pgina en el atributo href.
<a href="#estructura">ir a la Estructura de una pgina Web</a>
Pg. N 15

DESTINO DEL ENLACE
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica
a travs del atributo target al que se le puede asignar los siguientes valores:
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en
el conjunto de marcos padre.
_self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
<a href="http://www.google.com.pe" target ="_blank" >ir a www.google.com.pe</a>
Esta opcin se utiliza cuando la pgina de destino est fuera de nuestro sitio para que cuando el
usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que
haba salido (que vuelva a nuestro sitio).
FORMATO DE LOS ENLACES
En general, un texto que tiene un vnculo asociado suele aparecer subrayado.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de
puntitos al pulsar sobre ella.
Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el
contorno de esa zona.
Si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vnculo. Suele adquirir la apariencia de una mano sealando.
Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o
cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada
navegador, pero nosotros podemos cambiar esos colores.
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la
etiqueta <body>. Estos colores se asignan a travs de los atributos:
link: Permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado
ninguna vez).
alink: Permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink: Permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Pg. N 16
Por ejemplo:
<body link="blue" vlink="red" alink="yellow">
<a href="http://www.google.com.pe" target ="_blank" >ir a www.google.com.pe</a>
Mientras no se visite el enlace ser de color azul
Mientras la pgina sea la ltima visitada, el enlace ser de color rojo
Cuando se haya visitado la pgina el enlace ser de color amarillo
OTROS TIPOS DE ENLACES
Entre otros tipos de enlaces que no conducen a otra pgina web tenemos:
Correo electrnico: Abre la aplicacin Outlook Express para escribir un correo electrnico,
cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser
"mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrnico al docente del
presente curso, tendras que escribir:
<a href="mailto:castrojacc@hotmail.com">e-mail para el docente</a>
Vnculo a ficheros para descarga: El valor del atributo href normalmente ser una pgina
web (con extensin htm, html, asp, php...) pero tambin puede ser un fichero comprimido,
una hoja de Excel, un documento Word, un documento con extensin pdf.
Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo en el que el
navegador le pide al usuario
permiso para descargar el fichero
en su ordenador.
El navegador reconoce algunas
extensiones como asociadas a un
determinado
programa
(por
ejemplo.doc a Word, .pdf al
Acrobar Reader, .xls al Excel...).
Por ejemplo: si se desea descargar el archivo tutorial.pdf, entonces escribiras:
<a href="tutorial.pdf" tarjet="_blank" >Descargue tutorial aqu </a>
Pg. N 17

Vnculo vaco: Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el
formato es el mismo que el de cualquier otro enlace. El vnculo debe ser el smbolo
almohadilla "#".
Por ejemplo, para insertar el enlace vaco:
<a href="#" >vnculo vaco </a>
Imagen <img>
Las imgenes permiten mejorar la apariencia de las pginas web, o dotarla de una mayor
informacin visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha
etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a travs del atributo src.
Por ejemplo, para insertar una imagen que se llama logo_web.gif y que est dentro de la carpeta
imgenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa
al documento), se tendra que escribir:
<img src="imagenes/logo_web.gif">
Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos
html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes
carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar
imgenes, o una carpeta destinada a almacenar archivos de audio, etc.
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al
especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar,
junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la
imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada logo_web.gif, con el texto
alternativo Imagen logotipo, para ello insertamos el siguiente cdigo:
<img src="imagenes/logo_web.gif" alt="logotipo">
El texto alternativo se muestra tambin al situar el puntero sobre la imagen.
Borde de una imagen
Al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero
es posible establecer uno a travs del atributo border.
Pg. N 18
El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.
Por ejemplo, para insertar la siguiente imagen con borde:
<img src="imagenes/logo_web.gif" alt="logotipo" border="4" >
Tamao de una imagen
Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero
por diversos motivos puede interesarnos modificar dicho tamao. A travs de los atributos width
(anchura) y height (altura) puede modificarse el tamao de la imagen.
El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de %
cuando se desee que sea en porcentaje con respecto a la pgina. Por ejemplo:
<img src="imagenes/logo_web.gif" alt="logotipo" width="200" height="80">
Alineacin de una imagen

La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la
alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:
Valor
Significado
absbottom inferior absoluta
absmiddle medio absoluta
baseline
lnea de base
bottom
inferior
left
izquierda
middle
Medio
right
derecha
texttop
texto superior
top
superior
Ejemplo:
<img src="imagenes/logo_web.gif" alt="logotipo" align="middle">
Tabla <table>
Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la
interseccin entre una fila y una columna.
Pg. N 19

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas
habr que especificar las filas y columnas que formarn la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas
debern insertarse entre las etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con tres filas escribiramos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar
el nmero de columnas. Una celda es el resultado de la interseccin entre una fila y una columna.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas <tr>
y </tr>.
Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla:
DIAS
LUNES
VIERNES
HORARIO
08:00 A 11:20
08:00 A 12:20
<table border="1">
<tr>
<td> DIAS </td>
<td> HORARIO </td>
</tr>
<tr>
<td> LUNES </td>
<td>08:00 A 11:20</td>
</tr>
<tr>
<td>VIERNES</td>
<td>08:00 A 12:20</td>
</tr>
</table>
Pg. N 20

Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Atributo
width
height
cellpadding
cellspacing
border
align
bgcolor
background
bordercolor
Significado
ancho de la tabla
Posibles valores
un nmero, acompaado de % cuando
se desee que sea en porcentaje
altura de la tabla
espacio entre el contenido un nmero
de las celdas y el borde
espacio entre celdas
un nmero
grosor del borde
un nmero
alineacin de la tabla left (izquierda)
dentro de la pgina
right (derecha)
center (centro)
color de fondo
nmero hexadecimal
imagen de fondo
nmero hexadecimal
color del borde
nmero hexadecimal
Por ejemplo, si la tabla anterior se desea que el ancho (width) de la tabla debe ocupar el 50% del
ancho de la ventana, que el borde (border) tenga un grosor de dos pxeles, que la tabla este
alineada al centro (center) de la ventana, que no haiga espacio entre las celdas (cellspacing="0"),
que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99), entonces se tendra que
escribir:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99" >
...
</table>
Formato de las celdas
Es posible modificar los siguientes atributos de una celda:
Atributo
Significado
Posibles valores
width
ancho de la tabla
height
altura de la tabla
align
alineacin horizontal del left (izquierda)
contenido de la celda
right (derecha)
center (centro)
valign
alineacin vertical del baseline (lnea de base)
contenido de la celda
bottom (inferior)
middle (medio)
top (superior)
bgcolor
color de fondo
nmero hexadecimal
background
imagen de fondo
nmero hexadecimal
bordercolor
color del borde
nmero hexadecimal
Pg. N 21

Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta
<tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen ms
prioridad cuando son establecidos para una celda que para una fila completa. Al mismo tiempo,
tienen ms prioridad los atributos establecidos para una fila que para toda la tabla.
Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero
podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero
esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se
utiliza para definir los encabezados o ttulos de las columnas. Ejemplo, si deseamos modificar la
tabla anterior se tendra que escribir:
< table width="50%" border="1" align="center">
<tr>
<th> DIAS </th>
<th> HORARIO </th>
</tr>
<tr>
<td> LUNES </td>
<td>08:00 A 11:20</td>
</tr>
<tr>
<td>VIERNES</td>
<td>08:00 A 12:20</td>
</tr>
</table>
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para
combinar celdas.
Atributo colspan Permite especificar el nmero de columnas por las que se extender la
celda.
Atributo rowspan Permite especificar el nmero de filas por las que se extender la celda.
Ejemplo: Se desarrollar la siguiente tabla:
DESARROLLO WEB
LENGUAJE DE PROGRAMACION
EMPRESAS PUBLICAS
EMPRESAS PRIVADAS
MAS UTILIZADOS
PHP
ASP
85%
15%
60%
40%
Pg. N 22
<table width="50%" border="2" cellspacing="2">

<tr align="center" valign="middle">
<th colspan="3">DESARROLLO WEB</th>
</tr>
<th rowspan="2"> LENGUAJE DE PROGRAMACION </th>
<th colspan="2"> MAS UTILIZADOS </th>
</tr>
<th> PHP </th>
<th> ASP </th>
</tr>
<tr align="left" valign="middle">
<td> EMPRESAS PUBLICAS </td>
<td>85%</td>
<td>15%</td>
</tr>
<tr align="left" valign="middle">
<td> EMPRESAS PRIVADAS </td>
<td>60%</td>
<td>40%</td>
</tr>
</table>
Conjunto de marcos <frameset>

Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten
mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras
que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la
apariencia.
Cada uno de los marcos de una pgina, contiene un documento HTML individual.
Los conjuntos de marcos se definen a travs de las etiquetas <frameset> y </frameset>, que van
despus de la etiqueta <head>. A travs de estas etiquetas se indica el nmero de marcos en que
se dividir la ventana, cada uno de los cuales ser una especie de sub ventana.
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas
<body> y </body>, ya que el cuerpo del documento ser el cuerpo de las pginas que se carguen
en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:
Pg. N 23

Atributo
cols
Significado
tamao de cada una de las
columnas en que se divide el
documento
rows
tamao de cada una de las
columnas en que se divide el
documento
frameborder aparece o no el borde de los
marcos
framespacing separacin entre los marcos
border
grosor del borde
Posibles valores
Un nmero (acompaado de % cuando se
desee que sea en porcentaje) por cada
columna, separados por comas.
Un nmero (acompaado de % cuando se
desee que sea en porcentaje) por cada fila,
separados por comas.
Yes
no
un nmero
un nmero, acompaado de % cuando se
desee que sea en porcentaje
bordercolor
color del borde
nmero hexadecimal
Tambin es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica
que dicha fila o columna ocupar todo lo que quede de ventana o sub ventana. Cuando existan
varias columnas o filas con este valor, se repartirn de forma equitativa lo que quede de ventana.
Ejemplo:
<frameset rows="*" cols="150,*,25%">...</frameset>
Como el atributo rows tiene el valor asterisco, solo habra una fila, que ocupara todo el alto de la
ventana. En este caso concreto no hara falta poner el atributo rows. Como el atributo cols tiene
tres valores, estaramos dividiendo el documento en tres columnas. La primera columna sera de
150 pxeles de ancho, la tercera del 25% de la ventana, y la segunda columna ocupara lo que
quedar de ventana (el 75% de la ventana menos 150 pxeles).
Tambin es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Ejemplo:
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Estaramos dividiendo el documento en dos columnas. La primera sera de 142 pxeles, y la otra
abarcara el resto de la ventana. As mismo, la primera columna o sub ventana estara dividida en
dos filas o sub ventanas horizontales, la primera de ellas de 80 pxeles. La segunda columna o sub
ventana se dividira en tres columnas, la primera del 25% de la sub ventana, y las otras dos se
repartiran el resto a partes iguales (se repartiran el 75% de la sub ventana).
Debemos de tener en cuenta que entre las etiquetas <frameset> y </frameset> slo se pueden
encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus etiquetas de cierre.
Marco <frame>
Ahora veremos cmo hacer que se carguen las distintas pginas en cada uno de los marcos. Para
indicar qu documento se cargar en cada uno de los marcos habr que insertar la etiqueta
<frame> por cada uno de los marcos de la ventana. Estas etiquetas estarn entre las etiquetas
<frameset> y </frameset>, y no necesitan etiqueta de cierre.
Pg. N 24

Es posible modificar los siguientes atributos de un marco:
Atributo
frameborder
name
noresize
marginwidth
Significado
aparece o no el borde del marco
nombre del marco
si aparece, el usuario no podr
redimensionar el tamao de este marco
anchura del margen con respecto a los
bordes del marco
Posibles valores
yes o 1; no o 0
cualquier valor
no puede tomar valores
un nmero,
cuando se
porcentaje
un nmero,
cuando se
porcentaje
yes
no
auto
acompaado de %
desee que sea en
marginheight
altura del margen con respecto a los

bordes del marco
scrolling
se mostrar o no la barra de
desplazamiento cuando la pgina del
marco no se pueda visualizar
completamente en l
documento que se cargar en el marco
ruta y nombre del documento
src
acompaado de %
desee que sea en
Por ejemplo, para crear una pgina con dos marcos horizontales (rows="90,*"), y el segundo
marco horizontal dividido en dos marcos verticales (cols="150,*"):
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>
Destino del enlace

En el tema de hipervnculos se vio los posibles destinos de los enlaces como son: _blank, _parent,
_self, y _top.
Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos
marcos de la pgina. Por ejemplo, si tuviramos un marco con el nombre marcoderecho,
podramos insertar el enlace:
<a href="http://www.google.com.pe" target="marcoderecho">Aulaclic en el marco derecho</a>
Formulario <form>
Los formularios se utilizan para obtener opiniones, dudas, y otra serie de datos sobre los usuarios,
para introducir pedidos a travs de la red, tienen multitud de aplicaciones. Un formulario est
formado por etiquetas, campos de texto, mens desplegables, y botones.
Pg. N 25

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando
tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su
comprensin y mejora su apariencia.
Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas etiquetas
habr que insertar los diferentes objetos que formarn el formulario. La etiqueta <form> tiene los
siguientes atributos:
El atributo action indica una direccin de correo electrnico a la que enviar informacin el
formulario, o la direccin del programa que se encargar de procesar el contenido del
formulario.
El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por
defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el mtodo mediante el que se transferirn las variables del
formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa
que no sea el navegador del usuario que pretende mandar el formulario, como ocurre
cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario
manda datos que deben ser almacenados en una base de datos.
A continuacin veamos los distintos elementos que se pueden incluir en un formulario.
reas de texto <textarea>
Las reas de texto permiten a los usuarios insertar varias lneas de texto. Se utilizan mayormente
para los comentarios.
Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las
etiquetas <form> y </form> del formulario.
El atributo name indica el nombre del rea de texto. Es necesario dar nombres a cada uno de
los elementos de un formulario, para poder identificarlos a la hora de procesarlos.
El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto
por lo que determina al alto del rea de texto.
El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el
rea de texto por lo que determina al ancho del rea de texto.
Por ejemplo:
Pg. N 26
<textarea name="TxtAreaComentario" cols="30" rows="3">Escribe Aqu</textarea>

Elementos de entrada <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas
<form> y </form> del formulario.
El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual
ser evaluado.
El atributo type indica el tipo de elemento de entrada.
Existen varios tipos de elementos de entrada, y el resto de atributos que pueden definirse para
cada uno de ellos.
Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de
texto, determina el ancho de la caja.
El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo
de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo:
<input name="TxtNombre" type="text" value="Jos Castro" size="20" maxlength="15">
Campo de contrasea:
Para insertar un campo de contrasea, el atributo type debe tener el valor password. El resto de
atributos son los mismos que para un campo de texto normal. La nica diferencia es que todas las
letras escritas en el campo de contrasea sern visualizadas como asteriscos.
Por ejemplo:
<input name="TxtPcontra" type="password" value="castro" size="20" maxlength="15">
Pg. N 27

Botn:
Para insertar un botn, el atributo type debe tener:
El valor es submit, al pulsar sobre el botn se enviar el formulario.
El valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos
los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
El valor es button, al pulsar sobre el botn no se realizar ninguna accin.
El atributo value indica el texto que mostrar el botn.
Por ejemplo:
<input name="BtnEnviar" type="submit" value="Enviar">
Casilla de verificacin:
Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este
atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este
atributo no toma valores.
Por ejemplo:
<input name="ChkDescuento" type="checkbox" value="SI" checked>
Botn de opcin:
Para insertar un botn de opcin, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botn de opcin. Es necesario poner este
atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este
atributo no toma valores.
Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar
un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el
mismo nombre (que indica la variable) y con distintos valores. Solamente uno de estos botones
Pg. N 28

podr estar activado, el que est activado cuando se enva el formulario, su valor ser el que
tendr la variable.
Por ejemplo:
<input name="OptSexo" type="radio" value="M" checked>
<input name="OptSexo" type="radio" value="F">
Campos de seleccin <select> ...
Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de
estos mens o listas es necesario insertar las etiquetas <select> y </select> en un formulario.
El atributo name indica el nombre del men o lista ser el nombre de la variable que
contendr el valor seleccionado.
El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al
mismo tiempo, determina el alto de la lista.
La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos
de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores.
La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario
no podr seleccionar sus elementos. Este atributo tampoco toma valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este
atributo, se enviar el texto de la opcin, que se encuentra entre las etiquetas <option> y
</option>.
La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no
toma valores.
Por ejemplo, para insertar el men o combo:
<select name="carrera">
<option selected>Seleccione</option>
<option>Sistemas</option>
<option>Civil</option>
<option>Derecho</option>
<option>Contabilidad</option>
</select>
Pg. N 29
Por ejemplo, para insertar la lista:
<select name="carrera" size="4" >

<option selected>Seleccione</option>
<option value="ave">Sistemas</option>
<option>Civil</option>
<option>Derecho</option>
<option>Contabilidad</option>
</select>
Pg. N 30

Sesion 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

Sesion HTML

Uploaded by

Copyright:

Available Formats

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

l lenguaje utilizado por la World Wide Web es el HTML, actualmente

Qu se necesita para crear una pgina Web?

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Interfaces del editor EditPlus

<identificador atributo1 atributo2...>

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

La estructura bsica de una pgina es:

Identificador del tipo de documento <html>

El atributo name indica el tipo de informacin. y

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Saltos de lnea <br>

Texto preformateado <pre>

Sangrado de texto <blockquote>

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Formateado de texto <font> ...

Resaltado del texto <b> ...

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

<i>Bienvenidos a la Web </i>

<u>Bienvenidos a la Web </u>

<s>Bienvenidos a la Web </s>

<tt>Bienvenidos a la Web </tt>

<big><big>Bienvenidos a la Web </big></big>

<small><small>Bienvenidos a la Web </small ></small >

Bienvenidos a la <sub>Web </sub >

<sup>Bienvenidos </sup>a la Web

Prrafos <p> ...

Agrupacin de bloques <div> ...

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Encabezados <h1> ...

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Las listas <li> y </li>

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

<a href="http://www.google.com.pe">ir a www.google.com.pe</a>

Teniendo en cuenta que el documento web.htm se encuentra dentro de la misma carpeta

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Teniendo en cuenta que el documento web.htm se encontrara dentro de una carpeta

de otro diferente. Para ello el vnculo debe ser: "nombre_de_documento#nombre_de_punto"

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY