Crear sitio web usando HTML



code editor colorHTML vs CMS

No se deje intimidar por el aspecto del código fuente. Aprender a crear y editar páginas HTML es fácil y rápido, y ni siquiera tiene que preocuparse por crear una página HTML desde cero. Si usted tiene $ 19 dólares de sobra, puede comprar una plantilla HTML profesional, pero si no está seguro de que este es el método adecuado para usted, puede usar una plantilla gratuita de tinysitebuilder.com.

Personalmente prefiero HTML por dos razones:

  1. Mantenimiento
  2. Actuación

Mantenimiento: He usado, sigo usando y usaré plataformas CMS como WordPress y Joomla para mis proyectos, sin embargo, estos sistemas no son fáciles de mantener como muchos piensan.
WordPress es una aplicación o plataforma que necesita actualizaciones periódicas y, además, tiene temas y complementos que también requieren actualizaciones periódicas. De lo contrario, puede presentar un gran riesgo de seguridad como lo han encontrado muchos usuarios del sitio web de WordPress en el pasado.
HTML, por otro lado, es más fácil de actualizar y mantener, y dado que los archivos son locales y generalmente no dependen de una base de datos o scripts php y js complicados, son más fáciles de actualizar.

Actuación: Intento no usar WordPress ni ningún otro CMS a menos que sea absolutamente necesario o lo solicite el cliente. La razón de esto es que estos sistemas de gestión de contenido son poderosos.
WordPress es una aplicación que utiliza una gran cantidad de RAM de su sistema, y además de eso, el tema de su sitio web y sus complementos son procesos adicionales que aumentan el uso de la memoria. Cuantos más complementos agregue, más lento será el sitio web.

Si está aprendiendo a codificar, puede comenzar aprendiendo cómo realizar cambios menores en un archivo HTML local que puede ejecutarse en su navegador. ¡No se necesita dominio ni alojamiento!

Herramientas para trabajar con el sitio web HTML

Si eres como yo en mis días de aprendizaje, tal vez no tengas idea de por dónde empezar, y aquí hay una breve lista de las herramientas que te recomiendo que obtengas. No hay necesidad de computadoras sofisticadas, y casi cualquiera hará el trabajo.

  1. Descargue e instale un software de edición de código fuente como Notepad ++. Es gratis y tiene muchas opciones.
  2. Descargue e instale un cliente FTP. Usamos WinSCP (solo disponible para Windows) pero hay otras opciones como Filezilla para otros sistemas Son gratis.
  3. Descargar e instalar Google Chrome navegador. Cualquier navegador importante funcionará, pero Chrome tiene mejores herramientas.

Si ya ha agregado estas herramientas a su arsenal, podemos pasar al siguiente paso.

Configuraciones y configuraciones

Lo mejor de HTML es que puede ejecutarse en su computadora sin la necesidad de una conexión a Internet. No se necesita dominio ni servidor tampoco. Sin embargo, nuestro objetivo es familiarizarlo con todo el proceso, desde la compra de alojamiento hasta la configuración del acceso FTP y la personalización de un sitio web. Por lo tanto, le recomendamos que compre un plan de alojamiento, configure su dominio y configure algunas otras cuentas necesarias. ¡Entonces podemos conectar su sitio web a la red mundial!

Para nuestro ejemplo necesitaremos:

  1. Hosting Linux de su proveedor de alojamiento preferido.
  2. Un nombre de dominio (¡choca los cinco si viene incluido con tu hosting!).
  3. Aprenda a acceder a su cPanel.
  4. Agregue su dominio a su cuenta de hosting usando su cPanel (enlace su nombre de dominio a su carpeta raíz).
  5. Cree una cuenta FTP a través de cPanel. Asegúrese de que esté configurado para acceder a la carpeta raíz (www o public_html).
  6. Compre una plantilla HTML barata de Themeforestu obtener una plantilla HTML gratuita de tinysitebuilder.com.

Una vez que haya configurado todos estos servicios, podrá cargar el código fuente de su sitio web y realizar cambios sobre la marcha. Los cambios son instantáneos y cualquier persona con un navegador y conexión a Internet puede verlo.

Además, le recomendamos que aprenda cómo usar Chrome de Google para editar sus archivos almacenados locales HTML y CSS. Estos cambios solo se realizan en los archivos que Chrome descargó para mostrar su sitio web, y su código fuente original no se verá afectado. Actualizar la página restaurará los archivos originales.

NOTA: Por brevedad, crearé tutoriales adicionales que explican la instalación y configuración de algunos de estos servicios.

Tu primer sitio web HTML

FREE website templates and website builder

Para nuestro ejemplo, utilizaremos una plantilla HTML gratuita que descargamos de tinysitebuilder.com. Puede ir allí y descargar muchas plantillas gratuitas o crear las suyas propias.

Aquí está el que construimos..

1. Configure su cliente FTP WinSCP

Create Website Using HTML

A estas alturas ya debería haber configurado una cuenta FTP a través de su cPanel. Use esas credenciales para conectar su aplicación a la carpeta raíz del servidor. Necesitará:

  • Protocolo FTP
  • Nombre del anfitrión
  • Número de puerto (use 21 si no lo sabe).
  • Tu nombre de usuario FTP.
  • Tu contraseña FTP

Haga clic en iniciar sesión.

Si su conexión es exitosa y depende de la configuración de su cliente FTP, puede ver 1-2 carpetas. Si está utilizando un proveedor de alojamiento diferente al recomendado por a2hosting, puede parecer diferente.

Nuestro ejemplo muestra 4 archivos; 3 carpetas y una .ftpquota. Usualmente son estos 2:

  • .bien conocido
  • cgi-bin

computer files and online files

El panel lateral izquierdo son archivos almacenados localmente (también conocidos como archivos de su computadora). En el panel lateral derecho están sus archivos en línea.

Si conectó su cuenta FTP directamente a su carpeta raíz, será llevado allí cuando inicie sesión por primera vez.

2. Visite su sitio web.

Usando el Chrome de Google o cualquier otro navegador, navega hacia tu dominio. Verá la siguiente pantalla.

Create Website Using HTML

3. Cargue los archivos de su sitio web.

upload website files

Primero debe extraer o descomprimir los archivos de su sitio web, luego subirlos a su servidor. Hay un par de formas en que puedes hacer esto.

  • Puedes arrastrar y soltar.
  • Puede seleccionar todo y hacer clic derecho para cargar.

Asegúrate de subir a la carpeta raíz.

4. Verificar carga

Para verificar que su sitio web se cargó correctamente, debe actualizar su ventana. ¡Entonces verás tu sitio web!

Create Website Using HTML

5. Aprenda a editar sus archivos HTML.

Hemos creado un par de tutoriales que le enseñarán cómo editar etiquetas HTML y archivos CSS. Haga clic en estos enlaces.

tinysitebuilder.com le permite editar y guardar cambios en el contenido de su sitio web mientras trabaja en su proyecto, ¡también puede exportar e importar archivos para editar!

Le recomendamos que aprenda a editar archivos directamente a través del cliente WinSCP, ya que estos cambios son más rápidos.





Buscar