Unidad 3. Ejercicio: Hiperenlaces. Segunda parte



En este ejercicio practicaremos con hiperenlaces. Antes de realizar este ejercicio debes haber hecho los ejercicios paso a paso anteriores o copiar el código que se muestra a continuación del archivo excel1.html.

Ejercicio 1: Hiperenlaces. Formato con pseudoclases

  1. Desde el editor Brackets abre el archivo excel1.html de la carpeta ejercicios/curso-excel, que creamos en los ejercicios anteriores .
  2. Debes ver el siguiente código:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Curso de Excel 2016</title>
    </head>
    <body>
    <p><a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a></p>
    <h1 id ="top">Unidad 1. Introducción</h1>
    <p>Excel es un programa del tipo &nbsp;&nbsp;Hoja de Cálculo&nbsp;&nbsp; que permite realizar operaciones con números organizados en una <q>cuadrícula</q>.<br />
    Es útil para realizar desde simples sumas hasta cálculos de préstamos hipotecarios.</p>
    <h2>1.1. Novedades de Excel</h2>
    <p>Esta versión de <strong>Excel 2016</strong> trae las siguientes novedades y mejoras.</p>
    <p><b>1.-</b> Nuevos tipos de gráficos.</p>
    <p><b>2.-</b> Mapas en tres dimensiones 3D.</p>
    <p>Iniciar Excel 2016</p> <p><a href="#top"><img src="graficos/icono_top.png"></a></p>
    <hr>
    <p><a href="http://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
    </body>
    </html>
  3. Utilizando las hojas de estilo vamos a dar formato a las pseudoclases.
    Lo primero es crear el archivo que contendrá la hoja de estilos, para ello dentro de la carpeta ejercicios/curso-excel, crea una capeta llamada css y dentro de ella crea un archivo con el nombre excel.css.
  4. Ahora vamos a crear las reglas para dar formato las pseudoclases, dentro del archivo excel.css, para que los hiperenlaces sin visitar aparezcan en color verde oscuro y sin subrayar escribe:

    a:link { color:darkgreen; text-decoration: none }

  5. Para que los enlaces visitados aparezcan en color rojo:
    a.:visited { color: red;}

    Para que al colocar el cursor aparezcan en color morado y en negrita:
    a:hover { color: darkviolet; font-weight: bold }

    Para que en mienras hacemos clic aparezcan en color verde claro:
    a:active { color: yellowgreen; }

  6. Enlaza el archivo excel.css desde el archivo excel1.html, para ello, antes de la etiqueta </head> escribe lo siguiente: <link rel="stylesheet" type="text/css" href="css/excel.css" />
    Este debe ser el resultado:
  7. Pulsa en el menú Archivo y elige Guardar. Visualiza la página web desde Brackets con el botón , observa lo que ocurre cuando colocas el cursor sobre un hiperenlace, cuando haces clic en un enlace y comprueba el color de los enlaces visitados.

 


Enero-2019 (V 2.0)
Volver






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.