HTML5. HISTORIA En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language) En 1990 Tim Berners-Lee crea.

Presentación del tema: "HTML5. HISTORIA En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language) En 1990 Tim Berners-Lee crea."— Transcripción de la presentación:

1 HTML5

2 HISTORIA En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language) En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del SGML. En 1993 se crea el HTML 2.0 (o HTML+) En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0 El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta elementos desarrollados por Netscape. (Incorpora Tablas, Applets, Texto alrededor de imágenes) En 1997 se define el estándar HTML 4.0 En 1999 aparece el estándar HTML 4.01 En 2009 nace por fin HTML5, y para 2012 se acepta como estándar. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014. Tim Berners-Lee Director del W3C

3 El W3C El W3C (World Wide Web Consortiun) es un consorcio internacional donde Organizaciones miembro, Personal Full-time y el público en general trabajan para desarrollar Estándares Web. La misión del W3C es la de maximizar el potencial de la WWW desarrollando protocolos y guías que aseguren el crecimiento futuro de la Web. Algunas Organizaciones miembro del W3C AdobeEricssonNokia AppleGoogle, inc.Opera Software AT&T HPSun Microsystems CiscoIBM CorporationTelefónica de España Citigroup MicrosoftYahoo, inc. Deutsche TelekomMozilla FoundationVeriSign …Y decenas de universidades de todo el mundo

4 HTML5 HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.

5 HTML5 HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto (la programación).

6 HTML – CSS – Javascript

7 Elementos HTML Los elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas: Atributos Contenido En general se conforman con una Etiqueta de Apertura y otra Cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre. Elemento Etiqueta de AperturaEtiq. de CierreContenido Curso HTML CEMA NombreValor Atributo

8 Atributos Los atributos de un elemento son pares de nombres y valores separados por un ‘=‘ que se encuentran dentro de la etiqueta de apertura de algún elemento. Los valores deben estar entre comillas. Ejemplos: Curso de HTML Universidad del Cema

9 Tipos de Elementos Algunos tipos de Elementos Estructurales Describen el propósito del texto y no denotan ningún formato específico. Por ejemplo: Curso HTML De Presentacion Describen la apariencia del texto, independientemente de su función. Por ejemplo: Curso HTML Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. De HiperTexto Relaciona una parte del documento a otros documentos. Por ejemplo: Universidad del Valle

10 Estructura de un documento en Html 4.0 … Delimita el Documento HTML … Delimita el encabezado del Documento HTML En general incluye los metadatos del documentos y Scripts. … Delimita el Cuerpo del Documento HTML. Es donde se incluyen los contenidos visibles del documento. Ejemplo Aquí se incluyen los distintos elementos del encabezado Aquí se incluyen los distintos elementos contenedores o scripts

11 Estructura de un documento en Html 5.0 Maquetación de sitio web FUTURO DE LA WEB

12 Maquetación

13

14

15 Elementos del HEAD Alguno de los elementos factibles de incluir en el HEAD son: … Define el título del documento HTML … Se utiliza para incluir programas al documento. En general se tratan de Javascripts. … Especifica un estilo CSS para ser utilizado en el documento. … Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.

16 Contenedores Párrafos Es el contenedor mas común. Su sintaxis es: … Encabezados Indican una jerarquía de secciones dentro del documento Su sintaxis: …, …, …,.. …, Listas Listas de Definiciones (consistente de pares de términos y definiciones) … Crea la lista … Crea un nuevo término … Crea una nueva definición Lista Ordenada Enumerada … Crea una nueva lista … Crea un nuevo ítem en la lista Lista Ordenada No Enumerada … Crea una nueva lista … Crea un nuevo ítem en la lista Capas Permiten agrupar y diagramar contenidos en los documentos. Su sintaxis es: …

17 Contenedores - tablas … Crea la tabla … Crea una nueva fila … Crea una nueva celda dentro de la fila Por ejemplo: Creación de una tabla de 2 x 2 … …

18 Hipervínculos La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis: Noticias Para recordar el nombre de esta marca HTML: viene de anchor que significa ancla.

19 Hipervínculos La sintaxis para disponer un hipervínculo a otro sitio de internet es: Buscador Google

20 Imágenes Para insertar una imagen dentro de una página debemos utilizar la etiqueta, la misma no tiene una marca de finalización. Generalmente, la imagen se encuentra en la misma carpeta donde se almacenan nuestras páginas HTML. Los formatos son los archivos con extensiones gif, jpg y png. La sintaxis de esta marca es:

21 Hipervínculo mediante una imagen

22 Lista ordenada ( ) Paises con mayor población China (1300 millones) India (1080 millones) Estados Unidos (295 millones) Resultado:

23 Lista no ordena Periódicos de Argentina. La Nación Clarín La voz del interior Resultado:

24 Lista de definiciones C++ Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C. Java Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90. JavaScript Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.

25 Listas anidadas PHP Viva PHP PHP Adictos PHP Hispano PHP México JavaScript Gamarod HTML Point C++ Código Maldito C++ Club Builder

26 Listas anidadas Resultado:

27 Tablas Rodriguez Pablo 1700 Lopez Ana 1950 Gomez Luis 1473 Menendez Carlos 1640

28 CSS – Hojas de estilo en cascada ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML5. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. La separación de los contenidos y su presentación presenta numerosas ventajas, ya que obliga a crear documentos HTML5 bien definidos y con significado completo (también llamados “documentos semánticos”). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

29 CSS y HTML Mientras que el lenguaje HTML5 se utiliza para marcar los contenidos, es decir, para designar lo que es un párrafo, lo que es un titular o lo que es una lista de elementos, el lenguaje CSS se utiliza para definir el aspecto de todos los contenidos, es decir, el color, tamaño y tipo de letra de los párrafos de texto, la separación entre titulares y párrafos, la tabulación con la que se muestran los elementos de una lista, etc.

30 Estructura global - Plantilla Maquetación de sitio web FUTURO DE LA WEB y su correspondiente etiqueta de cierre se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. --> Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. define un párrafo --> Creado por Futuro de la Web

31 Hojas de Estilo Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el atributo id. Referencia por el atributo class.

32 Hojas de Estilo /* Reseteo universal (se quitan los valores por defecto que traen los navegadores para evitar distorsiones) */ *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { /* Se declaran los nuevos elementos HTML5 como elementos block (bloque) y serán tratados como elementos div*/ display: block; /*Serán posicionados uno sobre otro a menos que se especifique algo diferente */ } body{ background: #39A373; /*color de fondo */. }

33 CÓDIGO RGB El código de colores RGB, rojo - verde - azul, se basa en la mezcla de estos 3 colores para conseguir toda la gama completa. Cada uno de los colores toma un valor entre 0 y 255, un total de 256, con los que se consigue un total de 256 x 256 x 256 = 16.777.216 colores distintos. Este valor se representa en hexadecimal, con lo que el rango va de 00 a FF por cada uno de ellos. El código se expresa así: #RRGGBB siendo cada uno de los valores de 2 cifras el rango de cada uno de los 3 colores, con lo que obtenemos el valor final que representa a cada color.

34 CÓDIGO RGB

35 Hojas de Estilo /* Reseteo universal (se quitan los valores por defecto que traen los navegadores para evitar distorsiones) */ *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ }

36 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ }

37 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*establece de forma abreviada el mismo valor a todos los márgenes de un elemento margin-top, margin-right, margin-bottom, margin-left */ }

38 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ }

39 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ }

40 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ }

41 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ }

42 La propiedad Margin La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el. Esta propiedad define el ancho del margen para los cuatro lados de la caja. Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.

43 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*Establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*Establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ }

44 El padding El padding (almohadilla, relleno) suma espacio entre el contenido de la marca HTML y el borde (recordar propiedad border). Podemos configurar los 4 en caso que tengan el mismo valor accediendo a la propiedad: padding o podemos configurar en forma independiente cada lado: padding-top, padding-right, padding-bottom, padding-left.

45 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*Establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*Establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ }

46 Hojas de Estilo *{ border: 0; margin: 0; padding: 0; /*relleno */ } article,figcaption, aside, figure,header,hgroup,nav,section,body { display: block; } body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*Establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*Establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ }

47 Hojas de Estilo body { background: #39A373; /*color de fondo */. color: #333; /*Efecto negrita*/ font-family: "Arial"; /*Establece la fuente o tipo de letra con la que se muestra el texto*/ font-size: 16px; /*Establece el tamaño de letra */ margin: 0; /*Establece de forma abreviada el mismo valor a todos los márgenes de un elemento */ text-align: center; /*Establece la alineación del contenido de un elemento de bloque (centro) */ } header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ }

48 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer { background: rgba(20,20,20,0.75); /*color de fondo del elemento con transparencia. Se trata del mismo modelo RGB, pero con otra propiedad: canal alfa. Este canal se usa como un índice de la transparencia en un píxel. Esto nos sirve a la hora de mezclar varios colores designados para un solo píxel.*/ }

49 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; /*La propiedad border especifica el espesor, color y estilo de los bordes. Esta propiedad se aplica al área de bordes de la caja. em significa unidad de medida relativa respecto del tamaño de letra del elemento. Es decir que sea autoajustable y que cuando se cambie la resolución o se vea en diferentes dispositivos pueda mantener la redondez de estos elementos a quienes se les está aplicando. */ }

50 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; /*propiedad que permite a los diseñadores implementar fácilmente múltiples sombras (externos o internos) en los elementos de la caja, especificando los valores para el color, el tamaño, la falta de definición y el desplazamiento. Visite www.css3gen.com www.cssportal.com www.herramientas10.com/articulo/30-generadores-css.html*/ }

51 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se e ncuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ }

52 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se e ncuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ width: 940px; margin-left: auto; margin-right: auto; padding: 50px; }

53 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se e ncuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ width: 940px; margin-left: auto; margin-right: auto; padding: 50px; } footer{ margin-top: 10px; }

54 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se e ncuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ width: 940px; margin-left: auto; margin-right: auto; padding: 50px; } footer{ margin-top: 10px; }

55 Documento Html FUTURO DE LA WEB y su correspondiente etiqueta de cierre se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. --> Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. define un párrafo --> Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. Creado por Futuro de la Web

56 Documento Html FUTURO DE LA WEB Link 1 Link 2 permite definir un hipervínculo, en href se especifica la dirección --> y su correspondiente etiqueta de cierre se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. --> Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. define un párrafo --> Creado por Futuro de la Web

57 Hojas de Estilo header { background: #CAC386; /*Le define color de fondo a la caja del encabezado o header */ margin-top: 10px; /*Define margen superior de 10px*/ margin-bottom: 10px; /*Define margen inferior de 10 pixeles*/ width: 940px; /*Ancho del header de 800 pixeles*/ padding: 50px; /*La propiedad padding (relleno) se utiliza para definir el ancho del espacio que se e ncuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.*/ border: 2px solid #ff7f50; /*Define el ancho, estilo y color del borde*/ margin-left: auto; margin-right: auto; /* Auto: El elemento ocupará el ancho especificado, entonces el espacio restante se divide a partes iguales entre las dos márgenes.*/ #historia section, footer, nav{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ width: 940px; margin-left: auto; margin-right: auto; padding: 50px; } footer{ margin-top: 10px; } nav{ width: 1020px; padding: 10px; margin-bottom: 10px; }

58 Generar Menú Genere el menú a través del sitio web: www.herramientas10.com/articulo/30-generadores-css.html

59 Generar Menú Haga clic sobre (Css Menu Generator)

60 Generar Menú Haga clic sobre el menú que seleccione.

61 Generar Menú Copie el código Html al archivo index.html entre las etiquetas y. Copie el código Css al archivo hojaEstilo.css

62 Generar Menú Haga clic sobre el botón (Download Menu), para descargar el código y la carpeta de imágenes. Descomprima el archivo y copie la carpeta images a la carpeta del sitio web que está creando (no es necesario copiar los otros archivos).

63 Código Html FUTURO DE LA WEB Home About Us Services Our Work Contact Us

64 Hojas de Estilo #historia section, footer, nav{ background: rgba(20,20,20,0.75); border-radius: 0.5em; box-shadow: rgba(0,0,0,0.6) 0px 5px 10px; color:#DDD; /*Color para el texto de los elementos anteriores*/ width: 940px; margin-left: auto; margin-right: auto; padding: 50px; } footer{ margin-top: 10px; } nav{ width: 1020px; padding: 10px; margin-bottom: 10px; } #tabs26{ position:relative;display:block;height:42px;font-size:11px; font-weight:bold;background:transparent url(images/greenslate_background.gif) repeat-x top left; font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase; } #tabs26 ul{ margin:0px;padding:0;list-style-type:none;width:auto; } #tabs26 ul li {display:block;float:left;margin:0 1px 0 0;} #tabs26 ul li a {display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #tabs26 ul li a:hover,#tabs26 ul li a.current { color:#fff; background:transparent url(images/greenslate_backgroundOVER.gif) no-repeat top center; }

65 Hipervínculos - Menú Para probar los hipervínculos se deben crear las páginas secundarias. Página Principal (index) Página Secundaria 1 Página Secundaria 2 Página Secundaria 3 Página Secundaria…n

66 Hipervínculos - Menú Inicio Hipervínculo1 Hipervínculo2 Hipervínculo3 Hipervínculo4

67 Hipervínculos - Menú Crear los documentos Html para realizar los hipervínculos. Con la opción guardar como, guarde la página principal cuatro veces en la carpeta del sitio web con los nombres (secundaria1.html, secundaria2.html, secundaria3.html y secundaria4.html). Abra las páginas secundarias y cambie el texto del encabezado y colores para diferenciarlas. Ejecute la página principal y pruebe los hipervínculos.

68 Video y sonido Las etiquetas y proporcionan apoyo para la reproducción de audio y video en Html5. Veamos algunas características de compatibilidad en navegadores.

69 Compatibilidad en navegadores

70 Elemento audio de Html5 Etiqueta audio: Para insertar sonido dentro de una web. ¿Código de inserción? Se puede utilizar varios parámetros para la etiqueta audio. SRC: enlaza al archivo de audio que queremos reproducir. El atributo autoplay es un atributo booleano. Se puede usar autoplay="true“ o “false”. Reproduce el archivo de audio desde que se carga la página.

71 Elemento audio de Html5 El atributo loop sirve para que se reproduzca el sonido en bucle (en forma repetitiva). Controles El atributo controls hace que el navegador proporcione una interfaz con controles para la reproducción y el control del volumen de forma nativa. PRELOAD: carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir más de lo que carga.

72 Elemento audio de Html5 ¿Qué hacer si un navegador no soporta el formato de audio? También está previsto, y podemos hacer uso de la siguiente estructura: Tu navegador no soporta esta función Por eso también podemos agregar varios formatos del sonido mientras lo tengas en dicho formato: Tu navegador no soporta esta caracteristica

73 Elementos de vídeo de HTML5 El elemento video es muy parecido al elemento audio, también dispone de los atributos autoplay y loop. el elemento video ocupa espacio en la ventana, por lo tanto será conveniente definir un tamaño para el mismo:

74 Elementos de vídeo de HTML5 Atributos de la etiqueta vídeo: SRC: enlaza el archivo de video que queremos reproducir. WIDTH: define el ancho del video en pixeles. HEIGHT: define la altura del video en pixeles. CONTROLS: implementa los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen. AUTOPLAY: reproduce el archivo de video desde que se carga la página. PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

75 Elementos de vídeo de HTML5 Portada del vídeo También podemos definir una imagen representativa para el vídeo para que sea mostrada al navegador como portada del elemento antes de la reproducción usando el atributo poster:

76 Elementos de vídeo de HTML5 Ejemplo para hacer que sirva para todos los navegadores: Tu navegador no soporta esta característica

77 Código HTML Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. Creado por Futuro de la Web

78 Hojas de Estilo #seccion1{ margin-bottom: 10px; } #seccion2{ margin-bottom: 10px; } Nota: los archivos de audio y vídeo se deben copiar en la carpeta del sitio web.

79 Insertar una imagen con Css La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.rellenoborde Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas. La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.

80 Insertar una imagen con Css div { background-image: url(http://www.librosweb.es/website/css/images/logo.gif); } h1, h2, h3 { background-image: url("imagenes/fondo.png"); } ul li { background-image: url('../comun/imagenes/icono.gif'); } Si la imagen de fondo es más grande que el sitio disponible para mostrarla, el navegador sólo muestra la parte visible que resulta de colocar la esquina superior izquierda de la imagen en la esquina superior izquierda del espacio que ocupa el elemento:

81 Insertar una imagen con Css Si la imagen es más pequeña que el sitio disponible, el navegador repite la misma imagen en todas las direcciones hasta cubrir completamente el espacio que ocupa el elemento. Sobre un mismo elemento se puede establecer de forma simultánea una imagen de fondo y un color de fondo.color de fondo Si un mismo elemento tiene definida una imagen y un color de fondo, la imagen tiene prioridad. El color de fondo se muestra en las zonas transparentes de la imagen y en las zonas que no están cubiertas por la imagen. Se recomienda establecer un color de fondo siempre que se utilice una imagen de fondo. Por último, no se pueden establecer dos o más imágenes diferentes sobre un mismo elemento. Si se quieren mostrar dos imágenes diferentes como fondo de una página web, se puede establecer la primera imagen sobre un selector y la segunda imagen sobre otro selector.

82 Código HTML Existen múltiples estudios con predicciones sobre lo que Internet traerá a nuestras vidas en unos años, y lo que se percibe es que los avances tecnológicos impactarán de forma positiva, pero también negativa. Creado por Futuro de la Web

83 Hojas de Estilo #seccion2{ margin-bottom: 10px; } #capa1{ background: #CAC386; margin-top: 10px; /*Margen superior*/ margin-bottom:10px; /*Margen inferior*/ margin: auto; width: 1000px; /*ancho*/ height: 319px; /*altura*/ padding: 10px; } #imagen{ width: 425px; height: 319px; background: #FF6633; border-radius: 10px; border: 1px solid #eb521f; margin: auto; background: url(corel.jpg); }

84 Modelo de cajas