MIGUELTECNOLOGÍA

I.E.S. JOSÉ SARAMAGO (Humilladero)

 2: Edición de páginas web con HTML

1. INTRODUCCIÓN

El lenguaje HTML es un lenguaje de hipertexto, es decir, texto en documentos que permiten enlazar directamente con otros documentos. Fue creado en 1980 para poder transmitir documentos por Internet con las velocidades tan limitadas de la época, ya que el emisor lo que se transmite son una serie de instrucciones para construir el documento en el ordenador del receptor.

HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web, ya que es el primero que se utilizó y es la base de los lenguajes de edición actuales. No se trata de  un lenguaje de programación propiamente dicho, aunque a veces se le denomina así coloquialmente. 

1.1. EDITORES DE TEXTO PARA HTML

Para empezar a crear páginas web solo necesitaremos un editor de texto básico y un navegador web.

Como editor de texto nos servirá el Bloc de Notas de Windows (Notepad) o algún editor de texto básico de Linux.

Existen editores de texto orientados a la programación que ofrecen ventajas a la hora de editar un documento HTML, como Notepadd++ para Windows o Notepadqq para Linux:

En EducaAdOS 20.04 disponemos del Editor de textos, aunque también podemos instalar Notepadqq desde el Centro de Software de EducaAndOS.

También existen editores HTML online, como veremos más adelante.

Editor Notepad++

Editor Notepadqq

1.2. NAVEGADORES WEB

Todos los navegadores web actuales soportan el lenguaje HTML (Además de otros), así que son capaces de mostrar las páginas web creadas con HTML con el mismo aspecto, independientemente del sistema operativo utilizado.

En el siguiente esquema vemos los navegadores más utilizados.

2. PRIMEROS PASOS EN EDICIÓN HTML

El lenguaje HTML está compuesto por una serie de etiquetas (Tags) que el navegador interpreta y da forma en la pantalla (Etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.).

Las etiquetas se escriben empleando los caracteres menor que "<", mayor que ">" y barra inclinada "/".

Las palabras clave del lenguaje se denominan elementos y se colocan entre los caracteres vistos anteriormente, según se trate de una etiqueta de inicio de una etiqueta de fin.

Los elementos pueden escribirse indistintamente en minúscula, mayúscula o ambas.

Por ejemplo, para el elemento ("html") existen las etiquetas de inicio (<html>) y fin (</html>)

Veamos los principales elementos de todo documento HTML:


Representan al elemento raíz ("html") que en todo documento HTML hay que escribir al principio y al final.

<html>

</html>


Dentro del elemento "html", es decir, entre <html> y </html>, se debe escribir el elemento "head" que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre el documento:

<html>

   <head>

   </head>

</html>

Las etiquetas se suelen identar o colocar en distintos niveles de tabulación para hacer el código más legible.


Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento "title", el cual sirve para indicar el título del documento.

<html>

   <head>

     <title>Ejemplo</title>

   </head>

</html>

Es el titulo que se visualiza en la parte superior de la pestaña donde se muestra la página web en el navegador.

Las etiquetas pueden colocarse en la misma línea, como en el código anterior, aunque se suelen colocar arriba y abajo para la mejor compresión del código.


En un documento HTML, después del "head", hay que escribir el elemento "body":

<html>

  <head>

    <title>Ejemplo</title>

  </head>

   <body>

  </body>

</html>

El elemento "body" alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador.


En este caso, entre <body> y </body> se incluyen dos elementos "p" delimitados por la etiqueta de inicio <p> y la de cierre </p>:

<html>

  <head>

    <title>Ejemplo</title>

   </head>

   <body>

     <p>Mi primera página web</p>

   </body>

</html>

En este apartado se pueden añadir tantos párrafos como necesitemos.

<html>

   <head>

     <title>Ejemplo de 2 párrafos</title>

   </head>

   <body>

     <p>Esto es un párrafo.</p>

     <p>Esto es otro párrafo.</p>

   </body>

</html>


Mediante <font> ... </font> podemos escribir un párrafo, seleccionando el tipo de fuente, el tamaño de la letra y el color, como veremos más adelante.

Actividades (1)

Instala el editor de texto Notepadqq.

Abre el editor de texto Notepad qq  y copia el código visto justo anteriormente y guárdala como Ejemplo.html, después, busca en ordenador la página creada y ábrela con el navegador.

2.1. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos. Gráficamente, los elementos utilizados se pueden representar del siguiente modo:

Finalmente, completaremos el código de este primer ejemplo añadiendo algunas cosas:

<!DOCTYPE html>

<html lang="es-ES">

<head>

  <meta charset="utf-8">

  <title>Ejemplo de 2 párrafos</title>

  </head>

  <body>

  <p>Esto es un párrafo.</p>

  <p>Esto es otro párrafo.</p>

  </body>

</html>


A continuación pasamos a explicarlas:

Ejercicio: En el siguiente editor de HTML, borra el mensaje de bienvenida y pega el último código visto, puedes ver el resultado inmediatamente en la ventana de abajo.

Prueba a crear más párrafos.

En todos los lenguajes de programación existe la posibilidad de incluir comentarios dentro del código, los comentarios son muy útiles para los programadores, para comprender un programa que no han hecho ellos o para explicar ciertas partes del código un documento . 

En HTML, los comentarios pueden escribirse entre los caracteres "<!--" y "-->". 

Por ejemplo: <!-- Esto es un comentario escrito en un documento HTML -->

El intérprete de código ignora todas los comentarios.


2.2. FORMATO DE TEXTO

Para hacer más llamativa nuestra página, existen etiquetas HTML que modifican los tamaños, colores y disposición del texto:

Para los títulos dentro de la página y existen 6 tamaños; el tamaño del texto <h1>...</h1> es el tipo de texto más grande y <h6>...</h6> el más pequeño:

<!DOCTYPE html>

<html lang="es-ES">

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo de tipos de título</title>

</head>

<body>

<!-- El tamaño h1 es el mayor y el tamaño h6 es el menor-->

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

</body>

</html>

En el ejemplo anterior se ha incluido un comentario para recordar el tamaño de los títulos.

Ejercicio: Prueba el código anterior en el editor de HTML

Ejercicio: Intenta hacer en el editor de HTML un documento HTML como el siguiente:

Las siguientes etiquetas modifican los caracteres que hay entre ellas para mostrarlos en negrita, cursiva, subrayado, subíndice o superíndice:

<b>...</b> Negrita

<i>...</i> Cursiva

<u>...</u> Subrayado

<sub>...</sub> Subíndice

<sup>...</sup>   Superíndice

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver todos los tipos de caracteres:

<!DOCTYPE html> 

<html lang="es-ES">

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo de formato de caracteres</title>

</head>

<body>

<h1>Tipos de caracteres</h1>

<p> Este es un ejemplo de palabra en <b> negrita </b> </p>

<p> Este es un ejemplo de palabra en <i> cursiva </i> </p>

<p> Este es un ejemplo de palabra  <u> subrayada </u> </p>

<p> Este es un ejemplo de palabra en <sub> subíndice </sub> </p>

<p> Este es un ejemplo de palabra en <sup> superíndice </sup> </p>

</body>

</html>


A los elementos <p> y <h> que nos permiten escribir párrafos y títulos respectivamente, se les pueden aplicar unos atributos para modificar el aspecto del texto:

<p align="right"> ... </p> alinea el texto a la derecha

<p align="center"> ... </p> centra el texto

<p align="left"> ... </p> alinea el texto a la izquierda

Estos códigos son aplicables al elemento <h>, como hemos dicho anteriormente.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver cómo se alinean los títulos y párrafos:

<!doctype html>

<html lang="es">

<html>

<head>

     <meta charset="utf-8" />

     <title>Ejemplo de alineación de texto</title>

</head>

<body> 

<h1 align="center">Introducción</h1>  

<p align="right">Este es un párrafo alineado a la derecha</p>

<p align="center">Este es un párrafo centrado</p>

<p align="left">Este es un párrafo alineado a la derecha</p>

</body>

</html>


Tipo de fuente, tamaño y color de los caracteres:

Mediante el elemento <font> ... </font>, se pueden especificar el tipo de fuente, el tamaño y el color de los caracteres:

Como tipo de fuente, podemos elegir "arial",  "courier",  "comic sans ms", "times new roman" , etc. (Son las fuentes instaladas en el ordenador).

Como colores, podemos seleccionar los indicados en el siguiente ejemplo:

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver los distintos colores que puedes aplicar a los caracteres de tu página:

<!DOCTYPE html> 

<html lang="es">

<html>

<head>

     <meta charset="utf-8" />

     <title>Ejemplo de colores de los caracteres</title>

</head>

<body> 

<b>

<font color="red">Texto ROJO </font> <br>

<font color="blue">Texto AZUL </font> <br>

<font color="navy">Texto AZUL MARINO </font> <br>

<font color="green">Texto VERDE </font> <br>

<font color="olive">Texto OLIVA </font> <br>

<font color="yellow">Texto AMARILLO </font> <br>

<font color="lime">Texto LIMA </font> <br>

<font color="magenta">Texto MAGENTA </font> <br>

<font color="purple">Texto PURPURA </font> <br>

<font color="cyan">Texto CYAN </font> <br>

<font color="brown">Texto MARRON </font> <br>

<font color="black">Texto NEGRO </font> <br>

<font color="gray">Texto GRIS </font> <br>

<font color="teal">Texto TEAL </font> <br>

<font color="white">Texto BLANCO </font> <br>

</b>

</body>

</html>


Observa que se ha utilizado el elemento <br> para incluir un salto de línea después de cada tipo de color.

Los atributos de fuente (face), tamaño (size) y color (color)  pueden aplicarse a un solo elemento <font> ... </font>, como puedes ver en el siguiente ejemplo:

<html lang="es">

<html>

<head>

     <meta charset="utf-8" />

     <title>Ejemplo de colores de los caracteres</title>

</head>

<body> 

<font face="arial" size="25" color="red">Este texto posee varias especificaciones de formato.</font>

</body>

</html>

Actividades (2)

Escribe el código para generar una página web como la siguiente, de título "Mi primera pagina web", respetando colores, tamaños  y tipos de letra, etc.

Utiliza el visualizador de códigos que hay más abajo.

Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto.

Los documentos HTML permiten dos tipos de listas:

Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo:

En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).

En las listas de definición (<DL>...</DL>), se utilizan dos: cada elemento que se define se marca con <DT>...</DT> y el texto de cada definición se marca con <DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definición.

Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver las distintas opciones de listas:

<!DOCTYPE html> 

<html lang="es">

<html>

<head>

<meta charset="utf-8" />

<title>Ejemplo de listas</title>

</head>

<body>

<h3>Los meses de primavera</h3>

<ul>

<li>Abril</li>

<li>Mayo</li>

<li>Junio</li>

</ul>

<br>

<H3>Los meses de verano</H3>

<ol>

<li>Julio</li>

<li>Agosto</li>

<li>Septiembre</li>

</ol>

<br>

<h3>Los meses del año</h3>

<ul>

<li>Los meses de primavera

<ol>

<li>Abril</li>

<li>Mayo</li>

<li>Junio</li>

</ol>

</li>

<li>Los meses de verano

<ol>

<li>Julio</li>

<li>Agosto</li>

<li>Septiembre</li>

</ol>

</li>

</ul>

</body>

</html>

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Este separador lo escribimos con la etiqueta <hr>. Al contrario que muchas etiquetas HTML, ésta no necesita ser cerrada como veremos a continuación. 

Podemos especificar el color y grosor de la línea como atributos, dentro de la etiqueta <hr>.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver distintos tipos de líneas:

<!DOCTYPE html>

<html lang="es">

<html>

<head>

<title>Ejemplo del uso de líneas separadoras</title>

</head>

<body>

<p>Esto es una línea negra de 8 pixels</p>

<hr size="8px" color="black" />

<p>Esto es una línea negra de 2 pixels</p>

<hr size="2px" color="black" />

<p>Esto es una línea roja de 3 pixels</p>

<hr size="3px" color="red" />

<p>Esto es una línea azul de 5 pixels</p>

<hr size="5px" color="blue" />

</body>

</html>

Actividades (3)

Escribe el código para generar una página web como la siguiente de título "Internet", respetando colores, tamaños  y tipos de letra, etc.

Utiliza el visualizador de códigos que hay más abajo.

En un documento HTML los enlaces se pueden definir utilizando el elemento "a", como puede verse en el siguiente ejemplo:

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver un ejemplo de enlace a la página de Instagram:

<!DOCTYPE html>

<html lang="es-ES">

<head>

<meta charset="utf-8">

<title>Ejemplo de un enlace sencillo</title>

</head>

<body>

   <p><a href="https://www.instagram.com">Instagram</a> es una red social y una aplicación móvil</p>

</body>

</html>

También podemos poner entre comillas el nombre de otra página HTML que se encuentre en el mismo directorio que la página principal, para dirigirnos a ella.


Para visualizar una imagen en un documento HTML se puede utilizar el elemento "img". El atributo "src" contiene el nombre del archivo de imagen con su ruta y el atributo "width"  indica el tamaño de dicha imagen.

Ejercicio: prueba el siguiente código en el editor de HTML para poder comprobar cómo se insertan imágenes en las páginas web:

<!DOCTYPE html>

<html lang="es-ES">

<head>

<meta charset="utf-8">

<title>Ejemplo de una imagen</title>

</head>

<body>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/800px-Poligraf_Poligrafovich.JPG" width="230">

</body>

</html>


En HTML se pueden representar datos en tablas mediante la etiqueta <table>. Dentro de dicha etiqueta, se utilizan las etiquetas <th> para los elementos de la cabecera de la tabla, <tr> al comenzar cada fila y <th> para definir cada elemento dentro de cada fila.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver cómo se utilizan las etiquetas vistas:

<!DOCTYPE html>

<html lang="es-ES">

  <head>

<meta charset="utf-8">

<title>Ejemplo de tabla básica</title>

</head>

  <body>

<table>

  <tr>

<th>uno</th>

<th>dos</th>

<th>tres</th>

</tr>

<tr>

<td>cuatro</td>

<td>cinco</td>

<td>seis</td>

</tr>

<tr>

<td>siete</td>

<td>ocho</td>

<td>nueve</td>

</tr>

<tr>

<td>diez</td>

<td>once</td>

<td>doce</td>

</tr>

</table>

</body>

</html>


Podemos especificar el color de la tabla y el grosor de las líneas como atributos, dentro de la etiqueta <table>, como en el siguiente ejemplo:

<table border="1" bgcolor="cyan">

Para alinear toda la página al centro y utilizar un color de fondo, podemos indicarlo mediante atributos en la etiqueta <body>, como en el siguiente ejemplo:

<body align="center" bgcolor="cyan">

Actividades (4)

Escribe el código para generar una página web como la siguiente de título "Países", respetando colores, tamaños  y tipos de letra, etc.

Utiliza el visualizador de códigos que hay más abajo.

3. HOJAS DE ESTILOS CSS

Con todo lo vista hasta ahora, podemos controlar el tipo de letra, color y posición de los títulos y textos de un documento editado en HTML. Si realizamos un documento extenso, con varios tipos de letra, colores, etc. el código se complica ya que hay que utilizar muchos elementos de formato de texto.

A partir de la versión 5 de HTML se han incluido las hojas de estilos CSS, que simplifican enormemente el formato de texto dentro de un documento HTML, ya que separa el contenido de la página del diseño de la misma.

Una hoja de estilos es un archivo con extensión .CSS que contiene los formatos de texto prediseñados de algunas etiquetas.

El archivo .CSS debe ir junto al archivo .HTML, aunque también puede incluirse el contenido del archivo .CSS dentro del archivo .HTML.

Las hojas de estilo están formadas por reglas, y las reglas están formadas por el selector y entre llaves las declaraciones separadas por punto y coma. 

Una declaración es un atributo (propiedad) seguido por dos puntos y a continuación el valor de la propiedad. 

👉

Ejemplo: El siguiente código en HTML contiene una definición de estilo para los párrafos. En dicha página, todos los párrafos serán de color rojo y centrados (A menos que se indique expresamente en un párrafo.

<!DOCTYPE html>

<html lang="es-ES">

   <head>

     <meta charset="utf-8">

     <title>Ejemplo de párrafo rojo y centrado</title>

     <style>

       p { color:red;

         text-align:center;

       }

     </style>

   </head>

   <body>

     <p>Esto es un párrafo de color rojo y centrado.</p>

   </body>

</html>

También podríamos incluir la siguiente línea en nuestro código HTML, que nos enlaza con un archivo llamado "estilos.css"

Archivo: ejemplo.html

<!DOCTYPE html>

<html lang="es-ES">

   <head>

     <meta charset="utf-8">

     <title>Ejemplo de párrafo rojo y centrado</title>

     <link rel="StyleSheet" href="estilos.css" type="text/css">

   </head>

   <body>

     <p>Esto es un párrafo de color rojo y centrado.</p>

   </body>

</html>

El archivo "estilos.css" contiene la definición de los estilos


Archivo: estilos.css

p { color:red;

        text-align:center;

     }

Actividades (5)

Contesta el siguiente formulario intentando utilizar tus propias palabras. No vale cortar y pegar ya que esto influirá en la nota.

4. PUBLICAR LAS PÁGINAS HTML

Una vez que tenemos nuestras páginas web en formato HTML con sus correspondientes hojas de estilos CSS, nos queda publicarlas en Internet para que todo el mundo pueda verlas desde su dispositivo, para ello habrá que copiarlas (Alojarlas) en un servidor de Internet y elegir un nombre de dominio.

Obtener alojamiento y un nombre de dominio

Si deseas un control total sobre tu sitio web publicado, probablemente necesitarás gastar dinero para comprar:

Existen alojamientos gratuitos, pero suelen ser muy limitados o incluir publicidad.

Existen dominios gratuitos, pero suelen ser largos y difíciles de recordar.

Existen algunos alojamientos gratuitos sin publicidad, como GitHub o Dropbox.

En el siguiente vídeo de Youtube ser muestra cómo conseguir un hosting y dominio no muy extenso y gratuitos con GitHub.

Una vez que hayamos elegido la empresa de hosting que vamos a utilizar, dicha empresa nos dará la dirección de Internet de nuestra carpeta donde vamos a alojar nuestros archivos. Si queremos que se cargue una página por defecto sin indicar su nombre debemos subir a nuestro servidor una página html con el nombre index (index.html)

Actividades (6)

Contesta el siguiente formulario intentando utilizar tus propias palabras. No vale cortar y pegar ya que esto influirá en la nota.

5. EDITORES HTML VISUALES

Aunque a lo largo del tema hemos visto cómo crear páginas web a partir de las etiquetas HTML, esta forma es la que se utilizaba hace años, pero actualmente no es muy habitual crearlas de esta manera.

Hoy en día, se utilizan los editores de HTML conocidos como WYSIWYG (What You See Is What You Get), lo que en español vendría a ser algo así como «Lo que ves es lo que obtienes», aunque no deja de ser un editor HTML visual, donde se pueden ver los cambios en tiempo real.

Por ejemplo, ponemos una imagen y se nos muestra un código HTML, resaltamos una palabra en negrita y se nos muestra otro código o, incluso ponemos un enlace y lo mismo, se nos indica el código.

Existen numerosos editores HTML WYSIWYG que ofrecen características como compatibilidad con varias vistas e idiomas. También ofrecen diseños preparados para crear sitios web, soporte para HTML5 y CSS3, etc.

Los editores HTML visuales permiten poner en escena todos los elementos necesarios para construir una web en HTML y, aunque como decimos, en desarrollo web ya no son muy usados, sí que se suelen utilizar para llevar a cabo pequeñas correcciones en códigos HTML que pueden estar equivocados, en bloques de códigos HTML en CMS's o fallarles alguna que otra etiqueta, ya que escribir código HTML no es tan fácil como parece, hay que tener un mínimo de conocimientos, puesto que podemos acabar escribiendo alguna etiqueta que no toque. 

Actividades (7)

Pulsa en el siguiente enlace que te lleva a un editor HTML visual online.

https://fossbytes.com/tools/es/html-editor-online

Realiza una página web que cumpla las siguientes especificaciones:

Cuando termines la página, pulsa en el botón [Export HTML] y guarda el código en un archivo llamado index.html en el ordenador.

Sube el archivo a classroom, en la tarea llamada Actividades (7)

EJEMPLO DE PÁGINA WEB CREADA CON EL EDITOR VISUAL


6. JAVASCRIPT

JavaScript es un lenguaje de programación orientado a objetos, basado en prototipos, imperativo y dinámico. Se trata del lenguaje de programación más utilizado en la red, y permite obtener dinamismo e interactividad en internet.

Las páginas que hemos realizado hasta ahora mediante HTML y CSS, son estáticas, pero a menudo vemos algunas páginas web con animaciones, mapas interactivos, gráficos en 3D, ventanas de vídeo, etc. Todo esto se realiza gracias a JavaScript.

JavaScript permite así que tu página sea interactiva de otras formas que no involucran formularios en absoluto. Puede agregar animaciones a la página que atraigan la atención sobre una parte específica de la página o que faciliten el uso de la página. Puede proporcionar respuestas dentro de la página web a varias acciones que realiza el visitante para evitar la necesidad de cargarlas.

Podríamos decir que JavaScript es la «tercera capa del pastel de capas» de las tecnologías web tras el lenguaje HTML y CSS.

De este modo podemos decir que para cualquier web que queramos crear necesitaremos estos tres lenguajes:

Los tres se estructuran de modo que dan forma a nuestra web paso a paso. 

Quien quiera realizar una página web profesional actualmente, debe conocer y saber manejar los tres lenguajes.

Al igual que sucedía con los códigos CSS,  los códigos JavaScript pueden añadirse a las páginas web de dos formas distintas:

Incluyéndolo dentro del código HTML, como en este ejemplo:

<!DOCTYPE html>

<html lang="es-ES">

   <head>

     <meta charset="utf-8">

     <title>Ejemplo de JavaScript</title>

     <script>

       alert("Hola");

     </script>

   </head>

   <body>

     <p>Ya te he saludado</p>

   </body>

</html>

O incluyendo la siguiente línea en nuestro código HTML, que nos enlaza con un archivo llamado "estilos.css"

Archivo: ejemplo.html

<!DOCTYPE html>

<html lang="es-ES">

   <head>

     <meta charset="utf-8">

     <title>Ejemplo de JavaScript</title>

     <script src="archivo.js"

     </script>

   </head>

   <body>

     <p>Ya te he saludado</p>

   </body>

</html>

El archivo "archivo.js" contiene los códigos de JavaScript:


Archivo: archivo.js

alert("Hola");

Actividades (8)

Contesta el siguiente formulario intentando utilizar tus propias palabras. No vale cortar y pegar ya que esto influirá en la nota.

Ejemplos de juegos hechos con JavaScript


Enlace al juego Tic Tac

Enlace al juego del Ahorcado 

7. PÁGINAS WEB CON GOOGLE SITES

Google Sites es un editor visual de página web online. Su manejo es muy sencillo, las páginas creadas quedan almacenadas en nuestro Google Drive y son publicadas en la web automáticamente, sin necesidad de contratar un host.

En el siguiente vídeo de YouTube se explica cómo crear y diseñar una página web con Google Sites.

Actividades (9)

Construye una página web compuesta por al menos 3 subpáginas con Google Sites.

Actividades (10)

Imagina que eres un diseñador o diseñadora web. Un cliente ha creado una página web básica con Google Sites y te la manda para que tu le mejores el diseño de la misma (Pulsa en la imagen para abrirla):

Al final de la clase, comparte tu página con tu profesor.

Actividades (11)

Imagina que eres un diseñador o diseñadora web. Un cliente ha creado una página web básica con Google Sites y te la manda para que tu le mejores el diseño de la misma (Pulsa en la imagen para abrirla):

Al final de la clase, comparte tu página con tu profesor.

7.1. Insertar código JavaScript en páginas de Google Sites

Hemos visto como construir páginas web con Google Sites. Aunque disponemos de muchas opciones, además, podemos incluir código HTML, CSS y JavaScript dentro de la misma para añadirle funcionalidades que no podemos conseguir con las herramientas disponebles.

Para conseguirlo , pulsamos en el botón "insertar <>" de la paleta de herramientas; al hacerlo se nos muestra una pequeña ventana en la que tendremos que seleccionar "insertar código" y pegar nuestro código HTML con CSS o JavaScript incluido.

En esta ventana se pueden pegar el contenido de los archivos HTML, de los archivos CSS y de los archivos JavaScript todos seguidos, como veremos en el ejercicio del reloj analógico a continuación.

Actividades (12)

Crea una página en Google Sites y pega los siguientes códigos para insertar un reloj, una calculadora que multiplica, un formulario de registro y un reloj analógico en la misma.

Cuida el aspecto estético de la página creada y añade algo de texto y fotos.

CÓDIGO DE RELOJ SIMPLE

<!DOCTYPE html>

<html lang="es">

<head>

<title>Reloj con Javascript</title>

<script language="JavaScript">

function mueveReloj() {

    momentoActual = new Date()

    hora = momentoActual.getHours()

    minuto = momentoActual.getMinutes()

    segundo = momentoActual.getSeconds()

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible

    setTimeout("mueveReloj()",1000) }

</script>

</head>

<body onload="mueveReloj()">

<form name="form_reloj">

<input type="text" name="reloj" size="10">

</form>

</body>

</html>

CÓDIGO DE CALCULADORA DE MULTIPLICACIONES

<!DOCTYPE html>

<html lang="es">

<head>

</head>

<body>

<h1>Calculadora</h1>

<input type="text" id="arg1" size="1"> X <input type="text" id="arg2" size="1">

<input type="button" value="Calcular!" onclick="calc()"> 

<div id="result"></div>

<script type="text/javascript">

function calc(){

var argOne=document.getElementById('arg1').value; 

var argTwo=document.getElementById('arg2').value;

var ans=(argOne*argTwo); 

document.getElementById('result').innerHTML=argOne + ' multiplicado por ' + argTwo + ' es igual a ' + ans; }

</script>

</body>

</html>   

CÓDIGO DE FORMULARIO DE REGISTRO

<html lang="es">

<body>

<script type="text/javascript">

function validar() {

  var name=document.getElementById("nombre").value;

  var at=document.getElementById("email").value.indexOf("@");

  if (name.length==0) {

     alert("Es obligatorio indicar un nombre");

     return false;   }

  if (at==-1) {

     alert("Dirección de correo electrónico no válida");

     return false;  }

}

</script>

<form name="formulario" 

      action="mailto:micorreo@midominio.com"

      onsubmit="return validar()">

  Nombre: <input type="text" id="nombre" size="20" /> <br />

  E-mail: <input type="text" id="email" size="20" /> <br />  <br />

  <input type="submit" value="Enviar" />

</form>

</body>

</html>

CÓDIGO DE RELOJ ANALÓGICO

<div class="clock">

                    <div class="hour">

                        <div class="hr" id="hr" style="transform: rotateZ(447deg);">

                        </div>

                    </div>

                    <div class="min">

                        <div class="mn" id="mn" style="transform: rotateZ(324deg);">

                        </div>

                    </div>

                    <div class="sec">

                        <div class="sc" id="sc" style="transform: rotateZ(276deg);">

                        </div>

                    </div>

                </div>

         <script>

            // for time;

            const deg = 6; 

            // 360 / (12 * 5);

            const hr = document.querySelector('#hr');

            const mn = document.querySelector('#mn');

            const sc = document.querySelector('#sc');

            setInterval(() => {

                let day = new Date();

                let hh = day.getHours() * 30;

                let mm = day.getMinutes() * deg;

                let ss = day.getSeconds() * deg;

                let msec = day.getMilliseconds();

                hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;

                mn.style.transform = `rotateZ(${mm}deg)`;

                sc.style.transform = `rotateZ(${ss}deg)`;   })

            </script>

           <style>

    .clock {

        width: 300px;

        height: 300px;

        display: flex;

        justify-content: center;

        align-items: center;

        background-size: cover;

        border: 4px;

        border-radius: 50%;

        border: 2px solid #06635b;

        margin: 0 auto;

    }

    .clock:before {

        content: '';

        position: absolute;

        width: 15px;

        height: 15px;

        background: #06635b;

        border-radius: 50%;

 fixed, or position: sticky). */

        z-index: 10000;

      }

    .clock .hour,

    .clock .min,

    .clock .sec {

        position: absolute;

    }

    .clock .hour, .hr {

        width: 160px;

        height: 160px;

    } 

    .clock .min, .mn {

        width: 190px;

        height: 190px;

    }

    .clock .sec, .sc {

        width: 230px;

        height: 230px;

    }

    .hr, .mn, .sc {

        display: flex;

        justify-content: center;

        position: absolute;

        border-radius: 50%;

   }

    .hr:before {

        content: '';

        position: absolute;

        width: 7.5px;

        height: 85px;

        background: #06635b;

        z-index: 10;

        /* z-index least */

        border-radius: 2.8px;

    }

    .mn:before {

        content: '';

        position: absolute;

        width: 3.5px;

        height: 100px;

        background: #06635b;

        z-index: 11;

        /* z-index more than hour hand */

        border-radius: 3px;

    }

    .sc:before {

        content: '';

        position: absolute;

        width: 2px;

        height: 150px;

        background: #06635b;

        z-index: 12;

        /* z-index more than hour minute hand */

        border-radius: 3px;

    }

  </style>

Actividades (13)

Imagina que quieres hacer una página de Google Sites para explicar a tus compañeros de clase cómo se utiliza Google Sites.

Al final de la clase, comparte tu página con tu profesor.

Si quieres saber más sobre el tema puedes visitar las siguientes páginas:

https://www.w3bai.com/es/html/default.html#gsc.tab=0