¿Qué está envuelto en el Lenguaje Marcado de Hipertexto?

Contenido

1. ¿En qué consiste el HTML?

2. Estructura de un elemento HTML.

3. Anidamiento de elementos.

4. Los elementos vacíos.

5. Estructura de los documentos HTML.

6. Imágenes.

7. Marcado de texto.

7.1 Los encabezados.

7.2 Los párrafos.

7.3 Las listas.

8. Los vínculos.

Los desarrolladores se valen de HTML para la creación de páginas web, los programas que se utilizan producen páginas escritas en HTML y los navegadores más reconocidos como Google Chrome, Opera y Mozila Firefox presentan las páginas web luego de realizar una lectura e interpretación de su contenido HTML.

Esto nos dice algo muy obvio, el Lenguaje Marcado de Hipertexto es esencial en el desarrollo web.

HTML viene de sus siglas en inglés Hypertext Markup Language. El diseño de una página web en HTML es algo muy fácil de aprender inclusive para aquellas que personas que se confiesan no técnicas y a la cual puedes sacarle mucho provecho.

¿En qué consiste el HTML?

Puede decirse que no es exactamente un lenguaje de programación, sino un lenguaje marcado que establece la estructura de un contenido. Es un conjunto de elemento que el usuario utiliza para encerrar diversas partes del contenido para que luzcan y tengan un determinado comportamiento.

Las etiquetas de encierro pueden convertir una palabra, una imagen o un hipervínculo a otro sitio. Pueden cambiarse palabras a cursivas, engrandecer o empequeñecer.

Pongamos por caso un ejemplo, la oración "Mi perro está muy feliz".

Si quisieras establecer que se trata de un párrafo, solo debes encerrar el texto con la etiqueta <p> y quedaría de la siguiente forma:

<p>Mi perro está muy feliz</p>

Estructura de un elemento HTML

Los componentes principales son los siguientes:

1. Etiqueta de apertura: Se trata del nombre del elemento, el cual es p, y está encerrado por paréntesis angulares (<>) de apertura y cierre. Es para establecer donde comienza a tener efecto el elemento, es decir, donde comienza el párrafo.

2. Etiqueta de cierre: Similar a la etiqueta de apertura, solo que incluye una barra de cierre (/) previa al nombre de la etiqueta. Muestra donde finaliza el elemento, en otras palabras donde concluye el párrafo.

3. Contenido: Se trata del contenido del elemento que en este instante es únicamente texto.

4. El elemento: es la suma de la etiqueta de apertura, la etiqueta de cierre y el contenido.

Los atributos poseen datos adicionales vinculados al elemento, por lo que de seguro no quieres que aparezca en el contenido real del elemento. El atributo debe contar siempre con lo siguiente:

1. Espacio entre este y el nombre del elemento, o del atributo anterior, asumiendo que el elemento ya tiene uno o más elementos.

2. El nombre del atributo acompañado del signo (=).

3. Comillas de apertura y de cierre, con el valor del atributo encerrado.

"Recuerda que los atributos siempre deben incluirse en la etiqueta de apertura de un elemento, nunca deben estar incluidos en la de cierre".

Los atributos con valores simples y que no contengan espacios en blanco ASCII o estos caracteres " ' `= < > pueden seguir sin entrecomillado, pero es recomendable entrecomillar cada valor del atributo, debido a que esto resulta en que el código sea de mayor consistencia y compresibilidad.

Pongamos un ejemplo para entender mejor la idea:

<p class="editor-note">Mi perro está muy feliz</p>

En este caso el atributo sería: class="editor-note"

Anidamientos de elementos

Es posible colocar elementos dentro de otros elementos, y es a esto a lo que se le conoce como anidamiento. En caso de que quieras resaltar una palabra del texto, como por ejemplo la palabra "muy", puedes encerrarla dentro de un elemento <strong>. Lo que significa que esa palabra debe enfatizarse.

Por ejemplo: <p> Mi perro está <strong>muy<strong> feliz. </p>

Trata de garantizar que los elementos se aniden apropiadamente. Cada elemento debería de abrirse y cerrarse como debe ser, para que puedan encontrarse con claridad dentro o fuera el uno del otro.

En caso de que estos se hallen solapados, el navegador web intentará adivinar lo tratas de decir, pero tal vez consigas resultados que no esperes.

Los elementos vacíos

Ciertos elementos no tienen contenido y se les conocen como "elementos vacíos". Como por ejemplo el elemento <img> de nuestro HTML.

<img src="images/firefox-icon.png" alt="Mi imagen de prueba">

Tiene dos atributos, pero no cuenta con etiqueta de cierre </img> ni tampoco contenido encerrado. Esto se debe a que un elemento de imagen no encierra contenido al cual afectar. El objetivo es desplegar una imagen en la página HTML en el sitio que aparece.

Estructura de los documentos HTML

Los elementos HTML individuales no son de mucha utilidad por si solos, ya que estos se combinan para poder crear una página HTML completa.

1. <DOCTYPE html> Es el tipo de documento, de hecho, es un preámbulo necesario. En los años 90 los tipos de documento se comportaban como vínculos en relación con un grupo de reglas que el código HTML de la página debería de seguir para poder considerarse bueno.

Esto significaba la comprobación automática de errores y otras cosas muy útiles. En la actualidad se considera como algo pasado de moda, pero que debe incluirse para que las cosas funcionen apropiadamente.

2. <html></html> Se encarga de encerrar todo el contenido de la página completa y en ocasiones se le conoce como elemento raíz.

3. <head></head> Su función es contener todo aquello que deseas incluir en la página HTML y que no es contenido que pueda verse por los que visitan la página.

Incluye palabras clave, o sea keywords, una descripción de la página que deseas que esté visible en los resultados de búsqueda, código CSS para que el contenido tenga estilo, declaraciones del juego de caracteres, entre otros.

4. <meta charset=utf-8"> Tiene como función establecer el juego de caracteres que tu documento va a usar en utf-8, envuelve casi todos los caracteres pertenecientes a todos los idiomas del hombre.

Realmente, puede gestionar cualquier contenido de texto que quieras incluir. Por eso, no hay motivos para que no se establezca y es capaz de impedir inconvenientes futuros.

5. <title></title> Sirve para establecer el título que llevará tu página, que es el mismo título que se ve en la pestaña y en la barra de título del navegador cuando la página se carga, y se utiliza para la descripción de la página cuando se añade a los marcadores o a los favoritos.

6. <body></body> Sirve para encerrar todo el contenido que quieres mostrar a los visitantes de tu sitio web, pudiera ser texto, imagen, video, juegos, audios, etc.

Imágenes

Su trabajo es la incrustación de imágenes en una página, en la posición en que esta aparece. Lo hace por medio del atributo src (source) que a su vez contiene la ruta u ubicación del archivo de imagen.

<img src="images/firefox-icon.png" alt="Mi imagen de prueba">

Está incluido el atributo alt que tiene un texto que debería describir la imagen y que aquellos usuarios que no puedan ver la imagen puedan acceder, por las siguientes razones:

Son completamente ciegos o tiene problemas de visión.

Estos usuarios suelen utilizar herramientas conocidas como "Lectores de pantalla", que leen el texto que se contiene en el atributo alt.

Se ha producido cierto error en el código evitando que cierta imagen se cargue.

Cambia en forma deliberada la ubicación dentro del atributo src para que no sea correcto. Al momento de guardar y recargar la página, debería mostrarse algo como esto en la pantalla:

Mi página de prueba.

La frase clave del texto alt de arriba es "texto que debería describir la imagen". Este texto debe darle al lector los datos necesarios para que este pueda tener una idea de lo que se ve en la imagen. Así que el texto actual "Mi imagen de prueba" no es nada bueno.

Marcado de texto

1. Los encabezados.

Hacen posible la especificación de algunas partes del contenido. Tal como un libro tiene un título principal, y que al mismo tiempo puede tener títulos por cada capítulo y subtítulos dentro de estos. De igual modo, un documento HTML puede tenerlos.

En HTML existen seis niveles, van desde <h1> hasta <h6> aunque por lo general solo se utilizan 3 o 4.

2. Los párrafos.

El elemento <p> se usa para encerrar párrafos de texto. Normalmente se usa para el marcado de contenido de texto regular.

3. Las listas.

Estas son utilizadas en el contenido web y HTML posee elementos especiales para ellas. Este marcado de listas es realizado en por lo menos dos elementos. Hay dos clases de listas: las desordenadas <ul> y las ordenadas <ol>

Vínculos

También conocidos como enlaces, estos tienen mucha relevancia, ya que convierten la web en lo que realmente es. Para implementarlo solo requieres del vínculo <a>.