{"id":11005,"date":"2020-11-24T12:51:31","date_gmt":"2020-11-24T15:51:31","guid":{"rendered":"https:\/\/www.neolo.com\/blog\/?p=11005"},"modified":"2026-01-05T11:40:06","modified_gmt":"2026-01-05T14:40:06","slug":"como-crear-una-pagina-web-desde-cero-en-html","status":"publish","type":"post","link":"https:\/\/www.neolo.com\/blog\/como-crear-una-pagina-web-desde-cero-en-html.php","title":{"rendered":"C\u00f3mo hacer una p\u00e1gina web en HTML desde cero (2026)"},"content":{"rendered":"Tiempo de lectura:<\/span> 9<\/span> minutos<\/span><\/span>\n\n\n

\u00bfQuieres saber c\u00f3mo crear una p\u00e1gina web en HTML<\/strong>? \u00bfTe interesa conocer los c\u00f3digos HTML para una web completa, con ejemplos? Has llegado al lugar indicado.<\/p>\n\n\n\n

Todos los sitios web est\u00e1n hechos en HTML, pero la mayor\u00eda de las webs hoy en d\u00eda se desarrollan con herramientas que crean el HTML por nosotros autom\u00e1ticamente, como por ejemplo WordPress<\/a>. Entonces, para crear una p\u00e1gina web hoy en d\u00eda no es necesario saber HTML<\/strong>, solo saber c\u00f3mo usar estas herramientas.<\/p>\n\n\n\n

Si deseas desarrollar un sitio web interesante y diferente, probablemente tendr\u00e1s que hacer ajustes y comprender c\u00f3mo funciona la estructura detr\u00e1s de \u00e9l. Es decir, saber c\u00f3mo funcionan las etiquetas HTML<\/strong>, y otras herramientas como CSS y quiz\u00e1s tambi\u00e9n JavaScript.<\/p>\n\n\n\n

En esta nota veremos c\u00f3mo se puede comenzar a desarrollar un sitio web utilizando c\u00f3digos simples.<\/p>\n\n\n\n

\n\n\n\n

\u00bfBuscas hacerte conocer o vender de forma profesional en Internet?<\/strong><\/p>\n\n\n\n

Neolo te ayuda a crear tu sitio web o tienda online sin comisiones por venta.<\/strong><\/p>\n\n\n\n

\n
CONOCER M\u00c1S<\/strong><\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n

\u00bfQu\u00e9 es HTML?<\/h2>\n\n\n
\n
\"p\u00e1gina<\/figure><\/div>\n\n\n

HTML (HyperText Markup Language) no es un lenguaje de programaci\u00f3n, sino un lenguaje de marcado. Esto significa que no podemos usar HTML para crear una funcionalidad din\u00e1mica. Sin embargo, HTML permite organizar y dar formato a documentos<\/strong>, de manera similar a lo que hacemos en los editores de texto, como Microsoft Word.<\/p>\n\n\n\n

HTML es un lenguaje de marcado de hipertexto que se utiliza para estructurar un documento o una p\u00e1gina para la web<\/strong>. Es decir, al visualizar una p\u00e1gina en Internet, ver\u00e1s la representaci\u00f3n del c\u00f3digo creado en HTML junto con otros lenguajes.<\/p>\n\n\n\n

En otras palabras, el lenguaje HTML nos permite crear c\u00f3digo que ser\u00e1 renderizado por los navegadores. Por lo tanto, el resultado de esta representaci\u00f3n es lo que se mostrar\u00e1 al usuario. De esta forma, todas las p\u00e1ginas a las que accedes en Internet son c\u00f3digo escrito en lenguaje de m\u00e1quina<\/strong>. Los pilares b\u00e1sicos del desarrollo web Front End son HTML, CSS y JavaScript.<\/p>\n\n\n\n

HTML se utiliza para marcar los elementos de la p\u00e1gina, es decir, para estructurar la p\u00e1gina. CSS nos permite aplicar estilos a elementos a trav\u00e9s del estilo en cascada. Es decir, con CSS tenemos el control y modificamos la presentaci\u00f3n visual de la p\u00e1gina<\/strong>. JavaScript, por su parte, es un lenguaje de programaci\u00f3n que le permite agregar interacci\u00f3n dentro de tu sitio web. Por lo tanto, si deseas crear cualquier sitio web, es muy importante conocer al menos HTML b\u00e1sico.<\/p>\n\n\n\n

Actualmente, HTML se encuentra en la versi\u00f3n HTML5 y est\u00e1 estandarizado por el W3C (World Wide Web Consortium), una organizaci\u00f3n internacional responsable de establecer est\u00e1ndares para Internet, como XML, CSS y SOAP.<\/p>\n\n\n\n

\u00bfC\u00f3mo funciona una p\u00e1gina web HTML?<\/h2>\n\n\n\n
\"etiquetas<\/figure>\n\n\n\n

Un documento HTML no es m\u00e1s que un documento que contiene la extensi\u00f3n .html o .htm. Desde este documento, el navegador lee el archivo y procesa su contenido para que el usuario final pueda verlo. Por lo tanto, los archivos .html o .htm se pueden ver en cualquier navegador<\/strong> (como Google Chrome, Opera, Safari, Mozilla Firefox, etc.).<\/p>\n\n\n\n

En general, un sitio web consta de varias p\u00e1ginas HTML, por ejemplo: un sitio web que contiene tres p\u00e1ginas (una p\u00e1gina de inicio, una p\u00e1gina de contacto y una p\u00e1gina de producto) recibir\u00e1 al menos tres documentos .html distintos, uno para cada p\u00e1gina del sitio web<\/a>.<\/p>\n\n\n\n

Dentro de este documento, se escriben varias l\u00edneas de c\u00f3digos de marcado, es decir, elementos de HTML<\/strong>. Estos elementos se dividen entre etiquetas HTML y su contenido.<\/p>\n\n\n\n

Para crear o editar un documento HTML, el \u00fanico recurso que necesitas es un editor de texto, como el propio bloc de notas. Sin embargo, para el desarrollo se recomienda utilizar editores especializados<\/a>, como Sublime Text, Notepad ++, Visual Studio Code<\/strong>, entre otros. Por lo tanto, comprueba qu\u00e9 editor de texto se adapta mejor a tus necesidades y util\u00edzalo para crear tus c\u00f3digos. Tambi\u00e9n recomendamos Code Pen<\/a>, una herramienta completa para probar c\u00f3digos HTML, CSS y JavaScript directamente desde el navegador.<\/p>\n\n\n\n

Cada p\u00e1gina consta de una serie de etiquetas (tambi\u00e9n llamadas elementos) que pueden considerarse los componentes b\u00e1sicos de las p\u00e1ginas. Por tanto, estos bloques son la forma en que HTML marca el contenido, creando su jerarqu\u00eda y estructura, dividido en secciones, p\u00e1rrafos, encabezados y otros.<\/p>\n\n\n\n

Etiquetas HTML<\/h2>\n\n\n\n

Las etiquetas son parte de los elementos de HTML. Se utilizan para informar al navegador sobre la estructura del sitio web. En otras palabras: al escribir c\u00f3digo HTML, las etiquetas ser\u00e1n interpretadas por el navegador, produciendo as\u00ed <\/strong>la estructura y el contenido visual del sitio web<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

La principal caracter\u00edstica de las etiquetas es que siempre est\u00e1n dentro de los signos \u201cmayor que\u201d y \u201cmenor que\u201d, es decir: <>.<\/p>\n\n\n\n

Las etiquetas HTML se dividen en dos tipos: las que necesitan cerrarse y las que no necesitan cerrarse. Las etiquetas que necesitan cerrarse tienen la sintaxis <tag> … <\/tag>, mientras que las que no necesitan cerrarse tienen la estructura <tag\/>.<\/p>\n\n\n\n

Adem\u00e1s, una misma etiqueta puede recibir uno o m\u00e1s atributos, los cuales tendr\u00e1n un valor que cambie su estructura o funcionalidad. Los atributos no son m\u00e1s que propiedades capaces de modificar y personalizar la funcionalidad de una etiqueta. Por tanto, podemos utilizar varios atributos, como ancho, alto, entre otros. Con la versi\u00f3n HTML5<\/strong>, buena parte de los atributos de estilo ya no se utilizan, sino que se estilizan a trav\u00e9s de CSS.<\/p>\n\n\n\n

Estructura b\u00e1sica de un documento HTML<\/h2>\n\n\n\n

La estructura b\u00e1sica de un documento HTML<\/strong>, es decir, una p\u00e1gina web HTML, se realiza de la siguiente manera:<\/p>\n\n\n\n

<!DOCTYPE html><\/p>\n\n\n\n

<html><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

    <meta charset = \u00abutf-8\u00bb><\/p>\n\n\n\n

    <title> <\/title><\/p>\n\n\n\n

<\/head><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

<\/html><\/p>\n\n\n\n

A partir de este c\u00f3digo, podemos desarrollar toda nuestra p\u00e1gina, estructurando como necesitemos. Pero primero, es bueno comprender lo que se est\u00e1 haciendo hasta ahora:<\/p>\n\n\n\n

<!DOCTYPE html>: la declaraci\u00f3n de tipo de documento le dice al navegador que se est\u00e1 utilizando el lenguaje HTML. Hoy en d\u00eda, el doctype es necesario solo para garantizar que el documento se comporte correctamente.<\/p>\n\n\n\n

<html> <\/html>: el elemento <html> envuelve todo el contenido de la p\u00e1gina HTML.<\/p>\n\n\n\n

<head> <\/head>: el elemento <head> es el lugar donde agregar\u00e1s todos los elementos que deseas incluir en la p\u00e1gina pero que no se deben representar. Entre ellos, podemos utilizar los metadatos, el t\u00edtulo, las etiquetas <link> para agregar hojas de estilo, entre otros.<\/p>\n\n\n\n

<meta charset = \u201dutf-8 \u2033>: este elemento de metadatos se usa para definir el conjunto de caracteres que su documento debe usar para utf-8.<\/p>\n\n\n\n

<title> <\/title>: el elemento <title> se utiliza para definir el t\u00edtulo de su p\u00e1gina. Entonces, aqu\u00ed es donde define el t\u00edtulo que se muestra en la pesta\u00f1a del navegador.<\/p>\n\n\n\n

<body> <\/body> – Finalmente, este elemento contendr\u00e1 todos los elementos que ser\u00e1n representados por el navegador, es decir, el cuerpo completo de su p\u00e1gina HTML.<\/p>\n\n\n\n

\n

Lectura recomendad: 11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (con ejemplos)<\/a><\/p>\n<\/blockquote>\n\n\n\n

Etiquetas m\u00e1s importantes para HTML b\u00e1sico<\/h2>\n\n\n\n

Actualmente, en HTML5, ya es posible encontrar m\u00e1s de 140 etiquetas HTML. Sin embargo, la mayor\u00eda de estos no se utilizan mucho, y en el desarrollo de una p\u00e1gina normalmente encontraremos las mismas etiquetas que se utilizan siempre. Estas son las etiquetas m\u00e1s utilizadas e importantes para dominar el HTML b\u00e1sico<\/strong>:<\/p>\n\n\n\n

<style> <\/style> Inserta un c\u00f3digo CSS en el documento HTML.<\/p>\n\n\n\n

<script> <\/script> Introduce c\u00f3digo de secuencia de comandos, como JavaScript, en el documento HTML.<\/p>\n\n\n\n

<link \/> Le permite vincular a documentos locales o globales, como fuentes u hojas de estilo.<\/p>\n\n\n\n

<meta \/> Le permite incluir metadatos en la p\u00e1gina.<\/p>\n\n\n\n

<h1> <\/h1>, <h2> <\/h2>, <h3> <\/h3>, <h4> <\/h4>, <h5> <\/h5>, <h6> <\/h6> Etiquetas para definir un t\u00edtulo y subt\u00edtulos, que van del 1 al 6, siendo h1 el t\u00edtulo m\u00e1s importante y h6 el menos importante.<\/p>\n\n\n\n

<p> <\/p> Etiqueta para definir un p\u00e1rrafo.<\/p>\n\n\n\n

<span> <\/span> Define un intervalo.<\/p>\n\n\n\n

<br\/> Realiza un salto de l\u00ednea.<\/p>\n\n\n\n

<a> <\/a> La etiqueta de enlace, junto al atributo href= \u201d\u2026\u201d, es responsable de la funci\u00f3n principal de la web.<\/p>\n\n\n\n

<header> <\/header> Define una etiqueta de encabezado estructural y sem\u00e1ntica.<\/p>\n\n\n\n

<section> <\/section> Define una secci\u00f3n: etiqueta estructural y sem\u00e1ntica.<\/p>\n\n\n\n

<article> <\/article> Define un art\u00edculo: etiqueta estructural y sem\u00e1ntica.<\/p>\n\n\n\n

<div> <\/div> Define una divisi\u00f3n de etiqueta estructural.<\/p>\n\n\n\n

<footer> <\/footer> Define un pie de p\u00e1gina: etiqueta estructural y sem\u00e1ntica.<\/p>\n\n\n\n

<nav> <\/nav> Define un \u00e1rea de navegaci\u00f3n (como men\u00fas): etiqueta estructural y sem\u00e1ntica.<\/p>\n\n\n\n

<table> <\/table> Define una tabla.<\/p>\n\n\n\n

<tr> <\/tr> Define una fila de la tabla.<\/p>\n\n\n\n

<td> <\/td> Define una celda de tabla.<\/p>\n\n\n\n

<ol> <\/ol> Define una lista ordenada.<\/p>\n\n\n\n

<ul> <\/ul> Define una lista desordenada.<\/p>\n\n\n\n

<li> <\/li> Define el elemento en una lista.<\/p>\n\n\n\n

<form> <\/form> Define un formulario.<\/p>\n\n\n\n

<input> Define los campos del formulario.<\/p>\n\n\n\n

<textarea> <\/textarea> Define un \u00e1rea para que el usuario escriba texto.<\/p>\n\n\n\n

<button> <\/button> Define un bot\u00f3n.<\/p>\n\n\n\n

<img \/> Le permite insertar una imagen en su documento.<\/p>\n\n\n\n

<iframe> <\/iframe> Define un marco con contenido de otra p\u00e1gina.<\/p>\n\n\n\n

<video> <\/video> Define un campo de video.<\/p>\n\n\n\n

\u00bfC\u00f3mo crear una p\u00e1gina web en HTML?<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Si quieres crear una p\u00e1gina web en HTML, el primer paso es crear una carpeta donde guardar\u00e1s la p\u00e1gina en tu computadora y asignarle un nombre: ejemplo1.<\/p>\n\n\n\n

Puedes hacer una p\u00e1gina web HTML en el Bloc de Notas, por ejemplo. Aqu\u00ed est\u00e1 un ejemplo de la codificaci\u00f3n:<\/p>\n\n\n\n

<!DOCTYPE html><\/p>\n\n\n\n

  <html lang=\u00bbes\u00bb><\/p>\n\n\n\n

<head><\/p>\n\n\n\n

  <title> Ejemplo de la p\u00e1gina 01 <\/title><\/p>\n\n\n\n

  <meta charset = \u00abutf-8\u00bb><\/p>\n\n\n\n

  <link rel = \u00abstylesheet\u00bb type = \u00abtext \/ css\u00bb href = \u00abstyle.css\u00bb><\/p>\n\n\n\n

  <\/head><\/p>\n\n\n\n

<body><\/p>\n\n\n\n

<section id=\u00bbgeneral\u00bb><\/p>\n\n\n\n

<header id=\u00bbbannerGeneral\u00bb><\/p>\n\n\n\n

  <h1> Aqu\u00ed se ubicar\u00e1 el banner <\/h1><\/p>\n\n\n\n

  <\/header> <! – final del banner del encabezado general -><\/p>\n\n\n\n

<nav id = \u00abencabezado\u00bb><\/p>\n\n\n\n

  <h2> Aqu\u00ed se ubicar\u00e1 el men\u00fa <\/h2><\/p>\n\n\n\n

  <\/nav> <! – final nav encabezado -><\/p>\n\n\n\n

<article id = \u00abcontenido\u00bb><\/p>\n\n\n\n

  <h3> Aqu\u00ed estar\u00e1 el contenido de la p\u00e1gina <\/h3><\/p>\n\n\n\n

  <\/article> <! – fin del contenido -><\/p>\n\n\n\n

<aside id = \u00absidebar\u00bb><\/p>\n\n\n\n

  <h4> Aqu\u00ed se ubicar\u00e1 la barra lateral <\/h4><\/p>\n\n\n\n

  <\/aside> <! – final del sidebar -><\/p>\n\n\n\n

<footer id = \u00abfooter\u00bb><\/p>\n\n\n\n

  <h2> Aqu\u00ed se ubicar\u00e1 el pie de p\u00e1gina <\/h2><\/p>\n\n\n\n

  <\/footer> <! – final del pie de p\u00e1gina -><\/p>\n\n\n\n

<\/section> <! – final de la secci\u00f3n general -><\/p>\n\n\n\n

<\/body><\/p>\n\n\n\n

  <\/html><\/p>\n\n\n\n

As\u00ed se ver\u00e1 en tu p\u00e1gina web en el Bloc de Notas<\/strong>:<\/p>\n\n\n

\n
\"\"
C\u00f3digo HTML<\/figcaption><\/figure><\/div>\n\n\n

Despu\u00e9s, guardar el archivo en la opci\u00f3n Guardar como:<\/p>\n\n\n

\n
\"\"
Guardar el archivo<\/figcaption><\/figure><\/div>\n\n\n

Debes asignar un nombre<\/strong>, en este caso: index.html y seleccionando la opci\u00f3n Todos los archivos<\/strong> (All Files).<\/p>\n\n\n

\n
\"\"
Asignar nombre y tipo de archivo<\/figcaption><\/figure><\/div>\n\n\n

Una vez que est\u00e1 guardado el archivo, puedes abrirlo y ya aparecer\u00e1 la estructura de tu p\u00e1gina web<\/strong>. <\/p>\n\n\n

\n
\"\"
Estructura de la p\u00e1gina web<\/figcaption><\/figure><\/div>\n\n\n

Desde ah\u00ed se puede seguir editando el dise\u00f1o y agregando toda la informaci\u00f3n que desees.<\/p>\n\n\n\n

\n