Tema 1 - Introducción a la web

1.1.- Mi primera web en 1 minuto

Para empezar, vamos a crear una web sorprendentemente rápido.

Ejercicio 1

- Duración estimada: 3 minutos.

Procedimiento:

1.- Abrir el notepad (en windows) o texedit (mac), o el editor de texto más sencillo que tengáis. No vale el word ni esos tan modernos.
2.- Escribir el texto que os plazca. También podéis escribir un texto que no os guste, incluso números.
3.- Guardar el archivo y ponerle el nombre que querais, pero ¡ojo! debemos cambiarle la extensión. ¿que qué es la extensión? Pues normalmente esos archivos se guardan como .txt Debemos cambiar la extensión a .html
Para hacer esto en Notepad, debajo del nombre del archivo aparecerá una casilla que pone "Save as type" (en inglés) u otro texto similar. Allí escogemos "all files (*.*)".
4.- Una vez guardado el documento, vamos a la carpeta donde lo hemos guardado, y lo abrimos con el navegador que nos apetezca (Chrome, Safari, Firefox, Explorer...)

enhorabuena!

Acabamos de crear nuestra primera página web!!!

¿Qué hemos aprendido?

Con este ejercicio, hemos visto que el lenguaje HTML es un lenguaje plano.

¿Qué quiere decir esto? A diferencia de un documento de word, o una hoja de cálculo de EXCEL, no necesitamos un programa sofisticado para escribir nuestro código.

Si guardamos una página web cualquiera y la abrimos con el notepad (teniendo el notepad abierto, la arrastramos dentro), podemos ver que, aunque no entendamos lo que dice, o sí, podemos leerla sin problemas. Cosa que no ocurriría con un documento de word o excel, ya que veríamos caracteres extraños y en algunas ocasiones, hasta a la niña de la curva.

¿Así de fácil es hacer una web?

No.

En la vida como en el deporte, una página web tiene sus reglas.

Las páginas web tienen una estructura general, y su contenido (texto, imágenes,etc), a su vez tiene sus propias reglas. Pero eso lo veremos más adelante.

Disfrutad de vuestra primera página web!!

1.2.- Estructura de una página web

El código de una página web se compone de las siguientes partes:

1.- DOCTYPE: Declaración del tipo de documento HTML (más tarde veremos esto)
2.- HEAD: Lugar donde van los "scripts", enlaces a hojas de estilo, metadatos, y otra información que no se "verá" en pantalla.
3.- BODY: El cuerpo de la web. Lo que escribamos aquí sí se verá en pantalla. Detro del body es donde escribiremos el contenido de la página web.
4*.- Después de la declaración del DOCTYPE, tenemos la etiqueta "" que abarca tanto el head como el body.

En lenguaje html, las etiquetas se abren y se cierran; es decir:

<html> apertura de etiqueta html

</html> cierre de etiqueta html

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

También hay algunas excepciones de etiquetas que no se cierran, o se "autocierran" como las imágenes:

<img src="imagenes/yo-y-mi-perro-pepin.jpg" alt="mi perro es punky" />

Veamos un ejemplo muy básico de la estructura de una página web HTML5

<!DOCTYPE html> 

<html> 

	<head>

		 <title>Mi web</title> 

	 </head> 

	 <body> 

	 	<h1>Esto es un encabezado muy importante</h1> 

	 	<h2>Esto es otro encabezado menos importante</h2> 

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

	 </body> 

</html>

Como ejercicio de dificultad extrema, os propongo hacer un corta y pega del ejemplo muy básico en el notepad y guardarlo como html.

Al abrirlo en el navegador, veremos que es algo distinto al documento del ejercicio 1.

1.3.- El DOCTYPE

Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debe ser el primer elemento que abra un documento. Esto quiere decir que debería preceder a <html>.

Se trata de una marca que no necesita cierre y cuya función es facilitar información al servidor web que aloja la página. La información facilita por DOCTYPE se refiere al tipo de documento visualizado además de ser necesaria para la comunicación entre navegador y servidor.

Al decir "tipo de documento" nos referimos al tipo de HTML, que como habrás deducido, no es único y universal. Existen diferentes HTML. Veamos algunos usados en la antiguedad y también actualmente:

Doctype XHTML 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype XHTML 1.0 transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype XHTML 1.0 frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Doctype HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype HTML 4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype HTML 4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Veamos por encima qué diferencias hay entre HTML, XHTML, strict y transitional.

El lenguaje html, xhtml, etc... tiene unas reglas. En el caso del xhtml strict, estas son más estrictas, y en el transitional más laxas.

El caso del "frameset", en desuso y completamente obsoleto, se utilizaba para "embeber" varias webs en una sola y mostrarla en marcos, véase el ejemplo: aquí.

En HTML5, el doctype se ha simplificado mucho, y simplemente nos sirve con escribir <!DOCTYPE html> para declarar que nuesrto documento, es decir, nuesrta web, está en HTML5

Más información en: https://www.w3schools.com/tags/tag_doctype.asp