Creación de una Página Web Básica con HTML

Un sitio web funciona correctamente gracias a la participación de diversos tipos de archivos. Por lo tanto, antes de empezar a crear nuestro primer sitio web debemos repasar un concepto fundamental relacionado con la estructura de los archivos.

Aunque en esta clase generaremos un solo archivo para lanzar nuestro primer sitio web, a lo largo del curso necesitarás crear otros tipos de archivos para su correcto funcionamiento.

Estructura de un archivo

Se trata de uno de los conceptos más fáciles de asimilar en el universo de los sistemas operativos. Nada más debes recordar alguno de tantos archivos que has creado desde que usas un computador.

Es muy probable que hayas pensado que carta.docx o dibujo.jpg eran, simplemente, nombres de archivos. Resulta que en esa descripción observamos la estructura de un archivo.

Nombre

Debes tener claro que nombre es, apenas, una parte de la estructura de un archivo.

Los nombres son personalizados y descriptivos. Solo en algunos casos deberás asignar nombres predefinidos para que sean leídos automáticamente, como, por ejemplo, cuando produces un sitio web. La página principal, por defecto, debe llamarse index.html.

Al asignar nombres a los archivos, debemos tener en cuenta una recomendación imprescindible como hispanohablantes: no utilizar caracteres especiales como tildes, comas o la eñe. Tampoco se deben emplear símbolos como &, $, %, !, o ". Por ejemplo, si debes crear una presentación en slides para una fecha especial, es mejor que definas el nombre de la siguiente manera: diaDelNino.pptx

Tal como puedes darte cuenta en el ejemplo anterior, no uso ni tilde ni la eñe. Además, también debiste haber notado que no he dejado ningún espacio en el medio. En cambio, he utilizado letras mayúsculas.

Punto (.)

Por más diminuto que nos parezca, el punto es un elemento importante dentro de la estructura de un archivo.

Este carácter está presente en las estructuras de archivos de todos los sistemas operativos. Tanto en Windows como en Mac, Linux, incluso, en Android se usa el punto después del nombre y antes de la extensión.

Extensión

La extensión de un archivo es el componente que nos permite distinguirlo antes de ejecutarlo. Por ejemplo, si la extensión es pdf o mp4, sabemos que el primero es un documento y que el segundo es un video. Gracias a la extensión conocemos anticipadamente qué aplicación ejecutará el archivo.

Para el propósito del presente curso, tendremos en cuenta que un navegador como Chrome lee, entre otros archivos, aquellos cuya extensión es html. Por esta razón, el primer archivo que crearemos para lanzar un sitio web será uno que termine en .html. Pero, antes de todo, es necesario conocer acerca de esta tecnología.

¿Qué es HTML?

HTML es un lenguaje de marcado o de etiquetas. Gracias a las etiquetas escritas dentro del archivo .html, puedes ver esta página tal y como está. Las etiquetas html son, algo así, como instrucciones que el navegador debe decodificar. Viene del inglés HyperText Markup Language.

Las traducciones al español tienen leves variaciones. Algunos le llaman “lenguaje de etiquetas” o “marcas de hipertexto”. Otros, simplemente, “lenguaje de marcado”. Un archivo con extensión HTML contiene texto plano. HTML no es un archivo de texto enriquecido como los que producimos en editores como Microsoft Word. Al crear un archivo HTML no podemos formatear su texto con subrayado o con negrita o con diferentes colores.

En este punto ya te habrás preguntado, ¿por qué veo este texto en negrita y en cursiva en el navegador que solo lee archivos HTML, los cuales son archivos de texto plano?. No te preocupes que no se trata de un engaño, es una buena pregunta.

La versión actual de HTML incorpora más de un centenar de etiquetas. En este curso utilizaremos algunas de las que más se implementan en un sitio web.

Configurando mi sistema operativo en modo profesional

Ahora que ya sabemos lo importante que son las extensiones, estas deben estar siempre visibles en nuestro sistema operativo. Además, en el entorno de la programación, es una buena práctica tener a la vista las extensiones de los archivos que están en nuestro computador.

Por eso vamos a proceder a realizar la primera actividad de esta clase: activar la función de Mostrar las extensiones de los archivos en tu sistema operativo. Esta es una tarea muy sencilla, aunque varía de acuerdo a la versión de tu sistema operativo. Pero si trabajas en una versión reciente, el proceso es, aún, más sencillo.

Actividad de la clase

Después de que hayas realizado la tarea del paso anterior, realiza lo siguiente:

1. Crea la carpeta programar en el escritorio o en la unidad de tu preferencia y ábrela.
2. Haz clic secundario, selecciona Nuevo, luego Documento de texto. Borra todo el texto que te aparece por defecto, es decir el nombre del archivo, el punto y la extensión. Escribe pagina.html (recuerda que no se deben usar tildes).
3. Haz clic secundario sobre el archivo pagina.html, luego en Abrir con y selecciona Bloc de notas. No debes abrir el archivo haciendo doble clic. Eso lo haremos después. Al hacer doble clic principal, seguramente el archivo lo abra el navegador predeterminado en tu sistema operativo que puede ser Chrome, Edge o Mozilla. En cualquiera de estos solo verás una página en blanco, puesto que todavía no has ingresado contenido al archivo pagina.html.
4. Después de abrir el archivo en el Bloc de notas, escribe las siguientes líneas de código:

<h1>Mi primer sitio web</h1>
Hola <strong>querida</strong> clase

En este ejemplo observa atentamente aquello que está entre los signos de menor que (<) y mayor que (>). Tanto los signos como lo que está dentro de ellos, conforman una etiqueta.

5. Ahora guarda los cambios, vuelve a la carpeta programar y abre el archivo pagina.html haciendo doble clic.

Así como estás viendo tu archivo, ya no en el Bloc de notas, sino en el navegador, es como puedes comprender poco a poco la manera en que funcionan las etiquetas html.

En el navegador no observas los signos de menor que y mayor que ni lo que está dentro de estos. Lo que sí ves es texto que tiene un mayor tamaño que otro. Esto se debe a que la etiqueta h1 viene de Header o título o encabezado. El 1 se relaciona con la jerarquía del título. Si deseas ver subtítulos en tu sitio web, debes insertar la etiqueta h2. Ten en cuenta que html tiene hasta la etiqueta h6.

Continúa viendo la siguiente clase de este curso para que conozcas muchas más etiquetas html incluyendo las que debes insertar obligatoriamente en tu sitio web.

Contribución realizada por Jefferson Benavides