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
C L IE N T E
S E R V ID O R
S o licita p á g in a
R ecib e so licitu d
B u sca d o cu m en to
D etecta fo rm a to
R ecib e p á g in a
In terp reta p á g in a
D esp lieg a p á g in a
E n v ía p á g in a
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




Pueden estar en diferentes:






Páginas
Imágenes
Sonidos
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:[email protected]
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


Marcas


Está conformado por marcas y texto plano.
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>
</body>
</html>
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)


Las marcas están completas


<nombremarca>contenido</nombremarca>
Hay una marca global


<b><em>texto</b>con formato</em>
<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
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 principal
Texto introductorio
Primer tema
Texto sobre el primer tema
Segundo tema
Texto sobre el segundo tema
HTML: estructuras

Estructura HTML5
header
<header>
<h1>Mi vida</h1>
</header>
<nav>
nav
article
<h2>Menu</h2>
</nav>
<article>
<h2>Ayer</h2>
<p>Me tomé un café</p>
</article>
<footer>
<p>Derechos
reservados</p>
</footer>
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
Línea
siguiente linea
<br>


Negritas
<b></b>
Negritas
Cursivo
Cursivo
<em></em>

Centrado
<center></center>
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 elemento
2. 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: tablas
Tablas: permiten la definición de estructuras
rectangulares
<table border="1">
<tr>
uno
<td>uno</td><td>dos</td>
</tr>
tres
<tr>
<td>tres</td><td>cuatro</td>
</tr>
</table>
dos
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">
uno
dos
tres
uno
dos
tres
cuatro
<tr><td>uno</td><td>dos</td></tr>
<tr><td>tres</td><td>cuatro</td></tr>
</table>
</td>
</tr>
</table>
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


POST: Datos ocultos



Deseable si se desea poder guardar datos del formulario como bookmark
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>
Descargar

Creación de Páginas de Web