Embed Size (px)
Citation preview
IRI - Hipertexto
Memex – Vannevar Bush
– “As we may think”, 1947• Pensamiento asociativo
• Multiples descubrimientos independientes– Newton, Leibniz, Fermat, et al.– Henry & Faraday– Darwin & Wallace
Proyecto Xanadú – Ted Nelson
– “Literaly Machines”, 1957• Docuverso
• Transclusion
IRI – World Wide Web
Tim Berner's Lee
– CERN, 1989• Protocolo HTTP
• Direcciones URL
• Lenguaje HTML
– Primer servidor Web, 1991
– W3C (World Wide Web Consortium), 1994• Estándares libres
IRI – HTTP
HTTP (Hyper Text Transfer Protocol)
– Envios• GET
• POST
• HEAD
• Etc.
– Respuestas• 200 → OK
• 404 → “page not found”
• Etc.
IRI – URL
URL (Uniform Resource Locator)• Protocolo
• Usuario
• Password
• Maquina
• Puerto
• Ruta
• Archivo
• Query
• Parte
protocolo://usuario:pass@maquina:puerto/ruta/archivo?query#parte
IRI - HTML
Hyper Text Markup Language
– Lenguaje predominante para la construcción de páginas web.
– Describe la estructura y contenido de una página en formato de texto, y hasta cierto punto su apariencia.
– Esta basado en el uso de etiquetas, o tags, rodeadas por corchetes angulares. Por ejemplo: <etiqueta>.
IRI - Tags
Formato de etiquetas
– Las etiquetas expecifican la inserción de un elemento o un cambio sobre la estructura de la página, y pueden contener atributos.
– Algunas etiquetas se utilizan puntualmente en el lugar donde introducen un cambio. En tal caso la forma es la siguiente:• <etiqueta atributo1=”valor” atributo2=”valor”>
– Otras encierran el contenido que afectan. En tal caso la forma de utilizarlas es:• <etiqueta atributo=”...”>contenido</etiqueta>
IRI – Estructura mínima
HTML Marca el inicio y fin del documento.
HEAD Encierra datos que no hacen al documento en
sí, sino a sus propiedades.
TITLE Contiene el título mostrado en el navegador.
BODY Encierra el contenido de la página que será
visualizado mediante el navegador.
IRI – Ejemplo de estructura
Ejemplo:
<html>
<head>
<title>Página de ejemplo
</title></head>
<body>
Contenido del ejemplo.</body>
</html>
IRI - Generalidades
Los documentos deben tener la extensión .htm o .html
Mayúsculas y minúsculas son en principio indistintas.
Los saltos de línea y tabulaciones no tienen mayor efecto que clarificar el código.
Los comentarios se encierran entre los símbolos <!-- y -->
Los caracteres especiales deben ser codificados de forma especial.
IRI – Caracteres especiales
Obligatorios:
– < → <
– > → >
– " → "
– & → &
– → espacio (cuando es más de uno) Tildes:
– á → á
– É → É
– ñ → ñ
IRI – Inserción de caracteres
Ejemplo:
<html>
...
<body>
Oración
de una sola
línea;.
<!-- comentario en el código -->
</body>
</html>
IRI – Etiquetas básicas
<br> - salto de línea y retorno de carro <p> y </p> - párrafos
– align=“center”, “left”, “right” y “justify” <div> - sección o división de un documento
– align=“center”, “left”, “right” y “justify” <h1..6> y </h1..6> - párrafos encabezados
– align=“center”, “left”, “right” y “justify”
IRI – Etiquetas básicas
Ejemplo:<html>
<body>
<div align="right">
<p>Parrafo 1.</p>
<p>Parrafo 2.<br>Parrafo 2.</p>
</div>
<h1>Titulo importante</h1>
<h2>Subtitulo</h2>
<p align="center">Parrafo 3.</p>
</body>
</html>
IRI - Etiquetas básicas
<i> y </i> o <em> y </em> - texto en itálica <b> y </b> o <strong> y </strong> - texto en
negrita <u> y </u> - texto subrayado <sup> y </sup> - supraíndice <sub> y </sub> - subíndice Las etiquetas de formato de texto pueden
combinarse y anidarse
IRI - Etiquetas básicas
Ejemplo:<html>
<body>
<p>Texto en <b>negrita</b>, <i>cursiva</i>
y <i><b>ambas</b></i>.</p>
<p>Texto <u>subrayado</u></p>
<p>Texto en <sub>subindice</sub> y
<sup>superindice</sup></p>
</body>
</html>
IRI - Etiquetas básicas
<font> y </font> - define color, tamaño y tipo de letra
- color="nombre" o "#RGB"• 16 códigos de color originales
Más colores: http://www.brobstsystems.com/colors2.htm
"aqua" o "#00FFFF""black" o "#000000""blue" o "#0000FF""fuchsia" o "#FF00FF""gray" o "#808080""green" o "#008000""lime" o "#00FF00""maroon" o "#800000"
"navy" o "#000080""olive" o "#808000""purple" o "#800080""red" o "FF0000""silver" o "#C0C0C0""teal" o "#008080""white" o "#FFFFFF""yellow" o "#FFFF00"
IRI - Etiquetas básicas
<font> y </font> - define color, tamaño y tipo de letra
– size=• "1..7" (absoluto, de menor a mayor)
• "±valor" (relativo al tamaño anterior)
– face=• Familia: "times", "courier", "arial", "serif",
"sans-serif", "cursive", "fantasy", "monospace", etc.
• Tipografía específica: "Times New Roman", "Verdana", "Comic Sans", "Lucida Sans", etc.
IRI - Etiquetas básicas
Ejemplo:<html>
<body>
<p>
<font color="red" size="7" face="Times New Roman">Texto 1
</font>
<font color="#F00" size="5" face="cursive, Comic Sans">Texto 2 </font>
</p>
</body>
</html>
IRI - Etiquetas básicas
Atributos de etiqueta <body>:
– bgcolor=“nombre” o “#RGB”
– background=“nombreimagen.extension”
– text=“nombre” o “#RGB”
– link=“nombre” o“#RGB”
– vlink=“nombre” o“#RGB”
– alink=“nombre” o “#RGB”
– marginwidth o leftmargin =“tamaño en pixeles”
– marginheight o topmargin =“tamaño en pixeles”
IRI - Etiquetas básicas
<ul> y </ul> - listas desornenadas
– type=“circle”, “disc” y “square” <ol> y </ol> - listas ordenadas
– type=“1”, “a”, “A”, “i” e “I”
– start=“número” <li> y </li> - items de una lista
– type=“circle”, “disc”, “square”, “1”, “a”, “i”, etc. <li> debe siempre ir dentro de <ol> o <ul> <ol> y <ul> pueden anidarse.
IRI - Etiquetas básicas
Ejemplo:<html>
<body>
<ol type="I">
<li>Item 1</li> <li>Item 2
<ul type="circle">
<li>Subitem 1</li><li>Subitem 2</li>
</ul> </li>
</ol>
</body>
</html>
IRI - Etiquetas básicas
<dl> y </dl> - listas de definición <dt> y </dt> - término de una lista <dd> y </dd> - definición de una lista Ejemplo:
<dl>
<dt>un término</dt>
<dd>una definición</dd>
<dt>otro término</dt>
<dd>otra definición</dd>
</dl>
IRI - Etiquetas básicas
<a> y </a> - anclas o vínculos
– href=“url”, “archivo”, “#enlaceinterno” o la suma de los mismas y “mailto:usuario@servidor”
– name=“enlaceinterno”
<a> puede encerrar tanto texto como imágenes.
IRI - Etiquetas básicas
Ejemplo:<html>
<body text="navy" link="teal" alink="red" vlink="lime">
<p><a name="inicio">Inicio de pagina</a></p>
<p>Este es un <a href="http://www.google.com">vinculo</a> externo</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Este es un <a href="#inicio">vinculo</a> interno</p>
</body>
</html>
IRI - Etiquetas básicas
<img> - insertar imágen
– src=“url”, “archivo” o la suma de ambas
– lowsrc= “url”, “archivo” o la suma de ambas
– alt=“texto alternativo”
– align=“top”, “bottom”, “middle”, “left” y “right”
– border=“pixeles”
– height=“pixeles”
– width=“pixeles”
IRI - Etiquetas básicas
Ejemplo:<html>
<body>
<p>Esta es una imagen<br><img src="http://www.w3schools.com/images/w3schoolslogo.gif"></p>
<p>Esta es otra <img src="http://www.w3schools.com/images/compatible_firefox.gif"
height="100px" width="100px">imagen</p>
</body>
</html>
IRI - Etiquetas básicas <table> - crear tabla
– align=“left”, “center” y “right”
– bgcolor=“nombre” o “#RGB”
– background=“nombrearchivoimagen.extension”
– border=“pixeles”
– bordercolor=“nombre” o “#RGB”
– width=“pixeles” o “porcentaje%”
– cellpading=“pixeles”
– cellspacing=“pixeles”
IRI - Etiquetas básicas
<tr> y </tr> - crear fila
– align=“right”, “left”, “center”, “justify” y “char”
– valign=“top”, “middle”, “bottom” y “baseline”
– bgcolor=“nombre” o “#RGB” <th> y </th> - crear cabecera de columna <td> y </td> - crear celda común
IRI - Etiquetas básicas
Propiedades de <th> y <td>:
– align=“right”, “left”, “center”, “justify” y “char”
– valign=“top”, “middle”, “bottom” y “baseline”
– bgcolor=“nombre” o “#RGB”
– background=“nombrearchivoimagen.extension”
– height=“pixeles”
– width=“pixeles” o “porcentaje%”
– colspan=“cantidad”
– rowspan=“cantidad”
IRI - Etiquetas básicas
Ejemplo:
<table border="1">
<tr> <th>Mes</th>
<th>Ahorre</th> </tr>
<tr> <td>Enero</td>
<td>us$ 1000 *</td> </tr>
<tr> <td>Febrero</td>
<td>ar$ 3500</td> </tr>
<tr> <td colspan="2">(*) 1 us$ = 5 ar$</td> </tr>
</table>
IRI - Etiquetas básicas
<thead> y </thead>, <tbody> y </tbody>, y <tfoot> y </tfoot> - agrupar filas
<colgroup> - agrupar columnas Agrupar permite definir estilos compartidos
por un conjunto dado de celdas de la tabla
IRI - Etiquetas básicas
<hr>
– align=“left”, “center” o “right”
– noshade=“noshade”
– size=“pixeles”
– width=“pixeles” o “porcentaje%” <blockquote> y </blockquote> - crea citas <abbr> y </abbr> - abreviaciones
– title=“Este Es El Texto Completo” <pre> y </pre> - texto sin formato
IRI – Mapa de imágenes
Ejemplo de mapa de imágen:
<map name=“mapa”>
<area shape=“circle” coords= “x, y, radio” href=“link”>
<area shape=“rect” coords= “x1, y1, x2, y2” href=“link”>
<area shape=“poly” coords= “x1, y2 ... xN, yN” href= “link”>
</map>
<img src=“imagen” usemap=“#mapa”>
IRI – Conjunto de marcos <frameset> - configura un conjunto de marcos
– border=“pixeleslink”
– frameborder=“1” o “0”
– bordercolor=“color” o “#RGB”
– framespacing=“pixeles”
– cols=“columna1, … , columnaN” en pixeles, % o *
– rows=“fila1, … , filaN” en pixeles, % o *
IRI - Marcos <frame> - configura un marco
– src=“link”
– name=“identificador”
– frameborder=“1” o “0”
– bordercolor=“color” o “#RGB”
– marginwidth=“pixeles”
– marginheight=“pixeles”
– noresize=“noresize”
– scrolling=“yes”, “no” o “auto”
Incorporo el siguiente atributo a mis links:
– target= “identificador”, “_blank”, “_self”, “_parent” o “_top”
Solo cambia un frame en cada vínculo
IRI - Marcos
Ejemplo de marcos:<html>
<head> <title>Título de la página</title> </head>
<frameset rows= “pixeles,*,pixeles”>
<frame src=“encabezado.html”>
<frameset cols= “porcentaje%,porcentaje%”>
<frame src=“menulateral.html”>
<frame src=“cuerpoprincipal.html”>
</frameset>
<frame src=“piedepagina.html”>
</frameset>
</html>
IRI – Marcos internos
<iframe> e </iframe>
– src=“pagina.html”
– name=“identificador”
– align=“left”, “center” y “right”
– width=“pixeles”
– height=“pixeles”
– marginwidth=“pixeles”
– marginheight=“pixeles”
– frameborder=“1” o “0”
– scrolling=“yes”, “no” o “auto”
