Escribiendo tu primera página web

Apoya a Proyecto Autodidacta a través de Patreon

Comenzamos en esta ocasión un nuevo manual, en este caso para aprender a hacer páginas web por medio del lenguaje HTML. Este manual pretende ser uno de iniciación, pensado para personas completamente novatas en la materia.

NOTA IMPORTANTE PARA LOS QUE YA CONOCEN ALGO DE HTML: A la hora de ponerme a hacer este manual, me surgieron varias preguntas. La principal fue: ¿qué versión de HTML utilizar? Porque hay varias. Decidí entonces decantarme por la última versión aparecida hasta el momento, el HTML 5.
Esto es importante porque la versión 5 elimina algunas etiquetas muy usadas anteriormente y que incluso muchos programas actuales que sirven para hacer páginas web todavía usan. Es posible que a aquellos que ya conozcan el HTML les parezca extraño que utilice algunos métodos más largos para hacer cosas que se pueden hacer con una simple etiqueta. La razón se divide en dos: por un lado, porque esa etiqueta se ha eliminado, favoreciendo el uso de CSS; por otro, al incluir elementos de CSS dentro de este manual, ya se está avanzando al lector en el conocimiento de ese lenguaje, de manera que luego no le resulte tan complicado comprenderlo.

OTRA NOTA IMPORTANTE: escribir exactamente como está indicado es muy importante. Una coma en el lugar inapropiado, la falta de una letra, una palabra mal escrita… Todo eso, puede hacer que tu código no se comporte como debe ser. A la hora de copiar, asegúrate de que copias bien.

MÁS NOTAS IMPORTANTES: aunque no vamos a entrar en las mayores novedades del HTML 5, es muy recomendable que uses para aplicar las prácticas con este manual la última versión de tu navegador favorito. Se desaconseja completamente el uso de Internet Explorer: aunque ha mejorado en sus últimas versiones, siempre suele estar a la cola en la implantación de novedades respecto a los otros navegadores. Se recomienda vivamente el uso de Firefox, Google Chrome u Opera.

Dicho todo esto, empecemos primero por lo más práctico: escribir tu primera página web. Para ello, sigue las siguientes instrucciones.

Abre el bloc de notas

Si bien hay muchos programas para hacer páginas webs, la mejor forma de aprender es hacerlo por lo más básico: el bloc de notas. Más adelante, a medida que las cosas se vayan haciendo más complejas, emplearemos otro programa gratuito que nos facilitará mucho la vida.

Escribe lo siguiente

Escribe_lo_siguiente.jpg

Guarda el archivo

Ponle al archivo el nombre index.html. Después, haz clic en la lista desplegable Tipo: y selecciona Todos los archivos (.). Es muy importante que hagas todo esto al pie de la letra, o si no tú archivo no se abrirá como es debido.
Una vez que te hayas asegurado de que has hecho todo eso, haz clic en guardar.

Guarda_el_archivo.jpg

Abre el archivo

Desplázate hasta el lugar donde has guardado el archivo y haz doble clic sobre él. El archivo se abrirá en el navegador principal de tu sistema, mostrando algo como esto que ves en la imagen.

Abre_el_archivo.jpg

A qué corresponde cada cosa

El primer Hola, mundo que hemos escrito corresponde al título de la página, que aparece en la pestaña o en la barra de título del navegador (dependiendo del que uses). El segundo corresponde al cuerpo del texto; es decir, al contenido en si mismo de la página web.

A_qu_corresponde_cada_cosa.jpg

Explicación

Una página web no es más que un archivo de texto escrito en un lenguaje especial: el HTML (HyperText Markup Language). Este lenguaje le indica al navegador como debe mostrar la página web. Para hacerlo, usa lo que se conoce como etiquetas. En la imagen, las puedes ver señaladas.

Explicaci_n.jpg

Las etiquetas

Como todo lenguaje, el HTML tiene unas reglas muy específicas para que pueda funcionar correctamente. Las principales son:
– Todas las etiquetas van entre < y >. Ejemplo: .
– Todas las etiquetas tienen una apertura y un cierre. El cierre es la misma etiqueta de apertura con una barra / añadida después de <. Ejemplo: (apertura), (cierre).
– Cada etiqueta tiene una función.
– Las etiquetas afectan a lo que hay entre la apertura y el cierre. Ejemplo </em></strong> Título de la página <strong><em>
– No importa si las escribimos en mayúsculas o en minúsculas. Sin embargo, por convención siempre se suelen escribir en minúsculas.

Las_etiquetas.jpg

Explicación de cada una de las etiquetas

  • html es una de las etiquetas principales. Sirve para indicarle al navegador que todo lo que encuentre entre la apertura y el cierre debe leerlo como lenguaje HTML. Es muy importante. Por eso se pone la apertura al inicio del documento y el cierre al final: para que afecte a todo el contenido del archivo.
  • head es una etiqueta que nos sirve para indicar el área de metadatos; es decir, un tipo de información acerca de la página web que no aparecerá dentro de ella pero que sirve para poder catalogarla.
  • title sirve para indicar el título de la página, el cual aparecerá en la pestaña o en la barra de título del navegador. Es importante que todas nuestras páginas tengan título. Es de la poca información que va dentro de la cabecera (head) que el usuario podrá ver.
  • body indica el contenido propiamente dicho de la página, lo que el usuario verá. Todo lo que nosotros queremos que aparezca en la página, debemos ponerlo entre ellas.

Modifica ahora el contenido del archivo tal y como se ve en la imagen, añadiendo lo que puedes ver resaltado para que quede igual. Después, guarda el archivo, ve al navegador y actualiza la página (botón actualizar o F5)

media_1266385110026.jpg

El resultado que obtendrás es este: la página ha cambiado de color de fondo. Esto es debido a lo que hemos añadido: un atributo. En este caso, se trata del atributo bgcolor, que sirve para indicar el color de fondo de la página.

media_1266385276844.jpg

Explicación de los atributos

Los atributos sirven para definir como hace la etiqueta lo que hace. Se escriben siempre dentro de la apertura de la etiqueta, separados un espacio del nombre de ésta.
El atributo va acompañado de su respectivo valor, que se indica colocando el signo igual (=) después del nombre y a continuación el valor entre comillas. Una etiqueta puede tener tantos atributos como se quiera.

Explicacin_de_los_atributos.jpg

¿Qué es eso tan raro que hay en el valor del atributo?

En el atributo bgcolor hemos utilizado un valor escrito en hexadecimal. Normalmente, nosotros utilizamos el sistema decimal para contar: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Sin embargo, el sistema hexadecimal es un sistema de 16 dígitos. Al no haber más que 10 dígitos, se continúa contando con letras: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
En la web, se utiliza el sistema RGB para conseguir los colores; es decir, que mezclando los colores rojo (R), verde (G) y azul (B) se obtienen todos los restantes.
El número que hemos escrito para indicar el valor significa la cantidad que añadimos de cada uno de los tres colores para obtener el que deseamos. La cantidad de cada color se indica por medio de dos dígitos. De esta manera, los dos primeros dígitos sirven para indicar la cantidad de rojo, los dos segundos para indicar la cantidad de verde y los dos terceros para indicar la cantidad de azul.
En el ejemplo, el fondo de la página lo hemos puesto en rojo indicando el valor más alto (f) en los dígitos correspondientes a ese color e indicando en los restantes los valores más bajos (cero).
También se puede poner como valor del atributo el nombre del color en inglés. Entre algunos colores que se aceptan están:

  • Aqua
  • Black
  • Blue
  • Fuchsia
  • Gray
  • Green
  • Lime
  • Maroon
  • Purple
  • Red
  • Silver
  • White
  • Yellow

Sin embargo, es mejor utilizar valores hexadecimales, pues no nos limitan tanto como las palabras.

Qu__es_eso_tan_raro_que_hay_en_el_valor_del_atributo.jpg

Poniendo cada párrafo por separado.

Supongamos que quisieramos poner varias frases una debajo de la otra. La lógica nos dice que deberíamos escribirlas en el código así:

Poniendo_cada_p_rrafo_por_separado..jpg

El problema es que escribiéndolo así, el navegador nos mostraría esto:

media_1266453004318.jpg

La razón es porque el navegador no interpreta los saltos de párrafo (cuando pulsas enter al final de una línea o párrafo para comenzar una nueva). Para él, todo es una sola línea.

Para indicar que cada línea es un párrafo, debemos utilizar la etiqueta

, colocando su apertura y su cierre antes y después de cada línea.

media_1266453331368.jpg

De esta forma, el texto aparecerá tal y como nosotros deseamos:

media_1266453522399.jpg

Aunque no lo creas, ya tienes las bases para crear una página web cualquiera. Lo único que te faltan son algunos detalles de sintaxis y acerca de los atributos. Ah, claro, y una lista de todas las etiquetas y de lo que hacen. Todo eso, se verá desde la próxima entrada.