HOLA COMPAÑEROS DE SIA ESTA ES UNA PAGINA HECHA PARA

HTML INTRODUCCION:

HTML es un lenguaje pensado para presentar información en la WWW. HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable, con inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que permiten relacionar otras fuentes de información en documentos hipertextos. Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web).

Como se ha dicho es un lenguaje de marcas ya que en el las instrucciones son trozos de texto resaltados, que definirán la estructura lógica del documento. Por tanto un documento HTML constrará de texto que será el contenido y la información del documento y de instrucciones HTML que resaltarán este contenido y le darán un formato facil y agradable de leer y con la posiblidad de relacionar documentos y fuentes de información mediante hiperenlaces.

Las marcas del lenguaje HTML especifican:

La estructura lógica del documento:

Cabeceras, tipos y tamaños de las fuentes.

Parrafos de texto.

Centrado.

Enumeraciones o listas.

Formularios.

Tablas.

Distintos estilos que definen el texto:

Negrita.

Cursiva.

Diferentes efectos: (direcciones de correo, citas textuales, etc…).

Inclusión de hipertextos para acceder a otros documentos relacionados

Inclusión de imágenes y ficheros multimedia.

El tema de las versiones y las extensiones tiene importancia porque al crear páginas HTML debe tenerse en cuenta que los distintos clientes soportan distintas versiones. Si creamos un servidor con extensiones de HTML 3.0 (por ejemplo si toda la información está dentro de una tabla) impedimos a los usuarios de clientes más viejos el acceso a esta información. Por tanto, es conveniente, siempre que se pueda, disponer de otra página alternativa que no tenga estas extensiones.

Por último, como generalidades del HTML, debemos destacar que los elementos no distinguen entre mayúsculas y minúsculas. Por ejemplo, es lo mismo poner <p> que <P>. Esto no es válido en el caso de formateo de caracteres especiales, en el que hay que distinguirlas (Á no es lo mismo que á). Otro aspecto importante a la hora de escribir un documento es que HTML no tiene en cuenta todos los espacios y líneas en blanco; los reduce a uno solo. Por esto, para mejorar la legilibilidad del documento es bueno separar secciones, etc.

HTML - Tabla Cronológica

     1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML.
     1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares presenta su artículo Information
     Management: A Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el acceso en línea de manera
     uniforme a la información disponible en muchos recursos distintos, y que pudiese funcionar en máquinas que conectadas
     por redes basadas en TCP/IP.
     1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup
     Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web.
     1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y sólo en
     plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso
     público de World Wide Web el 17 de mayo (http://info.cern.ch).
     1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0,
     agregando a la definición original atributos para modificar el estilo físico del texto. Se distribuye Viola, primer visor
     gráfico de Web y disponible sólo para X.11.
     1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee sólo
     texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer
     visor de Web en entorno gráfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente
     popular. A fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas de circulación
     masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el borrador de la primera norma
     (RFC -Recommendation for Comments) de HTML para Internet.
     1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML,
     Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML que no requiere TCP/IP presentado por la Escuela de
     Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que
     ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World
     Wide Web, Netscape (también conocido como Mozilla), que tiene una amplia aceptación entre los usuarios, pero que
     soporta elementos de programación que equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define
     un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que
     permite moverse dentro de los ambientes definidos. En este mismo año se realizan la Primera y Segunda conferencias
     internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization.
     1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el
     HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual
     también utiliza elementos de HTML degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de
     encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de
     programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y
     Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en Wagga-Wagga..
     1996. Netscape Communications y Microsoft presentan las nuevas versiones de de sus visores que soportan gran parte
     del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se
     formaliza un nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos
     definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt.
     1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la versión 4.0, experimental.
     1998. HTML 4.0.

Versiones:

     0. Anclas, elementos de párrafos, caracteres especiales.
     1.0. Imágenes.
     2.0. Formularios.
     3.0. (propuesto) Tablas, elementos de matemáticas. Agregado de estilos.
     3.2. Normalizado (David Raggett).
     4.0. (experimental) Nuevos atributos, se recomienda no utilizar tareas de estilo físico, listados de menú y directorio.
     Hojas de estilo. Autores: D. Raggett, A. Lettors, I. Jacobs.

Es muy importante tener en cuenta que solamente el HTML 2.0 (y por supuesto los anteriores) es soportado por todos los
programas visores. Cada vez que utilicemos una tarea de la extensión, corremos el riesgo de o que no puedan ver lo realizado,
o que el programa indique errores.

1 - Etiquetas del lenguaje HTML:

Las Etiquetas:

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

<B> Letra Negrita, del inglés Bold (negrita).
<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Por ejemplo, con la etiqueta siguiente:

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.

El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.

Atributos de las Etiquetas:

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá

expresarse entre comillas, en otro caso no será necesario.

Un ejemplo de atributo será:

<A HREF="http://www.html.cl">Pagina principal de la HTML</A>

En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es.

Igualmente una etiqueta podría presentar varios atributos:

En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultado final.

Etiquetas correctas:

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.

El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador.

AL crear un código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.

En este trabajo hemos tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.

2 .- Formato de las URL:

Definición:

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW. Con la WWW se pretende unificar el acceso a información de servicios que antes eran incompatibles entre sí, tratando de conseguir que todos los servicios de internet sean accesibles a través de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de información en servicios como FTP, gopher, WAIS, etc.

Uso y Formato

Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada elemento de internet tendrá una URL que lo defina, ya se encuentre en un servidor de la WWW, FTP, gopher o las News.

El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero

El servicio será alguno de los de internet, estos pueden ser:

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto. Todas las páginas HTML en servidores WWW deberán ser referenciadas mediante este servicio. Indicará conexión a un servidor de la WWW.

https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores de la WWW seguros.

Estos servidores son normalmente de ámbito comercial y utilizan encriptación para evitar la intercepción de los datos enviados, usualmente numeros de tarjeta de credito, datos personales, etc ..., realizará una conexión a un servidor de la WWW seguro.

ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se utilizará cuando la información que se desee acceder se encuentre en un servidor de ftp. Por defecto se accederá a un servidor anónimo (anonymous), si se desea indicar el nombre de usuario se usará: ftp://maquina.dominio@usuario, y luego le pedirá la clave de acceso.

gopher, wais: Cualquiera de estos servicios de localización de información, se indicará el directorio para localizar el recurso concreto.

news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz de presentar este servicio, todos no lo son. Se indicará el servidor de news y como camino el grupo de noticias al que se desea acceder:

news://news.html.cl/chile.cl

telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza para acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicación externa que realice la conexión. En este caso se indicará la maquina y el login: telnet://maquina.dominio@login.

mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En este caso solo se indicará la dirección de correo electrónico del destino: mailto://alias. correo@domino.

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso se utilizará el esquema IP para identificar la maquina será el nombre de la maquina y el dominio. En el caso de nuestro Instituto el dominio siempre será Inacap.cl. Por tanto un nombre valido de maquina será wwww.inacap.cl.

Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarán a nuestras páginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podrían ser seguidas por los navegadores externos. Si en vez de www.inacap.cl utilizamos www será perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www será la maquina llamada así en el dominio remoto si existiera, que no es la que deseamos referenciar.

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al puerto por defecto.

El camino será la ruta de directorios que hay que seguir para encontrar el documento que se desea referenciar. Para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por convenio al ser este tipo de maquinas las más usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en cuenta la diferencia entre mayúsculas y minúsculas en el nombre.

La extensión de los ficheros será también algo importante, ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento. Para definir los tipos de documentos se utiliza los tipos MIME. Las extensiones más normales con sus tipos correspondientes son:

Tipo MIME Extensión Tipo de fichero
text/html html ó .htm, documento HTML
text/plain .txt por defecto, texto plano
image/gif .gif imagen de formato GIF
image/jpeg jpg ó .jpeg imagen de formato JPEG

El navegador de la WWW, realiza una acción para cada tipo de fichero, solo los que sean del tipo text/html serán mostrados como documentos HTML. En el caso de que el tipo no sea conocido por el cliente se considerará por defecto como un documento de texto normal.

Si no se indica un fichero y solo referenciamos un directorio accederemos a la página html por defecto de ese directorio. En el servidor están definidos unos ficheros para ser usados si no de indica un fichero concreto, el nombre que debe tener este fichero es en nuestro caso default.htm ó default.html. En caso que no exista este fichero se mostrará un listado de todos los documentos que forman el directorio. Este fichero es la página inicial (home page) del servidor o del espacio Web.

Algunos ejemplos de URL:

URL Definición

http://www.inacap.cl En este caso solo se indica el servicio y la maquina y dominio. El resto de los parámetros se toman por defecto, el puerto 80, el directorio, el raíz del servidor y el documento por defecto de ese directorio.

http://www.inacap.cl/internet/internet.html Esta URL está más completa en este caso se accede al fichero internet.html que se encuentra en el directorio internet del servidor de la WWW, www.inacap.cl.

http://www2.inacap.cl/serv/sii Se accederá al fichero por defecto del directorio /serv/sii del servidor de la WWW, www2.inacap.cl

ftp://ftp.inacap.cl/imagenes/globo.gif En este caso se accederá a un servidor de FTP anónimo, ftp.inacap.cl por el protocolo FTP y se accederá al fichero globo.gif del directorio de imagenes.

news:inacap.cl En este caso se accederá al grupo de news de la uca en el servidor de news definido por defecto en el navegador de la WWW, esta opción solo es soportada por los navegadores más modernos.

mailto://[email protected] Enviará un mail al equipo de la WWW IANCAP, esta opción solo es soportada por los navegadores más modernos.

3.- Estructura de un documento

Un documento HTML debe avisar al "cliente" de que está utilizando este lenguaje, y esto lo hace con el elemento <html> al principio del documento. A continuación el documento tiene dos bloque bien diferenciados; la cabecera (head) y el cuerpo (body).

Cabecera

La cabecera viene definida por <head>...</head> y tiene información acerca del documento en sí que no aparecerá en la página, como el título. Puede tener otras informaciones como comentarios del autor (éstos también pueden ir dentro del cuerpo), o relaciones con otros documentos (ésto está en desuso).

Dentro de la cabecera es imprescindible el título, definido por <title>...</title>. El título de un documento lo define y por tanto debe ser único y descriptivo sin necesitar el contexto. Es muy importante poner bien el título ya que muchas herramientas de búsqueda en Internet se basan en él. El título, además, debe tener menos de 64 caracteres de largo (normalmente 3 o 4 palabras bastarán). Ejemplos:

<title>home page</title> MAL

<title>home page UIB</title> BIEN

Ejemplo de cabecera simple:

<html>

<head>

<title>Departamentos UIB</title>

<head>

Cuerpo

Así como la cabecera contiene información acerca del documento, el cuerpo contiene la información del documento propiamente dicha. Esta información será formateada mediante los distintos elementos (párrafos, acentos, cabeceras, etc.). El cuerpo viene definido mediante <body>...</body>. Por tanto un ejemplo de documento en HTML sería:

<html>

<head>

<title>Departamentos UIB</title>

<head>

<body>

...

Aquí viene el texto formateado según las normas HTML.

...

</body>

</head>

4.- Instrucciones y atributos básicos

Las instrucciones definen un "efecto", que puede o no ser modificado por un atributo. En general los atributos son extensiones y no están incluídos en la versión 2.0. El efecto afecta al texto o imagen que se encuentra entre la "inicio" y el "fin" de la instrucción. Ejemplo:

<instrucción>texto al que se aplica</instruccion>

Hay algunos elementos que no se cierran.

Formateo de caracteres. Estilos lógicos y físicos

En general se puede conseguir el mismo efecto con una instrucción lógica o física, por ejemplo <strong > suele presentarse por el cliente en negrita, esto es, como si se hubiera definido <b>. La diferencia es que cada cliente presenta los estilos lógicos a su manera, e incluso el usuario puede personalizarlos. Por ejemplo un cliente puede preferir asignar a la instrucción <strong> el color rojo en lugar de negrita. Las instrucciones son las siguientes.

a) Lógicos.

<dfn> Sirve para definiciones. Se suele presentar en cursiva.

<em> Énfasis. Se suele presentar en cursiva.

<cite> Para citas textuales. Se suele presentar en cursiva.

<kbd> Sirve para una entrada del teclado del usuario. Se suele presentar en texto de ancho fijo (tipo courier o de máquina de

escribir).

<samp> Para mensajes de máquina (p.ej. errores). Se suele presentar en ancho fijo.

<strong> Para más énfasis. Se suele presentar en negrita.

b) Físicos.

<b> negrita.

<i> cursiva

<tt> texto de ancho fijo

Cabeceras (headings).

También podría traducirse como encabezamientos, para distinguirlo de la cabecera del documento (head). Como no ha lugar a dudas, lo dejaremos así. Hay seis niveles de cabeceras, definidas por <h1>...<h6> ( y las correspondientes para cerrarlas, </h1>...</h6>).

En general los clientes las interpretan con tamaño de letra variable, y salto de línea con espacio variable debajo. Lo mejor es ver cómo quedan con un ejemplo.

Cabecera de tipo 1 (Y EN MAYUSCULAS)

Cabecera de tipo 2 (Y EN MAYUSCULAS)

Cabecera de tipo 3 (Y EN MAYUSCULAS)

Cabecera de tipo 4 (Y EN MAYUSCULAS)

Cabecera de tipo 5 (Y EN MAYUSCULAS)

Cabecera de tipo 6 (Y EN MAYUSCULAS)

Elementos de formateo de bloques y líneas.

Se consideran elementos de formateo de bloques al elemento de nuevo párrafo <p>, las cabeceras (ya vistas), y los elementos <blockquote> y <address>.

a) Inicio de párrafo: <p>. Este elemento no se cierra (no existe </p>), y marca la separación entre párrafos. No está especificado en HTML cuánto espaciado entre líneas dejará, ni si habrá indentación al inicio del párrafo, pero generalmente los clientes hacen un salto de línea y dejan otra línea en blanco.

b) Salto de línea: <br>. Tampoco se cierra (no hay </br>). Este elemento fuerza un salto de línea, sin dejar espacio extra entre las líneas. Generalmente (no en todos los clientes) permite crear un gran area en blanco mediante <br> repetidos.

c) Recta horizontal <hr>. Tampoco se cierra (no hay </hr>).

d) <blockquote>. Es para definir un bloque de texto separado del resto, normalmente los clientes lo interpretarán con algo de indentación, o en cursiva, y con línea en blanco antes y después.

e) <address>. Se utiliza, normalmente al final del documento, para indicar el autor, y se considera que define otro bloque. Normalmente se mostrará en cursiva, alineada a izquierda ( a veces a derecha).

f) Texto preformateado: <pre>...</pre>. Sirve para que la página que muestra el cliente respete los espacios en blanco y saltos de línea que hay en el documento, que en otro caso se ignoran. Dentro de un <pre> se pueden incluir formularios, enlaces, etc.

Los espacios deben marcarse con espacios y no con tabuladores, aunque algunos clientes lo interpreten bien, y no se deben incluir elementos de bloque (<p>, cabeceras <hx>, <blockquote>, <address>...) .

Listas

Hay cuatro tipos de listas normales y los glosarios. De las cuatro normales, que son listas no numeradas, numeradas, listas de menú y directorios, las dos últimas casi no se usan. Las listas y glosarios se pueden anidar, esto es, incluir listas dentro de listas.

a) Listas no numeradas. Vienen definidas por:

<ul>

<li>...

...

</ul>

b) Listas numeradas. Vienen definidas por:

<ol>

<li>...

...

</ol>

c) Listas de menú. Son iguales pero algunos clientes las compactan un poco más, otros las dejan igual. Se utiliza:

<menu>

<li>...

...

</menu>

d) Directorios. Se utilizan igual, pero para términos mucho más cortos, generalmente algunas palabras. Algunos clientes las

distribuyen en varias columnas según el tamaño de la ventana.

<dir>

<li>...

...

</dir>

e) Glosarios (definition lists). Se suelen utilizar para listas de definiciones; típicamente, el cliente mostrará el término, y con un

salto de línea y tabulador, el texto de la definición. Se utilizan:

<dl>

<dt>término que hay que definir

<dd>texto de la definición.

...

</dl>

No hace falta que formen parejas <dt>,<dd>.

Los elementos de la lista o glosario, <li> o <dl>,<dd>, no tienen que cerrarse, aunque pueden, con </li> y </dl>, </dd>.

Tampoco hace falta poner un salto de línea al final del elemento de la lista.

Caracteres especiales

En HTML los caracteres especiales como letras acentuadas, o algunos símbolos como (c) se ponen mediante secuencias de escape. Aquí daremos los más usuales, que normalmente bastarán; para listas más completas consultar las referencias. En el caso de los acentos (agudo, grave, circumflejo, diéresis) en la lista los pongo únicamente para la letra A; evidentemente es similar para las demás.

Á ==> Á

Â ==> Â

À ==> À

Ä ==> Ä

Ç ==> Ç

Ñ ==> Ñ

Ø ==> Ø

á ==> á

â ==> â

æ ==> æ

à ==> à

° ==> °

5.- URL's y enlaces.

Como el WWW permite ir saltando de un documento a otro mediante los enlaces (links), sin que el usuario tenga que saber de donde provienen las distintas informaciones. Para establecer un enlace dentro de un documento se hace mediante el elemento <a>, que tiene la siguiente sintaxis:

<a href="URL">texto o imagen</a>

El usuario simplemente verá el texto resaltado (si es imagen normalmente llevará un fino marco de color) y cuando pulse sobre el texto o imagen que hay entre <a> y </a>, se redireccionará al URL. Veamos en qué consiste un URL.

Un URL sirve para representar de manera compacta un recurso de INTERNET y el método de acceso. El formato es el siguiente:

método://máquina/camino

El método de acceso puede ser http para acceder a documentos de WWW, ftp para transferencia de ficheros, gopher para acceder a documentos gopher, telnet para conexión remota a otra máquina, etc.

El nombre de la máquina (host) se puede poner en formato IP (internet protocol) que es numérico (por ejemplo

130.206.33.7) pero es más claro ponerlo en formato DNS (Domain Name System), por ejemplo:

ds5200.uib.es

donde 'ds5200' es la máquina, 'uib' la organización y 'es' es el país. La última sílaba (top level domain) corresponde al país si éste no es Estados Unidos, en caso contrario puede tener varios significados, los más importantes son:

com empresas

edu instituciones académicas

gov instituciones gubernamentales

net centros principales de redes

org otras organizaciones de las anteriores

Muchos servidores ponen un 'alias' al nombre de la máquina, www, que facilita su localización al usuario, y si se cambia el servidor de máquina no hay que cambiar la dirección.

Esto significa, en el caso de la UIB, que es equivalente llamar 'ds5200.uib.es' que 'www.uib.es'.

Por último, el camino indica la localización del fichero al que se quiere acceder dentro de la máquina.

Se puede definir un enlace indicando la localización relativa en lugar de la absoluta (obviamente para ficheros en la misma máquina). Con la barra '/' se indica que es relativo al directorio "por defecto" del servidor, Por ejemplo, el URL

"/imagenes/castillo.gif"

llama al fichero castillo.gif que está en el subdirectorio imagenes. El método de acceso se toma http y la máquina la misma del documento que lo llama. También se puede poner un enlace relativo al fichero en el que se encuentra el usuario, por ejemplo:

"../imagenes/castillo.gif"

Enlaces a un sitio dentro de otro documento

Dentro de un documento se puede marcar un sitio en particular como destino de llamadas de enlaces con el atributo NAME.

Por ejemplo, podemos marcar el capítulo 3 de un documento extenso de la siguiente manera:

<A NAME="cap-3">Capítulo tercero</A>

Y de este modo, desde el índice del documento se puede ir directamente a este capítulo mediante el enlace;

<A HREF="#cap-3">Capítulo tercero</A>

De la misma manera, si queremos ir a este capítulo en particular desde otro documento, sólo hay que añadir esta "marca" al URL del documento. Por ejemplo:

<A HREF="http://www.uib.es/document.html#cap-3">Capítulo tercero</A>

6.- Imágenes.

Las imágenes pueden ir dentro de un documento o ser llamadas por éste como fichero suelto en cuyo caso se hace como hemos dicho anteriormente. Para incluir una imagen en un documento se hace con el elemento <img>, que tiene la siguiente sintaxis:

El URL, como antes, puede hacer referencia a un fichero que esté en el propio servidor o en uno remoto. El formato de gráficos que se acepta para imágenes dentro de un documento es el GIF, aunque algunos clientes, como Netscape, aceptan también JPEG.

Hay un atributo muy importante del elemento img, el alt.. Este atributo permite ver un texto alternativo al gráfico, que se verá en caso de cliente no gráfico, o que el usuario haya deshabilitado la carga de imágenes de su cliente para aumentar la velocidad. Se utiliza:

Para hacer que una imagen que enlace con otro fichero se incluye entre los elementos <a> y </a>;

7.- Algunas funciones de HTML 3.0

Tablas

Una tabla se define mediante el elemento <table> y su correspondiente </table>. Cada fila de la tabla se define mediante <tr>, y dentro de ésta, se definen una o varias columnas, mediante <th> (si es cabecera) o <td>.

Estos elementos no necesitan cerrarse, aunque algunas versiones del Netscape sí lo requieren, mediante </tr>, </td>, </th>.

Dentro de una celda, podemos hacer que ésta se "expanda" en varias columnas o filas mediante los atributos colspan y rowspan. Por ejemplo:

<TABLE BORDER=1 WIDTH=400 HEIGHT=100 <R <TH COLSPAN=3USUARIOS EN INTERNET <TR <TH1995 <TH1996 <TH1997 <TR <TD BGCOLOR="#553366" ALIGN=CENTER1.500 <TD BGCOLOR="#226666" ALIGN=CENTER15.000 <TD BGCOLOR="#553322" ALIGN=CENTER80.000 </TABLE

asi se ve =>

USUARIOS EN INTERNET

1995 1996 1997

1.500 15.000 80.000

Esta tabla tiene dos columnas, en la primera hay una única celda que se ha "expandido" ocupando lo mismo que las tres celdas a su derecha. Veamos cómo quedaría:

imagen

linea 1 de texto

linea 2 de texto

linea 3 de texto

El documento Tables in Netscape explica muy bien el tema de las tablas, especialmente la página de ejemplos. De todas maneras hay que ir con cuidado con los atributos, ya que no todos son comunes a HTML 3.0.

Fondos

El borrador de la versión 3.0 de HTML permite utilizar imágenes como fondo de páginas. Para esto se utiliza el atributo background del elemento <body>, de la siguiente manera:

Donde imagen.gif puede ser un URL cualquiera que apunte a un gráfico. El fondo de página debe ser una imagen que ocupe poco espacio de disco, y debe irse con cuidado con que no perjudique la legilibilidad del documento (si ponemos fondos muy oscuros o con muchos contrastes será difícil de leer). Si queremos un fondo de un color único se hace mediante el atributo BGCOLOR, que veremos a continuación, o también se puede crear un pequeño GIF con ese color.

Los clientes Netscape y MS-explorer permiten definir colores del fondo y del texto con los atributos 'bgcolor', 'text', 'link', 'vlink', 'alink', del elemento <body>. La referencia al color se hace pasando a hexadecimal los valores R, G, B del color (por ejemplo bgcolor="#FFFFFF" es el blanco, corresponde a R=255, G=255 y B=255). Al poder variar el color del texto la elección del fondo queda mucho menos restringida, al poder poner fondos oscuros cambiando el color del texto a colores

claros.

Tamaño del texto

Para modificar el tamaño del texto tenemos varias posibilidades. HTML 3.0 introdujo los elementos <big> y <small> para modificar el tamaño, pero al final se está imponiendo el elemento de Netscape <font>, que ya es aceptado no solo por este cliente sino por muchos otros. Este elemento sirve para modificar el tamaño dándole valores absolutos o relativos. Veamos

algunos ejemplos:

<FONT SIZE=2>tamaño absoluto 2</FONT> se verá: tamaño absoluto 2

<FONT SIZE=5>tamaño absoluto 5</FONT> se verá: tamaño absoluto 5

<FONT SIZE=-1>tamaño relativo -1</FONT> se verá: tamaño relativo -1

<FONT SIZE=+2>tamaño relativo +2</FONT> se verá: tamaño relativo +2

Aunque las cabeceras también varían el tamaño de la fuente, la utilización de éstas (<h1>...<h6>) se debe hacer cuando realmente el texto sea una cabecera o titular.

Alineación de texto o imágenes

Para centrar texto o imágenes se hace mediante el elemento <center> y su correspondiente </center>. HTML 3.0 permite también centrar párrafos y cabeceras poniendo el atributo align=center a los elementos <P> y <Hx>.

JPG vs GIF

Debemos usar JPG cuando la imágen sea una foto. Cuando sea un logo, letras, o un dibujo utilizar GIF. Existen exepciones, pero esta es una buena regla general. Lo principal es que la imágen ocupe lo mínimo posible y que tenga una calidad aceptable. Todo vale, un GIF de 256 colores generalmente en un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar a menos de la mitad. No olvidar que a nadie (va, a muy pocos) le sobra ancho de banda, y menos en

nuestro país. Como regla, si una sola imagen pesa más de 50k hay que hacerla adelagazar! Muy grande para internet. Si quieren poner una imágen grande (hay casos que no hay otra), no obligar a la gente a bajarla poniendola directamente en la página, primero pongan un versión mini de digamos 150 x 100 pixels con una conexión a la grande, y avisando cuanto ocupa la grande antes de obligar a bajarla. Existen otras consideraciones sobre la paleta de colores, pero eso lo dejo para el último capitulo.

IMG SRC

Para incluir una imágen se utiliza el comando <IMG>.

IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:

Párametros de IMG

SRC

Indica el nombre de archivo de la imágen a incluir.

HEIGHT

Indica la altura de la imágen. El Netscape, si la altura no coincide con la original de la imágen,

esta es estirada o achicada para llegar a la altura especificada en este parámetro.

WIDTH

Indica el ancho de la imágen.

BORDER

Si la imágen tiene una conexión, especificando BORDER=0 desaparece el borde

caracteristico de una imágen con conexión. Si no deseamos que se vea el border, este es el

comando a utilizar.

ALIGN

Permite alinear una imágen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.

LOWSRC

Indica el nombre de archivo de la versión de carga rápida de una imágen. Muy útil para

agilizar el despliegue de una página pesada.

8.- Breve introducción a funciones más avanzadas

Imágenes sensitivas

Hay un tipo de enlace mediante imágenes sensitivas (imagemaps) que son imágenes en las que según en qué zona de la imagen pulse el usuario, apunta un URL u otro. En cuanto a programación HTML se refiere, lo único que hay que decir es que es una imagen normal, pero el URL al que apunta es la dirección de un fichero (map definition file) en el que están definidas las zonas que se pueden pulsar y sus respectivos URL's. Dentro del elemento img se pone ISMAP para avisar al servidor de quela imagen es sensitiva. Dependiendo de cada servidor se ponen estos dos ficheros (imagen y definición del mapa) en un directorio u otro.

Los navegadores modernos permiten los llamados Client-side Image Maps, esto es, Image Maps por parte del cliente. Éstos consisten en que el propio cliente recibe dentro de la página HTML la información de los distintos enlaces correspondientes a los distintos áreas de la imagen. Técnicamente son mejores pues evitan que esta tarea la haga el servidor disminuyendo su carga, además, permiten que toda la información se encuentre en la página sin tener que introducir ficheros adicionales en directorios especiales de la máquina.

Para escribir un CS Image Map debemos tener, en primer lugar, definidos los áreas de la imagen de tres formas: RECT (rectángulo), POLY (polígono), y CIRCLE (círculo). Hay que definir estos áreas en una sección de la página, y definir los enlaces correspondientes a vada área. En lugar de ISMAP se utiliza USEMAP, pero para que los usuarios que disponen de clientes antiguos sigan operativos se pueden poner ambas. Veamos un ejemplo, este código:

</MAP>

corresponde a este imagemap:

Además tiene la ventaja, para el usuario, de que ve hacia donde apunta cada área, cosa que no ocurre con los imagemaps "normales". En el ejemplo anterior no aparece el tipo de área; por defecto es rectangular y basta proporcionar los vértices superior izquierdo e inferior derecho. Si queremos un área circular, se definen por medio del punto central y el radio (3 números). El código sería:

<AREA SHAPE=CIRCLE COORDS="403,45,100" HREF...

Y en el caso del polígono pueden definirse tantos puntos como se quiera, dados por parejas de x,y.

Formularios (forms)

Los formularios permiten al usuario introducir información y enviarla al servidor donde debe haber algún método para gestionarla (un programa CGI). El elemento principal y su sintaxis es:

...

</form>

El atributo 'action' apunta a un documento o programa CGI; el método puede ser 'GET' (por defecto) o 'POST'. Si el método es 'GET', el contenido de los campos del formulario se añade al URL como si fuera parte de éste, en cambio si es 'POST', el contenido va en un cuerpo de datos aparte.

Entre el inicio y el fin del formulario van todos los elementos que definen los campos, hay varios tipos que vemos brevemente a continuación (input, select, textarea). Para consultar documentación más completa recomiendamos el documento NCSA fill-out-forms support.

<input> (no se cierra con </input>), se usa para especificar un campo de entrada. Los atributos son:

'type' cuyos valores son: text, password, checkbox, radio, submit y reset.

'name' es el nombre de la variable que se mandará junto al valor entrado por el usuario. No es lo que se ve en la página por parte del usuario.

'value' especifica valor por defecto.

'size' especifica el tamaño que ve el usuario.

'maxlength' el número máximo de caracteres que se aceptan.

Para darle al usuario la oportunidad de seleccionar uno de entre varios valores se utiliza el elemento <select>. Select tiene inicio y fin, y en medio se especifican las distintas opciones mediante el elemento <option>. El atributo name, como en el caso de <input>, será el nombre de la variable, asociado al valor elegido por el usuario. La estructura es:

<option>ibiza

<option>cordoba

<option>toledo

<option>...

</select>

Por ejemplo:

Valoració servidor UIB.

Contingut Disseny

Suggeriments, comentaris, etc.

Tema :

Por último, hay otro elemento que sirve para definir un bloque en el que el usuario introducirá texto; es el <textarea>. El tamaño del bloque se define mediante los atributos 'rows' y 'cols'. por ejemplo:

</textarea>

Programas CGI

El CGI (Common Gateway Interface,) es la interfacie que permite ejecutar programas externos (que serán las pasarelas o gateways) bajo un servidor de información. Una página HTML en general es estática, esto es, es un fichero de texto que no cambia. Si en vez de apuntar a una página se apunta a una programita CGI, éste se ejecuta en tiempo real y por tanto puede extraer información dinámica. No importa el lenguaje en el que se programe, aunque normalmente se hacen en C o PERL.

El ejemplo más típico e importante es el de acceso a bases de datos. Para cualquier base de datos existente en una máquina,puede crearse un programa CGI que acceda a esta base, extraiga información de ella y escriba el resultado en forma de páginas HTML.

Función MAILTO

En realidad es un programa CGI que sirve para enviar correo electrónico a una dirección, pero actualmente la mayoría de servidores ya lo incluyen. En la página de HTML se pone:

<a href="mailto:usuario@host">texto</a>

Por ejemplo:

Para pedir informacion, escribame a mi direccion e-mail:

<a href="mailto:[email protected]>[email protected]</a>.

9.- Referencias

Consultamos las especificaciones de HTML 2.0, así como el borrador de la versión 3.0 de HTML y una guía rápida de esta versión todas ellas en el consorcio W3.

Hay muchas guías de HTML, aquí daremos sólo 3 direcciones;

A Begginner's guide of HTML de la NCSA

Introduction to HTML and URL's

Bare Bones Guide to HTML

Para consultar los formularios, recomendamos el documento de la NCSA, Fill-out-forms support.

En cuanto a las tablas, es muy práctico el manual de Netscape "tables in Netscape".

Por otro lado, entre las guías de estilo más conocidas están:

Style guide for online hypertext, de Tim Berners-Lee, del consorcio W3

Composing good html.

Por último, una guía breve pero muy instructiva es Web Style.
OTROS TRABAJOS DE SIA

OLE

JAVA

FIREWALL

Consultas a [email protected]

URL	Definición
http://www.inacap.cl	En este caso solo se indica el servicio y la maquina y dominio. El resto de los parámetros se toman por defecto, el puerto 80, el directorio, el raíz del servidor y el documento por defecto de ese directorio.
http://www.inacap.cl/internet/internet.html	Esta URL está más completa en este caso se accede al fichero internet.html que se encuentra en el directorio internet del servidor de la WWW, www.inacap.cl.
http://www2.inacap.cl/serv/sii	Se accederá al fichero por defecto del directorio /serv/sii del servidor de la WWW, www2.inacap.cl
ftp://ftp.inacap.cl/imagenes/globo.gif	En este caso se accederá a un servidor de FTP anónimo, ftp.inacap.cl por el protocolo FTP y se accederá al fichero globo.gif del directorio de imagenes.
news:inacap.cl	En este caso se accederá al grupo de news de la uca en el servidor de news definido por defecto en el navegador de la WWW, esta opción solo es soportada por los navegadores más modernos.
mailto://[email protected]	Enviará un mail al equipo de la WWW IANCAP, esta opción solo es soportada por los navegadores más modernos.

<TABLE BORDER=1 WIDTH=400 HEIGHT=100 <R <TH COLSPAN=3USUARIOS EN INTERNET <TR <TH1995 <TH1996 <TH1997 <TR <TD BGCOLOR="#553366" ALIGN=CENTER1.500 <TD BGCOLOR="#226666" ALIGN=CENTER15.000 <TD BGCOLOR="#553322" ALIGN=CENTER80.000 </TABLE
asi se ve =>
USUARIOS EN INTERNET
1995	1996	1997
1.500	15.000	80.000