Post Actualizado en marzo 5, 2020
Cómo crear un sitio web: una guía completa para principiantes
En esta entrada vamos a explicarte cómo crear página web desde cero. En otras palabras, te enumeramos los pasos básicos que necesitas hacer para crear y lanzar un sitio web funcional. Comprender y escribir HTML La primera cosa que necesitas aprender para poder crear tu propio sitio web es los básicos de HTML. Hoy en […]
En esta entrada vamos a explicarte cómo crear página web desde cero. En otras palabras, te enumeramos los pasos básicos que necesitas hacer para crear y lanzar un sitio web funcional.
Comprender y escribir HTML
La primera cosa que necesitas aprender para poder crear tu propio sitio web es los básicos de HTML.
Hoy en día, es muy fácil promocionar algo en la Web utilizando diferentes redes sociales o una página de aterrizaje personal, pero si quieres realmente construir tu propio sitio web, tienes que aprender un poco de HTML y CSS. Afortunadamente, podemos ayudarte con eso.
Lo que necesitarás
- Un editor de texto regular para escribir HTML
- Un navegador web para comprobar tu código HTML
- Un deseo de aprender cómo funciona la Web
Como puedes ver, realmente no necesitas mucho para empezar.
¿Qué editor de texto necesito?
Para escribir HTML, necesitas un editor de texto sencillo. Si te interesa una solución gratuita, puedes elegir entre muchas opciones disponibles en la Web, como, por ejemplo, Notepad++ (Windows), Kod (Mac) o Sublime Text tanto para Windows como para Mac. Hay varios otros editores de texto en la Web, por lo que puedes utilizar cualquiera de ellos.
Nota: Debes guardar todos los archivos que creas en tu editor de texto con la extensión .html, por ejemplo, “mi_primera_pagina_web.html”. Podrás editar un documento .html en el editor de texto a tu elección, además de verlo en tu navegador web. Y lo que ves cuando abres este archivo en el navegador será muy diferente de lo que ves cuando lo abres en tu editor de texto.
¿Qué es un documento HTML?
HTML, que se “descifra” como HyperText Markup Language, es sólo un conjunto de textos guardados en el formato de documento que tu navegador web identifica como HTML. Cuando ves una imagen en una página web, ella está simplemente mencionada en el texto del documento HTML, pero no se incluye físicamente en este archivo. Un documento HTML en realidad sólo ofrece un conjunto de instrucciones basadas en texto que un navegador web puede interpretar. Por ahora, solo necesitas entender que HTML es un conjunto de instrucciones para tu navegador web que vas a aprender a escribir.
¿Qué son etiquetas?
Las etiquetas se utilizan en HTML para especificar determinados elementos de la página para que el navegador web entienda cómo renderizarlos. Las etiquetas básicas son <html> y </html>. Estas son las etiquetas HTML dentro de las cuales se coloca un documento HTML entero. El símbolo / es lo que determina que una etiqueta se cierre. La mayoría de las etiquetas tiene este aspecto. Por ejemplo, si deseas que una parte de texto sea en negrita, necesitas utilizar esta etiqueta <b>texto en negrita</b>.
También hay etiquetas de este tipo: <img src=”image.jpg” width=”640” height=”480” />
La etiqueta mencionada anteriormente es una etiqueta de imagen. Probablemente ya has descubierto esto. Su función es mostrar una imagen. Hay dos cosas a las que tienes que prestar atención. En primer lugar, no hay una etiqueta final. Es porque la etiqueta img es una etiqueta que se cierre automáticamente. No se requiere una etiqueta final, ya que no hay nada que se coloca entre una etiqueta inicial y una etiqueta final. Sin embargo, puedes notar un símbolo / al final que se usa para determinar el final de la etiqueta. Otra diferencia que puedes notar es que esta etiqueta tiene un montón de atributos. Los atributos son elementos como src=”” y height=”” que describen una etiqueta con más detalle; en caso de la etiqueta img, el atributo source (src) es obligatorio.
El atributo src especifica que el archivo de imagen que queremos mostrar es image.jpg. Debido a que sólo mencionamos el nombre del archivo, el navegador presume que guardamos ese archivo de imagen en la misma ubicación en la que se encuentra nuestro documento HTML. Otros atributos simplemente especifican la altura y el ancho de la imagen. Sólo el atributo src es un elemento obligatorio de toda la etiqueta de imagen, mientras que si no especificas la altura y el ancho de la imagen, el navegador web no entenderá cuánto espacio dejar y seguirá reajustando la página durante que se carga.
Eso es todo lo que realmente necesitas saber acerca del código HTML básico.
Estilos y CSS
Ahora es un momento bueno para aprender algo sobre los estilos y CSS.
¿Qué es CSS?
CSS significa Cascading Style Sheets y es un lenguaje que tu navegador utiliza para interpretar cómo deben aparecer diferentes elementos de una página web. El lenguaje CSS es bastante fácil de entender: tú defines propiedades CSS específicas que abarcan todo, comenzando por las dimensiones de diferentes elementos (anchura y altura) y los textos (peso, estilo, tipo de fuente, color, etc.), y terminando por el posicionamiento y el espaciado (márgenes y rellenos).
En dos palabras, si hay algo que tiene que ver con la apariencia de un elemento, tiene que ver con CSS. Para ampliar la metáfora, HTML y sus elementos son los huesos del sitio. Ellos crean una estructura. CSS “viste” tu sitio web y hace que se vea bien.
Por ejemplo, si querías marcar una parte de texto con otro color, la propiedad CSS correspondiente es, sin ninguna sorpresa, el color. Para definir la propiedad del color, simplemente escribe: la palabra color, dos puntos, determina el estilo y, a continuación, termina la propiedad con un punto y coma (todo en inglés). Por ejemplo, color: red;
¿Cómo aplicar CSS a elementos?
Por supuesto, necesitas saber cómo aplicar los estilos CSS para que los elementos de tu página web los reflejen. (No puedes simplemente escribir “color: red;” y esperar a algo). Puedes utilizar CSS para aplicar estilos a cualquier elemento de tu página web de una de las siguientes tres maneras:
- Inline styles/Estilos en línea: este método es el mejor para aplicar estilos a un elemento de manera rápida y fácil. Puedes agregar estilos en línea a cualquier elemento por medio de la definición del atributo de estilo del elemento determinado. Por ejemplo, <p style=”color:red;”>El texto dentro de esta etiqueta será rojo.</p> Puedes definir más de una propiedad utilizando los estilos en línea, pero siempre necesitas separar ellos con el punto y coma: <p style=”color:red; font-family:Helvetica; font-size:20px;”>El texto dentro de esta etiqueta será rojo, tendrá el tamaño de 20 píxeles y será escrito con la fuente Helvetica.</p>
- Internal stylesheets/Hojas de estilo internas: dentro del documento, puedes definir estilos para varios elementos de la página con la ayuda de los selectores. Las hojas de estilo internas tienen este aspecto: <code><style type=”text/css”>
h3 {
color:red;
font-family:Helvetica;
font-size:20px;
}
</style> En este ejemplo, h3 es un selector. Este selector define que “Todos los elementos H3 en esta página deben utilizar los siguientes estilos.” También puedes definir selectores, utilizando clases o IDs de elementos.
- External stylesheets/Hojas de estilo externas: estas hojas de estilo se guardan en un archivo externo que tiene una extensión .css (por ejemplo, style.css.). La sintaxis de las hojas de estilo externas es igual a lo que puedes ver en las hojas de estilo internas, pero en este caso no se requiere la declaración del estilo. En su lugar, necesitas colocar un enlace a una hoja de estilo externa de la siguiente manera: <link href=”stylesheets/style.css” media=”screen” rel=”stylesheet” type=”text/css” /> En este caso, se dice al navegador web: “Cuando se carga esta página, busca el archivo CSS aquí.”
¿Cuándo usar clases, identificadores y selectores?
En la mayoría de los casos, por las razones de organización, se utilizan las hojas de estilo externas. Pero, ¿cómo entender qué selectores utilizar? Vamos a examinar las opciones disponibles:
- Selectores de elementos: Necesitas utilizar un selector de elemento, cuando deseas que la mayoría de los elementos de ese tipo tenga el mismo aspecto en tu página web. Así que, si quieres que todos los elementos h2 sean de 30 píxeles, puedes añadir lo siguiente a tu archivo CSS: <code>h2 {
font-size:30px;
}
- Selectores de clases: Las clases son útiles para los estilos amplios que deseas aplicar a más de un elemento, pero en caso cuándo te gustaría utilizar estos estilos de una forma un poco más selectiva. Por ejemplo: <code>.red {
color:red;
} El punto (.) antes del texto “red” dice al navegador que este selector es una clase que estamos creando. Ahora, en cualquier elemento de la página, puedes agregar un atributo class=”red” y su texto será rojo.
- Selectores de IDs: Definido en CSS por un hash precedente (#), el selector de ID se utiliza para aplicar estilos a un elemento específico único. Esencialmente, esta es una forma de aplicar estilos a un elemento específico sin usar estilos en línea y manteniendo todos tus estilos en un solo lugar. Si querías que una div de 800x600px tenga un fondo rojo llamado my_red_div, todo se vería así: <code>#my_red_div {
width:800px;
height:600px;
background:red;
}
Ahora te guiaremos a través del proceso de creación de un sitio desde cero https://www.templatemonster.com/es/como-crear-un-blog.php .
En esta etapa no se trata sólo de la codificación. También se requieren algunas habilidades básicas de diseño. Es decir, necesitas saber cómo preparar los gráficos para la Web. Además, necesitas saber algunas cosas sobre los servidores web.
Diseño
No vamos a profundizar en cómo diseñar un sitio web. Por ahora, ya debes tener el diseño de tu sitio web preparado, pero hay algunas cosas que tenemos que discutir antes de empezar a aprender cómo traducirlo al código.
La cosa más importante es que tus opciones de fuentes están un poco limitados en línea. Aunque puedes utilizar la regla @font-face en CSS para cargar fuentes externamente, esto no es compatible con los navegadores web “antiguos”. También puede ser que necesites derechos para usar ciertos tipos de letras con esta etiqueta. Dicho esto, puedes utilizar @font-face para resolver el problema de las opciones limitadas de fuentes en la Web, pero si todavía no estás listo para sumergir en ese mundo, tienes que utilizar un servicio de fuentes web como WebType o limitarte a las fuentes “web-safe” (es decir, seguras para la Web).
¿Cuáles fuentes son seguras para la Web?
Times New Roman y Arial son las opciones más comunes, pero la mayoría de los sistemas operativos ofrecen varias otras fuentes incorporadas que también se consideran seguras para la Web. Incluso las fuentes como, por ejemplo, Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New y Georgia.
¿Debo usar imágenes?
En segundo lugar, es necesario determinar lo que va a ser una imagen y lo que no. Hoy en día, no es obligatorio usar imágenes, ya que HTML y CSS pueden manejar muchas de las cosas complejas que solíamos hacer con la ayuda de las imágenes. Los menús, por ejemplo, se pueden crear con facilidad a través de una lista desordenada en CSS. En general, no es necesario que el texto se representa como una imagen, pero en algunos casos todavía puedes necesitar hacerlo (por ejemplo, si un texto se combina con un gráfico).
Por último, es necesario determinar cuáles imágenes van a mostrarse como imágenes reales y cuáles de ellas – como fondos. ¿Cómo determinar esto? Si tienes un texto que debe aparecer por encima de una imagen (por ejemplo, con un menú), entonces, ya tienes una respuesta: tu imagen será un fondo. Una vez que hayas determinado esto, puedes pasar al siguiente paso (“Preparación”).
Preparación
Primero, necesitas medir tu diseño. Esto es algo que generalmente tienes que hacer antes de iniciar a desarrollar tu diseño, pero necesitas unas medidas específicas para comenzar a codificar. No es necesario saber cada una de las medidas, pero necesitas saber las medidas de la estructura de tu layout principal. Por ejemplo, si tienes un lado izquierdo de la página y un lado derecho de la página, ya sabes su anchura (y la altura, si no varía). También necesitas conocer el ancho del espaciado entre ellos y el ancho total de todo lo combinado. Si tu diseño está basado en una cuadrícula (grid) y se alinea con todo muy bien, lo más probable es que la cabecera de tu sitio tiene esta misma anchura también. Básicamente, es necesario saber las dimensiones de cada elemento principal del sitio.
Una vez que tengas las medidas, podemos empezar a exportar imágenes. En muchos casos, no necesitarás exportar muchas imágenes, porque puedes recrear la mayor parte de tu diseño con HTML y CSS (y JavaScript). Para pocas imágenes que todavía necesitas exportar, es necesario especificar un formato adecuado. Es decir, tienes que elegir entre JPEG y PNG. Cuando tus imágenes son complejas, como las fotos o las ilustraciones de muchos colores, en general, es mejor optar por JPEG. Si tienes imágenes simples o quieres que tus imágenes tengan fondos transparentes, tienes que guardarlas como archivos PNG de 24 bits.
A la hora de guardar tus imágenes, necesitas algún lugar donde puedes poner ellas. Por esta razón, y porque vas a tener un montón de otros archivos una vez que comiences a desarrollar tu web, en esta etapa tienes que empezar a organizar tu sitio web. Si planeas desarrollar un sitio web más complejo, te recomendaría estructurar todo con la ayuda de la arquitectura de Model View Controller (MVC), pero como en este post estamos tratando de desarrollar una página sencilla, te recomiendo que crees los siguientes directorios en el directorio raíz del sitio:
- css
- images
- scripts
Pues, vas a guardar tus imágenes en el directorio /images y tus hojas de estilo CSS en el directorio /css. El directorio de secuencias de comandos es donde puedes guardar los archivos JavaScript y otros scripts.
En el directorio raíz, también es necesario crear un archivo index.html. ¿Qué es index.html? Digamos que tienes un archivo HTML único llamado mydoc.html. Si lo subes a tu servidor web, es decir, a tu sitio misitioweb.com, cada vez que alguien visita misitioweb.com, ve una lista de los directorios de los archivos que has subido o, posiblemente, nada en absoluto. El nombre del archivo index.html indica al servidor web que debe mostrar ese archivo si alguien va a ese directorio específico. Si pones el archivo index.html en tu directorio de imágenes, cada vez que alguien visita http://misitioweb.com/images, ve una representación del contenido HTML de ese index.html. Básicamente, un archivo index.html es el archivo HTML predeterminado para mostrar, por lo que siempre necesitas uno.
Pues, es hora de utilizar los conocimientos de HTML y CSS recién obtenidos para desarrollar tu página web.
Lanzamiento
Una vez que tu sitio web esté terminado, es necesario lanzarlo. Esto a menudo no implica mucho más que subirlo a tu servidor web. Por lo general, puedes hacer esto a través de FTP o SFTP, por lo que vas a necesitar una aplicación especial. Todo lo que necesitas hacer es utilizar tu aplicación de transferencia de archivos preferida para conectarse a tu servidor web a través de FTP. Simplemente copia los archivos y pega ellos en la carpeta raíz del servidor, y ellos deben volverse inmediatamente visibles en tu sitio web.
Elección de un proveedor de hosting
Esta etapa es probablemente la parte más fácil de todo el proceso de creación de un sitio web e implica dos sencillos pasos:
- Encontrar y adquirir un plan de hosting adecuado
- Subir tus archivos a tu host
Una vez que hayas hecho eso, cualquier persona con acceso a la web podrá ver tu sitio. Y Google podrá encontrarlo.
Paso 1: Encontrar y adquirir un plan de hosting adecuado
Puedes gastar todo el día en la elección de un hosting adecuado. En dos palabras, la elección de un host parece a la compra de cualquier otra cosa en línea: es necesario hacer una cierta investigación, encontrar unos hosts que puedan satisfacer tus necesidades, y quizás leer las recomendaciones de otros usuarios antes de tomar una decisión.
Sea cual fuere el servicio que eliges, hay dos cosas básicas que necesitas:
- Un nombre de dominio: Se trata, como probablemente ya sabes, de la URL de tu sitio. Por ejemplo, misitioweb.com.
- Un plan de alojamiento: Este es el servicio que incluye el espacio en disco y el ancho de banda para tu sitio. Es necesario para que tu sitio web sea visible para otros internautas.
En cuanto a la compra de un plan de hosting y un dominio, puedes elegir entre dos opciones: adquirir un nombre de dominio por separado en un sitio de algún registrador de dominios o adquirir un plan de hosting que ya incluye un dominio. Muchos proveedores de hosting incluyen dominios en sus planes de alojamiento.
Así que, elige un plan de hosting y un dominio adecuado. Una vez que hayas hecho esto, estarás listo para lanzar tu sitio.
Paso 2: Subir archivos a tu host
Esta es la parte increíblemente fácil.
- Inicia sesión en el panel de control de tu host.
- Encuentra las credenciales de FTP (o para aún mejor seguridad, las de SFTP). Básicamente se necesita un nombre de usuario y contraseña de FTP, SFTP o SSH. Si tu host no crea un usuario de FTP de manera predeterminada, debe haber una posibilidad de crear uno en alguna parte de su panel de control.
- Ahora abre un cliente FTP de tu elección. Cyberduck es un cliente FTP gratuito de código abierto (disponible para Windows y Mac) que puede ser una gran opción, si estás buscando algo gratis y aún no tienes un favorito.
- Haz clic en el botón Open Connection/Abrir conexión, elige el tipo de conexión (FTP o SFTP), escribe tu nombre de dominio, nombre de usuario y contraseña y haz clic en Connect/Conectar. Si todas las credenciales han sido introducidas correctamente, verás una lista de directorios de archivos o carpetas de tu dominio.
- Encuentra la carpeta raíz de tu dominio. Y todo lo que queda hacer es subir los archivos del sitio desde tu computadora local a tu servidor. Todo es muy sencillo: simplemente arrastra los archivos desde tu escritorio a la carpeta raíz que has abierto en Cyberduck (o en cualquier otro cliente FTP que usas). Puesto que tu sitio web es probablemente bastante ligero, todo debe subirse dentro de sólo unos segundos, y tu sitio de inmediato se volverá visible para los internautas!