INSTITUTO TECNOLGICO SUPERIOR DEL OCCIDENTE DE HIDALGO

PROGRAMACIN WEB HTML ING. EN SISTEMAS COMPUTACIONALES INSTRUCTOR: ALINE PREZ MARTNEZ alpema13@hotmail.com pwitsoeh@gmail.com

HTML
HTML es la abreviatura de HyperText Markup Language, y
es el lenguaje que todos los programas navegadores usan

para presentar informacin en la World Wide Web (WWW).

Este es un lenguaje muy sencillo que se basa en el uso

de etiquetas, consistentes en un texto ASCIIencerrado dentro de un par de parntesis angulares(<..>). El texto incluido dentro de los parntesis nos dar una explicacin de la utilidad de la etiqueta. As por ejemplo la etiqueta <TABLE> nos permitir denir una tabla.

HTML
Las etiquetas podrn incluir una serie de atributos o

parmetros, en su mayora opcionales, que nos permitirn denir diferentes posibilidades o caractersticas de la misma. Estos atributos quedarn denidos por su nombre (que ser explicativo de su utilidad) y el valor que toman separados por un signo de igual. En el caso de que el valor que tome el atributo tenga ms de una palabra deber expresarse entre comillas, en caso contrario no ser necesario. As por ejemplo la etiqueta <TABLE border=2> nos permitir denir una tabla con borde de tamao 2.

HTML
Entre otras cosas, el manejo de estas etiquetas nos permitir: Denir la estructura lgica del documento HTML. Aplicar distintos estilos al texto (negrita, cursiva, ...). La inclusin de hiperenlaces, que nos permitirn acceder a otros
documentos relacionados con el actual. audio).

La inclusin de imgenes y cheros multimedia (grcos, vdeo,

HTML

HTML

HTML

HTML-Colores

 Argumentos o parmetros de la etiqueta BODY Imagen como fondo de la pgina Fondo de color Color del texto Color de hipervnculos

HTML

HTML-Caracteres especiales

HTML-Caracteres especiales
Comentario

HTML

HTML
Ejemplo de prrafo

HTML

HTML-Tipos de texto

HTML-Tipos de texto

HTML-Uso de FONT
Permite especicar atributos sobre el texto

HTML-Uso de FONT

Jueves 24/ene/08

Realizar la siguiente prctica(act. 1)

Realizar una pagina que indique cuales son las diferentes

formas para estructurar una URL. Incluir toda la informacin tcnica que sea relevante para su buen uso.

Cul es la arquitectura de la WWW Qu es una cookie y cul es su aplicacin Cul es el objetivo de la W3C Cul es el estndar de HTML Menciona algunos servicios de la Web

Lneas Horizontales
<hr>
Define el espesor de la lnea. Por defecto es 2 {horizontal}

<hr SIZE="nmero"></hr>
Ejemplo: <hr width="300" size=6" color="red"></hr> <hr></hr> <hr width="300" size=3" color="red"></hr>

Listas

Podemos

representar elementos en forma de lista dentro de nuestros documentos. Estas listas podrn incluir cualquiera de los elementos HTML y podemos denir listas anidadas. HTML permite crear tres tipos distintos de listas:

Listas no numeradas Listas numeradas Lista de deniciones

Listas no numeradas

Lista no numeradas <ul> (ul: unordered list) Con este tipo de listas podemos especicar sin un orden
en especico, precedidos de una marca o vieta.

Para denir la lista utilizaremos la etiqueta <ul> ...</ul>, y

para determinar cada uno de los elementos que la componen usaremos la etiqueta <li>...</li>. El formato es el siguiente:

Estructura de la lista no numerada

Texto

Con

el atributo type vamos a especificar el tipo de marca o vieta que anteceder a cada uno de los elementos de la lista. Estas marcas podrn ser: un disco (disk), un crculo (circle) o un cuadrado (square). La etiqueta <LH> nos va a servir para especificar un posible ttulo de la lista, siendo esta opcional

Ejemplo
Ejemplo Texto Texto

salida

Listas Anidadas

Ejemplo

Realiza el siguiente ejercicio(act. 2)

Lunes 28/ene/08

Indica el cdigo de HTML

Listas numeradas

Listas numeras <ol> {ol: ordered list} Con este tipo de listas podemos especicar una serie de
elementos numerados segn el lugar que ocupan en la lista.

Para denir la lista utilizaremos la etiqueta <ol> ...</ol>, y

para determinar cada uno de los elementos que la componen usaremos la etiqueta <li>...</li>. El formato es el siguiente:

Estructura de la lista numerada

Con el atributo start

vamos a especicar el nmero por el que va empezar la lista. Si no indicamos este argumento la lista empezara a numerarse a partir del 1. Con el atributo type vamos a especicar el tipo de lista numerada. Sus posibles valores se muestran en la siguiente tabla:

Valores que toma el type

Listas numeradas
Ejemplo

Salida

Listas numeradas-type

ejemplo

salida

Listas numeradas-type

ejemplo

salida

Realiza el siguiente ejercicio(act 3)

Martes 29/ene/08

Indica el cdigo de HTML

Lista de Deniciones

Listas de deniciones <dl> {dl: denition list} Estas listas nos van a servir para especicar una serie de
terminos y sus deniciones correspondientes

Para denir la lista utilizaremos la etiqueta <dl> ...</dl>,

para especicar los trminos usaremos la etiqueta <dt> y para especicar la denicin correspondiente a cada termino usaremos la etiqueta <dd>...</dd>. El formato es el siguiente:

Estructura de la lista de deniciones

Lista de deniciones

Ejemplo

Salida

Realizar la siguiente prctica (act.3)

Martes 29/ene/08

Realizar la prctica
utilizando listas

Agregar una vieta que

lleve de nombre Navegadores dentro de Navegadores indicas las Plataformas que hay, y agregas 5 navegadores para cada plataforma fecha, debern estar en contacto.

Texto Texto Texto

Agregar tu nombre y

Tablas
Una tabla permite estructurar contenidos La etiqueta que nos permite incluir tablas es
<table>...</table>

border especica el ancho del borde de las celdas cellpadding indica el margen del contenido de una celda hacia
los bordes

cellspacing indica la separacion entre los bordes de las celdas width y height indican ancho y alto y se indican en pixeles o
porcentaje

bgcolor indica el color del fondo de la tabla

Combinacin de tablas

Tablas

Estructura general:

Estructura de etiquetas:

Tablas (cont)

Tablas (cont 2)

Para denir cada la debe usarse la etiqueta <tr>...</tr>

{tr: table rows} la

align indica la alineacion del contenido de las celdas en la valign indica la alineacion del contenido de las celdas en la
la de manera vrtical

bgcolor indica el color del fondo de las celdas de la la

Tablas (cont 3)

Para crear celdas de tipo cabecera usamos la etiqueta

<th>...</th>, {th:table header} td>, {td: table data}

Para crear celdas de contenido usamos la etiqueta <td>...</ align indica la alineacion del contenido de las celdas. Note que
puede ser justicado completo

valign indica la alineacion del contenido de las celdas en la la bgcolor indica el color del fondo de las celdas de la la

Tablas (cont 4)

width indica el ancho de la celda, puede ser en pixeles o

en porcentaje con respecto a la tabla de una la

rowspan podemos indicar que una celda abarque mas colspan podemos indicar que una celda abarque mas de
una columna

Tablas (cont 5)

Tablas (cont 6)

Tablas (cont 7)

<caption></caption> Asocia un titular a la tabla.

Realiza el siguiente ejercicio(act 4)

Indica el cdigo HTML

Ligas

Son enlaces de hipertexto que nos permiten acceder de

manera directa a otros documentos independientes HTML

Enlaces a otras pginas <a href=...> </a> Ejemplo <a href=pagina_ant.html>Pagina siguiente... </a> href representa la URL del recurso que se pretende
acceder

Ligas (cont)

El contenido Web situado entre <a...> y </a> es el

elemento sensible del hipervinculo. imagen

Puede ser texto, como en el ejemplo anterior o una Es posible indicar ligas dentro de la misma pagina usando
lo que se conoce como anclas

<a href=principal.html><img src=empresa.jpg></a> Para esto debemos marcar diferentes zonas como
sensibles dentro del documento

<a name=nombredeseccion>Texto seccion</a>

Ligas (cont 1)

Especicando anclas Para ir a una seccion usando una liga <a href=#nombredeseccion>Ir a seccion X</a>
Ligas referenciando anclas <a href=#....></a>

Anclas <a name ...></a>

Ligas (cont 2)

Prctica sobre ligas

Escriba una pagina HTML que incluya 3 ligas diferentes. El

nombre debe ser pracligas.html

Las primeras dos ligas seran a dos archivos HTML de los

trabajados anteriormente. Al nal de los dos archivos se debe incluir una liga para regresar a la pagina principal que ocupe alrededor de tres paginas.

Agregue componentes a la pagina principal de manera La tercera liga debe direccionarnos al nal del
documento.

Agregue un ancla en la parte nal de la pagina principal

Imgenes

La inclusion de imagenes mejora la presentacion de

contenidos Web

Los formatos que soportan todos los navegadores Web gif jpg Si deseamos insertar otro formato es necesario que el
navegador lo soporte a traves de un PlugIn

GIF se usa para indicar vinculos, gracas o botones JPG se recomienda para la insercion de imagenes grandes
como fotograas

Imagenes (cont)
src (source/fuente) dene el origen de la imagen alt (alternate) dene una cadena de texto que se mostrara si la
imagen no puede ser mostrada

align indica donde se ubica la imagen con respecto al texto

circundante: top-arriba, middle-enmedio, botton-abajo, left-izq, rightder

border indica el grosor del borde height indica la altura de la imagen, width indica el ancho de la
imagen, se puede indicar en pixeles o porcentaje

hspace margen horizontal, vspace margen vertical

Practica sobre imagenes

Escriba una pagina HTML que ejemplique el uso de

todos los posibles valores para las propiedades de una etiqueta <img>. Este archivo debe llamarse usoimagenes.html la pagina del ejercicio sobre ligas o hipervinculos

Incluya un vinculo usando una imagen para referenciar a

Div

Nos permiten establecer bloques independientes de informacin Cada bloque ocupa por defecto una lnea visual Este comportamiento puede modificarse usando estilos (style) Estilos sobre DIVs

float: posiciona al elemento a un lado de la pantalla

Valores: right, left, none Los bloques se van poniendo a la derecha o a la izquierda de la pantalla

Bajo el bloque anterior del lado especificado si no caben Junto a el en el lado especificado si caben

width: especifica la anchura del elemento

Puede ser una medida porcentual (diseo liquido), segn la fuente (diseo elstico), o en pixeles (diseo esttico)

Frames

Permiten dividir una pgina en regiones independientes Cada regin esta asociada a un archivo HTML
independientes

Una pgina usando FRAMES se estructura diferente a una

HTML normal FRAMES

Existe la pgina principal que contiene la distribucin de En caso de que el navegador no soporte FRAMES existe
la posibilidad de incluir cdigo que no los incluya

Cada FRAME esta asociado con un HTML

Atributos de Frame
Atributos

src: URL del archivo que se mostrara en el FRAME name: nombre del frame. En hipervinculos debe especicarse en que frame se mostrara el archivo HTML referenciado marginwidth: margenes izquierdo y derecho en pixeles marginheight: margenes inferior y superior en pixeles scrolling, yes: con scrolling, no: sin, auto: cuando sea necesario noresize, indica que el frame no se puede redimensionar frameborder, 0: sin borde, 1: con borde

Estructura de una pgina con FRAMES

HTML con FRAMES Etiquetas HTML, HEAD, TITLE FRAMESET, para especicar la estructura de FRAMES NOFRAMES, seccin en caso de que no se soporten
FRAMES

Estructura de FRAMESET

Existen dos tipos bsicos de FRAMESET Basado en columnas Basado en las Ambos pueden ser denidos usando dimensiones exactas
o usando porcentajes

Se pueden combinar anidando FRAMESETs

FRAMESET en las

<FRAMESET rows=40%,60%> .... </FRAMESET> Es quivalente a rows=40%,* <FRAMESET rows=40%,60%> .... </FRAMESET>

<FRAME src=la1.html name=primparte> <FRAME src=la2.html name=segparte>

</FRAMESET>

la1.html la2.html

FRAMESET en columnas

<FRAMESET cols=40%,60%> .... </FRAMESET> Es quivalente a cols=40%,* <FRAMESET cols=40%,60%> .... </FRAMESET>

<FRAME src=l1.html name=primparte> <FRAME src=l2.html name=segparte>

</FRAMESET>

la1.html

la2.html

FRAMESET combinados

<FRAMESET cols=40%,60%>

<FRAMESET rows=50%,*> ... </FRAMESET>

</FRAMESET> Es quivalente a cols=40%,* <FRAMESET cols=40%,60%> .... </FRAMESET>

la1.html col2.html la2.html

<FRAMESET rows=50%,*> ... </FRAMESET>

<FRAME src=la1.html name=primparte> <FRAME src=la2.html name=segparte>

</FRAMESET> <FRAME src=col2.html name=segparte>

</FRAMESET>

Ejemplo
<html> <frameset cols = "25%, 25%,*"> <frame src ="venus.html" name= izq" /> <frame src ="sun.html" name= central" /> <frame src ="mercur.html" name= der" /> </frameset> </html>

Habr tres columnas Las primeras dos ocupando un espacio del 25% cada una La tercera ocupando un 50% Los nombres son izq, central y der. Estos nombres permitirn redireccionar el contenido de vnculos hacia alguno de estos FRAMES

Direccionando vnculos a un FRAME

Para hacer esto, usamos el atributo TARGET de la etiqueta <a ..>
</a> y le asignamos el nombre del FRAME donde queremos que se muestre el archivo HTML referenciado por el vinculo

<a href=nuevala.html target=central>Datos</a>

Ejercicio

Construya una estructura de FRAMES como la que se especica a continuacion 30% cabecera 15%
menu contenido

75%

pie

10%

Edite un archivo HTML para cada FRAME El archivo HTML del frame menu debe incluir por lo menos 5 ligas, cada liga sera desplegada en el FRAME contenido usando el atributo TARGET de la liga Los frames no deben tener borde y el scroll debe estar en automatico

Formularios

Cuando construimos portales Web, en ocasiones

requerimos de medios para realizar encuestas u obtener datos de los usuarios de nuestro sitio. El mecanismo por medio del cual un usuario puede enviar datos a un servidor Web es el formulario XHTML que permite la captura de datos por parte del usuario y el envo a un servidor para su procesamiento
<FORM action=URL del servicio que procesa los datos del formulario method=get/post> ... Controles dentro del formulario </FORM>

Un formulario es una estructura (TAG) de HTML o Formato general

Formularios
Ejemplos del campo action de un formulario http://www.empresa.com/procesa.jsp http://www.portalweb.com/registra.php Adicionalmente, puede usarse un formulario para enviar los
datos va correo electrnico

Campo method del formulario Puede tener alguno de los siguientes valores get: el envo de datos se hace a travs de la URL post: el envo de datos se hace empaquetndolos en la
peticin

mailto:solicitudes@empresa.com

Elementos bsicos de captura de datos dentro de un formulario

Se usa el TAG <INPUT> Formato general

<INPUT type=text|password|checkbox|radio|hidden|submit|image|reset name=nombrecontrol value=valinicial>

Campos del TAG FORM type: determina el tipo control que ser insertado en el
formulario

name: identica al control y es usado por el servicio value: especica el valor por defecto del campo

asociado al action del formulario para recuperar cada uno de los valores introducidos por el usuario

Control de tipo text

Se usa para textos cortos Tiene los siguientes atributos size: tamao en caracteres del control maxlength: nmero mximo de caracteres que
pueden ser capturados

Ejemplo
<input type=text name=vnombre size=40 maxlength=50>

Control de tipo text

Control de tipo password

Se usa para textos con proteccin de visualizacin. Los

caracteres tecleados por el usuario son cambiados por un smbolo *

Tiene los siguientes atributos size: tamao en caracteres del control maxlength: nmero mximo de caracteres que
pueden ser capturados

Ejemplo
<input type=password name=vpsw size=11 maxlength=10>

Control de tipo password

Control de tipo checkbox

Es un botn que presenta dos estados

Marcado: 1 Desmarcado: 0

Formato
<input type=checkbox name=v1 value=1 checked>

Tiene los siguientes atributos

name: nombre del control value: Si el botn esta marcado, su variable asociada adquirir el valor dado por el campo value checked: Si se incluye, el checkbox aparecer marcado

Ejemplo
<input type=checkbox name=vch value=1 checked>Fuma

Control de tipo checkbox

Control de tipo radio

Se usa cuando se debe elegir una opcin entre varias. Las

opciones son excluyentes. Slo se puede seleccionar una de ellas. Se debe incluir una etiqueta radio por cada alternativa
<input type=radio name=vr1 value=1 checked>

Formato Caractersticas Todos las opciones tienen el mismo valor para name Si una opcin esta seleccionada la variable adquiere el
valor de ese control

Control de tipo radio

Control de tipo hidden

Este tipo de campos no son visibles para el usuario Su uso principal es el envio de informacin escondida AL
usuario, o que no deba ser modicada por el

Formato <input type=hidden name=oculta value=13> En este caso se asigna a la variable oculta el valor 13. Esta
variable sera enviada en el formulario y el usuario no puede verla ni modicarla

Control de tipo hidden

Control de tipo submit

Este control insertar un botn en el formulario. Cuando

este botn sea presionado, el formulario ser enviado al servicio o programa especicado en el campo action de la etiqueta FORM

Formato <input type=submit value=Enviar> El campo value determina la etiqueta que ser mostrada
en el botn

Control de tipo submit

Control de tipo image

Este control nos permite insertar un botn de tipo

imagen

Al igual que el submit, cuando se presiona sobre la

imagen, el formulario es enviado al servicio o programa denido en el campo action de la etiqueta FORM

Formato <input type=image src=URL de imagen name=var> Cuando se da un click sobre el botn tipo imagen, la
variable var almacena las coordenadas donde ocurri el evento

Control de tipo image

Control de tipo reset

Este control inserta un botn en el formulario. Al Formato

<input type=reset value=Texto del boton>

presionarlo, los contenidos de los controles del formulario se igualan al valor por defecto o en vacio si no fue especicado un valor por defecto

El contenido del campo value se mostrar en el botn Ejemplo

<input type=reset value=Inicializar campos>

Control de tipo reset

Control para captura de datos en modo multilnea

Este control permite capturar texto usando ms de una

lnea

Formato
<textarea name=variable rows=las cols=columnas> contenido por defecto </textarea>

Los argumentos rows y cols permiten especicar las

dimensiones del area de edicin

Control para captura de datos en modo multilnea

Anexo

Anexo(1)

Anexo(2)

Anexo(3)