En este nuevo apunte voy a estudiar los fundamentos de HTML.
¿Por qué aprender sobre HTML ahora? Bueno, realmente no hay ninguna mala oportunidad para empezar a aprender algo. Todo es nuevo cuándo no conocemos cómo funciona.
Pero principalmente, encuentro dos ventajas para estudiar un poco de HTML:
1- No tiene muchos requerimientos para empezar. Necesito solamente tener un editor de texto sin formato para crear el documento y un navegador de internet para mostrarme los resultados. Solo con eso ya puedo empezar a crear cosas nuevas.
2- Incluso si parece difícil al principio, muchas partes de sus sintaxis se repiten una y otra vez. Luego de un poco de práctica es sencillo entender lo que estamos haciendo incluso antes de revisarlo en el navegador.
Y otro detalle importante: puedo avanzar en la creación de un nuevo sitio web trabajando completamente dentro de mi computadora. De este modo puedo estudiar y entender cómo funciona desde un directorio. Luego si quiero puedo publicar la página en un servidor para acceder a la misma desde internet.
Por eso sin más excusas, lo siguiente es…
¿Qué es HTML?
Las siglas HTML quieren decir:
HTML = Hypertext markup language
De esto necesito saber que “Hypertext” viene por la idea de un “texto con links”. Un texto que se conecta con otros textos.
Y la parte de “markup language” me habla de un lenguaje por anotaciones. Se trata de una forma de decirle al navegador, por medio de etiquetas o “tags”, qué es lo que contiene cada parte de la página.
Por ejemplo estas etiquetas crean una estructura donde un a parte de la página web es el título (heading) y otra parte es un párrafo (paragraphs).
Este lenguaje lleva varias revisiones desde su creación. La versión HTML 5.4 es la más actual al momento de escribir todo esto.
El HTML se encarga de la estructura estática de la página web. Cuáles son los títulos, los bloques de texto, y ese tipo de cosas.
Y para cerrar este apartado, el desarrollo web en HTML por lo general tiene otros dos lenguajes que lo complementan:
– El lenguaje CSS maneja el estilo del sitio. Por ejemplo tipografía, colores, columnas y ese tipo de cosas.
– Javascript se encarga de la parte interactiva del sitio, la parte dinámica y su funcionalidad.
Cómo es la estructura de HTML
Para entender mejor todo esto, nada mejor que empezar trabajando con un ejemplo.
Primero necesito crear un nuevo documento. Puedo usar cualquier editor de texto. Pero si quiero tener todos los lujos, como el de “autocompletar” código, lo mejor va a ser usar alguna alternativa como Codium o algún editor al estilo de Neovim que pueda expandirse con plugins.
Lo que sigue es crear el documento, al que tengo que darle una extensión “.html” para guardarlo.
Y para mi suerte, todo archivo HTML tiene la misma forma:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Qué significa DOCTYPE en HTML
La primera linea de todo documento html se conoce como “doctype”.
<!DOCTYPE html>
Este marcación “doctype” identifica el tipo de archivo.
Qué es la etiqueta HTML
La etiqueta es la raíz del documento.
<html> ...código...</html>
Todo lo que se encuentra entre esos dos tags es el código del documento. Este tag siempre esta presente, abre y cierra el archivo.
A veces puede aparecer como:
<html lang="es"> ...código... </html>
En este caso, el atributo “lang” identifica el idioma en el que se encuentra escrita la página, por ejemplo “es” por “español”.
En su interior, la etiqueta “html” contienen otros dos tags: Head y Body.
Qué es la etiqueta Head en HTML
En el interior de las etiquetas Head:
<head> ...código...</head>
Se puede encontrar información que no se muestra directamente en el navegador, pero si es información que le dice al navegador cómo tiene que interpretar la página.
Esta información incluye metadatos o links a hojas de estilo en CSS.
Entre esos tags que puedo encontrar dentro de “Head”, existe por ejemplo “Title” que es una etiqueta obligatoria del sitio.
<title> Nombre del sitio</title>
El nombre incluido dentro de las etiquetas “Title” aparece por ejemplo arriba en la barra del navegador, cuando visitamos la página web.
Otra etiqueta que aparece dentro de head es una etiqueta llamada “meta”, se trata de un tag que no tiene cierre. Se refiere a la codificación del archivo:
<meta charset="UTF-8">
Lo que hace es indicar cómo se van a codificar los caracteres, unificando estándares entre los distintos navegadores.
La etiqueta Body en HTML
Dentro de las etiquetas:
<body> </body>
Se incluye todos los elementos que van a mostrarse en mi sitio.
Esta etiqueta comienza directamente luego del cierre de “head”. Y le sigue luego el cierre de la etiqueta html.
Sintaxis de HTML: ultra resumen
Según lo que pude entender explicando el ejemplo anterior, en un documento HTML voy a encontrar diferentes contenidos que se encuentran acompañados de etiquetas.
La sintaxis de este lenguaje se maneja agregando la información acompañada de “tags” o etiquetas.
Básicamente en este primer momento tengo que recordar que existen dos tipos de etiquetas. Un tipo de etiquetas se cierra y otro tipo no. Las etiquetas que no se cierran se consideran etiquetas vacías.
Etiquetas que abren y cierran:
Un ejemplo de este tipo de tag puede ser la etiqueta de párrafo:
<p> este es un párrafo </p>
Se puede notar que la etiqueta “<p>” abre el contenido y “</p>” lo cierra. Ya había encontrado este tipo de tag antes, por ejemplo al hablar de “body”. Cuando una etiqueta se abre, siempre tiene que cerrarse en algún punto.
Las etiquetas ya vienen establecidas, no es posible crearlas. No es necesario recordar todas y cada una de las etiquetas, algunas se utilizan muchas veces y otras solo dependiendo de un caso en particular.
Otros detalle importante es que las etiquetas se escriben siempre en minúsculas.
Y también es bueno recordar que las etiquetas pueden “anidarse”, pueden existir una dentro de otra. Esto también pude notarlo antes, por ejemplo:
<head>
<title> Nombre del sitio</title>
</head>
Etiquetas vacías:
Este tipo de tag no tiene cierre. Se conocen también como “Empty Tags” o “self-closing” (auto cierre).
No hay contenido en el interior de estas etiquetas, por lo que no es necesario cerrarlas. Pero si pueden tener atributos.
Un ejemplo de esto puede ser:
<link rel="stylesheet" href="styles.css">
En este caso la etiqueta “link” contiene una referencia a un archivo externo, una hoja con estilos CSS. La etiqueta no tiene contenido, por lo que no tiene otro tag de cierre.
Lo que si tiene el ejemplo son dos atributos: el atributo “rel” especifica que se trata de una hoja de estilos y el atributo “href” especifica la dirección al nombre del archivo.
Otro ejemplo de etiqueta vacía puede ser:
<meta charset="UTF-8">
Un etiqueta que ya revisé con anterioridad. Hay varias etiquetas de esta forma, tampoco es necesario conocerlas a todas, solamente alcanza con saber como es su forma.
Atributos en HTML:
Los atributos ( o “Attributes” en inglés) son una forma de agregarle datos extra a un tag.
Modifican la forma en que un navegador interpreta el contenido. El nombre de los atributos se escriben entre comillas. Y tampoco puedo inventar nada en esto, cada tipo de etiqueta tiene sus propios tipos de atributos preestablecidos.
Para revisar un ejemplo que ya escribí antes:
<meta charset="UTF-8">
En este caso tengo la etiqueta meta, que es un tag vacío. Aquí tengo el atributo charset, que indica “UTF-8” como el tipo de codificación unicode que utiliza la página.
Hay también más ejemplos de atributos, que voy a ir encontrando con el desarrollo de mi sitio web.
Comentarios en HTML:
Igual que en otros lenguajes de programación, HTML me permite dejar un mensaje por fuera del código.
<!-- contenido -->
Estos mensajes no son para que los interprete el navegador, son para que puedan leerlos las personas que revisan el código. Por ejemplo:
<!-- Dentro de las etiquetas "Head" van los metadatos -->
Revisando mi primer sitio web en HTML:
Si todo va bien, ya tengo creado un documento, digamos que se llama “inicio.html” por ponerle algún nombre.
Y si sumo todo lo anterior, el interior del documento se parece a esto:
<!DOCTYPE html>
<html>
<head>
<!-- Dentro de la etiqueta "Head" van los metadatos -->
<meta charset="UTF-8">
<title>Mi sitio de ejemplo</title>
</head>
<body>
<!-- Dentro de la etiqueta "body" se muestra el contenido que aparece en la página -->
<h1>Este es un nuevo blog</h1>
<p>Algo de información para una página web que recien comienza.</p>
</body>
</html>
Lo que puedo hacer ahora es abrir este archivo con un navegador, por ejemplo con la opción “abrir con” o lanzando el archivo directamente sobre la barra de herramientas del navegador.
Haciendo esto voy a poder ver el sitio web en su estado actual.
Recursos para saber más sobre HTML
No voy a sorprender a nadie si digo que realmente existen millones de cosas sobre este tema para leer y estudiar. Después de todo lo de HTML no es un asunto precisamente nuevo.
¿Dónde puedo encontrar un texto verdaderamente completo para seguir aprendiendo?
Existe una documentación oficial de HTML. Esa documentación la mantiene actualziada una organización internacional llamada World Wide Web Consortium (W3C).
Se puede acceder a ese material siguiendo este enlace.
Así que como siempre, si en algún momento mis apuntes se vuelven confusos o insuficientes, lo mejor es referirse a la documentación oficial.
Describiendo la forma del HTML
Según entiendo la idea es darle un sentido a todo lo que se encuentra en una la página web por medio de etiquetas.
Utilizando HTML le asigno etiquetas a las distintas partes de un sitio. Estas etiquetas le permiten a los navegadores y buscadores entender la página, pero también la vuelven legible para cualquier humano que revise este código.
Es por eso que también se dice que HTML es un “lenguaje estructurado”. Las etiquetas marcan la estructura que cumple cada elemento.
Luego de señalar cada parte con uno de estos tags, puedes agregarle estilo de diseño con CSS (“Hojas de estilo en cadena).
Agrupando los elementos comunes del sitio
Todo este tópico aparece muchas veces mencionado por el nombre en inglés de “Common semantic grouping elements”. Esto es en castellano “Agrupación semántica de elementos comunes”.
En lo que a mi respecta, ni siquiera se que quiere decir “semántico”. En un rápido viaje al diccionario, al parecer quiere decir algo como “estudiar el significado de las palabras”.
Una vez más, lo más importante para recordar parece ser esto: Las etiquetas no “acomodan” las partes del sitio en su lugar ni les dan estilo, pero si les dan estructura. Enseña que es cada cosa.
Ya en el anterior texto revisé algunas características de las etiquetas. Algunas tienen que ser abiertas y cerradas, mientras que otras permanecen siempre abiertas.
Algunas de las etiquetas más comunes
Existen varias etiquetas, pero estas son unas de las más usadas:
La etiqueta “Header”
Según la documentación de (W3C):
The header element represents a group of introductory or navigational aids.manual html w3c
Esto es que “el elemento header representa un grupo de ayudas introductorias o de navegación”.
La misma se encuentra de esta forma:
<header> </header>
En teoría puedo pensar que, al poder ser traducida la palabra “header” como una “cabecera”, esta etiqueta tiene que aparecer al principio de las distintas páginas de un sitio web.
Y la mayoría de las veces ocurre de esa forma, repitiéndose más o menos igual en cada página. Contiene cosas como el logo y los títulos, se supone que el header se ocupa de nuclear ese tipo de información introductoria para la navegación.
Sin embargo tengo que recordar que las etiquetas no se refieren a la posición de algo en el diseño. Puede existir más de un header en una determinada página, puede aparecer incluso usado dentro de otras etiquetas siempre que cumpla esa función de albergar datos introductorios.
Otra cosa que necesito tener en mente: aunque el nombre es similar, <head> y <header> no son lo mismo en el contexto del sito.
Dentro de la etiqueta <head> va información que no es contenido del documento, como por ejemplo metadatos. Pero lo que va dentro de <header> si es parte de lo que se enseña en la página.
La etiqueta “nav” aparece de esta forma
<nav> </nav>
En inglés se conoce por “”navigation bar” y es el menú de navegación de nuestra página.
Por lo general va dentro de la etiqueta “header”, y del mismo modo la mayoría de las veces se repite constante en toda la página web.
Siendo el menú de de navegación, contiene los links para ir saltando entre partes del sitio. Por ejemplo, la página de “información”, “contacto” y similares. Aunque esto depende de lo que necesitemos en cada caso, puede ser links a nuestro gusto.
<footer></footer>
Se trata del pie de página, siendo de esta forma por lo general va al final del sitio. Y de forma similar a “Header”, aparece casi igual en todas las partes del sitio.
Contiene cosas como links importantes, mapa del sitio, datos de contacto, metadata y ese tipo de cosas.
Main
La documentación dice:
The main element represents the dominant contents of the document.
manual w3c
Este elemento representa a los contenidos dominantes del documento.
Aparece de la siguiente forma:
<main> </main>
Y en “main” aparece el contenido principal del sitio, que es diferente en cada caso. Es único por cada página.
Para simplificarlo, dicho de otro modo es todo lo que no forma parte ni esta incluido en otras etiquetas como <header>, <nav> o <footer>.
La etiqueta “Article”
Aparece de esta forma:
<article></article>
Es una etiqueta que encierra contenido que tiene sentido por su propia cuenta, como por ejemplo todo el texto dentro de una publicación específica de un blog.
Y el manual dice:
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
manual w3c
Es una etiqueta que encierra contenido que tiene sentido por su propia cuenta, como por ejemplo todo el texto dentro de una publicación específica de un blog. Pero puede representar también algo como un widget en el sitio.
La etiqueta “Section”
<section> </section>
La etiqueta “section” (sección) agrupa contenido relacionado. ¿Dónde usarla? Por ejemplo en una parte secundaria de un página individual o para crear un “bloque de sentido”.
El manual dice:
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, news items, and contact information.manual w3c
Esto es que un ejemplo de sección pueden ser los capítulos de un libro. O también pueden ser secciones las partes de la página de inicio de un sitio web.
La etiqueta Paragraph
Es la etiqueta “parrafo” y aparece de la siguiente forma:
<p> Esto es un párrafo.</p>
Puede tener texto o imágenes. Y es una etiqueta que se repite todas las veces que sea necesario, por cada párrafo en el sitio.
Etiqueta Headings en HTML
La etiqueta para los títulos. Puede aparecer por ejemplo de algunas de estas formas:
<h1> Primer titulo</h1>
<h2>Segundo subtitulo</h2>
Se trata de distintos niveles de subtítulos, ordenados en importancia decreciente desde el h1 hasta el h6.
No es lo mismo que el “font size” o el tamaño de la letra. No se utilizan para darle estilo a un texto, pero si para marcar la importancia de algo dentro de la estructura.
Se puede notar eso dentro de este mismo apunte por ejemplo, cada vez que me refiero a una nueva etiqueta uso un título de nivel “h3”.
Por ejemplo, este que sigue es un “heading nivel 3”:
Atributos de imagen en HTML
Las imágenes (Images) tienen una etiqueta y dos atributos.
Su etiqueta no tiene elemento de cierre, y es:
<img>
Los atributo son:
- -src: el camino (source) relativo o absoluto al directorio donde se encuentra la imagen.
- – alt: El texto alternativo que acompaña. Sirve por si la misma no llega a cargarse o para que pueda mencionarla un lector de pantalla.
Ejemplo:
<img src="lapiz.jpg" alt="un lapiz de dibujo">
Cómo crear Listas en HTML:
Se trata de una forma de ordenar la información. Pueden ser listas ordenadas o desordenadas.
Para una lista ordenada tengo las etiquetas <ol> y <li> de la siguiente manera:
<ol> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
Para armar una lista sin orden tengo las etiquetas <ul> y <li> de esta forma:
<ul> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Texto preformateado
<pre> </pre>
También puede aparecer llamada como “preformated text”, sirve para preservar los espacios en blanco o evitar cualquier otro tipo de interpretación de texto enriquecido.
Yo por lo general uso esta etiqueta para marcar los ejemplos en el blog, de esta forma:
Esto es el ejemplo.
Etiquetas de énfasis
Estas etiquetas se utilizan para destacar palabras dentro de párrafos. Sirve para decirle al navegador si un texto es en itálica o en negrita.
Para itálica se utiliza la etiqueta <em>:
<em> </em>
La etiqueta <strong> es para texto en negrita:
<strong> </strong>
Cómo agregar links en HTML
La etiqueta para marcar los links en un sitio web es:
<a> </a>.
Pero su utilización tiene algunas particularidades. Necesita del atributo “href” para poder funcionar.
<a href="http://www.sitioweb.com/">Hacer click en este texto</a>
El atributo href enseña el destino del link: puede tratarse de una URL absoluta, URL relativa o un anchor.
El atributo Target
Este atributo se desprende directamente de lo anterior. Señala si un link tiene que abrirse en una ventana nueva o en la ventana actual.
Si lo le agrego este atributo, el link se abre en la ventana actual. Para una nueva ventana utilizo “_blank” de esta forma:
<a href="http://www.sitioweb.com/" target="_blank">Hacer click en este texto</a>
Conclusión:
Con esto le doy un cierre al apunte sobre fundamentos de HTML.
Es cierto que es solamente un muestrario de algunas etiquetas que se utilizan con mucha frecuencia en un sitio web. Las etiquetas se pueden probar por separado, pero ganan mayor valor cuando las vemos interactuando al mismo tiempo en un sitio.
Cualquier error que encuentres en este texto, por favor avisame para que pueda corregirlo.
La seguimos en el siguiente apunte.
