Unidad 5. Ejercicio: Imágenes. Etiqueta IMG

En este ejercicio practicaremos con listas. 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: Imágenes. Etiqueta <img>

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>
  <link rel="stylesheet" type="text/css" href="css/excel.css" />
  </head>
  <body>
  <ul>
  <li><a href="excel1.html">Atrás</a></li>
  <li><a href="index.html">Índice</a></li>
  <li><a href="excel2.html">Adelante</a></li>
  </ul>
  <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>
  <ol>
  <li> Nuevos tipos de gráficos.</li>
  <li> Nuevos estilos predeterminados.</li>
  <li> Mapas en tres dimensiones 3D.</li>
  </ol>
  <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>

Detrás del sato de línea que hay después de la palabra cuadrícula vamos a insertar la imagen logo-Excel.png que puedes encontrar en la carpeta ejercicios/unidad-5/curso-excel/graficos. Para ello escribimos el siguiente código: <img src="graficos/logo-Excel.png">
A continuación añadimos el atributo alt con el siguiente texto: <img src="graficos/logo-Excel.png" alt="Logotipo de Excel">
Ahora añadiremos el atributo title con este texto: <img src="graficos/logo-Excel.png" alt="Logotipo de Excel" title="Hoja de cálculo Excel">
Si visualizas la página verás como la imagen es demasiado grande, tiene unas dimensiones de 225 x 225 pixels, vamos a reducirla a la mitad con los atributos de tamaño:

<img src="graficos/logo-Excel.png"  width="112" height="112" alt="Logotipo de Excel" title="Hoja de cálculo Excel">

Observa que el texto del siguiente párrafo se ve a continuación de la imagen, esto es porque las imágenes, por defecto, son de tipo display inline, si incluimos la imagen dentro de un párrafo que es de tipo display block se producirá un salto de línea. También debemos cerrar el párrafo anterior y abrir el siguiente ya que los párrafos no se pueden anidar

<p><img src="graficos/logo-Excel.png"  width="112" height="112" alt="Logotipo de Excel" title="Hoja de cálculo Excel"></p>

Por lo tanto el archivo excel1.html queda con este código:

<!doctype html>
        <html>
        <head>
  <meta charset="utf-8" />
  <title>Curso de Excel 2016</title>
  <link rel="stylesheet" type="text/css" href="css/excel.css" />
  </head>
  <body>
  <ul>
  <li><a href="excel1.html">Atrás</a></li>
  <li><a href="index.html">Índice</a></li>
  <li><a href="excel2.html">Adelante</a></li>
  </ul>
  <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>.</p>
  <p><img src="graficos/logo-Excel.png" width="112" height="112" alt="Logotipo de Excel" title="Hoja de cálculo Excel"></p>
   <p>  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>
  <ol>
  <li> Nuevos tipos de gráficos.</li>
  <li> Nuevos estilos predeterminados.</li>
  <li> Mapas en tres dimensiones 3D.</li>
  </ol>
  <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>

Se verá así:
Pulsa en el menú Archivo y elige Guardar con el mismo nombre. Visualiza la página web desde el editor 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.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

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