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:[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
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 siguiente |