EDI 1º Apuntes 2015 – ISDFT 20

Diseño y
Programación
Web

Apuntes - Primera parte

Página 11 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

INDÍCE

ALGUNAS CONCEPTOS .................................................................................. 3

Página Web................................................................................................................... 3
Sitio Web ...................................................................................................................... 3
Portal............................................................................................................................. 4
XHTML ........................................................................................................................ 4
Etiquetas HTML ........................................................................................................... 4
Tag Attributes ............................................................................................................... 4
Elementos que componen un documento HTML .......................................... 5
DTD (Document Type Definition) ............................................................................... 6
Las 3 etiquetas más importantes ................................................................................... 6
HEAD ....................................................................................................................... 6
Etiqueta Title ........................................................................................................ 6
Etiqueta Meta........................................................................................................ 6
Diferencias entre HTML y XHTML ................................................................ 6
BODY ....................................................................................................................... 7
Formateando texto ................................................................................................ 8
Formato del párrafo .......................................................................................... 8
Las 6 cabeceras ................................................................................................. 9
Cambiando el tipo de letra................................................................................ 9
Formato de frase ............................................................................................. 10
Otros elementos .............................................................................................. 10
Caracteres especiales ...................................................................................... 11
Caracteres especiales del HTML 3.2 ............................................................... 12
Otros caracteres especiales .............................................................................. 13
Enlaces................................................................................................................ 14
Rutas relativas y rutas absolutas ...................................................................... 14
URL ................................................................................................................ 15
Secciones ........................................................................................................ 16
Enlaces a secciones del mismo documento ..................................................... 16
Listas................................................................................................................... 17
Listas desordenadas ........................................................................................ 17
Listas ordenadas ............................................................................................. 17
Listas de definiciones ..................................................................................... 18
Imágenes ............................................................................................................. 19
Imágenes y enlaces ......................................................................................... 19
Alineación respecto al texto ........................................................................... 20
Principales posibles valores del atributo align ................................................ 20
Mapas ................................................................................................................. 21
Mapas gestionados por el cliente.................................................................... 21
Cómo usar un mapa ......................................................................................... 22
Tablas ................................................................................................................. 23
El atributo Border ........................................................................................... 23
Celdas de Encabezado .................................................................................... 23
Celdas vacías .................................................................................................. 24
Combinar celdas de una misma fila o columna .............................................. 25
Tamaño ........................................................................................................... 26
Ubicación del contenido dentro de una celda ................................................. 27
Esquema gráfico de los atributos vistos anteriormente .................................. 29

Página 22 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

Colores de fondo.............................................................................................. 30
Principales diferencias entre HTML y XHTML ................................................ 31

ALGUNAS CONCEPTOS

Página Web

Una página de Internet o página Web es un documento electrónico que contiene

información y que es almacenado en algún sistema de cómputo que se encuentre
conectado a la red mundial de información denominada Internet, de tal forma que este
documento pueda ser consultado por cualesquier persona que se conecte a esta red
mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo.
Una página Web es la unidad básica del World Wide Web.
Una página Web tiene la característica peculiar de que el texto se combina con
imágenes para hacer que el documento sea dinámico y permita que se puedan ejecutar
diferentes acciones, una tras otra, a través de la selección de texto remarcado o de las
imágenes, acción que nos puede conducir a otra sección dentro del documento, abrir
otra página Web, iniciar un mensaje de correo electrónico o transportarnos a otro Sitio
Web totalmente distinto a través de sus hipervínculos.
Estos documentos pueden ser elaborados por los gobiernos, instituciones educativas,
instituciones públicas o privadas, empresas o cualquier otro tipo de asociación, y por las
propias personas en lo individual.

Sitio Web

Es un conjunto de archivos electrónicos y páginas Web referentes a un tema en

particular, que incluye una página inicial de bienvenida, generalmente denominada
home page, con un nombre de dominio y dirección en Internet específicos.
Empleados por las instituciones públicas y privadas, organizaciones e individuos para
comunicarse con el mundo entero. En el caso particular de las empresas, este mensaje
tiene que ver con la oferta de sus bienes y servicios a través de Internet, y en general
para hacer más eficientes sus funciones de mercadotecnia.
Su Sitio Web no necesariamente debe localizarse en el sistema de cómputo de su
negocio. Los documentos que integran el Sitio Web pueden ubicarse en un equipo en
otra localidad, inclusive en otro país. El único requisito es que el equipo en el que
residan los documentos esté conectado a la red mundial de Internet. Este equipo de
cómputo o Servidor Web, como se le denomina técnicamente, puede contener más de
un sitio Web y atender concurrentemente a los visitantes de cada uno de los diferentes
sitios .
Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección
particular para que los usuarios puedan acceder a la información contenida en ellos.
Estas direcciones, o URLs (por sus siglas en inglés Uniform Resource Locator),
aparecen cotidianamente en todos los medios de comunicación como son prensa escrita,
radio, televisión, revistas, publicaciones técnicas y en el propio Internet a través de los
motores de búsqueda (por su denominación en inglés search engines). Los nombres de

Página 33 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

estos sitios Web obedecen a un sistema mundial de nomenclatura y están regidos por el
ICANN (Internet Corporation for Assigned Names and Numbers).
Los Sitios Web pueden ser de diversos géneros, destacando los sitios de negocios,
servicio, comercio electrónico en línea, imagen corporativa, entretenimiento y sitios
informativos.

Portal

Portal es un término, que se utiliza, para referirse a un Sitio Web que sirve o pretende
servir como un sitio principal de partida para las personas que se conectan al World
Wide Web. Son sitios que los usuarios tienden a visitar como sitios ancla. Los portales
tienen gran reconocimiento en Internet por el poder de influencia que tienen sobre
grandes comunidades.
La idea es emplear estos portales para localizar la información y los sitios que nos
interesan y de ahí comenzar nuestra actividad en Internet. Un Sitio Web no alcanza el
rango de portal sólo por tratarse de un sitio robusto o por contener información
relevante. Un portal es mas bien una plataforma de despegue para la navegación en el
Web.

XHTML

XHTML está basado en HTML. HTML (Hipertext Markup Language ) desde sus
orígenes ha ído teniendo limitaciones, que impedían la evolución de los documentos
web.
Comenzaremos viendo HTML 4.0 ya que es la base para XHTML (eXtensible
Hipertext Markup Language) que es la combinación de HTML y otro lenguaje muy
popular , XML(eXtensible Markup Language)

Los documentos HTML son archivos de texto con elementos HTML .Estos elementos
se definen usando etiquetas o tags HTML que nos permiten hacer páginas web.

Etiquetas HTML

• Las etiquetas HTML siempre van entre dos caracteres “<” y “>”
• Normalmente se escriben como pares ej:<b> y </b>
• La primera es la etiqueta de inicio del elemento, y la segunda etiqueta
indica el fin del elemento.
• El texto entre las dos etiquetas es el contenido.
• Las etiquetas HTML no son case sensitive, es decir <b> es lo mismo que
<B>, pero si sea desea seguir los últimos estándares siempre deben
escribirse las etiquetas con minúscula ya que el World Wide Web
Consortium (W3C) recomienda esto para HTML 4.0 y XHTML lo exige.

Tag Attributes

Página 44 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

Las etiquetas pueden tener atributos. Estos proven información adicional sobre un
elemento HTML.
La siguiente etiqueta define una tabla: <table>. Con un atributo de borde, usando este
atributo podemos decirle al navegador que queremos que la tabla se muestre sin bordes:
<table border="0">
Los atributos siempre se escriben en forma de pares clave/valor de la siguiente forma:
name="value".
Los atributos siempre se escpecifican en la etiqueta de apertura de un elemento html.

Elementos que componen un documento HTML

Veremos los principales elementos que componen una página web sencilla, como la
siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mi primera página</title>
</head>
<body>
<p>¡Hola mundo!</p>
</body>
</html>

Abriremos nuestro editor y copiaremos el texto, luego lo guardamos. Vamos a

archivo>Guardar como… y en el cuadro de dialogo escribimos: index.html.

Interesante:
No se sabe quién, dónde o cuándo, pero alguien un día afirmó que guardar documentos en formato .htm en
lugar de .html podría causar problemas de visualización al navegador o, lo que es aún peor, al servidor Web
anfitrión.
Hay que aclarar de inmediato que esta afirmación es completamente infundada y no tiene ninguna
justificación técnica. En realidad no existe una extensión mejor y otra peor, aun cuando pueden existir
algunas diferencias desde el lado servidor. Examinemos este punto con más detalle.

Todos los servidores (tanto NT como Linux) están impostados para reconocer en cada carpeta creada un
archivo por defecto, que es invocado por el navegador. Pongamos un ejemplo:

Si tecleas www.htmlpoint.com en tu navegador, llegarás a la portada de HTMLpoint. Si miras la línea del URL
del navegador, puedes observar que no aparece ningún archivo, sino sólo la dirección www.htmlpoint.com.
En realidad lo que estás viendo es el archivo por defecto del servidor de HTMLpoint denominado index.html.
Dicho de otro modo, si tecleas www.htmlpoint.com sin especificar el documento que hay que visualizar, el
servidor visualiza automáticamente el archivo index.html presente en la carpeta invocada. Si el archivo
index.html no estuviera en el directorio, el navegador respondería con un mensaje de "404 URL NOT
FOUND". Este mecanismo funciona con todo directorio, por lo cual si tecleas www.htmlpoint.com/dynamic,
verás el archivo index.html presente en ese directorio.

Los servidores pueden impostarse para invocar por defecto cualquier archivo (index.html, index.htm,
index.asp, index.xml, etc. son los más comunes), así como para invocar más de uno. En este último caso, el
servidor invoca el primer archivo de la lista, a falta del cual invocará el segundo y así sucesivamente hasta
encontrar el archivo justo.

Ahora podemos comprender cuándo y por qué la extensión del primer documento del sitio (que normalmente
hospeda la portada) puede ser importante.
Si tu sitio está hospedado en una comunidad virtual, verifica consultando la ayuda cuál es el primer archivo
que se visualiza (generalmente index.html); pregunta lo mismo a tu suministrador de hospedaje si has
comprado un espacio comercial.

Como conclusión, una nota sobre los sistemas operativos a 8 bit como Windows 3.1 . Dichos sistemas
reconocen únicamente nombres de archivos con un máximo de 8 caracteres de longitud y con una extensión

Página 55 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

máxima de 3 caracteres. Por tanto, es posible que estas plataformas no visualicen los archivos con extensión
.html. Por ello, es oportuno no dar a los archivos nombres que superen los 8 caracteres.1

DTD (Document Type Definition)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Esta primera parte de el documento tiene por función informar al navegador, el formato
que va a tener el contenido del documento, como se puede ver hace referencia a un
archivo con extensión .dtd que define las normas que se deberán seguir en la creación
del documento, los dtd son muy usados en XML, y son muy importantes en la
validación de documentos de marcas.

Las 3 etiquetas más importantes

Todo documento HTML debe comenzar con <html> y terminar con la etiqueta de cierre
</html>. Esta etiqueta le indican al navegador o explorador, el comienzo y el final
,respectivamente, del documento html.

HEAD

La sección delimitada por las etiquetas <head></head> contiene información general

para el navegador que no será mostrada en el explorador, comúnmente llamada meta-
información (información referida a la información).

De acuerdo con el estándar HTML, solamente unas pocas etiquetas están permitidas
dentro de la sección head. Estas son: <base>, <link>, <meta>, <title>, <style> y
<script>.

Etiqueta Title

La etiqueta <title> define el título de la página como vimos en el ejemplo anterior.

Etiqueta Meta

La etiqueta <meta> provee meta-información sobre la página, como la descripción y las

palabras claves, que serán usadas por los motores de búsqueda.

Diferencias entre HTML y XHTML

En HTML la etiqueta <meta> no tiene etiqueta de cierre.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

En XHTML la etiqueta <meta> debe ser cerrada obligatoriamente.

1
Art. publicado en http://www.htmlpoint.com/guida/problemi/html_05.htm

Página 66 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Ejemplos:

Definir palabras claves para los motores de búsqueda:

<meta name="keywords" content="Unnoba, programación, internet, HTML, XHTML,
CSS, XML, JavaScript, PHP" />

Definir la descripción de la página web:

<meta name="description" content="Web con apuntes de la material Programación de
Internet" />

Actualizar la página cada 5 segundos:

<meta http-equiv="refresh" content="5" />

BODY

La sección delimitada por las etiquetas <body></body> contiene el contenido

visualizable, de la página. En el ejemplo anterior, sólo contiene un párrafo con la
exclamación Hola Mundo.
Pero dentro de esta etiqueta irá todo el contenido visible del sitio.

Página 77 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

Formateando texto
Se pueden establecer varias categorías para las etiquetas que se utilizan para dar
formato al texto. Las dividiremos entre las que sirven para cambiar párrafos enteros y
las que son capaces de formatear cadenas de caracteres dentro de un párrafo.

Formato del párrafo

Estas son las etiquetas más importantes (excluyendo algunas que veremos más
adelante):

Etiqueta Utilidad Resultado

<p>
Sirve para delimitar un párrafo. Inserta
Soy un párrafo
una línea en blanco antes del texto.
<center> ... Yo soy normal
</center> Permite centrar todo el texto del párrafo.
Yo estoy centrado
Representa el texto encerrado en ella con
un tipo de letra de paso fijo. Muy útil a la
<pre width=x> Estoy en paso
... </pre> hora de representar código fuente. El fijo
parámetro WIDTH especifica el número
máximo de caracteres en una línea.
Permite alinear el texto del párrafo a la
Ala izquierda
<div align=x> izquierda (align=left), derecha
... </div> Yo al centro
(right), al centro (center) o a ambos
A la derecha
márgenes (justify)

<address> ...
Andrea P. Griselli
</address> Para escribir direcciones (de casas). Cabrera 373
Junín, Buenos Aires
Para citar un texto ajeno. Se suele
<blockquote>
implementar dejando márgenes tanto a
...
</blockquote> izquierda como a derecha, razón por la
que se usa habitualmente.

Página 88 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

Las 6 cabeceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:

Etiqueta Resultado

<h1> ... </h1> Cabecera de nivel 1

<h2> ... </h2> Cabecera de nivel 2
<h3> ... </h3> Cabecera de nivel 3
<h4> ... </h4> Cabecera de nivel 4
<h5> ... </h5> Cabecera de nivel 5
<h6> ... </h6> Cabecera de nivel 6

No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de

letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir
correctamente en secciones nuestra página, tal y como se hace en un documento de
texto normal.

Cambiando el tipo de letra

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de
letra que estemos utilizando y se pueden utilizar con cadenas de caracteres que estén
dentro de un párrafo.

Etiqueta Utilidad Resultado

Soy un texto
<b> ... </b> Pone el texto en negrita. negro como el
tizón
<i> ... </i> Representa el texto en cursiva. Estoy ladeado
Como soy muy
<u> ... </u> Para subrayar algo. importante estoy
subrayado
<s> ... </s><imagenenlinea A mí, en
direccion="graficos/32.gif" Para tachar. cambio, nadie
descripcion="HTML 3.2"/> me quiere
Permite representar el texto en No soy
<tt> ... </tt> variable
un tipo de letra de paso fijo.
^... Letra superíndice. E=mc2
_... Letra subíndice. ai,j=bi,j+1

Página 99 de 32
 EDI 1º Apuntes 2015 – ISDFT 20

Formato de frase

En estos elementos indicas el tipo de información que encierran las etiquetas, pero no
como se representan:

Etiqueta Utilidad Resultado

<cite> ...
</cite> Para citar un texto ajeno. Esta frase no es mía
<code> ...
Para escribir código fuente. int x=0;
</code>
<strong> ...
</strong> La cosa es importante. Hay cosas importantes.

Hay que poner énfasis en

<em> ... </em> Para dar énfasis.
algunas cosas.
<kbd> ... El usuario debe teclear lo
</kbd> Texto tecleado por el usuario.
mejor de todo
<var> ... Representar variables de un La variable x, definida
</var> código. anteriormente...
<samp> ... Para representar una serie de
</samp> Estoy en un literal
caracteres literalmente.
<abbr> ... La WWW usa el protocolo
</abbr> Abreviaturas.
http

No son muy utilizados, ya que no permiten tener un control exacto de la manera en que
la página se representará finalmente, dependen mucho del navegador.

Otros elementos

Por último, debemos estudiar algunas cosas que no son texto y que podemos incorporar
a nuestra página.

Etiqueta Utilidad Resultado

Inserta una barra
<hr>
horizontal.

<br>
Hay un antes y un
Salto de línea.
después de saltar a otra línea
<!-- ... --> Comentarios.

Página 1010 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Caracteres especiales

Las máquinas manejan información en formato binario (es decir, en unos y ceros).
Estos, a su vez, forman números, los cuales se traducen en letras. ¿Cómo? Mediante
tablas, donde se relaciona, por ejemplo, el valor 64 a la letra a, el 65 a la b, etc.

Cada fabricante de computadoras puede adoptar una tabla diferente al resto. Para
evitarlo existen diversos estándares y el más extendido es el ASCII. De hecho,
actualmente todos los ordenadores tienen la misma tabla ASCII para los primeros 127
caracteres. Pero esa tabla no contiene vocales con acento, ni eñes, ni símbolos de abrir
interrogación o exclamación.

Además una página web se ha de ver en países distintos, que usan conjuntos de
caracteres distintos. Y entonces el lenguaje HTML nos ofrece un mecanismo por el que
podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los
ordenadores del mundo, independientemente de su juego de caracteres(tabla).

Este conjunto son los caracteres especiales. Cunado queremos poner uno de estos
caracteres en una página, debemos sustituirlo por su código.

Caracteres especiales básicos

En realidad estos caracteres se usan en HTML para no confundir un principio o final de

etiqueta, unas comillas o un & con su correspondiente carácter.

&lt; < &gt; >

&amp; & &quot; "

Caracteres especiales del HTML 2.0

&Aacute; Á &Agrave; À
&Eacute; É &Egrave; È
&Iacute; Í &Igrave; Ì
&Oacute; Ó &Ograve; Ò
&Uacute; Ú &Ugrave; Ù
&aacute; á &agrave; à
&eacute; é &egrave; è
&iacute; í &igrave; ì
&oacute; ó &ograve; ò
&uacute; ú &ugrave; ù
&Auml; Ä &Acirc; Â

Página 1111 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

&Euml; Ë &Ecirc; Ê
&Iuml; Ï &Icirc; Î
&Ouml; Ö &Ocirc; Ô
&Uuml; Ü &Ucirc; Û
&auml; ä &acirc; â
&euml; ë &ecirc; ê
&iuml; ï &icirc; î
&ouml; ö &ocirc; ô
&uuml; ü &ucirc; û
&Atilde; Ã &aring; å
&Ntilde; Ñ &Aring; Å
&Otilde; Õ &Ccedil; Ç
&atilde; ã &ccedil; ç
&ntilde; ñ &Yacute; Ý
&otilde; õ &yacute; ý
&Oslash; Ø &yuml; ÿ
&oslash; ø &THORN; Þ
&ETH; Ð &thorn; þ
&eth; ð &AElig; Æ
&szlig; ß &aelig; æ

Caracteres especiales del HTML 3.2

&frac14; ¼ &nbsp;
&frac12; ½ &iexcl; ¡
&frac34; ¾ &pound; £
&copy; © &yen; ¥
&reg; ® &sect; §
&ordf; ª &curren; ¤
&sup2; ² &brvbar; ¦
&sup3; ³ &laquo; «
&sup1; ¹ &not; ¬
&macr; ¯ &shy;
&micro; µ &ordm; º
&para; ¶ &acute; ´
&middot; · &uml; ¨
&deg; ° &plusmn; ±
&cedil; ¸ &raquo; »
&iquest; ¿

Página 1212 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Otros caracteres especiales

&times; × &cent; ¢
&divide; ÷ &euro; €
&#147; “ &#153; ™
&#148; ” &#137; ‰
&#140; Œ &#131; ƒ
&#135; ‡ &#134; †

Página 1313 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Enlaces

La característica que más ha influido en el espectacular éxito del web

ha sido, además de su capacidad multimedia, la posibilidad de unir
los distintos documentos repartidos por todo el mundo mediante
enlaces hipertexto (o hiperenlaces). Los navegadores destacan los
elementos identificados como enlaces con colores o con subrayados.

La única etiqueta HTML relacionada con el hipertexto es <a> (que proviene de

«ancla»). Para incluir un ancla en un documento hay que seguir los siguientes pasos:

1. Iniciar el ancla con <a (incluyendo un espacio tras la a).

2. Especificar el documento que se está enlazando introduciendo el atributo
<href="nombre_de_fichero"> seguido por un corchete angular cerrado (>).
3. Introducir el texto o la imagen que servirá como el enlace hipertexto en el
documento actual.
4. Cerrar la etiqueta del ancla con </a>.

Por ejemplo si quisieramos crear un link a una página llamada link.html que se
encuentra en el mismo directorio escribiríamos:

<a href="nueva.html">Mi primer link</a>

Rutas relativas y rutas absolutas

Es posible enlazar a otros documentos situados en otros directorios especificando la ruta

relativa desde el documento actual. Por ejemplo, un enlace a un documento hipotético
llamado pepe.html ubicado en el subdirectorio misub sería así:

<a href="misub/pepe.htm">Curriculum Vitae de Pepe</a>

Estos enlaces se llaman enlaces relativos porque en ellos se especifica la ruta al

documento enlazado relativa al documento actual. También pueden usarse las rutas
absolutas (la dirección URL completa) del documento, pero los enlaces relativos son
más eficientes durante el acceso al servidor. Las rutas utilizan la sintaxis UNIX. La
sintaxis para acceder al directorio superior (el directorio que contiene el subdirectorio
actual) es .. (punto punto).

Si, por ejemplo, estabas en el documento hipotético pepe.htm, en el subdirectorio

misub, y quisieras volver al documento inicial llamado index.html, tu enlace debería ser
como este:

<a href="../index.html">Inicio</a>

Generalmente, deberiamos utilizar enlaces relativos por tres motivos:

1. Los enlaces son independientes de la localización y, por tanto, es más fácil

mover un grupo de documentos a otra localización, pues las rutas relativas aún
seguirían siendo válidas.

Página 1414 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

2. La conexión con el servidor es más eficiente.

3. Hay que escribir menos texto.

En cualquier caso, utiliza rutas absolutas sólo cuando necesites enlazar a documentos
que no están directamente relacionados.

URL

Un URL (Localizador Uniforme de Recursos) especifica la localización de ficheros de

otros servidores, incluyendo el tipo de recurso a que se accede, la dirección del servidor
y la ubicación del fichero. La sintaxis es:

esquema://servidor.dominio[:puerto]/ruta/fichero?argumento

Los esquemas más comunes son los siguientes:

http:
El protocolo de transferencia de hipertextos es el método de acceso más común. El
fichero recuperado puede ser un documento HTML, un fichero gráfico, un fichero de
sonido, una animación, una secuencia MIDI o cualquier otro tipo de fichero. Dependerá
del navegador que el fichero recuperado pueda ser manejado o no.
https:
Una variación del método estándar de acceso para ofrecer un cierto nivel de seguridad
en la transmisión.
file:
Acceso a ficheros locales. El navegador carga un fichero de un disco accesible
localmente. Se usa comúnmente para previsualizar páginas desarrolladas en un
ordenador que dispone de navegador, pero no tiene acceso a un servidor.
ftp:
El protocolo de transmisión de ficheros se utiliza para recuperar ficheros. La mayoría de
navegadores pedirán una ruta para guardar el fichero.
mailto:
Abre un formulario de correo electrónico. En la mayoría de las máquinas Outlook
Express. Ej:

<a href="malito:[email protected]?subject=Consulta">manual
de edición en html</a>

news:
Servidor de noticias Usenet. El argumento corresponde al grupo de noticias o al nombre
del artículo.
telnet:
Acceso remoto a un terminal. Los argumentos son el identificador de la sesión como
usuario[:contraseña]@servidor

Por ejemplo, para incluir un enlace a yahoo, deberías escribir:

<a href="http://www.yahoo.com.ar">Yahoo</a>

Página 1515 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Secciones

Las anclas puedes usarse para trasladar al lector a una sección particular de un
documento.
Una sección que necesita ser enlazada debe estar marcada con un ancla. El ancla se crea
como se puede ver en el siguiente ejemplo:

<a name="02">Subir</a>

Para enlazar a una sección concreta de otra página sólo hay que crear un enlace a esa
página añadiendo el carácter # y el nombre del ancla.

El siguiente ejemplo:

<a href="otrapag.html#02">2da. Parte de Otro documento</a>

llevaría a la 2da parte del documento otrapag.hmtl.

Enlaces a secciones del mismo documento

Se emplea la misma técnica, pero excluyendo el nombre del fichero.

<a href="#01">rutas relativas y rutas absolutas</a>

Hay que asegurarse de incluir la etiqueta <a name="nombre_del_ancla"> allí a donde

quieres que salte el enlace.

Página 1616 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Listas

Existen varios tipos de listas en HTML. Todas ellas se pueden anidarse, es decir incluir
otras dentro de ellas. Todos los tipos siguen el siguiente formato:

<tipo_lista>
<li>primer elemento</li>
<li>segundo elemento</li>
</tipo_lista>

tipo_lista puede ser una de las siguientes: dir, dl, menu, ol y ul.

Listas desordenadas

La etiqueta <ul> nos permite presentar listas de elementos sin orden alguno. Cada
elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<ul>
<li>Primer Elemento</li>
<li>Segundo elemento</li>
</ul>
se verá como:

• Primer elemento
• Segundo elemento

La etiqueta <ul> admite estos parámetros:

TYPE="disc", "circle", "square"

Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor
flexibilidad se admite también como parámetro de <li>.

• Tipo disc
o Tipo circle
ƒ Tipo square

También son listas desordenadas aquellas que utilizan las etiquetas <dir> y <menu>. En
principio tenían como propósito representar una lista estilo directorio (multicolumna) o
tipo menú (una sola columna). En la práctica los navegadores lo han implementado
como sinónimos de <ul>, por lo que no los estudiaremos.

Listas ordenadas

La etiqueta <ol> nos permite presentar listas de elementos ordenados de menor a mayor.
Normalmente cada elemento de la lista irá precedido por su número en el orden. Por
ejemplo,

<ol>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
</ol>
se verá como

Página 1717 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

1. Primer elemento
2. Segundo elemento

La etiqueta <ol> admite estos parámetros:

TYPE="1", "a", "A", "i", "I"

Indica al navegador el tipo de numeración que precederá a cada elemento de la lista.
Para mayor flexibilidad se admite también como parámetro de <li>.
1. Tipo 1
a. Tipo a
A. Tipo A
i. Tipo i
I. Tipo I
START="num"
Indica al navegador el número por el que se empezará a contar los elementos de la lista.

3. Primer elemento
4. Segundo elemento

Listas de definiciones

Este es el único tipo de lista que no utiliza la etiqueta <li>. Al tener como objetivo
presentar una lista de definiciones, de modo que tiene que representar de manera distinta
el objeto definido y la definición. Esto se hace por medio de las etiquetas <dt> y <dd>:

<dl>
<dt>Primer elemento</dt><dd>Es un elemento muy bonito.</dd>
<dt>Segundo elemento</dt><dd>Este, en cambio, es peor.</dd>
</dl>

se verá como

Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.

Página 1818 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Imágenes
Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta
<img> de esta manera:

<img src="fichero_grafico" alt="descripcion">

El atributo src especifica el nombre del fichero que contiene el gráfico. Los formatos
estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer
aceptan también el formato PNG.

El parámetro alt especifica el texto que se mostrará en lugar de la imagen en aquellos

navegadores que no sean capaces de mostrarlos y en el supuesto de que el usuario los
haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por
encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver
nunca, conviene ponerlo siempre. De hecho, el estándar HTML 4.0 obliga a hacerlo.

Existen dos atributos que conviene indicar siempre: la altura y el ancho de la imágen en
pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen
mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente
mientras tanto.

Por ejemplo para insertar un imagen que se encuentra en el subdirectorio images

llamada mi_imagen.gif, deberiamos poner:

<img src=images/mi_imagen.gif" alt="Descripci&oacute;n" width="88" height="31">

donde width y height representan el ancho y alto en pixeles, respectivamente.

Observación: Si prestamos atención vemos que la etiqueta img , no tiene una

etiqueta de cierre, </img> ni termina en /> , esto es porque recordemos que
estamos viendo html 4.0, cuando veamos las dif. con xhtml, verán que la
etiqueta terminará con /> es decir quedará así:
<img src=images/mi_imagen.gif" alt="Descripci&oacute;n" width="88"
height="31" />

Imágenes y enlaces

Es común utilizar enlaces que son una imágen. En ese caso, por defecto, los
navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace.
Práctico, pero la mayoría de las veces bastante poco estético. Por medio del atributo
border podremos alterar el grosor de ese borde o incluso eliminarlo poniendolo a cero.

<a href="http://www.yahoo.com.ar">
<img src="images/logo_yahoo.gif" alt="Ir a yahoo" width="88" height="31" >
</a>

y,

<a href="http://www.yahoo.com.ar">
<img src="images/logo_yahoo.gif" alt="Ir a yahoo" width="88" height="31"
border="0">
</a>

Página 1919 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

elimina el borde.

Alineación respecto al texto

Para poder maquetar conjuntamente texto y gráficos, HTML proporciona, por medio del
parámetro align, las siguientes maneras de alinear una imagen respecto del texto que la
acompaña:

Principales posibles valores del atributo align

top
Coloca el punto más alto de la imagen coincidiendo con el punto más alto de la línea de
texto actual.
middle
Alinea el punto medio (en altura) de la imagen con la base del texto.
bottom(Por defecto)
Alinea el punto más bajo de la imagen con la base del texto.
left
Coloca la imagen a la izquierda del texto.
right
Coloca la imagen a la derecha del texto.
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del
alfabeto excepto algunas como la p, la g o la j.

Página 2020 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Mapas
Hemos visto que podemos hacer enlaces de texto y de imágenes. Pero también existe
otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Esto
se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada
una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de
hacerlo:
• Mapas gestionados por el cliente (el navegador).
• Mapas gestionados por el servidor.
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del
estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos
mapas. Debido a ello, Netscape elaboró un sistema propio que fue incluido en el
estándar 3.2: los mapas gestionados por el navegador.

Mapas gestionados por el cliente

Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen.
Vamos primero a declarar nuestro mapa:

<map name="mi_mapa">
<area shape=... coords=... alt="enlace a..">
...
</map>

Dentro de la etiqueta map sólo podremos definir el nombre del mapa (algo
imprescindible, por otra parte). Es dentro de cada elemento area donde podremos definir
cosas más interesantes:

shape
Define la forma de la zona, que podrá ser rectangular, circular o poligonal.
coords
Coordenadas (separadas por comas) que definen la zona. El número y significado de
esas coordenadas dependerá de la zona.
href
URL a donde irá el usuario si pulsa sobre esa zona.
nohref
Especifica que esa zona no tiene asignado enlace alguno.
alt
Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder
al enlace.
Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se
definen exactamente las formas y coordenadas:

En la siguiente tabla lo aprenderemos:

Página 2121 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

SHAPE COORDS

rect
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y
Rectangular
(x2,y2) la inferior derecha.
Circular circ "x,y,radio" siendo (x,y) el centro del círculo y radio su radio
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una
Polígono poly esquina del polígono. La última pareja de coordenadas se unirá
irregular
a la primera para cerrar el polígono.
Toda la default No se indican.
imagen

Cómo usar un mapa

Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace
del siguiente modo:

<img src=... usemap="#mi_mapa">

Siempre tenemos que añadir al comienzo del nombre de nuestro mapa el signo numeral
(#). Vamos a ver un ejemplo:

<map name="navegadores">
<area shape=rect coords="0,0,24,31"
href="http://www.netscape.com" alt="netscape">
<area shape=rect coords="26,0,53,31"
href="http://www.microsoft.com" alt="microsoft">
<area shape=default nohref alt="nada">
</map>
<img src="nav.gif" width=53 height=31 border=0 usemap="#navegadores">

Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no
conduce a ningún URL por si el usuario pulsa con el ratón donde no debe.

Página 2222 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Tablas

Las tablas se definen con la etiqueta <table>. Una tabla está dividida en filas (con la
etiqueta <tr>), y cada fila está dividida en celdas (con la etiqueta <td>). Una celda puede
contener texto, imágenes, listas, párrafos, formularios (que aún no hemos visto), líneas
horizontales, otras tablas, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Se vería así:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

El atributo Border

Si no se especifica el atributo border la tabla se mostrará sin borde. Esto es útil cuando
queremos utilizar las tablas sólo para darle estructura a la página, pero otras veces
queremos que se vean los bordes.
Para mostrar una tabla con bordes, debemos utilizar el atributo border de la siguiente
manera:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Y se vería así:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Celdas de Encabezado

Este tipo de celdas se define con la etiqueta <th>.

<table border="1">
<tr>

Página 2323 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

<th>Encabezado</th>
<th>Otro encabezado</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Y en el navegador se vería así:

Encabezado Otro Encabezado

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Celdas vacías

Las celdas sin contenido, no se muestran en la mayoría de los navegadores.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

Como se vería:

Noten que no se ven los bordes alrededor de la celda vacía.

Para solucionar esto, agregaremos un espacio (&nbsp;) en la celda que debería estar
vacía, de la siguiente manera:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

Página 2424 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Combinar celdas de una misma fila o columna

Si observamos la cantidad de filas de una tabla, está dada por la cantidad de pares de
etiqueta <tr></tr> que se encuentren dentro de la etiqueta table. Y la cantidad de
columnas, está dada por la mayor cantidad de pares de etiquetas <td></td> que se
encuentren dentro de una fila.

Supongamos que tenemos una tabla de 3x2, es decir 3 filas y 2 columnas, el código
sería el siguiente:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

Si quisiéramos que en la primera fila en vez de dos celdas haya una sola que ocupe todo
el ancho de la tabla. Deberíamos hacer lo siguiente, primeramente en el primer par de
etiquetas <tr></tr> debemos dejar una sola celda, quedando de la siguiente manera:

<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

Pero el código siguiente se vería así:

que no es lo que queremos, queremos que la celda de la fila 1, ocupe todo el ancho de la
tabla, para eso las celdas tienen un atributo llamado rowspan en el que se puede indicar
cuantas columnas va a ocupar esa celda de esta manera con el siguiente código
tendríamos lo buscado.

<table border="1">
<tr>
<td colspan="2">row 1, cell 1</td>

Página 2525 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

Veamos:

row 1, cell 1
row 2, cell 1 row 2, cell 2
row 3, cell 1 row 3, cell 2

De la misma manera si quisiéramos que se unieran la primer celda de la fila 1 y la

primer celda de la fila 2, existe otro atributo de td que se llama rowspan y se utiliza de
la siguiente forma.

<table border="1">
<tr>
<td rowspan="2">row 1, cell 1</td>
<td >row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

y se vería de la siguiente forma, prestemos atención que en el código la fila 2, sólo tiene
una celda, ya que el lugar de la primera es ocupado por la primera celda de la fila 1:

row 1, cell 2
row 1, cell 1
row 2, cell 2
row 3, cell 1 row 3, cell 2

Tamaño

Cuando no especificamos un tamaño para la tabla, el tamaño que adopta es el acorde a

su contenido. Es decir se estira ó encoge según los datos que contiene. Especificar el
tamaño para una tabla es sencillo.

<table border="1" width=500>

<tr>
<td rowspan="2">row 1, cell 1</td>
<td >row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 2</td>
</tr>

Página 2626 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

y veríamos:

row 1, cell 2
row 1, cell 1
row 2, cell 2
row 3, cell 1 row 3, cell 2

También podemos especificar el ancho de la tabla en como un porcentaje del tamaño de

la ventana del navegador, estableciendo por ej: width="80%".
Como vemos existen dos maneras de especificar el ancho de una tabla. Cada estilo tiene
su utilidad. También podemos jugar con la altura por medio del atributo height. Pero es
nuestro deber advertirles que no todos los browsers soportan este atributo.

Ubicación del contenido dentro de una celda

Podemos controlar la ubicación del dato dentro de la celda. Mediante dos atributos del
elemento td , el primero align sirve para alinear horizontalmente el contenido, puede
tomar uno de estos tres valores: left (izquierda), center (centro) o right (derecha).
Como observamos, el valor por defecto es left.

<table border="1" width=500>

<tr>
<td >row 1, cell 1</td>
<td >row 1, cell 2</td>
</tr>
<tr>
<td align="center" >row 2, cell 2</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td align="right">row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

row 1, cell 1 row 1, cell 2

row 2, cell 2 row 2, cell 2
row 3, cell 1 row 3, cell 2

También podemos controlar la ubicación vertical de los datos en la celda, mediante el atributo
valign que al igual que align puede tomar tres valores que son: top (arriba), middle (al
medio), bottom (abajo). Por ejemplo:

<table border="1" width="500">

<tr>
<td valign="top" width="100"> row 1, cell 1</td>
<td width="400">En esta columna escribimos un texto más largo para
que
alcancemos a ver las diferentes alineaciones en la primera
columna</td>

Página 2727 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

</tr>
<tr>
<td valign="middle" >row 2, cell 2</td>
<td >En esta columna escribimos un texto más largo para que
alcancemos

a ver las diferentes alineaciones en la primera columna</td>

</tr>
<tr>
<td valign="bottom" >row 3, cell 1</td>
<td >En esta columna escribimos un texto más largo para que
alcancemos
a ver las diferentes alineaciones en la primera columna</td>
</tr>
</table>

Se vería así:

row 1, En esta columna escribimos un texto más largo para que

cell 1 alcancemos a ver las diferentes alineaciones en la primera
columna
En esta columna escribimos un texto más largo para que
row 2,
alcancemos a ver las diferentes alineaciones en la primera
cell 2
columna
En esta columna escribimos un texto más largo para que
row 3, alcancemos a ver las diferentes alineaciones en la primera
cell 1 columna

A continuación veremos un par de atributos llamados cellpadding y cellspacing. Ambos son

usados en el tag <table>. cellpadding es la cantidad de espacio entre el borde de la celda y el
contenido de la celda.

Ej:

<table border="1" cellpadding="15">

<tr>
<th>Encabezado</th>
<th>Otro encabezado</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Encabezado Otro encabezado

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Página 2828 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

El valor por defecto es 1. La razón de que sea 1 y no 0 es que cualquier texto no debería
ser acorralado contra los bordes. (Sin embargo puedes especificar 0 si lo deseas).

Si sustituimos cellspacing por cellpadding tendremos un efecto levemente diferente.

<table border="1" cellspacing="15">

<tr>
<th>Encabezado</th>
<th>Otro encabezado</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Encabezado Otro encabezado

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Como podemos ver el atributo cellspacing sirve para especificar la distancia entre las
celdas, mientras que cellpadding especifica la distancia entre el borde de la celda y su
contenido.

Esquema gráfico de los atributos vistos anteriormente

Página 2929 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Colores de fondo

Tanto table, tr, o td, tienen un atributo para especificar un color de fondo que es
bgcolor. Pero veremos luego que en xhtml, estas formas ya no se usan. Ej:

<table border="1" bgcolor="#EAEAEA">

<tr>
<th>Encabezado</th>
<th>Otro encabezado</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Encabezado Otro encabezado

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Nos quedan por ver dos etiquetas importantes, que cobran mucho sentido, con la
inclusión de CSS y Javascript, que son la etiqueta div y span.

Página 3030 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

Principales diferencias entre HTML y XHTML

A continuación vamos a ver, las diferencias que existen hoy en día entre el HTML que
se escribe y el XHTML y, además veremos las novedades que introduce el XHTML
respecto al HTML.
Lo más importante de la siguiente enumeración de diferencias y novedades es darnos
cuenta que se producen porque el XHTML es una aplicación XML y, por tanto, que
como mínimo se deben cumplir las reglas de buena formación que exige XML.

1. Los nombres de elementos y atributos deben escribirse en minúsculas.

El XML es sensible a la utilización de mayúsculas y minúsculas, lo que significa

que las elementos <LIBRO> y <libro> son diferentes según la especificación XML.

Y además si nos fijamos en las DTD que conforman el XHTML sus elementos y
atributos están definidos en minúsculas; por tanto, las etiquetas del código
XHTML deben estar siempre en minúsculas.
El siguiente código:
<BODY BgColor="#000000">
puede ser correcto en HTML pero en XHTML tiene que ser:
<body bgcolor="#000000">

2. Todos los valores de los atributos deben ir entrecomillados.

3. Todos los elementos deben ir entre la etiqueta de principio y la etiqueta de final.
Es decir no se puede abrir una etiqueta <p> y que no aparezca la respectiva </p>
de cierre. Incluso los elementos vacíos como img, br deben incluir antes del
signo mayor de cierre la barra invertida, ej: <br> en HTML, en XHTML sería
<br/>.

Los documentos XHTML deben incluir una declaración de "tipo de

documento."
Aunque esta norma ya existe en los documentos HTML (al ser aplicaciones SGML) la
verdad es que se utiliza en muy pocas ocasiones.
En el XHTML su utilización es obligatoria, y es necesario que antes del elemento raíz
exista una declaración DOCTYPE. El identificador público incluido en la declaración
DOCTYPE a alguna de las tres siguientes DTD: strict,transitional y Frameset, siendo
todas ellas unas aproximaciones, más o menos completas, a la especificación HTML 4.
Su declaración y características más importantes son:
- strict
Se utiliza cuando se da formato a los textos a través de CSS (Cascading Style Sheets), o
sea, cuando no se recurre a las etiquetas <font> etc, para controlar la forma en la que los
navegadores muestran el contenido del documento.
La declaración del tipo de documento debe ser de la siguiente manera:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
- transitional
Se utiliza cuando no se describe la presentación de los documentos por medio de hojas
de estilo en cascada, prefiriendo realizarlo a base de etiquetas. Es el sistema adecuado

Página 3131 de
32
 EDI 1º Apuntes 2015 – ISDFT 20

para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de
tratamiento de CSS.
La declaración del tipo de documento debe ser de la siguiente manera:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">
- frameset
Se utiliza cuando los documentos incorporan cuadros.
La declaración del tipo de documento debe ser de la siguiente manera:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-frameset.dtd">
En todos los casos es evidente que el identificador del sistema puede ser modificado
apropiadamente para reflejar convenciones de rango local.

El elemento raíz
El elemento raíz del documento XHTML debe ser <html> y en él debemos declarar el
"namespace" usando el atributo xmlns. EL "namespace" para XHTML es:
http://www.w3.org/1999/xhtml

Este apunte está basado en varios tutoriales que se encuentran disponibles en Internet.

Página 3232 de
32