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
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.
Editores HTML
Base
Texto o Color
WYSIWYG
(What You See
Is What You Get)
Navegadores WEB
Navegadores de
Texto
Navegadores
Grficos
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
<HTML>
La etiqueta HTML especifica que el documento es un documento
HTML.
Tcnicamente, esta etiqueta es una redefinicin cuando la
etiqueta <!DOCTYPE> est presente.
<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>
<BLOCKQUOTE>
<PRE>
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>
Otras Etiquetas
Etiqueta de Carcter
Efecto
<B>
Aplica Negrita.
<BLINK>
<CITE>
<CODE>
<EM>
<I>
Aplica Cursiva.
<S>, <STRIKE>
<STRONG>
<SUB>
<SUP>
<TT>
<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>
Descripcin
Start
Type
(OL)
Type
(UL)
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
"
κ
&
&
λ
<
<
μ
>
>
&un;
×
ξ
÷
ο
α
π
β
ρ
γ
σ
δ
τ
ε
φ
ζ
χ
η
ψ
θ
ω
ι
©
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=
FACE=
<BASEFONT>
Otras Etiquetas
Etiqueta de Regla Horizontal
<HR>
Atributo de la Regla
Efecto
SIZE=n
WIDTH=n
WIDTH=n%
ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER
NOSHADE
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=
ALINK=
VLINK=
LINK=
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.
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.
Hiperenlaces
Enlazar a documentos de la Web.
<A
HREF=http://www.youtube.com/hrcf.html>Prueba
enlaces</A>
de
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.
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
Cont
<FONT COLOR=#0000FF>
<B>
Multimedia
</B>
</FONT>
</LI>
<LI>Groupware
<FONT COLOR=#0000FF>
<B> 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>
<TR>
<TD>
<TH>
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
COLSPAN=n
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>
ALIGN=
Tablas HTML
Agregar Bordes. 9
Crear Bordes de Tablas.
Atributo
Uso
BORDER=n
BORDERCOLOR=#RRGGBB
Tablas HTML
Aplicar Color de Fondo a la Tabla.
<TABLE BGCOLOR=#RRGGBB>
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.
Tablas HTML
Especificar Alineacin, Ancho y Plegado de texto en la
Tabla.
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
Formularios HTML
Campos de Entrada General.
Etiqueta/Atributo
Uso
<INPUT>
TYPE=..
NAME=
VALUE=
SIZE=
MAXLENGTH=n
CHECKED
ACCEPT=
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=
METHOD=
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.
Agregar Imgenes.
Ejemplo 1
Crear Thumbnails. (Miniaturas)
Ejemplo 2
Usar Imgenes como enlace. Ejemplo 2
Imgenes
Crear Mapas de Imagen.
Etiqueta/Atributo
Uso
USEMAP=
ISMAP
<MAP>
<AREA>
SHAPE=
HREF=
NOHREF
COORDS=x, y
ALT
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>
Uso
<STYLE>
<!-- -->
TYPE=text/css
@import url()
<LINK>
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
TITLE=
de
Estilos
Partes
de
Uso
<SPAN>
<DIV>
CLASS=
ID=uniqueen
Etiqueta/Atributo
Uso
Cualquier Etiqueta
HTML
STYLE=
Contenido Activo
Sonidos.
Etiqueta/Atributo
Descripcin
<EMBED>
<ALIGN = >
HEIGHT=n
HIDDEN
NAME=
PARAM=
SRC=URL
WIDTH=n
AUTOSTART=
HIDDEN=
LOOP=n, INFINITE
<BGSOUND>
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:
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
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
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>
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="/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>