Ejercicios unidad 12: Estructura de una página web

En este ejercicio practicaremos con las etiquetas semánticas. Para realizar este ejercicio debes descargarte el archivo ejercicios/unidad-12/cursos-aulaclicl/index_inicial.html y guardarlo en la carpeta de ejercicios/cursos-aulaclic (o copiar el código que se muestra a continuación). También debes descargarte el archivo ejercicios/unidad-12/cursos-aulaclicl/css/aulaclic_inicial.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css (o copiar el código que se muestra a continuación). Los archivos de las imágenes están en ejercicios/unidad-12/cursos-aulaclicl/graficos

Ejercicio 1: Etiquetas semánticas.

Se trata de aprender a utilizar las etiquetas semánticas. Para ello partiendo de de la página web index_inicial.html que no utiliza etiquetas semánticas debes modificarla para que tenga una estructura adecuada utilizando etiquetas semánticas. El aspecto y diseño de la página no debe cambiar, sólo debes cambiar su estructura HTML. Tendrás que modificar también la hoja de estilo pero sin que ello afecte apreciablemente al aspecto de la página web. Aquí puedes ver la página web index_inicial.html
Desde el editor Brackets abre el archivo index_inicial.html de la carpeta ejercicios/cursos-aulaclic.

Debes ver el siguiente código HTML:

<!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8" />
    <title>aulaClic. Cursos gratis</title>
    <link rel="stylesheet" type="text/css" href="css/aulaclic_inicial.css" />
    </head>
    <body>
    <a  href="https://www.aulaclic.es">
    <img src="graficos/logo_aulaclic_pequeno.png" >
  </a>
  <h2>aulaClic. Cursos de informática gratis</h2>
  <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>
  <h4><i>La primera web en español sobre cursos de informática gratis on-line.</i></h4>
  <ul >
  <li><h3 id="cursos_aulaclic">Cursos de aulaClic</h3></li>
  <ul>
  <li><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></li> 
  <li><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></li>
  <li><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></li> 
  </ul>
  <li><h3 id="cursos_colaboradores">Cursos de colaboradores</h3></li>
  <ul>
  <li><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></li> 
  <li><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></li>
  <li><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></li> 
  </ul>
  </ul>
  <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>
  <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>
  <hr>
  <div >
  <p>Página web creada por aulaClic S.L. 2018 </p><p><a href="https://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>
  </div>
  </body>
  </html>

La hoja de estilo index_inicial.css debe ser 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
    }
    li h3 {
    font-size: 14px;
    color: blue
    }
    #articulos_aulaclic {
    font-size: 14px;
    color: green
    }
    ul li {
    font-size: 13px
    }
  li h4 {
    color: darkred 
    }
  #sin_subrayar {
    text-decoration: none;
    letter-spacing: 3px
    }
  a:link {
    text-decoration: none 
    }

Para realizar este ejercicio debes identificar las partes principales de la página web. Es decir, que partes forman la cabecera, el contenido principal, el contenido adicional y el pie. En el contenido principal debes identificar su estructura, sus partes y subdivisiones. Una vez hecho esto podrás asignar a cada parte la etiqueta semántica adecuada.
Todo este proceso no es unívoco, 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.
Este es el aspecto de la parte superior de la página:
Esta es la parte inferior de la página.
La página tiene una estructura basada en listas, si es necesario elimina las listas que creas oportuno.

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

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