lab01 html.pdf

5/24/2018 Lab01 html.pdf

1/82

Copyright2014EdwinValencia


Ingeniera Web

Introduccin a HTML5 / XHTML


2/82


Resultados del aprendizaje

En este capitulo, aprenderas acerca de:

Sintaxis HTML/XHTML, tags, y definiciones detipos de documento

La anatomia de una pagina web

Formatear el cuerpo de una pagina web

Formatear el texto de una pagina web

Manejo de caracteres especialesConectar paginas web usando hiperenlaces


3/82


Que es HTML?

HTML (HyperText Markup Language) Conjunto de codigos o simbolos de marcado

colocados en un archivo destinado para visualizar enun navegador de paginas web

Permite describir el contenido de una pgina,

incluyendo texto y otros elementos (imgenes,videos, pequeas aplicaciones, etc.)

Una pgina HTML consta de texto y marcasespeciales que permiten indicar algn tratamientoespecial (estructura, formato, hiperenlace, etc.)

Las marcas se indican en formato


4/82


Que es HTML?

El World Wide Web Consortium (http://w3c.org)

establece los estandares para HTML y suslenguajes relacionados


5/82


HTML vs. XHTML vs. HTML5

HTML: Lenguaje original Basado en SGML (Standard Generalized Markup Language)

Es casi un lenguaje XML, pero tiene elementos nocompatibles con XML

Empieza a cobrar fuerza la idea de no mezclar marcado deestructura (tabla, seccin, encabezado, etc.) con marcadode presentacin (fuente, color, alineamiento, etc.)

HTML 4.01: ltima versin publicada de HTML Dos modos:

Strict: no permite marcado de presentacin

Transitional: permite marcado de presentacin (center, font,align, bgcolor, )

Framesets:

Primera incorporacin al estndar de la etiqueta

(aunque ya se usaba comnmente en Netscape)


6/82



XHTML: versin basada en XML de HTML 4.01 Compatibilidad con otros documentos XML

Combinar con otros documentos en lenguajesbasados en XML, XForms, MathML, SMIL, SVG, etc.)

Usar herramientas (XSLT)

XHTML es ms estricto que HTML

Exige que los documentos estn bien formados(requisito de XML)

Se pueden validar con http://validator.w3.org/ o con

HTML Tidy http://www.w3.org/People/Raggett/tidy/ Hay herramientas que permiten pasar de HTML aXHTML

Por ejemplo, el navegador Amaya

(http://www.w3.org/Amaya/ )


7/82



XHTML separa claramente contenido y presentacin XHTML Strict obliga a que la asignacin del formato de presentacin se haga

de manera separada mediante hojas de estilo CSS

Esta separacin tiene ventajas: La gestin del estilo de todo el sitio web est localizada en un punto

concreto: las hojas de estilo

Es posible modificar todo el estilo del sitio (manteniendo sucoherencia) sin editar todas sus pginas

Se pueden tener varios estilos definidos para el mismo sitio web Los usuarios de un sitio web pueden seleccionar el conjunto de

colores y estilos (tema) del sitio web

Soporte a la navegacin desde mltiples dispositivos, adaptando laspginas a sus caractersticas (tamao de pantalla, etc.)

Contenido

+

Formato

(HTML)

Contenido

(XHTML)

Formato

(CSS)vs. +


8/82



Al estar basado en XML, XHTML permite integrarfcilmente otros lenguajes de la familia XML

Mayor extensibilidad XHTML tiene reglas ms simples para definir la

estructura de un documento

Por ejemplo: todos los elementos tienen que estarbien anidados y tener siempre la etiqueta de cierre

Menos recursos para procesar los documentos

Ventaja para hacer navegadores ms eficientes


9/82



HTML5: Evolucin de XHTML y HTML 4.01

Es el estndar vigente

XHTML 2.0 ha sido abandonado

Desarrollado por el WHATWG, adoptado por el W3C Participacin de Opera, Mozilla, Apple (actualmente)

Un paso ms

Construye sobre 'strict'; acaba con 'frameset' y 'transitional

"Estndar viviente": W3C publica, pero WHATWG no para deaadir

Aaden cosas y recomiendan no usar otras, pero quitan poco onada

HTML5 vs. XHTML5 "Un estndar, dos formas de escribir

La recomendacin vigente es codificar en HTML5 (la transicinhacia navegadores optimizados para XML puro no hafuncionado).


10/82


HTML Y XHTML

Versiones

HTML 4.01 (1999)

http://www.w3.org/TR/html401/

XHTML 1.0 (2000, revisado en 2002) http://www.w3.org/TR/xhtml1/

XHTML 1.1 (2001)

XHTML Basic 1.1 - Second Edition (2010)

http://www.w3.org/TR/xhtml-basic/ XHTML 1.1 - Module-based XHTML - Second Edition (2010)

http://www.w3.org/TR/xhtml11/

HTML5 est en proceso de estandarizacin

Publicacin oficial en 2014 Casi todos los navegadores soportan casi todas sus

caractersticas

Pero no todos: http://www.caniuse.com


11/82


DOM

Definido por W3C

Modelo de Objetos del Documento (Document Object Model)

DOM define objetos y propiedades de los elementos HTML y XML, y los

mtodos para acceder a ellos Representacin de documentos HTML y XML

API para consultar y manipular los documentos (contenido, estructura,estilo)

Los objetos de un documento se organizan en una jerarqua (rbol):

jerarqua DOM

var elemento=document.getElementById("intro");

var cabecera=document.getElemnentByTag("title");

// ...


12/82


CREANDO UN PRIMER PROYECTO

Requerimientos: Eclipse IDE for Java EE

Glassfish 4.0


13/82


Algunas recomendaciones

Una pgina Web involucra muchos ficheros

Estructurar adecuadamente los ficheros en directorios

En el raz, index.html, index.xhtml o index.php

/img /res

etc.

Nombrar los ficheros sin caracteres extraos, ni espacios, etc. para mayorcompatibilidad entre sistemas operativos (Windows, Unix)

Ser consistente en el uso de la extensin de los ficheros: .html o .xhtml Para imgenes

Utilizar formatos estndar (PNG o JPEG) mejor que propietarios (GIF)

Comprobar que se adecan al tamao de la pantalla

Comprobar que su tamao es moderado

En general, comprobar que la pgina se ve correctamente con todos suscomponentes remotamente

Pudiera haber referencias absolutas a ficheros locales en vez de relativas


14/82


Fichero inicial

La configuracin del servidor permitedeterminar el fichero que se enviar cuando

se recibe una peticin genrica (del tipohttp://www.dominio.com) index.html

index.xhtml index.php


15/82


Sintaxis XML

Un documento XML debe estar bien formado.

Utilice minusculas Utilice etiquetas (tags) de apertura y cierre

Cierra las etiquetas independientes con una sintaxisespecial


16/82


Documento XHTML

Ttulo del documento

Ejemplo de documento XHTML

Opcional,declaracinXML

queindicaeljuegode

caracteresdeldocumento

TipodedocumentoyURL

delaDTD(definicinde

tipodedocumento)que

especificalaversindel

lenguajedeetiquetas

utilizadoeneldocumento

Elatributoxmlns especificael

espaciodenombresdel

documento

Lasetiquetasproporcionan

informacinsobreeldocumentoalos

programasqueanalicenlapgina


17/82


DOCUMENTO HTML5

Laboratorio 01

Ttulo de seccin

Texto...

Texto en negrita

Declaracinqueindicaque

eldocumentoesHTML5


18/82


Secciones Head & Body

Seccin head

Contiene informacin

que describe eldocumento de lapagina web

Seccin bodyContiene texto yelementos que sevisualizan en el

documento de lapagina web


19/82


Etiquetas

Las etiquetas van emparejadas: texto

Introduccin Algunas etiquetas pueden ir sin emparejar:

HTML permite que las etiquetas sin emparejar nolleven cierre (/)

En HTML las etiquetas se pueden escribir enmaysculas o minsculas, indistintamente

En XHTML se tienen que escribir siempre enminsculas


20/82


Anatomia de un elemento HTML

Opening tag

contentClosing Tag

La etiqueta de cierre siempre necesita un slashantes del nombre de la etiqueta.


21/82


COMENTARIOS

Texto que ignora el navegador

Los comentarios pueden estar insertados en cualquier lugar de lapgina webNormalmente se usan para:

Marcar el comienzo y el final de las secciones de las pginas

...

Incluir notas para otros diseadores

Incluir explicaciones sobre el cdigo de la pgina


22/82


Atributos

Los atributos siempre van dentro de la etiqueta de

aperture, se especifican como pares atributo="valor"

contenido Las etiquetas pueden tener multiples atributos, cada unoseparado por un espacio.

En XHTML el valor siempre tiene que ir entre comillas(en HTML no es obligatorio)


23/82


Elementos HTML

Elementos de nivel superior: html, head, y body

Elementos Head: titulo, meta y scriptElementos Body:

Elementos a nivel de Bloque: toman el texto

etiquetado y los separan del resto del flujo deldocumento

Elementos en linea: ellos se pueden anidar encualquier lugar dentro de un nivel de bloque


24/82


Etiquetas de cabecera

Delimita la cabecera del documento

En la cabecera se describe informacin deldocumento (titulo, meta-informacin, scripts, estilos)

Indica el titulo del documento

Es obligatoria y tiene que aparecer una y solo una vez en eldocumento

El navegador lo visualiza en la barra de titulo de su ventana

Enlace a otros archivos (generalmente hojas de estilo)

Indica una URI que sirve de referencia para direcciones relativas


25/82



Metadatos

Metainformacin sobre el documento (informacin procesable automticamente por

programas que analicen la pgina) Normalmente se usan los atributos name (para definir un tipo de metadato) y content

(para definir el valor)

Algunos habituales:


26/82



Permite incluir cdigo de script

Aunque por defecto se toma JavaScript, conviene especificarlo

Puede referirse a un fichero externo

Indica un mensaje a mostrar en navegadores que no puedenprocesar

//

Esta pgina requiere el uso de JavaScript.Por favor compruebe la configuracin de su navegador.


27/82



Permite definir propiedades que se aplicarn a lo largo del documento

Generalmente se indica la hoja de estilo que se va a aplicar

O propiedades del documento: Fuente del texto: font-family: fuente (Arial, Times, Verdana, etc.)

Tamao del texto (en puntos pt-): font-size: 10pt, 12pt, ...

Color del texto: color: rgb(r,v,a) o #RRVVA

r,v,a: cantidad de rojo, verde y azul, 0..255 cada uno

RR,VV,AA: en hexadecimal, 00..FF cada uno

Ajuste del texto: text-align: ajuste (left, right, center o justify)

Indentado de la primera lnea: text-indent: espacio

Margen izquierdo: margin-left: espacio

Margen derecho: margin-right: espacioP { fontfamily: Arial; fontsize: 10pt; color: rgb(0,0,128);textindent: 15px; textalign: justify; marginleft: 10px }


28/82


Texto

El texto de un documento debe estar contenido por alguna de lasetiquetas de una de las tres categoras siguientes:

Etiquetas de bloque: no necesitan estar contenidas dentro de

ninguna etiqueta (salvo y )

Etiquetas en-lnea: se aplican a una parte de texto dentro de unbloque

Salto de lnea

Tipo de informacin

Elemento carcter

Etiquetas de contenedores de texto: sirven para estructurar el

texto y pueden contener en su interior etiquetas de bloque Bloque de cita:

Divisin , , , , , ,


29/82


Caracteres especiales

Muestra los caracteres especiales como

comillas, simbolo del copyright, etc.


30/82


Codificacin de caracteres

Acentos y letras especiales:

Lo mejor es declarar el uso de caracteres UTF-8 para que se veanbien los acentos y letras como la

Hoy da la mayora de los navegadores interpretan bien UTF-8 En ocasiones, sin embargo, algunas herramientas no lo

interpreten bien, y convierten el texto a ISO-8859 y habraproblemas

Para evitar problemas es recomendable usar codificacin:


31/82


Etiqueta de bloque - Parrafos

Elemento Parrafo

el parrafo va aqui

Agrupa sentencias y secciones de texto juntas.

Configura una linea en blanco por encima y por debajo de un parrafo.

Si un prrafo

no contiene nada, no se muestra (salvo que la hojade estilo incluya bordes o mrgenes)

En XHTML el estilo del prrafo (alineacin, tipo de letra, etc.) se debedeclarar en los ficheros de estilo

En HTML se permite en la propia etiqueta, pero no es aconsejable

Centrado

Alineado a la derecha

Texto preformateado: igual que

pero se tienen en cuenta espacios

en blanco y lneas en blanco

Se usa un tipo de letra de ancho fijo


32/82


Etiquetas de bloque Secciones

Encabezado (de nivel 1 a 6)

Seccin 1Seccin 1.1

Texto normal.

Seccin 1.1.1

Texto normal.
...
Informacin de contacto del autor de la pginaAutor: Edwin Valencia Castillo (UNC)

ltima modificacin: 12 de abril de 2014


33/82


Etiquetas en lnea

Elemento de salto de lnea Etiqueta independiente

el texto va aqui
Este inicia en una nueva linea.

Hace que el elemento siguiente o texto se muestre e un nueva linea

Espacio en blanco

Cuando se usa la etiqueta se mantienen losespacios en blanco

Lnea horizontal (horizontal rule)

Se usa cada vez menos ya que con CSS se pueden crear

mejor los bordes


34/82


Etiquetas en lnea

Importancia del texto

Para resaltar una porcin de texto dndolenfasis (aparecer en cursiva)

Ms recomendable que

Mayor nfasis que con (apareceren negrita)

Ms recomendable que


35/82


Etiquetas en lnea

Tipo de informacin

Abreviaturaetc.

UNC

Para incluir una referencia o cita (aparecer encursiva)

Como dice el refrn,

A la tercera va la vencida.

Definicin de un trmino (aparecer en cursiva)


36/82


Etiquetas en lnea

Tipo de informacin

Parecido a (pero es un elemento delnea y un elemento de bloque)

Fragmento de cdigo de programa (aparecer enletra monospace)

main() { printf ("Hola, mundo"); }

salida producida por un programa

texto a introducir por el usuario


37/82


Etiquetas en lnea

Para indicar edicin del texto

Para mostrar que se elimina un texto (aparecertachado)

Para mostrar que se ha insertado un texto(aparecer subrayado)

La nota final es suspenso

aprobado.


38/82


Etiquetas en lnea

Elemento caracter

Estas etiquetas estn en su mayora no recomendadas, yaque pueden conseguirse sus efectos utilizando las

propiedades correspondientes de las hojas de estilo para etiquetar texto en negrita: Texto en negrita

para etiquetar texto en itlica: Texto en itlica

para etiquetar texto de menor tamao

para identificar texto en subndice:H2O H2O

para identificar texto en superndice:

xn xn

Estas etiquetas existan en HTML, pero han sido eliminadasde HTML5.

para etiquetar texto de mayor tamao

para etiquetar texto de fuente de espaciado fijo


39/82


Etiquetas de contenedores de texto

Para incluir una cita larga, que puede contener varios prrafos u

otras etiquetas

Se suele mostrar el texto dentro de esta etiqueta con mrgenesa izquierda y derecha

Lo mejor es definir el formato deseado en la hoja de estilo

Se puede indicar el origen de la cita con el atributo cite

El candidato a la presidencia fue locuaz en su discurso:

Prometo que voy a respetar los servicios sociales, naturalmente.

Miente quien infunda alguna sospecha al respecto.

Y bla bla bla...


40/82


Estructura de la pagina

Antigua estructuraTtulo de la pginaContenido del post

Contenido del postElementos tpicos del sidebar

Elementos tpicos del footer


41/82


Antigua estructura

Divisin: mecanismo ms importante para agrupar diversos

elementos de bloque (prrafos, encabezados, listas, tablas,divisiones, etc.)

El formato hay que definirlo en una hoja de estilo

Una divisin no puede insertarse dentro de una etiqueta en-lnea

(,, etc.) o de un bloque de texto (prrafo

,encabezado ... , direccin , pre-formateado , lista, etc)

Pero s puede insertarse dentro de una tabla, de un bloquede cita o de otra divisin

Con CSS se puede luego definir la posicin de los distintoselementos

Ver captulo de CSS


42/82


Estructura de la pagina

Nueva estructura en HTML5

Ttulo de la pginaContenido del post

Contenido del post

Elementos tpicos del sidebar

Elementos tpicos del footer

Etiquetas similares a pero consignificados ms especficos:


43/82


Agrupacin de texto

Se usa para dar formato con la hoja de estilo a un grupo de elementos

en lnea seguidos dentro de un mismo bloque (por ejemplo, varias

palabras seguidas en un prrafo) Se suele asociar a clases definidas en un fichero de estilos (.css)

Archivo.css

span.feroz {

fontstyle: italic;

extdecoration: underline; }

span.rojo {

color: red;

}

Archivo.html(incluyeal.css)

Andaba sola

Caperucita Roja

y se encontr al lobo

feroz


44/82


Fundamentos de Listas

Definicin de Lista

Lista OrdenadaLista no Ordenada


45/82


Definicin de Lista

Se usa para visualizar una lista de terminos ydefiniciones o una lista de FAQ y respuestas: tag

Contiene la definicion de la lista

tag

Contiene un termino definidoConfigura un salto de linea por encima y debajo deltexto

tagContiene una descripcion o definicion de datos identael texto

Li t d d


46/82


Lista ordenada

Transmite informacion en una forma ordenada

Contiene la lista ordenada

Determina el tipo de atributo del esquema de

numeracion de la lista, por defecto son numeros Contiene un elemento de la lista

Ej l d Li t d d


47/82


Ejemplo de Lista ordenada

Apply to schoolRegister for course

Pay tuition

Attend course

Ej l d Li t d d


48/82


Ejemplo de Lista no ordenada

TCPIP

HTTP

FTP

Ch k i t


49/82


Checkpoint

Describe las caracteristicas de una etiqueta de

encabezado y como se configura el texto.

Hiperenlaces Etiqueta


50/82



El elemento de anclaje

Especifica la referencia de un hiperenlace (href) a unarchivo

El texto entre y se visualiza en la paginaweb.

Contact Us Atributo href

Indica el nombre del archivo o URL

Documento de pagina web, foto, pdf, etc.



51/82



El URL puede constar de Protocolo (http://)

Servidor (www.ucm.es) Ruta (/info/cursos)

Consulta (?curso=web)

Seccin (#segunda)http://www.unc.edu.pe/info/cursos?curso=web#segunda

Etiqueta


52/82


Etiqueta

Enlace Absoluto

Enlaza a otros sitios webYahoo

Enlace Relativo

Enlaza paginas de tu propio siteHome

Mas sobre enlace relativo


53/82


Mas sobre enlace relativo

Enlaces relativos de lapagina de inicio:index.html

Contact

Collars Home Dog Bathing

Abrir un enlace en una nueva ventana del


54/82


navegador

El atributo target en el elemento de anclaje

abre un enlace en una nueva ventana opestaa nueva del navegador.

Yahoo!

Enlaces XHTML a identificadores de fragmentos


55/82


Enlaces XHTML a identificadores de fragmentos

Un enlace a una parte de una pagina web

Tambien se llaman fragmentos nombrados, identificadospor un identificado (id)

Dos componentes:1. El elemento que identifica el fragmento nombrado de una

pagina web. Este requiere el atributo id. ..

2. La etiqueta de anclaje que enlaca el fragmento

nombrado de una pagina web. Este usa el atributo href.Back to Top

Observe el uso de # en la etiqueta de anclaje!

Checkpoint


56/82


Checkpoint

Explicar cuando utilizar en enlace absoluto. Es

el protocolo http usado en el valor href?Explicar cuando usar un enlace relativo. Es el

protocolo http usado en el valor href?

Imgenes


57/82


Imgenes

Inserta una imagen de mapa de bits (de algn archivo aparte)

JPEG (Joint Photographic Experts Group): muy buena compresin

PNG (Portable Network Graphics): comprensin sin prdida de calidad GIF (Graphics Interchange Format): imgenes animadas, pero menos

calidad

Atributos

src: camino absoluto o relativo a la imagen desde la pgina web

alt: texto que debe mostrarse si la imagen no est disponible title: (opcional) texto que se muestra en forma de "tip" (cuadrito amarillo que

aparece cuando se sita el ratn encima de la imagen)

width y height: (opcionales) anchura y altura de la imagen

Es conveniente usar estos atributos porque permite al navegador

reservar espacio para la imagen mientras se carga

El escudo de mi universidad:

Ejercicio


58/82


Ejercicio

Prueba varios tipos de enlaces en una pgina web Para enviar un mensaje de correo electrnico

Buzn de sugerencias

Explora cmo se puede hacer para que el mensaje vaya conun asunto (subject) concreto

Tambin cmo se podra hacer que el email empezara conun texto de ejemplo

Cmo se hara para poner la direccin de correo como unaimagen en vez de como texto (y evitar as sucumbir al spam)

Para ir al principio de una pgina

Inicio

Cmo se puede hacer para poner un enlace que permita bajarun fichero mediante ftp

Ms ejemplos en:http://librosweb.es/xhtml/capitulo_4/ejemplos_de_enlaces_habituales.html

Tablas


59/82


Tablas

Permiten presentar informacin tabular, enfilas y columnas, con cabeceras

Cada elemento de la tabla puede ser simple oa su vez ser otra agrupacin de filas y decolumnas, cabeceras y pies de tabla,

subdivisiones, cabeceras mltiples y otroselementos complejos Esto ha dado lugar a que a veces se usan para

estructurar la pgina, lo cual no es en absolutorecomendable

Tablas Componentes


60/82


Tablas Componentes

Tablas


61/82


Define una tabla

Atributos

border en pxeles width anchura de la tabla en pxeles o en porcentaje del espaciohorizontal del elemento padre

cellspacing espacio entre el borde de la celda y su contenido

cellpadding espacio entre celdas o entre celda y borde de tabla

summary aporta informacin sobre el contenido de la tabla (paradispositivos que no la pueden visualizar, por ejemplo)

Leyenda de la tabla: texto opcional que se muestra fuera de la

tabla (por defecto, arriba) Se suele poner a continuacin de

No puede incluir prrafos ni otros elementos de bloque, aunque setiquetas en lnea (, , etc.)

Tablas sencillas


62/82


Una tabla sencilla se define con La etiqueta

A continuacin se definen las filas, con (table row) Y para cada fila, los elementos con (table data cell)

Algunas celdas se usan como cabeceras de fila ocolumna: (table header)

Aunque se pueden utilizar en cualquier celda Se muestran resaltadas (normalmente, en negrita y

centradas en horizontal)

Se pueden agrupar celdas

En una fila con el atributo colspan

En una columna con el atributo rowspan

Tablas sencillas


63/82


Fusin de filas y columnas

Nmeros

Nombre

Valor

Idioma

Uno

1

Espaol

Dos

2

Tablas complejas


64/82


p j

Pueden comenzar con una cabecera (opcional y comomucho una)

Pueden acabar con un pie (opcional y como mucho uno) Se declara antes de los

Tienen al menos un cuerpo

Agrupa filas

Se pueden agrupar columnas:

para asignar los mismos atributos a varias columnas

para agrupar de forma estructural variascolumnas

El atributo span indica el nmero de columnas

http://librosweb.es/xhtml/capitulo_7/tablas_avanzadas.html

Formularios


65/82


Conjunto de controles que permiten al usuario interactuar

Generalmente para introducir datos y enviarlos al servidorweb

El navegador enva nicamente los datos de los controlescontenidos en el formulario

En una misma pgina puede haber varios formularios queenven datos al mismo o a diferentes agentes

Ejemplo:Formulariomuysencillo

Escribe tu nombre:

Formularios


66/82


Dentro de un formulario puede haber:

Cualquier elemento tpico de una pgina web

Prrafos, imgenes, divisiones, listas, tablas, etc.

Controles de formularios

Estructura de formularios

Informacin para accesibilidad permite mejorar la accesibilidad de los controles

Controles avanzados (slo HTML5)

, ,

Formularios atributos de


67/82


action="URL": aplicacin del servidor que procesar los datos remitidos (porejemplo, un script de PHP)

method: mtodo HTTP para enviar los datos al servidor

GET: como aadido a la direccin indicada en el atributo action

Limitado a 500 bytes Los datos enviados se aaden al final de la URL de la pgina y por tanto se

ven en la barra del navegador

Se suele usar cuando se enva informacin que no modifica el servidor (porejemplo, trminos para una bsqueda)

Si no se especifica, los navegadores suelen hacer GET POST: en forma separada

Puede enviar ms informacin

Permite enviar ficheros adjuntos

Los datos enviados no se ven en la barra del navegador

Se suele usar cuando se enva informacin que puede modificar el servidor

enctype: Tipo de codificacin al enviar el formulario al servidor

"application/x-www-form-urlencoded" o "multipart/form-data"

Slo se indica cuando se adjuntan archivos

Formularios


68/82


type = "text | password | checkbox | radio | submit | reset | file | hidden | image |

button" - Indica el tipo de control que se incluye en el formulario

name = "texto" - Nombre del control (para que el servidor pueda procesar el

formulario) value = "texto" - Valor inicial del control

size - Tamao inicial del control (en pxeles, salvo para campos de texto y depassword que se refiere al nmero de caracteres)

maxlength = "numero" - Mximo tamao de texto y de password

checked = "checked" Opcin preseleccionada para los controles checkbox yradiobutton

disabled = "disabled" - El control aparece deshabilitado y su valor no se enva alservidor junto con el resto de datos

readonly = "readonly" - El contenido del control no se puede modificar

src = "url" - Para el control que permite crear botones con imgenes, indica la URL de la imagen que se emplea como botn de formulario

alt = "texto" - Descripcin del control

Formularios


69/82

Copyright2014

Edwin

Valencia

Cuadro de textoNombre

Se enviar al servidor cuando se pulse un botn de enviar El nombre asignado en name tiene que concordar con el que se use enla aplicacin en el servidor

No se deben utilizar caracteres problemticos en programacin(espacios en blanco, acentos y caracteres como o )

value permite establecer un valor inicial en el cuadro de texto

ContraseasContrasea

Igual que el cuadro de texto por el valor introducido no se ve

Formularios


70/82

Copyright2014

Edwin

Valencia

Cuadro de texto de varias lneas

filas: nmero de filas visibles (sale una barra de

desplazamiento si se hay ms) columnas: anchura en caracteres

Nombre

Contenido inicial del cuadro de texto

Formularios


71/82

Copyright2014

Edwin

Valencia

Botn de envo de formulario

El navegador se encarga de enviarautomticamente los datos cuando el usuariopincha el botn

Botn de reseteo de formulario

El navegador borra toda la informacinintroducida y muestra el formulario en su estadooriginal

Ejemplo de un formulario


72/82

Copyright2014

Edwin

Valencia

Envanos tus sugerencias por email

Nombre:

Email:

Sugerencia:

Mas ejemplos en http://librosweb.es/xhtml/capitulo_8.html

Objetos


73/82

Copyright2014

Edwin

Valencia

Es una forma genrica de incluir elementos que soninterpretados por algn plugin

Atributos: data="URL" - Los datos que utiliza el objeto

type="tipo-mime" - Tipo de contenido de los datos

El navegador decidir el plugin o accin quecorresponda en funcin del tipo

height="alto" y width="ancho"

classid, codebase, codetype - Informacin especficaque depende del tipo de objeto

Objetos


74/82

Copyright2014

Edwin

Valencia

Recursos que podemos aadir mediante Imgenes

Aunque es preferible usar Vdeos

Archivos de sonido

Applets de Java

En HTML se usaba la etiqueta , que desaparece enHTML5

Archivos PDF

Controles ActiveX

Si el navegador no sabe abrir el contenido, solicitaral usuario que descargue un plugin para ejecutar.

Objetos


75/82

Copyright2014

Edwin

Valencia

Se pueden proporcionar alternativas para un objeto

Si el navegador no soporta ningn formato, mostrar un texto

>

Aqu debera haberse visto una pelcula interesante.

Cualquier texto que no sea una etiqueta se mostrarsi el navegador no es capaz de reproducir elcontenido.

Objetos


76/82

Copyright2014

Edwin

Valencia

Para incluir vdeos en formato Flash

Un ejemplo de como incluir un video de YouTube

Aaron Swartz keynote "How we stopped SOPA"


77/82

Copyright2014

Edwin

Valencia

Para incluir vdeos en HTML5

Tu navegador no puede mostrar el vdeo.

Para incluir sonidos en HTML5

Tu navegador no puede reproducir el sonido.

Cuestiones importantes: El navegador reproducir el primer vdeo compatible

Si no puede reproducir ninguno, mostrar el texto que no estincluido en ninguna etiqueta

Videos o sonidos en HTML5


78/82

Copyright2014

Edwin

Valencia

Cuestiones importantes: El navegador reproducir el primer vdeo/sonido compatible

Si no puede reproducir ninguno, mostrar el texto

No todos los navegadores soportan los mismos Chrome

Sonido: MP3, WAV, OGG Video: H.264+AAC, VP8+Vorbis, OGG

Firefox

Sonido: WAV, OGG (MP3 slo en Windows) Video: VP8+Vorbis, OGG (H.264 slo en Windows)

Internet Explorer Sonido: MP3 Video: H.264+AAC

Safari Sonido: MP3 Video: H.264+AAC

Internet Explorer y Firefox sonmutuamente excluyentes, por lo quesiempre ser necesario ofrecer ms

de una alternativa.

Videos o sonidos en HTML5


79/82

Copyright2014

Edwin

Valencia

Para incluir archivos de texto en vdeos o sonidos

Subttulos, metadatos, descripciones, anotaciones, etc.

Slo es compatible con Internet Explorer, Chrome y Opera.

Escribiendo HTML vlido


80/82

Copyright2014

Edwin

Valencia

Verifica tu codigo de errores de sintaxis Beneficios:

Codigo valido -> visualizacion en el navegador conmayor consistencia

Herramienta de validacionW3C HTML http://validator.w3.org

Resumen


81/82

Copyright2014

Edwin

Valencia

Este capitulo proporciona una introduccion aHTML, XHTML,HTML5

Se inicio con una introduccion a HTML, sediscutio la transicion a XHTML, se continuo conla anatomia de una pagina web, se introdujo elformateo a nivel de bloque y en linea, y sedemostro las tecnicas XHTML usadas paracrear hipervinculos y los cambios con HTML5

Utilizar estas habilidades para crear suspaginas web.

Recursos adicionales


82/82

Copyright2014

Edwin

Valencia

http://librosweb.es/xhtml/

http://www.w3schools.com/html/html5_intro.asp

http://validator.w3.org/

lab01 html.pdf

Documents