Ejercicios unidad 11: CSS. Fuente y texto.



En este ejercicio practicaremos con fuentes y texto. Para realizar este ejercicio debes descargarte el archivo ejercicios/unidad-11/cursos-aulaclicl/index.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-11/cursos-aulaclicl/css/aulaclic.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css (o copiar el código que se muestra a continuación)

Ejercicio 1: Fuentes y texto.

  1. Desde el editor Brackets abre el archivo index.html de la carpeta ejercicios/cursos-aulaclic.
  2. 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.css" />
    </head>
    <body>
    <a href="https://www.aulaclic.es">
    <img class="bordes" src="graficos/logo_aulaclic_pequeno.png" >
    </a>
    <h2 class="fondo">aulaClic. Cursos de informática gratis</h2>
    <div class="resaltado"><p>La primera web en español sobre cursos de informática <span>gratis</span> on-line.</p>
    </div>
    <ul >
    <li><h2>Cursos de aulaClic</h2></li>
    <ol>
    <li>Access 2016</li>
    <li>Excel 2016</li>
    <li>Internet</li>
    <li>Windows</li>
    </ol>
    <li><h2>Cursos de colaboradores</h2></li>
    <ol start="5">
    <li>autoCAD 2015</li>
    <li>Estadística con Excel</li>
    <li>Joomla</li>
    </ol>
    </ul>
    <p class="resaltado"> 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 class="resaltado">
    <p><a href="https://www.aulaclic.es/portada/politica_cookies.html" target="_blank">Política de cookies</a> </p>
    <p class="derechos">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>
  3. La hoja de estilo index.css debe ser esta:
    /* CSS Hoja de estilo. aulaclic.css */
    ul { list-style-type: none }
    h2 {font-size: 20px }
    ul h2 {font-size: 16px }
    h2, ol { color:#8b0000 }
    .resaltado {font-weight: bold }
    div.resaltado {color: darkslategrey }
    p.resaltado {color: blueviolet }
    span {font-family: arial;
    text-decoration: underline}
    #sin_subrayar {text-decoration: none }
    a:link { text-decoration: none }
    .fondo {background-color: antiquewhite;
    width: 20em;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    background-image: url(../graficos/orangeball.gif);
    background-position: 10px center;
    background-repeat: no-repeat;
    }
    .bordes { border-color: blue;
    border-style: solid;
    border-width: 2px;
    border-radius: 9px;
    }
  4. Este es el aspecto de la página:
    ejercicio aulaClic CSS u. 10
  5. El ejercicio consiste en modificar la página para que tenga un aspecto similar al que muestra la siguiente imagen.
  6. Los cambios que hay que efectuar son los siguientes: cambiar la hoja de estilo para que la fuente del body sea verdana, y si no existe tome una fuente del tipo sans-serif. Cambiar la fuente de las listas desordenadas a Tahoma, y si no existe tome una fuente del tipo sans-serif. Añadir una sombra al texto "aulaClic. Cursos de informática gratis" y eliminar la imagen de fondo del círculo naranja. Cambiar a alineación centrada para el selector div.resaltado. Cambiar el espacio interlineado a 1.5 de las listas desordenadas. Modificar el espaciado entre caracteres a 3 px. para el texto "Facebook". Todas estas modificaciones se deben hacer en la hoja de estilo, sin modificar el archivo HTML.

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


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






Página inicial  Cursos Informática Gratuitos

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


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