Curso de HTML5-CCS-Javascript

HTML5

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

CLIENTE

Solicita página

Recibe página

Interpreta página

Despliega página

SERVIDOR

Recibe solicitud

Busca documento

Detecta formato

Envía página

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 URLhttp://www.utm.mx/~zarza/index.html

protocolo

servidor

dominio

directorio

archivo

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

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

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

HTML

Entrando en materia con el lenguaje

HTML: elementos Documento 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>

</html>

<body>

</body>

<h1>Un título</h1>

<p>Un párrafo</p>

<p>Otro párrafo</p>

HTML: elementos

Marcas Delimitadoras

<nombremarca>contenido</nombremarca> Puntuales

<nombremarca> Puntuales tipo XHTML

<nombremarca/> Con argumentos o parámetros

<nombremarca dato="valor"><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>

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 Estructura HTML4<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 principalTexto introductorio

Primer temaTexto sobre el primer

tema

Segundo temaTexto sobre el segundo

tema

HTML: estructuras Estructura HTML5<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>

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 Separadores y formato

básico Separador

<hr> Salto de línea

<br> Negritas

<b></b> Cursivo

<em></em> Centrado

<center></center>

Líneasiguiente linea

NegritasCursivo

Centrado

HTML: formato básico 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 elemento2. segundo elemento

primer elemento segundo elemento

HTML: páginas ligadas Mismo documento

<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: tablasTablas: permiten la definición de estructuras

rectangulares<table border="1"><tr>

<td>uno</td><td>dos</td></tr><tr>

<td>tres</td><td>cuatro</td></tr>

</table>

uno dos

tres cuatro

HTML: tablas, colspan<table border="1">

<tr>

<td colspan="2">uno</td>

</tr>

<tr>

<td>tres</td><td>cuatro</td>

</tr>

</table>

uno

tres cuatro

HTML: tablas, rowspan<table border="1"><tr>

<td rowspan="2">uno</td><td>dos</td></tr><tr>

<td>cuatro</td></tr>

</table>uno dos

cuatro

HTML: tablas, encabezados<table border="1">

<tr>

<th>uno</th><th>dos</th>

</tr>

<tr>

<td>tres</td><td>cuatro</td>

</tr>

</table>

uno dos

tres cuatro

HTML: tablas anidadas<table border="1">

<tr>

<td>uno</td><td>dos</td>

</tr>

<tr>

<td>tres</td>

<td>

<table border="1">

<tr><td>uno</td><td>dos</td></tr>

<tr><td>tres</td><td>cuatro</td></tr>

</table>

</td>

</tr>

</table>

uno dos

tres uno dos

tres cuatro

HTML: tablas con encabezados<table border="1"><caption align="top">Titulo</caption><tr>

<td>uno</td><td>dos</td></tr><tr>

<td>tres</td><td>cuatro</td></tr>

</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: canvasEjemplo:

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