1. INTRODUCCIÓN A LAS PÁGINAS WEB

Hoy en día, Internet se ha convertido en una "ventana al mundo", todas las empresas e instituciones tienen su propia página web que les sirve para presentarse al resto del mundo. Por eso, el desarrollo web es actualmente una de las profesiones con más auge. 

Una página web es un documento que puede contener texto, sonido, vídeo, programas, enlaces, imágenes, hipervínculos y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y a la que se puede acceder mediante un navegador web. 

Esta información se encuentra generalmente en formato HTML y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. 

Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, scripts, imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un ordenador local o en un servidor web remoto. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).

Para acceder a una pagina web almacenada en la web, necesitamos conocer su URL (Uniform Resource Locator) e introducirla en la barra de direcciones de un navegador web.

Cada página web tiene su propia URL. Las URL están compuestas de varias partes que permiten al navegador localizarlas dentro de un servidor.

• Protocolo: Reglas que debe seguir el navegador para encontrar la página web.

• Subdominio: Para el protocolo http suele ser www, aunque existen otros.

• Dominio: Es el nombre donde se almacena el sitio web.

• Subdirectorio: Es una carpeta alojada dentro del dominio indicado.

• Archivo: Es el archivo o página que nos va a mostrar el navegador web. Está dentro del subdirectorio indicado.

Pie de página o footer

El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página. En el footer podemos encontrar los siguientes elementos:

• Menú simplificado

• Información de contacto

• Botones de redes sociales

• Logo de la empresa

• Enlace a la política de privacidad

1.3. Herramientas para desarrolladores web

Para editar una página web se necesitan varias herramientas variadas, ya que se trata de mezclar letras, colores, fondos, fotos, dibujos, vídeos, etc. en una sola pagina, por eso, un editor de páginas web debe tener y dominar varias herramientas digitales, como son:

• Repositorio de plantillas: Sitio web con plantillas de páginas web, para utilizarlas o basarse en las mismas.

• Editor de paleta de colores: Programa creador de la paleta de colores de la página.

• Repositorio de tipografías: Sitio de fuentes o tipos de letra.

• Banco de imágenes: Páginas desde las que exportar imágenes para la página web (Hay sitios de pago y sitios gratuitos)

• Banco de iconos: Página repleta de icono para la página clasificados en distintas categorías y diseños.

• Banco de vídeos: Recopilatorio de vídeos y animaciones (También podemos encontrar vídeos de pago y vídeos gratuitos).

• Editor de imágenes: Programa manipulador de imágenes (Para recortarlas, girarlas, cambiar colores, incluir letreros, etc.).

• Creador de prototipos: Webs donde podemos hacer un boceto de la estructura de la web (Mookup).

• Maquetador visual: Es el sitio donde creamos la página (Page builder).

• Diseñador de logotipos: Webs donde podemos crear el logotipo de la web o empresa fácilmente.

1.4. Lenguajes de edición de páginas web

Aunque actualmente existen sitios en la web donde construir páginas arrastrando boques de texto, imágenes, etc. como Google Sites, Wix, weebly..., son sitios con opciones muy cerradas, que no permiten hacer páginas personalizadas ni originales, sino que todas tienen un aspecto similar.

Si lo que se quiere es crear una página web a medida, original y distinta a las demás, hay que construirla mediante un lenguaje de edición. Los lenguajes de edición de páginas web más utilizados hoy en día son:

• HTML (Hyper Text Markup Language, lenguaje de etiquetado de hipertexto) es el más sencillo y el más antiguo, se trata de un documento de texto que integra el contenido de la página web mediante etiquetas.

• XML (Extensible Markup Language, lenguaje de marcas extensible) es un estándar para el intercambio de datos estructurados entre distintas plataformas, y tiene un formato muy sencillo.

• XHTML (Extensible Hypertext Markup Language, lenguaje extensible de etiquetado de hipertexto) es una reformulación del HTML 4.0 combinado con la versión 1.0. de XML. Complementa las cualidades del HTML agregando la extensibilidad del XML.

• HTML5 es la quinta revisión del lenguaje HTML y fue publicada a fines del año 2014. Dispone de dos alternativas de sintaxis: una tradicional y otra combinada con XHTML. Es el lenguaje recomendado actualmente para páginas web porque brinda mejor accesibilidad.

• CSS (Cascade Style Sheets, Hojas de Estilo en Cascada) es un lenguaje que se utiliza para separar el contenido (los datos ) del diseño. De este modo, al cambiar las definiciones de algún parámetro en el archivo CSS, se modifica la apariencia de todos los archivos HTML de un sitio.

• Flash: este programa originalmente se usaba para realizar animaciones vectoriales, pero paulatinamente se ha convertido en uno de los mejores proveedores de experiencias interactivas, gracias a su propio lenguaje de programación, el ActionScript. Se integra dentro de un documento HTML como parte de la página o constituye la página completa, puede integrar todos los medios y combinarse con bases de datos. Los editores de gráficos, sonido y video en línea generalmente están diseñados con Flash. 

2. EDICIÓN DE PÁGINAS WEB EN LENGUAJE HTML

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. 

2.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:

• Resaltan las palabras clave en distintos colores para facilitar la edición de código,

• Autocompleta las etiquetas HTML.

• Ofrecen consejos de ejecución.

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.

2.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.

3. 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:

• Elemento "html"

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

<html>

</html>

• Elemento "head"

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.

• Elemento "title"

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.

• Elemento "body"

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.

• Elemento "p"

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>

• Elemento "font"

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.

3.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:

• <!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.

• lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento "html". En este caso español (España).

• <meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y en consecuencia, no necesita ser cerrado escribiendo </meta>. Sin no incluimos esta línea, no se mostrarán las tildes ni la letra ñ. 

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.

• Comentarios 

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.

3.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:

• Títulos del documento

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:

• Formato de caracteres

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índice

^...   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índice </p>

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

</body>

</html>

• Alineación de texto

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>

• Listas

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

Los documentos HTML permiten dos tipos de listas:

• 1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>

  2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>...</OL>

  3. Listas de definiciones (definition list): su etiqueta principal es <DL>...</DL>

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>

• Líneas

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>

• Enlaces

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.

• Imágenes

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>

• Tablas

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">

4. 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.

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>

5. 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:

• Alojamiento (Hosting) : Es un espacio de almacenamiento alquilado en el servidor web de una compañía de alojamientos. Pones los archivos de tu sitio web en este espacio, y el servidor web suministra el contenido a los usuarios que lo solicitan.

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

• Un nombre de dominio : Es una dirección única (URL) mediante la cual la gente puede encontrar tu sitio web, como https://www.mozilla.org, o https://es.wikipedia.org/. Puedes tomar en alquiler el nombre de tu dominio durante algunos años en un registrador de dominio. Los nombres de dominio terminan en un punto y algunas letras que nos da información sobre el contenido de la página.

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)

6. 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. 

https://norfipc.com/web/javascript-facil-paginas-web-ejemplos.html

7. 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:

• HTML es el lenguaje de marcado que utilizamos para estructurar y dar sentido a nuestro contenido web, por ejemplo, definir párrafos, encabezados y tablas de datos, o incrustar imágenes y videos en la página.

• CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y fuentes, y diseñar nuestro contenido en múltiples columnas.

• JavaScript es un lenguaje de scripting que permite crear contenido de manera dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás.

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>

8. 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.

8.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.

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