1 Curso de HTML5-CCS-Javascript

2 Temario 1. Conceptos básicos Historia HTTP, HTML, URLServidor, página, archivo, hipertexto, hipermedia

3 Temario (cont.) 2. HTML Elementos Estructuras Estructuras y estilosFormato básico Ligas Imágenes Tablas Formularios Audio y Video Canvas

4 Temario (cont.) 3. Hoja de estilos en cascada CSSDefinición interna de estilos Definición externa de estilos Precedencia Principios Pseudo clases y pseudo elementos Propiedades de tipografía, color y texto Propiedades de caja Propiedades de clasificación y unidades

5 Conceptos básicos

6 Conceptos básicos Historia HTML HTTP URL Servidor Página HipertextoHipermedia

7 Historia de HTML, finales de los 60’sMuchos sistemas de IBM eran incompatibles entre sí Lenguajes de control Representaciones (formatos de archivo) IBM encarga a Charles Goldfarb crear un sistema para documentos legales Almacenamiento Búsqueda Gestión Edición

8 Historia de HTML (cont.)Charles Goldfarb, Ed Mosher y Ray Lorie Los programas debían soportar representación genérica de documentos El formato común, específico de documentos legales Los documentos deben seguir algunas normas, para que las computadoras trabajen en forma fiable

9 Historia de HTML (cont. )1969: Surgió el Lenguaje de Marcado Generalizado GML 1974: Analizador de validación, para leer la definición de un tipo de documento 1986: Lenguaje Estandarizado y Generalizado de Marcado SGML Estándar ISO 8879

10 Historia de HTML (cont.)1989: Tim Berners-Lee propone compartir información en CERN utilizando hipertexto Anders Berglund, usuario de SGML, propuso adoptar una sintaxis semejante Desarrollaron el Lenguaje de Marcado de Hipertexto HTML a partir de la norma SGML El sistema propuesto fue denominado World Wide Web Heredó algunas virtudes de SGML: Es muy general Fácil de editar

11 Historia de HTML (cont.)Es diferente de SGML en que: Utiliza una serie fija de tipos de elemento No es extensible, no puede adecuarse a ciertos tipos de documento No ha acabado de definirse desde su invención Cuando HTML dispuso de una DTD formal, ya habían millones de páginas con HTML erróneo

12 Historia de HTML (cont.)El tipo fijo de documento incomoda a muchas personas Surgieron extensiones incompatibles del lenguaje

13 Historia de HTML (cont.)Tim Berners-Lee: Consorcio de la Web Mundial Hojas de estilo en cascada CSS Posibilidad de añadir abstracciones arbitrarias a HTML Nueva subserie de SGML: Lenguaje de Marcado extendido XML Principales ventajas de SGML Sencillez de la Web XHTML: HTML definido en términos de XML HTML4: Mucho tiempo para consolidar, y para observar tendencias y necesidades de cambio.

14 Conceptos básicos HTTPProtocolo simple de transferencia de documentos e información del Web Se realiza la conexión El cliente solicita un documento Nombre Directorio El servidor localiza el documento y lo envía al cliente Se cierra la comunicación

15 Conceptos básicos HTTP

16 Conceptos básicos HTML Lenguaje de descripción de documento hipertextoPermite la definición de ligas que conducen a otros documentos Locales Remotos Permite la inclusión de elementos de formato y multimedia

17 Conceptos básicos Localizador Universal de Recursos URLLos documentos en el Web son recursos Páginas Imágenes Sonidos Pueden estar en diferentes: Directorios Computadoras Redes locales Dominios Países El URL establece una referencia completa

18 Conceptos básicos URL http://www.utm.mx/~zarza/index.html protocolodirectorio servidor archivo dominio extensión

19 Conceptos básicos Formas de URL, basados en HTTP /~zarza/index.html pato.html aves/pato.html aves

20 Conceptos básicos Otras formas de URL ftp://ftp.utm.mx news:comp.sys.mac gopher://gopher.utm.mx

21 Conceptos básicos Servidor de Web Navegador (cliente)Programa que corre en una computadora conectada en la red que soporta el protocolo HTTP para entregar páginas a los clientes Prácticamente cualquier computadora que se pueda conectar a la red puede contener un servidor Navegador (cliente) Programa que utiliza el usuario para visualizar (reproducir) contenidos alojados en los servidores. Internet Explorer (Microsoft) Firefox (Mozilla) Chrome (Google) Etc.

22 Conceptos básicos PáginaArchivo escrito en HTML para presentar información Puede contener ligas a otras páginas, o en general, a cualquier URL Puede ser ubicada en un servidor, y tener un URL asociado para ser referenciado desde cualquier parte de la Internet

23 Conceptos básicos Hipertexto Hipermedia=hipertexto+multimediaSistema contenedor de documentos de texto que incluyen referencias que conducen a otros textos relacionados con el texto indicado en la referencia Hipermedia=hipertexto+multimedia Sistema hipertexto con soporte a diversos medios, como imágenes, video, animaciones y sonidos

24 Entrando en materia con el lenguajeHTML Entrando en materia con el lenguaje

25 HTML: elementos Documento HTML Marcas Elementos HTMLEstá conformado por marcas y texto plano. Marcas Describen el contenido del documento Elementos HTML Es todo lo que se encuentra desde el inicio de una marca y su cierre, incluyendo texto Ejemplo:

Esto es un párrafo

26 HTML: elementos Estructura de página HTML

Un título

27 HTML: elementos Marcas Delimitadoras Puntuales Puntuales tipo XHTMLcontenido Puntuales Puntuales tipo XHTML Con argumentos o parámetros contenido

28 HTML: elementos Los parámetros son datos necesarios que modifican el comportamiento del elemento Algunos parámetros son obligatorios, el elemento no tendría sentido si no se definen Otros son optativos Parámetros para identificación: Class indican a qué clase pertenecen, para ajustes por grupo Id Indican una identidad única al elemento, para ajustes individuales

29 HTML: elementos Páginas bien formadas No se traslapan (solapan)textocon formato Las marcas están completas contenido Hay una marca global todo el contenido Todo contenido pertenece a alguna marca que lo define

Texto

30 HTML: estructuras Versión, marca global, encabezado y cuerpo contenido del encabezado contenido del cuerpo Encabezado

31 HTML: estructuras …Indica el tipo de documento … Abarca todo el contenido … Contiene metadata, es decir, información sobre la página Hoja de estilo Documento RSS asociado Icono del documento Codificación (utf-8, iso ,etc.) … Contenido de la página en sí

32 HTML: estructuras Titulo principal Estructura HTML4 Primer tema

Título principal

33 HTML: estructuras Estructura HTML5 header nav article article footer

Mi vida

34 HTML: estructuras y estilosLa estructura indicada no está lista para su presentación Los elementos son presentados como: display:inline Es decir, bloques consecutivos Es necesario definir un estilo mínimo, si queremos la distribución de la figura:

35 HTML: estructuras y estilosPor el momento: display:block; Desplegar como bloques independientes float:left; width:20%; Bloque libre alineado a la izquierda, angosto float:right; width:79%; Bloque libre alineado a la derecha, ancho clear:both; Bloque que se ubica al terminar lo de la derecha y lo de la izquierda

36 HTML: estructuras y estilos

37 HTML: estructuras y estilos

39 HTML: formato básico 1. primer elemento 2. segundo elementoListas Numeradas

1. primer elemento
2. segundo elemento

40 HTML: páginas ligadas Mismo documento Mismo servidor mensaje liga Mismo servidor mensaje liga mensaje liga Diferente servidor

41 HTML: páginas con imágenesImágenes: gif, jpg y png (y svg) Una imagen puede ser una liga (botón):

42 HTML: tablas Tablas: permiten la definición de estructuras rectangulares

43 HTML: tablas, colspan uno tres cuatro

44 HTML: tablas, rowspan uno dos cuatro

45 HTML: tablas, encabezados

46 HTML: tablas anidadas uno dos tres cuatro

47 HTML: tablas con encabezados

48 HTML: Formularios Un formulario es una área dentro de una página que permite al usuario introducir datos que serán enviados al servidor para procesarlos o almacenarlos.

49 HTML: Formularios La marca form requiere varios atributos:Method: Método a utilizar para enviar formulario GET: Datos aparecen en el URL Deseable si se desea poder guardar datos del formulario como bookmark POST: Datos ocultos Deseable si se desea ocultar la información enviada Action: Nombre de programa o script que en el servidor recibirá la información y la procesará La marca label establece el texto que aparece junto a los elementos de entrada. No es indispensable El parámetro for indica la identificación (parámetro id) de la entrada a la que está asociado

50 HTML: Formularios Tipos de entradas: Input: texto simpleCheckbox: Caja de marcar (verdadero,falso) Radio: Elección de una opción File: Para enviar archivo Submit: para enviar formulario Date: para indicar fecha Time: para indicar hora ¡Muchos más!

51 HTML5: audio Se puede utilizar la marca audio para incluir sonidosEl navegador abrirá el primero que sea compatible Tu navegador no soporta elemento de audio.

52 HTML5: video Se puede utilizar la marca video para incluir videosEl navegador abrirá el primero que sea compatible Tu navegador no soporta elemento de video.

53 HTML: canvas El canvas (lienzo) es un área de dibujoPermite la interacción directa mediante programación en Javascript Permite gran libertad de dibujo e interacción usando comandos avanzados

54 HTML: canvas Ejemplo: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.es/3396996/17/images/54/HTML%3A+canvas.jpg", "name": "HTML: canvas", "description": "Ejemplo: var c=document.getElementById( miLienzo ); var ctx=c.getContext( 2d ); ctx.fillStyle= #FF0000 ; ctx.fillRect(10,10,150,75); ctx.font= 30px Arial ; ctx.fillStyle= #00FF00 ; ctx.fillText( Hola Mundo ,10,50); ", "width": "800" }