Todo sobre el lenguaje de maquetado HTML

Conoce todo sobre HTML, el lenguaje de maquetado para crear webs, desde los conceptos básicos de html hasta las funciones, programación elemental y etiquetas básicas del conjunto de códigos.

El mundo de la informática es bastante amplio, y cada día va creciendo más, esta es una rama que avanza con la tecnología, hoy en día podemos hacer con ella cosas que no se podían imaginar hace diez años. Si estamos interesados en aprender a programar y hacer todo tipo de cosas geniales, primero, debemos arrancar por lo más básico.

Cuando nos proponemos algo, debemos comenzar por lo mas simple. En el caso de aquellos que se proponen aprender a programar para diseñar sitios web, lo correcto es empezar por HTML. Este es un lenguaje imprescindible para todo programador web.

Aquí, vamos a aprender todo sobre HTML, sus conceptos, etiquetas, funciones y más. Si es primera vez que leemos sobre este lenguaje, no hay de qué preocuparse, es sencillo y fácil de aprender. ¡Síguenos!

Guías y tutoriales de HTML

Ver todos los posts

¿Qué es HTML?

En resumidas palabras, HTML (HyperText Markup Lenguage), son las siglas en español para Lenguaje de Marcado de HiperTexto. Se utiliza para el desarrollo de páginas web, a través de un lenguaje de maquetado que emplea el uso de etiquetas (de allí su nombre).

Pero esto es algo muy general y técnico, no dice mucho sobre que es realmente este lenguaje. Lo primero que debemos saber es que involucra el diseño o la parte visual de una web. Gracias a HTML lo que hacemos es ordenar y distribuir como irán los elementos que conformarán una página, todo esto con el uso de etiquetas.

Con este lenguaje se puede armar el esqueleto de un sitio web, al que luego se le añadirán más cosas para que sea visualmente más atractivo. Y todo esto seria apenas una pequeña definición, ya que actualmente existen varios conceptos básicos de HTML que debemos tener en cuenta para entenderlo mejor, puesto que es un lenguaje con muchos elementos y normas.

Conceptos básicos de HTML

Cuando entremos en el mundo de la programación, más específicamente el de HTML, y decidamos iniciar cursos, ver tutoriales y aprender por nuestra cuenta, vamos a encontrarnos con muchos términos o palabras que pueden hacernos ruido, precisamente porque no sabemos los significados o referencias.

Por ello, vamos a explorar conceptos de HTML en un nivel básico, así podremos entender mejor de que va este lenguaje de programación.

• Partes del sitio web: este se divide en dos partes, que son la Cabecera (Head) y el Cuerpo (Body). En la cabecera irá todo el código que no es visible en el sitio web, pero que igual es importante para añadir funciones y atributos que tendrán peso en la página. Por otro lado, en el cuerpo va toda la parte visible, donde se distribuirán los elementos de la web.
• Títulos: estos son los elementos de la web que marcan cuando se está viendo un título o un apartado distinto al anterior. Hay hasta seis tipos de títulos en HTML, donde 1 es el más grande y 6 el más pequeño. Definir los títulos es algo esencial para el posicionamiento de la página web.
• Párrafos: en ellos se definen bloques enteros de texto, que van separados por lo que se denomina como salto de línea (un espacio en blanco). En ellos se pueden hacer definiciones, dar conceptos y escribir de una forma más libre y corrida.
• Listas: son atributos que se emplean para definir listas y los elementos que las conforman. Pueden usarse de forma ordenada o desordenada, así como para definir conceptos. Con ellas el texto puede adquirir un mejor atractivo visual.
• Tablas: con ellas podemos ordenar elementos dentro de filas y columnas específicas. Se debe tomar en cuenta que estas se crean de izquierda a derecha, empezando por la primera fila de la primera columna. Construirlas no es tan complicado como suena.
• Enlaces: son elementos muy importantes en una página web, ya que permiten acceder a otros sitios, como un complemento de la información que se está dando en el sitio. En ellos se pueden poner otras páginas, enlaces a aplicaciones, música, vídeos e imágenes, incluso a productos para comprar.

Funciones del lenguaje de maquetado

Ya hemos mencionado que este lenguaje se encarga de ordenar y distribuir los elementos de una página web; por tanto, HTML es el código raíz de cualquier sitio web. Con sus etiquetas y atributos podemos armar el esqueleto del sitio, de modo que con ellas seremos capaces de darle la forma que queremos que tenga.

Gracias a sus múltiples funciones, en código raíz podemos agregar de una vez todo lo que sean enlaces, imágenes y vídeos, lo que permite tener un mejor control de algunos elementos visuales de la página. Todo esto claro, hasta que llegue el momento de mejorar con CSS.

Etiquetas básicas de HTML

Un código con este lenguaje alberga muchos tags, como ya hemos mencionado, con este se puede trabajar muchos elementos de un sitio. Algunas de las etiquetas básicas de HTML son:

• <html>: Con ella se indica un documento de tipo HTML.
• <head>: Parte no visible.
• <body>: Es toda la parte visible del código en el sitio web.
• <h1>…<h6>: Se resaltan los títulos y la relevancia de estos.
• <a>: Se usa para insertar enlaces.
• <table>: Es para crear tablas, las conforman las filas <tr> y las columnas <td>.
• <p>: Se definen los párrafos.
• <img>: Con ella se insertan imágenes.
• <ul>: Se crean listas desordenadas, con <li> se definen los elementos.
• <ol>: Para listas ordenadas, con <li> se definen los elementos.
• <b> o <strong>: Resaltar texto en negritas.
• <u>: Para texto subrayado.
• <i> o <em>: Texto en cursiva.

De igual forma con estas etiquetas básicas de html podrás conocer mas detalles acerca de la estructura de una página web, diseño y colores que de seguro te van a gustar.

Programación básica

Para escribir en HTML, solo son necesarias pocas herramientas. Lo primero es un editor de código, si bien el blog de notas de la computadora se puede usar para esto, es mucho mejor hacerlo desde un editor de código.

Dentro de los sistemas de edición de códigos html podemos encontrar los siguientes: Sublime Text 3, Visual Studio Code, Brackets, lo cuales se caracterizan por ser gratuitos y además, son multiplataforma, ágiles, rápidos y muy potentes.

Ahora bien, si lo que quieres es hacer un párrafo con título de nivel 1, esto es lo que debemos escribir:

<h1>Título</h1>
<p>Párrafo</p>
<p>Párrafo</p>

En cambio, para una lista ordenada sería lo siguiente:

<ol>
   <li>Elemento 1</li>
   <li>Element 2</li>
   <li>Elemento 3</li>
</ol>

Ya conocemos algunos conceptos básicos de HTML para entender lo que significa el lenguaje y cómo funciona, ahora solo depende de nosotros estudiar un poco más acerca de las etiquetas básicas, enlaces y rutas de HTML, o ir a cursos, ver tutoriales en YouTube para mejorar la experiencia. ¡Anímate!