Seamos claros desde el principio: si deseas que tu negocio exista, debes estar en internet. Actualmente los usuarios ya superan la mitad de la población global y, como se sabe, las páginas web se han convertido en las grandes aliadas de las empresas para dar a conocer sus productos o servicios. Por ello, es importante poseer un sitio web bien estructurado que genere consumidores.

Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Son creadas en formato HTML y son utilizadas en tiendas online, blogs, webs corporativas, foros, medios de comunicación, buscadores, entre muchas más opciones.

<< Descarga gratis 77 ejemplos de páginas principales, blogs y páginas de  destino excepcionales >> 

Diversas empresas optan por plataformas que les ofrecen crear sus páginas web de forma predeterminada. Esto puede verse como un beneficio pues les ahorran tiempo y dinero (ya que muchas de ellas son gratuitas); están alojadas en la nube, su instalación no es compleja y basta con registrarse, crear una cuenta y elegir una plantilla.

La desventaja es que al ser formatos de diseño predeterminados, no cuentan con muchas opciones y, probablemente, ninguna te convenza al 100% para el sitio de tu empresa. Otro inconveniente es que estas plataformas, por ser gratuitas y de uso inmediato, utilizan tu espacio web para llenarlo de publicidad ajena a la tuya, tu contenido puede no apreciarse y llegan a confundir al usuario. Tu marca pierde valor cuando esto ocurre; imagina tu sitio web lleno de anuncios que ni siquiera permiten al usuario leer con claridad lo que le ofreces.

La herramienta HTML es a primera vista complicada y laboriosa, pero saber utilizarla te permitirá realizar cambios concretos dentro de tu sitio; además, es la forma perfecta para construir tu página con los elementos que necesitas sin restricciones. Aprender HTML es más fácil de lo que crees, y con nuestra guía verás lo rápido que te familiarizas con él.

Crea tu página web en HTML

Una página HTML consiste en marcar el texto que conformará el sitio a través de etiquetas, por ejemplo:

<h1>Cómo hacer una página web en HTML</h1>

En este ejemplo la etiqueta <h1> indica que se trata de un título.

Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño con las que se conformarán. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y si deseas que tenga un color distinto.

Conceptos básicos

Antes de comenzar a explicarte cómo realizar tu página con códigos HTML, veamos algunos conceptos fundamentales que necesitarás para familiarizarte con ellos. De igual forma, no te preocupes, en este enlace podrás encontrar estos conceptos y serán más que útiles en todo tu proceso de programación.

Siempre verifica que las etiquetas tengan apertura y cierre, es decir, una al inicio y una al final (<h1> texto </h1>), de lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Este aspecto es importante revisarlo constantemente antes de que pongamos un nuevo código, a fin de evitar una revisión exhaustiva en busca de un error.

  • La estructura básica de una página web se compone por las etiquetas: <html> que es comienzo de la página; <head> es la cabecera y contiene información descriptiva del sitio; y <body> que es la que contiene todos los elementos visibles dentro de la página.
  • Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
  • La etiqueta <p> corresponde a los párrafos
  • La etiqueta <a> representa los enlaces

Metadatos

Contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Las etiquetas que conforman los metadatos son:

  • <base>
  • <head>
  • <link>
  • <meta>
  • <style>
  • <title>

Ahora que ya conoces un poco del lenguaje HTML, comencemos con la realización de la página web.


¿Cómo hacer una página en HTML paso a paso?

1. Comienza abriendo un editor de texto. En una computadora Windows podrás encontrarlo como Bloc de notas; en una computadora Mac puedes utilizar TextEdit.

2. Utiliza la estructura base de un documento HTML para comenzar. Esta debe verse así:Esta estructura la puedes utilizar para personalizar el título principal de tu página, la descripción del contenido y codificar de una manera sencilla para todo el sitio.

3. Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título y/o subtítulo.

4. Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título y/o subtítulo.

La etiqueta <p> marca los párrafos y con ambos elementos ya puedes comenzar a codificar el texto de tu página.


5. Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:

6. Darle formato al texto es muy fácil de la siguiente manera:

Texto en negrita usa la etiqueta <b>texto</b>Texto subrayado <u>texto</u>Texto en cursiva <i>texto</i>

7. Si dentro del texto deseas incluir un enlace a otra página, solo debes utilizar la etiqueta:

Aquí debes incluir el URL que deseas enlazar. El atributo “blank” se utiliza para que el link que agregues se pueda abrir en una nueva pestaña/página. En caso de que quieras que la liga se abra en la misma página, escribe “self”.

8. Un elemento vital en una página web son las imágenes. Para hacerlo en HTML solo debes usar la etiqueta <img>:

El atributo src es para abrir una URL para la imagen que quieres que se visualice. El apartado alt permite visualizar un texto alterno descriptivo en caso de que por error de carga del sitio la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores como Google.

Los atributos height y width pueden ser especificados según las dimensiones que desees que tenga cada imagen que agregues a lo alto y ancho.

9. Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que todos los códigos que utilizaste puedan visualizarse. Estos se cierran de la siguiente forma:

10. Para revisar si tus códigos están bien verifica en tu texto que las etiquetas estén abiertas y cerradas y que todo esté bien escrito.

11. Al momento de guardar el texto que realizaste, recuerda cambiar el formato .txt por .html al final del nombre que hayas elegido.

12. Para abrirlo y ver los resultados elige el archivo de tus documentos, da clic derecho y escoge el navegador de tu preferencia. Si percibes errores en el diseño de la página basta con que regreses al editor de texto o bloc de notas para revisar a detalle en dónde está el error.

 

 

Como puedes ver, programar una página HTML requiere tiempo y dedicación, pero no es imposible y tiene grandes ventajas por ser una herramienta verdaderamente útil para que el sitio de tu empresa quede exactamente como lo esperas.

La práctica hace al maestro, pero si te surgen más dudas en el proceso no dudes en pedir apoyo a personas que conozcas que dominan más este tipo de diseño. Accede a nuevas dimensiones y no limites la creatividad para la realización de tu página web.

Inspiración Web

 diseño web

Publicado originalmente en mayo 17 2019, actualizado mayo 17 2019

Topics:

Diseño Web