Sitio Web

¿Cómo crear una página web?

Uno de los primeros pasos para crear tu identidad digital es crear una página web. Con los avances en el desarrollo de sitios web, ahora tenemos muchas maneras de cómo crear una página web; podemos usar un sistema de administración de contenido, o podemos usar un creador de sitios web o podemos hacerlo a la antigua y hacer una página web desde cero. En este tutorial, hablaremos de todas las formas anteriores y te mostraremos cómo crear una página web.

No te preocupes si nunca antes has sabido hacer una página web porque en este tutorial to guiaremos a través de todo el proceso.

Paso 1: elegir una plataforma

Como mencionamos anteriormente, hay 3 formas principales de como hacer una página web:

  1. Utilizar un CMS: sistemas de administración de contenido e imagen es una herramienta de desarrollo avanzadas que se puede usarse para crear y administrar sitios web y el contenido que los compone. Cuando se trata de CMS, los tres verdaderos líderes del mercado son WordPress, Drupal y Joomla. Las 3 herramientas son gratuitas y de código abierto, pero WordPress es el CMS utilizado con más frecuencia. Los tres sistemas se han desarrollado usando PHP, los tres hacen uso de plantillas/temas para la personalización visual y los tres son impulsados por la comunidad. Aunque Joomla! y Drupal no pueden competir con WordPress en lo que respecta a facilidad de uso, simplicidad, facilidad de mantenimiento, tamaño de la comunidad y disponibilidad de plugins y temas gratuitos, etc. Para alguien que no tiene experiencia en desarrollo, WordPress es la opción obvia.
  2. Uso de creadores de sitios web: el mundo de la automatización alcanzó una nueva etapa cuando surgieron los creadores de sitios web. Al principio, las opciones de personalización con respecto a la funcionalidad y el diseño eran limitadas, pero ahora hay mucho más que se puede lograr arrastrando y soltando en un constructor de sitios web moderno. En comparación con los CMS y los sitios web de codificación desde cero, los creadores de sitios web son muy rápidos, eficientes y posiblemente perfectos para las personas que carecen de experiencia en desarrollo y no desean invertir mucho tiempo en el proceso de desarrollo.
  3. Codifique un sitio web desde cero: la tercera opción disponible a nuestra disposición en cómo crear una página web desde es hacerla desde cero. Este proceso idealmente debería intrigar a los usuarios que tienen al menos una experiencia básica de desarrollo. Las tecnologías utilizadas en este tutorial para construir un sitio web estático serán HTML y CSS.

Paso 2 – Obtener alojamiento y nombre de dominio

Tu sitio web es como un edificio y, al igual que cualquier edificio, necesita una dirección a través de la cual los usuarios puedan acceder y un lugar donde residir. Para que puedas publicar tu sitio web en Internet, necesitas obtener alojamiento web, y para darle una dirección accesible, necesitas obtener un dominio. Miremos ambos uno por uno:

Elegir alojamiento web

Un buen proveedor de servicios de alojamiento web contribuirá en gran medida a garantizar que tu sitio web cumpla con los estándares deseados de calidad, eficiencia y disponibilidad. Hostinger ofrece alojamiento web a precios asombrosamente baratos, manteniendo los estándares mencionados (y mucho más). Estas son algunas de las muchas razones por las que debes unirte a los millones de clientes que ya han elegido Hostinger:

  • El Hosting de Hostinger está optimizado para WordPress (por ejemplo, WP CLI, almacenamiento en caché de WordPress, etc.)
  • Obtienes un constructor de sitios súper fácil que te permite arrastrar y soltar tu camino hacia un sitio web perfecto.
  • El sitio web PHP se ejecutará con facilidad en el hosting de Hostinger. Y es muy amigable para los desarrolladores. Puedes ejecutar Laravel, CodeIgniter, integrarse perfectamente con tu GIT y obtener acceso SSH a sus servidores.
  • El SSL también es proporsionado por Hostinger.
  • Una prueba gratuita de 30 días que te permite obtener una experiencia práctica de todos los servicios antes de realizar una compra.
  • Si optas por el plan premium o el empresarial, obtendrás un nombre de dominio gratuito.
  • Puedes tener tantas direcciones de correo electrónico como desees (¡sí, sin límite!).
  • Si tu sitio web tiene algunos problemas o simplemente tienes algunas consultas, el equipo de soporte estará disponible las 24 horas, todos los días de la semana, para ayudarte.
  • Con un solo clic, puedes instalar todos los famosos CMS, incluidos WordPress, Joomla !, Drupal, etc.

Elegir un nombre de dominio

En pocas palabras, un dominio es el nombre de su sitio web. Es lo que pones en la barra de direcciones de tu navegador y presionas ingresar para visitar tu sitio web. Google.com es un dominio y también lo es Facebook.com.

Elegir un buen nombre de dominio también es fundamental y dado que es algo a lo que los usuarios usarán como referencia en tu sitio web, no te puedes equivocar. Aquí hay algunos consejos que debes conocer antes de elegir uno:

  • Que sea corto: nadie quiere visitar Googlebutwithabgerdomainname.com.
  • Sea específico de la marca: tu nombre de dominio debe dar a las personas una idea de lo que hace tu negocio.
  • Elije las extensiones de dominio correctas: las extensiones de dominio son la parte del dominio que viene después del período/punto final (.). Un dominio .com es una opción universal, pero dependiendo de sus necesidades o la naturaleza de su sitio web, es posible que tengas que elegir una opción diferente.
  • ¿Cómo te sientes cuando lo pronuncias? Tu nombre de dominio debe ser fácil de pronunciar para que sea fácil de mencionar en las conversaciones.

Al igual que los servicios de alojamiento, Hostinger también ofrece servicios de registro de nombres de dominio. Puede usar este comprobador de nombre de dominio para elegir un nombre de dominio.
cómo crear una página webLo que es aún mejor es que si eliges un plan de alojamiento empresarial o premium, obtienes el nombre de dominio gratis (Sí, ¡completamente gratis!). También vendemos dominios .xyz , la próxima generación a un precio increíble de $0.99 por año.

Paso 3 – Creando un sitio web

Así que la base está lista y ahora comienza la diversión. Ahora que sabes dónde se alojará tu sitio web y qué nombre de dominio usarás, puedes comenzar a crear tu propio sitio web. Hemos explicado los 3 métodos (utilizando WordPress, utilizando un generador de sitios web y creando un sitio web desde cero).

Opción 1: cómo crear una página web con WordPress:

Si estás leyendo esto, has elegido el mejor CMS para crear una página web. Comencemos con los pasos.

Instalando WordPress

Instalar WordPress es tan simple como hacer unos pocos clics. El autoinstalador hace todo el trabajo pesado por ti; aunque también hemos agregado una forma manual para instalar WordPress usando FTP.

Instalación a través del autoinstalador:
  1. Inicia sesión en tu cuenta de hosting y, desde el panel de control, daclic en el ícono de instalación automática.
  2. En el campo de búsqueda provisto, escribe WordPress. Cuando veas la última versión en los resultados de búsqueda, da clic.
  3. Ingresa la URL (La dirección de tu sitio web. Puede sdejarla en blanco en caso de que desees configurar WordPress en la raíz del nombre de dominio), Idioma, nombre de usuario, contraseña, correo electrónico, Título de WordPress, WordPress Tagline (el lema de su sitio web) y presiona el botón Instalar.

¡Y listo! WordPress ahora está instalado.

Configurando WordPress

Ahora que hemos dejado atrás la instalación, podemos hablar sobre la configuración de nuestro sitio web de WordPress. Echemos un vistazo a algunas de las configuraciones con las que debes comenzar:

Eliminar la página predeterminada, publicar y comentar:
  • Se debe crear una publicación predeterminada de “Hola mundo” después de la instalación. Es una buena idea eliminarla de inmediato. Para hacerlo, ve a Entradas -> Todas las entradas y elimínala.
  • Ahora ve a Páginas -> Todas las páginas para eliminar las página de muestra.
  • Finalmente, vaya a la sección Comentarios y elimina el comentario predeterminado.
Zona horaria y configuración del idioma del sitio:

Vaya a Ajustes -> Generales y configure tu zona horaria e idioma.

Comentarios de WordPress

Todas las configuraciones relacionadas con los comentarios se pueden encontrar en Ajustes -> Comentarios desde el panel de administración de WordPress. Dependiendo de tus necesidades, puedes:

  • Permitir o no permitir que las personas publiquen comentarios sobre los artículos nuevos.
  • Decidir si deseas aprobar los comentarios manualmente o no.
  • Configura notificaciones de correo electrónico para comentarios.
  • Mostrar avatares o no.

Consejo profesional:
También puedes deshabilitar comentarios para páginas o publicaciones específicas. Para hacerlo, sigue estos pasos:

  1. Haga clic en todas las entrasdas/páginas del área de wp-admin.
  2. Ahora haga clic en Edición rápida para la página pertinente.
  3. Debajo de Etiquetas, verá una opción que dice Permitir comentarios. Simplemente deshabilítelo y habrá terminado.

Afinando la configuración de los medios

Una vez que haya terminado con este paso, su sitio web de WordPress tendrá un mejor manejo de la imagen. De forma predeterminada, después de subir una imagen, se crearán varias versiones con diferentes tamaños, lo cual es una práctica muy ineficiente. Para cambiar esto, siga estos pasos:

  1. Vaya a Ajustes -> Medios.
  2. En tamaño de miniatura, pon 0 en ancho y alto. Coloca la opción “Recortar las miniaturas en las dimensiones exactas (normalmente, las miniaturas son proporcionales)”.
  3. En tamaño mediano, pon 0 en ancho y alto.
  4. Finalmente ponga 0 en ancho y alto en tamaño grande también.
  5. Marca la opción “Organizar mis archivos subidos en carpetas basadas en mes y año” y da clic en Guardar cambios.
Desactivar la navegación por el directorio:

Este es uno de los ajustes de configuración más técnicos que contribuirá en gran medida a mejorar la seguridad de tu sitio web. Para deshabilitar la exploración de directorios, deberás editar el archivo .htaccess. Sigue estos pasos:

  1. Conéctate a tu cuenta de alojamiento con cualquier cliente de archivos (por ejemplo, FileZilla)
  2. Encuentra el archivo .htaccess y descárgalo.
  3. Abre el archivo y al final del mismo, agrega la siguiente línea de código:
  4. Haga clic en guardar.
  5. Ahora vuelve a subir el archivo usando el cliente FTP.

Personalizando WordPress

La estética visual de tu sitio web es tan importante como el contenido mismo al momento de crear una pagina web. Los temas de WordPress te permiten personalizar el diseño y las perspectivas de tu sitio web según tus necesidades. Por otro lado, los plugins de WordPress te permiten crear una página web más funcional. Veremos ambas entidades, una por una y veras que no es tan dificil saber com cómo crear una página web.

Instalar temas de WordPress

WordPress tiene una enorme comunidad de colaboradores, por lo que la cantidad de temas gratuitos y pagos disponibles es enorme. La gran mayoría de los temas gratuitos de WordPress se pueden encontrar aquí. Sitios web como ThemeForest son el hogar de una multitud de temas gratuitos y pagos también. Si no puedes elegir el tema correcto para hacer tu página web, consulta esta lista con los mejores temas gratuitos de WordPress.

Instalar temas en WordPress es bastante sencillo. Sigue estos pasos:

  1. Da clic en la sección Apariencia del área del administrador.
  2. Presione el botón Añadir nuevo.
  3. Puedes buscar entre los temas disponibles y seleccionar el que le guste. Da clic en Instalar y luego en Activar para pasar al nuevo tema seleccionado.

Si deseas agregar un nuevo tema que has comprado, sigue estos pasos:

  1. Ve a Apariencia y haz clic en el botón Añadir nuevo.
  2. El archivo de tema debe estar en formato comprimido. Una vez que se lo solicite, cargalo.
  3. Una vez que la carga se complete, haga clic en el botón Activar y su tema se activará.

Si deseas un tutorial más detallado sobre la instalación de temas, puedes ver este.

Personalizar temas de WordPress

Si conoces bien los archivos de código de edición, también puedes personalizar manualmente los temas instalados. Esto implica la modificación del código escrito dentro de un archivo CSS (hoja de estilo en cascada) que es responsable de aplicar el diseño de su sitio web. Para hacerlo, sigue estos pasos:

  1. Ve a Apariencia desde el panel de WP y luego haz clic en Editor.
  2. Ahora haga clic en style.css y el editor del archivo debería abrirse.
  3. Puede hacer tantas ediciones como quieras aquí, según tsus necesidades y deseos, y luego guardar el archivo haciendo clic en Actualizar archivo.

También puedes personalizar tus temas modificando el contenido del archivo functions.php. Al hacer esto, puedes agregar/eliminar modificar características, funcionalidad y aspectos de diseño de tu tema. El archivo de funciones maneja las funciones del tema y al agregar el código PHP, el tema se puede personalizar. Puedes leer más sobre functions.php aquí.

Instalación de plugins de WordPress

Los complementosplugins facilitan la vida del propietario de un sitio web y son muy beneficiosos a corto y largo plazo para tu sitio web, no solo para el mantenimiento del sitio sino para crear una página web. Con la simple instalación de un plugin, puedes agregar funcionalidades a tu sitio web sin tener que escribir un código o cambiar los archivos de configuración. Al igual que los temas, hay miles de plugins de WordPress gratuitos y de pago disponibles. Aquí hay algunos que son imprescindibles para su sitio web:

  • Wordfence Security: este plugin mantendrá tu sitio web seguro, protegido y lejos del alcance de potenciales piratas informáticos. Desde firewall hasta defensa de amenazas y escaneos de seguridad, este plugin lo tiene todo.
  • Google XML Sitemaps: el plugin oficial de Google para la generación automática de mapas de sitios XML te ayudará a mejorar la optimización de los motores de búsqueda.
  • Yoast SEO: Uno de los plugins de SEO más populares para WordPress, Yoast SEO tiene más de 5 millones de instalaciones activas. Ya sean metaetiquetas o análisis de páginas, con Yoast SEO, no tendrás que buscar en ningún otro lugar tus correcciones de SEO.
  • Contact Form 7: Un simple plugin de WordPress para hacer un formulario de contacto. Es muy fácil de instalar y puedes crear información de contacto receptiva y generar prospectos con él.

Instalar un plugin de WordPress es tan fácil como instalar temas. Sigue estos pasos para instalar:

  1. Ve a plugins desde el menú principal.
  2. Da clic en el botón Añadir nuevo.
  3. En el campo de búsqueda que aparece, ingrese el nombre del plugin que deseas instalar.
  4. Ahora haga clic en Instalar ahora.
  5. Una vez que la instalación finalice, haga clic en el botón Activar.
  6. Sin embargo, si ha comprado uno de los complementos premium, no lo encontrará en el directorio oficial y tendrá que cargar manualmente los archivos. Para hacerlo, sigue estos pasos:
    1. Haga clic en el botón Agregar nuevo después de desplazarse cerca de los complementos.
    2. Ahora haga clic en el botón Subir complemento en la parte superior.
    3. Haga clic en examinar y seleccione el archivo de complemento archivado.
    4. Una vez que se complete la carga, instale el complemento como antes y luego actívelo.

Puedes encontrar una guía más completa para instalar plugins en WordPress aquí.

Agregar contenido a WordPress

El contenido de WordPress se puede agregar de dos maneras: puede crear una nueva publicación o una nueva. La diferencia entre los dos radica en el hecho de que los mensajes se pueden dividir en categorías y se pueden etiquetar y / o archivar. Las publicaciones normalmente son entradas de blog o artículos que se muestran en orden cronológico en su sitio web y se pueden denominar contenido sensible al tiempo. Por otro lado, las páginas son estáticas. Ejemplos de páginas pueden ser sobre nosotros o contáctenos.

Para crear una nueva publicación en su sitio web de WordPress, siga estos pasos:

Pase el cursor sobre Publicaciones o Páginas según lo que desee crear y haga clic en Agregar nuevo.
Ahora deberá proporcionar los detalles de su publicación / página. El contenido de la publicación vendrá en el cuadro gigante a continuación. Puede formatear su texto o agregar imágenes usando la barra de herramientas disponible.

3 -Tiene los siguientes metacaps disponibles a su disposición a la derecha de la pantalla:
Publicar: puede guardar la publicación como borrador o previsualizarla antes de publicarla. Puede cambiar la visibilidad y el estado de su publicación, y tan pronto como presione Publicar, su publicación se publicará.
Etiquetas: al usar etiquetas, puedes agregar etiquetas a tu publicación. Esta opción no está disponible para páginas.
Imagen destacada: Esto le permite agregar una imagen destacada a su publicación. La posición de la imagen puede variar según el tema.
Categorías: asigne su publicación a una categoría usando esta sección. Si desea crear una nueva categoría, puede hacerlo haciendo clic en el botón + Agregar nueva categoría. Esta opción no está disponible para páginas.

Agregar una página frontal estática:

Cuando agrega tus publicaciones a WordPress, de manera predeterminada, mostrará las más recientes en orden cronológico inverso en la página principal de su sitio web. A menudo es conveniente tener una página frontal estática en su sitio web que salude al usuario en lugar de una lista de publicaciones. Crear una página frontal estática simple es fácil; sigue estos pasos:

  1. Inicie sesión en su área de administrador de WordPress.
  2. Vaya a Páginas -> Agregar nueva página.
  3. Titula la nueva página como inicio.
  4. Es posible que su tema actual le permita cambiar la estética de su página principal; si es así, elija las plantillas del cuadro del panel de atributos de la página.
  5. Puede agregar el contenido deseado en el cuadro de contenido y presionar publicar.
  6. Ahora ve a Ajusteds -> Lectura.
  7. Elija el botón de opción de la página estática A y, a continuación, en el menú desplegable, seleccione Inicio.
  8. Haga clic en Guardar cambios.

Hay mucho más que puedes hacer con WordPress e intentamos cubrir una gran cantidad de temas fundamentales que deberían ser suficientes para que te familiarices con el CMS y crees tu primer sitio web. Para saber más, visite el códec oficial de WordPress o consulte este completo tutorial de WordPress.

Cómo crear una página web desde Cero

En esta sección, le mostraremos cómo puede crear un sitio web estático desde cero, utilizando los poderes de HTML y CSS. Un sitio web estático no cambia según el usuario que accede y tiene un contenido fijo. Puede tener sus ventajas y desventajas; Echemos un vistazo a algunos de ellos:

Pros:

  • Los sitios web estáticos son rápidos.
  • Los sitios web estáticos no se vinculan a ninguna base de datos.
  • Considerablemente fácil de instalar en comparación con sus homólogos dinámicos.

Contras:

  • Toma más tiempo para administrar y actualizar el contenido.
  • No hay forma de mostrar ningún contenido dinámicamente a un usuario.

Todo también necesitarás un editor de código. Algunos de los mejores editores de código son:

  • Notepad ++
  • TextWrangler
  • Texto sublime

Comenzando con una página HTML básica

Hypertext Markup Language (HTML) es un lenguaje de marcado para crear páginas web.

Abra el editor de código que está utilizando y péguelo en el archivo vacío.

Ahora haga clic en guardar como desde su editor de código y guarde el archivo con una extensión .html (por ejemplo, sitio web.html).

Abra el archivo guardado en su navegador. Obviamente, la página se ve ridículamente fea y no se parece en nada a lo que pensaste que sería tu primer sitio web, pero esto es todo lo que necesitas para crear una página web básica. Continuemos.

Agregar CSS para que las cosas se vean mejor

CSS significa hojas de estilo en cascada y te permite crear una página web e implementar estilos constantemente a lo largo de él. Con él, puedes usar fuentes para áreas específicas de su sitio web, cambiar colores para algunas secciones o cambiar el fondo de su sitio web, etc.

Para crear una hoja de estilos, abra un nuevo archivo de texto y guárdelo con el nombre style.css. Debe guardarse en el mismo directorio que tiene su archivo HTML de la página principal. Para que el archivo de índice lea las indicaciones de diseño del archivo CSS, establezca un enlace entre las dos agregando esta línea dentro de la etiqueta <head>:

Por ahora, todo lo que hemos hecho es vincular el archivo CSS y el archivo HTML. Vamos a dividir nuestro sitio web en 5 secciones y dos columnas usando CSS. Inserta el siguiente código en tu archivo CSS:

Los valores de fondo pueden controlar el color de las diferentes secciones y puede cambiarlas según tus propios deseos. Entonces, tenemos cinco secciones en la página: contenedor, encabezado, barra lateral, cuerpo y pie de página. Los nombres de las secciones indican sus funciones; el área del contenedor cubre básicamente todo el sitio web y su ancho puede cambiarse a 1000px si así lo desea, pero debe asegurarse de cambiar las dimensiones de las otras secciones para alinear todo. Puedes configurar el ancho, las alturas y los colores de todas las secciones de acuerdo con sus propios deseos y una vez hecho esto, actualice su archivo de página de inicio a este:

Aquí, como puedes ver, hemos utilizado la etiqueta <div> para dividir nuestro sitio web en diferentes secciones y al establecer el ID, también establecemos consideraciones de diseño específicas para ellos que se leerán del archivo CSS.

Hay mucho más que puedes lograr usando solo CSS y HTML.

Jugando con las fuentes

Si no agregas ninguna especificación de fuente en el archivo CSS o HTML, se mostrará texto en el tipo de letra predeterminado de tu computadora (normalmente es Times New Roman). Sin embargo, al usar CSS, puedes cambiar los estilos de fuente para que estén en sintonía con sus deseos o necesidades.

Cuando agregas la línea de código anterior a su hoja de estilo (después de la sección # contenido), hará que el texto del párrafo use la fuente Open-Sans y el tamaño del texto se mantendrá en 18px.

Agregar hipervínculos

Al crear una página web, a veces es necesario que establezca un enlace a un sitio web externo o a una parte diferente de tu propio sitio web. Este enlace que, al hacer clic en él, te lleva a una sección diferente en tpropio sitio web o a uno externo se llama hipervínculo. El “href” especifica el destino del enlace, mientras que la etiqueta <a> define los enlaces. No te preocupes, compartiremos un ejemplo:

Agrega esta etiqueta <a href=”https://www.google.es”> Ir a Google </a> al cuerpo de tu sitio web, aparecerá como Ir a Google y cuando un visitante haga clic en ella, se irán a la página de inicio de Google

Agregar imágenes

Con HTML, es tan fácil como usar una etiqueta y hacer referencia a tu imagen. La etiqueta <img> le permite agregar imágenes. He aquí cómo usarlo:

Dentro de las comas que siguen a src, agregará la ubicación de la imagen. En este caso, la imagen debe estar presente en el mismo directorio que su archivo de índice. La cadena siguiente a alt solo se mostrará en el navegador en caso de que la imagen no se haya podido cargar.

Creando tablas

Organizar la información a menudo se convierte en un requisito funcionalidado o de diseño y en HTML, también puedes hacerlo mediante el uso de tablas. Puedes hacerlo utilizando la etiqueta <table>. Para especificar un encabezado en la tabla, use la etiqueta <th> (encabezado de tabla) y para una fila debe usar la etiqueta <tr> (fila de tabla). Para los datos de la tabla, se usa la etiqueta <td>.

Después de aplicar el código, tu sitio web debería verse así.

Cuando trabajas con HTML y CSS, las posibilidades de jugar y hacer que tu sitio web sea más funcional y estéticamente más agradable son infinitas. Recorrimos algunos de los conceptos más fundamentales que debes tener en cuenta de cómo crear una página web desde cero. Internet está lleno de excelentes tutoriales y herramientas interactivas que ayudarán a aprender la codificación:

Palabras finales

En este tutorial, intentamos ayudar a los novatos a poner sus manos en un lienzo con creadores de sitios web y mostrarles cómo cómo crear una página web usando WordPress o incluso desde cero. Cualquiera sea el camino que hayas elegido para crear una página web, esperamos que lo hayas hecho bien y te deseamos la mejor de las suertes para ejecutarlo y mantenerlo.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Únete a cientos de suscriptores en todo el mundo

y consigue increíbles tutoriales y descuentos en tu email

Please wait...

¡Gracias por registrarte!

Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio po

AR$36
00
/mes