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
Conceptos básicos
HTTP
Protocolo simple de transferencia de documentos e információ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/z/home.html
protocolo
servidor
dominio
directorio
archivo
extensión
Conceptos básicos
Formas de URL, basados en HTTP
http://www.utm.mx/z/index.html
http://www/z/home.html
http://www.utm.mx/z
http//www.utm.mx/~zarza/home.html
/z/home.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
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 ubicado en un servido, 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
HTML: páginas básicas
Marcas
Delimitadoras
< nombre_marca>contenido< /nombre_marca>
Puntuales
< nombre_marca>
Puntuales tipo XHTML
< nombre_marca/>
Con argumentos
< nombre_marca dato="valor">
< nombre_marca dato="valor">
contenido
< /nombre_marca">
HTML: páginas básicas
Páginas bien formadas
No se traslapan
< b>< em>texto< /b>con formato< /em>
Las marcas están completas
< nombre_marca>contenido< /nombre_marca>
Hay una marca global
< html>todo el contenido< /html>
Todo contenido pertenece a alguna marca que lo define
< p>Texto< /p>
HTML: páginas básicas
Versión, marca global, encabezado y cuerpo
< !DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>contenido del encabezado< /head>
< body>contenido del cuerpo< /body>
< /html>
Encabezado
< title>nombre_ventana< /title>
HTML: páginas básicas
Párrafos y jerarquía de títulos
< 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: páginas básicas
Separadores y formato básico
Separador
< hr>
Salto de línea
< br>
Negritas
< b>< /b>
Cursivo
< em>< /em>
Centrado
< center>< /center>
Líneasiguiente linea
Negritas
Cursivo
Centrado
HTML: páginas básicas
¡Es preferible usar CSS!
Colores y fondo
< bodybackground="url de imagen"bgcolor="color"text="color"link="color"vlink="color"alink="color">
HTML: páginas básicas
Código de color
Por nombre
black
white
Blue
Por valor (hexadecimal)
#rrggbb
Cada valor va desde 00 hasta ff
HTML: páginas básicas
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 diferentes medios
Imágenes: gif, jpg y png (y svg)
< img src="url de imagen"
alt="texto alterno">
Sonidos: wav, ra y mp3
< a href="sonido.wav">
Video: avi, mov y qt
< a href="video1.avi">
HTML: botones
< a href="url">< img src="foto.jpg">< /a>
HTML: mapas (¿obsoleto?)
< img src="url de imagen"
usemap="#mapa" border="0">
< map name="mapa">
< area
shape="rect"
coords="10,10,20,20"
href="url_destino"
alt="texto alterno">
< /map>
HTML: páginas con diferentes medios
Sonidos en la misma página (¿obsoleto?)
Explorer:
< bgsoundsrc="cancion.wav"loop="true">
Firefox:
< embedsrc="cancion.wav"width=146height=55autostart="true"loop="true"hidden="true">
HTML: tablas
Tablas: 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>
HTML: tablas, colspan
< table border="1">
< tr>
< td colspan="2">uno< /td>
< /tr>
< tr>
< td>tres< /td>< td>cuatro< /td>
< /tr>
< /table>
HTML: tablas, rowspan
< table border="1">
< tr>
< td rowspan="2">uno< /td>< td>dos< /td>
< /tr>
< tr>
< td>cuatro< /td>
< /tr>
< /table>
HTML: tablas, encabezados
< table border="1">
< tr>
< th>uno< /th>< th>dos< /th>
< /tr>
< tr>
< td>tres< /td>< td>cuatro< /td>
< /tr>
< /table>
HTML: tablas, bordes y espacios
¡Usar CSS!
< table>
< table border="4">
cellpadding="10"
cellspacing="10"
HTML: tablas, textos y alineación
¡Usar CSS!
< td>Hola,< br>que tal< /td>
< tr align="center">
< td align="right">
< td valign="top">
< td valign="middle">
< td valign="bottom">
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>
HTML: tablas con ancho fijo
< tableborder="1"width="50%">
< table
border="1"
width="200">
< td width="80%">
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: tablas con bordes
frame=
void: Sin lados (default)
above: Lado superior
below: Lado inferior.
hsides: Lados superior e inferior
vsides: Lados derecho e izquierdo
lhs: A mano izquierda únicamente
rhs: A mano derecha únicamente
box: Los cuatro lados externos
border: Los cuatro lados externos
HTML: tablas con reglas
rules=
none: Sin reglas (default)
rows: Las reglas aparecerán entre los renglones
cols: Las reglas aparecerán entre las columnas
all: Las reglas aparecerán entre las columnas y los renglones
HTML: frames
Múltiples páginas en una ventana
Control de despliegue
Contenido dinámico
Información estructurada
HTML: frames
Página descriptora de contenido
< html>
< head>< title>Titulo< /title>< /head>
< frameset rows="80,20">
< frame src="cabeza.html">
< frame src="cuerpo.html">
< noframes>
< p>Tu navegador no despliega frames< /p>< /noframes>
< /frameset>
< /html>
HTML: frames
< head>< title>Titulo< /title>
< /head>
< frameset rows="100,*" border="0">
< frame scrolling="auto"
src="cabeza.html"
name="mensajes"
noresize>
< frame scrolling="yes" src="cuerpo.html">
< /frameset>
HTML: frames anidados
< frameset cols="100,*">
< frame src="menu.html">
< frameset rows="80,20">
< frame src="cabeza.html">
< frame src="cuerpo.html">
< /frameset>
< /frameset>
HTML: frames destino
Se puedes especificar un frame como destino
< a href="bienvenida.html"target="mensaje">
Mensaje de Bienvenida
< /a>
HTML: frames destino
Existen varios destinos reservados:
_blank
Enviar a una ventana nueva
_self
Enviar al mismo frame donde se encuentra la liga
_parent
Enviar a la ventana padre, es decir, a donde se encuentra el frameset que define al frame donde se encuentra la liga
_top
Enviar a la ventana principal
HTML: frames en línea
< p>A continuación, un iframe:< /p>
< iframe src="iframe.html" width="200" height="400" scrolling="auto" frameborder="1">
HTML: actualización automática
Permite la actualización de una página o redireccionar después de un tiempo
< head>
< meta http-equiv="Refresh" content="15; URL=http://www.utm.mx">
< /head>
Página anterior | Volver al principio del trabajo | Página siguiente |