Lab01 html.pdf
-
Upload
monique-harvey -
Category
Documents
-
view
34 -
download
0
Transcript of Lab01 html.pdf
-
5/24/2018 Lab01 html.pdf
1/82
Copyright2014EdwinValencia
Copyright2014EdwinValencia
Ingeniera Web
Introduccin a HTML5 / XHTML
-
5/24/2018 Lab01 html.pdf
2/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
3/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
4/82
Copyright2014EdwinValencia
Que es HTML?
El World Wide Web Consortium (http://w3c.org)
establece los estandares para HTML y suslenguajes relacionados
-
5/24/2018 Lab01 html.pdf
5/82
Copyright2014EdwinValencia
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)
-
5/24/2018 Lab01 html.pdf
6/82
Copyright2014EdwinValencia
HTML vs. XHTML vs. HTML5
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/ )
-
5/24/2018 Lab01 html.pdf
7/82
Copyright2014EdwinValencia
HTML vs. XHTML vs. HTML5
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. +
-
5/24/2018 Lab01 html.pdf
8/82
Copyright2014EdwinValencia
HTML vs. XHTML vs. HTML5
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
-
5/24/2018 Lab01 html.pdf
9/82
Copyright2014EdwinValencia
HTML vs. XHTML vs. HTML5
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).
-
5/24/2018 Lab01 html.pdf
10/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
11/82
Copyright2014EdwinValencia
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");
// ...
-
5/24/2018 Lab01 html.pdf
12/82
Copyright2014EdwinValencia
CREANDO UN PRIMER PROYECTO
Requerimientos: Eclipse IDE for Java EE
Glassfish 4.0
-
5/24/2018 Lab01 html.pdf
13/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
14/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
15/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
16/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
17/82
Copyright2014EdwinValencia
DOCUMENTO HTML5
Laboratorio 01
Ttulo de seccin
Texto...
Texto en negrita
Declaracinqueindicaque
eldocumentoesHTML5
-
5/24/2018 Lab01 html.pdf
18/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
19/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
20/82
Copyright2014EdwinValencia
Anatomia de un elemento HTML
Opening tag
contentClosing Tag
La etiqueta de cierre siempre necesita un slashantes del nombre de la etiqueta.
-
5/24/2018 Lab01 html.pdf
21/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
22/82
Copyright2014EdwinValencia
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)
-
5/24/2018 Lab01 html.pdf
23/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
24/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
25/82
Copyright2014EdwinValencia
Etiquetas de cabecera
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:
-
5/24/2018 Lab01 html.pdf
26/82
Copyright2014EdwinValencia
Etiquetas de cabecera
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.
-
5/24/2018 Lab01 html.pdf
27/82
Copyright2014EdwinValencia
Etiquetas de cabecera
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 }
-
5/24/2018 Lab01 html.pdf
28/82
Copyright2014EdwinValencia
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 , , , , , ,
-
5/24/2018 Lab01 html.pdf
29/82
Copyright2014EdwinValencia
Caracteres especiales
Muestra los caracteres especiales como
comillas, simbolo del copyright, etc.
-
5/24/2018 Lab01 html.pdf
30/82
Copyright2014EdwinValencia
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:
-
5/24/2018 Lab01 html.pdf
31/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
32/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
33/82
Copyright2014EdwinValencia
Etiquetas en lnea
Elemento de salto de lnea Etiqueta independienteel 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
-
5/24/2018 Lab01 html.pdf
34/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
35/82
Copyright2014EdwinValencia
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)
-
5/24/2018 Lab01 html.pdf
36/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
37/82
Copyright2014EdwinValencia
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.
-
5/24/2018 Lab01 html.pdf
38/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
39/82
Copyright2014EdwinValencia
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...
-
5/24/2018 Lab01 html.pdf
40/82
Copyright2014EdwinValencia
Estructura de la pagina
Antigua estructuraTtulo de la pginaContenido del post
Contenido del postElementos tpicos del sidebar
Elementos tpicos del footer
-
5/24/2018 Lab01 html.pdf
41/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
42/82
Copyright2014EdwinValencia
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:
-
5/24/2018 Lab01 html.pdf
43/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
44/82
Copyright2014EdwinValencia
Fundamentos de Listas
Definicin de Lista
Lista OrdenadaLista no Ordenada
-
5/24/2018 Lab01 html.pdf
45/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
46/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
47/82
Copyright2014EdwinValencia
Ejemplo de Lista ordenada
Apply to schoolRegister for course
Pay tuition
Attend course
Ej l d Li t d d
-
5/24/2018 Lab01 html.pdf
48/82
Copyright2014EdwinValencia
Ejemplo de Lista no ordenada
TCPIP
HTTP
FTP
Ch k i t
-
5/24/2018 Lab01 html.pdf
49/82
Copyright2014EdwinValencia
Checkpoint
Describe las caracteristicas de una etiqueta de
encabezado y como se configura el texto.
Hiperenlaces Etiqueta
-
5/24/2018 Lab01 html.pdf
50/82
Copyright2014EdwinValencia
Hiperenlaces Etiqueta
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.
Hiperenlaces Etiqueta
-
5/24/2018 Lab01 html.pdf
51/82
Copyright2014EdwinValencia
Hiperenlaces Etiqueta
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
-
5/24/2018 Lab01 html.pdf
52/82
Copyright2014EdwinValencia
Etiqueta
Enlace Absoluto
Enlaza a otros sitios webYahoo
Enlace Relativo
Enlaza paginas de tu propio siteHome
Mas sobre enlace relativo
-
5/24/2018 Lab01 html.pdf
53/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
54/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
55/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
56/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
57/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
58/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
59/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
60/82
Copyright2014EdwinValencia
Tablas Componentes
Tablas
-
5/24/2018 Lab01 html.pdf
61/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
62/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
63/82
Copyright2014EdwinValencia
Fusin de filas y columnas
Nmeros
Nombre
Valor
Idioma
Uno
1
Espaol
Dos
2
Tablas complejas
-
5/24/2018 Lab01 html.pdf
64/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
65/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
66/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
67/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
68/82
Copyright2014EdwinValencia
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
72/82
Copyright2014
Edwin
Valencia
Envanos tus sugerencias por email
Nombre:
Email:
Sugerencia:
Mas ejemplos en http://librosweb.es/xhtml/capitulo_8.html
Objetos
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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"
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
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
-
5/24/2018 Lab01 html.pdf
82/82
Copyright2014
Edwin
Valencia
http://librosweb.es/xhtml/
http://www.w3schools.com/html/html5_intro.asp
http://validator.w3.org/