Cómo hacer una página web en HTML: Tutorial desde cero

Crear una página web en HTML es algo sorprendentemente fácil de aprender incluso para personas no técnicas y algo a lo que le vas a sacar muchísimo partido, ya sea con webs hechas en HTML puro o con webs basadas en WordPress, Blogger u otros CMS.

cómo crear una pagina web en html

Tanto es así que, en un simple post como éste, ya puedes aprender lo suficiente para hacer cosas realmente interesantes en HTML y eso es precisamente lo que vamos a hacer hoy.

Ahora bien, antes de ponernos con ello, debes preguntarte si crear páginas web en HTML es realmente lo que necesitas.

Me explico: hoy en día hay dos vías de crear una web y sus páginas:

  • La vía artesanal (la "antigua"): componer tu web a base de crear "a mano" el código HTML de cada una de esas páginas de tu web y enlazarlas entre sí.
  • La vía moderna: usar un CMS como, por ejemplo, WordPress, trabajando de manera visual, sin tener que codificar y maquetar el contenido en HTML.

Hoy en día, las webs se hacen prácticamente en un 100% con CMS, la gran mayoría con WordPress, que es la vía que te recomiendo encarecidamente para crear tu web y para la cual puedes encontrar un tutorial muy completo aquí:

Y si prefieres este mismo tutorial en formato post, lo tienes aquí también en ese formato:

crear pagina web wordpress Cómo crear una página web en WordPress

Si quieres aprender paso a paso como crear una página web profesional con WordPress, este post es para ti.

Pero volvamos a la cuestión de fondo: ¿que casi todas las webs se hagan con un CMS quiere decir que no tiene sentido que leas el resto de este post?

Obviamente no. Sigue teniendo muchísimo sentido aprender HTML. Si no, obviamente, no habría escrito este post 🙂

Por eso, si no tenías claro esto que te acabo de explicar, valora primero si crear páginas en HTML es lo más adecuado para tu caso o si te conviene más usar un CMS como WordPress o Joomla.

Por eso, he incluido al final de este post un anexo dedicado a este tema que te ayudará a tomar la decisión correcta (tienes el enlace al final de la tabla de contenidos).

Ahora, centrémonos en el tema principal de este post: cómo crear una página web en HTML.

¿Cómo crear una página web en HTML?

En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro documento con un editor de texto. Consiste en crear un fichero con extensión .html o .htm y editarlo.

En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML, etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son) necesarias para definir la estructura del documento HTML.

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a cómo se trabaja también en un editor como Microsoft Word, por ejemplo.

A partir de aquí, el proceso (que iré desglosando y será lo que aprenderás a lo largo del post) sería:

  1. Aprender el principio fundamental de HTML: crear documentos estructurados con etiquetas.
  2. Elegir el mejor editor para tu caso concreto.
  3. Crear la estructura básica de tu página HTML: la cabecera y el cuerpo.
  4. Crear el contenido y aplicarle formato con las etiquetas HTML: títulos, párrafos de texto, enlaces, imágenes, tablas, audio y vídeo embebido, etc.
  5. Si los necesitas, integrar también los elementos interactivos (formularios).
  6. Implementar, en su caso, en el servidor la lógica para responder a los formularios.
  7. Publicar (hacer visible) la página en Internet o en local.

Un ejemplo minimalista de página, vista como código HTML, no como el resultado final que ser ve en el navegador, sería éste:

como crear una pagina web en html
Ejemplo de página HTML con un conjunto mínimo de elementos.

Y aquí puedes ver el resultado de este código en un navegador web:

ejemplo minimalista web
Ejemplo de una página web trivial y en la que no se ha realizado aún la parte de diseño con CSS.

Las etiquetas básicas en HTML, sus funciones y atributos

Si te has asustado al ver el código del ejemplo anterior, no te preocupes, como verás a continuación, es muy fácil.

¿Qué es el HTML exactamente?

HTML es un lenguaje de marcado que sirve para describir de una manera estructurada mediante etiquetas el contenido de un documento. Esto tiene la gran ventaja de que podemos añadir con ello semántica (significado) al documento que una máquina puede entender.

El estándar actual que rige HTML es la versión HTML 5, aunque muchas webs siguen funcionando con las versiones HTML 4.01 / XHTML, las versiones de “toda la vida” que la versión 5 ha ampliado con nuevas funcionalidades, algunas muy potentes.

De todos modos, como este post es un post de introducción, nos moveremos básicamente dentro de lo que ya existía en la versión 4.01.

No obstante, te daré, por supuesto, referencias de recursos gratuitos para aprender HTML al nivel de profundidad que quieras, incluso a un nivel experto si lo deseas, junto con un macro-ejemplo descargable donde he implementado todo lo que tratamos en este post.

¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML

Esta semántica se consigue mediante el uso de las etiquetas y los atributos.

Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras entre corchetes. Esto son las así llamadas etiquetas HTML.

Estas etiquetas forman una estructura jerárquica, es decir, se pueden anidar entre ellas, salvo la etiqueta especial <!DOCTYPE HTML> en la primera línea de un documento HTML.

Siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra delante del nombre de la etiqueta. Por ejemplo: “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre que delimita el final del contenido etiquetado).

En medio viene un texto u otras etiquetas anidadas que con su contenido. El conjunto de una etiqueta y su contenido se conoce como elemento HTML.

A veces, una etiqueta no tiene contenido en texto como tal (por ejemplo, las etiquetas “meta” del ejemplo). En ese caso, no hace falta usar una etiqueta de cierre.

Accede Gratis a nuestro Curso de Excel para principiantes

Accede a nuestro curso Excel 100% GRATIS:

  • Apto para principiantes: empieza desde cero.
  • Aprenderás todo lo que necesitas para dominar Excel de verdad.
  • Está orientado a aplicarlo en tu trabajo y/o en tu negocio.
  • 30 lecciones en vídeo (5 horas de contenido en total).

¿Qué ganamos con esto?

Conseguimos semántica, es decir, que el contenido tenga sentido para el navegador u otras aplicaciones, siendo el buscador de Google una de las más destacadas.

Por ejemplo: la etiqueta title anterior le dice al navegador que se trata del título de la página, el que va a visualizar en la pestaña en la que tienes abierta esta página dentro del navegador.

Otro ejemplo de aplicación sería cuando Google visita tu web: en este caso el texto etiquetado con la etiqueta title será el que utilice Google como título en sus resultados de búsqueda.

¿Te das cuenta del potencial de poder añadirle semántica a un contenido?

Gracias a ello se pueden hacer cosas como éstas sin las cuales sería imposible imaginarnos la web hoy en día.

El otro concepto fundamental que tienes que tener claro, junto con el concepto de etiqueta, es el concepto de atributo.

Si te fijas, en el caso de las etiquetas meta del ejemplo, éstas, antes del corchete de cierre contienen palabras con un formato de xxx=”yyy”. Esto son los atributos, donde xxx es el nombre del atributo e yyy su valor.

Los atributos son simplemente una manera de añadir más información semántica a una etiqueta.

Esta etiqueta es un buen ejemplo de cómo aprovechar los atributos:

<meta name="description" content="En este post…">

Aquí, con el atributo name estamos diciendo concretamente que se trata de una etiqueta meta que sirve como descripción de la página y que la descripción concreta es la que viene en el atributo “content”.

captura serps meta info
Los resultados de búsqueda de Google son una de las aplicaciones más importantes de las etiquetas

Google usa esto también para sus resultados de búsqueda porque es aquí de dónde saca normalmente la descripción que viene debajo de los títulos de los resultados de cada página que muestra.

Elegir un buen editor para crear páginas HTML

Ahora que ya hemos visto la teoría básica y un pequeño ejemplo concreto, es hora de ponerse manos a la obra. Para ello, lo que necesitas ahora es un editor.

Puedes editar HTML en cualquier editor, incluso en el Notepad de Windows, si me apuras, puesto que, como has podido ver, el código HTML es simple texto.

Sin embargo, no es lo conveniente. Te conviene usar un editor HTML especializado. Así que veamos cuáles hay y cuál de ellos puede ser una buena opción para ti.

Editores HTML gratuitos versus de pago

La primera cuestión es si inclinarte por un editor html gratis o de pago.

La respuesta es simple: salvo que te diques profesionalmente a crear páginas HTML, no le veo sentido a un producto comercial de pago puesto que los editores gratuitos han llegado son más que suficientes para lo que cualquier usuario “normal” pueda necesitar.

Tienes editores HTML gratis y en español de buena calidad que te permiten trabajar tanto de manera visual (conocidos también como “editores html WYSIWYG”), como directamente con el código, incluso editores que te permiten incluir hojas CSS (en el apartado de diseño te explico qué son).

Es decir, tienes todo lo que necesitas en las opciones gratuitas, por tanto, mi consejo es que descartes las opciones de pago.

Editores HTML online

Otra disyuntiva importante es si utilizar un editor HTML online (implementado en una web) o si utilizar un editor descargable para instalarlo en tu equipo. Éstos últimos editores HTML los puedes descargar gratis también, hay muchas opciones.

Aquí la decisión no está tan clara. Es más, puedes usar ambas opciones a la vez. Así que prueba y elige la que más te guste.

Yo te voy a recomendar cuatro opciones:

  1. Notepad++: se trata de un editor HTML gratis para descargar, aunque no es estrictamente un editor HTML, sino un editor que soporta muchos más lenguajes que HTML. Es el que utilizo yo (la captura de arriba es de Notepad++), uno de los más populares, está traducido al español y colorea la sintaxis del HTML, lo cual ayuda muchísimo a evitar errores en la codificación. Su principal pega es que no puedes trabajar de manera visual.
  2. Coda: una alternativa en la línea de Notepad++ (qué sólo funciona con Windows) para el mundo Apple.
  3. El editor online HTML de Quackit: ésta es la alternativa online, también gratis, que uso yo también y sus principales ventajas son el hecho de ser online, crear un código HTML muy limpio y de ser, además, WYSIWYG. Quizás ya no sea el mejor en este momento, es un editor HTML online muy simple, pero personalmente es el que más me gusta, además, tiene los menús también en español. Su principal pega que le veo es que no colorea el HTML.
  4. El editor LiveGap: ésta es una alternativa a Quackit muy interesante ya que tiene las ventajas adicionales de colorear la sintaxis del código y de que estás viendo al mismo tiempo, mientras que editas el código HTML, cómo queda visualmente, y viceversa. No lo he usado extensamente, pero me ha parecido una de las alternativas más interesantes a Quackit que he encontrado. Por supuesto, también es gratis.
captura livegap
El editor LiveGap permite editar el código mientras y ver a la vez el resultado visual.

Editores visuales (editores WYSIWYG)

Aunque este tema ya lo hemos abordado, quería añadir una recomendación muy importante:

Al principio te van a atraer mucho más trabajar de manera visual. Mi consejo es que realmente te fuerces a no usar esta vía y trabajar con el código HTML. Por dos motivos:

  1. A veces los editores visuales fallan y dan problemas. Esto pasa, lamentablemente bastante con el editor visual que incorpora WordPress, por ejemplo. Sabiendo trabajar en HTML resuelves estas cosas en unos segundos cuando, a veces, en el editor visual no hay manera.
  2. Los editores visuales meten con frecuencia “basura” o generan código poco óptimo.

Por tanto, que los editores HTML visuales no sean la excusa perfecta para disuadirte de aprender a trabajar con código HTML “a la antigua usanza”.

Estructura básica de un documento HTML

Empecemos a hablar ahora de las diferentes partes del código de una página en HTML.

Lo primero es la estructura básica de un documento HTML. Hay variantes en cuyos matices no quiero entrar por no dispersarnos, pero para mantener las cosas simples, te recomiendo usar siempre esta plantilla:

<!DOCTYPE HTML>
<html lang="es">
<head>
  <title>Título de la página…</title>
  <meta charset="UTF-8">
  <meta name="description" content="Descripción de la página…">
</head>
<body>
  <h1>… </h1>
  <p>…</p>
</body>
</html>

Esta plantilla úsala como sigue:

  1. Personaliza el título en la etiqueta <title>
  2. Personaliza la meta-descripción en la etiqueta <meta name=”description” contenido=”… “>
  3. Codifica dentro de la etiqueta <body> el contenido visible de la página.

Es decir, lo que vamos a ver como contenido de la página como tal tiene es el contenido de la etiqueta <body>.

Pero, además, disponemos de otras etiquetas especiales para crear la estructura interna de la página. Dentro de estas me voy a limitar a la etiqueta <div> que es la “clásica” que se ha empleado para todo en la versión 4.01 de HTML. En HTML 5 se han añadido luego otras nuevas como <article>, <section> o <header>, pero ni las necesitamos, ni nos interesan ahora.

Veamos un ejemplo:

<body>
  <div class=”barra-lateral”>
    <h3>Título…</h3>
    <p>Texto</p>
  </div>
  <div class=”contenido”>
    <h1>Otro título…</h1>
    <p>Otro texto</p>
    <p>Más texto… </p>
  </div>
</body>

Como puedes intuir con el ejemplo anterior, <div> permite crear divisiones lógicas dentro de una página para aplicarles luego diferentes formatos (por eso he usado también el atributo “class”, más sobre esto luego).

En el típico blog con una barra lateral, por ejemplo, los contenidos de la barra lateral irían podrían ir un div y el contenido en sí en otro diferente.

Trabajar con texto en HTML

Y a partir de ahora es sencillo: se trata de conocer las diferentes etiquetas para los diferentes tipos de elementos que puede tener una página HTML: texto normal, tablas, enlaces, imágenes, etc.

Cómo trabajar con títulos y párrafos de texto en HTML

HTML tiene seis etiquetas de títulos/subtítulos: de “<h1>” hasta “<h6>”, correspondiendo los números al nivel jerárquico.

Es decir, una etiqueta “<h1>” sería el nivel jerárquico máximo, “<h2>” los subtítulos de los niveles h1 y así sucesivamente.

Por otra parte, los párrafos de texto normal se marcan con “<p>”.

Con ambas cosas tenemos los elementos básicos para crear texto en HTML.

Si comparamos esto con Word, por ejemplo, las etiquetas de títulos serían el equivalente a los estilos “Titulo 1”, “Título 2”, etc. y la etiqueta de párrafo el equivalente al estilo “normal”. De hecho, al pegar un texto desde Word a un editor HTML visual, así se deberían convertir en el código HTML generado. Puedes probarlo con Quackit, por ejemplo.

Cómo crear listas en páginas web

Las listas son otro elemento indispensable en un contenido. Es muy fácil crearlas en HTML, en el caso de las listas enumeradas se usa la etiqueta <ol> y en el caso de las no enumeradas (con viñetas), se usa la etiqueta <ul>. En ambos casos se usa <li> para los elementos de la lista.

Por ejemplo:

<ol>
  <li>El primer punto</li>
  <li>El segundo punto</li>
  <li>El tercer punto</li>
</ol>

Fácil, ¿no?

Fíjate, además, que, siendo una lista enumerada, no vienen los números, es decir, el “1.) …”, “2.) …”, etc. Eso es así porque, de manera similar a Word, usar listas enumeradas implica precisamente que los números se crean automáticamente cuando se visualice la página en un navegador web.

Cómo usar tablas en páginas web

Las tablas son un elemento ya algo más avanzado y, por tanto, aquí me limitará a una estructura básica de tabla:

<table>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Web</th>
  </tr>
  <tr>
    <td>Amy</td>
    <td>Porterfield</td>
    <td>https://www.amyporterfield.com/</td>
  </tr>
  <tr>
    <td>Pat</td>
    <td>Flynn</td>
    <td>https://www.smartpassiveincome.com/</td>
  </tr>
</table>

Aquí, la etiqueta <table>, como ya te puedes imaginar, demarca la tabla.

Dentro de ella, cualquier fila de cualquier tipo se demarca con <tr> que viene de “table-row” (fila de tabla en inglés). Dentro de esto, puede haber diferentes tipos de filas que se diferencian por el tipo de celdas que contienen.

En este ejemplo, tenemos una primera fila con celdas con la etiqueta <th> (“table header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas ordinarias con datos, <td>, “table data”.

Insertar enlaces (links) en páginas HTML

Vamos ahora a lo que es la etiqueta por excelencia en una página web: la etiqueta de un enlace.

Esta etiqueta es “<a>”, de “anchor” (ancla en inglés) y su sintaxis básica es la siguiente:

<a target=”_blank” href=”[url del enlace]”>Texto del enlace</a>

La información clave, el enlace, viene en el atributo href, aquí debes insertar la URL del sitio que quiere enlazar.

El atributo target también es muy importante. Sus valores más usados (y los únicos que necesitas realmente en la práctica) son “_blank”, que quiere decir la página del enlace se abre en una nueva pestaña/ventana, y “self”, que la abre en la pestaña/ventana del documento actual.

Si omites este atributo o dejas el valor en blanco, se asume por defecto target = ”self”.

Trabajar con imágenes en páginas web HTML

Cuesta pensar en una página web sin imágenes. Se usan para mil cosas: para el logotipo del sitio, en el contenido, para iconos en menús y otros elementos similares, y mil cosas más.

Como verás, insertar imágenes en páginas web en HTML es realmente fácil.

Insertar imágenes en una página HTML

La etiqueta HTML para insertar una imagen en HTML es <img> y su sintaxis básica la siguiente:

<img src="[url de la imagen]" alt="[texto]" height="100" width="50">

Aquí el atributo src es el equivalente a href en el caso del enlace anterior, es decir, una URL que apunta a la imagen que quieres visualizar.

Por ejemplo:

https://midominio.com/imagenes/mi-imagen.png

Otro atributo muy importante es alt. Por una parte, porque en caso de que el enlace a la imagen esté roto, visualizará un texto alternativo (de aquí, el nombre de “alt” del atributo) que será el texto asociado a este atributo y, por otra parte, porque Google lo tiene muy en cuenta para posicionar la imagen (en la búsqueda de imágenes).

Los atributos height y width te permiten especificar las dimensiones a las que ajustar la imagen en el navegador. De no ser esas las dimensiones originales de la imagen, el navegador reducirá o ampliará la imagen, según corresponda, para ajustarla a estas dimensiones.

No obstante, te recomiendo evitar usar este recurso y usar mejor reglas CSS para dar los detalles de la maquetación de tus imágenes. En el apartado de diseño, retomaré el tema CSS.

Cómo crear una imagen con un link en HTML

Es bastante frecuente que las imágenes lleven también un enlace asociado. Por ejemplo: la imagen de un anuncio.

Esto es tan simple como usar la imagen como contenido del enlace:

<a target=”_blank” href=”[url del enlace]”><img src="[url de la imagen]" alt="[texto]" height="100" width="50"></a>

Cómo insertar audio y vídeo en páginas HTML

Hoy en día estamos acostumbrados a páginas web con vídeo y audio.

La tecnología ha avanzado mucho y es realmente simple trabajar con audio y vídeo en la web.

Aquí vamos a diferenciar dos casos:

  1. Insertar ficheros alojados por ti de audio y video en HTML (normalmente con formatos MP3 y MP4).
  2. Insertar audio y vídeo alojado en otras plataformas de podcasting y vídeo como SoundCloud, iVoox, Youtube, Vimeo y similares.

También quiero recomendarte encarecidamente que uses, en la medida de lo posible, siempre la segunda opción para hacerlo, ya que alojar este tipo de ficheros en tu propio servidor implica un consumo de espacio en disco y ancho de banda muy elevado si tienes un tráfico relevante.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

El típico hosting para blogs WordPress, por ejemplo, no está pensado para esto. Por tanto, alojar ficheros audio y video uno mismo debería ser algo que se haga sólo en casos muy especiales que realmente lo justifiquen.

Cómo insertar audio MP3 y otros formatos en HTML

Con HTML 5 nos lo han puesto muy fácil para usar audio en una página web.

Con esta estructura tu página mostrará el típico reproductor de audio con un botón de play, barra de progreso, control de volumen, etc.:

<audio controls>
  <source src="ejemplo.mp3" type="audio/mpeg">
  Tu navegador no soporta este elemento de audio.
</audio>

Si te fijas, el elemento clave aquí es source y funciona parecido a img: el atributo src indica la URL con la ubicación del fichero de audio.

En el atributo type tenemos que especificar el tipo de formato de audio utilizado. En el ejemplo viene el más usado, MP3, pero también se admiten los formatos OGG (valor “audio/ogg” para type) y WAV (“audio/wav”).

Fíjate también en el texto de “Tu navegador…” que se ha añadido al elemento audio. Este texto normalmente no se visualizará, es para el caso de navegadores muy antiguos que no soporten este elemento de HTML 5, un escenario que hoy en día prácticamente puedes descartar. Pero, por si las moscas, tienes este recurso.

Cómo insertar video MP4 y otros formatos en HTML

El caso del vídeo es similar en HTML 5:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Tu navegador no soporta este elemento de audio.
</video>

Como ves, este caso es similar al del audio no requiere mucha explicación. Añadir que también se soporta el formato OGG.

captura video html5
Ejemplo de un reproductor de vídeo que HTML 5 usa por defecto.

Cómo embeber Podcasts, vídeos YouTube, etc.

Sin embargo, la manera general de trabajar con audio y vídeo que te recomiendo es otra: subir estos contenidos a una o varias plataformas especializadas como SoundCloud para audio, YouTube para vídeo, etc.

No solamente vas a ahorrarte muchos recursos en tu servidor, sino que, además, expones esos contenidos a más audiencia. YouTube, por ejemplo, es el segundo buscador más grande del mundo detrás de Google. Con eso queda dicho todo.

Embeber los contenidos subidos a estas plataformas es muy fácil: todas ellas suelen tener una opción para generar código HTML que simplemente se copia y pega en tu página.

Arriba puedes ver lo que sucede en el caso de YouTube cuando se elige la opción de “compartir” debajo de un vídeo y, a continuación, “insertar”. En las demás plataformas es similar.

Esto tiene, además, la ventaja de que los reproductores ya son específicos de la plataforma y, normalmente, mucho mejores y más atractivos visualmente que los reproductores que se  usan por defecto en HTML 5.

Trabajar con formularios en HTML

El último tipo de elemento que nos falta por ver para tener vistos todos los esenciales de una página web son los formularios de HTML.

Este es, además, un elemento muy peculiar porque introduce algo que ha revolucionado la web y la forma de consumir contenido en Internet: la interactividad con el usuario. Sin esto, no podrían existir cosas como las redes sociales, blog o foros, por ejemplo.

Usos típicos de los formularios HTML

Es decir, los formularios HTML hacen posible que un usuario envíe información a una web. El recuadro de Instagram, Facebook o Twitter en el que realizas tus publicaciones son ejemplos de formularios HTML.

Otros ejemplos muy típicos son las secciones de comentarios como en este mismo blog, los formularios en las tiendas online para realizar tus pedidos, formularios de contacto, los popups típicos de los blogs para el alta en una lista de correo, etc.

Ejemplo de formulario HTML: un formulario de contacto

Veamos de nuevo un ejemplo sencillo, un ejemplo de un formulario de contacto en HTML:

<form action="https://miweb.com/contacto/solicitud">
  <p>Tu nombre:</p>
  <input type="text" name="nombre"/>
  <p>Tu email:</p>
  <input type="text" name="email"/>
  <p>Asunto de tu solicito:</p>
  <input type="text" name="asunto"/>
  <p>Texto de tu solicitud:</p>
  <input type="textarea" name="solicitud"/ rows="5" cols="40">
  <p><input type="submit" value="Enviar"></p>
</form>

Puedes ver una versión real de un formulario así en prácticamente cualquier sitio web.

¿Qué está sucediendo en este ejemplo?

Es muy sencillo: con los elementos input podemos crear campos en la página que recogen la información que el usuario introduce, una información estructurada que puede ser procesada por una máquina.

En este ejemplo de formulario concreto, tenemos cuatro parejas campo – valor:

  1. Nombre – [lo que haya tecleado el usuario]
  2. Email - [lo que haya tecleado el usuario]
  3. Asunto - [lo que haya tecleado el usuario]
  4. Solicitud - [lo que haya tecleado el usuario]

En el momento que el usuario haga clic en el botón del formulario, esta información se envía a la URL especificada en el atributo action de la etiqueta form.

Esta información te la puedes imaginar estructurada como una hoja Excel con dos columnas: una con los nombre de los campos (atributo name de los elementos input) y otra con el valor (lo que el usuario haya tecleado en el formulario).

¿Cómo se procesa un formulario?

Lo que sucede a partir de ahora, en realidad, ya se sale de este post porque ya estamos en el servidor, ya no estamos en la página, la página ya ha hecho su trabajo: enviar al servidor esta información.

Pero te daré unas pinceladas:

Para poder usar el contenido de un formulario enviado por un usuario al servidor, tiene que haber algún tipo de programa que procese esa información.

En el ejemplo anterior, algo típico sería un programa que componga con esta información un correo electrónico y lo envíe a una dirección de email del propietario de la web previamente configurada. Así éste recibirá cómodamente lo que la gente envía desde la web. Eso es lo que hacen básicamente los típicos plugins de formularios de contacto en WordPress, por ejemplo.

Otro ejemplo de un procesado un poco más sofisticado serían los comentarios de un sitio web puesto que éstos (como en WordPress) se graban típicamente en una base de datos y cuando se visualiza esa página se vuelven a cargar de la base de datos. Así esta parte se mantiene dinámica, puede irse añadiendo más y más comentarios.

Usar colores en HTML

Aunque en este post no voy a entrar en el tema diseño de una página web porque requiere uno o varios posts dedicados (abajo te doy referencias), si quiero dar, al menos, algunas pinceladas sobre cómo se trabaja con algo tan fundamental dentro del diseño como lo es el color para los textos, fondos, etc.

Los códigos de colores en HTML

Existen diferentes sistemas para codificar colores. A efectos de la web, nos interesa el sistema RGB (de “Red Green Blue” en inglés, “rojo verde azul” en español) que es como el ojo humano percibe el color (con células fotoreceptoras sensibles a cada uno de estos colores) y el que usan también las pantallas de casi todos los dispositivos.

El fundamento de este sistema es que cualquier color se puede generar combinando con diferentes niveles de intensidad estos tres colores básicos: el rojo, verde y azul. Por razones “informáticas” se suelen usar 256 niveles en cada uno (de 0 a 255, corresponde a un byte).

Por tanto, con este sistema, tenemos un total de 256*256*256 = 16.777.216 combinaciones posibles que resultan en el mismo número de colores diferentes, más de lo que el ojo humano puede distinguir.

De ahí que en los códigos de colores en HTML y, en general cuando se trabaja con colores en un ordenador, se use casi siempre este sistema de codificación del color.

Estos códigos de colores HTML se suelen especificar en tripletes RGB, por ejemplo:

  • 0,0,0: negro oscuro (todos los colores con intensidad cero).
  • 255,255,255: blanco (todos los colores con máxima intensidad).
  • 255,0,0: rojo puro intenso (máxima intensidad para el rojo y cero para el resto).
  • 128,128,0: rojo y verde de mediana intensidad lo que daría un marrón verdoso.
  • Etc.
codificacion colores basicos
Colores básicos y su condificación RGB en decimal y hexdecimal.

Cabe destacar que muchas veces no se usan los números “normales” del sistema decimal a los que estamos acostumbrados y que he usado en los ejemplos anteriores, sino que se usa también mucho el sistema de numeración hexadecimal, lo puedes reconocer porque con frecuencia se le antepone a un número así la almohadilla (#).

Por ejemplo: 255,138,138 en hexadecimal sería #FF8A8A.

Si los números hexadecimales son nuevos para ti, mi consejo es que no los uses y sigas utilizando los números normales.

En cualquier caso, si los necesitas, existen convertidores online como éste que te convierten un color RGB en hexadecimal en un triplete de números decimales.

Tablas y paletas de colores

Todo este sistema está muy bien para los ordenadores, pero tiene el problema de que no es nada intuitivo para humanos. Especialmente si no te dedicas profesionalmente a cuestiones relacionadas con ello, es prácticamente imposible que a partir de una combinación de un triplete como 197,82,203 te puedas imaginar qué color concreto va a resultar de ahí.

Por suerte, existe una infinidad de tablas y selectores de color online que te permiten obtener estos códigos de una manera muy fácil. El HTML Color Picker de W3CSchools que puedes ver arriba, por ejemplo, lo encuentro muy completo.

Otra herramienta indispensable son las paletas de colores.

Esto responde al problema de que no es fácil combinar colores que queden bien, en cambio es muy fácil meter la pata combinando colores que no armonizan bien y dan un resultado feo.

En esto ayudan mucho los esquemas o paletas de colores que proponen una combinación de colores ya hecha, una plantilla podríamos decir, con una combinación que resulta armonioso. La idea es que uses solamente los colores de esa paleta en tu web ya que así podrás estar seguro de un buen resultado estético.

ejemplo paleta colores
Captura de la herramienta Coolors (coolors.co), una de las mejores herramientas de paletas de colores que existen.

En este post tienes una selección de varias herramientas de las mejores paletas de colores que existen en la web.

Cómo poner color al texto en HTML

Ahora ya que lo fácil: ponerle color a un elemento HTML.

De manera general, puedes especificar el color de cualquier elemento HTML con el atributo style, con la misma sintaxis usada en este ejemplo:

<h2 style=”color=rgb(13,44,84)”>Título H2 en un azul oscuro</h2>

Del mismo modo puedes usar también valores hexadecimales:

<h2 style=”color=#0D2C54”>Título H2 en un azul oscuro</h2>

La opción que prefieras usar ya es una lección personal.

Cómo poner un color de fondo en HTML

Y esto mismo lo puedes usar también para especificar el color de fondo, en este caso aplicando a atributo anterior a la etiqueta body:

><body style=”color=#FFB400”>

Cómo crear un diseño avanzado para tu página web

En cualquier caso, no te recomiendo hacer lo que hemos hecho en los ejemplos anteriores: ir elemento por elemento especificando el color y muchas otras características como tipo de letra, tamaños, etc. que hay que especificar en un diseño un poco trabajado.

No te lo recomiendo porque es un trabajo ímprobo ir haciendo esto elemento por elemento y, sobre todo, tremendamente ineficiente por ser muy redundante al repetir muchas veces la misma acción.

Imagínate, por ejemplo, tener que aplicar el mismo color cientos de veces al cada párrafo, desesperante, ¿no?

De hecho, esto no es un problema nuevo. Esto ya se daba en los tradicionales editores de texto visuales como Word, OpenOffice, etc.

Aquí ya se inventó la solución a este problema que se utiliza también en HTML: los estilos.

Y éstos abarcan lógicamente no solamente el tratamiento del color, sino todo lo que tiene que ver con la estética y maquetación (la “presentación”) del contenido: tipos de letra, alineación del texto, tamaños y mil cosas más.

Con un “estilo” se define una vez la apariencia de cada elemento. Algo así como lo siguiente:

  • El fondo de la página debe ser blanco.
  • Todos los títulos de nivel 1 deben usar el tipo de letra “Open Sans”, tener un tamaño de 24 pixeles, estar alineados a la izquierda y tener un color gris oscuro con código rgb 192,192,192.
  • Todos los párrafos deben usar el tipo de letra “Verdana”, tener un tamaño de 16 pixeles, estar alineados a la izquierda y tener un color negro claro con código rgb 224,224,224.
  • Todas las tablas estar centradas en la página, deben tener una cabecera con un fondo gris claro con código rgb 64,64,64, un tipo de letra “Verdana” en negritas, el fondo del resto debe ser blanco, …
  • Etc., etc., etc.

¿Qué conseguimos?

Que con una definición de estilo así definimos una vez el diseño de nuestro sitio y a partir de ahí, nos podemos olvidar del diseño y centrarnos en crear el contenido, el diseño se aplicará automáticamente según el tipo de elemento del que se trate.

En HTML existe todo un lenguaje propio aparte, independiente de HTML, cuya misión es esto precisamente: las hojas de estilo CSS, Cascading Style Sheets en inglés o CSS a secas.

El lenguaje con el que se describen estas reglas de estilo en CSS es también bastante asequible. No obstante, permite hacer cosas muy sofisticadas que lógicamente ya no son tan triviales, pero el nivel que necesitas realmente en la práctica se mantiene bastante asequible.

Como el tema CSS necesita un propio para ser abordado en condiciones, te remito a este artículo:

guia rapida aprender css La guía rápida para aprender CSS básico desde cero

Si hay algo que te recomiendo si tienes una web, es aprender CSS y HTML. Incluso aunque uses una plataforma como WordPress o Joomla, no hay color.

Cómo hacer que tu página web aparezca en Google (posicionar tu página web)

Una vez creada tu página, te vas a preguntar cómo hacer para que una página web aparezca en Google.

Además, mucha gente tiene el concepto erróneo de que hay que pagar a Google para aparecer en sus resultados de búsqueda, pero eso no es así: posicionar tu página en Google, es decir, puedes hacer que tu página web aparezca en google gratis.

Lo que se paga son los anuncios online (Google AdWords) que aparecen arriba del todo y están marcados como tales, pero posicionar tu página web en Google es gratis.

En cualquier caso, entrar en lo que son las técnicas de posicionamiento web se sale totalmente del alcance de es post, así que aquí te daré unas pequeñas pinceladas para que cojas la idea y la referencia de otro post en el que podrás ver todo esto a fondo, algo que deberías hacer sí o sí.

El quid de la cuestión es que tienes que tener claro para qué búsqueda o búsquedas en Google quieres posicionar tu página, es decir, a qué intenciones de búsqueda responde. Las palabras que usa la gente en esas búsquedas conforman las palabras clave para las cuales te quieres posicionar tu página, posiblemente hayas oído o leído sobre esto alguna vez.

Lo que es maravilloso en esto (y que mucha gente desconoce) es que existen herramientas que te dicen qué busca la gente, es decir, qué palabras clave existen y cuántas búsquedas al mes se hacen con ellas.

Por tanto, se trata de demostrar a Google que tu post encaja con estas palabras clave, cómo se hace y todo lo que conlleva te lo explico aquí a fondo:

SEO On Page: Un ejemplo práctico para dominarlo en 5 minutos

Recursos para aprender más

Si has llegado a este post ya tienes bastante material para poner ya mismo manos a la obra y hacer tus primeros pinitos en la creación de páginas HTML, aunque ya te adelanto que te será imprescindible aprender unos mínimos de CSS para conseguir un resultado estéticamente atractivo.

Lógicamente sólo he podido hacer una pequeña introducción, pero con esta base ya deberías ser capaz de ir avanzando sin grandes problemas por tu cuenta. Por eso, te quiero dejar a continuación algunos recursos que te permitirán avanzar hasta convertirte prácticamente en un experto.

Más formación

  • El tutorial CSS de Ciudadano 2.0 para una introducción desde cero al mundo CSS. Tan solo con la lectura de este post y un poco de guste ya deberías ser capaz de hacer páginas con una estética sencilla, pero agradable y a la altura de los tiempos actuales.
  • Librosweb: esto es una web en español simplemente genial con varios libros online sobre HTML, CSS y muchas más tecnologías de la web. Te recomiendo en particular como continuación a este post el libro de Introducción a XHTML. Por otra parte, con el libro Introducción a CSS vas a poder aprender todo lo que necesitas en el lado del CSS.
  • W3CSchools: una web en inglés increíblemente completa que abarca también todas las tecnologías importantes. Pero, a diferencia de la anterior no te la recomiendo para aprender desde cero o como continuación a este post (para eso, Librosweb), te la recomiendo como web de consulta. Es decir, por ejemplo, si quieres tener más información sobre elemento HTML para saber cuáles son los atributos que tiene, ver ejemplos, etc. Entonces, éste es el recurso que usar. Además, cuenta con un editor online que te permite probar y experimentar con el código.

Herramientas

  • Los inspectores de código de los navegadores: son herramientas que incorporan los tres navegadores más usados del mercado: Chrome, Firefox e Internet Explorer (ahora Edge). En todos ellos los activas con la tecla F12 o desde el menú correspondiente. Te permiten ver el código HTML y CSS y muchas cosas más de una manera muy estructura, una manera fantástica de “espiar” otras páginas y aprender cómo están hechas. Abajo viene un vídeo para ver cómo funciona esto.
  • Brackets: arriba ya te he recomendado editores HTML con los que trabajar. Pero para cuando ya te encuentres en una fase más avanzada de conocimiento, te quiero recomendar este editor muy popular entre los profesionales y también libre y gratuito.

Aquí tienes un vídeo de demos del inspector de código de Firefox:

Y en este enlace te dejo un vídeo tutorial HTML + CSS básico que me ha gustado bastante:

Anexo: ¿Necesitas crear tu página realmente en HTML?

Como te comentaba al principio de este post, si tienes en mente crear un sitio web y te estás planteando hacerlo creando directamente las páginas de la web en HTML, deberías meditar esta idea.

En el 99,9% de los casos, lo suyo es usar un CMS (Content Management System – Sistema de Gestión de Contenidos). Hacer páginas web frente "a pelo" en HTML a usar un CMS de este tipo sería algo así como tallar un texto en piedra frente a escribirlo en un ordenador.

Voy a enumerar algunas de las razones concretas más importantes para no trabajar directamente en HTML:

  1. Productividad: tardarás muchísimo menos con un CMS, estamos hablando de un factor de varios enteros de diferencia. Podemos estar hablando tranquilamente de un factor 10 o más, según el tipo de web.
  2. Comodidad: en los CMS te puedes concentrar en el contenido, trabajas de forma visual. Incluso puedes hacer cosas como redactar los contenidos de tus páginas en Word y hacer luego un copiar y pegar en el CMS, realizar unos pocos ajustes en el editor visual del CMS y listo.
  3. Resultado: salvo que seas un profesional del diseño web (y de muy buen nivel), el resultado va a ser mucho mejor con un CMS. Con un CMS vas a tener una estructura uniforme, un diseño profesional gracias a las plantillas de diseño (hechas por profesionales), vas a contar sin esfuerzo adicional elementos interactivos como secciones de comentarios muy complicadas de hacer “a pelo” y mil cosas más.
  4. Los mejores CMS son gratis: los productos que mencionaba antes (WordPress, Joomla, etc.) son aplicaciones de software libre y completamente gratuitas a la vez que los mejores productos que existen en el mercado. Lo que tienes que pagar realmente es el dominio y el servidor del sitio web (el hosting), algo que tendrás que hacer de todos modos, uses un CMS o páginas HTML.

Hay muchas razones más, pero creo que estas ya son tan contundentes que no hacen falta más. Como ves, simplemente no hay color entre las dos opciones.

Concretamente te recomendaría WordPress para blogs y sitios web de complejidad pequeña o mediana. Para sitios muy grandes y/o complejos deberías valorar también alternativas como Joomla o Drupal, por ejemplo.

Te recomendaría, además, la versión de WordPress para hosting (la gratuita es muy limitada). Para ello necesitas contratar un hosting (cuesta unos 5€/mes más o menos) como Webempresa, SiteGround o Raiola Networks que soporte WordPress o Joomla o Drupal si prefieres estas aplicaciones.

Por tanto, si ves claro que en tu caso, la vía por la que debes ir realmente es la de usar un CMS, te recomiendo, en primer lugar, este megatutorial de cómo crear una web con un diseño profesional con WordPress:

Y si prefieres la lectura, te recomiendo seguir con estos posts:

cabecera diferencias blogger wordpress WordPress o Blogger (Blogspot): ¿Cuál es el mejor para ti?

A la hora de crear un blog o un sitio web en general, WordPress y Blogger siguen siendo las dos opciones más populares. ¿Cuál te conviene más a ti?

como crear un blog Cómo crear un blog paso a paso desde cero

Crear un blog es fácil. ✅ Aquí lo aprenderás desde cero ✚ Cómo crear buenos contenidos, posicionar tu web, monetizar tu blog y mucho más…

¿Qué razones quedan entonces para aprender y usar HTML?

El quid de la cuestión es que, incluso usando un CMS como WordPress o Joomla, aun así, saber HTML te va a dar muchas ventajas, suficientes como para que el limitado esfuerzo de aprenderlo te merezca la pena.

Hay muchos ejemplos.

Un ejemplo muy claro es Blogger, por ejemplo. En el caso de usar Blogger, si sabes HTML, Blogger  te permite personalizar las plantillas de diseño.

En WordPress le puedes sacar muchísimo partido al HTML con los shortcodes de WordPress:

como programar shortcodes wordpress Cómo crear Shortcodes en WordPress con PHP

Los shortcodes son de esas cosas te permiten acceder a otra dimensión en la explotación de tu web WordPress. Aquí te enseño cómo crearlos.

Otro ejemplo son las limitaciones y fallos de los editores visuales HTML. El editor estándar de WordPress, por ejemplo, genera alguna vez desaguisados que son mucho más fáciles de arreglar si entras directamente en la vista en HTML.

Una última ventaja que quiero tomar como ejemplo es el hecho de que son muchas las ocasiones donde más allá del uso de CMSs saber HTML te va a ser más que útil.

Por ejemplo: La herramienta de email marketing Mailrelay que te permite gestionar hasta 15.000 suscriptores gratuitamente y que recomiendo para empezar, requiere usar HTML para integrar los formularios de suscripción en una web, ya sea un blog o cualquier otro tipo de web:

portada mailrelay Mega-Tutorial: Email Marketing con Mailrelay y WordPress

En este tutorial sobre email marketing vemos como crear una campaña con Mailrelay, además de formularios de suscripción (entre otras cosas).

Es decir, no hay un plugin de Mailrelay para WordPress ni nada parecido, tienes que trabajar con HTML. No es complicado (es copiar y pegar código básicamente), pero si no tienes ni idea de HTML es fácil que cometas algún error básico y te vuelvas loco por no saber cuál es y cómo resolverlo.

En definitiva: para una web deberías usar, como norma general, siempre un CMS. Pero, como muy tarde, en el momento que esa web empiece a ser importante para ti te recomiendo encarecidamente aprender HTML y un poco de CSS, es poco esfuerzo y accedes a otra dimensión de posibilidades para tu proyecto.

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Informática de formación con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 😄

De todo ello, lo que me apasiona de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto web actual al cual pertenece, entre otras, esa web.

Aparte de mi propia experiencia emprendedora, mi contacto profesional con pymes y pequeños emprendedores me ha generado un gran interés en el marketing online.

Emprendí muy joven y eso hizo que todo el desarrollo inicial de las redes sociales, WordPress, SEO, etc. ya lo viví con esa experiencia. Me fascinó cómo cambió las reglas del juego para bien, sobre todo, para los pequeños emprendedores.

Esto me parece algo tan importante, de tanto calado social, que este blog nace con la vocación de ser un sitio de divulgación de este conocimiento y con la intención de motivar sus lectores para que aprovechen al máximo el potencial de estas disciplinas.


81 comentarios en «Cómo hacer una página web en HTML: Tutorial desde cero»

  1. Es muy importante enseñar esta parte de la edición de páginas web, ya que es como encontrarle las tripas a lo que estas construyendo, a mi me gusta enseñarle a mis alumnos esta parte como algunos le llaman de forma "artesanal" ya que le van a encontrar sentido cuando se enfrente a alguna plataforma CMS y tengan que usar el HTML ó que quieran darle alguna característica especial.
    Me gusto la forma en la que abordas la temática

    Saludos y gracias por compartir

    Responder
    • Efectivamente, eso es de lo que trato de mentalizar a los lectores del post. Por muy bueno que sea un CMS, si no tienes ni idea de HTML y CSS te estás autolimitando muchísimo.

      ¡Un saludo!
      Berto

      Responder
  2. Definitivamente esta página es un deleite; el contenido técnico es de peso, el diseño es exquisito; de principio a fin me enamoró esta página, cuida hasta los más mínimos detalles; felicitaciones!

    Responder
  3. Un millón de gracias Berto por esta explicación tan estructurada y fácil de entender.

    Estoy siguiendo un curso de la Comunidad de Madrid, y aunque las comparaciones son odiosas, en este caso son necesarias porque he llegado a tu maravilloso blog ¡intentando entender el otro curso!

    Es decir, no hay comparación. Un abrazo y gracias por tu generosidad.

    Responder
  4. Un verdadero placer y realmente fascinante leer esta publicación. Ahora mas que nunca me doy cuenta que estamos en una Era privilegiada. Extraordinario trabajo y de lo mejor que he leído para comprender un tema totalmente nuevo. ahora mismo me encuentro aprendiendo de manera autodidacta todo lo necesario para poder lanzar mi propia Website con WordPress y Elementor. Tengo una tienda en la plataforma de Etsy.com pero deseo tener mi propia Web y tienda en linea. Gracias infinitas por querer ayudar y compartir conocimientos. Felicidades y desde ya soy seguidora de su canal en YouTube y de su Website. Gracias Infinitas 😊❤!!

    Responder
  5. Hola Berto! Gran artículo, al escuchar HTML me sonaba muy raro todo ello, mas bien difícil, pero gracias por compartirnos de tus conocimientos. Ahora me siento mas confiada para hacerlo.

    Responder
  6. Hola,

    Los sitios web creados en html son mucho más rápidos que los que usan creadores de contenido como wordpress. La gran desventaja es que cuando queremos crear algún servicio aparte, por ejemplo, colocar un formulario de suscripción, o vender un producto, o crear portales como dokan, se queda corto el usar html. Creo que todo depende de nuestro proyecto y hasta donde pensamos llegar.

    Me gustaría una solución que proporcione la versatilidad y la capacidad de desarrollo de wordpress, y la sencillez y rapidez de html.

    gracias por el chance de aportar

    Responder
    • Hola Danilo, HTML es solo un lenguaje de estructura, para hacer formularios, catálogos o vender un producto estan otras tecnologías, de las cuales te puedo mencionar JavaScript y PHP para realizar formularios y validaciones entre sí. Todo lo que desees hacer con la programación está al alcance de tus manos, solo debes ser un poco curioso.

      Responder
  7. Hola me gustaría una ayudita yo tengo que realizar un pequeño sitio web que tenga una pagina principal enlazadas a 5 sub-paginas, del mismo modo que se navegue por todo el sitio web permitiendo que los usuarios puedan ir de una pagina a otra sin necesidad de salir del sitio.

    Responder
        • Hola Jesús,

          Los ficheros de las páginas subordinadas se meten dentro de carpetas y eso se refleja en la URL.

          Es decir, si public_html/index.html, por ejemplo es dónde tienes la página principal y a donde accedes en el navegador desde midominio.com, entonces public_html/contacto/formulario.html sería una página subordinada que a nivel navegador se accedería como midominio.com/contacto/formulario.html

          ¡Un saludo!
          Berto

  8. Otra vez me encuentro con Ciudadano 2.0, por curiosidad estaba viendo como hacer una página en HTML y me dí cuenta que ustedes son muy buenos.

    Muy buen contenido
    Gracias

    Responder
  9. Muy interesante lo que nos comentas, pero yo recomendaria , que si quieren una página web lo mejor siempre será trabajar con profesionales, en este caso les recomiendo la empresa Mitsofware o Bakanstudios, ambas son muy buenas, he trabajado con ellas, y digamos que el precio no es caro, se adapta a tus necesidades, además no tendran los tipicos fallos que vemos en un diseño web quizas hecho por uno mismo, o por personas que no lo hicieron del todo bien

    Responder
    • Hola Jean,

      Gracias por la aportación de las empresas.
      Pero desde Ciudadano 2.0 intentamos impulsar a los lectores a conocer y aprender sobre tecnología, porque siempre va a resultar útil (sea para hacerla él mismo o para saber cómo lo está haciendo la persona que ha contratado).

      ¡Un saludo!,
      Lucía

      Responder
    • Hola buenas noches yo quisiera hacer una página web (sobre arte)para un trabajo final, como, que debería pedirle al artista para realizarla (fotos de sus obras y sus explicaciones) cómo me podrías ayudar

      Responder
  10. Que buen trabajo, me ha parecido excelente el cual posee información muy clara y especifica ideal para ponerla en practica. Muchas gracias

    Saludos.
    Andres

    Responder
  11. Hola, he hecho mi paguina web , y mi servidor LEMP, puedo verlo con mis iP locales de mi router , Pero no explicas como conseguir un dominio publico, referencias a SEO On Page un programa de pago.

    Mi pregunta es como conseguir a traves de mi puerto 80, que mi paguina web salva afuera.

    Responder
      • Hice mi página web estática de html básicamente con el editor Nvu, me compré un hardware Odroid XU4 de 20w de consumo, me instalé un Ubuntu minimal e instalé Nginx, MariaDB y PHP 7.1.

        Mi servidor escucha el puerto 80, no puedo ponerle dominio, pero puego guardar todas mis html dentro del directorio root/var/www/html; puedo acceder desde cualquier IP local que esté conectado a mi router, es decir, la dirección se me queda 192.168.1.44/index.html y a partir de ella se indexan los demas enlaces a las páginas consiguientes.

        Pero no sé cómo poner un dominio que no se repita ¿no se supone que se encarga un organismo de asignar dominios o de comprobar que estos no se repitan?

        Esta claro que me conviene un host compartido, pero no quiero pagar. Lo que quiero saber es cómo puedo sacar mi web, con mi dominio, y que algun servidor DNS me reconozca; ¿quién me tiene que registrar?

        Responder
        • Hola Eloy,

          Puedes registrar tu propio servidor con cualquier proveedor de dominios.

          El problema es que para usar tu propio servidor necesitas contratar una IP pública fija y eso también cuesta dinero. No estoy al día con los precios, pero más caro que una opción básica o mediana de hosting, seguro.

          Lo que tienes ahora es una dirección IP privada que no pueden ser visibles en Internet porque las privadas no son únicas. Es decir, tu IP de 192.168.1.44 se repite a lo largo del mundo probablemente cientos de miles de veces. Por eso, no vale como IP pública.

          ¡Un saludo!
          Berto

      • El servidor lo he hecho en mi ordenador conun router asincrono de IP dinamico; la DDNS en freedns.afraid.org; mi página web: repositoryofmechanisms.com; el editor de html es el NVU de LLiurex (linux año 2004) Comunidad Valenciana.

        Responder
      • Pues yo no he contratado ninguna IP fija, con freedns me la hice, una DDNS que asocie tu roter con cualquier IP publica que quiera, mientras tenga el hashkey del dominio...? gratis la tengo.

        repositoryofmechanisms.mooo.com

        Responder
        • Hola Eloy,

          Pues te agreadezco la información, no estaba al corriente de que existían servicios DDNS gratuitos 🙂

          No obstante, aún así no lo veo...

          Ten en cuenta que, asumiendo que tienes el ordenador funcionando 24h al día, tan sólo con un cálculo muy conservador de consumo 1kWh (menos de 50w/hora) y un precio de 0,13€/kWh (el que sale en Google actualmente para España), sale un gasto mensual de 4€ en electricidad.

          A esto habría que añadir el coste adicional del desgaste que supone tener el ordenador funcionando permanentemente.

          Entre los planes más económicos que recomendamos (y los hay más baratos aún), ya los tienes en torno a 5€/mes. De ahí que no lo acabe de ver.

          ¡Un saludo!
          Berto

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).