Revisión:  práctica de laboratorio.

1. Crear un sitio de 3 páginas .
2. Cada página debe identificarse con un color diferente.
3. Completar cada página con un texto, según el sig. formato:

         Título
         Subtítulo

         Texto principal (3 párrafos separados por una línea en blanco).
         
    4.  Insertar enlaces (rotulados adelante / atrás) que permitan el desplazamiento por el
         sitio según el modelo de  arquitectura de navegación  secuencial.
    5. Insertar un enlace en el pie de la página 1, denominado "arriba" que permita realizar
        desplazamiento vertical hasta la cabecera.

Ejemplos de enlaces habituales

Enlace al inicio del sitio web

<a href="/">Inicio</a>

Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web.

Enlace a un email

<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más
información"> Solicita más información </a>

Al pinchar sobre el enlace anterior, se abre automáticamente el programa de correo electrónico del ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo http:// por mailto:

La sintaxis de mailto: permite utilizarlo para otros ejemplos más complejos:

<!-- Envío del correo electrónico a varias direcciones a la vez -->
<a href="mailto:nombre@direccion.com,otro_nombre@direccion.com">Solicita más
información</a>

<!-- Añadir un "asunto" inicial al correo electrónico -->
<a href="mailto:nombre@direccion.com?subject=Solicitud de más información">Solicita más información</a>

<!-- Añadir un texto inicial en el cuerpo del correo electrónico -->

<a href="mailto:nombre@direccion.com?body=Estaría interesado en solicitar más
información sobre sus productos">Solicita más información</a>

Todas las opciones anteriores se pueden combinar entre sí para realizar ejemplos más
avanzados. Aunque el uso de mailto: puede parecer una ventaja, su uso está desaconsejado.

Si se incluye una dirección de correo electrónico directamente en una página web, es muy probable que en poco tiempo esa dirección de email se encuentre llena de correo electrónico basura o "spam", ya que existen programas automáticos encargados de rastrear sistemáticamente todas las páginas web de Internet para encontrar direcciones de correo electrónico válidas.

La forma de mostrar las direcciones de correo electrónico en las páginas web consiste en incluir la dirección en una imagen o indicarla de forma que solamente los usuarios puedan entenderlo:

<p>La dirección de correo es <strong>nombre (arroba) direccion.com</strong></p>
<p>La dirección de correo es <strong>nombre_arroba_direccion.com</strong></p>
<p>La dirección de correo es <strong>nombreQUITAESTO@direccion.com</strong></p>
<p>La dirección de correo es <strong>nombre(ARROBA)direccion.com</strong></p>
<p>La dirección de correo es <strong>nombre @ direccion . com</strong></p>

Enlazar varias hojas de estilos CSS

<link rel="stylesheet" type="text/css" href="/css/comun.css" />
<link rel="stylesheet" type="text/css" href="/css/secciones.css" />

Enlazar hojas de estilos CSS para diferentes medios

<link rel="stylesheet" type="text/css" href="/css/comun.css" media="screen, projection"
/>
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />

Otros tipos de enlaces

Los enlaces mostrados en las secciones anteriores son los más utilizados por las páginas web.

Los enlaces creados con la etiqueta <a> permiten enlazar cualquier tipo de recurso desde
cualquier página. La característica más importante de estos enlaces es que el usuario debe
activar la carga de los recursos. En otras palabras, el navegador no carga ningún recurso
enlazado con la etiqueta <a> a menos que el usuario pinche sobre el enlace.

Además de estos enlaces, las páginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automáticamente. Si una página HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lógico que los enlace con la etiqueta <a> y espere a que el usuario pinche sobre el enlace para así cargar los archivos CSS. De la misma forma, muchas páginas web dinámicas necesitan que el navegador cargue varios archivos JavaScript para funcionar correctamente.

HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automáticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la página web.

La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.

Aunque la etiqueta <script> permite enlazar código de varios lenguajes de programación, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:

<head>
<script type="text/javascript" src="http://www.ejemplo.com/js/
inicializar.js"></script>
</head>

El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El
atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.

Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:

<html>
<head>
<script type="text/javascript">

  window.onload = function() { alert("La página se ha cargado completamente"); }

</script>
</head>
<body>
...
</body>
</html>

La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el código) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la página (<head>...</head>).


La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y
relacionar la página con otros recursos externos.


Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera del documento. Se pueden añadir tantas etiquetas <link> como sean necesarias, pero siempre dentro de <head>...</head>.

El atributo media hace referencia al medio para el que es válida la relación con el recurso
enlazado. Los medios disponibles también están estandarizados, siendo los más comunes screen para los contenidos mostrados en pantalla, print para las impresoras y handheld para los dispositivos móviles.

El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas por las páginas web:

<head>
...
<link rel="stylesheet" type="text/css" href="/css/comun.css" />
</head>

En este caso, es habitual establecer los atributos rel y type para indicar el tipo de recurso
enlazado y su relación con la página web. La URL del recurso enlazado se indica en el atributo href, que admite tanto URL absolutas como relativas.

Enlaces básicos

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla"). A continuación se muestra la definición simplificada de <a> y más adelante se muestra su definición completa:

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

Con la definición anterior, para crear un enlace que apunte a la página principal de Google
solamente habría que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador.

El siguiente enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo
de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>

Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior:

<a href="/">Volver al inicio</a>

El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor. Para obtener la URL absoluta, el navegador añade el mismo protocolo y el mismo nombre de servidor de la página en la que se encuentra el enlace. El resultado es que cuando se pincha ese enlace, siempre se vuelve al inicio del sitio web, independientemende de la página en la que se incluya el enlace.

El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.

<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula. </p>
...
<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
...

El atributo name permite crear "enlaces vacíos" que hacen referencia a secciones dentro de una misma página. Una vez definidos los "enlaces vacíos", es posible crear un enlace que apunte directamente a una sección concreta de una página:

<!-- Enlace normal a la página -->

<a href="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>

<!-- Enlace directo a la segunda sección de la página -->

<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2 de la página 1</a>

La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta.

Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.

También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El
siguiente ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias secciones:

<a name="inicio"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula. </p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...


Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento.

El siguiente ejemplo es equivalente al ejemplo anterior:

<h1 id="inicio">Título de la página</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula. </p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...


El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los
atributos id de cualquier elemento.

De hecho, se recomienda utilizar los atributos id de los elementos ya existentes en la página en vez de crear "enlaces vacíos" de tipo <a name="nombre_seccion"></a>.

URL

El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.

La URL de un recurso tiene dos objetivos principales:

▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un
nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de
Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes.

Si por ejemplo se considera la siguiente URL:

http://www.latinflores.es/xhtml/formulario.html

Las partes que componen la URL anterior son:

▪ Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese
recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las
de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).

▪ Servidor (www.latinflores.es): simplificando mucho su explicación, se trata del ordenador
en el que se encuentra guardada la página que se quiere acceder.

▪ Ruta (/xhtml/formulario.html): camino que se debe seguir, una vez que se ha llegado al
servidor, para localizar el recurso específico que se quiere acceder.

Por tanto, las URL no sólo identifican de forma única a cada recurso de Internet, sino que
también proporcionan a los navegadores la información necesaria para poder llegar hasta ese recurso.

La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior son:

▪ Protocolo (http://)
▪ Servidor (www.alistapart.com)
▪ Ruta (/comments/webstandards2008)
▪ Consulta (?page=5): información adicional necesaria para que el servidor localice
correctamente el recurso que se quiere acceder. Siempre comienza con el carácter ? y
contiene una sucesión de palabras separadas por = y &
▪ Sección (#42): permite que el navegador se posicione automáticamente en una sección de la página web. Siempre comienza con el caracter #.

Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL.

Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres codificados.

Tablas para codificar  caracteres 

Ejemplos

<!-- URL problemática -->
http://www.ejemplo.com/estaciones/otoño.html

<!-- URL correcta -->
http://www.ejemplo.com/estaciones/oto%F1o.html

<!-- URL problemática -->
http://www.ejemplo.com/ruta/nombre página.html

<!-- URL correcta -->

http://www.ejemplo.com/ruta/nombre%20p%E1gina.html

Enlaces

El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de "hipertexto".

De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en inglés), por lo que el significado completo de HTML podría traducirse como "lenguaje de marcado para hipertexto".

La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que
permitió crear documentos interactivos que proporcionan información adicional cuando se
solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".

Tipos de enlaces

Enlaces internos y externos

• Externos: El navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios. 

• Internos: El navegador recorre mediante enlaces las páginas de un mismo sitio. Las direcciones web  apuntan a páginas del propio sitio.

Enlaces relativos y absolutos

Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo.

• Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

• Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. 

En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del
protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado.

Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web. En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL incompletas que los navegadores pueden completar deduciendo la información que falta.

1. El origen y el destino del enlace se encuentran en el mismo directorio
2. El destino del enlace se encuentra cerca de su origen y en un nivel superior
3. El destino del enlace se encuentra cerca de su origen y en un nivel inferior
4. El origen y el destino del enlace se encuentran muy alejados

Codificación de caracteres

Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:

▪ Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se pueden utilizar
libremente.

▪ Los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.) pueden ser
problemáticos dependiendo de la codificación de caracteres utilizada.

La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carácter:

Insertar nuevas líneas

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br />. En cierta manera, insertar la etiqueta <br/> en un
determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br/> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />).

Utilizando la etiqueta <br/> se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:

<html>
<head>
<title>Ejemplo de etiqueta br</title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y otro tipo de espaciado.</p>
</body>
</html>

Insertar espacios en blanco

La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas.
Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto &nbsp; (es importante incluir el símbolo & al principio y el símbolo ; al final).

Así, el código HTML del ejemplo anterior se debe rehacer para incluir los espacios en blanco adicionales:

<html>
<head>
<title>Ejemplo de entidad &nbsp;</title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>
</body>
</html>

Ahora el navegador sí que muestra correctamente los espacios en blanco (y las nuevas líneas) del segundo párrafo:



Cada texto &nbsp; solamente equivale a un espacio en blanco, por lo que se deben escribir tantos &nbsp; seguidos como espacios en blanco seguidos existan en el texto.

Texto

La mayor parte del contenido de las páginas HTML habituales está formado por texto.

La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original
definiendo sus párrafos, titulares y títulos de sección:

El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada párrafo y títulos de sección para delimitar cada una de las secciones que forman el texto.

Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc.:



Estructurar textos.

Párrafos

Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:

<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>


Definición formal de la etiqueta <p>:



Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador. Además, no tienen atributos específicos, pero sí que se les pueden asignar los atributos comunes de HTML básicos, de internacionalización y de eventos.

Secciones

Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en diferentes secciones jerárquicas.

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página.

HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.

Definición formal de la etiqueta <h1>, siendo idéntica la definición del resto de etiquetas referidas a los títulos de sección:



Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no
tienen atributos específicos.

Las etiquetas <h1>, ..., <h6> definen títulos de sección, no secciones completas. Por este motivo,
no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente.
Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los títulos de cada sección.

El siguiente ejemplo muestra el uso de las etiquetas de título de sección:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>
</body>
</html>




Texto preformateado

En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar.
Se trata de un caso habitual cuando una página web debe mostrar directamente el texto
generado por alguna aplicación.

En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. La definición formal de la etiqueta se muestra a continuación:



El siguiente ejemplo muestra el uso de la etiqueta <pre>:

<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</p>
</body>
</html>

Jornada de trabajo: Presentación  carreras 2016.

Elementos HTML


Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML.

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:

▪ Una etiqueta de apertura.
▪ Cero o más atributos.
▪ Texto encerrado por la etiqueta.
▪ Una etiqueta de cierre.

La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una etiqueta de apertura (<p>), contiene cero o más atributos (class="normal"), dispone de un contenido de texto (Esto es un párrafo) y finaliza con una etiqueta de cierre (</p>).

Por tanto, si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.

Si se considera el siguiente ejemplo:

<html>
<head>
<title>Ejemplo de elementos en línea y elementos de bloque</title>
</head>
<body>
<p>Los párrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en línea</a>
<p>Dentro de un párrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en línea.</p>
</body>
</html>


El primer párrafo contiene un texto corto que sólo ocupa la mitad de la anchura de la ventana del navegador. No obstante, el espacio reservado por el navegador para el primer párrafo llega hasta el final de esa línea, por lo que resulta evidente que los elementos <p> son elementos de bloque.

Por otra parte, el primer enlace del ejemplo anterior también tiene un texto corto que ocupa
solamente la mitad de la anchura de la ventana del navegador. En este caso, el navegador sólo reserva para el enlace el sitio necesario para mostrar sus contenidos. Si se añade otro enlace en esa misma línea, se mostraría a continuación del primer enlace. Por tanto, los elementos <a> son elementos en línea.

Por último, el segundo párrafo sigue ocupando todo el espacio disponible hasta el final de cada línea (por ser un elemento de bloque) y el enlace que se encuentra dentro del párrafo sólo ocupa el sitio necesario para mostrar sus contenidos (por ser un elemento en línea).

La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros elementos de bloque. Los elementos en línea sólo pueden contener texto u otros elementos en línea. En otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en línea. En cambio, un elemento en línea puede aparecer dentro de un elemento de bloque y dentro de otro elemento en línea.

Restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un párrafo con <a>un enlace</p></a>

2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>

3) El valor de los atributos siempre se encierra con comillas:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>

4) Los atributos no se pueden comprimir:

Ejemplo correcto en XHTML:

<dl compact="compact">...</dl>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<dl compact>...</dl>

Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.

5) Todas las etiquetas deben cerrarse siempre:

La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.

La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto.

Como el estándar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la etiqueta <br> se debería cerrar de forma seguida: <br></br>. Para que el código resulte más cómodo de escribir, XHTML permite en estos casos escribir de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.

En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la
sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.

En la forma compacta es habitual equivocarse con la posición del carácter /.

Ejemplo correcto en XHTML:

<br/>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<br>

¿Qué es HTML?

HTML:  HyperText Markup Language.

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. 

Así, la estructura típica de las etiquetas HTML es:

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/) ,
más conocido como W3C.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

HTML y CSS

Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e
imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también
información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.
La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML
también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en
exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son
responsabilidad de diferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:



Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.


Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye
información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la
página incluye todos sus contenidos, como párrafos de texto e imágenes.




El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:

<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>


▪ <html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o
contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción
que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el
cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se
ignora.

▪ <head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).

▪ <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos
que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de
un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene
más que unas pocas.

Formato plantilla base:

Código HTML / Fichero: index.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Estructuras de págians web</title>

<link href="CssPracticaIA.css" type="text/css" rel="stylesheet" rev="stylesheet">
</head>

<body>
    <!-- HTML5 orientado a SEO - div id=contenedor para agrupar un conjunto de elementos y definir la estructura de página.
    La etiqueta div es la herramienta para unir elementos cuando no podemos asociar significado semántico a un conjunto de partes. -->
    <div id="contenedor">
    <!--Cabecera -->
        <header>
       
                <!-- Contenido de la cabecera (tarjeta de visita que ofrece una primera impresión interesante): isologotipo
                empresarial, enlace a la home page,  slogan empresarial, imagen o imágenes representativas, datos de contacto como
                teléfomo e email, caja de búsqueda, menú de navegación, otros elementos).
                Uso de etiqueta header -->
<span> Cabecera </span>
        </header>
    <!--Fin Cabecera -->
       
 
        <!-- Contenido de primer orden-->
        <div id="contenidoPO">
       
                <!-- Contenido específico de la página web (un texto o artículo de opinión, una entrada en un blog, un comentario
                en un foro, una noticia, una descarga, etc. -->
<span class="clasePO"> Contenido primer orden </span>
        </div>
       
        <!-- Fin contenido de primer orden -->
 
<!-- Cambiar el orden de las divisiones y alterar la flotación y sus medidas (ancho y alto) -->
        <!-- Contenido de segundo orden-->
        <div id="contenidoSO">
<span class="claseSO"> Contenido segundo orden </span>

        </div>      
        <!-- Fin contenido de segundo orden -->
                 
        <!-- Contenido de tercer orden-->
        <div id="contenidoTO">
        <span class="claseTO"> Contenido tercer orden </span>

        </div>
       
        <!-- Fin contenido de tercer orden -->
        <!-- Pie de página -->
        <footer>
            <!-- Contenido del pie de página (enlaces - a otras webs relacionadas, al mapa de la web, a las políticas de seguridad, derechos de autor y avisos legales -, isologotipos de accesibilidad, seguridad, legalidad , formulario de contacto, acceso a las redes sociales, publicidad, otros elementos).
            Uso de etiqueta footer-->
        <span> Pie de página </span>
        </footer>
       
        <!-- Fin pie de página -->
    </div>

</body>
</html>

Código Css / Fichero:  CssPracticaIA.css

@charset "utf-8";
/* CSS Document */
#contenedor{
position: relative; // Relacionar con top y left
top: -10px; // Posicionamiento superior
left: 0px; // Posicionamiento inferior
margin: 0px auto; // Centrar
width: 860px; // Ancho contenedor de la plantilla
height: 760px; // Alto
background-color: rgb(255,255,255);  //Fondo color blanco
}

header{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 170px;
background-color: rgb(204,204,204);  /* gris */
}
#contenidoPO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 250px;
background-color: rgb(255,153,153);  /* rosado */
}

#contenidoSO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 150px;
background-color: #FFBE7D;  /* naranja */
}

#contenidoTO{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 100px;
background-color: #FF9;  /* amarillo */
}

footer{
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
width: 860px;
height: 80px;
background-color: rgb(204,204,204);  /* gris */
}

span{
display: block; // Convertir span en línea a elem. en bloque para centrar
width: 860px;
position: relative;
top: 10px;
font-family:Arial, Helvetica, sans-serif; // Fuentes: tipo.
font-size: 20px;  // Fuentes: tamaño.
text-align:center; // Alineación
margin: 5px auto; // Ampliar margen en 5px para espaciado horizontal en blanco


}

Clases suspendidas.

Lenguaje de marcado Html5.
Desarrollo de hojas de estilo CSS3.