Curso de HTML5-CCS-Javascript

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

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

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

Conceptos básicos

Conceptos básicos Historia HTML HTTP URL Servidor Página Hipertexto Hipermedia

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

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

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

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

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

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

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: 1999. Mucho tiempo para consolidar, y para observar tendencias y necesidades de cambio.

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

Conceptos básicos HTTP

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

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

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

Conceptos básicos Formas de URL, basados en HTTP http://www.utm.mx/~zarza/index.html http://www.utm.mx/~zarza /~zarza/index.html pato.html aves/pato.html aves

Conceptos básicos Otras formas de URL ftp://ftp.utm.mx mailto:zarza@mixteco.utm.mx news:comp.sys.mac gopher://gopher.utm.mx

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.

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

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

Entrando en materia con el lenguaje HTML Entrando en materia con el lenguaje

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>

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

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>

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">

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>

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>

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-8859-1,etc.) <body>…</body> Contenido de la página en sí

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

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

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>

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

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>

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>

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

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

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="http://www.utm.mx/aves/pato.html"> <a href="http://www.utm.mx/aves/pato.html#cuac">

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="www.utm.mx"> <img src="url de imagen"> </a>

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

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

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

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

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

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>

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>

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

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!

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>

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>

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

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>