¿Cómo crear una página web?

Ya sea que esté considerando construir un nuevo sitio web o desee volver a hacer su sitio web actual, se enfrenta a algunas decisiones básicas, pero importantes.
¿Cómo crear una página Web?

En esta guía, lo ayudaremos con estas decisiones mostrando sus elecciones y explicando cómo las opciones específicas se adaptarán a sus necesidades únicas. Cubriremos todo, desde comprender qué tipo de sitio web necesita y elegir un nombre de dominio, hasta los toques finales que le ayudarán a lanzar su sitio web con éxito, sin importar cuáles sean sus objetivos.

Además, le mostraremos cómo usar herramientas o sistemas específicos para crear su sitio. Como ejemplo, explicaremos cómo puede crear un sitio web paso a paso con uno de los sistemas de administración de contenido ( CMS ) más populares de WordPress.org.

Los pasos esenciales para lanzar un sitio web:

  • Comprenda qué tipo de sitio necesita
  • Elija un nombre de dominio y proveedor de alojamiento
  • Instalar y configurar WordPress CMS
  • Diseña tu sitio y haz que se vea genial
  • Escribe y prepara tu contenido
  • Prueba antes y después del lanzamiento

Esperamos que esté entusiasmado con la posibilidad de tener su sitio web. Ahora, veamos cuáles son los pasos que debe seguir para hacerlo bien.

Comprenda qué tipo de sitio necesita

Hay diferentes tipos de sitios web. El tipo o los tipos de combinación que elijas dependerán de lo que quieras lograr con tu sitio y de la funcionalidad que necesitarás para lograrlo.

Los siguientes son los principales tipos de sitios web:

Un blog puede ser una característica adicional para cualquier sitio web, o puede ser un tipo de sitio independiente por sí mismo. Los blogs generalmente se organizan en orden cronológico, con la entrada más reciente en la parte superior de la página principal y las entradas antiguas en la parte inferior.

Sitio de tarjeta de visita. Para algunas pequeñas empresas, un simple sitio web de una página con el nombre, la descripción, la información de contacto y tal vez un logotipo puede ser todo lo que se necesita. También puede incluir información sobre el producto, pero el concepto básico es un sitio web de una página que representa a su empresa o usted mismo.

Sitio de cartera. Un sitio de portafolio es similar al sitio web de tarjetas de visita, excepto que tendrá una sección en la página web donde exhibirá su trabajo y le dará opciones a las personas para contactarlo. Los estudios de fotografía comúnmente utilizan este tipo de sitio web, al igual que las empresas de diseño y otros esfuerzos creativos.

Sitio del folleto del producto. Este tipo de sitio web es una extensión de los esfuerzos de ventas y marketing de su empresa. Podrá incluir los bienes y servicios que ofrece su empresa para que los visitantes naveguen. Este sitio web puede incluir algunas pautas de precios, pero no permite a los clientes realizar compras en línea.

Sitio de comercio electrónico. Con un sitio de comercio electrónico, podrá exhibir sus productos o servicios y permitir que los visitantes los compren en línea. Al principio, el proceso de instalación de un sitio de comercio electrónico puede parecer desalentador, pero hoy en día existen muchos métodos y herramientas simplificados que le permitirán vender en línea.

Seleccione la herramienta adecuada para construir un sitio web

Con tantas opciones disponibles en la actualidad, puede ser difícil elegir los mejores instrumentos para el trabajo. Elegir la plataforma en la que construyas tu sitio será una de las decisiones más importantes que tomes. Esta elección es fundamental porque estará vinculado a esa plataforma durante un tiempo y nunca es fácil (o posible) mover su sitio web de una plataforma a otra.

Las soluciones de creación de sitios web se pueden dividir en dos grupos: sistemas de administración de contenido autohospedado y plataformas hospedadoras de sitios web alojadas.

La mejor y más popular herramienta para hacer un sitio web es el sistema de gestión de contenido (CMS) de WordPress. Lo recomienda el 90 por ciento de los expertos que hemos encuestado .

Puede crear cualquier sitio web con WordPress, ya sea un sitio web de tarjetas de presentación de una página, un sitio con un blog e incluso un sitio web de comercio electrónico.

Elija un nombre de dominio y proveedor de alojamiento

Para crear su nuevo sitio web con la plataforma recomendada de WordPress, necesitará un nombre de dominio y un proveedor de alojamiento web.

Nombre de dominio

Una vez que haya seleccionado la plataforma adecuada para su sitio, debe comenzar a pensar en un nombre de dominio. Este dominio será yourname.com, yourbusiness.com o algo similar.

Si está promocionando usted mismo, querrá usar su nombre y apellido. Piensa johnsmith.com. Incluso si no se está promocionando, no es una mala idea obtener su nombre como dominio ahora, en caso de que quiera usarlo en el futuro. Si está promocionando su negocio, querrá usar el nombre de su compañía. Piensa en "yourbusiness.com".

Para la mayoría de los sitios web, el primer objetivo al elegir un nombre de dominio es obtener el dominio .com de primer nivel siempre que sea posible. Aquí hay una guía útil para ayudarlo a conocer los detalles y secretos para seleccionar un nombre de dominio válido.

Proveedor de alojamiento web

Después de elegir un nombre de dominio, seleccionar servicios de alojamiento confiables será una de las decisiones más importantes que tomará. En gran medida, la funcionalidad y el rendimiento de su sitio web dependerán de su proveedor de alojamiento. El host se asegura de que su sitio esté disponible para lectores potenciales las 24 horas del día, los 7 días de la semana, y es donde se almacenan sus archivos en línea.

El host web incorrecto puede causar muchos problemas con su sitio web. Imagínese elegir una empresa de telefonía móvil que no tiene recepción. Su proveedor de alojamiento web es una pieza importante del rompecabezas para mantener un sitio de Internet exitoso. Por lo tanto, es crucial que elija un proveedor confiable.

La idea de construir un sitio web desde cero puede ser algo desalentador para los principiantes. Pero no tiene por qué serlo. De hecho, codificar un sitio web básico puede ser extremadamente simple, siempre y cuando se conozcan algunas etiquetas HTML.

Aquí te muestro cómo codificar tu propio sitio web y luego publicarlo en la web. Tampoco tardará mucho. Como pronto descubrirás, ¡construir tu propio sitio web es mucho más fácil de lo que parece!

¿Qué es un sitio web?

Antes de crear nuestro propio sitio web, debemos entender qué es realmente un sitio web.

Un sitio web es simplemente una colección de páginas web. Las páginas web suelen estar enlazadas entre sí, pero no siempre. Para crear un sitio web, simplemente crea una o más páginas web.

Para que el mundo lo vea, el sitio web (o colección de páginas web) debe estar alojado en un servidor web. Este alojamiento web normalmente lo realiza un proveedor de alojamiento (también conocido como empresa de alojamiento o alojamiento web ). Un proveedor de alojamiento es simplemente una empresa que proporciona alojamiento web a sus clientes.

¿Qué es una página web?

Una página web es un archivo de texto que contiene una combinación de texto y código de "marca". Cuando el documento se visualiza en un navegador web, se muestra (o se "procesa") según lo previsto. Cuando se ve en un editor de texto (como el Bloc de notas), muestra el texto y el código de marcado.

Por lo tanto, una página web consta de 2 vistas:

  • La vista "renderizada": esto es lo que ve cuando ve la página web en su navegador.
  • La vista del "código fuente": este es el código "detrás de la escena" que especifica el contenido y cómo debe aparecer la página.

Puede ver el código fuente de cualquier página web en la web. El código fuente generalmente se abrirá en una nueva pestaña.

Para ello, utiliza la View Page Sourcefunción de tu navegador . Por ejemplo, si usas Google Chrome, ve View > Developer > View Source. Si usas Firefox, ve Tools > Web Developer > Page Source. Según el dispositivo y el navegador, también puede hacer clic con el botón derecho en cualquier lugar de la página para que aparezca la View Sourceopción.

El código fuente de una página web está formado por etiquetas HTML. Algunas etiquetas son obligatorias (todas las páginas web deben usarlas), pero la mayoría de las etiquetas son opcionales. Las etiquetas reales que utilice dependerán del contenido que desee que aparezca.

Echa un vistazo al siguiente código.

Código de ejemplo 1:

<! DOCTYPE html>
< html >
  < cabeza >
    < título > </ título >
  </ cabeza >
  < cuerpo >
  </ cuerpo >
</ html >

El código anterior puede ser una plantilla para cualquier página web. Si ve el código fuente de cualquier página web, debe encontrar estas etiquetas. Puede que necesites buscarlos, pero deberían estar allí.

Debería poder ver la htmletiqueta cerca de la parte superior y </html> cerca de la parte inferior. Esto se debe a que todas las demás etiquetas HTML deben ir entre las htmletiquetas y </html>. (La única excepción a esto es la etiqueta <! DOCTYPE ...>, que especifica la versión de HTML / XHTML que usa el documento. No entraremos en esta etiqueta aquí, pero si está interesado, aquí hay más información ).

Las bodyetiquetas contienen todo el contenido que se mostrará en la página. Por ejemplo, si desea mostrar las palabras "Bienvenido a mi página web", deberá colocarlas entre las etiquetas body/body.

Aquí hay otro ejemplo. Esta vez, vamos a añadir algo de contenido.

Ejemplo de código 2:

<! DOCTYPE html>
< html >
  < cabeza >
    < título > ¡Hola mundo! </ título >
  </ cabeza >
  < cuerpo >
    < h1 > Mi primera página web </ h1 >
    < p > ¡ Bienvenido a mi primera página web! </ p >
    < p > Aquí hay un nuevo párrafo ... </ p >
  </ cuerpo >
</ html >

Si tuviera que abrir el archivo HTML anterior en su navegador, debería verse algo como esto:

Como puede ver, cualquier texto rodeado por h1/h1aparece como un encabezado (el encabezado nivel 1 es exacto). El texto dentro de las petiquetas se muestra como texto de párrafo normal. Puede agregar tantas etiquetas HTML como desee a una página web.

Hay muchas más etiquetas HTML (más de 100). Algunas etiquetas se usan para formatear (como h1), otras se usan para mostrar objetos (como imágenes, formularios, tablas, etc.).

¿Cómo uso este código?

Hasta ahora te he mostrado el código utilizado para crear una página web básica. También te he mostrado cómo se ve esa página web en un navegador. Ahora te voy a mostrar cómo hacer esto tú mismo.

Para crear una página web como el ejemplo anterior, haga lo siguiente:

  1. Abre un editor de texto (como Notepad o Simpletext) o editor HTML
  2. Abra una página nueva (en blanco) (por ejemplo, File > New...)
  3. Copie el código del Ejemplo de código 2 y péguelo en su archivo de texto en blanco (o vuelva a escribirlo si lo prefiere)
  4. Guarde el archivo como index.html(tome nota de donde lo guardó)

¡Felicidades! ¡Acabas de crear tu primera página web!

Ahora, puede seguir adelante y ver su nueva página web en su navegador. Para ello, puede hacer doble clic en el archivo. Si esto no funciona, intente abrir una nueva ventana del navegador y luego arrastre el archivo a ella. De lo contrario, dependiendo de tu navegador, deberías poder irFile > Open...

Agregando otra página web

Agregar otra página web es tan fácil como crear la primera. De hecho, solo puede hacer una copia de la primera si así lo desea, y luego modificarla como desee. Por ejemplo, podría crear un hipervínculo para que las dos páginas estén vinculadas. De esa manera, al hacer clic en el enlace se mostrará la otra página.

Entonces, vamos a crear otra página web. En esta página web, tendremos un hipervínculo que apunta a nuestra primera página web. Para hacer esto, nuestro código se vería así.

Código de ejemplo 3:

<! DOCTYPE html>
< html >
  < cabeza >
    < título > ¡Hola mundo! </ título >
  </ cabeza >
  < cuerpo >
    < h1 > Mi segunda página web </ h1 >
    < p > ¡ Bienvenido a mi segunda página web! </ p >
    < P > Aquí < un  href = "index.html" > mi primera página web </ a > </ p >
  </ cuerpo >
</ html >

La página HTML anterior se verá así en un navegador:

Entonces, adelante, crea tu segunda página web. Esta vez lo llaman, dicen ... page_two.html.

Por lo tanto, en caso de que haya olvidado cómo hacerlo, estos son los pasos para crear su segunda página web:

  1. Abre un editor de texto (como Notepad o Simpletext)
  2. Abra una página nueva (en blanco) (por ejemplo, File > New...)
  3. Copie el código del Ejemplo de código 3 y péguelo en su archivo de texto en blanco (o vuelva a escribirlo si lo prefiere)
  4. Guarde el archivo como page_two.html(guárdelo en el mismo directorio que su archivo anterior)

¡Felicidades! Acabas de crear tu segunda página web. ¡Podrías decir que has creado tu primer sitio web!

Agregando más contenido a su página web

Ahora que ha creado su primer sitio web, puede agregar todo el contenido que desee. Por ejemplo, podría agregar más texto y formatearlo, podría agregar elementos de formulario, imágenes y mucho más.

Ayuda para mi Web proporciona muchos códigos HTML que puede copiar y pegar en sus propias páginas web. Estos están disponibles en la biblioteca de códigos HTML y en la página de ejemplos HTML.

Siéntase libre de copiar / pegar cualquiera de estos códigos HTML en su propia página web y cambiarlos como desee. No tengas miedo de experimentar.

Listo para publicar su sitio web?

Todo lo que has hecho hasta ahora ha estado en tu computadora local. Las únicas personas que pueden ver su página web son aquellas que tienen acceso a su computadora.

Para publicar su sitio web para que todo el mundo lo vea, deberá "subir" su sitio web al servidor de un proveedor de alojamiento de sitios web. Para hacer esto, necesita abrir una cuenta con un proveedor de alojamiento web. Una vez que hayas hecho esto, podrás dar tu propia dirección ".com" a quien quieras ver en tu sitio web.

La apertura de una cuenta de alojamiento suele ser sencillo. La parte más difícil a menudo es decidir qué plan de hosting usar. Si recién estás comenzando, un plan de alojamiento básico suele ser suficiente.

Entonces, para publicar su sitio web, usted simplemente:

  1. Abra una cuenta con un proveedor de hosting
  2. Suba su (s) página (s) web (su proveedor de alojamiento web le explicará cómo hacerlo una vez que se registre)

¡Es así de simple!

Nuestro sitio asociado, ZappyHost, ofrece excelentes planes de hospedaje para principiantes hasta profesionales. (Revelación completa: ZappyHost es un sitio asociado y gano una comisión por las ventas de cualquier producto).

Por ahora, el plan de Economía de Linux debería ser más que suficiente. Es el plan más barato, pero obtienes muchas funciones y suficiente espacio en disco. Si tiene muchas fotos / imágenes para su sitio web, podría estar mejor con un plan Deluxe o Premium, ya que estos planes ofrecen mucho más espacio en el disco.

Si prefieres comparar precios primero, revisa mi Tutorial de Alojamiento Web . Este tutorial explica con más detalle, qué es el alojamiento web y cómo elegir un proveedor de alojamiento.

Constructores de sitios web en línea

Me doy cuenta de que no todos quieren pasar el tiempo aprendiendo HTML, etc. para crear su propio sitio web. ¡Muchas personas solo necesitan tener un sitio web en funcionamiento lo antes posible sin tener que hacer todo lo técnico!

Si te suena así, ¡este creador de sitios web en línea de ZappyHost se creó solo para ti! Esta es una herramienta que le permite crear un sitio web en minutos. Simplemente elige una plantilla, agrega contenido. Es así de simple. Por supuesto, puede personalizar su plantilla cargando sus propias imágenes o seleccionando entre las miles de fotos de archivo.

Y obtén esto ... ¡el alojamiento y el nombre de dominio están incluidos absolutamente GRATIS! ¡Si te gusta el sonido de eso, échale un vistazo!

(Revelación completa: ZappyHost es un sitio asociado y gano una comisión por las ventas de cualquier producto).

Más recursos

Aquí, en Ayuda para mi Web, encontrarás miles de páginas de información útil sobre la creación de sitios web. A continuación hay algunos que podrían ser útiles para hacer su propio sitio web:

  • El tutorial Crear un sitio web describe los dos enfoques principales para crear un sitio web (es decir, codifíquelo usted mismo o use un creador de sitios web). ¡Este artículo le muestra cómo ahorrar dinero en una cuenta de creador de sitios web, así como obtener un nombre de dominio gratis en el proceso!
  • El tutorial Construir un sitio web es una gran página para marcar. Es el principal punto de entrada a todos los tutoriales relacionados con el desarrollo de sitios web.
  • Como se mencionó, tenemos Códigos de Copiar / Pegar y Ejemplos de HTMLque puede usar para copiar y pegar en sus propias páginas web.
  • Y, siempre puedes visitar la página de inicio de Ayuda para mi Web para ver rápidamente lo que puedes encontrar en Ayuda para mi Web

Tagged with:

Sucender es un desarrollador informatico, apasionado del diseño web, HTML, CSS, JavaScript y Node.js. Available for hire.

View all contributions by

Website: http://www.ayudaparamiweb.com/

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.