Cómo crear una página web en HTML: una guía para desarrolladores novatos
El HTML es la base de todo lo que sucede dentro de tu navegador. Con su ayuda, el navegador comprende cómo mostrar los títulos, imágenes y tablas. Es por eso que saber HTML es fundamental para todo aquel que quiera dedicarse al desarrollo web. En este artículo te explicamos todo lo que debes saber de inicio si quieres crear sitios web con este lenguaje de marcado.
¿Qué es HTML?
HTML es un lenguaje de marcado de hipertexto (Hypertext Markup Language) que funciona como un conjunto de comandos que le indican a nuestros navegadores cómo dibujar páginas web. Junto con CSS (hojas de estilo en cascada) son la base del código. Por medio de HTML, el desarrollador ensambla el “esqueleto”, para luego dar estilo a la página con CSS y finalmente ponerla en marcha mediante programación en JavaScript.
¿Por qué se necesita HTML?
HTML es el lenguaje principal en el que se escriben la mayoría de los documentos en Internet. Es probable que cada párrafo de texto en Internet y cada enlace en el que hayas hecho clic esté envuelto en etiquetas (concepto que explicaremos más adelante). En resumen: este es el lenguaje en el que está escrito todo en Internet.
Al utilizar HTML, el navegador realiza una solicitud a la dirección ingresada por el usuario, y recibe un archivo en formato “.html”. El navegador reconoce el código, selecciona las marcas que le son familiares y entiende qué escribir en palabras. De esta forma, el código HTML del archivo se convierte en objetos visuales.
HTML permite a los desarrolladores crear la estructura de código de la página mediante comandos. Estos pueden ser para agregar títulos y subtítulos, crear una lista, insertar una tabla o una imagen, dibujar un elemento, entre miles de posibilidades.
(Para ver por ti mismo cómo se ve una página web por dentro, puedes obtener su código HTML desde tu laptop o computadora haciendo clic derecho en cualquier lugar de la página y seleccionando la opción “Ver el código fuente de la página”. Aunque los comandos pueden variar de acuerdo al navegador, en casi todos los navegadores es así.)
Si conoces HTML, serás capaz de crear sitios web por tu cuenta, diseñar hermosos artículos y documentos en Internet e incluso conseguir un trabajo como desarrollador web. De modo que antes de comenzar una carrera en desarrollo web, es necesario dominar los conceptos básicos de HTML que te permitirán crear sitios web sencillos.
Conceptos básicos de marcado en HTML
HTML opera como un conjunto de comandos que, tras su procesamiento, se convierten en una representación visual. Como pudimos observar en las imágenes anteriores, las páginas HTML tienen una estructura de árbol, donde un comando es una etiqueta que consta de un nombre colocado entre los corchetes angulares (<h1>).
En un lenguaje de marcado, una etiqueta es un elemento que especifica qué tipo de contenido se presentará. Las etiquetas le dicen al navegador exactamente cómo mostrar tal o cual texto, dónde colocar una imagen o qué tipo de botón crear.
Las etiquetas suelen venir en pares: una etiqueta de apertura (<h1>) y una etiqueta de cierre (</h1>). Debido a una etiqueta abierta o cerrada incorrectamente, el diseño puede romperse.
En ocasiones, las etiquetas se acompañan de atributos. Estos son características adicionales que definen las propiedades de un elemento. Por ejemplo, una etiqueta <img> (que sirve para insertar una imagen en el documento) se acompaña del atributo “src”, que indica la ruta a la imagen, y se codifica de la siguiente manera: <img src=”fotografia.jpg”>.
Etiquetas
Un sitio web en HTML simple consta de tres etiquetas:
<html> es la etiqueta raíz del documento y el contenedor de la página web. Aparece en el documento inmediatamente después de “DOCTYPE”, que es la designación del tipo de documento.
<head> especifica los datos básicos relacionados con la generación de la página web (encabezado, estilos, scripts, metaetiquetas, etc.).
<body> es la etiqueta de la página principal que almacena el contenido de la página. Representa el “cuerpo” del documento, dentro del cual se colocan las etiquetas restantes.
Veamos las otras etiquetas más utilizadas para crear un sitio web en HTML.
<header> para el encabezado del sitio.
<footer> para el pié de página.
<main> contiene las secciones principales del documento, excepto <header> y <footer>.
<title> establece el título inmediato de la página. Esta es la única etiqueta contenida en el encabezado que aparece en la página.
<h1> define la parte introductoria del sitio/título de la página. Los subtítulos se establecen mediante etiquetas H2-H6.
<p1> se utiliza para designar los párrafos de texto de la página.
<img> ayuda a agregar una imagen en la página web. Se tiene que escribir dentro la dirección que conduce a la imagen, mediante el atributo “src”: <img src=”dirección”>.
<section> define una sección en el sitio web.
DOCTYPE: designación del tipo de documento
La etiqueta <!DOCTYPE html> es algo similar al título de un artículo. Aparece al principio del documento HTML, como declaración del tipo de documento. De esta forma, el navegador sabe en qué idioma y con qué tecnologías fue creada la página. Si el documento no especifica DOCTYPE, es posible que la página web en HTML no se muestre correctamente.
Listas en HTML
Las listas permiten organizar los datos, ya sea ordenados (numerados) o desordenados (con viñetas). Las listas ordenadas se crean con las etiquetas <ol> (lista ordenada) y <li> (elemento de la lista:
<ol>
<li>Elemento #1 de la lista</li>
<li>Elemento #2 de la lista</li>
<li>Elemento #3 de la lista</li>
</ol>
Para crear una lista con viñetas, o desordenada, utilizamos las etiquetas <ul> y <li>:
<ul>
<li>Elemento de la lista con marcador</li>
<li>Otro elemento con marcador</li>
</ul>
Estructura de un sitio web en HTML
Es necesario señalar que para crear una página web en HTML no necesitas conexión a Internet o un tipo específico de computadora. Solo necesitas seleccionar un editor de texto y cualquier navegador de internet para probar tu página.
La manera más sencilla de crear una página web en HTML es la siguiente:
Crea una carpeta HTML en tu escritorio. Esto para garantizar que los comandos estén estructurados y contenidos en un solo lugar.
Crea un archivo en un editor de texto (un buen programa para escribir código en HTML es Sublime Text) y guardar en la carpeta como archivo de página web (.html).
Elabora una estructura de página web en HTML simple en el editor de texto. También puedes copiar y pegar una desde otra página HTML, y sólo editar los campos. A continuación te dejamos un ejemplo que puedes usar.
<html>
<head>
<title>
Título de la página
</title>
</head>
<body>
<h1> Encabezado de la página</h1>
Texto dentro de la página web
</body>
</html>
En el editor de texto se vería así:
Al final, no olvides guardar los cambios en el documento.
Abre el archivo en cualquier navegador. Puedes elegir cualquier navegador para hacerlo, simplemente haz clic derecho sobre tu archivo .html, selecciona la opción de “Abrir con” y elige cualquier navegador de la lista para abrir tu archivo.
Como resultado, cuando abras el documento .html en el navegador, deberías ver una página como esta:
Para editar tu archivo .html (y dado que ahora se abrirá con el navegador de forma predeterminada) simplemente haz clic derecho sobre el archivo, selecciona la opción “Abrir con” y ábrelo en el editor de texto.
Sin embargo, esto es solo la estructura básica de una página web en HTML. Como lenguaje de marcado de hipertexto, HTML te permite hacer muchas cosas, como insertar imágenes, crear enlaces, etc. Pero esto podrás lograrlo solo con la práctica.
HTML como lenguaje de programación
En realidad, las capacidades de HTML son muy limitadas. No todos los expertos lo consideran un lenguaje de programación porque es básicamente el código que ayuda al navegador a mostrar correctamente el contenido de una página web.
HTML es imprescindible para el desarrollo de un producto web. Solo después de haber practicado y aprendido los conceptos básicos de HTML, podrás pasar a lenguajes de programación complejos.
En el curso de desarrollo web de TripleTen aprendes cómo hacer una página web en HTML desde cualquier editor de texto. En él aprenderás a crear tus propios proyectos web para trabajar como desarrollador junior en solo diez meses. Inscríbete hoy y conviértete en un desarrollador web en menos de un año; verás que desde las primeras lecciones sabrás cómo hacer una página web en HTML.
Ventajas y desventajas de HTML
Para que un desarrollador entienda si necesitará HTML en su trabajo, deberá evaluar todos los pros y los contras de este lenguaje de marcado:
| Ventajas | Desventajas |
| Es apropiado para casi todos los navegadores y admisible para todas las computadoras. Puedes crear una página web en HTML en cualquier editor de texto. Es de uso gratuito. Tiene una sintaxis simple y comprensible. Es adecuado para desarrolladores de todos los niveles: desde principiantes hasta profesionales. Una página web en HTML estática (es decir, que no necesita acceder a bases de datos) se carga rápidamente porque pesa menos y no contiene código basura. HTML se integra con otros lenguajes de programación. HTML es capaz de cerrar etiquetas por sí mismo y omitir errores de sintaxis (a diferencia de JavaScript, por ejemplo). La página no fallará, pero se cargará con distorsiones impredecibles. | Todos los cambios recurrentes en el sitio deben realizarse manualmente (acciones como reemplazar los elementos del menú y de navegación en cada página). Y lo mismo para crear páginas nuevas; incluso si la estructura se repite, deberás crear cada página por separado. Para crear una página web en HTML que se abra rápidamente en cualquier dispositivo no basta con usar la etiqueta <div> en todas partes. Por ejemplo, lo que parece una tabla en el diseño, no siempre resulta serlo. Para hacer esto desde HTML, necesitarás conocer su semántica y saber usar las etiquetas correctamente. Si deseas que tu sitio web se vea bonito y responda a las acciones de los usuario, también deberás aprender CSS y JavaScript. |
Sin embargo, la mayor ventaja de HTML es que es muy fácil de aprender y empezar a utilizar. Si conoces las etiquetas HTML básicas, podrás:
crear tus propias páginas y sitios completos;
controlar la apariencia de tus materiales cuando se publican en diferentes sitios;
utilizar el diseño o fragmentos de código de alguien y utilizarlos en tus sitios;
evitar algunos muros de pago y bloquear el acceso a contenido restringido.
Comienza tu carrera como desarrollador web hoy mismo y aprende a escribir código HTML con el bootcamp de desarrollo web de TripleTen.