Programacin WebProgramacin 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 WebPara 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 WebHasta 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/ServidorIUClienteInterfaz deProtocoloInterfaz deProtocoloServidorDatosRED

Programacin Web Cliente/ServidorCliente: 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/ServidorAlgunas de las funcionalidades de un servidor se muestran a continuacin:Datos SegurosConcurrenciaProteccinAutenticacinAutorizacinPrivacidadServidor

II.- HTTP.

HTTPLa 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.

HTTPTambin 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).

HTTPCadena de comunicacin HTTP:AgenteUsuarioServidorOrigenVCadena de SolicitudCadena de Respuesta

HTTPSin 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.

HTTPElementos intermedios en la comunicacin HTTP:AgenteUsuarioServidorOrigenVCadena de SolicitudCadena de RespuestaVVACB

III.- Lenguaje de Marcado / HTML.

Lenguaje de MarcadoA 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 MarcadoEntretanto, 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.

HTMLEl 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.

HTMLBeneficios 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 HTMLTodos 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 HTMLLos dos componentes principales que ayudan al desarrollo de pginas HTML, son:Editores de HTMLNavegadores WebLos 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

IV.- Etiquetas HTML.

Elementos HTMLEtiquetas.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 , generalmente es cerrada por su contraparte de cierre .Tambin podemos tener etiquetas anidadas, Informacin

Elementos HTMLAtributos.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:

Encabezado centradoEtiquetaAtributoValorTexto Afectado

Programar las Etiquetas

La etiqueta 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:

Nota: Las etiquetas emparejadas encierran algn texto entre ellos, las etiquetas no emparejadas, no requieren una etiqueta de cierre.

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

Programar las Etiquetas

La informacin acerca del documento se especifica en la etiqueta .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 .La etiqueta tambin puede contener otras etiquetas que tienen informacin para los motores de bsqueda y programas de indexado.

Programar las Etiquetas

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.

La etiqueta cubre todas las etiquetas, atributos e informacin que van a aparecer en el navegador del visitante.

Ejemplo del uso de las EtiquetasEstructura de un Documento HTML (Pgina Web)

El Ttulo de la Pgina va aqu.

Todas las etiquetas, atributos e informacin en el cuerpo del documento van aqu.

Otras Etiquetas (Nivel Carcter)Etiquetas de Encabezado. es el ms grande de los encabezados, y el ms pequeo.Encabezado 1Encabezado 2Encabezado 3Encabezado 4Encabezado 5Encabezado 6Etiquetas de Prrafos.

Un prrafo completo va justo aqu

El prrafo de la informacin centrado aqu

Otras Etiquetas

Formato de PrrafoEfectoUtilizado para informacin de direccin y contacto. Aparece en cursiva.Utilizado para formatear entre una comilla. Generalmente aparece indentado en ambos lados y tiene menos espacio entre lneas que un prrafo regular. Aplica Sangra.Efectivo para formatear el texto o informacin similar. Generalmente en un tipo de letra fijo, con amplio espacio entre palabras y lneas.

Otras EtiquetasEtiquetas de Salto de Lnea Hola Hola Hola Hola Hola Hola HolaHola Hola Hola Hola HolaHola Hola Hola Hola Hola Hola Hola

Etiqueta de Formato a Nivel CarcterEste es el comienzo del siguiente prrafo Este es el final del prrafo, se utiliza el atributo negrita de la fuente

Otras Etiquetas

Etiqueta de CarcterEfectoAplica Negrita.Realiza parpadeo de texto, considerado muy antiprofesional. No funciona en Internet Explorer pero en Netscape s.Indica citas o referencias.Muestra cdigo de programa, similar a la etiqueta .Aplica nfasis, generalmente mostrado como cursiva.Aplica Cursiva., Aplica apariencia de tachado al texto.Aplica nfasis ms fuerte, generalmente mostrado como negrita.Presenta el texto como subndice.Presenta el texto como superndice.Aplica un tipo de letra de ancho fijo. (Mquina de Escribir)Aplica subrayado.

Otras EtiquetasEtiquetas de Listas. LI (List Item)Lista No Ordenada (Unordered List):

Productos Chupa Melo C.A. Servicios Marca Gada S.A.

Lista Ordenada (Ordered List):

Caramelitos Chupa Melo Laca Gada 450ml.

Otras Etiquetas (Listas)

AtributoDescripcinStartEste atributo permite iniciar la lista ordenada segn convenga aldiseador de la pgina web. Ejemplo: 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: 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 (Definition List). Cada item de la lista ira precedido de la etiqueta (Definition Term) y su correspondiente definicin ira precedida por la etiqueta (Definition Definition).Ejemplo:

Introduccin Resultado:Breve introduccin al lenguajeLa Primera PginaComo hacer la primera pginaEscribir textoEmpieza a dar formato al texto

Otras EtiquetasSmbolos Especiales

CarcterReferencia de Entidad"&&X/

CarcterReferencia de Entidad&un;

Etiquetas y Atributos de las Fuentes de Caracteres Mira esto chico!

Etiqueta/AtributoDescripcinColoca las caractersticas de la letra para el texto.SIZE=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 .FACE=Especifica las presentaciones del tipo como una lista de posibles presentaciones, en el orden de la preferencia, separado por comas.Ajusta el tamao predeterminado del texto. (El tamao por defecto es 3.)

Otras EtiquetasEtiqueta de Regla Horizontal

Atributo de la ReglaEfectoSIZE=nEspecifica el tamao de la reglaWIDTH=nEspecifica el ancho de la reglaWIDTH=n%Especifica el ancho de la regla (longitud), medido como un porcentaje de ancho del documentoALIGN=LEFTEspecifica alineacin a la izquierdaALIGN=RIGHTEspecifica alineacin a la derechaALIGN=CENTEREspecifica alineacin al centroNOSHADEEspecifica que la regla no tiene sombra

Elementos GrficosColores de Fondo

Bienvenidos a Web Programming!!!

R(Rojo)G(Verde)B(Azul)000000333333666666999999CCCCCCFFFFFF

Elementos GrficosEstablecer Colores de Texto

Web Programming!

AtributoDescripcinTEXT=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

Este es un simple texto que no contiene enlace. Este es un enlace no visitado Este es un enlace visitado

HiperenlacesLos 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:Una etiqueta ancla que marca el texto o imagen como enlace.Un atributo HREF=, que se coloca dentro de la etiqueta ancla de apertura.Una direccin (el URL) que indica a los navegadores a donde enlazarSi el URL del atributo HREF de la etiqueta 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.

HiperenlacesPor ejemplo, considere una pgina http://www.cisco.com/certify/test.html cargada del sitio web de CISCO.La pgina tendr un hiperenlace como

Esto se traduce como http://www.cisco.com/certify/page2.htmlNOTA: ./ se traduce como el directorio actual.

Enlazar a documentos en la misma carpeta. El texto del enlace va aqu

HiperenlacesEnlazar 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:Mainframe servers

HiperenlacesEnlazar a documentos de la Web.Prueba de enlaces

Enlazar a una ubicacin especfica de un documento.Formar ancla de nombre:Aqu va algo

Enlazar a anclas de Nombre. Aqu va algo

Hiperenlaces (Etiquetas Ancla de Nombre)

Desde dentroEl enlace se ve comoEl mismo documentoholaLa misma carpeta, diferente documentoholaEl mismo servidor (diferente carpeta y documento, URL relativo al servidor)holaUn servidor diferente Link

HiperenlacesInsertar Enlaces de Correo Electrnico. Send Feedback

Agregar comentarios en un documento HTML, se utilizan las etiquetas:Atributo clave.

Hiperenlaces (Ejemplo)

Catalogo deProductos

Productos Cisco

Servidores

Servidores MainframeUNIX

Programas

Aplicaciones de DesarrolloGrficas Cont

Multimedia

Groupware

Productivity

www.cisco.com>hola

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

EtiquetaUsoCrea una tabla dentro de un documento HTML.Crea una fila dentro de una tabla.Crea una celda en una fila.Crea una celda de ttulo dentro de una fila

Tablas HTMLCont1era Parte

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

Tablas HTMLExtender Filas y Columnas.

AtributoUsoROWSPAN=nAsignados a las etiquetas o , denota el nmero de filas que se van a extender en una celda. Por ejemplo, ROWSPAN=6, fusiona seis filas.COLSPAN=nUtilizados en las etiquetas o , indica el nmero de columnas que se van a extender en una celda. Por ejemplo, COLSPAN=4, fusiona cuatro columnas.

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

Tablas HTMLAgregar Ttulos (Captions) 8

Etiqueta/AtributoUsoAsignado 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 HTMLAgregar Bordes. 9Crear Bordes de Tablas.

Especificar Tabla sin Borde

AtributoUsoBORDER=nDefine el ancho del borde de la tabla (medido en pixels). BORDER=0 elimina el borde.BORDERCOLOR=#RRGGBBDefine el color del borde como un nmero #RRGGBB o un nombre de color.

Tablas HTMLAplicar Color de Fondo a la Tabla.

Incluir una Imagen de Fondo en la Tabla.

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 HTMLEspecificar 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 HTMLEspecificar 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 HTMLLos 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 HTMLControles 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 HTMLCrear un Formulario y agregar un botn de Submit y de Reset.El primer paso en la creacin de un formulario es insertar la etiqueta dentro de la etiqueta y agregar los botones de Submit y Reset.

Etiqueta/AtributoUsoIndica un formulario dentro de un documento HTML.Agrega un botn Submit al formulario. El atributo Value permite agregar texto en el botn.Agregar un botn Submit grfico. El atributo SRC= especifica el archivo fuente de la imagen.Agregar un botn Reset al formulario.

Formularios HTMLCampos de Entrada General.

Etiqueta/AtributoUsoEspecifica 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=nDefine el mximo nmero de caracteres que el usuario puede ingresar en el campo de entrada.CHECKEDEspecifica 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 HTMLCampos de Texto. Ejemplo 1Botn de Radio. Ejemplo 2Caja de Verificacin. Ejemplo 3Areas de Texto. Ejemplo 4Listas de Seleccin. Ejemplo 5Procesamiento de Formularios. Ejemplo6

AtributoUsoACTION=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.

ImgenesImgenes 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 1Crear Thumbnails. (Miniaturas) Ejemplo 2Usar Imgenes como enlace. Ejemplo 2

ImgenesCrear Mapas de Imagen.

Etiqueta/AtributoUsoUSEMAP=Indica la definicin del Mapa de cliente a utilizar. Atributo de la etiqueta .ISMAPDefine el mapa de imagen del lado del cliente. Atributo de la etiqueta .Define el bloque de definicin de mapa dentro de un documento HTML.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.NOHREFDefine que esta rea no conecta a ningn URL.COORDS=x, yDefine la forma de un rea.ALTEspecifica texto alternativo (o texto emergente pop-up) describiendo el enlace.

Imgenes

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 letrasPropiedades 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/AtributoUsoDefine 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/cssDefine el tipo de hoja de estilos.@import url()Importa una hoja de estilos. El tratamiento es URL (http://mystyles.com/new.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 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. 1Importar Hojas de Estilos. 2Enlazar Hojas de Estilos. 3

Hojas de Estilos (CSS)

Etiqueta/AtributoUsoReferencia a una hoja de estilos.REL=StyleSheetDefine el archivo referenciado en una hoja de estilos.TYPE=text/cssDefine el tipo de hoja de estilos a ser usada.HREF=URLIndica 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 de Estilos a Partes de Documentos. 4

Etiqueta/AtributoUsoContiene atributos de estilos. Los aplica al cdigo HTML entre las etiquetas de apertura y cierre.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=uniqueenProporciona 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/AtributoUsoCualquier Etiqueta HTMLTodas las etiquetas HTML incluyendo 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 ActivoSonidos.

Etiqueta/AtributoDescripcinInserta un objeto incrustado en un documentoDefine el posicionamiento del objeto incrustado, relativo al documento y contenidos circundantesHEIGHT=nDefine la dimensin vertical del objeto incrustadoHIDDENOculta el objeto incrustadoNAME=Nombra el objeto para que otros objetos puedan referenciarloPARAM=Define parmetros adicionalesSRC=URLEspecifica la ubicacin del archivo que contiene el objetoWIDTH=nEspecifica la dimensin horizontal del objeto incrustadoAUTOSTART=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 sonidoLOOP=n, INFINITEDefine el nmero de veces que debe repetirse el sonido de fondo.Especifica la ubicacin relativa o absoluta del archivo de sonido.

Lenguajes ScriptAparte 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.

JavaScriptCaractersticas de JavaScriptJavaScript 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

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

JavaScriptIncrustar el Script.

JavaScriptAgregar un Bloque Script a la Etiqueta .

La Pgina InformativaBienvenidos

JavaScriptEnlazar el Script.

La Pgina Informativa

ETIQUETAS HTML5Etiqueta Esta etiqueta se usa para identificar contenido aparte del contenido en el que se enmarca, pero con el que est relacionado. Veamos un ejemplo:Hemos visitado el Zoolgico de Barquisimeto esta tarde. Zoolgico de BarquisimetoSe trata de un parque zoolgico...

ETIQUETAS HTML5Etiqueta Esta etiqueta nos permite introducir audio en nuestro sitio. Usamos la etiqueta para definir posteriormente la ruta y el tipo de ste:

ETIQUETAS HTML5Etiqueta Es una de las etiquetas ms famosas de HTML5. Se trata de un contenedor donde se permite el dibujo. ste, suele hacer con JavaScript.

VAR CANVAS=document.getElementById('dmCanvas');VAR DM=canvas.getContext('2d');dm.fillStyle='#FF0000';dm.fillRect(0,0,80,100);

ETIQUETAS HTML5Etiqueta 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 , o puede ponerse en cualquier parte de la pgina para definir un atajo de teclado.

Guardar

ETIQUETAS HTML5Etiqueta Especifica una lista de opciones predefinidas para un elemento . 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:

ETIQUETAS HTML5Etiqueta 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:

Etiqueta Define el pie de pgina de un documento. Se puede tener ms de un pie de pgina.Linux Hispano - Software libre

ETIQUETAS HTML5Etiqueta En el sitio contrario, esta etiqueta define la cabecera.

Bievenidos al sitioSomos un grupo de... Resto del sitio...

ETIQUETAS HTML5Etiqueta Define una medida escalar, dentro de un rango conocido. No confundir con la etiqueta que ahora comentaremos.2 de 1060%Etiqueta Define un bloque donde se enmarcan diferentes enlaces de navegacin.

Inicio | Acerca de | Contacta |

ETIQUETAS HTML5Etiqueta Representa el grado de progreso de una tarea:

Etiqueta Casi todos los navegadores la soportan ya. Es una etiqueta equivalente a pero en este caso sirve para emitir vdeo.

ETIQUETAS HTML5

ETIQUETAS HTML5Ejemplo General: Title Header in h1 Subheader in h2

ETIQUETAS HTML5

Menu Option 1 Menu Option 2 Menu Option 3 Article #1 Este es el primer artculo. This is highlighted. Article #2

ETIQUETAS HTML5

Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc. Links Link 1 Link 2 Link 3

ETIQUETAS HTML5

Jennifer Marsman Footer - Copyright 2013

*