Las páginas web son herramientas de divulgación de información con múltiples fines: desde brindar conocimiento, hasta generar oportunidades de negocio. Sea cual sea el propósito de la tuya, todas ellas tienen en común un lenguaje con el cual son construidas: el HTML.
En este post te mostraremos que no es un lenguaje de programación y es bastante fácil de entenderlo. No te pierdas este artículo y aprende que construir una página web es más sencillo de lo que parece.
Estos son los temas que trataremos en este post:
- ¿Qué es y para qué sirve el HTML?
- ¿Cuáles son los elementos principales del HTML?
- ¿Cómo es la estructura básica de un documento de este tipo?
- ¿Cómo crear tu primer código en HTML?
- ¿Cuál es la relación entre el HTML, CSS y el JavaScript?
- ¿Qué es y para qué sirve el HTML?
¿Qué es y para qué sirve el HTML?
HTML son las siglas en inglés para Hypertext Markup Language, que se traduce como lenguaje de marcación de hipertexto.
A pesar de tener un nombre complicado, el HTML no es más que un lenguaje usado para crear páginas webs por medio de marcadores (tags) y atributos, que definen cómo el contenido va a ser presentado en un navegador web.
Seguro te estarás preguntando en este punto: ¿qué es un hipertexto? Este concepto hace referencia a un texto con bloques interconectados, que contienen palabras, imágenes, sonidos, tablas y otros elementos.
Además, pueden tener rutas que apuntan a otros hipertextos, rutas conocidas como los hipervínculos, hyperlinks o links.
La creación de HTML es atribuida a Tim Berners-Lee, uno de los inventores del World Wide Web.
La idea era crear un ambiente en que los científicos tuvieran la posibilidad de divulgar sus investigaciones para que sus colegas los consultaran con relativa facilidad. Berners-Lee acabó creando el HTML como un lenguaje estándar para elaborar esos documentos.
Desde su implementación, en los inicios de la década de los 90, el HTML pasó por diversas mejoras que lo convierten hoy en la base para blogs, ecommerces, redes sociales y todo tipo de páginas accesibles desde un navegador web.
¿Cuáles son los elementos principales del HTML?
Ahora que sabes lo que es el HTML, vamos a ver los principales marcadores que definen las funciones de los elementos que forman parte de la página.
Pero primero es necesario recordar que estos tags son identificadas con un signo de menor que (<), seguido del nombre de la etiqueta y un signo mayor que (>). La mayoría de los tags deben ser cerradas, lo que se hace con un barra (/) entre el signo "<" y el nombre de la etiqueta.
Tranquilo, todo estará más claro con los siguientes ejemplos:
Párrafo (<p>)
El tag <p> debe abrirse y cerrarse para definir un párrafo.
<p>Este es un párrafo en HTML.</p>
Encabezado (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
Las heading tags o las etiquetas de cabecera, ayudan a crear una jerarquía entre las partes del texto, que lo separa en secciones. El <h1> es el encabezado más relevante, seguido del <h2>, <h3> y así sucesivamente al <h6>, de menor importancia.
<h1>Título principal</h1>
<p>Párrafo de introducción.</p>
<h2>1. Primer intertítulo</h2>
<p>Párrafo de la primera sección.</p>
<p>Otro párrafo de la primera sección.</p>
<h2>2. Segundo intertítulo</h2>
<p>Párrafo de la segunda sección.</p>
<p>Otro párrafo de la segunda sección.</p>
<h2>3. Tercer intertítulo</h2>
<p>Párrafo de la tercera sección.</p>
<h3>3.1. Intertítulo dentro da tercera sección</h3>
<p>Parágrafo de la sección 3.1.</p>
<h3>3.2. Otro intertítulo de la tercera sección</h3>
<p>Párrafo de la sección 3.2.</p>
Imagen (<img>)
No es necesario cerrar el tag de la imagen, ya que su contenido se define en la etiqueta con el atributo "src".
<img src="https://rockcontent.com/es/wp-content/uploads/sites/3/2019/09/twitter-cards.png">
Ancla (<a>)
El tag de anclaje define un enlace a otra página. El atributo "href" determina el destino de este link.
<a href="https://rockcontent.com/es/blog/arquitectura-de-la-informacion/">Arquitectura de la Información</a>
Lista de pedidos (<ol>)
Se muestra una lista ordenada con elementos numerados. Cada elemento debe estar etiquetado con el tag <li> (elemento de la lista).
<ol>
<li>SEO</li>
<li>Links patrocinados</li>
<li>Redes sociales</li>
</ol>
Lista desordenada (<ul>)
El tag de lista desordenada muestra los elementos como bulletpoints.
<ul>
<li>Automatización de marketing</li>
<li>Generación de leads</li>
<li>Email marketing</li>
</ul>
Tabla (<table>)
El tag de la tabla muestra información en forma de filas y columnas. Dentro del tag <table>, usamos los tags <tr> para representar las filas, <th> para representar los encabezados y <td> para representar cada celda.
<table>
<tr>
<th>Nombre</th>
<th>Sobrenombre</th>
</tr>
<tr>
<td>Jonah</td>
<td>Berger</td>
</tr>
<tr>
<td>Ann</td>
<td>Handley</td>
</tr>
<tr>
<td>Neil</td>
<td>Patel</td>
</tr>
</table>
Comentario (<! - ->)
Usamos este tag para escribir algún comentario que ayude a comprender el código. Todo lo escrito entre los marcadores <! - -> no se mostrará al usuario.
<p>O HTML es fundamental para quién desee crear un sitio en la web.</p> <!-- Este es un párrafo en HTML -->.
¿Cómo es la estructura básica de un documento HTML?
Hemos visto muchos elementos, pero ahora vamos a saber cómo ponerlos dentro de un código HTML. Al igual que cualquier estándar web, debe seguir algunas reglas para crear estos códigos.
Comenzamos con la declaración <! DOCTYPE html> para informar al navegador web que el documento en cuestión es un HTML.
Luego abrimos un tag <html>, que tendremos que cerrar al final. En su interior agregamos <head>, que debe contener los metadatos de la página (datos sobre datos), como el título que aparecerá en la pestaña del navegador (<title>), llamadas a archivos externos y otras que son cruciales para un trabajo de SEO, como las meta tags.
Es importante incluir la tag <meta charset = ”utf-8 ″> para que el navegador muestre correctamente ciertos caracteres que usamos en español, como los acentos o la virgulilla.
Finalmente, abrimos el tag <body>, donde agregamos la parte del documento HTML que contiene los elementos visibles para el usuario.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Mi primera página</h1>
<p>Mi primer párrafo!</p>
</body>
</html>
¿Cómo crear tu primer código HTML?
Para crear código HTML, solo necesitas de un editor de texto simple (bloc de notas, por ejemplo) y un navegador web (Chrome, Opera, Firefox, Safari, entre otros) para visualizar cómo se verá tu página.
Los desarrolladores profesionales usan editores de código más especializados, pero inicialmente podemos seguir con un editor simple.
El primer paso es crear un nuevo archivo y guardarlo con la extensión .html. Para este tutorial podemos nombrarlo index.html.
Luego pega el código que mostramos en la sección anterior con la estructura básica de un HTML y guarda el archivo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Mi primera página</h1>
<p>Mi primer párrafo!</p>
</body>
</html>
¡Ahora solo abre el archivo en tu navegador favorito y habrás terminado de crear tu primer código HTML!
¿Cuál es la relación entre HTML, CSS y JavaScript?
Ya entendemos que HTML es la estructura de una página web, pero, ¿cómo formatear el estilo de sus elementos?
Para configurar fuentes, colores, alineación, entre otros, la forma como se presentarán los componentes HTML, usamos el CSS, que significa Cascading Style Sheets u hojas de estilo en cascada.
Aunque es posible describir los estilos dentro del propio código HTML, se recomienda que el HTML realice una llamada a uno o más archivos CSS individuales. Esto hace que el código sea más organizado ya que aísla la estructura del estilo.
El CSS se basa en selectores y declaraciones con propiedades y valores. Es decir, elegimos los elementos HTML a los que queremos aplicar los estilos y declaramos cuáles serán las propiedades de estos componentes.
A continuación, un ejemplo donde el selector de párrafo (p), con una declaración que define el color, la familia de fuentes y el tamaño de fuente.
p {
color: white;
font-family: verdana;
font-size: 15px;
}
También hay una tercera etapa para el desarrollo de páginas web, dedicada a crear comportamientos dinámicos: JavaScript. Esto, que es realmente un lenguaje de programación — que no debe confundirse con Java — permite una mayor interactividad de la página y una mejor experiencia del usuario.
Con él, podemos elegir qué sucede cuando el visitante hace clic en cierta parte de la página, presiona una tecla, desplaza la página y más. Las aplicaciones son numerosas y dependen básicamente de la creatividad del desarrollador.
Incluso JavaScript es ideal para aquellos que desean aprender a programar, ya que la sintaxis del lenguaje es bastante fácil. Además, es posible realizar pruebas inmediatas viendo el resultado de su código directamente en el navegador web.
¿Ves cómo HTML es más simple de lo que parece? Entonces continúa tus estudios, porque a pesar de la simplicidad, este es un tema muy extenso, con muchas otras tags y atributos que no cabrían en una sola publicación.
¡Esperamos que este material te haya dejado claro todo sobre el HTML! Por otra parte, ¿quieres seguir aprendiendo y descubrir sobre otros lenguajes de marcación? Si es así tienes que entrar a este link para ir al artículo sobre el lenguaje de marcado XML.
