hernandezblasantonio/pw/documentacion/html/practicas

Prácticas

Las siguientes prácticas giran entorno al uso de HTML y CSS, tratando de plantear el papel que juegan cada uno de ellos en la programación web. Cabe recalcar que no se trata de plantear un buen diseño web, tema que puede ser abordado visualizando los siguientes videos disponibles en http://idesweb.es/temario:

Encontrarás una gran variedad de videos en su canal de YouTube, desde aspectos historicos, sugerencias e ideas para el diseño y desarrollo web.

De igual forma te podrán ser útiles las siguientes lecturas sobre consejos prácticos sobre diseño para no diseñadores:

  • Diseño para no diseñadores: "esta breve guía de diseño para no diseñadores es un artículo original de Daniel Higginbotham, traducido con su permiso."

  • Nociones de diseño gráfico para no diseñadores: "son muchas las ocasiones en las que alguien que no tiene ninguna formación de diseño gráfico se ve en la necesidad de elaborar un diseño. Quien siga al menos estos consejos quizá no obtenga un diseño profesional, pero sí uno bastante digno."

  • Diseño básico para NO diseñadores: "voy a contar algunos principios muy básicos del diseño para los que les cuesta un poco saber cómo colocar los elementos dentro de una composición, qué tipografías usar, qué tamaños, qué colores y por qué, etc."

Finalmente recomiendo la lectura de: Como perder peso en el navegador - la guía definitiva para el rendimiento front-end.

Práctica 01

Sobre la creación de un proyecto de HTML y CSS. El proyecto incluirá con respecto a HTML algunas etiquetas de texto mientras que con respecto a CSS se hará uso de Normalize.css.

Normalize.css nos permite lograr una normalización de estilos que vienen definidos por defecto en cada uno de los navegadores web. desarrolloweb.com.

  1. Crea el proyecto o directorio $HOME/www/html01, y en él los directorios css e img:

     alumno@servidor:~ $ mkdir -p $HOME/www/html01
 alumno@servidor:~ $ cd $HOME/www/html01
 alumno@servidor:~/www/html01 $ mkdir css img

  2. Descarga a Normalize.css (archivo normalize.css) dentro del directorio css:

     alumno@servidor:~/www/html01 $ wget https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css -P css/

  3. Descarga la imágen (archivo greyfloral.png) a usar como fondo, https://www.toptal.com/designers/subtlepatterns/gray-floral/:

     alumno@servidor:~/www/html01 $ wget https://www.toptal.com/designers/subtlepatterns/patterns/greyfloral.png -P img/

  4. Crea el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>HTML5</title>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <h1 class="titulo-principal">HTML5</h1>
     <p class="introduccion">
       <strong>HTML5</strong> (<em>HyperText Markup Language</em>, versión 5) es la quinta revisión importante del
       lenguaje básico de la <a href="https://es.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a>,
       <a href="https://es.wikipedia.org/wiki/HTML">HTML</a>. HTML5 especifica dos variantes de sintaxis para HTML:
       una <em>clásica</em>, HTML (<code>text/html</code>), conocida como <em>HTML5</em>, y una variante
       <a href="https://es.wikipedia.org/wiki/XHTML">XHTML</a> conocida como sintaxis <em>XHTML5</em> que deberá
       servirse con sintaxis XML (<code>application/xhtml+xml</code>). Esta es la primera vez que HTML y XHTML se
       han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre
       de 2014.
     </p>
     <p>
       Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario
       común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee
       HTML5.<br />
       El desarrollo de este <a href="https://es.wikipedia.org/wiki/Lenguaje_de_marcado">lenguaje de marcado</a> es
       regulado por el Consorcio <a href="https://es.wikipedia.org/wiki/W3C">W3C</a>.
     </p>
     <h2>Novedades</h2>
     <ol>
       <li class="etiquetas-codecs">
         Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia.
         Actualmente hay una lucha entre imponer codecs libres (<a href="https://es.wikipedia.org/wiki/WebM">WebM</a>
         + <a href="https://es.wikipedia.org/wiki/VP8">VP8</a>) o privados
         (<a href="https://es.wikipedia.org/wiki/H.264/MPEG-4_AVC">H.264/MPEG-4 AVC</a>).
       </li>
       <li>
         Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar
         tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
       </li>
       <li>
         Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para
         validar el contenido sin Javascript.
       </li>
       <li>
         Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder
         interpretar otros lenguajes XML.
       </li>
       <li>
         Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.
       </li>
    </ol>
    <h2>Vídeo</h2>
    <p class="youtube">
      <iframe src="https://www.youtube.com/embed/1zWhDg8wEJY" frameborder="0" allowfullscreen></iframe>
    </p>
    <h2>Nuevos elementos</h2>
    <p class="nuevos-elementos">
      HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos.
      Algunos de ellos son técnicamente similares a las etiquetas <code>&lt;div&gt</code> y <code>&lt;span&gt;</code>,
      pero tienen un significado semántico, como por ejemplo <code>&lt;nav&gt;</code> (bloque de navegación del sitio
      web) y <code>&lt;footer&gt;</code>.
    </p>
    <p class="fuente">
      <em>Fuente: <a href="https://es.wikipedia.org/wiki/HTML5">Wikipedia</a></em>
    </p>
    <h2>Plantilla básica</h2>
    <pre>
      &lt;!-- Código de HTML dentro de HTML --&gt;
                                    &lt;!DOCTYPE HTML&gt;
                                    &lt;html&gt;
                                      &lt;head&gt;
                                        &lt;meta charset="UTF-8"&gt;
                                        &lt;title&gt;fuente de múltiples elementos&lt;/title&gt;
                                      &lt;/head&gt;
                                      &lt;body&gt;
                                      &lt;/body&gt;
                                    &lt;/html&gt;
      &lt;!-- ... haciendo uso del elemento &lt;pre&gt; y "HTML character entities"--&gt;
    </pre>
    <p class="fuente">
      <em>Fuente:
        <a href="http://librosweb.es/libro/xhtml/capitulo_3/codificacion_de_caracteres.html">Codificación de caracteres</a>
      </em>
    </p>
    <h2>Términos y definiciones</h2>
    <dl>
      <dt class="termino">HTML5</dt>
      <dd class="definicion">HyperText Markup Language, versión 5.</dd>
      <dt class="termino">WWW</dt>
      <dd class="definicion">World Wide Web </dd>
      <dt class="termino">XHTML</dt>
      <dd class="definicion">eXtensible HyperText Markup Language</dd>
      <dt class="termino">XML</dt>
      <dd class="definicion">Extensible Markup Language</dd>
      <dt class="termino">W3C</dt>
      <dd class="definicion">World Wide Web Consortium</dd>
    </dl>
   </body>
 </html>

  5. Crea el archivo css/main.css con el siguiente contenido:

     /*
  * Colores obtenidos de:
  *    http://www.colorcombos.com/color-schemes/7625/ColorCombo7625.html
  *
  */
 /***************************/
 /** Reglas para etiquetas **/
 /***************************/
 body {
   background-color: #FCF4D9;
 }
 p {
   font: normal 15px sans-serif;
 }
 ol {
   font: normal 15px sans-serif;
   list-style-type: lower-greek;
 }
 em {
   font-size: 14px;
   font-family: serif;
 }
 strong {
   font-weight: lighter;
   text-decoration: underline;
 }
 /*
  * Imagen obtenida de:
  *    https://www.toptal.com/designers/subtlepatterns/gray-floral/
  */
 pre {
   background-color: #fcd;
   background-image: url("../img/greyfloral.png");
   background-position: top right;
   background-repeat: no-repeat;
 }
 /************************/
 /** Reglas para clases **/
 /************************/
 .titulo-principal {
   /*
   font-style: italic;
   font-weight: bold;
   font-size: 40px;
   font-family: serif;
   */
   font: italic bold 40px serif;
   color: #462066;
   text-align: center;
   text-shadow: 2px 2px #FFB85F;
 }
 .introduccion {
   background-color: #8ED2C9;
   text-align: justify;
   font-size: 18px;
 }
 /* Enlaces en class="introduccion" */
 .introduccion a,
 .introduccion a:link,
 .introduccion a:visited,
 .introduccion a:active {
   color: #fff;
   text-decoration: none;
 }
 .introduccion a:hover {
   color: #FF7A5A;
   text-decoration: underline;
 }
 /* Enlaces en class="etiquetas-codecs" */
 .etiquetas-codecs a,
 .etiquetas-codecs a:link,
 .etiquetas-codecs a:visited,
 .etiquetas-codecs a:active,
 .etiquetas-codecs a:hover {
   color:    #fff;
   background-color: red;
   text-decoration: none;
   font-weight: bold;
 }
 .youtube {
   text-align: center;
   background-color: #FFB85F;
   line-height: 0px;
 }
 .youtube iframe {
   width: 560px;
   height: 315px;
 }
 .nuevos-elementos {
   background-color: #462066;
   color: #fff;
 }
 .nuevos-elementos code {
   color: #FFB85F;
 }
 .fuente {
   text-align: right;
 }
 .termino {
   text-decoration: underline;
   background-color: black;
   color: white;
 }
 .definicion {
   font-style: italic;
   background-color: yellow;
   color: red;
 }

    Al terminar obtendrás la siguiente estructura:

     alumno@servidor:~/www/html01 $ pwd && tree
 /home/alumno/www/html01
 .
 ├── css
 │   ├── main.css
 │   └── normalize.css
 ├── img
 │   └── greyfloral.png
 └── index.html

 2 directories, 4 files

  6. Inicia al servidor web thttpd y accede a él con el navegador web:

     alumno@servidor:~/www/html01 $ thttpd -D -p 8080 -T UTF-8 -l -

    Al acceder obtendrás un documento HTML que hace uso de un archivo de CSS:

    images/01.png

Notas

  • Los elementos de HTML usados dentro de <body> han sido: <h1>, <h2>, <p>, <strong>, <em>, <code>, <ol>, <li>, <dl>, <dt>, <dd> y <iframe>.

    A algunos de los anteriores elementos se les ha asignado alguna clase (atributo class) para seleccionarlos y poder aplicar algunas reglas de CSS sobre ellos.

  • Las reglas de CSS aplicadas a los elementos indicados en el anterior punto han sido:

Práctica 02

Sobre el layout de un documento HTML con CSS.

  1. Crea el proyecto o directorio $HOME/www/html02, y en él el directorio css:

     alumno@servidor:~ $ mkdir -p $HOME/www/html02
 alumno@servidor:~ $ cd $HOME/www/html02
 alumno@servidor:~/www/html02 $ mkdir css

  2. Descarga a Normalize.css (archivo normalize.css) dentro del directorio css:

     alumno@servidor:~/www/html02 $ wget https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css -P css/

  3. Crea el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>HTML</title>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <div class="contenedor">
       <div class="col col-izquierda">
         <h1>Derecha</h1>
         <ul>
           <li><a href=".">Inicio</a></li>
           <li><a href=".">Acerca de</a></li>
           <li><a href=".">Contacto</a></li>
         </ul>
       </div>
       <div class="col col-derecha">
         <h1>Izquierda</h1>
         <p>
           Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un
           documento que, junto con el texto, incorpora etiquetas o marcas que
           contienen información adicional acerca de la estructura del texto o su
           presentación.
         </p>
         <p>
           El lenguaje de marcas más extendido es el HTML (HyperText Markup Language,
           lenguaje de marcado de hipertexto), fundamento del World Wide Web
           (entramado de comunicación de alcance mundial).
         </p>
         <p>
           HTML5 (HyperText Markup Language, versión 5) es la quinta revisión
           importante del lenguaje básico de la World Wide Web, HTML. HTML5
           especifica dos variantes de sintaxis para HTML: una «clásica», HTML
           (text/html), conocida como HTML5, y una variante XHTML conocida como
           sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml).
           Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
           La versión definitiva de la quinta revisión del estándar se publicó en
           octubre de 2014
         </p>
         <p>
           Al no ser reconocido en viejas versiones de navegadores por sus nuevas
           etiquetas, se recomienda al usuario común actualizar su navegador a la
           versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
           El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
         </p>
         <div>
           <p class="col-derecha consorcio-www">
             El Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es un consorcio
             internacional que genera recomendaciones y estándares que aseguran el
             crecimiento de la World Wide Web a largo plazo.1
           </p>
           <p class="col-izquierda consorcio-historia">
             Este consorcio fue creado en octubre de 1994,2 y está dirigido por Tim
             Berners-Lee, el creador original del URL (Uniform Resource Locator, Localizador
             Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de
             Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje
             de Marcado de HiperTexto), que son las principales tecnologías sobre las que
             se basa la Web.
           </p>
         </div>
         <p class="html5-establece">
           HTML5 establece una serie de nuevos elementos y atributos que reflejan el
           uso típico de los sitios web modernos. Algunos de ellos son técnicamente
           similares a las etiquetas &lt;div&gt; y &lt;span&gt;, pero tienen un significado
           semántico, como por ejemplo &lt;nav&gt; (bloque de navegación del sitio web) y
           &lt;footer&gt;.
         </p>
       </div>
     </div>
     <div class="pie">
       <p>Copyright</p>
     </div>
   </body>
 </html>

  4. Crea el archivo css/main.css con el siguiente contenido:

     html {
   background-color: #F8F8F2;
 }
 body {
   width: 960px;
   margin: 0 auto;
   background-color: #FF7182;
 }
 .contenedor {
   overflow: hidden;
 }
 .col {
   /*
    * Reglas para que la columna de la izquierda sea de la
    * misma altura que la de la derecha, dentro del contenedor.
    */
   /*
   margin: 0px;
   padding: 0px;
   padding-bottom: 1000px;
   margin-bottom: -1000px;
   overflow: hidden;
   */
 }
 .col-izquierda {
   float: left;
   width: 20%;
   background-color: #FFAE5D;
 }
 .col-izquierda ul {
   list-style-type: none;
   padding-left: 0px;
 }
 .col-izquierda ul li {
   padding-left: 10px;
   margin-top: 10px;
   border-left: 5px solid #000;
 }
 .col-derecha {
   float: right;
   width: 80%;
   background-color: #E45641;
 }
 .col-derecha h1 {
   text-align: right;
 }
 .col-derecha p {
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
 }
 .consorcio-www {
   font-size: 10px;
   background-color: #5D4C46;
   color: #fff;
 }
 .consorcio-historia {
   font-size: 10px;
   background-color: #44B3C2;
   color: #fff;
 }
 .html5-establece {
   clear: both;
 }
 .pie {
   background-color: #6F3662;
 }
 .pie p {
   text-align: right;
   color: #F8F8F2;
 }

  5. Inicia al servidor web thttpd y accede a él con el navegador web:

     alumno@servidor:~/www/html02 $ thttpd -D -p 8080 -T UTF-8 -l -

    Al acceder obtendrás un documento HTML que hace uso de un archivo de CSS:

    images/02.png

Lecturas

Práctica 03

Sobre el layout de un documento HTML con CSS.

  1. Crea el proyecto o directorio $HOME/www/html03 y en él los directorios css e img:

     alumno@servidor:~ $ mkdir -p $HOME/www/html03
 alumno@servidor:~ $ cd $HOME/www/html03
 alumno@servidor:~/www/html03 $ mkdir css img

  2. Descarga a Normalize.css (archivo normalize.css) dentro del directorio css:

     alumno@servidor:~/www/html03 $ wget https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css -P css/

  3. Descarga las imágenes html5.png y w3c.png en el directorio img:

     alumno@servidor:~/www/html03 $ wget \
   https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png -O img/html5.png 
 alumno@servidor:~/www/html03 $ wget \
   "http://vignette2.wikia.nocookie.net/logopedia/images/e/ed/W3C.png/revision/latest?cb=20130401034403" -O img/w3c.png

  4. Crea el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>HTML</title>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <div class="contenedor">
       <div class="cabecera">
         <h1>Título</h1>
         <h2>Subtítulo</h2>
       </div>
       <div class="menu-navegacion">
         <ul>
           <li><a href=".">Inicio</a></li>
           <li><a href=".">Acerca de</a></li>
           <li><a href=".">Contacto</a></li>
         </ul>
       </div>
       <div class="cuerpo-principal">
         <h1>Cuerpo Principal</h1>
         <p>
           Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un
           documento que, junto con el texto, incorpora etiquetas o marcas que
           contienen información adicional acerca de la estructura del texto o su
           presentación.
         </p>
         <p>
           El lenguaje de marcas más extendido es el HTML (HyperText Markup Language,
           lenguaje de marcado de hipertexto), fundamento del World Wide Web
           (entramado de comunicación de alcance mundial).
         </p>
         <p class="html5">
           <img src="img/html5.png" class="logo" />
           HTML5 (HyperText Markup Language, versión 5) es la quinta revisión
           importante del lenguaje básico de la World Wide Web, HTML. HTML5
           especifica dos variantes de sintaxis para HTML: una «clásica», HTML
           (text/html), conocida como HTML5, y una variante XHTML conocida como
           sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml).
           Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
           La versión definitiva de la quinta revisión del estándar se publicó en
           octubre de 2014
         </p>
         <p>
           Al no ser reconocido en viejas versiones de navegadores por sus nuevas
           etiquetas, se recomienda al usuario común actualizar su navegador a la
           versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
           El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
         </p>
         <p class="w3c">
           <img src="img/w3c.png" class="logo" />
           El Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es un consorcio
           internacional que genera recomendaciones y estándares que aseguran el
           crecimiento de la World Wide Web a largo plazo.
         </p>
         <p>
           Este consorcio fue creado en octubre de 1994, y está dirigido por Tim
           Berners-Lee, el creador original del URL (Uniform Resource Locator, Localizador
           Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de
           Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje
           de Marcado de HiperTexto), que son las principales tecnologías sobre las que
           se basa la Web.
         </p>
         <p>
           HTML5 establece una serie de nuevos elementos y atributos que reflejan el
           uso típico de los sitios web modernos. Algunos de ellos son técnicamente
           similares a las etiquetas &lt;div&gt; y &lt;span&gt;, pero tienen un significado
           semántico, como por ejemplo &lt;nav&gt; (bloque de navegación del sitio web) y
           &lt;footer&gt;.
         </p>
       </div>
       <div class="pie">
         <p>Copyright</p>
       </div>
     </div>
   </body>
 </html>

  5. Crea el archivo css/main.css con el siguiente contenido:

     html {
   background-color: #F8F8F2;
 }
 body {
   width: 960px;
   /* margin: 100px auto 0px auto; */
   margin: 100px auto;
   background-color: #FFF0AA;
 }
 .contenedor {
   border-top: 5px solid #888;
 }
 .cabecera {
   background-color: #000;
   color: #fff;
   text-align: right;
 }
 .cabecera h2 {
   font-size: 15px;
   font-style: italic;
 }
 .menu-navegacion {
   background-color: #FFAEAE;
 }
 .menu-navegacion ul {
   list-style-type: none;
 }
 .menu-navegacion ul li {
   display: inline-block;
   margin: 20px;
   border: 1px solid #000;
   padding: 10px;
   background-color: #B4D8E7;
 }
 .menu-navegacion ul li a {
   text-decoration: none;
 }
 .menu-navegacion ul li a:link,
 .menu-navegacion ul li a:active,
 .menu-navegacion ul li a:visited
 {
   color: #369;
 }
 .menu-navegacion ul li a:hover {
   color: #f00;
 }
 .cuerpo-principal {
   background-color: #B0E57C;
 }
 .cuerpo-principal p.html5 {
   background-color: #fff;
 }
 p.html5 .logo {
   float: left;
   height: 50px;
 }
 .cuerpo-principal p.w3c {
   /* width: 30%; */
   /* overflow: hidden; */
   background-color: #fff;
 }
 p.w3c .logo {
   float: right;
   height: 100px;
 }
 .pie {
   background-color: #56BAEC;
   text-align: center;
 }

  6. Inicia al servidor web thttpd y accede a él con el navegador web:

     alumno@servidor:~/www/html03 $ thttpd -D -p 8080 -T UTF-8 -l -

    Al acceder obtendrás un documento HTML que hace uso de un archivo de CSS:

    images/03.png

Práctica 04

Sobre el layout de un documento HTML con CSS.

  1. Crea el proyecto o directorio $HOME/www/html04 y en él el directorio css:

     alumno@servidor:~ $ mkdir -p $HOME/www/html04
 alumno@servidor:~ $ cd $HOME/www/html04
 alumno@servidor:~/www/html04 $ mkdir css

  2. Descarga a Normalize.css (archivo normalize.css) dentro del directorio css:

     alumno@servidor:~/www/html04 $ wget https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css -P css/

  3. Crea el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>HTML</title>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <div class="contenedor">
       <div class="menu-navegacion">
         <ul>
           <li><a href=".">Inicio</a></li>
           <li><a href="acerca-de">Acerca de</a></li>
           <li><a href="contacto">Contacto</a></li>
         </ul>
       </div>
       <div class="cuerpo-principal">
         <h1>HTML5</h1>
         <p>
           HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante
           del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes
           de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y
           una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis
           XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han
           desarrollado en paralelo. La versión definitiva de la quinta revisión del
           estándar se publicó en octubre de 2014.
         </p>
         <p>
           Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas,
           se recomienda al usuario común actualizar su navegador a la versión más nueva,
           para poder disfrutar de todo el potencial que provee HTML5.
           El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
         </p>
         <h1>XHTML</h1>
         <p>
           XHTML, Siglas del inglés eXtensible HyperText Markup Language. XHTML es básicamente
           HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite
           que posteriormente sea más fácil al hacer cambios o buscar errores entre otros. En
           su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene,
           básicamente, las mismas funcionalidades, pero cumple las especificaciones, más
           estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web
           Consortium de lograr una web semántica, donde la información, y la forma de
           presentarla estén claramente separadas. La versión 1.1 es similar, pero parte a
           la especificación en módulos. En sucesivas versiones la W3C planea romper con los
           tags clásicos traídos de HTML.
         </p>
         <h1>World Wide Web</h1>
         <p>
           En informática, la World Wide Web (WWW) o red informática mundial es un sistema
           de distribución de documentos de hipertexto o hipermedios interconectados y
           accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web
           compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros
           contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.
         </p>
         <h2>Historia</h2>
         <p>
           En el número de mayo de 1970 de la revista Popular Science, Arthur C. Clarke
           predijo que algún día los satélites "llevarán el conocimiento acumulado del mundo
           a sus manos" con una consola que combinara la funcionalidad de la fotocopiadora,
           teléfono, televisión y un pequeño ordenador, que permitirá la transferencia de datos
           y videoconferencia en todo el mundo.
         </p>
         <h2>Funcionamiento Web</h2>
         <p>
           El siguiente paso es enviar una petición HTTP al servidor web solicitando el recurso.
           En el caso de una página web típica, primero se solicita el texto HTML y luego es
           inmediatamente analizado por el navegador, el cual, después, hace peticiones adicionales
           para los gráficos y otros ficheros que formen parte de la página. Las estadísticas
           de popularidad de un sitio web normalmente están basadas en el número de páginas
           vistas o las peticiones de servidor asociadas, o peticiones de fichero, que tienen lugar.
         </p>
       </div>
       <div class="pie">
         <p>Copyright</p>
       </div>
     </div>
   </body>
 </html>

  4. Crea el archivo css/main.css con el siguiente contenido:

     html {
   background-color: #C5AAF5;
   margin: 0 auto;
   padding: 0px;
 }
 body {
   width: 100%;
   margin: 0 auto;
   background-color: #A3CBF1;
 }
 .contenedor {
   overflow: hidden;
 }
 .menu-navegacion {
   background-color: #66CC35;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
 }
 .menu-navegacion ul {
   list-style-type: none;
   background-color: #669933;
   text-align: center;
 }
 .menu-navegacion ul li {
   display: inline-block;
   border: 1px solid #000;
   padding: 5px;
   background-color: #FFBAD2;
 }
 .menu-navegacion ul li a {
   text-decoration: none;
 }
 .cuerpo-principal {
   background-color: #423C40;
   color: #ffc;
   width: 960px;
   margin: 100px auto 0px auto;
   overflow: hidden;
 }
 .pie {
   background-color: #FF9900;
   text-align: center;
   overflow: hidden;
   height: 200px;
 }

  5. Inicia al servidor web thttpd y accede a él con el navegador web:

     alumno@servidor:~/www/html04 $ thttpd -D -p 8080 -T UTF-8 -l -

    Al acceder obtendrás un documento HTML que hace uso de un archivo de CSS:

    images/04.png