Edición de páginas web

Versión 2.0

Índice:

1. Introducción a las páginas web 2

2. Práctica 1. HTML 3
3. Práctica 2. Estilos 6
4. Práctica 3. Javascript 8
5. Práctica 4. Sites 1 10
6. Práctica 5. Sites 2 12

Este texto es la versión offline/imprimible de uno de los capítulos del libro de texto multimedia de la web educativa www.tecno12-18.com.
Todos los derechos reservados. Se permite a los alumnos que han comprado una suscripción a la versión individual del libro que incluya este
capítulo, y a los profesores de estos alumnos, mantener una copia de este archivo PDF y/o imprimirlo, en ambos casos para uso exclusivamente
personal. En todos los demás casos no está permitida la reproducción total o parcial de esta obra, ni su almacenamiento en un sistema
informático, ni la distribución mediante cualquier medio electrónico, mecánico u otros sin el permiso previo y por escrito de los titulares del
copyright.
1. Introducción a las páginas web

1.1. Páginas web

Las páginas web, también llamadas simplemente "webs", son documentos que se utilizan para publicar información
en internet. Están diseñadas para ser visualizadas en un navegador, como Chrome, Firefox, Edge o Safari. Fueron
inventadas por el británico Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN ("Conseil
Européen pour la Recherche Nucléaire", Consejo Europeo para la Investigación Nuclear). La primera página web fue
publicada en 1990. Era bastante rudimentaria para los estándares actuales, pero fue un avance fundamental. Puedes
verla en este enlace: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Las páginas web se empezaron a hacer populares hacia 1995 y actualmente son una herramienta importante en la
vida cotidiana de millones de personas.
Al conjunto de todos las páginas web que hay en el mundo se le llama la "World Wide Web", que podría traducirse
como "la red mundial". De forma coloquial se conoce como "la web".
Cada página web tiene una dirección en la World Wide Web. Esta dirección web es única, no puede haber otra
página con la misma dirección. A la dirección web también se le llama URL (de "Uniform Resource Locator",
Localizador Uniforme de Recursos). La línea azul de arriba es un ejemplo de dirección web o URL .
Un sitio web ("website", en inglés) es una publicación formada por una página web, o un conjunto de páginas web
interrelacionadas, que forma una unidad diferenciada. Ejemplos: un diario online, una página personal, etc.

1.2. ¿Por qué han tenido tanto éxito las páginas web?
El gran éxito de las páginas web se debe a que son una manera muy potente y económica de publicar información.
Solo es necesario diseñar las páginas que queremos dar a conocer y colocarlas en un servidor web, algo que se
puede hacer con pocos medios y a bajo coste. A partir de ese momento, cualquier persona que se conecte al
servidor, desde cualquier lugar del mundo, podrá consultar la información.
Un servidor web no es más que un ordenador, parecido a los que tenemos en casa, que está especializado en
suministrar las páginas web que tiene almacenadas.
Antes de las páginas web transmitir información a un público numeroso era algo muy caro y lento, básicamente se
hacía a través de medios impresos (diarios, revistas, libros, etc.) o mediante radio y televisión. Gracias a las páginas
web, cualquier persona o empresa puede publicar información y darla a conocer a todo el mundo en cuestión de
minutos.

1.3. ¿Cómo es un servidor web?

Los servidores web suelen estar instalados en centros de datos ("datacenter", en inglés). Son locales llenos de
armarios metálicos que contienen en su interior servidores apilados uno encima del otro. Los servidores son
ordenadores diseñados para estar siempre encendidos, deben tener componentes robustos. En función de los
programas que tengan instalados podrán funcionar como servidor web, de correo electrónico, de vídeo, etc. Lo más
frecuente es que sean propiedad de una empresa que los alquila a los usuarios o empresas interesados en tener una
web, es lo que se llama "hosting" de páginas web.

1.4. La base de las páginas web es el código HTML

Las páginas web se escriben utilizando un lenguaje denominado HTML ("HyperText Markup Language" o Lenguaje
de Marcado de Hipertexto). Se dice que es un lenguaje de marcado porque utiliza marcas (también llamadas
etiquetas o "tags") para describir las características del contenido. Por ejemplo, si ponemos: <title>Éste es el
título</title> indicamos al navegador que el texto situado entre dos marcas "title" es el título de la web. Se le llama "de
hipertexto" porque tiene enlaces que, al ser clicados, llevan al usuario a la información que hay en otra web. Debajo
puedes ver el ejemplo de una web muy básica. El texto de la izquierda es su código HTML (lo que nos da el servidor
web). A la derecha puedes ver cómo lo formatea el navegador: interpreta las marcas que hay en el código y,
siguiendo sus indicaciones, "dibuja" la web que muestra al usuario.

Es fácil ver el código HTML de una web. Sólo debes seguir estas instrucciones.
1. Clica con el botón derecho en un lugar sin enlaces ni imágenes.
2. Selecciona “Ver código fuente de la página” en el cuadro que aparece.
3. Se muestra el código fuente. Normalmente es muy complejo.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 2

1.5. Editores HTML
Una página web básica es un archivo que tiene texto en su interior, el código HTML. Para indicar al sistema operativo
y a los navegadores que este archivo es una página web, debe tener la extensión ".html".
Se puede crear una página web escribiendo el código HTML en cualquier editor de texto. En las prácticas 1, 2 y 3
veremos cómo hacer una web utilizando el editor de texto más sencillo que hay: el bloc de notas del sistema
operativo.
Los diseñadores profesionales de páginas web utilizan programas especializados para escribir el código HTML
llamados "editores HTML". Son programas que facilitan la escritura del código HTML, por ejemplo destacando con
colores las etiquetas del código, recordando el nombre de algunas etiquetas, avisando si hay errores, etc.

Existen muchos editores HTML, aquí puedes ver algunos de los más usados: Dreamweaver, Visual Studio Code,
Sublime Text, Brackets y Atom.

1.6. ¿Cómo se coloca una página web en el servidor?

Para colocar en un servidor web una página que hemos hecho en nuestro ordenador y permitir así que pueda verla
todo el mundo, debemos utilizar un programa de FTP (de "File Transfer Protocol", Protocolo de Transferencia de
Archivos). Un programa de FTP conecta nuestro ordenador con el servidor a través de internet y nos permite
transferir archivos entre ambos. En este caso lo utilizamos para "subir" al servidor las páginas web que hemos
creado. Se puede utilizar un programa de FTP especializado, como FileZilla, aunque la mayoría de editores HTML,
como Dreamweaver, tienen incorporado un programa de FTP.

1.7. Aplicaciones para crear páginas web fácilmente

Hemos visto que una página web se crea siguiendo estos dos pasos:
1. Se diseña la página o páginas que componen un sitio web utilizando un editor HTML.
2. Mediante un programa de FTP se colocan las páginas en un servidor para que todo el mundo pueda verlas.

Hay una segunda forma, que es la más usada para crear webs sencillas, que consiste en usar un creador de sitios
web o "website builder", en inglés. Los creadores de sitios web son páginas web especializadas en crear otras
páginas web. Permiten que cualquier persona, sin tener conocimientos avanzados, pueda publicar en la web de
forma rápida y sencilla. Simplemente hay que elegir una plantilla (una página web prediseñada) y poner los textos y
las fotografías. Hay muchas empresas que ofrecen este servicio: Wix.com, Wordpress.com, Weebly.com, etc. En las
prácticas 4 y 5 de este capítulo utilizaremos una de estas herramientas: Google Sites.

2. Práctica 1. HTML

2.1. Objetivos
Una empresa que hace viajes turísticos a la Luna nos ha
encargado que le hagamos su página web. Como vimos
anteriormente, las páginas web se crean utilizando un
lenguaje llamado HTML. En esta miniunidad (práctica 1)
aprenderemos HTML básico, que nos permitirá hacer la
estructura de la web y poner el texto y las imágenes. En la
práctica 2 mejoraremos la apariencia de la web usando
reglas de estilos y en la práctica 3 pondremos un pequeño
programa hecho con un lenguaje de programación
llamado Javascript.

Vamos a crear una página web sencilla

que tendrá esta apariencia.

2.2. Preparativos
1. Crea una carpeta llamada "Moon" en el ordenador o en una memoria externa.
2. Para crear la web usaremos el editor de texto que hay en los sistemas operativos de escritorio. En Windows
es el Bloc de Notas, puedes encontrarlo mediante el Cuadro de Búsqueda de Windows. En Mac es TextEdit
y en Linux puedes usar Gedit.
3. Desde el Bloc de Notas crea un archivo nuevo. Haz clic en Archivo > Guardar como > Selecciona la carpeta
"Moon" > Pon el nombre "practica1a.html" al archivo > Selecciona codificación "UTF-8" > Pulsa Guardar.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 3

2.3. Abrir practica1a.html con el Bloc de notas y el navegador
Para hacer la práctica debes abrir el archivo practica1a.html con dos programas diferentes a la vez: el Bloc de notas
y un navegador. Debes mantener abiertas las dos ventanas. En la ventana del Bloc de notas escribiremos el código y
en la del navegador iremos viendo cómo queda la web.
1. Clica en el archivo con el botón derecho del ratón, selecciona "Abrir con" y después "Bloc de notas".
Se abre el archivo practica1a.html en el Bloc de notas.
2. Clica en el archivo con el botón derecho del ratón, selecciona "Abrir con" y después elige un navegador.
Se abre el archivo practica1a.html en el navegador.

2.4. Etiquetas <html>

El lenguaje HTML está formado por etiquetas. Son expresiones escritas entre los signos "menor que" y "mayor que".
La mayoría de etiquetas van en parejas, una de apertura y otra de cierre, como las etiquetas <html> y </html>.
1. Comienza escribiendo estas dos etiquetas en el archivo que has abierto con el Bloc de Notas. La etiqueta
<html> indica al navegador que lo que va a leer a continuación (el código siempre se lee de arriba hacia
abajo) es un documento HTML.
La etiqueta <!DOCTYPE html> sirve para decirle al navegador en qué versión de HTML se ha escrito el
código, en este caso es HTML5.
2. La etiqueta </html> indica al navegador que se acaba el documento HTML.

2.5. Definir el "head" y el "body"

1. Escribe las etiquetas <head> y </head>. Lo que hay entre estas dos etiquetas es el apartado "head". En el
"head" se pone información que no se muestra directamente en la web. Por ejemplo, lo usaremos para
indicar al navegador qué título debe poner en la pestaña donde se visualiza la web.
2. Después del "head", viene el cuerpo del documento o "body". En el "body" se pone el contenido, todo lo que
el navegador tiene que dibujar en la web: texto, imágenes, enlaces...
3. La etiqueta </body> indica al navegador que se acaba el "body".

2.6. Poner un título para la pestaña del navegador

Aparte del título de la pestaña, no se ve nada más en el navegador porque todavía no hemos puesto ningún
contenido en el "body".
1. Escribe <title>Trip to the Moon</title> en el "head". Las etiquetas <title> y </title> indican al navegador qué
título debe mostrar en la pestaña. En este caso: "Trip to the Moon."
2. Guarda los cambios en el Bloc de notas: Archivo > Guardar.
3. Recarga la página en el navegador.
4. Se muestra el título en la pestaña del navegador.

2.7. Estructurar el "body"

Antes de poner contenido en el "body" (texto, imágenes, enlaces...), es
conveniente darle estructura, es decir, dividirlo en varias partes. Nosotros lo
dividiremos en 3 apartados: "header", "main" y "footer".
1. Escribe dentro del "body" estos tres pares de etiquetas:
<header></header>, <main></main> y <footer></footer>.
2. El navegador creará tres cajas rectangulares invisibles. Aquí están
coloreadas en azul para que se entienda mejor. El "header" es la caja
que contiene el encabezado de la web, el "main" es la caja donde se
coloca la mayoría del contenido y el "footer" la caja del pie de página.

2.8. Poner el título principal en el "header"

Ahora vamos a comenzar a poner contenido en el "body". Primero pondremos el
título principal de la web en el "header", el encabezado o parte superior de la
web.
1. Escribe <h1>Visit the Moon</h1> en el "header". La etiqueta <h1> se
utiliza para escribir el título principal de la página.
2. Guarda los cambios en el Bloc de notas y recarga la página en el
navegador.
3. Se muestra el título principal en la ventana del navegador.

2.9. Poner una imagen en el "header"

Y ahora ponemos una imagen que complementa al título principal:
1. Escribe <img src="https://www.tecno12-18.com/lm/cp/web/header.svg"> debajo del título h1. Es una etiqueta
<img>, que se usa para insertar una imagen. En el atributo "src" se indica al navegador dónde debe buscar la
imagen, en este caso se ha puesto una dirección del servidor de tecno12-18. Si la imagen estuviera en una
carpeta local, se debería poner src="header.svg".
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. El navegador muestra la imagen debajo del título principal.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 4

2.10. Estructurar el "main"
Igual que con el "body", es conveniente estructurar el "main". Ahora pondremos en su interior una caja "section"
(sección), que tendrá dentro dos cajas "div" (de división). Más adelante pondremos otra caja "section". Las cajas
"section" se usan para envolver cada uno de los diferentes apartados de una web. Las cajas "div" son generalistas,
se usan para envolver cualquier tipo de contenido. Envolver los contenidos en este tipo de cajas permite mejorar su
apariencia posteriormente, lo veremos en la siguiente miniunidad.
1. Escribe las etiquetas <section></section> dentro del "main" y, entre ellas, dos pares de etiquetas
<div></div>.
2. El navegador creará una caja invisible "section". Dentro de esta caja dibujará dos cajas invisibles "div". A
continuación pondremos contenido dentro de las cajas "div".

2.11. Poner el contenido de una caja "section"

1. Pon <img src="https://www.tecno12-18.com/lm/cp/web/section1.svg" />, que inserta la imagen de un
astronauta.
2. Y después estas dos más. La primera línea es un título h2 (un título secundario o subtítulo). La segunda es
un párrafo (etiquetas <p></p>).
<h2>A real space trip</h2>
<p>Experience what is like to be an astronaut.</p>
3. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
4. Aparecen en la web la imagen del astronauta, el título h2 y el párrafo.

2.12. Poner un enlace a otra página

1. Para finalizar la sección, escribe esta línea:
<a href="https://www.tecno12-18.com/lm/cp/web/info.html">More information</a>
Es una etiqueta <a>, que sirve para insertar un enlace. El atributo "href" indica la web de destino. Entre las
etiqueta <a> y </a> se pone el texto que debe mostrar el navegador.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. Se muestra el enlace en la web. Si clicas encima irás a una web que hay en el servidor de tecno12-18.

2.13. Poner otra sección

1. Agrega una nueva caja "section" con la misma estructura que la primera. Es más fácil si copias y pegas la
primera sección y después editas el texto y las direcciones web de las imágenes.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. El navegador muestra la nueva caja "section" debajo de la primera.

2.14. Escribir en el "footer"

1. Añade un párrafo (las etiquetas <p> y </p>) en el "footer" con el texto "Design by" seguido de tu nombre.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. Se muestra el párrafo en el navegador.

2.15. Resultado final

Ya hemos acabado la estructura HTML y hemos puesto el contenido: texto y tres imágenes. Tiene un aspecto muy
básico, como el de las primeras páginas web de la década de 1990. En la próxima miniunidad mejoraremos su
apariencia mediante reglas de estilos.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 5

3. Práctica 2. Estilos

3.1. Objetivos
En la práctica anterior vimos cómo crear una página web sencilla. En esta práctica trabajaremos para mejorar su
apariencia poniendo estilos al código HTML. Los estilos son reglas que se aplican a elementos HTML concretos
(títulos, párrafos, imágenes, etc.) y que dicen al navegador cómo debe mostrarlos. Por ejemplo, utilizando una regla
de estilo podemos decirle al navegador que centre un título en la pantalla o que lo muestre de color azul.

3.2. Preparativos
1. Busca la carpeta "Moon" que creaste en la práctica 1. Asegúrate de que contiene el archivo practica1a.html.
2. Haz una copia del archivo practica1a.htm y ponle de nombre practica2a.html.

3.3. Abrir el archivo practica2a.html

Para hacer la práctica debes abrir el archivo practica2a.html con dos programas diferentes a la vez: el Bloc de notas
y un navegador. Debes mantener abiertas las dos ventanas. En la ventana del Bloc de notas escribiremos el código y
en la del navegador iremos viendo cómo queda la web.
1. Clica en el archivo con el botón derecho del ratón, selecciona "Abrir con" y después "Bloc de notas".
Se abre el archivo practica2a.html en el Bloc de notas.
2. Clica en el archivo con el botón derecho del ratón, selecciona "Abrir con" y después elige un navegador.
Se abre el archivo practica2a.html en el navegador.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 6

3.4. Etiquetas <style>
Vamos a mejorar el aspecto de esta web utilizando reglas de estilo.
1. Escribe la etiqueta <style> en el archivo que has abierto con
el Bloc de Notas. La etiqueta <style> indica al navegador
que lo que va a leer a continuación son reglas de estilo.
2. La etiqueta </style> indica el final de las reglas de estilo.

3.5. Cambiar la fuente del "body"

1. Pon la primera regla de estilo debajo de la etiqueta <style>.
Esta regla indica que todo el texto que haya en el "body"
tendrá el tipo de letra Arial. Si el navegador no tuviera esta
fuente instalada, usaría Helvética y, en su defecto, una
tipografía de tipo "sans-serif".
2. Guarda los cambios: Archivo > Guardar.
3. Recarga la página en el navegador.
4. Todo el texto que hay dentro del "body" cambia de
tipografía.

3.6. Dar estilo al "header"

1. Pon la segunda regla de estilo a continuación. Esta regla
afecta sólo al "header" y tiene dos propiedades. La primera
le dice al navegador que muestre el texto del "header"
centrado (también se centrará la imagen). La segunda
propiedad pone el tamaño de la fuente a 30 píxeles.
2. Guarda los cambios en el Bloc de notas y recarga la página
en el navegador.
3. El navegador centra el título y la imagen del "header" y
escribe el título con letras más grandes.

3.7. Ampliar la imagen del "header"

1. La tercera regla de estilo comienza por dos palabras:
"header img". Se utiliza para indicar que esta regla afecta
solamente a las imágenes ("img") que hay dentro del
"header". Tiene la propiedad "width" (anchura) con el valor
100%, que indica al navegador que muestre las imágenes
ocupando toda la anchura disponible.
2. Guarda los cambios en el Bloc de notas y recarga la página
en el navegador.
3. El navegador amplia la imagen del "header" ocupando toda
la anchura disponible.

3.8. Dar estilo a las cajas "section"

1. Esta regla afecta a las cajas "section". La primera propiedad
pone un borde alrededor. Será un borde de color gris, con 1 píxel de grosor y de tipo sólido (una línea
continua). La segunda propiedad aumenta el tamaño de la fuente a 20 píxeles.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. Se muestra un borde de color gris alrededor de cada sección.
4. El texto se muestra más grande.

3.9. Poner el texto al lado de la imagen

1. La propiedad "display", con valor "flex", hace que el contenido de las secciones se distribuya
horizontalmente, en lugar de apilarse. Con la propiedad "width" se indica la anchura del contenido de las
secciones.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. Los textos de las secciones aparecen al lado de las imágenes, no debajo, como antes. Las secciones
ocupan el 90% de la anchura disponible.
Nota: "display: flex" sólo funciona en navegadores actuales.

3.10. Aumentar el margen

1. Ponemos 50 píxeles de margen encima y debajo de las secciones. El valor "auto" ordena al navegador que
calcule automáticamente los márgenes derecho e izquierdo para que las secciones estén centradas
horizontalmente.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. El navegador dibuja las cajas "section" centradas y con un margen de 50 px encima y debajo.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 7

3.11. Aumentar el relleno
1. El contenido (imagen y texto) está muy cerca del borde. Para separarlo se utiliza la propiedad "padding"
(relleno). El borde se desplazará 20 píxeles hacia el exterior en los 4 lados.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. El navegador añade relleno a las cajas "section".

3.12. Dar estilo al "footer"

1. Finalmente damos estilo al "footer" (el pie de página). Centramos el texto y le ponemos un tamaño de 20
píxeles. La última línea ("background-color: gray") hace que el fondo sea de color gris.
2. Guarda los cambios en el Bloc de notas y recarga la página en el navegador.
3. El navegador muestra el "footer" de color gris, el texto centrado y con un tamaño de 20 píxeles.

3.13. Resultado final

Ya hemos acabado de poner las reglas de estilo. Ahora la web tiene mucho mejor aspecto. En la próxima miniunidad
le pondremos un pequeño programa hecho con un lenguaje de programación llamado Javascript.

4. Práctica 3. Javascript

4.1. Objetivos
En esta miniunidad utilizaremos Javascript para crear un temporizador, mostrará los segundos transcurridos desde
que se abre la web que hemos diseñado.
Javascript es un lenguaje de programación que se ejecuta en el navegador de los usuarios. Casi todas las webs
tienen Javascript. Se usa para hacer que sean dinámicas: animar imágenes, actualizar los datos que se muestran,
gestionar formularios, etc. Es uno de los lenguajes de programación más usados actualmente.

4.2. Poner el título que mostrará los segundos

Haz una copia del archivo "practica2a.html" (lo encontrarás en la carpeta "Moon") y guárdala con el nombre
"practica3a.html". A continuación abre "practica3a.html" con el Bloc de Notas e inserta estas dos líneas de código de
color rojo entre las etiquetas <header> y </header>, debajo del título h1. No modifiques el resto del código. La
primera línea es un párrafo (<p></p>), la segunda es un título secundario (<h2></h2>). Guarda el archivo y ábrelo
con un navegador.
<p>Seconds since landing on this website:</p>
<h2>0</h2>

4.3. Identificar con un atributo "id" el título que mostrará los segundos
En el interior del título h2 que acabamos de poner en el código HTML hay un 0: <h2>0</h2>
Veremos cómo usar Javascript para decirle al navegador que vaya cambiando el 0 por 1, 2, 3... conforme pase el
tiempo. Pero antes debemos identificar el título h2 donde está el 0. Se hace poniéndole un atributo de tipo "id" y un
nombre. Pon en tu archivo id = "counter" (contador). Los atributos "id" son identificadores únicos, no se puede poner
dos "id" con el mismo nombre.

Poniendo id= "counter" le decimos al navegador que este título h2 se llama "counter".

4.4. Poner etiquetas <script> para empezar a programar

Ahora comenzaremos a escribir el código Javascript que hará que el contador se vaya actualizando
automáticamente. Lo primero es añadir las etiquetas de apertura y cierre <script> y </script>. Éstas etiquetas indican
al navegador que lo que hay entre ellas es código que debe ejecutar. Pon estas etiquetas debajo de los estilos,
después de la etiqueta </style>. Deben estar entre las etiquetas <head> y </head>.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 8

4.5. Declarar una variable Javascript
En la primera línea del código Javascript debes declarar la variable "seconds". Una variable es un contenedor en el
que se almacenan datos. En Javascript se declaran escribiendo "var", el nombre de la variable y un signo "=" seguido
del valor inicial de la variable. La línea se cierra con un punto y coma. En nuestro programa la variable "seconds"
servirá para contar los segundos que pasan desde que un visitante abre la web. Debe tener el valor inicial "0".

4.6. Declarar una función Javascript

Otro elemento fundamental en programación son las funciones. Una función es un conjunto de instrucciones que
realizan una tarea concreta. En tu archivo debes declarar la función "timer", que contendrá las instrucciones
necesarias para contar los segundos transcurridos desde la apertura de la página. Cada vez que se llame a la
función "timer", se ejecutarán las instrucciones que hay dentro de ella. En Javascript las funciones se declaran
escribiendo "function" seguido del nombre de la función, doble paréntesis y doble llave.

4.7. Sumar 1 a la variable que cuenta los segundos

La primera instrucción que tendrá la función "timer" es sumar 1 a la variable "seconds". Cada vez que se llame a la
función "timer", la variable "seconds" aumentará en 1 segundo. Debes escribir las instrucciones entre la llave de
apertura "{" y la llave de cierre "}". Al final de cada instrucción es necesario poner un punto y coma. El doble
paréntesis que hay después del nombre de la función sirve para leer variables de fuera de la función, no lo usaremos
aquí.

4.8. Poner el valor de la variable "seconds" en el título "counter"

La última instrucción de la función "timer" es escribir el valor de la variable "seconds" en el título "counter". El código
comienza con "document.getElementById("counter")", que dice al navegador que seleccione en el documento (la
página web) el elemento que tiene por "id" el nombre "counter". Y acaba con ".innerHTML=seconds", que dice al
navegador que escriba el valor de la variable "seconds" (los segundos transcurridos) en el interior ("innerHTML") del
elemento seleccionado.

4.9. Llamar a la función "timer" con el método "setInterval"

Y ahora sólo falta hacer que la función "timer" se ejecute cada segundo. Utilizaremos "setInterval()", un método que
llama a una función (la que le indiquemos) cada cierto tiempo (el que le digamos). El método "setInterval" llama a la
función "timer" cada 1000 milisegundos (1 segundo).
Guarda tu archivo y ábrelo con un navegador. Si has seguido los pasos correctamente, el contador mostrará los
segundos que van transcurriendo desde que se abrió la web. Cada vez que recargues la página, volverá a comenzar.
Si no funciona correctamente, repasa el código y vuelve a probar.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 9

5. Práctica 4. Sites 1

5.1. Objetivos
En las miniunidades anteriores vimos que las páginas
web se construyen usando un lenguaje llamado HTML.
Escribir HTML a mano es muy laborioso y requiere
muchas horas de aprendizaje. Existen aplicaciones que
permiten crear webs de forma sencilla sin tener
conocimientos técnicos. Una de estas aplicaciones es
Google Sites, que usaremos en esta práctica para crear
la web de la derecha. Se trata de una web básica
compuesta por un texto breve (un sólo párrafo), un
enlace, una imagen y un vídeo. Iremos viendo cómo
crearla, tu trabajo será ir repitiendo todos los pasos.

5.2. Entrar en Google Sites

Para utilizar Sites debes tener una cuenta de Google. Es
posible que necesites la autorización de tus padres o
tutores legales, consúltalo con tus profesores.
1. Ve a sites.google.com. Los navegadores
recomendados para usar Sites son Chrome,
Firefox y Safari.
2. Introduce tus claves de acceso.

5.3. Crear un sitio

Ya estás dentro de tu cuenta de Sites. Está vacía porque
todavía no has creado ningún sitio web. Cuando hayas creado sitios, aparecerán aquí y podrás abrirlos para
editarlos.
Haz clic en el botón “+” para crear un sitio nuevo.
Nota: Esta práctica está pensada para la nueva versión de Sites. No cliques en ningún enlace que vaya a la versión
clásica.

5.4. Página principal del sitio

Una vez creado el sitio, aparece una página web en blanco: la página principal. A continuación veremos cómo
insertar en ella texto, enlaces, imágenes y vídeos. Un sitio web puede estar formado exclusivamente por una página
principal, como el que haremos nosotros, o, si es más complejo, por una página principal y otras páginas secundarias
a las que se accede desde enlaces.

5.5. Poner el nombre del sitio y el título de la página principal

1. Clica y escribe este nombre para el sitio: Tesla.
2. Clica y escribe este título para la página principal: Nikola Tesla (1856-1943)
Cuando un elemento está seleccionado, se muestra una línea azul alrededor y aparece una barra de edición que nos
permite modificar el contenido.

5.6. Insertar un cuadro de texto

1. Selecciona "Text box" (cuadro de texto) en el menú de la derecha.
2. Clica en el cuadro de texto que aparece y escribe este párrafo:
Nacido en Similjan, en la actual Croacia, el ingeniero Nikola Tesla ha sido uno de los inventores más importantes de
la historia. Se le considera el creador de la corriente alterna, la que utilizamos actualmente en nuestras casas, y uno
de los fundadores de la industria eléctrica. Otros de sus numerosos inventos son: el alternador, el motor eléctrico de
inducción, las bujías y el control remoto.

5.7. Insertar un enlace

1. Selecciona "Text box" (cuadro de texto).
2. Aparece una nueva caja de texto. Asegúrate de que está seleccionada.
3. Selecciona "Insertar enlace".
4. Escribe “Nikola Tesla en Wikipedia”. Es el texto que se mostrará en el enlace.
5. Escribe https://es.wikipedia.org/wiki/Nikola_Tesla. Es la página de Wikipedia que habla sobre Nikola Tesla.
6. Finalmente haz clic en "Apply" (aplicar).
Aparece en la página el enlace a la dirección web que hemos indicado. Cuando hayas publicado el sitio y un usuario
haga clic en el enlace, el navegador irá a la página de Wikipedia sobre Nikola Tesla.

5.8. Insertar una imagen

1. Clica en “Images”.
2. Clica en "Select". Seleccionaremos una imagen que hay en internet.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 10

 La opción "Upload" (subir al servidor) se usa si queremos poner una imagen guardada en nuestro ordenador.
3. Debe estar seleccionado "By URL". Las siglas URL corresponden a "Uniform Resource Locator" o
Localizador Uniforme de Recursos. Es la dirección web de un recurso: una foto, una página web, etc. Nos
indica en qué parte de internet se puede encontrar.
4. Escribe esta URL: https://upload.wikimedia.org/wikipedia/commons/5/56/Tesla3.jpg. Es la dirección web de
una foto que hemos visto en Wikipedia. Es una imagen de dominio público, la podemos usar sin pedir
permiso.
5. Y clica en “Select”.

En la barra de edición hay herramientas para recortar la foto, eliminarla, escribir un pie de imagen, etc.
Puedes modificar el tamaño de la imagen estirando de los círculos. Y desplazarla a cualquier punto de la página.

5.9. Insertar un vídeo de Youtube

1. Asegúrate de que “Insert” está seleccionado.
2. Selecciona “Youtube”.
3. Escribe este texto: “ece410 induction motor”. Es el título de un vídeo que hay en Youtube y pulsa en buscar.
4. Selecciona el primer vídeo de la lista.

Desde la barra de edición se puede eliminar el vídeo, esconder los controles, cambiar el color de la barra de
progreso, etc.
Puedes modificar el tamaño del vídeo estirando de los círculos. Y desplazarlo a cualquier punto de la página.

5.10. Previsualizar el sitio web

Google Sites crea webs que se adaptan al tamaño de la pantalla. Técnicamente se llaman webs "responsive".
Utilizando la herramienta Previsualizar podemos ver cómo se verá nuestra web en un smartphone, un tablet o en una
pantalla grande antes de ser publicada en internet.

5.11. Publicar el sitio web

Para que el sitio web se pueda ver desde internet es necesario publicarlo, que consiste en asociar la página principal
del sitio a una dirección web. Es conveniente que apuntes la URL de tu sitio para poder acceder más adelante.
1. Clica en "Publish" (publicar).
2. Introduce una dirección web para tu sitio. Debes poner "tesla", seguido de la fecha de publicación en formato
AAMMDD (año, mes y día) y tres letras al azar.
3. Esta será la dirección web completa (o URL) para acceder a tu web:
https://sites.google.com/view/teslaAAMMDDabc. Si ya está en uso, aparecerá un mensaje de error y deberás
probar otra combinación de tres letras.

5.12. Resultado final

Ya hemos publicado nuestro primer sitio web en Sites. Conociendo su URL podemos acceder desde cualquier
navegador. También podemos acceder desde nuestra cuenta de Sites sin tener que recordar la URL. Sigue estas
instrucciones.
1. Pulsa en la flecha blanca al lado de “Publish”.
2. Clica en “View published site” para ver el sitio que has publicado.
3. El sitio se carga en una pestaña nueva.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 11

6. Práctica 5. Sites 2

6.1. Objetivos
En esta miniunidad crearemos un
nuevo sitio en Google Sites usando
los diseños ("layouts", en inglés) que
podemos encontrar en la interfaz de la
aplicación. Los diseños de Sites son
plantillas que facilitan la tarea de
maquetar el contenido (de distribuirlo
en la pantalla). Tienen espacios
vacíos donde podemos colocar los
textos y las imágenes. Sólo tenemos
que escribir o insertar imágenes en
estos espacios para obtener
rápidamente una página web que
tiene un aspecto agradable.
Utilizando dos de los diseños que nos
ofrece Sites crearemos la web de la
derecha. Iremos viendo cómo se
hace, tu trabajo será ir repitiendo
todos los pasos.

6.2. Entrar en Google Sites

Para comenzar debes entrar a Sites
con la cuenta de Google que usaste
en la práctica anterior.

6.3. Crear un sitio

Ya estás dentro de tu cuenta de Sites.
En la página inicial aparecen todos los
sitios que has creado, como el que
hicimos sobre Nikola Tesla.
Haz clic en el botón “+” para crear un sitio nuevo.

6.4. Poner el nombre del sitio y el título de la página principal

Aparece la página principal del nuevo sitio. Está en blanco, debemos editarla para poner nuestro contenido. Primero
cambiaremos el título.
1. Clica y escribe este nombre para el sitio: “Hamilton”.
2. Clica y escribe este título para la página principal: “Margaret Hamilton (Paoli, Estados Unidos, 1936)”

6.5. Primer diseño

Ahora insertamos el primer diseño debajo del título.
1. Asegúrate de que “Insert” está seleccionado.
2. Clica en el diseño con espacios para añadir una imagen, un título y un texto.
3. Aparece el diseño que hemos seleccionado.

6.5. Primer diseño. Rellenar el texto

1. Haz clic en la caja del título y escribe esto: “Resumen de su biografía”.
2. Después copia este texto en la caja de debajo:
La ingeniera norteamericana Margaret Hamilton diseñó el software que permitió al módulo lunar del Apolo XI posarse
en la Luna en el año 1969.
En 1986 creó Hamilton Technologies, una empresa orientada a la prevención de errores de software.
El presidente Barack Obama le concedió la Medalla Presidencial de la Libertad en 2016, el galardón más importante
que puede recibir un civil en Estados Unidos.

6.5. Primer diseño. Insertar una foto

1. Haz clic en el símbolo "+".
2. Clica en "Select Image". Seleccionaremos una imagen que hay en internet. También se puede usar una foto
que tengamos en nuestro ordenador, un vídeo de Youtube, un calendario o un mapa.
3. Asegúrate de que “By URL” está seleccionado.
4. Escribe esta URL. Es la dirección web de una foto que hemos visto en Wikipedia. Es una imagen de dominio
público, la podemos usar sin pedir permiso.
https://upload.wikimedia.org/wikipedia/commons/a/aa/Margaret_Hamilton_in_action.jpg

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 12

6.6. Segundo diseño
1. Clica en el diseño que permite añadir dos imágenes con texto.

6.6. Segundo diseño. Rellenar los textos

Escribe estos textos en los espacios predeterminados:
El código de navegación del Apolo
Fotografía de Margaret Hamilton junto al código de navegación del Apolo. En papel ocupaba miles de páginas y
numerosos volúmenes.
Ingeniera de software
Hamilton fue directora de la división de ingeniería de software del Laboratorio Charles Stark Draper, en el Instituto de
Tecnología de Massachusetts (MIT).

6.6. Segundo diseño. Insertar dos fotos

1. Clica e inserta en esta caja la fotografía que hay en la siguiente URL:
https://upload.wikimedia.org/wikipedia/commons/d/db/Margaret_Hamilton_-_restoration.jpg
2. Y en esta caja la fotografía que hay en:
https://upload.wikimedia.org/wikipedia/commons/6/63/Margaret_Hamilton_1989.jpg
3. Las dos fotos se muestran recortadas. Estira de los círculos centrales hacia abajo hasta que las imágenes se
vean completas.

6.7. Publicar el sitio web

Ya hemos acabado nuestro sitio. Sólo falta publicarlo en internet para que otras personas puedan verlo.
1. Clica en "Publish" (publicar).
2. Introduce una dirección web para tu sitio. Debes poner "hamilton", seguido de la fecha de publicación en
formato AAMMDD (año, mes y día) y tres letras al azar.
3. Esta será la dirección web completa (o URL) para acceder a tu web:
https://sites.google.com/view/hamiltonAAMMDDabc. Si ya está en uso, aparecerá un mensaje de error y
deberás probar otra combinación de tres letras.

6.8. Resultado final

Ya hemos publicado nuestro sitio web en Sites. Conociendo su URL podemos acceder desde cualquier navegador.
También podemos acceder desde nuestra cuenta de Sites sin tener que recordar la URL.

www.tecno12-18.com © 2019 Saganet Multimedia S.L. Todos los derechos reservados. 13