[vc_row][vc_column][vc_column_text]
Conceptos básicos HTML para páginas web
Hoy dedicaremos este post a entender un poco más el lenguaje materno de los navegadores web. El Hyper-Text Markup Lenguage, Lenguaje de Marcas de Hipertexto o HTML es el lenguaje que se utiliza para crear y poder dar un formato a un sitio web. Aprender a hacer uso de este lenguaje de programación te ayudará a construir una página web completa y optimizada, estructurando los textos en base a las etiquetas y los atributos de estas. Para que puedas practicar a la vez que lees este post, puedes hacer uso de un visualizador HTML. ¡Vamos allá!
Las etiquetas
Esta es la base de todo, pues el sistema de etiquetas en serie o tags son las que incluirán instrucciones que los navegadores entenderán como texto, hipervínculos, imágenes… generalmente irán emparejadas, pues necesitarán un <inicio> y un </cierre> para que el navegador entienda que la orden para esa acción ha terminado. Una orden sin esos símbolos o etiquetas no será traducida por el navegador como una orden.
Con esto, ya podemos profundizar un poco más:
La estructura básica HTML
Cualquier página web contendrá 3 partes principales compuestas por: encabezado <head>, título <title> y cuerpo <body>.
Además, no deberás olvidar incluir el tipo de documento o <!doctype html> para que tu navegador web pueda determinar de qué manera interpretar el documento y reconocer cada norma que irás dándole a través de las ya mencionadas etiquetas.
El encabezado o <head>
Esta etiqueta contiene toda la información del funcionamiento del sitio, es una parte muy importante, pero estará encriptada, es decir, todo lo que indiques en el encabezado no aparecerá en la página web. Aquí incluirás aquellas etiquetas que describirán tu página y su funcionamiento y que te ayudarán en el posicionamiento SEO (título, idioma… los llamados metadatos)
El título o <title> y los subtítulos
Existen hasta 6 tipos de título que pueden ser utilizados que van desde la etiqueta número 1 <h1>, que será la más grande, a la número 6 <h6>, que será la más pequeña. Vamos a ver un ejemplo del esqueleto de tu web en formato HTML con lo que tenemos hasta ahora:
<html>
<head>
<title>Estamos viendo un ejemplo</title>
</head>
<body>
<h1>Este será el título 1</h1>
<h2>Este será el título 2</h2>
<h3>Este será el título 3</h3>
</body>
<html>
Y en tu página web estarás viendo lo siguiente:
Este será el título 1
Este será el título 2
Este será el título 3
Como ves, el encabezado contiene la frase “Estamos viendo un ejemplo” pero no aparecerá en tu página porque es la parte no visible.
El cuerpo o <body>
Esta etiqueta es la que contendrá todos los elementos individuales de tu sitio: textos, las imágenes, <img>, vídeos, <video>…y todo aquello que tenga que ver con tu web. Estos son los denominados atributos.
Las enfatizaciones o <strong>
Para resaltar palabras en un texto web se hace uso de la etiqueta <strong>. Si lo que quieres es resaltar una palabra concreta de un texto, deberás introducir elementos dentro de elementos, lo que se denomina anidamiento. Deberás tener cuidado con esto, pues las etiquetas deberán abrirse y cerrarse ordenadamente. Por ejemplo:
<p>Wellaggio es tu <strong>agencia de diseño web</strong>de confianza.</p>
Lo que se traducirá en tu web como: Wellaggio es tu agencia de diseño web de confianza.
Fíjate bien en las aperturas y cierres de cada etiqueta.
Los párrafos <p> y saltos de línea <br>
Estas etiquetas te ayudarán a esponjar tus textos y hacerlos más legibles. Los párrafos irán delimitados con las etiquetas <p> y </p>, pero si dentro del párrafo quieres realizar un salto en el mismo párrafo (lo que conocemos como intro en Word, por ejemplo) utilizarás la etiqueta <br>.
de esta manera, si los incluyéramos en el ejemplo anterior, verías algo así:
<p><h1>Este será el título 1</h1></p>
<p><h2>Este será el título 2</h2><br>
<p><h3>Este será el título 3</h3></p>
Este será el título 1
Este será el título 2
Este será el título 3
Las listas <li> ordenadas <ul> y desordenadas <ol>
Existen más tipos de listas, pero las más comunes en HTML son las ordenadas y las desordenadas.
- En las listas ordenadas <ol> (ordered list) el orden sí es importante, por lo que se mostrará una lista numerada en tu web.
- En las listas desordenadas <ul> (unordered list), el orden de los ítems no es relevante, por lo que se mostrará como el siguiente ejemplo:
Wellagio no es solo diseño web, también trabajamos: marketing online, posicionamiento SEO y diseño de creación de contenidos.
<p> Wellagio, no es solo diseño web, también trabajamos:</p>
<ul>
<li> marketing online </li>
<li> posicionamiento SEO </li>
<li> diseño de creación de contenidos </li>
</ul>
Que se verá de la siguiente forma en tu web:
Wellagio, no es solo diseño web, también trabajamos:
- marketing online
- posicionamiento SEO
- diseño de creación de contenidos
El estilo del contenido o <style>
Mediante esta etiqueta podrás definir el estilo del contenido de tu sitio en términos de color, tamaño de fuente, tipografía… tan solo tienes que añadir el color y el número de fuente en el párrafo
<p>style=»color:yellow; font-size:50px»>Wellaggio</p>
Para obtener el siguiente resultado:
Wellaggio
Desde ahora y con las pautas básicas de HTML, podrás comprender mejor aquellos sitios web y su diseño. ¿Sabías que si tecleas Ctrl+U en cualquier sitio web puedes ver el código de fuente de esa página? ¡Adelante, echa un vistazo! Tanto si hemos despertado tu curiosidad como si no, podemos ayudarte en el diseño de tu web en cualquier formato en tiempo récord. Te informamos sin compromiso.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_video link=»https://youtu.be/jq73yQ3d8X4″][/vc_column][/vc_row]