Programacin Web

Programacin Web,
Cliente/Servidor, Servidor Web,
HTTP, HTML, Etiquetas, CSS,
Java Script, HTML5.
Ing. Ramn Aray L.

Contenido:
I.- Programacin Cliente/Servidor.
II.- HTTP.
III.- Lenguaje de Marcado / HTML.
IV.- Etiquetas HTML.
V.- Javascript / CSS (Cascading Style
Sheet).

I.- Programacin
Cliente/Servidor.

La Evolucin de la Programacin
Web
Para transmitir informacin se requiere un medio de
transmisin.
Uno de los modos de comunicacin que utilizan las
computadoras es conectarse a Internet (WWW).
La convencin estndar para esta comunicacin es el
HTTP (Hyper Text Transfer Protocol).
La informacin en Internet o WWW est guardada en
forma de documentos generalmente como pginas web.
Estn almacenadas en una ubicacin central
denominada el servidor, para que mltiples usuarios
(clientes web) accesen y compartan la informacin.
Las ventanas de acceso a las pginas web se denomina
navegador web o (web browser).

La Evolucin de la Programacin
Web
Hasta la dcada del 60, no era posible compartir
informacin remota a travs de computadoras.
El concepto de internet surge en los EE.UU. En
1962 para propsitos de defensa.
Tim Berners Lee desarroll un programa a inicios
de los 90, que tenia la capacidad de acceder a
informacin remota, pero solo archivos de texto.
A finales de 1992, se desarroll un navegador que
proporcionaba acceso a texto, grficos y animaciones a
travs de las computadoras.
Se desarroll un lenguaje de programacin para
manejar la informacin grfica y texto conocido como
HTML (Hyper Text Markup Language).

Programacin Web
Cliente/Servidor

Datos
IU

RED
Cliente
Servidor

Interfaz de
Protocolo

Interfaz de
Protocolo

Programacin Web
Cliente/Servidor
Cliente: Acta como un representante del usuario enviando la
peticin al servidor. Tambin acta como un agente receptor
recibiendo la respuesta del servidor. El cliente proporciona una
interfaz para que los usuarios ingresen los valores solicitados,
establece el enlace de comunicacin con el servidor, recibe la
respuesta del servidor sobre la consulta solicitada y la presenta de
regreso a los usuarios.
Servidor: Es un programa que responde la consulta del cliente.
Toma los detalles solicitados por el usuario en la base de datos.
Datos: La transferencia de datos del servidor al cliente se
denomina respuesta. La respuesta del servidor generalmente est
en forma de texto que representa algn lenguaje de marcado
(Markup Language).
Protocolo: Un conjunto de convenciones seguidas para una
efectiva comunicacin peer-to-peer entre el cliente y el servidor, y
se logra a travs de HTTP.

Programacin Web
Cliente/Servidor
Algunas de las funcionalidades de un servidor se muestran
a continuacin:
Datos Seguros

Proteccin

Autenticacin

Servidor
Concurrencia

Autorizacin

Privacidad

II.- HTTP.

HTTP
La primera versin de HTTP la 0.9, fue desarrollada
en 1996.
Tena la capacidad de transmitir datos slo en forma
de texto.
Ms tarde, una versin mejorada la 1.0, poda
transmitir informacin de texto y grficos en el formato
MIME (Multipurpose Internet Mail Extension) Extensin
de Correo Internet Multipropsito.
En HTTP, la informacin es enviada y recibida en
forma de solicitud/respuesta.
El mtodo de solicitud generalmente contiene el
URL (Uniform Resource Locator) Localizador Uniforme
de Recursos, que proporciona la direccin destino.

HTTP
Tambin incluye mensajes como MIME, que incluye
modificadores de solicitud, texto del cliente y el
contenido necesario para conectarse a un servidor.
La comunicacin HTTP empieza pasando la
solicitud por medio de un agente usuario (User Agent
UA) o navegador, al servidor origen destino (Origin
Server O)
La comunicacin entre un agente usuario y el
servidor origen se da a travs de la cadena de solicitud y
la cadena de respuesta.
La solicitud se origina del agente usuario (UA) y la
respuesta del servidor origen (O).

HTTP
Cadena de comunicacin HTTP:

Cadena de Solicitud
V
Agente
Usuario

Cadena de Respuesta

Servidor
Origen

HTTP
Sin embargo, en una situacin prctica, puede existir
ms de un intermediario, tales como A, B, C en una
cadena de Solictud/Respuesta.
Los principales componentes de estas cadenas incluyen:
Un agente Proxy: Acta como un agente autorizado
para recibir el URL en la forma normal, modificando una
porcin del mensaje y redireccionando el mensaje
modificado al servidor solicitado por el usuario.
Un Gateway: Recibe la informacin solicitada por el
usuario y la convierte en un determinado protocolo
relacionado al servidor.
Un Tunnel: Acta como una conexin al pasar la
informacin solicitada por el usuario de un enlace
intermediario a otro.

HTTP
Elementos intermedios en la comunicacin HTTP:

Cadena de Solicitud
V

A
Agente
Usuario

Cadena de Respuesta

C
Servidor
Origen

III.- Lenguaje de Marcado /

HTML.

Lenguaje de Marcado
A finales del 60, Charles Goldfarb desarroll un
concepto de lenguaje de marcado generalizado que
permita etiquetas, proporcionando as un mtodo para
representar los contenidos de texto.
En la dcada de los 80, se desarrollaron las
primeras aplicaciones del lenguaje de marcado
generalizado.
Se usaban para intercambiar documentos entre
autores y editores.
Uno de los usos ms importantes fue la
documentacin de proyectos para propsitos de
defensa.

Lenguaje de Marcado
Entretanto, el lenguaje de marcado generalizado era
aceptado como una especificacin estndar denominada
SGML (Standard Generalized Markup Language).
El auge surge cuando Tim Berners Lee aplic SGML a la
WWW para publicar contenido.
El marcado se refiere a las etiquetas (Tags) especiales
que se incluyen en el texto solicitado por el usuario, para
realizar operaciones especiales.
Un cdigo de marcado es identificado nicamente en un
pasaje de texto por sus especificaciones y restricciones.
SGML es un meta lenguaje que puede usarse para
definir lenguajes de marcado estructurales.

HTML
El HTML fu desarrollado para permitir que los
documentos WWW incluyan texto, imgenes, tablas,
hiperenlaces y archivos animados.
Los documentos web estn presentes en el servidor
como archivos HTML.
El HTML es una extensin del SGML, se puede usar
para proporcionar el esquema para ordenar el contenido
web y mostrar caractersticas animadas.
Un archivo HTML tendr extensin .htm o .html.
Dado que el navegador web lee el archivo HTML por
medio de etiquetas HTML especficas, la pgina web
mostrada como salida puede variar de un navegador a
otro navegador.

HTML
Beneficios del HTML:
Se pueden compartir grandes cantidades de datos a
travs del mundo.
El HTML es bsicamente formato ASCII, por lo que
la posibilidad de corrupcin de los datos por la red es
mucho menor.
Dado que es un lenguaje de marcado, es fcil para
desarrollar y simple de comprender.
El HTML es fcil de aprender ya que tiene un
conjunto de etiquetas.

Conceptos sobre HTML

Todos los archivos HTML aparecen en forma de simples
archivos de texto con imgenes, sonidos o videos.
El conjunto de pginas HTML relacionadas se pueden
enlazar unas con otras usando hiperenlaces.
Los hiperenlaces pueden ser texto o imagen.
El usuario puede hacer clic en los hiperenlaces para
cargar una nueva pgina en el navegador.
Cualquier cdigo HTML comprende dos componentes:
etiquetas y atributos.
Mientras que las etiquetas permiten que el texto HTML
lleve a cabo un determinado proceso como formatear o
enlaces, los atributos controlan la presentacin y aspecto
(look and feel) de los textos.

Crear Pginas HTML

Los dos componentes principales que ayudan al
desarrollo de pginas HTML, son:
Editores de HTML
Navegadores Web
Los editores de HTML son programas que ayudan a
los usuarios a construir pginas HTML a travs de
cdigo de marcado.
Los navegadores web son programas que ayudan a
los usuarios a visualizar y validar las pginas HTML.

Editores HTML y Navegadores

Web
Documento HTML

Editores HTML

Base
Texto o Color

WYSIWYG
(What You See
Is What You Get)

Navegadores WEB

Navegadores de
Texto

Navegadores
Grficos

IV.- Etiquetas HTML.

Elementos HTML
Etiquetas.
Las etiquetas HTML deciden la naturaleza del
formato que se va a aplicar a los documentos HTML.
Las etiquetas tienen un conjunto de atributos
posibles que deciden la extensin y el estilo del
formato que se va a aplicar.
Las etiquetas HTML son simples y fciles de usar.
Aparecen entre corchetes angulares (<>).
Cada etiqueta abierta <ALGO>, generalmente es
cerrada por su contraparte de cierre </ALGO>.
Tambin podemos tener etiquetas anidadas,
<AGUA><ROCA> Informacin </ROCA></AGUA>

Elementos HTML
Atributos.
Cada etiqueta tiene un conjunto de atributos
posibles asociados a sta.
Los
atributos
se
utilizan
para
manejar
requerimientos de formatos.
El formato de texto puede incluir elementos como
alineacin, ancho, tamao, etc.
Los atributos se agregan colocando nombredeatributo =
value, dentro de las etiquetas HTML. Ejemplo:
<H1 ALIGN=CENTER>Encabezado centrado</H1>
Etiqueta Atributo

Valor

Texto Afectado

Programar las Etiquetas

<!DOCTYPE>
La etiqueta <!DOCTYPE> proporciona a los navegadores (y
servicios de validacin) la versin del HTML con la que coincide el
documento.
Las especificaciones del HTML 4.0 y 5.0 sugieren el uso de esta
etiqueta no emparejada, y por lo tanto, debemos usarla en todos
nuestros documentos.
Ejemplo de uso:
<!DOCTYPE HTML PUBLIC -W3C//DTD HTML 3.2 Final// EN>
Nota: Las etiquetas emparejadas encierran algn texto entre ellos, las
etiquetas no emparejadas, no requieren una etiqueta de cierre.

<HTML>
La etiqueta HTML especifica que el documento es un documento
HTML.
Tcnicamente, esta etiqueta es una redefinicin cuando la
etiqueta <!DOCTYPE> est presente.

Programar las Etiquetas

<HEAD>
La informacin acerca del documento se especifica
en la etiqueta <HEAD>.
La informacin puede referirse al ttulo del
documento, scripts utilizados, definiciones de estilos y
otras descripciones del documento.
No todos los navegadores requieren esta etiqueta,
pero la mayora de los navegadores esperan
encontrar alguna informacin disponible acerca del
documento en la etiqueta <HEAD>.
La etiqueta <HEAD> tambin puede contener otras
etiquetas que tienen informacin para los motores de
bsqueda y programas de indexado.

Programar las Etiquetas

<TITLE>
Esta etiqueta contiene el ttulo del documento que es
requerido por las especificaciones 4.0 y 5.0 de HTML.
El ttulo no es visible en la ventana del navegador,
aunque puede encontrarse en la barra de ttulo del
navegador.
En esta etiqueta, se incluye una breve descripcin del
contenido del documento.
<BODY>
La etiqueta <BODY> cubre todas las etiquetas,
atributos e informacin que van a aparecer en el
navegador del visitante.

Ejemplo del uso de las Etiquetas

Estructura de un Documento HTML (Pgina Web)
<!DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.0 Final//EN>
<HTML>
<HEAD>
<TITLE>
El Ttulo de la Pgina va aqu.
</TITLE>
</HEAD>
<BODY>
Todas las etiquetas, atributos e informacin en el cuerpo del
documento van aqu.
</BODY>
</HTML>

Otras Etiquetas (Nivel Carcter)

Etiquetas de Encabezado.
<H1> es el ms grande de los encabezados, y <H6> el ms pequeo.

<H1>Encabezado 1</H1>
<H2>Encabezado 2</H2>
<H3>Encabezado 3</H3>
<H4>Encabezado 4</H4>
<H5>Encabezado 5</H5>
<H6>Encabezado 6</H6>

Etiquetas de Prrafos.
<P>
Un prrafo completo va justo aqu
</P>
<P ALIGN=CENTER>
El prrafo de la informacin centrado aqu
</P>

Otras Etiquetas
Formato de Prrafo

Efecto

<ADDRESS>

Utilizado para informacin de direccin y contacto.

Aparece en cursiva.

<BLOCKQUOTE>

Utilizado para formatear entre una comilla.

Generalmente aparece indentado en ambos lados y
tiene menos espacio entre lneas que un prrafo
regular. Aplica Sangra.

<PRE>

Efectivo para formatear el texto o informacin similar.

Generalmente en un tipo de letra fijo, con amplio
espacio entre palabras y lneas.

Otras Etiquetas
Etiquetas de Salto de Lnea
<P>
Hola Hola Hola <BR>
Hola Hola Hola Hola<BR>
Hola Hola Hola Hola Hola<BR>
Hola Hola Hola Hola Hola Hola Hola </P>

Etiqueta de Formato a Nivel Carcter

<P>Este es el comienzo del siguiente prrafo</P>
<P><B> Este es el final del prrafo, se utiliza el atributo
negrita de la fuente</B></P>

Otras Etiquetas
Etiqueta de Carcter

Efecto

<B>

Aplica Negrita.

<BLINK>

Realiza parpadeo de texto, considerado muy antiprofesional.

No funciona en Internet Explorer pero en Netscape s.

<CITE>

Indica citas o referencias.

<CODE>

Muestra cdigo de programa, similar a la etiqueta <PRE>.

<EM>

Aplica nfasis, generalmente mostrado como cursiva.

<I>

Aplica Cursiva.

<S>, <STRIKE>

Aplica apariencia de tachado al texto.

<STRONG>

Aplica nfasis ms fuerte, generalmente mostrado como

negrita.

<SUB>

Presenta el texto como subndice.

<SUP>

Presenta el texto como superndice.

<TT>

Aplica un tipo de letra de ancho fijo. (Mquina de Escribir)

<U>

Aplica subrayado.

Otras Etiquetas
Etiquetas de Listas. LI (List Item)
Lista No Ordenada (Unordered List):
<UL>
<LI> Productos Chupa Melo C.A. </LI>
<LI> Servicios Marca Gada S.A. </LI>
</UL>
Lista Ordenada (Ordered List):
<OL>
<LI> Caramelitos Chupa Melo </LI>
<LI> Laca Gada 450ml. </LI>
</OL>

Otras Etiquetas (Listas)

Atributo

Descripcin

Start

Este atributo permite iniciar la lista ordenada segn convenga al

diseador de la pgina web. Ejemplo: <OL Start=4>

Type
(OL)

Por defecto las listas ordenadas se ordenan con la numeracin

comn y se inicializan en 1. Con este atributo puedes cambiar la
manera de ordenar la lista. Type puede tomar los siguientes
valores en este tipo de listas: (1) numeracin por defecto, (I)
Numeracin romana Mayscula, (i) Numeracin romana
minscula, (A) Letras maysculas. Ejemplo: <OL Type=I>

Type
(UL)

Con este atributo podremos cambiar el smbolo que precede a

este tipo de listas. Type puede tomar los siguientes valores en
este tipo de listas: (Bullet) Por Defecto
, (Circle)
, (Square)

Otras Etiquetas (Listas)

Listas de Definicin:
Este tipo de listas se designan con la etiqueta <DL> (Definition List).
Cada item de la lista ira precedido de la etiqueta <DT> (Definition
Term) y su correspondiente definicin ira precedida por la etiqueta
<DD> (Definition Definition).

Ejemplo:
<DL>
<DT>Introduccin Resultado:
<DD>Breve introduccin al lenguaje
<DT>La Primera Pgina
<DD>Como hacer la primera pgina
<DT>Escribir texto
<DD>Empieza a dar formato al texto
</DL>

Otras Etiquetas
Smbolos Especiales
Carcter

Referencia de Entidad

Carcter

Referencia de Entidad

&quot;

&kappa;

&

&amp;

&lambda;

<

&lt;

&mu;

>

&gt;

&un;

&times;

&xi;

&divide;

&omicron;

&alpha;

&pi;

&beta;

&rho;

&gamma;

&sigma;

&delta;

&tau;

&epsilon;

&phi;

&zeta;

&chi;

&eta;

&psi;

&theta;

&omega;

&iota;

&copy;

Etiquetas y Atributos de las

Fuentes de Caracteres
Etiqueta/Atributo
<FONT>
SIZE=

Descripcin
Coloca las caractersticas de la letra para el texto.
Especifica el tamao relativo en una escala de 1 a 7. Tres(3) es un
tamao normal por defecto. Tambin podemos especificar el tamao
relativo usando + o -, o por ejemplo +2.

COLOR=

Especifica el color de letra en #RRGGBB o nombres de color. Este

color se aplica solo al texto encerrado entre las etiquetas <FONT>.

FACE=

Especifica las presentaciones del tipo como una lista de posibles

presentaciones, en el orden de la preferencia, separado por comas.

<BASEFONT>

Ajusta el tamao predeterminado del texto. (El tamao por defecto

es 3.)

<FONT FACE=Technical, Courier New, Times New Roman SIZE=+4> Mira

esto chico!</FONT>

Otras Etiquetas
Etiqueta de Regla Horizontal
<HR>
Atributo de la Regla

Efecto

SIZE=n

Especifica el tamao de la regla

WIDTH=n

Especifica el ancho de la regla

WIDTH=n%

Especifica el ancho de la regla (longitud),

medido como un porcentaje de ancho del
documento

ALIGN=LEFT

Especifica alineacin a la izquierda

ALIGN=RIGHT

Especifica alineacin a la derecha

ALIGN=CENTER

Especifica alineacin al centro

NOSHADE

Especifica que la regla no tiene sombra

Elementos Grficos
Colores de Fondo
<HTML>
<BODY BGCOLOR=#000000 TEXT=#FFFFFF>
Bienvenidos a Web Programming!!!
</BODY>
</HTML>
R(Rojo)

G(Verde)

B(Azul)

00

00

00

33

33

33

66

66

66

99

99

99

CC

CC

CC

FF

FF

FF

Elementos Grficos
Establecer Colores de Texto
<HTML>
<BODY TEXT=#000000>
Web Programming!
</BODY>
</HTML>
Atributo

Descripcin

TEXT=

Establece el color para todo el texto del documento con un nombre de

color o un valor #RRGGBB.

ALINK=

Establece el color para enlaces activos, con un nombre de color o un

valor #RRGGBB.

VLINK=

Establece un color para enlaces que el visitante ha seguido recin, con

un nombre de color o un valor #RRGGBB (cun recientes, depende de
las configuraciones del navegador).

LINK=

Establece el color para los enlaces no visitados con un nombre de color

o un valor #RRGGBB.

Ejemplos
<HTML>
<BODY TEXT=#FF0000 LINK=#993366
VLINK=#0033FF ALINK=#000000>
Este es un simple texto que no contiene enlace.<BR><BR>
<a href=http://www.mocosoft.com> Este es un enlace no
visitado</a><BR><BR>
<a href=http://www.youtube.com> Este es un enlace
visitado</a><BR>
</BODY>
</HTML>

Hiperenlaces
Los hiperenlaces (tambin llamados anchors anclas) son
texto o imgenes que actan como ruta a otros documentos
HTML, imgenes, applets, efectos multimedia, o lugares
especficos dentro del documento HTML. Se componen de las
siguientes tres (3) partes:
1. Una etiqueta ancla <A> que marca el texto o imagen como
enlace.
2. Un atributo HREF=, que se coloca dentro de la etiqueta
ancla de apertura.
3. Una direccin (el URL) que indica a los navegadores a donde
enlazar
Si el URL del atributo HREF de la etiqueta <A> no empieza
con un protocolo, el navegador asume que el enlace es a un
documento en el mismo host. Estos tipos de URLs se denominan
URLs relativos.

Hiperenlaces
Por
ejemplo,
considere
una
pgina
http://www.cisco.com/certify/test.html cargada del sitio
web de CISCO.
La pgina tendr un hiperenlace como
<A HREF=./page2.html>
Esto se traduce como
http://www.cisco.com/certify/page2.html
NOTA: ./ se traduce como el directorio actual.

Enlazar a documentos en la misma carpeta.

<A HREF=Curso2.html> El texto del enlace va
aqu</A>

Hiperenlaces
Enlazar a un documento en una carpeta diferente.
Para crear un enlace de Mainframe.html, ubicados
en diferentes carpetas, se debe incluir un URL que
contiene dos piezas de informacin.
Un nombre de carpeta, que especifica la carpeta en el servidor.
Un nombre y extensin de archivo, que especifica el archivo
exacto para mostrar el enlace.

Puede verse como:

<A HREF=./Products/Mainframe.html>Mainframe
servers</A>

Hiperenlaces
Enlazar a documentos de la Web.
<A
HREF=http://www.youtube.com/hrcf.html>Prueba
enlaces</A>

Enlazar a una ubicacin especfica de un documento.

Formar ancla de nombre:
<A NAME=Hardware Requirements>Aqu va algo</A>
Enlazar a anclas de Nombre.
<A HREF=#Hardware Requirements> Aqu va algo</A>

de

Hiperenlaces (Etiquetas Ancla de

Nombre)
Desde dentro

El enlace se ve como

El mismo documento

<A HREF=#ejemplo>hola</A>

La misma carpeta,
diferente documento

<A HREF=services.html#preview>hola</A>

El mismo servidor
(diferente carpeta y
documento, URL relativo al
servidor)

<A HREF=information/services.html#preview>hola</A>

Un servidor diferente

<A HREF=
http://www.hp.com/information/services.html#preview>
Link</A>

Hiperenlaces
Insertar Enlaces de Correo Electrnico.
<A HREF=mailto:chupito@tumamasita.com>
Feedback</A>

Send

Atributo clave.

Agregar comentarios en un documento HTML,

se utilizan las etiquetas:
<!-- comentario -->

Hiperenlaces (Ejemplo)
<!DOCTYPE HTML PUBLIC -//W3C//DTD
HTML 4.0 Final//EN>
<HTML>
<HEAD>
<TITLE> Catalogo deProductos</TITLE>
<HEAD>
<BODY>
<H3 ALIGN=CENTER> Productos
Cisco</H3>
<HR>
<P ALIGN=LEFT><B>Servidores</B>
<UL>
<LI> Servidores Mainframe</LI>
<LI>UNIX</LI>
</UL>
</P>
<B>Programas</B>
<OL>
<LI>Aplicaciones de Desarrollo</LI>
<LI>Grficas &nbsp;&nbsp;&nbsp;&nbsp;

Cont
<FONT COLOR=#0000FF>
<B>
Multimedia
</B>
</FONT>
</LI>
<LI>Groupware
<FONT COLOR=#0000FF>
<B>&nbsp;&nbsp;Productivity</B>
</FONT>
</LI>
</OL>
<LI><A HREF=http://www.cisco.com>
www.cisco.com>hola </A></LI>
</BODY>
</HTML>

Tablas HTML
Crear Tablas.
Una de las plantillas ms bsicas es la tabla de dos
columnas, donde cada columna tiene un nmero
especfico de celdas.

Etiqueta

Uso

<TABLE>

Crea una tabla dentro de un documento HTML.

<TR>

Crea una fila dentro de una tabla.

<TD>

Crea una celda en una fila.

<TH>

Crea una celda de ttulo dentro de una fila

Tablas HTML

<HTML>
<HEAD></HEAD>
<BODY>
<TABLE>
<TR>
<TH></TH>
<TH></TH>

</TR>
<TR>
<TD></TD>
<TD></TD>

</TR>

1era Parte

Cont
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>

</TR>
<TR>
<TD></TD>
<TD></TD>

</TR>
</TABLE>
</BODY>
</HTML>

Tablas HTML
Agregar o Quitar Filas y Columnas.
Una vez que se ha creado la tabla, es muy fcil
agregar o quitar datos de sta.
Agregar Filas. 2
Se puede agregar una nueva fila agregando
etiquetas adicionales <TR> y <TD> al cdigo HTML
donde debe aparecer la nueva fila.
Agregar Columnas. 3
Se pueden crear nuevas columnas dentro de una
tabla agregando las etiquetas <TH> o <TD> a cada
una de las filas.

Tablas HTML
Extender Filas y Columnas.

Atributo

Uso

ROWSPAN=n

Asignados a las etiquetas <TH> o <TD>, denota el

nmero de filas que se van a extender en una celda.
Por ejemplo, ROWSPAN=6, fusiona seis filas.

COLSPAN=n

Utilizados en las etiquetas <TH> o <TD>, indica el

nmero de columnas que se van a extender en una
celda. Por ejemplo, COLSPAN=4, fusiona cuatro
columnas.

Tablas HTML
Extender Filas y Columnas.
Extender Filas. 4
Se pueden fusionar filas adyacentes usando la
etiqueta <TH> y <TD>, dependiendo si se est
expandiendo un ttulo de una tabla o datos de una
tabla.
Extender Columnas.5, 6 y 7
Las columnas tambin se pueden fusionar usando
las etiquetas <TH> o <TD>, dependiendo si se est
extendiendo un ttulo o una celda de una tabla.

Tablas HTML
Agregar Ttulos (Captions) 8

Etiqueta/Atributo

Uso

<CAPTION>

Asignado dentro de una tabla para identificar

texto del ttulo de una tabla.

ALIGN=

Agregar ttulo en la parte superior o inferior

de una tabla.

Tablas HTML
Agregar Bordes. 9
Crear Bordes de Tablas.
Atributo

Uso

BORDER=n

Define el ancho del borde de la tabla (medido en

pixels). BORDER=0 elimina el borde.

BORDERCOLOR=#RRGGBB

Define el color del borde como un nmero

#RRGGBB o un nombre de color.

Especificar Tabla sin Borde

<TABLE BORDER=0>

Tablas HTML
Aplicar Color de Fondo a la Tabla.
<TABLE BGCOLOR=#RRGGBB>

Incluir una Imagen de Fondo en la Tabla.

<TABLE BACKGROUND=C:\..\..\chicaseisi.jpg>

Especificar la Alineacin de la Celda.

ALIGN=n Define alineamiento horizontal del
contenido de la celda (LEFT, CENTER, RIGHT).
VALIGN=n Define alineamiento vertical del
contenido de la celda (TOP, MIDDLE, BOTTOM,
BASELINE).

Tablas HTML
Especificar el Tamao de la Celda.
WIDTH=n Define el ancho de la celda (pixels o
porcentaje del ancho de tabla).
NOWRAP Deshabilita el plegado (dividir la lnea)
de texto en la celda. Todo el texto aparecer en una
lnea.

Agregar Espaciado de Celdas y Rellenos.

CELLSPACING=n Define la cantidad de espacios
entre celdas en pixels.
CELLPADDING=n Define la cantidad de espacio
entre el contenido y el borde de la celda en pixels.

Tablas HTML
Especificar Alineacin, Ancho y Plegado de texto en la
Tabla.

WIDTH=n Define el ancho de tabla

(porcentaje de la ventana o pixels).
ALIGN= Define la alineacin de la tabla
como LEFT, RIGHT (BLEEDLEFT,
BLEEDRIGHT, y JUSTIFY para Internet
Explorer).

Crear Formularios HTML

Los formularios son herramientas a travs de los cuales, un
sitio web obtiene entradas de los visitantes. Un formulario
puede estar definido como un rea de la pgina HTML,
conteniendo elementos de entrada que permiten al usuario
ingresar informacin.
Un formulario tiene varios controles que se usan para recoger
informacin. Cuando un visitante completa y enva el
formulario, la informacin de los controles en el formulario es
redireccionada a un programa, el cual ejecuta las acciones
necesarias.
La creacin de formularios involucra dos etapas bsicas:
La parte que es visible y es llenada por el visitante.
La parte que no es visible al visitante y que especifica como
el servidor debe procesar la informacin.

Formularios HTML
Controles de un Formulario.
Botones Submit y Reset: El botn Submit (Enviar) se usa para enviar
la informacin en un formulario a un servidor para su procesamiento,
mientras el botn Reset (Restaurar) se usa para regresar a la
informacin inicial del formulario.
Campos de Texto: Son reas en blanco en el formulario donde el
visitante puede ingresar informacin de texto desde el teclado, como
son nombre y direccin.
Botones de Radio: Se usan cuando los visitantes tienen que escoger
una nica opcin de un listado. Son usados para opciones como
Masculino o Femenino.
Cajas de Verificacin: (Check Boxes) Permiten a los visitantes
seleccionar uno o ms tems desde una lista de opciones.
Areas de Texto: (Text Area) son campos para el ingreso de textos
extensos.
Listas de Seleccin: (Selection Lists)Permiten a los visitantes
seleccionar uno o ms tems desde una lista de opciones. Estas
tambin son llamados listas desplegables o (drop-down).

Formularios HTML
Crear un Formulario y agregar un botn de Submit y de Reset.
El primer paso en la creacin de un formulario es insertar la
etiqueta <FORM> dentro de la etiqueta <BODY> y agregar los
botones de Submit y Reset.
Etiqueta/Atributo

Uso

<FORM>

Indica un formulario
documento HTML.

dentro

de

un

<INPUT TYPE= SUBMIT VALUE=>

Agrega un botn Submit al formulario. El

atributo Value permite agregar texto en el
botn.

Agregar un botn Submit grfico. El

<INPUT
TYPE=
IMAGE
NAME=
atributo SRC= especifica el archivo fuente
POINT SRC= BORDER= 0>
de la imagen.
<INPUT TYPE= RESET VALUE=>

Agregar un botn Reset al formulario.

Formularios HTML
Campos de Entrada General.
Etiqueta/Atributo

Uso

<INPUT>

Especifica un rea dentro del formulario para la entrada de

datos del visitante.

TYPE=..

Define el tipo de campo de entrada, como son TEXT,

PASSWORD, CHECKBOX, RADIO, FILE, HIDDEN, IMAGE,
SUBMIT y RESET.

NAME=

Indica el nombre del elemento para el que el valor pertenece.

VALUE=

Especifica el contenido asociado con NAME=.

SIZE=

Define el tamao de los caracteres que pueden ser enviados.

MAXLENGTH=n

Define el mximo nmero de caracteres que el usuario puede

ingresar en el campo de entrada.

CHECKED

Especifica la seleccin por defecto cuando el formulario se

carga o restaura. Funciona solo con Check Box y Radio.

ACCEPT=

Define aceptables tipos de MIME para cargar archivos.

Formularios HTML
Campos de Texto.
Ejemplo 1
Botn de Radio.
Ejemplo 2
Caja de Verificacin. Ejemplo 3
Areas de Texto.
Ejemplo 4
Listas de Seleccin. Ejemplo 5
Procesamiento de Formularios. Ejemplo6
Atributo

Uso

ACTION=

Especifica el programa en el servidor HTTP

que procesar la salida del formulario.

METHOD=

Instruye al navegador si enviar los datos al

servidor por el mtodo POST o el mtodo GET.

Imgenes
Imgenes en un documento HTML.
Formatos de imgenes:
Formato imagen GIF. (Graphic Interchange File)
Soporta Transparencia, Animacin, Entrega Progresiva y menor
perdida de compresin.

Formato JPG/JPEG. (Joint Portable Expert Group)

Formato PNG. (Portable Network Graphics)

Agregar Imgenes.
Ejemplo 1
Crear Thumbnails. (Miniaturas)
Ejemplo 2
Usar Imgenes como enlace. Ejemplo 2

Imgenes
Crear Mapas de Imagen.
Etiqueta/Atributo

Uso

USEMAP=

Indica la definicin del Mapa de cliente a utilizar. Atributo de la

etiqueta <IMG>.

ISMAP

Define el mapa de imagen del lado del cliente. Atributo de la etiqueta

<IMG>.

<MAP>

Define el bloque de definicin de mapa dentro de un documento

HTML.

<AREA>

Define un rea en el documento HTML.

SHAPE=

Especifica la forma de un rea (RECT, CIRCLE o POLY).

HREF=

Define un destino para el rea.

NOHREF

Define que esta rea no conecta a ningn URL.

COORDS=x, y

Define la forma de un rea.

ALT

Especifica texto alternativo (o texto emergente pop-up) describiendo

el enlace.

Imgenes
<MAP NAME=Zonas_Rojas>
<AREA SHAPE=CIRCLE COORDS=0, 50, 30 HREF=can32.html
ALT=Indice del Mapa>
<AREA
SHAPE=CIRCLE
COORDS=200,
100,
200
HREF=can43.html ALT=Barcelona>
<AREA
SHAPE=CIRCLE
COORDS=100,
0,
100
HREF=can56.html ALT=Guanta>
<AREA SHAPE=CIRCLE COORDS=50, 0, 400 HREF=can64.html
ALT=Puerto La Cruz>
<AREA SHAPE=default NOHREF>
</MAP>
<CENTER>
<IMG SRC=algo.jpg WIDTH=800 HEIGHT=600 BORDER=0
ALT=Zonas Rojas Calientes USEMAP=#Zonas_Rojas>
</CENTER>

V.- CSS (Cascading Style

Sheet) / Javascript / Active
Content.

Hojas de Estilos (CSS)

Hojas de Estilo.
Las hojas de estilo, formalmente conocidas por la W3C como
Cascading Style Sheets, ayudan a formatear los documentos
HTML fcil y consistentemente. Insertar todas las etiquetas de
formato manualmente puede ser muy tedioso. Con las hojas de
estilo una vez que se ha especificado el formato, se aplica a lo
largo del documento.

Ventajas de Usar Hojas de Estilo.

Proporcionan ms control sobre cmo aparecen los documentos
en los navegadores.
Reducen el tiempo invertido en desarrollar y mantener
documentos HTML.
Proporcionan flexibilidad. Incluso si una hoja de estilo aplica a
todas las pginas del sitio web, se pueden especificar estilos
individuales que apliquen a documentos particulares.

Hojas de Estilos (CSS)

Implementar Hojas de Estilo.

Desarrollar la hoja de estilo completa con todas las opciones de formato.
Conectar (o asociar) la hoja de estilos al documento HTML.
NOTA: Habr dos tipos de documentos, los documentos HTML y las hojas de estilo.
Los documentos HTML contendrn el contenido, mientras que las CSS contendrn la
informacin de formato.

Desarrollar Hojas de Estilo.

Propiedades de Fuente: Especifican el formato a nivel de carcter (inline) tal
como el tipo de letra.
Propiedades de Texto: Especifican caractersticas de presentacin de texto
como alineacin o espacio de letras
Propiedades de Caja: Especifican caractersticas de secciones de texto a nivel
de prrafo (o bloque).
Propiedades de Color y Fondo: Especifican el color y las imgenes de fondo a
nivel de prrafo (o bloque).
Propiedades de Clasificacin: Especifican las caractersticas de presentacin de
las listas y los elementos (como P o H1) a nivel de lnea o bloque.

Hojas de Estilos (CSS)

Etiqueta/Atribut
o

Uso

<STYLE>

Define el rea de hoja de estilos dentro de un documento

HTML.

<!-- -->

Esta etiqueta de comentario, oculta los contenidos de la

hoja de estilos de los navegadores que no soportan
estilos.

TYPE=text/css

Define el tipo de hoja de estilos.

@import url()

Importa una hoja de estilos. El tratamiento es URL

(http://mystyles.com/new.css).

<LINK>

<link href="archivo.css" rel="stylesheet" type="text/css">

Hojas de Estilo (CSS)

Asociar Hojas de Estilos a Documentos HTML.
Incrustar la hoja de estilos en el documento HTML definindola
entre las etiquetas <HEAD> de apertura y cierre.
Almacenar la hoja de estilos en un documento separado y luego
enlazar o importar las hojas de estilos para asociarlas con el
documento HTML.
Utilizar definiciones de estilo interno o individual (inline).

Incrustar Hojas de Estilos en el Documento HTML. 1

Importar Hojas de Estilos. 2
Enlazar Hojas de Estilos. 3

Hojas de Estilos (CSS)

Etiqueta/Atributo
<LINK>
REL=StyleSheet
TYPE=text/css

Uso
Referencia a una hoja de estilos.
Define el archivo referenciado en una hoja de estilos.
Define el tipo de hoja de estilos a ser usada.

HREF=URL

Indica la hoja de estilos como un URL estndar.

TITLE=

Nombra la hoja de estilos. Las hojas de estilos sin

nombres siempre se aplican. Las hojas con nombre se
aplican por defecto o se proporcionan como opciones.
Esto depende del atributo REL usado.

Hojas de Estilos (CSS)

Aplicar Clases
Documentos. 4
Etiqueta/Atributo

de

Estilos

Partes

de

Uso

<SPAN>

Contiene atributos de estilos. Los aplica al cdigo HTML

entre las etiquetas de apertura y cierre.

<DIV>

Contiene los atributos de estilo. Los aplica al cdigo

HTML entre las etiquetas de apertura y cierre.

CLASS=

Enlaza a una clase de estilos hacia una parte

especificada de un documento HTML.

ID=uniqueen

Proporciona un nombre nico para una definicin de

estilo especfica. Esto puede usarse solo dentro de una
hoja de estilos.

Hojas de Estilos (CSS)

Aplicar Definiciones de Estilos Internos (inline). 5

Etiqueta/Atributo

Uso

Cualquier Etiqueta
HTML

Todas las etiquetas HTML incluyendo <BODY>

pueden soportar definiciones de estilos.

STYLE=

Usa definiciones de estilo interno, que

aplicamos como atributo a las etiquetas HTML.
La definicin de estilos se coloca dentro de
comillas.

Contenido Activo
Sonidos.
Etiqueta/Atributo

Descripcin

<EMBED>

Inserta un objeto incrustado en un documento

<ALIGN = >

Define el posicionamiento del objeto incrustado, relativo al

documento y contenidos circundantes

HEIGHT=n

Define la dimensin vertical del objeto incrustado

HIDDEN

Oculta el objeto incrustado

NAME=

Nombra el objeto para que otros objetos puedan referenciarlo

PARAM=

Define parmetros adicionales

SRC=URL

Especifica la ubicacin del archivo que contiene el objeto

WIDTH=n

Especifica la dimensin horizontal del objeto incrustado

AUTOSTART=

Especifica cuando debe abrirse el archivo de sonido (cuando la

pgina sea accesada o cuando se pulse un botn)

HIDDEN=

Controla la visibilidad del cuadro de control de sonido

LOOP=n, INFINITE

Define el nmero de veces que debe repetirse el sonido de

fondo.

<BGSOUND>

Especifica la ubicacin relativa o absoluta del archivo de sonido.

Lenguajes Script
Aparte de los marcos y estilos, tambin podemos
agregar distintos lenguajes script a los documentos
HTML para hacerlos ms amigables al usuario.
Un ejemplo, es JavaScript. JavaScript es un lenguaje
poderoso y til, aunque no es un lenguaje de
programacin antguo.
Los documentos HTML que incluyen JavaScript pueden
interactuar con los visitantes, los procesos y verificar la
informacin que los visitantes proporcionan e incluso
entregar informacin apropiada a cada visitante.
Para trabajar con JavaScript, se debe estar familiarizado
con los siguientes conceptos:

Lenguajes Script (JavaScript)

Objeto: Un objeto es una entidad como la caja de verificacin
(checkbox) de un formulario, el formulario mismo, una imagen, un
documento, un enlace, o incluso una ventana del navegador.
Propiedad: Una propiedad describe un objeto. Las propiedades pueden
ser cualquier cosa, desde color a nmero de items de un objeto. Por
ejemplo, el nmero de elementos en la lista Select es una propiedad.
Mtodo: Un mtodo es una instruccin. Los mtodos disponibles para
cada objeto describen lo que se puede hacer con el objeto. Por ejemplo,
utilizando un mtodo podemos convertir todo el texto de un objeto a
maysculas o minsculas.
Sentencia: Es una sentencia de lenguaje script. Combina objetos,
propiedades y mtodos.
Funcin: Una funcin es una coleccin de sentencias que realizan
acciones. Las funciones contienen una o ms sentencias y pueden ser
consideradas como prrafos de un lenguaje script.
Manejador de eventos: Un manejador de eventos espera a que
ocurran eventos, como el movimiento del ratn sobre un enlace y luego
lanza un script basado en ese evento. Por ejemplo, el manejador del
evento onMouseOver realiza una accin cuando el visitante mueve el
puntero del ratn sobre el objeto.

JavaScript
Caractersticas de JavaScript
JavaScript adopta una tecnologa basada en objetos,
lo que significa que proporciona un conjunto de
objetos del navegador predefinidos. JavaScript
permite a los usuarios definir objetos para su uso en
el script.

JavaScript est basado en un modelo manejado

por eventos. En un modelo manejado por
eventos, se necesita una accin apropiada en
respuesta a los eventos del usuario

JavaScript
Agregar Script al Documento.
Existen tres formas de agregar un script al
documento:
Incrustar el script en la pgina. 1
Ubicar el script en el head del documento. 2
Enlazar a un script almacenado en otro archivo. 3

JavaScript

Incrustar el Script.
<P>
<SCRIPT TYPE=text/JavaScript>
<!-document.write(La fecha de Hoy es: +new
Date());
-->
</SCRIPT>
</P>

JavaScript

Agregar un Bloque Script a la Etiqueta <HEAD>.

<HEAD>
<TITLE> La Pgina Informativa</TITLE>
<H1>Bienvenidos</H1>
<P>
<SCRIPT TYPE=text/JavaScript>
<!
document.write(La fecha de Hoy es: +new Date());
//-- >
</SCRIPT>
</P>
</HEAD>

JavaScript

Enlazar el Script.
<HEAD>
<TITLE> La Pgina Informativa</TITLE>
<SCRIPT SRC=funcion.js
TYPE=text/javascript>
<!
//-->
</SCRIPT>
</HEAD>

ETIQUETAS HTML5
Etiqueta <ASIDE>
Esta etiqueta se usa para identificar contenido aparte del
contenido en el que se enmarca, pero con el que est
relacionado. Veamos un ejemplo:
<P>Hemos visitado el Zoolgico de Barquisimeto esta
tarde.</P>
<ASIDE>
<H4>Zoolgico de Barquisimeto</h4>Se trata de un
parque zoolgico... </H4>
</ASIDE>

ETIQUETAS HTML5
Etiqueta <AUDIO>
Esta etiqueta nos permite introducir audio en nuestro
sitio. Usamos la etiqueta <SOURCE> para definir
posteriormente la ruta y el tipo de ste:
<AUDIO CONTROLS="controls">
<SOURCE SRC="fichero.ogg" TYPE="audio/ogg"/>
<SOURCE SRC="fichero.mp3" TYPE="audio/mp3"/>
</AUDIO>

ETIQUETAS HTML5

Etiqueta <CANVAS>
Es una de las etiquetas ms famosas de HTML5. Se trata de un
contenedor donde se permite el dibujo. ste, suele hacer con
JavaScript.
<CANVAS ID="dmCanvas"></CANVAS>
<SCRIPT TYPE="text/javascript">
VAR CANVAS=document.getElementById('dmCanvas');
VAR DM=canvas.getContext('2d');
dm.fillStyle='#FF0000';
dm.fillRect(0,0,80,100);
</SCRIPT>

ETIQUETAS HTML5

Etiqueta <COMMAND>
Define un comando (puede ser un botn, un botn de seleccin
mtiple, checkbox, o de seleccin simple, radiobutton) que el
usuario puede invocar. Un comando puede ser parte de un men
contextual, una barra de herramientas, o formar parte de un men
usado el elemento <MENU>, o puede ponerse en cualquier parte
de la pgina para definir un atajo de teclado.
<MENU>
<COMMAND TYPE="command" LABEL="Guardar"
ONCLICK="guardar()"> Guardar </COMMAND>
</MENU>

ETIQUETAS HTML5

Etiqueta <DATALIST>

Especifica una lista de opciones predefinidas para un elemento <input>. Se

usa para proporcionar la caracterstica de autocompletado a los elementos
de este tipo. Los usuarios vern una lista, que se va rellenando de forma
automtica conforme ellos escriben sugirindole diferentes opciones. Un
ejemplo de uso sera el siguiente:
<INPUT LIST="browsers"/>
<DATALIST ID="browsers">
<OPTION VALUE="Internet Explorer">
<OPTION VALUE="Firefox">
<OPTION VALUE="Google Chrome">
<OPTION VALUE="Opera">
<OPTION VALUE="Safari">
</DATALIST>

ETIQUETAS HTML5
Etiqueta <EMBED>
La idea de esta etiqueta es normalizar las inclusiones de
contenidos de aplicaciones externas va plugins en
nuestro sitio, para integrar un fichero SWF de Flash se
hara como se indica a continuacin:
<EMBED SRC="flash.swf"/>
Etiqueta <FOOTER>
Define el pie de pgina de un documento. Se puede
tener ms de un pie de pgina.
<FOOTER>Linux Hispano - Software libre</FOOTER>

ETIQUETAS HTML5

Etiqueta <HEADER>
En el sitio contrario, esta etiqueta define la cabecera.
<HEADER>
<H1>Bievenidos al sitio</H1>
<P>Somos un grupo de...</P>
</HEADER>
<P>Resto del sitio...</P>

ETIQUETAS HTML5
Etiqueta <METER>
Define una medida escalar, dentro de un rango conocido. No
confundir con la etiqueta <PROGRESS> que ahora comentaremos.
<METER VALUE="2" MIN="0" MAX="10">2 de 10</METER><BR/>
<METER VALUE="0.6">60%</METER>
Etiqueta <NAV>
Define un bloque donde se enmarcan diferentes enlaces de
navegacin.
<NAV>

<A HREF="/inicio/">Inicio</A> |

<A HREF="/acerca/">Acerca de</A> |

<A HREF="/contacta/">Contacta</A> |
</NAV>

ETIQUETAS HTML5

Etiqueta <PROGRESS>
Representa el grado de progreso de una tarea:
<PROGRESS VALUE="22" MAX="100"></PROGRESS>
Etiqueta <VIDEO>
Casi todos los navegadores la soportan ya. Es una etiqueta
equivalente a <audio> pero en este caso sirve para emitir vdeo.
<VIDEO WIDTH="320" HEIGHT="240" CONTROLS="controls">
<SOURCE SRC="fichero.mp4" TYPE="video/mp4" />
<SOURCE SRC="fichero.ogg" TYPE="video/ogg" />
</VIDEO>

ETIQUETAS HTML5

ETIQUETAS HTML5
Ejemplo General:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body><header><hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup></header>
<nav>

ETIQUETAS HTML5

<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul></nav>
<section><article><header>
<h1>Article #1</h1>
</header>
<section> Este es el primer artculo. This is <mark>highlighted</mark>.
</section></article>
<article><header>
<h1>Article #2</h1>
</header>

ETIQUETAS HTML5

<section>
Este es el segundo artculo. Estos artculos pueden ser
secciones del blog, etc.
</section></article></section>
<aside><section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul></section>

ETIQUETAS HTML5

<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure></aside>
<footer>Footer - Copyright 2013</footer>
</body>
</html>