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

Desde el editor Brackets abre el archivo excel1.html de la carpeta ejercicios/curso-excel, que creamos en los ejercicios anteriores .

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="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
  </body>
  </html>

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.
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 }

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; }

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:
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)

Cursos Informática Gratuitos

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