Unidad 3. Ejercicio: Hiperenlaces. Primera 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

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>
<h1>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>
<hr>
<p>&copy; aulaClic S.L.</p>
</body>
</html>

Para empezar a crear un menú en la cabecera de la página vamos a crear tres hiperenlaces a la página anterior, al índice y a la página siguiente. Suponemos que estamos en la primera página de un curso de Excel, por lo tanto, el enlace a la página anterior irá a la misma página en la que nos encontramos excel1.html (es decir, no hará nada). El enlace al índice ira a la página index.html, y el enlace a la página siguiente ira a la página excel2.html. Estás dos páginas no existen todavía. Como estás páginas estarán en el mismo directorio que la página que estamos modificando escribiremos la ruta en forma relativa. Para ello escribe el siguiente código detrás de la etiqueta <body>
```
<a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a>
```
En el último párrafo : © aulaClic S.L., añadiremos un enlace a la página web de aulaclic.es en forma de dirección absoluta y añadiremos el atributo target para que el enlace se abra en una nueva pestaña. Escribe :<a href="https://www.aulaclic.es/index.htm" target="_blank"> © aulaClic S.L.</a>
Ahora crearemos un ancla. Si la página es muy larga puede ser interesante añadir un enlace al principio de la página. Para hacerlo, delante de la etiqueta <hr>, escribiremos un enlace desde una imagen de la siguiente forma <a href="#top"><img src="graficos/icono_top.png"></a>
A continuación añadiremos el identificador del ancla en la etiqueta h1 de esta forma <h1 id ="top">Unidad 1. Introducción</h1>. De esta forma, al hacer clic en la imagen, iremos a esta etiqueta h1. El archivo icono_top.png lo encontrarás en la carpeta ejercicios/unidad-3/curso-excel/graficos
Puedes añadir unos párrafos de texto para ver mejor el efecto del ancla. Si utilizas el editor Brackets y tienes instalada la extensión Emmet puedes hacerlo muy fácilmente con las abreviaturas disponibles: para añadir un párrafo de texto Lorem ipsum basta escribir p>lorem y pulsar Crtl + Alt + Intro y se creará este párrafo:
```
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum rem aspernatur incidunt suscipit quam ut cumque, ratione harum exercitationem dolore doloremque ex, ad magnam commodi provident eaque iusto veritatis? 
```
Para añadir cinco párrafos de texto basta utilizar la abreviatura: p>lorem*5. Obtendremos 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>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, odio. Ipsum, dolorum perferendis, totam amet ab expedita adipisci nihil dignissimos obcaecati dolore veniam dolorem non nisi incidunt repellendus, repudiandae asperiores!</span>
  <span>Possimus id nobis modi iure ullam suscipit laudantium. Rem esse sed, commodi officia reprehenderit harum fuga, vel assumenda consequatur at quia odit, ducimus nisi tempore! Cum quidem ratione, doloribus tempore.</span>
  <span>Animi rerum, dicta aperiam deserunt voluptatem ut, eos perferendis nihil eius sapiente voluptatibus iste mollitia hic eligendi autem voluptates? Dolores fuga quos sequi, facilis vitae officia voluptates modi? In, sed!</span>
  <span>Totam consectetur ex ad adipisci voluptates natus sunt debitis consequatur obcaecati impedit aliquid, nesciunt excepturi blanditiis, repudiandae. Sed, excepturi, facere. Et laboriosam illum hic perferendis saepe veniam! Sapiente, dolore ullam!</span>
  <span>Saepe dolores atque quam officiis illo non eligendi est in inventore vitae, aliquam animi dicta a accusamus. Mollitia praesentium quas nihil eos, vitae debitis ex nobis, inventore nulla perferendis delectus.</span>
  </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>

Pulsa en el menú Archivo y elige Guardar. Visualiza la página web desde Brackets con el botón .
Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.
Una vez probado el código, elimina los párrafos Lorem ipsum y vuelve a guardar el archivo.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

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