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.

Probablemente esta definición solo te haya ayudado un poco a aclara la pregunta. Veamos un video que probablemente te ayude un poco más a aclarar tus ideas. 

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.

¿Cómo se forma un sitio web?

Un sitio web se compone de diferentes archivos. Unos archivos son código como los documentos html, las hojas de estilo y los programas javascript; otros archivos son recursos como imágenes o vídeos.

Cuando un dispositivo cliente quiere acceder a una página web, los archivos que componen el sitio web se descargan desde el servidor al cliente.

En ese momento, el navegador (Mozilla, Chrome, etc.) interpreta el código (html, css y js) y muestra la web al usuario. Estos archivos son troceados en paquetes para su envío.

Dividimos el desarrollo web en dos áreas diferenciadas (cliente y servidor).

CLIENTE

En el entorno cliente creamos las páginas web con las que interactúan los usuarios y  utilizamos principalmente los lenguajes: 

• HTML para estructurar y organizar los contenidos.

• CSS para conseguir una apariencia determinada.

• JavaScript  para controlar el comportamiento.

SERVIDOR

En el entorno servidor se crean páginas web dinámicas, normalmente insertando datos desde una base de datos dentro de plantillas HTML.  Para ello, solemos utilizar:

• Frameworks web escritos en lenguajes como python, php o javascript que hacen más fácil escribir y escalar aplicaciones web.

• Bases de datos SQL/NoSQL (almacenan datos en tablas / o bien mediante modelos más flexibles como pares clave-valor o colecciones). 

1.1. Servidores web

Cuando visitas una página web, los datos por los que navegas han de estar almacenados en algún sitio para que puedas acceder. En lugar de guardarlos en el ordenador del creador del sitio (esto supondría muchos problemas para el mismo), lo que se hace es utilizar servidores web en los que se alojan todos los datos, así que te vendrá bien saber aumentar velocidad de un ordenador.

Por tanto, un servidor web es un ordenador especialmente preparado para estar encendido las 24 horas del día los 365 días del año.

En el siguiente vídeo se nos explica qué es un servidor web.

1.2. HTML, CSS y JAVASCRIPT

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre ellos? ¿Son realmente todos lenguajes de programación?

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web como ejemplo, de la siguiente manera: 

HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin, Javascript es el músculo que le da movimiento al cuerpo. 

Cuerpo o body

Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la página principal.

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.4. 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.5. 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": Para escribir un párrafo

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.

En el siguiente enlace tienes un vizualizador de código que os permitirá ir viendo como estáis creando la web con el código HTML que vayais introduciendo.

VISUALIZADOR DE CÓDIGO

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

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

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

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

La etiqueta <blockquote> se utiliza, como su propio nombre indica, para crear un bloque o sección donde aparezca un texto que es una cita o referencia a una obra o fuente de información. Dicha fuente de información puede ser un libro, una canción, un documento, una serie de televisión, etc...

En definitiva, una obra o documento de cualquier tipo. Veamos un ejemplo, con una cita de una película:

<p>Observa la siguiente cita:</p>

<blockquote>

  La primera regla del Club de la Lucha es:

  Nadie habla sobre el Club de la Lucha.

</blockquote>

El resultado será:

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

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

Para ver que tipo de listas ordenadas puedo usar los siguientes complementos dentro de <ol> o de <ul>.

En HTML, los tipos de listas desordenadas <ul> se clasifican por el estilo de viñeta que se les asigna. Los valores más comunes son disc, circle, square y none:

Ejemplo:

<ul type="disc">

    <li>Elemento 1</li>

    <li>Elemento 2</li>

    <li>Elemento 3</li>

    <li>Elemento 4</li>

</ul>

<ul type="circle">

    <li>Elemento 1</li>

    <li>Elemento 2</li>

    <li>Elemento 3</li>

    <li>Elemento 4</li>

</ul>

<ul type="square">

    <li>Elemento 1</li>

    <li>Elemento 2</li>

    <li>Elemento 3</li>

    <li>Elemento 4</li>

</ul>

<ul type="none">

    <li>Elemento 1</li>

    <li>Elemento 2</li>

    <li>Elemento 3</li>

    <li>Elemento 4</li>

</ul>

En HTML, los tipos de listas ordenadas <ol> tienen varios atributos interesantes que usar:

Número de inicio de la lista: start

El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por defecto las listas ordenadas en HTML empiezan por el número 1.

<ol start="numero"> ... </ol>

De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código:

<ol start="5">

  <li>Julio</li>

  <li>Carmen</li>

  <li>Ignacio</li>

  <li>Elena</li>

</ol>

Que produciría el siguiente efecto:

5. Julio

6. Carmen

7. Ignacio

8. Elena

Tipo de lista ordenada: type

De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar. Si no indicamos ninguna por defecto usara una lista numerada.

Entre los tipos de listas que podemos representar tenemos:

• 1 - Listas decimales

• a - Listas alfabéticas en minúsculas

• A - Listas alfabéticas en mayúsculas

• i - Listas de números romanos en minúsculas

• I - Listas de números romanos en mayúsculas

Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada en HTML.

<ol type="tipo"> ... </ol>

Si queremos que nuestra lista aparezca ordenada mediante letras en mayúsculas escribimos lo siguiente:

<ol type=”A”>

  <li>Julio</li>

  <li>Carmen</li>

  <li>Ignacio</li>

  <li>Elena</li>

</ol>

Listas en orden inverso: reversed

En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.

Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.

<ol reversed> ... </ol>

En este caso, si escribimos la siguiente lista:

<ol reversed>

  <li>Julio</li>

  <li>Carmen</li>

  <li>Ignacio</li>

  <li>Elena</li>

</ol>

Lo que obtendremos por pantalla será lo siguiente:

4 Julio

3 Carmen

2 Ignacio

1 Elena

3.2.6. 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. El cierre se hace dentro de la misma etiqueta.

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>

Las sangrías son aquellos espacios en blanco (vacios) que se colocan al comienzo de una línea o párrafo. Así, para crear sangrías tenemos diferentes etiquetas, aunque posiblemente la que da mejores resultados y es más fácil y fiable son las etiquetas <dd> y </dd>

3.2.7. Sangrías y espacios en blanco

Las sangrías son aquellos espacios en blanco (vacíos) que se colocan al comienzo de una línea o párrafo. Así, para crear sangrías tenemos diferentes etiquetas, aunque la que da mejores resultados y es más fácil y fiable son las etiquetas:

<dd> y </dd>

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver como funciona la sangría:

<p>Título: Fenomenología del espíritu</p>

Subtítulo: Contenido de la obra <br>

<dd>La Idea en su ser en y para sí misma, al regresar del gran círculo en que, a partir de su ser

en sí, recorrió los sucesivos momentos de su alteridad, constituye el objeto de la filosofía

del espíritu.</dd>

Para insertar espacios en blanco se usa la entidad &nbsp; (del inglés Non Breaking Space que significa espacio sin ruptura) y sirve para representar en HTML un espacio en blanco y se utiliza normalmente en dos casos. Utilizamos &nbsp; tantas veces como espacios queramos incluir.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver como funciona la sangría:

<p>Este es un ejemplo de&nbsp;&nbsp;&nbsp;&nbsp;espacios regulares.</p>

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

Atributo TARGET

target

Especifica en donde desplegar la URL enlazada. Es un nombre (name of), o palabra clave (keyword for), un contexto de navegación (browsing context): una pestaña, ventana, o <iframe>. Las siguientes palabras clave (keywords) tienen significado especial:

• _self: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.

• _blank: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.

• _parent: Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.

• _top: Carga la URL en el contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo modo que _self.

3.2.9. Imágenes

Para visualizar una imagen en un documento HTML se puede utilizar el elemento "img". Sus atributos son:

• src: Indica el nombre o la URL de la imagen a mostrar. Atributo obligatorio.

• alt: Establece un texto alternativo que describa la imagen a mostrar. 

• width: Indica el ancho de la imagen en píxels (sin la unidad). Se puede hacer desde CSS.

• height: Indica el alto de la imagen en píxels (sin la unidad). Se puede hacer desde CSS.

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>

3.2.10. Tablas

En HTML se pueden representar datos en tablas mediante la etiqueta <table>. Dentro de dicha etiqueta, se utilizan las etiquetas:

• <thead> La etiqueta <thead> en HTML es utilizada para definir un bloque que contiene las celdas de encabezado de una tabla. El contenido dentro de esta etiqueta se considera como un encabezado de tabla y se utiliza para describir el contenido de las columnas de la tabla. El contenido dentro de la etiqueta <thead> se presenta en negrita y centrado por defecto en los navegadores web.

• <tbody> La etiqueta <tbody> de HTML se utiliza para agrupar el contenido de una tabla que representa el cuerpo de la tabla. Esta etiqueta se usa junto con las etiquetas <thead> y <tfoot> para organizar el contenido de una tabla en diferentes secciones, permitiendo que el navegador y los motores de búsqueda puedan procesarlo de manera más eficiente. La etiqueta <tbody> se utiliza para contener las filas de una tabla, que se representan con la etiqueta <tr>. Dentro de cada fila, se usan las etiquetas <td> para representar las celdas de la tabla.

• <tfoot> La etiqueta <tfoot> en HTML se utiliza para definir un pie de tabla. El contenido dentro de esta etiqueta se mostrará en una fila o conjunto de filas al final de la tabla. Es comúnmente utilizado para mostrar subtotales, totales o una leyenda de la tabla. Es importante tener en cuenta que el navegador puede mostrar el contenido de <tfoot> antes de que el contenido de <tbody> para mejorar el acceso a la información de resumen. Es importante tener en cuenta que solo puede haber una etiqueta <tfoot> dentro de una etiqueta <table> y debe ser colocada después de <tbody>.

• <th> La etiqueta <th> de HTML es utilizada para definir un encabezado de celda en una tabla. Los encabezados de celda son utilizados para describir el contenido de las celdas en una fila o columna específica. El contenido dentro de la etiqueta <th> se mostrará en negrita y centrado por defecto, pero estos estilos pueden ser modificados utilizando CSS.

• <tr> al comenzar cada fila.

• <td> para definir cada elemento dentro de cada fila.

• <caption> Es el encargado de darle un título descriptivo a las tablas. 

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

  <table>

<caption> Titulo descriptivo </caption>

            <thead>

                  <tr>

     <th>Producto</th>

     <th>Precio</th>

     <th>Cantidad</th>

   </tr>

 </thead>

 <tbody>

   <tr>

     <td>Lápiz</td>

     <td>$0.50</td>

     <td>20</td>

   </tr>

   <tr>

     <td>Borrador</td>

     <td>$0.25</td>

     <td>10</td>

   </tr>

 </tbody>

 <tfoot>

   <tr>

     <td colspan="2">Total</td>

     <td>$3.00</td>

   </tr>

 </tfoot>

</table>

En este ejemplo se crea una tabla con una cabecera, un cuerpo y un pie de tabla. La etiqueta <thead> define la cabecera de la tabla, <tbody> define el cuerpo de la tabla y <tfoot> define el pie de tabla. En este caso el pie de tabla muestra el total de gastos. 

Atributos para tablas, filas y celdas

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les incorporamos toda una batería de     atributos aplicados sobre cada tipo de etiquetas que las componen.

En cuanto a atributos para tabla hay unos cuantos. Muchos los conoces ya de otras etiquetas, como width, height, align,     etc. Hay otros que son especialmente creados para las etiquetas TABLE.

• cellspacing: es el espacio entre celdas de la tabla.

• cellpadding: es el espacio entre el borde de la celda y su contenido.

• border: es el número de píxeles que tendrá el borde de la tabla.

• bordercolor: es el rbg que le vas a asignar al borde de la tabla.

Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda poniendolo dentro de TD en concreto o toda una línea poniendolo dentro de TR: 

• align: Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.

• valign: Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.

• bgcolor: Da color a la celda o línea elegida.

• bordercolor: Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda TD y no al conjunto de celdas de una línea son:

• background: Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.

• height: Define la altura de la celda en pixels o porcentaje.

• width: Define la anchura de la celda en pixels o porcentaje.

• colspan: Expande una celda horizontalmente.

• rowspan: Expande una celda verticalmente.

En los siguientes enlaces tienes teoría sobre tablas. En el primero tienes teorías de todos los atributos que se pueden usar en tablas. En el segundo enlace tienes más información de todos los atributos que se pueden aplicar a tablas para cambiar borde, espacio entre celdas, e

TABLAS EN HTML

ATRIBUTO PARA TABLAS

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.

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;

     }

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. 

7. CURSO HTML

En el siguiente enlace tienes un curso completo de HTML en youtube muy intuitivo y con múltiples ejemplos por si necesitas profundizar o resolver alguna duda: