01 - HTML, XML y Eventos HTML

Curso de JavaScript
HTML, XML y Eventos HTML
A/C Jose Costa jose.costa@moove-it.com Ing. Martn Cabrera martin.cabrera@moove-it.com moove-iT
Temario
Introduccin HTML
Contenido bsico Formularios
XML
Introduccin
Eventos HTML
HTML
Introduccin
HTML (HiperText Markup Language)
Lenguaje utilizado para representar documentos de hipertexto. Adems del texto normal incluye elementos multimedia (video, musica, etc.). Existen enlaces (links) que permiten redirigir a una parte del documento o a otro documento (de hipertexto o no)
Lenguaje de marcado
Notacin para agregar una estructura formal a un texto
WWW (World Wide Web)

Es un sistema que linkea documentos de hipertexto (HTML) en Internet.
Introduccin
Modelo Cliente Servidor
Introduccin
Modelo Cliente Servidor
El Cliente y el Servidor pueden actuar como una sola entidad y tambin pueden actuar como entidades separadas, realizando actividades o tareas independientes. Las funciones de Cliente y Servidor pueden estar en plataformas separadas, o en la misma plataforma. Un servidor da servicio a mltiples clientes.
Caractersticas:
Es el cliente el que inicia la comunicacin El cliente debe encontrar al servidor El servidor responde a la peticin, nunca la inicia
Introduccin
Ventajas
Se aprovecha la potencia de cmputo de las estaciones de trabajo Se ubica el procesamiento cerca de las fuentes de trabajo reduciendo trfico y tiempo de respuesta Facilita la gestin de cambios de software
Desventajas
El servidor puede convertirse en cuello de botella El diseo de aplicaciones distribudas es una tarea compleja que requiere nuevos paradigmas Necesidad de sistemas abiertos y estndares
Introduccin
Modelo WWW
Cliente 1 Cliente N
Browser Servidor Web Browser
Introduccin
Browser o Navegador
Aplicacin cliente que permite visualizar contenido HTML. Ejemplos:
Mozilla Firefox Netscape Internet Explorer Opera Etc.
HTML
HTML (HyperText Markup Language) Creado en 1989 por el fsico nuclear TIM BERNERS-LEE Se elabor un protocolo para soportar el envo de informacin por la red.
HTTP (Hyper Text Transfer Protocol)
Permitira a todos los cientficos del CERN, consultar cualquier informacin de cualquier tema, aunque se encontrase distribuida
HTML
Lenguaje que permite definir un formato a documentos de texto. Define sintaxis y ubicacin de imgenes, texto, instrucciones y objetos del navegador. Posibilidad de conectar un documento con otros o con distintos recursos de internet. Hiperlinks URL: Uniform Resource Locator
Direccin de un objeto en el Web
HTML
Son archivos de texto ASCII. Cualquier editor de texto los puede editar. Existen editores especializados que ayudan al programador o diseador a editarlo en forma mas amigable.
Ejemplos: Hotmetal, Adobe Pagemill, MS Frontpage,Dreamweaver, etc
HTML - Evolucin
1992: HTML 1.0, Tim-Berners Lee propuesta original 1993: HTML+, layout fsicos 1994: HTML 2.0, standard con mejores funcionalidades 1995: Funcionalidades No-standard de Netscape 1996: Competencia entre funcionalidades de Netscape y Internet Explorer 1996: HTML 3.2, Guerra de Navegadores (Browsers) 1997: HTML 4.0, se introducen los stylesheets. 1999: HTML 4.01, Ganador IE 2000: XHTML 1.0, versin XML de HTML 4.01 2001: XHTML 1.1, modularizacin 2002: XHTML 2.0, simplicidad y generalidad
HTML - Formato
Estructura general <html> <head> <title>The Title of the Document</title> </head> <body bgcolor="white"> ... </body> </html>
HTML description, keywords y contenido

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content=xxx"> <meta name="keywords" content=ttt,uuu,"> <meta http-equiv="Content-Type content="text/html; charset=ISO-8859-1">
En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas (description) y algunas palabras clave (keywords) para su localizacin.
HTML Header (cabecera)

La cabecera es la seccin comprendida entre <head> y </head>.
Titulo - En ella se encuentra necesariamente el ttulo (entre las etiquetas <title> y </title>).
<TITLE>Colegio Pblico de Villaman - mbito de Influencia - </TITLE>
Dentro de la cabecera tambin se suele incluir cdigo en JavaScript, que se reconoce porque va comprendido entre las etiquetas
<script language="JavaScript"> <! Aqu ira el cdigo // --> </script>
HTML Body (Cuerpo)

El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde debemos colocar el contenido de nuestra pgina: texto, fotos, etc. Atributos de body
BGCOLOR - color de fondo de la pgina. Formato: #rrggbb
<BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
TEXT - color del texto por omisin. Defecto: negro BACKGROUND - ruta y nombre de archivo (URL) de la imagen que ser usada como fondo del documento.
HTML Formato de texto

Titulos Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas que se usan son:
<h1> Ttulo </h1> .. <h6> Titulo H6 </h6>
Estilos de fuentes algunos de los existentes son:

<B>Texto en Negrita</b> <I>Itlica</i> <B><I>Negrita e Itlica</i></b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> <BIG>Texto grande</big> <SMALL>Texto pequeo</small> <SUB>Subindice</SUB> <SUP>Superndice</SUP> <BLINK> Texto intermitente</blink> <STRIKE>Texto tachado</STRIKE>

Tamaos de fuentes dos maneras
nmero del 1 al 7 (de ms pequeo a ms grande)
<font size=1> Esta es la letra ms pequea que se puede conseguir </font>
referencia relativa (tamao por defecto 3)

<font size="+1"> Esto es igual que poner size=4 </font>
Tipos de fuentes
<font face="Courier">Eso se ver en la fuente Courier</font>
Color de las fuentes

Parrafos y bloques
<P> Se utiliza para que los prrafos queden separados por una lnea en blanco.
Atributos: ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify"
<BR> punto y aparte. No tiene etiqueta de cierre <PRE> texto visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML <ADDRESS> empleada para indicar que un texto representa una direccin o una firma. Generalmente se presenta en cursiva y tabulado. <BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. <HR> Se emplea para representar una lnea horizontal (no tiene cierre)
ALIGN="left WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en pxels COLOR="#0000FF" , para especificar el color

Listas con vietas <ul> <li>Primer trmino de la lista <li>Segundo trmino <li>Tercer trmino </ul>
Primer trmino de la lista Segundo trmino Tercer trmino

Enlaces (links) <A HREF="URL"> Texto del enlace</A> El texto del enlace es lo que se visualizar en el navegador. La URL es la direccin donde redirecciona el pedido Tipos:
Enlace a otro lugar del mismo documento
<A HREF="#inicio"> Ir al Inicio</A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A>
Enlace a otra pgina local

<a href="pagina2.htm">Ir a pagina2</a>
Enlace a una direccin de Internet

<A HREF="http://www.moove-it.com/">Moove-it</A>

Enlaces (links)
Usando imgenes como enlaces
<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
Enlace con una direccin de correo

<A HREF="mailto: martin.cabrera@moove-it.com"> martin.cabrera@moove-it.com </A>
Imgenes
<IMG SRC="URL"> (no tiene etiqueta de cierre) <IMG SRC="http://www.moove-it.com/logo.jpg"> Atributos:
ALT="Texto que aparece al situar el cursor sobre la imagen" ALIGN WIDTH=80, HEIGTH=100 - Indican la anchura y altura de la imagen en pxels BORDER=2 - Aade un borde, a modo de marco, a la imagen HSPACE=10 , VSPACE=15 - Especifican el espacio horizontal y vertical que separa la imagen del texto
Formatos: BMP, TIFF, DIB, WMF.

Los mas utilizados: GIF, JPG y PNG en entorno Web
HTML - Tablas
<TABLE> y </TABLE> son las etiquetas donde est contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> sealan una celda. Ejemplo: <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>
HTML - Tablas
Tabla Atributos
BORDER="4". Indica el tamao del borde en pxels, en este caso 4. Si no se indica nada carece de borde WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 pxels) o como un porcentaje (50% del ancho disponible) CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 ALIGN=" left", "right", "center".
Atributos de las etiquetas de fila y celda

WIDTH="30". Ancho de toda la fila o celda. Tambin se puede dar en % ALIGN=" left", "right", "center". VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el nmero de columnas que abarca la fila ROWSPAN=2. Especifica el nmero de filas que abarca la columna
HTML - Mapas
Los mapas sensibles son imgenes que presentan mltiples enlaces segn la zona donde se site el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas. Pasos
Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio
<IMG SRC="gifs/mapa.gif USEMAP="#directorio">
Abrimos el mapa recin creado

<MAP NAME="directorio">
Definimos las zonas del mapa y los enlaces que le asignamos a cada una.
<AREA SHAPE="forma de la zona" COORDS="x,y,u,v" HREF="URL asignada" ALT="comentario">
Cerramos el mapa
</MAP>
HTML - Mapas
Ejemplo <IMG SRC="gifs/mapa.gif" USEMAP="#directorio" ALIGN="left" HSPACE=20> <MAP NAME="directorio"> <AREA SHAPE="RECT" COORDS="0,0,94,22" HREF="colores.htm"> <AREA SHAPE="RECT" COORDS="0,22,94,39" HREF="comienzo.htm"> <AREA SHAPE="RECT" COORDS="0,39,94,56" HREF="enlaces.htm"> <AREA SHAPE="RECT" COORDS="0,56,94,73" HREF="estructura.htm"> <AREA SHAPE="RECT" COORDS="0,73,94,90" HREF="formatos.htm"> <AREA SHAPE="RECT" COORDS="0,90,94,107" HREF="imagenes.htm"> <AREA SHAPE="RECT" COORDS="0,107,94,124" HREF="index.htm"> <AREA SHAPE="RECT" COORDS="0,124,94,141" HREF="listas.htm"> <AREA SHAPE="RECT" COORDS="0,141,94,158" HREF="mapas.htm"> <AREA SHAPE="RECT" COORDS="0,158,94,175" HREF="publicar.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,192" HREF="tablas.htm"> <AREA SHAPE="RECT" COORDS="0,175,94,214" HREF="frames.htm"> </MAP>
HTML - Formularios
HTML - Formularios
Son utilizados para permitirle al usuario ingresar datos y que estos se enven al servidor. Es una seccin de un documento que contiene contenido normal, cdigo, elementos especiales llamados controles Entrada de texto Text area casillas de verificacin (checkboxes) radiobotones (radio buttons) Menes rtulos (labels) Botones Normalmente los usuarios llenan un formulario con controles definidos y estos se envan con un boton de submit a un servidor Web o de correo.
HTML - Formularios
<FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain"> ... </FORM> Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, check box, campos, etc. y tambin todas las etiquetas de HTML con diseo (tablas, colores, etc.)
HTML - Formularios
Atributos
ACTION nos indica la direccin a la cual se van a enviar los datos del formulario. METHOD y ENCTYPE indican cmo se transferirn los datos (post, get) y la codificacin del texto HIDDEN no mostrar el campo en la pgina web, aunque s enviar su contenido.
HTML Formulario Envo

El atributo method del elemento FORM especifica el mtodo HTTP usado para enviar el formulario al agente procesador. Este atributo puede tener dos valores: get: Con el mtodo HTTP "get", el conjunto de datos del formulario se agrega al URI especificado por el atributo action (con un signo de interrogacin ("?") como separador) y este nuevo URI se enva al agente procesador.
http://www.google.com/search?q=formularios+html&hl=en&lr=&client =firefox-a&rls=org.mozilla:es-AR:official&hs=8FR&start=10&sa=N Tamao mximo 256 caracteres
post: Con el mtodo HTTP "post", el conjunto de datos del formulario se incluye en el cuerpo del formulario y se enva al agente procesador.
HTML - Formularios
Entrada de texto de una lnea
<INPUT TYPE="text" SIZE="25" NAME="Nombre">
Entrada de texto de varias lneas

<TEXTAREA NAME="comentario" ROWS=3 COLS=50> Introduzca aqu sus comentarios </TEXTAREA>
Lista de opciones o men desplegable

<SELECT NAME="estudios"> <OPTION SELECTED> ESO <OPTION> Bachillerato <OPTION> Ciclos Formativos <OPTION> Garanta Social </SELECT>
HTML - Formulario
Casillas de verificacin o Checkboxes
< INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR> < INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR> < INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR>
Botones de radio o de opcin

< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre < INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > Mujer
Botones envo y borrado

Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar < INPUT TYPE="submit" VALUE="Enviar"> < INPUT TYPE="reset" VALUE="Borrar">
HTML Formulario - Ejemplo

<form action="mailto:tu@direccion.es" method="post" enctype="text/plain"> <table bgcolor="#cccccc" border="0" cellpadding="6" cellspacing="0" width="400"> <tr> <td align="right" valign="top"><b>Nombre</b></td> <td><input type="text" size="25" name="Nombre"> </td> </tr><tr> <td align="right" valign="top"><b>E-mail</b></td> <td><input type="text" size="25" name="e-mail"> </td> </tr><tr> <td align="right" valign="top"><b>Especialidad</b></td> <td><input type="text" size="25" name="Especialidad"> </td> </tr><tr> <td align="right" valign="top"><b>Centro de destino</b></td> <td><input type="text" size="25" name="Centro"> </td> </tr><tr> <td align="right" valign="top"><b>Provincia</b></td> <td><input type="text" size="25" name="Provincia"> </td> </tr><tr> <td align="right" valign="top"><b>Pulsa una vez</b> <b>></b> </td> <td align="center"> <input type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar" name="B1"> </td> </tr> </table> </form>
Ejercicio
Realizar una pgina Web de una ferretera con las siguientes caractersticas:
Pagina principal utilizar tablas
Menu con redirecciones a otras pginas Texto introductorio bsico Pie de pgina
Pgina con catlogo de productos Pagina con formulario para envo de mail Pgina con formulario para envo de un producto de catlogo
HTML Eventos
HTML define un conjunto de eventos para elementos de la pgina (body, input, etc. ) que se disparan ante acciones del usuario. Los eventos aplican a un conjunto estricto de elementos HTML.
Ejemplo.
onLoad aplica a los elementos <body> y <frameset> Este evento se dispara cuando la pgina es cargada (body o frameset).
HTML Eventos
HTML Eventos - Ejemplo

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <A HREF="eventos.html" onMouseOver="Alarma()"> Pasa por aqu encima </A> </BODY> </HTML>
XML
XML - Introduccin
XML (EXtensible Markup Language) XML es un lenguaje de marcado similar a HTML XML es diseado para describir los datos XML los tags no estn predefinidos, se pueden definir los nuestros XML usa DTD (Document Type Definition) o XSD para describir los datos.
XML - Ejemplo
<?xml version="1.0" encoding='iso-8859-1' ?> <micasa> <habitacion id='comedor'> <mueble>aparador</mueble> <mueble>sof</mueble> <puerta a='balcn' /> </habitacion> </micasa>
XML - Introduccin
Al igual que HTML, XML es un archivo ASCII. Puede ser editado en cualquier editor convencional o utilizando algn editor con prestaciones avanzadas:
XMLSpy - http://www.altova.com <oXygen/> - http://www.oxygenxml.com Etc.
XML Bien Formado

Como lenguaje de anotacin, las sentencias en XML consisten en una serie de etiquetas (llamadas elementos) con una serie de modificadores (llamados atributos). Las etiquetas pueden estar anidadas unas dentro de otras, pero toda etiqueta que se abra se tiene que cerrar, y siempre en el mismo orden El elemento vaco no tiene pareja final y termina con />
XML Bien Formado

Requisitos:
si no se utiliza DTD, el documento debe comenzar con un Declaracin de Documento Standalone, tal como la que se pone en la primera lnea. todas las etiquetas deben estar equilibradas todos los valores de los atributos deben ir entrecomillados Elementos vaco debe terminar con /> no debe haber etiquetas aisladas (< &) en el texto Los nombres de las etiquetas pueden ser alfanumricos, comenzando con una letra
XML Bien Formado

Ejemplos
Mal formado
<etiqueta nombre=pepe> <otra> </etiqueta> </otra>
Bien formado
<etiqueta nombre=pepe> <otra/> </etiqueta>
XML - Validacin
En algunos casos, es necesario validar que un documento XML es correcto, es decir, que las etiquetas que se usan son correctas y que estn anidadas de la forma adecuada. Ejemplo:
Etiqueta raiz es etiqueta Dentro de etiqueta puede existir otro elemento otra El elemento raiz tiene un atributo nombre
XML - Validacin
Dos tipos de formas de validar:
DTD, o data type dictionnary XSchema, el equivalente en XML. Un XSchema describe la sintaxis correcta de un documento XML
DTD
<!ELEMENT etiqueta ( otra+ ) > <!ATTLIST etiqueta nombre NMTOKEN #REQUIRED > <!ELEMENT otra ( #PCDATA ) >
Xschema
<schema xmlns='http://www.w3.org/2000/10/XMLSchema' targetNamespace='http://www.w3.org/namespace/' xmlns:t='http://www.w3.org/namespace/'> <element name=etiqueta'> <complexType> <sequence> <element ref='otra' maxOccurs='unbounded'/> </sequence> <attribute name=nombre' type='NMTOKEN' use='required'/> </complexType> </element> <element name=otra' type="string" /> </schema>
XML - Validacin
Para validar basta con indicar qu XSchema o DTD es el que define el formato (metadata)
Ejemplo
<!DOCTYPE micasa PUBLIC "MI CASA" "micasa.dtd">
Si se quiere usar un XSchema, hay algunas formas no estndar (que se suelen usar con los XSchema de Microsoft)
<etiqueta xmlns:xsi='http://www.moove-it.com/etiqueta' xsi:noNamespaceSchemaLocation=etiqueta.xsd'>
Links
http://www.w3.org/TR/html4/ http://www.w3.org/Addressing/ http://www.w3.org/Style/CSS/ http://www.w3.org/

01 - HTML, XML y Eventos HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

01 - HTML, XML y Eventos HTML

Transféré par

Droits d'auteur :

Formats disponibles

Curso de JavaScript

HTML, XML y Eventos HTML

A/C Jose Costa jose.costa@moove-it.com Ing. Martn Cabrera martin.cabrera@moove-it.com moove-iT

WWW (World Wide Web)

Browser Servidor Web Browser

HTML description, keywords y contenido

HTML Header (cabecera)

HTML Body (Cuerpo)

HTML Formato de texto

Estilos de fuentes algunos de los existentes son:

HTML Formato de texto

referencia relativa (tamao por defecto 3)

Color de las fuentes

HTML Formato de texto

HTML Formato de texto

HTML Formato de texto

Enlace a otra pgina local

Enlace a una direccin de Internet

HTML Formato de texto

Enlace con una direccin de correo

Formatos: BMP, TIFF, DIB, WMF.

Atributos de las etiquetas de fila y celda

Abrimos el mapa recin creado

HTML Formulario Envo

Entrada de texto de varias lneas

Lista de opciones o men desplegable

Botones de radio o de opcin

Botones envo y borrado

HTML Formulario - Ejemplo

HTML Eventos - Ejemplo

XML Bien Formado

XML Bien Formado

XML Bien Formado

Vous aimerez peut-être aussi