P6 Grafs HTML - Apoyo - 21 22

################################
Práctica 6
Tablas, gráficos y HTML
Informática Básica
Material de apoyo Grado en: Ingeniería Informática,
Matemática Computacional
L A HERRAMIENTA DE HOJA DE CÁLCULO DE GOOGLE DRIVE incluye la posibilidad de realizar gráficos de

forma rápida y eficaz –al igual que lo permite la mayoría de aplicaciones de hoja de cálculo, tales como Excel
de Microsoft Office o Calc de LibreOffice.
El editor de gráficos de Google Drive no es, tal vez, la mejor herramienta que podemos emplear para realizar
gráficos desde un punto de vista profesional, pero sí que tiene las características suficientes para ilustrar los
aspectos que queremos resaltar en esta práctica. Además, su uso es sencillo y su manejo no solo se integra con
el resto de herramientas de Drive –permitiendo, por ejemplo, insertar de forma sencilla gráficos en documentos
de texto o en presentaciones– sino que también permite que podamos guardar copias en nuestro disco duro
(en formato PNG) o podamos insertarlas en nuestras páginas web.
Aprovecharemos la realización de esta práctica para hacer una introducción a HTML (HyperText Markup Lan-
guage), que es el lenguaje de etiquetas que interpretan los navegadores a la hora de mostrar los contenidos
de una página web. Pretendemos que te familiarices con su uso para que puedas hacer páginas sencillas que
incluyan gráficos generados con el editor de gráficos de Google Drive.
NOTA: Todos los vídeos de este tema fueron elaborados en el curso 2017/2018. En el tiempo transcurrido hasta
ahora Google ha hecho algunas modificaciones que no afectan demasiado al contenido de los vídeos. No obstante,
queremos que tengas en cuenta lo siguiente:
Vídeo 1: el botón Más en la barra de herramientas de la hoja de cálculo ahora se llama . . . (tres puntos se-
guidos). Las pestañas del Editor de gráficos ahora se llaman Configuración y Personalizar en lugar de Datos
y Personalizado. La sección Serie ahora se llama Sector de gráfico circular y, dentro de ella, encontramos la
opción Distancia del centro que permite separar sectores a cierta distancia del centro del círculo. La opción
Anillo dentro de Gráfico circular en Personalizar ahora se llama Hueco del círculo. El título del gráfico,
además, se puede alinear a la izquierda, a la derecha o centrar. Para ello, hay un botón junto a los de negrita
y cursiva.
Vídeo 2: la opción de menú Guardar Imagen ahora se llama Descargar y da acceso a un submenú que
permite seleccionar el formato en el que se va a guardar la imagen: PNG, PDF o SVG. El nombre por
defecto para la imagen del gráfico a la hora de guardarla incluye el título del gráfico (si lo hubiere). Las
opciones Enlazar con la hoja de cálculo y Pegar sin enlazar se llaman ahora Vincular con la hoja de cálculo
y Pegar sin vincular, respectivamente.
Vídeo 3: los gráficos de líneas permiten ahora elegir el tipo de línea en la sección Serie dentro de Perso-
nalizar. El número de cuadrículas principales y secundarias se fija ahora a través de Recuento principal y
Recuento secundario.
Vídeo 4: la opción de ayuda ahora se denomina Añadir y editar un gráfico en lugar de Editar un gráfico. Sus
contenidos han cambiado ligeramente en cuanto a estructura y organización, sobre todo.
Bibliografía
A DAM F REEMAN. The Definitive Guide to HTML5, friendsofED, Apress, 2011.
M ATTHEW DAVID. HTML5: Designing Rich Internet Applications, Burlington, MA: Focal Press, 2010. Disponible en el
catálogo de la Biblioteca de la UJI1 .
L UC VAN L ANCKER. HTML5 y CSS3: Domine los estándares de las aplicaciones Web, Cornellà de Llobregat, Barcelona:
ENI, 2011. Disponible en el catálogo de la Biblioteca de la UJI2 .
C HRISTOPHER S CHMITT, K YLE S IMPSON. HTML5 Cookbook, O’Reilly Media, noviembre de 2011.
1 https://cataleg.uji.es/permalink/34CVA_UJI/1dirr45/alma991003763449706336
2 https://cataleg.uji.es/permalink/34CVA_UJI/1pjv2jn/alma991002134559706336
-1-
EI(MT)1002. Informática Básica - 1er curso. Material de apoyo. Tablas, gráficos y HTML
Índice
1 Creación de gráficos con Google Drive 2
2 Introducción a HTML 5 3
2.1 Ejemplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1 Ejemplo 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.2 Ejemplo 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.3 Ejemplo 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1.4 Ejemplo 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Página web WebGrafGoogleDrive.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1. Creación de gráficos con Google Drive

El editor de gráficos de Google Drive es una herramienta que permite diseñar gráficos de manera bastante sencilla e in-
tuitiva. Con él vamos a realizar gráficos que insertaremos en las hojas de cálculo donde, previamente, habremos introducido
los datos de partida para su construcción.
Figura 1: VÍDEO: Creamos nuestro primer gráfico con el editor de gráficos de Google Drive.
Figura 2: VÍDEO: Opciones que proporciona el editor de gráficos de Google Drive para manipularlos y compartirlos con otras aplica-
ciones.
-2-
Conviene resaltar que los gráficos que creemos no solo podrán visualizarse en las hojas de cálculo, sino que también
podremos insertarlos en documentos de texto o presentaciones, e incluso descargarlos en formato PNG para almacenarlos
en nuestro disco duro o insertarlos en páginas web empleando código HTML. Para ilustrar el trabajo con esta herramienta,
hemos preparado unos cuantos vídeos demostrativos que adjuntamos en este documento. Los vídeos son accesibles desde
las Figuras 1–4 (haz clic con el ratón en la imagen correspondiente para reproducirlos).
Figura 3: VÍDEO: Creamos el segundo gráfico con el editor de gráficos de Google Drive y vemos varias formas de insertarlo en una
página web propia.
Figura 4: VÍDEO: Creamos un tercer gráfico con el editor de gráficos de Google Drive.
2. Introducción a HTML 5
HTML (HyperText Markup Language) es el lenguaje de etiquetas con el que están realizadas las páginas web. Este es
el “idioma” que deben interpretar los navegadores para poder mostrar correctamente la información almacenada en estas
páginas. La última versión de este estándar para la confección de páginas web es la 5. Por tanto, vamos a hacer una
introducción muy básica a HTML 5.
El lenguaje HTML se utiliza tanto para describir la estructura como el contenido en forma de texto de una página web,
así como para complementar sus contenidos con objetos tales como imágenes. HTML utiliza palabras clave o “etiquetas”,
rodeadas por corchetes angulares (<,>) tanto para describir la estructura como para identificar contenidos. HTML también
puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir pequeños programas (scripts), nor-
malmente escritos en JavaScript, que pueden afectar al comportamiento de navegadores web y otros programas intérpretes
-3-
de HTML.
En este material de apoyo no vamos a redactar un manual de HTML, ya que resultaría una faena enorme y un tanto
inútil, dada la cantidad de excelentes libros y buenos tutoriales que pueden encontrarse en la red. En su lugar, te remitimos
a los manuales y libros propuestos en la bibliografía. Y lo que haremos será ilustrar su utilización mediante unos sencillos
ejemplos.
2.1. Ejemplos
Para concluir esta sección vamos a mostrar unos cuantos ejemplos de páginas web. Para cada ejemplo, mostraremos el
contenido HTML del fichero que almacena la página junto con la imagen del navegador Firefox mostrando sus contenidos,
y los acompañaremos con una breve descripción donde asociaremos etiquetas de HTML con el resultado que se visualiza
en la imagen. La idea es que utilices estos ejemplos como complemento a los materiales apuntados anteriormente para una
mayor comprensión de los fundamentos de HTML.
Puedes usar estos ejemplos como base para hacer pruebas, añadiendo o modificando etiquetas HTML. Puedes escribir
el código HTML de una sencilla página web empleando cualquier editor de texto, tal como Kate en Linux o el Bloc de
Notas o Wordpad en Windows. Recuerda que debes guardar los ficheros en formato de texto plano (txt) y con la extensión
.html. Existen editores WYSIWYG (What You See Is What You Get, es decir, “lo que ves es lo que obtienes”) específicos
para HTML tales como FrontPage, DreamWeaver, Amaya o Brackets, pero para el nivel de los ejercicios que te vamos a
plantear creemos que te resultará más cómodo usar un editor de texto. Además, el hecho de usar un editor te va a obligar a
conocer mejor el funcionamiento de las etiquetas y el significado de sus parámetros, que es uno de los objetivos secundarios
que perseguimos con esta práctica (el principal es que sepas realizar y presentar tus gráficos).
Figura 5: Página web del ejemplo 1 visualizada con el navegador Firefox.
2.1.1. Ejemplo 1
Nuestro primer ejemplo es una sencilla página web que contiene únicamente una tabla de 3 filas y 2 columnas. Las 3
filas de la segunda columna están ocupadas por una imagen, mientras que en la primera columna aparece un texto con un
formato determinado (en negrita). Por otro lado, dicha tabla tiene un color verde oscuro de fondo y está centrada en la
página, cubriendo un 80 % del total del área de visualización. Puedes ver el aspecto que presenta la página en la Figura 5.
-4-
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv = "Content-type">
6 <meta content = "text/html">
7 <title>Primer ejemplo: una tabla sencilla</title>
8 </head>
9 <body>
10 <header>
11 <h2>Una tabla:</h2>
12 </header>
13 <table style="width:80%; border:0px; margin-left:auto; margin-right:auto;
14 float:center; background-color:green">
15 <caption>
16 <h3>Nuestra primera tabla.</h3>
17 </caption>
18 <thead>
19 <tr>
20 <th><h4>Primera columna</h4></th>
21 <th><h4>Segunda columna</h4></th>
22 </tr>
23 </thead>
24 <tbody>
25 <tr>
26 <td style="width:40%; text-align:center; vertical-align:middle">
27 <span style="font-weight: bold;">Mi nombre</span></td>
28 <td style="width:60%; text-align:right; vertical-align:bottom"
29 rowspan="3"><img src="misterio.jpg" alt="titanic98"
30 width="499" height="352"></td>
31 </tr>
32 <tr>
34 <span style="font-weight: bold;">Mis apellidos</span></td>
35 </tr>
36 <tr>
38 <span style="font-weight: bold;">Mi DNI</span></td>
39 </tr>
40 </tbody>
41 </table>
42 <footer>
43 <h5>© Profes de Informática Básica (1002).</h5>
44 </footer>
45 </body>
46 </html>
Figura 6: Código HTML para la web del ejemplo 1.
A continuación, en la Figura 6, presentamos un listado con el código HTML de la página para que puedas relacionar las
etiquetas con su apariencia, mostrada en la Figura 5. Fíjate que hemos incluido áreas marcadas de color rojo para indicar
estas relaciones que, seguidamente, pasamos a comentar:
• Observa que todo el código va encerrado entre las etiquetas de comienzo, <html>, y fin, </html>. La de comienzo
incluye el atributo lang="es" para indicar que el idioma empleado en el documento es el español. Antes del
comienzo, tenemos una etiqueta donde se indica el tipo de documento (HTML).
• El título de la página, que corresponde con la zona marcada con la letra
A en la Figura 5, se hace con la etiqueta
HTML de la línea 7 del listado de la Figura 6.
• La etiqueta HTML de la línea 4 incluye información para identificar la codificación de caracteres que se emplea en
la página: charset="utf-8".
• El texto marcado con la letra
B en la Figura 5 se consigue con la etiqueta HTML de la línea 11. Las etiquetas h1,
-5-
h2, h3, h4 y h5 definen una serie de estilos de texto predefinidos —títulos— a diferentes niveles —por ejemplo, de
tipografías más grandes a más pequeñas. En este caso, usamos la etiqueta <h2>.
• La tabla, marcada con la letra C en la Figura 5, se realiza con las etiquetas de las líneas 13–41 del listado (Fi-
gura 6). Fíjate –línea 13– que la tabla ocupa un 80 % de la ventana del navegador –width:80 %;–, que no tiene
bordes dibujados –grosor 0 del borde con border:0px;–, que está centrada en la página –margin-left:auto;
margin-right:auto; float:center;– y que su color de fondo es verde –background-color:green.
• Dicha tabla tiene una cabecera —letra D en la Figura 5— y unos encabezados en las columnas —letra E en la
Figura 5. Esto se consigue, respectivamente, con las etiquetas <caption>, y <thead> y <th> que hay en las
líneas 15–23 del listado. Observa que el “cuerpo” de la tabla —sus contenidos— va encerrado entre las etiquetas
<tbody> —en la línea siguiente— y </tbody>.
• La imagen, marcada con la letra F en la Figura 5, se consigue insertar con la etiqueta <img> que hay escrita en las
líneas 29–30 del listado (Figura 6). Observa que esta imagen está dentro de una celda de la tabla –etiquetas <td>
de la línea 28 y </td> de la 30–, la cual ocupa el 60 % de la tabla –width:60 %;–, está alineada horizontalmente
a la derecha y verticalmente abajo –text-align:right; vertical-align:bottom– y se extiende hasta
ocupar tres filas de la tabla –rowspan="3".
• Las otras tres filas, correspondientes a la primera columna, con los textos en negrita “Mi nombre”, “Mis apellidos” y
“Mi DNI” (marcadas con la letra G en la Figura 5), están hechas, respectivamente, con las etiquetas <td> y </td>
de las líneas 26–27, 33–34 y 37–38. Fíjate en el uso de las etiquetas <span> y </span> para delimitar el texto al
cual se le va a aplicar el estilo style="font-weight: bold;" para conseguir el efecto negrita.
• Finalmente, observa que hemos añadido un pie a la página web —
H en la Figura 5. Esto se consigue mediante el
empleo de las etiquetas <footer> y </footer> en las líneas 42–44 del listado de la Figura 6.
Si te has fijado bien en el listado HTML de este primer ejemplo, habrás apreciado que es recomendable escribir las etique-
tas HTML en minúsculas, aunque la mayoría de navegadores también las interpreta correctamente escritas en mayúsculas.
Las “normas de estilo” de HTML recomiendan que las etiquetas se escriban en minúsculas.
2.1.2. Ejemplo 2
Nuestro segundo ejemplo lo constituye una página web que tiene algunos elementos más, tal como se puede apreciar en la
imagen de la Figura 7. Si te fijas bien en dicha imagen, podrás observar que tenemos una tabla — — B de una complejidad
similar a la realizada en el ejemplo anterior, separada por una barra horizontal del párrafo que hay al final – .
D Esta página
-6-
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
7 <title>Página web de Juancar</title>
8 </head>
9 <body style="background-color:#F9CF12">
10 <table style="width:65%; border:0px; margin-left:auto; margin-right:auto;
11 float:center">
12 <tbody>
13 <tr>
14 <td style="width:40%; text-align:center; vertical-align:middle"
15 rowspan="3">
16 <img src="mi_foto.jpeg" alt="mi foto" width="130"
17 height="130"></td>
18 <td><span style="font-weight: bold;">DNI:</span> 22695652B</td>
19 </tr>
20 <tr>
21 <td><span style="font-weight: bold;">Nombre:</span> Juan
22 Carlos Amengual Argudo</td>
23 </tr>
24 <tr>
25 <td><span style="font-weight: bold;">Correo-e:</span>
26 <a href="mailto:jcamen@lsi.uji.es">jcamen@lsi.uji.es</a></td>
27 </tr>
28 </tbody>
29 </table>
30 <div style="width:50%; margin-left:auto; margin-right:auto; float:center">
31 <p><span style="font-weight: bold;">Mis aficiones:</span></p>
32 <ol type="I">
33 <li>Cine: <a href="http://www.imdb.com" target="_blank">Página web de
34 la Internet Movie Database</a></li>
35 <li>Fútbol: <a href="http://www.fcbarcelona.cat">Página web del
36 Barça</a></li>
37 <li>Lectura: <a href="http://www.quedelibros.com/">Una comunidad de
38 libros</a></li>
39 </ol>
40 </div>
41 <div style="width:85%; margin-left:auto; margin-right:auto; float:center">
42 <hr>
43 </div>
44 <div style="width:70%; margin-left:50pt; font-size:18px; font-weight: bold;
45 text-align:justify">
46 <p>Aquí dejo un enlace al fichero PDF con <a href="cursohtml5desdecero.pdf">
47 el curso de HTML5 de Raúl Jiménez Ortega</a>.</p>
48 </div>
49 <footer style="margin-left:auto; margin-right:auto; text-align:center">
51 </footer>
52 </body>
53 </html>
incluye una lista numerada – –

C y una serie de enlaces externos (a otras páginas web) e internos (a un fichero del disco
duro) – .
E
En la Figura 8, puedes ver el listado con el código HTML para esta página. Igual que en el ejemplo anterior, hemos
incluido áreas marcadas de color rojo en la imagen de la Figura 7 para que puedas relacionar las etiquetas con la página tal
como la muestra el navegador.
• Al igual que en el ejemplo anterior, hemos marcado el título de la página con la letra
A en la Figura 7. El título se
-7-
logra con la etiqueta HTML de la línea 7 del listado de la Figura 8. En adelante, ya no comentaremos más sobre el
uso de las etiquetas <title> y </title> en HTML.
• Nuevamente se incluye información para identificar la codificación de caracteres que se emplea en la página —en la
etiqueta HTML de la línea 4, concretamente: charset="utf-8".
• Fíjate que, en este caso, se aplica un mismo color de fondo a toda la página. Nuevamente empleamos el atributo
background-color, pero en este caso aplicando el estilo a la etiqueta <body> en lugar de a <table> —línea
9: background-color:#F9CF12. Observa también que, en lugar de usar un color predefinido tal como green,
empleamos la codificación RGB en hexadecimal para indicar el color exacto que deseamos: #F9CF12.
• La tabla, marcada con la letra
B en la Figura 7, se realiza con las etiquetas de las líneas 10–29 del listado (Figura 8).
Fíjate en los parámetros empleados en la definición del estilo de la etiqueta <table> —líneas 10 y 11. ¿Sabrías
decir qué ancho de la ventana del navegador ocupa? ¿Qué alineación tiene? ¿Qué borde presenta?
• Fijémonos con mayor atención en la lista numerada, marcada con la letra C en la Figura 7, ya que se trata de una
novedad respecto al ejemplo anterior. Observa que la lista está incluida dentro de un bloque <div>. Las etiquetas
<div> y </div> se emplean para definir un bloque de contenido o sección de la página, y así poder aplicarle
diferentes estilos e incluso poder realizar operaciones sobre ese bloque específico. En este caso usamos el bloque
definido por <div> —líneas 30–40 del listado de la Figura 8— para aplicar un estilo que permite centrar todo su
contenido en la página ocupando un 50 % de la anchura de la misma. Dentro del bloque, nos encontramos con un
párrafo —<p> y </p>, en la línea 31— y la lista numerada propiamente dicha, la cual se consigue con las etiquetas
de las líneas 32–39 del listado —etiquetas <ol> y </ol>. Observa que la numeración usa números romanos —
parámetro type=”I” en la línea 32— y que cada elemento de la lista va encerrado entre las etiquetas <li> y
</li>.
• Otra novedad la constituyen los hiperenlaces empleados en esta página, marcados con la letra
E en la Figura 7. Se
consiguen, respectivamente, con las etiquetas <a> y </a> de las líneas 26, 33–34, 35–36, 37–38 y 46–47. El texto
del hiperenlace es justamente el que se encuentra encerrado entre ambas etiquetas, mientras que la referencia a la
-8-
que se debe de saltar al hacer clic en el enlace viene determinada por el parámetro href. Las referencias pueden ser
a webs externas —href="http://www.imdb.com"— o internas, al igual que a ficheros en el disco duro —
href="cursohtml5desdecero.pdf"— o incluso a direcciones de correo electrónico como la que aparece en
la línea 26 —href="mailto:jcamen@lsi.uji.es". Fíjate en que el uso del atributo target="_blank"
consigue que el URL se abra en una nueva ventana del navegador —o pestaña, según su configuración.
• También, y como se ha comentado arriba, se emplean las etiquetas <p> y </p> para marcar el principio y el final
de un párrafo, el cual se marca con la letra D en la imagen de la Figura 7. Este párrafo se corresponde con las líneas
46–47 del listado de la Figura 8. Observa que dicho párrafo se encuentra en el interior de un bloque <div>, cuya
etiqueta de comienzo de bloque (<div>) incluye una serie de parámetros que, en orden de aparición, determinan el
ancho del párrafo con respecto a las dimensiones de la página, el valor del margen izquierdo, el tamaño de la fuente
del texto en el párrafo, el efecto negrita en el texto del mismo y la alineación de dicho texto (justificado).
• Por último, fíjate que el pie de página —marcado con la letra
F en la Figura 7— aparece ahora centrado en la página
—y así permanecerá en los siguientes ejemplos. Es por la aplicación del estilo style="margin-left:auto;
margin-right:auto; text-align:center" para la etiqueta <footer> de la línea 49 en el listado de la
Figura 8.
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
7 <title>Examen IX01: septiembre 2008</title>
8 </head>
9 <body>
10 <table style="width:60%; border:0px; text-align:left; margin-left:auto;
11 margin-right:auto; float:center">
12 <tbody>
13 <tr>
14 <td style="background-color:red; text-align:right;">
15 <span style="font-weight:bold;">DNI:</span></td>
16 <td style="background-color: rgb(51, 51, 255);">Mi DNI</td>
17 </tr>
18 <tr>
19 <td style="background-color: red; text-align: right;">
20 <span style="font-weight:bold;">Correo-e:</span></td>
21 <td style="background-color: rgb(51, 51, 255);">Mi correo</td>
22 </tr>
23 </tbody>
24 </table>
25 <br>
26 <div style="text-align: center;">
27 <h3>Hola, me llamo Mi nombre y antes de hacer este ejercicio estaba
28 así:</h3>
29 <img style="width: 185px; height: 175px;" alt="tristeza" src="triste.png">
30 <br>
31 <h3>Pero, ahora, tras publicar mi página web estoy así:</h3>
32 <img style="width: 160px; height: 164px;" alt="alegría" src="contento.jpg">
33 </div>
36 </footer>
37 </body>
38 </html>
2.1.3. Ejemplo 3
El tercer ejemplo que mostramos en este material de apoyo es una página web más sencilla. Tan solo incluye una tabla,
dos títulos (ahora explicaremos por qué empleamos esta acepción) y dos imágenes, insertadas empleando la etiqueta <img>.
-9-
Por tanto, nuestras explicaciones en este caso serán más breves. En la imagen de la Figura 9 puedes apreciar cómo muestra
el navegador los contenidos de esta página de ejemplo.
En la Figura 10, puedes ver el listado con el código HTML para esta página. Igual que en los ejemplos anteriores, hemos
incluido áreas marcadas de color rojo en la imagen de la Figura 9 para que puedas relacionar las etiquetas con la página tal
como la muestra el navegador.
• La tabla, marcada con la letra

A en la Figura 9, se realiza con las etiquetas introducidas en las líneas 10–24 del listado
(Figura 10). Nuevamente, queremos que observes con atención los parámetros empleados en la etiqueta <table>
–líneas 10 y 11. Por otro lado, observa el color de fondo que hemos establecido para las diferentes celdas de la tabla
–etiquetas <td> en las líneas 14, 16, 19 y 21– y cómo lo hemos establecido.
• Antes, hemos comentado que esta página contenía dos títulos. Son los que están marcados con la letra B en la
Figura 9. Y decimos que son títulos porque están hechos empleando las etiquetas <h3> y </h3> de las líneas 27–28
y 31 del listado. La etiqueta <h3> define un nivel de título en una página web (por ejemplo, <h1>, <h2>, <h4>
o <h5> definen títulos a otros niveles). Cada nivel de título tiene unas características predeterminadas en cuanto
a tamaño de letra y espaciado. Ambas etiquetas están incluidas dentro de un bloque <div> —líneas 26–33 del
listado— que permite centrar en la página sus contenidos: style="text-align: center;".
• Por último, tenemos las imágenes, marcadas con la letra

C en la Figura 9. Se insertan en la página mediante las
etiquetas <img> de las líneas 29 y 32. No diremos nada más al respecto, tan solo queremos resaltar que ambas
- 10 -
imágenes están contenidas dentro del bloque definido por las etiquetas <div> y </div> de las líneas 26–33, lo cual
permite centrarlas en la página. Consulta los tutoriales de HTML que se mencionan en la bibliografía para obtener
mayor información al respecto de los usos de <div>.
2.1.4. Ejemplo 4
Nuestro último ejemplo es también bastante sencillo. Se trata de una página web que contiene un par de textos (títulos en
realidad, ya que están hechos empleando la etiqueta <h3>) y un par de tablas, tal como ilustra la imagen de la Figura 11.
La primera tabla (arriba del todo) es idéntica a la que empleamos en el ejemplo anterior, por lo que nada más comentaremos
sobre ella en esta sección.
En la Figura 12, puedes ver el listado con el código HTML para esta página. Igual que en los ejemplos anteriores, hemos
incluido áreas marcadas de color rojo en la imagen de la Figura 11 para que puedas relacionar las etiquetas con la página
tal como la muestra el navegador.
• Al igual que en el ejemplo anterior, los textos de esta página web (hemos marcado solamente el primero con la letra

A en la Figura 11) se realizan empleando etiquetas <h3> y </h3>, concretamente las que aparecen en las líneas
27 y 50 del listado que se muestra en la Figura 12. Nuevamente, fíjate en el uso de bloques <div> y el parámetro
empleado para centrar los textos incluidos en sus contenidos.
• La tabla que contiene las tres imágenes, marcada con la letra B en la Figura 11, tiene dos filas y dos columnas, lo
que pasa es que la primera imagen —la del pingüino que representa al sistema operativo Linux— se expande para
ocupar dos filas —fíjate en el atributo rowspan="2" de las líneas 34–36 del listado. Esta tabla está realizada con
las etiquetas que hay en las líneas 30–47 del listado. Fíjate en los parámetros de la etiqueta <table> —líneas 30 y
31— y en el uso de las etiquetas <img> para insertar las imágenes –líneas 35–36, 38–39 y 43–44. También queremos
que te fijes en la alineación de las celdas —etiquetas <td> de las líneas 34–36, 37–39 y 42–44.
2.2. Página web WebGrafGoogleDrive.html

En el archivo PaginasWeb.zip, que encontrarás en el Aula Virtual dentro de la carpeta con los contenidos de esta
práctica, están todos los ejemplos de páginas web que hemos visto en las secciones anteriores. No obstante, debes saber
que, al descomprimir dicho archivo, no solo tendrás todos los ficheros relacionados con estos ejemplos, sino también el
fichero WebGrafGoogleDrive.html.
Este fichero es el que se utiliza en el vídeo de la Figura 3 para ilustrar cómo podemos insertar imágenes de gráficos
realizados con el editor de gráficos de Google Drive en páginas web que estemos elaborando. En la página web que
confecciona este fichero hay una tabla al principio. Queremos llamar tu atención sobre la manera en la que se establecen los
bordes de dicha tabla, tanto el exterior de la misma como los interiores de las diversas celdas. Hemos empleado las etiquetas
<style> y </style>, dentro de la cabecera de la página web —marcada por las etiquetas <head> y </head>—, para
definir, de una sola vez y para todo el documento los bordes que van a tener todas las tablas y todas las celdas de la página:
<head>
...
<style>
table { border:2px solid black; }
td { border:1px dashed green; }
</style>
</head>
Observa atentamente el resultado al abrir el fichero WebGrafGoogleDrive.html con cualquier navegador.
- 11 -
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
7 <title>Modelo página web curso 2009/2010</title>
8 </head>
9 <body>
10 <table style="width:60%; border:0px; text-align:left; margin-left:auto;
11 margin-right:auto; float:center">
12 <tbody>
13 <tr>
15 <span style="font-weight: bold;">DNI:</span></td>
16 <td style="background-color: rgb(51, 51, 255);">Mi DNI</td>
17 </tr>
18 <tr>
20 <span style="font-weight:bold;">Correo-e:</span></td>
21 <td style="background-color: rgb(51, 51, 255);">Mi correo</td>
22 </tr>
23 </tbody>
24 </table>
25 <br>
27 <h3>Hola, me llamo Mi nombre</h3>
28 </div>
29 <br>
30 <table style="width: 710px; height: 500px; border:0px; text-align: left;
31 margin-left: auto; margin-right: auto;">
32 <tbody>
33 <tr>
34 <td style="text-align: center; vertical-align: middle;" colspan="1"
35 rowspan="2"><img style="width: 350px; height: 318px;"
36 alt="linux" src="linux.jpg"></td>
37 <td style="text-align: center; vertical-align: bottom;">
38 <img style="width: 300px; height: 300px;" alt="windows"
39 src="windows-7.png"></td>
40 </tr>
41 <tr>
42 <td style="text-align: center; vertical-align: bottom;">
43 <img style="width: 350px; height: 186px;" alt="mac-os-x"
44 src="mac-os-x.jpg"></td>
45 </tr>
46 </tbody>
47 </table>
48 <br>
50 <h3>Y lo que más me gusta es el pingüino/leopardo/siete.</h3>
51 </div>
54 </footer>
55 </body>
56 </html>
- 12 -

P6 Grafs HTML - Apoyo - 21 22

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

P6 Grafs HTML - Apoyo - 21 22

Cargado por

Copyright:

Formatos disponibles

################################

L A HERRAMIENTA DE HOJA DE CÁLCULO DE GOOGLE DRIVE incluye la posibilidad de realizar gráficos de

1. Creación de gráficos con Google Drive

Figura 5: Página web del ejemplo 1 visualizada con el navegador Firefox.

Figura 6: Código HTML para la web del ejemplo 1.

Figura 7: Página web del ejemplo 2 visualizada con el navegador Firefox.

Figura 8: Código HTML para la web del ejemplo 2.

incluye una lista numerada – –

Figura 9: Página web del ejemplo 3 visualizada con el navegador Firefox.

Figura 10: Código HTML para la web del ejemplo 3.

• La tabla, marcada con la letra

• Por último, tenemos las imágenes, marcadas con la letra

2.2. Página web WebGrafGoogleDrive.html

Observa atentamente el resultado al abrir el fichero WebGrafGoogleDrive.html con cualquier navegador.

Figura 12: Código HTML para la web del ejemplo 4.

También podría gustarte