Ayuda ejercicios unidad 12: Estructura de una página web



En este ejercicio practicaremos con etiquetas semánticas.

Ejercicio 1: Etiquetas semánticas.

  1. La solución de este ejercicio es la página web que puedes ver aquí: index_final.html
  2. Para crear esta página hemos seguido el siguiente proceso. Primero hemos identificado las siguientes partes principales de la página web. La cabecera está formada por el logo y el título <h2>. La etiqueta <nav> sería la lista con los enlaces. El contenido principal tiene tres partes Cursos de aulaClic, Cursos de colaboradores y Artículos de aulaClic. Las dos primeras tienen la misma estructura. El contenido adicional lo formarían "Síguenos ..." y "En este enlace ..." y el pie está formado por el resto de párrafos.
  3. Este proceso de identificación no es exacto, tiene matices e interpretaciones, por lo tanto la solución tampoco es única. Puede haber varias soluciones correctas ya que hay situaciones que se pueden resolver de varias formas. Por ejemplo, la parte de los artículos podríamos considerarla como contenido adicional, en lugar de como contenido principal.
  4. Una vez identificadas las partes pasamos a asignar a cada una la etiqueta semántica adecuada. Añadimos la etiqueta <header> y dentro colocamos el logo y la cabecera <h2> "aulaClic. Cursos de informática gratis".
  5. Añadimos la etiqueta <nav> y dentro colocamos la lista <ul> del menú.
  6. Añadimos la etiqueta <main> y dentro colocamos las etiquetas que van desde "La primera web ..." hasta " Photoshop Fix", agrupadas de la forma que veremos a continuación.
  7. Podríamos sustituir la etiqueta <h4> "La primera web ..." por una etiqueta <header> pero la etiqueta <h4> también tiene un significado semántico de cabecera.
  8. Para dar estructura a la etiqueta <main> creamos dos secciones <section class="cursos"> y una <section class="articulos">. A su vez, la primera contendrá dos secciones similares, la primera para los cursos de aulaClic y la segunda para los cursos de los colaboradores, ambas contendrán su cabecera y varias etiquetas <article>, una por cada elemento "Access 2016" ...
  9. La sección de los artículos contendrá la cabecera y la lista de elementos.
  10. Añadimos la etiqueta <aside> y dentro colocamos los párrafos "Síguenos ..." y "En este enlace ..."
  11. Por último añadimos la etiqueta <footer> y dentro colocamos los tres párrafos finales.
  12. Ahora tendríamos una estructura semántica más correcta en la que hemos eliminado varias listas desordenadas, dado que ya no son necesarias. Para ellos debemos cambiar la hoja de estilo para conservar el mismo diseño.
  13. El código HTML correspondiente es el siguiente:
    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8" />
    <title>aulaClic. Cursos gratis</title>
    <link rel="stylesheet" type="text/css" href="css/aulaclic_final.css" />
    </head>
    <body>
    <header><a href="http://www.aulaclic.es">
    <img src="graficos/logo_aulaclic_pequeno.png" >
    </a>
    <h2>aulaClic. Cursos de informática gratis</h2>
    </header>
    <nav><ul class="menu">
    <li><a href="#cursos_aulaclic">Cursos aulaClic </a></li>
    <li><a href="#cursos_colaboradores"> Cursos colaboradores </a></li>
    <li><a href="#articulos_aulaclic"> Artículos aulaClic </a></li>
    </ul>
    </nav>
    <main>
    <h4><i>La primera web en español sobre cursos de informática gratis on-line.</i></h4>
    <section class="cursos">
    <section>
    <h3 id="cursos_aulaclic">Cursos de aulaClic</h3>
    <article><h4>Access 2016</h4>
    <p>Microsoft Access 2016 es la aplicación de bases de datos de Microsoft Office 2016, dirigida a usuarios domésticos y pequeñas empresas. Ofrece numerosas plantillas y una interfaz gráfica muy intuitiva que permite que cualquier usuario (sin ser experto informático) pueda aprender a manejarla rápidamente como pretendemos enseñarte con este curso.</p>
    </article>
    <article><h4>Excel 2016</h4><p>Excel es un programa del tipo Hoja de Cálculo que permite realizar operaciones con números organizados en una cuadrícula. Es útil para realizar desde simples sumas hasta cálculos de préstamos hipotecarios. Si no has trabajado nunca con Excel este curso te ayudará a conocerlo.</p></article>
    <article><h4>Internet</h4><p>Este curso introductorio al mundo de Internet pretende darte una visión general de qué es, para qué sirve y cómo se utiliza Internet. En el año 2014 hemos ampliado y actualizado el contenido para ponerlo al día.</p></article>
    </section>
    <section>
    <h3 id="cursos_colaboradores">Cursos de colaboradores</h3>
    <article><h4>autoCAD 2015</h4><p> Autocad es el programa favorito de industrias completas, como la de la construcción y diversas ramas de la ingeniería, como la del diseño automotriz. Incluso cabe decir que una vez hecho un diseño en Autocad, es posible utilizar otros programas para someter dichos diseños a simulaciones de pruebas de uso por computadora para ver su desempeño en función de los posibles materiales de fabricación.</p></article>
    <article><h4>Estadística con Excel</h4><p>El presente curso tiene por objeto utilizar toda la potencia del programa Microsoft Excel, para resolver problemas de aplicación de la Estadística Descriptiva e Inferencial. Desde esta perspectiva, no es un curso de Estadística ni tampoco un manual de uso del Excel. Del mismo modo, no se debe entender que sea un compendio de procedimientos ni un recetario que le indica al lector lo que debe hacer sin saber para qué o por qué.</p></article>
    <article><h4>Joomla</h4><p>Podemos definir Joomla como C.M.S o Content Management System, o lo que es lo mismo, Sistema de Administración de Contenidos, teniendo como principal objetivo la edición de páginas web de una forma sencilla.Esta aplicación se distribuye en “código abierto” construida en su mayor parte en PHP bajo la licencia GPL</p></article>
    </section>
    </section>
    <section class="articulos">
    <h3 id="articulos_aulaclic">Artículos de aulaClic</h3>
    <ul>
    <li>- Instalar Ubuntu</li>
    <li>- Etiqueta Picture</li>
    <li>- Google Allo</li>
    <li>- Premiere Clip</li>
    <li>- Word App</li>
    <li>- Photoshop Fix</li>
    </ul>
    </section>
    </main>
    <aside><p> Síguenos en <a href="https://www.facebook.com/cursosaulaclic" target="_blank"><span id="sin_subrayar">Facebook</span></a></p>
    <p><a href="https://www.youtube.com/user/aulaclic" target="_blank">En este enlace puedes ver los vídeos de aulaClic en YouTube:<img src="graficos/camera.gif"></a></p>
    </aside>
    <footer><hr>
    <p>Página web creada por aulaClic S.L. 2018 </p><p><a href="http://www.aulaclic.es/portada/politica_cookies.html" target="_blank">Política de cookies</a> </p>
    <p>Prohibida la reproducción por cualquier medio. Los cursos de aulaClic están protegidos en el <span>Registro de la Propiedad Intelectual</span>.</p>
    </footer>
    </body>
    </html>
  14. La hoja de estilo index_final.css es esta:
    /* CSS Hoja de estilo. aulaclic.css */
        body {
        font-size: 12px
        }
        ul {
        list-style-type: none;
        }
        ul.menu li {
        display: inline;
        background-color: antiquewhite;
        margin-right: 10px;
        padding: 5px;
        color:black
        }
    h2 { font-size: 16px; color:darkred }
    .cursos section { margin-left: 55px; } .cursos section h3 { font-size: 14px; color: blue; margin-left: -25px; } .articulos h3 { color: green }
    article h4 { color:darkred } ul li { font-size: 13px } li h4 {
    color: darkred
    }
    #sin_subrayar {
    text-decoration: none;
    letter-spacing: 3px
    } a:link {
    text-decoration: none
    }

Como decíamos al principio la página web con esta solución la puedes ver aquí: index_final.html, también puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.


Enero-2019 (V 2.2)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.