Curso de HTML5-CCS-Javascript

Presentación del tema: "Curso de HTML5-CCS-Javascript"— Transcripción de la presentación:

1 Curso de HTML5-CCS-Javascript

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

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

4 Temario (cont.) 3. Hoja de estilos en cascada CSS
Definició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 Hipertexto
Hipermedia

7 Historia de HTML, finales de los 60’s
Muchos 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 HTTP
Protocolo 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 hipertexto
Permite 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 URL
Los 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 protocolo
directorio 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ágina
Archivo 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+multimedia
Sistema 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 lenguaje
HTML Entrando en materia con el lenguaje

25 HTML: elementos Documento HTML Marcas Elementos HTML
Está 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: <p>Esto es un párrafo</p>

26 HTML: elementos Estructura de página HTML <html> <body>
<h1>Un título</h1> <p>Un párrafo</p> <p>Otro párrafo</p>

27 HTML: elementos Marcas Delimitadoras Puntuales Puntuales tipo XHTML
<nombremarca>contenido</nombremarca> Puntuales <nombremarca> Puntuales tipo XHTML <nombremarca/> Con argumentos o parámetros <nombremarca dato="valor"> contenido </nombremarca>

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 <p class="texto" id="primero">

29 HTML: elementos Páginas bien formadas No se traslapan (solapan)
<b><em>texto</b>con formato</em> Las marcas están completas <nombremarca>contenido</nombremarca> Hay una marca global <html>todo el contenido</html> Todo contenido pertenece a alguna marca que lo define <p>Texto</p>

30 HTML: estructuras Versión, marca global, encabezado y cuerpo
<!DOCTYPE html> <html> <head>contenido del encabezado</head> <body>contenido del cuerpo</body> </html> Encabezado <title>nombre de ventana</title>

31 HTML: estructuras <!DOCTYPE html> <html>…</html>
Indica el tipo de documento <html>…</html> Abarca todo el contenido <head>…</head> 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.) <body>…</body> Contenido de la página en sí

32 HTML: estructuras Titulo principal Estructura HTML4 Primer tema
<h1>Título principal</h1> <p>Texto introductorio</p> <h2>Primer tema</h2> <p>Texto sobre el primer tema</p> <h2>Segundo tema</h2> <p>Texto sobre el segundo tema</p> Titulo principal Texto introductorio Primer tema Texto sobre el primer tema Segundo tema Texto sobre el segundo tema

33 HTML: estructuras Estructura HTML5 header nav article article footer
<h1>Mi vida</h1> </header> <nav> <h2>Menu</h2> </nav> <article> <h2>Ayer</h2> <p>Me tomé un café</p> </article> <footer> <p>Derechos reservados</p> </footer> header nav article article footer

34 HTML: estructuras y estilos
La 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: <style type=“text/css”> header, nav, footer, article {display:block;} nav {float:left; width:20%;} article {float:right; width:79%;} footer {clear:both;} </style>

35 HTML: estructuras y estilos
Por 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
<!doctype html> <html> <head> <title>Titulo</title> <meta charset=utf-8> <style type="text/css"> header, nav, footer, article {display:block;} nav {float:left; width:20%;} article {float:right; width:79%;} footer {clear:both;} <!--para que tengan borde: --> header,nav,footer,article { border: 1px black solid;} </style> </head>

37 HTML: estructuras y estilos
<body> <header> <h1>Mi vida</h1> </header> <nav> <h2>Menu</h2> </nav> <article> <h2>Ayer</h2> <p>Me tomé un café</p> </article> <footer> <p>Derechos reservados</p> </footer> </body </html>

38 HTML: formato básico Negritas Línea siguiente linea Cursivo Centrado
Separadores y formato básico Separador <hr> Salto de línea <br> Negritas <b></b> Cursivo <em></em> Centrado <center></center> Línea siguiente linea Negritas Cursivo Centrado

39 HTML: formato básico 1. primer elemento 2. segundo elemento
Listas Numeradas <ol> <li>primer elemento</li> <li>segundo elemento</li> </ol> No numeradas <ul> <li>primer elemento</li> <li>segundo elemento</li> </ul> 1. primer elemento 2. segundo elemento primer elemento segundo elemento

40 HTML: páginas ligadas Mismo documento Mismo servidor
<a name="pato"></a> <a href="#pato">mensaje liga</a> Mismo servidor <a href="otro.html">mensaje liga</a> <a href="directorio/otro.html">mensaje liga</a> Diferente servidor <a href=" <a href="

41 HTML: páginas con imágenes
Imágenes: gif, jpg y png (y svg) <img src="url de imagen" alt="texto alterno"> Una imagen puede ser una liga (botón): <a href=" <img src="url de imagen"> </a>

42 HTML: tablas Tablas: permiten la definición de estructuras rectangulares <table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <td>tres</td><td>cuatro</td> </table> uno dos tres cuatro

43 HTML: tablas, colspan uno tres cuatro
<table border="1"> <tr> <td colspan="2">uno</td> </tr> <td>tres</td><td>cuatro</td> </table> uno tres cuatro

44 HTML: tablas, rowspan uno dos cuatro
<table border="1"> <tr> <td rowspan="2">uno</td><td>dos</td> </tr> <td>cuatro</td> </table> uno dos cuatro

45 HTML: tablas, encabezados
<table border="1"> <tr> <th>uno</th><th>dos</th> </tr> <td>tres</td><td>cuatro</td> </table> uno dos tres cuatro

46 HTML: tablas anidadas uno dos tres cuatro
<table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <td>tres</td> <td> <tr><td>uno</td><td>dos</td></tr> <tr><td>tres</td><td>cuatro</td></tr> </table> </td> uno dos tres cuatro

47 HTML: tablas con encabezados
<table border="1"> <caption align="top">Titulo</caption> <tr> <td>uno</td><td>dos</td> </tr> <td>tres</td><td>cuatro</td> </table>

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. <form method="get" action="procesa.php"> <label for="nom">Nombre:</label> <input type="text" name="nombre" id="nom"> <input type="submit" value="Enviar"> </form>

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 simple
Checkbox: 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 sonidos
El navegador abrirá el primero que sea compatible <audio controls> <source src="sonido.mp3" type="audio/mp3"> <source src="sonido.ogg" type="audio/ogg"> Tu navegador no soporta elemento de audio. </audio>

52 HTML5: video Se puede utilizar la marca video para incluir videos
El navegador abrirá el primero que sea compatible <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src=“movie.ogg" type="video/ogg"> <source src=“movie.webm” type=“video/webm”> Tu navegador no soporta elemento de video. </audio>

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

54 HTML: canvas Ejemplo: <canvas id="miLienzo" width="200" height="100" style="border:1px solid blue;"> </canvas> <script> 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); </script>