Crear tu Pagina Web en HTML con Bootstrap

Juan Carlos G 2020-02-04

📌 Suscríbete 🤘

Mi primera página web en HTML

Viajero web, en este tutorial intentare explicarte cómo puedes crear una página web con HTML estática atractiva y con un diseño profesional, sin invertir en Plugin o plantillas de pago, además la desarrollaremos con un editor de código gratuito el cual es muy buena opción si comienzas en el arte de la programación. Ya esta disponible la continuación de esta clase la cual es Crea tu primera página con NodeJS, no te lo puedes perder.

 

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

Vídeo de Mi primera página web responsiva con Bootstrap

Aquí tienes el vídeo que resume todo este artículo y que tiene todos los pasos para poder crear tu primera página web, te aconsejo que leas el texto para comprender aun mejor el vídeo. ¿Qué aprenderás en este vídeo? Aquí te dejo los puntos más importantes:

  • Un ejemplo de como estructurar tus proyectos
  • Aprenderás a maquetar en HTML
  • Dar un estilo profesional a tu página a través de hojas de estilos (Style Sheets)
  • Creación de Banner animado que sirva de cabecera en tu página
  • Como agregar las referencias CSS y JS a tu proyecto
  • Descubrirás que agregar Bootstrap y JQuery a tu página es sumamente sencillo para hacer que tu página sea responsiva y se visualice en todos los dispositivos
  • Modificar los estilos de Bootstrap para adecuarlo correctamente a tu página
  • Podrás insertar un vídeo de YouTube en tu página de una manera simple
  • Además, aprenderás como animar los elementos de tú página a través del scroll (Animate On Scroll Library)

Como puedes observar en esta clase aprenderás muchas cosas totalmente gratis así que no olvides suscribirte al canal de YouTube EWebik y activa la campanita para que no te pierdas nuestras próximas clases.

 

 

Esto es lo que necesitas para crear una página web con HTML

Voy a crear una lista de lo que necesitaremos para crear nuestra página web y las URLs donde los puedes descargar.

Y listo, nada más necesitas estas 3 herramientas de desarrollo web para poder crear tu primera página web, ¿Estas sorprendido? Pues te voy a desilusionar, si tú eres un desarrollador esto te vendrá como anillo al dedo para comenzar tu viaje en el desarrollo web, sin embargo, si eres un emprendedor y te gustaría ahorrarte unos dólares desarrollando tu página tú mismo, tengo que decirte que ¡puede ser! Siempre y cuando inicies con una página estática y sigas cada paso en este tutorial.

 

Continua aprendiendo con estas otras clases

 

 

¿Qué es una página web HTML estática?

Desde que aparecio la www(¿Qué es WWW?), una página web estática se refiere a que solo será informativa, esto significa que no cuenta con una funcionalidad que permita modificar ciertas partes de forma dinámica, para que quede más claro, la página estática que desarrollaremos contará con lo siguiente funcionalidades:

  • Animaciones o banners
  • Mostrará un video de YouTube
  • Texto informativo, imágenes, etc.

Como vez nuestra página estática no hará mucho, por ejemplo, en Facebook tu entras y te van cargando las publicaciones de tus amigos, a esto se le llama una página web dinámica, pero no te preocupes más adelante haremos páginas web dinámicas que te permitirán conectarla a una base de datos y capturar el correo de tus clientes.

 

¿Qué significa que una página sea responsiva?

Significa que se visualice correctamente en todos los dispositivos, celulares, laptop, PC, esto es muy importante hoy en día y es un factor determinante en el posicionamiento de páginas web en Google. También iré subiendo videos sobre posicionamiento web así que suscríbete al canal de YouTube y al boletín para que te avise cuando lo suba.

 

Comenzando la creación de la página web responsiva con bootstrap

Ahora seguiremos los siguientes puntos para crear nuestra página web, recuerda tenemos el vídeo para que puedas ir siguiente este tutorial desde YouTube. Bien, por favor descarga Visual Studio Code e instálalo en tu computadora, en este editor escribiremos todo el código que necesitamos para nuestra página web, si se te hace complicado descargar este editor, puedes usar block de notas, a mí en lo personal me es más cómodo un editor como Visual Studio Code ya que te permite escribir el código de una manera fluida y cómoda, pero si quieres usar block de notas adelante.

Ahora crea una carpeta en tu computadora con el nombre de tu proyecto, yo le llamaré “mi-primera-pagina-web”, dentro de esta carpeta crearemos todos los archivos que indica el vídeo que esta al principio y al final de este artículo.

 

Trabajando con el HTML de tu página web

 

HTML es un lenguaje de marcado que nos permite modelar la estructura de una página web

El lenguaje HTML aparece en 1980 gracias al físico Tim Berners-Lee quien propone este sistema de hipertexto para compartir documentos a traces de HTTP (¿Qué significa HTTP?). La palabra HTML en español significa lenguaje de marcas de hipertexto y se puede interpretar diciendo que todo el contenido como párrafos, títulos, imágenes, etc., deberán estar entre dos etiquetas o marcas que permiten su identificación para posteriormente ser presentados en pantalla. Para efectos de este tutorial aprenderemos a utilizar HTML5 que fue liberado en el 2014.

 

Etiquetas HTML

Las etiquetas o TAGS de HTML por ejemplo body tienen la siguiente estructura:

<nombre_etiqueta>Contenido etiqueta</nombre_etiqueta>

<!-- La mayoría de las etiquetas en HTML vienen en pares una para abrir e inicializar el
contenido <nombre_etiqueta> y la de cierre </nombre_etiqueta> -->

 

Estilos y atributos

Prácticamente todas las etiquetas de HTML tienen atributos que hacen que se comporten de diferente manera, es decir, a través de los atributos de las etiquetas podemos definir como queremos que se comporte o se visualice el contenido de cada etiqueta de allí nacen los estilos.

Los estilos nos permiten por ejemplo establecer el tipo de letra, su color, el fondo que tendrá el contenido, la ruta de una imagen, etc., por lo que si queremos darle vista a nuestro HTML necesitamos usar estilo y agregarlos mediante el atributo “style”, por ejemplo:

 

<p id="idParrafo" style="color:red;">Esto es un párrafo</p>

 <!—Esto hace que el color de la letra sea de color rojo -->

<!-- Existe la etiqueta <style> y la podemos agregar entre la etiqueta <head>

 para establecer nuestros estilos. -->

 

Estructura básica de HTML

Un archivo HTML está compuesto en su forma básica por la siguiente estructura:

 

<!DOCTYPE html><!--Etiqueta que define al documento como HTML5

 y ayuda a los navegadores a mostrar correctamente la página -->

<html>

<!--Etiqueta o elemento raíz del documento-->

<head>

     <title>Título de la página</title>

     <!--Título de la página-->

     <style></style>

</head>

<body>

     <!--Cuerpo, parte visible de la página-->

     <p>Pagina de inicio</p>

     <script></script>

</body>

</html>

 

Ahora HTML ha evolucionado y en nuestros días el código HTML debe ser escrito de una manera limpia, es decir, una buena práctica es que los estilos y código JavaScript (no te preocupes si no sabes que es JavaScript) vayan en archivos separados y sean invocados desde el archivo HTML como veremos más adelante.

 

Cómo funciona el CSS en una página web

Bien ya que conocemos la estructura básica del HTML ahora pasemos a ver que es CSS (Cascading Style Sheets) son hojas de estilos en cascada y es donde le damos diseño al código HTML modificando sus atributos, dimensiones, etc. y es aquí donde nos ayudara Bootstrap. Pero antes de pasar con Bootstrap expliquemos un poco cómo funcionan los estilos, realmente es muy fácil, solo debemos agregar entre la etiqueta <head> la siguiente línea de código.

<link rel="stylesheet" type="text/css" href="stilos.css ">

Con lo cual podrás invocar cada elemento del archivo stilos.css que afectara al HTML con las instrucciones que pongamos en él.

 

¿Qué es Bootstrap?

Es una biblioteca multiplataforma desarrollada por Twitter y es un conjunto de código abierto que proporciona plantillas de diseño para mejorar el diseño de un sitio web.

 

Porque utilizar Bootstrap en una página web

Bootstrap nos proporciona una serie de estilos que mejoran ciertos elementos de nuestra página web, lo que nos ahorra mucho tiempo en crear estilos para botones, etiquetas y otros elementos, esto es bueno porque no podemos centrar en darle personalidad y autenticidad a nuestra página.

 

Como agregar Bootstrap a una página web

Es muy fácil agregar los archivos de Bootstrap a nuestro proyecto, según la documentación que proporciona Bootstrap lo podemos hacer por varias formas, por ejemplo:

 

BootstrapCDN

Agrega los link CDN directamente en el head de tu htmlDistribución de JQuery

Puedes utilizar gestores de Paquetes como NPM o YARN

  • npm install bootstrap
  • yarn add bootstrap

También puedes utilizar gemas en Ruby

  • gem 'bootstrap', '~> 4.3.1'
  • etc.

 

Descargar los archivos de compilados

Solo dirígete al sitio oficial de Bootstrap y descarga los archivos de distribución agregalos a la carpeta del proyecto. Para más información mira el vídeo de esta clase para ver un ejemplo practico de como agregar Bootstrap a un proyecto web.

 

Desventajas de utilizar Bootstrap

Sencillamente es que al ser un elemento creado por un tercero si no haces un respaldo del recurso su creador puede modificarlo o discontinuar la biblioteca, sin embargo, Bootstrap es una biblioteca utilizada por miles de desarrolladores lo que lo hace improbable al menos en un buen tiempo.

 

Seguridad

Instalar certificado SSL gratis

El tema de seguridad es muy importante cuando ya tienes tu sitio web en producción y a pesar de que no soy un experto en este ramo si puedo darte un par de consejos para que tu sitio web no sea tan vulnerable, por ejemplo, en este artículo te muestro un ejemplo de como puedes Instalar un certificado SSL gratuito y alguna información extra sobre los tipos de certificados que hay, te sugiero que le des una revisada para que comprendas mejor este tema.

 

 

 

Vamos a codificar la página web

Aquí te dejo el código completo para que lo pegues en tu proyecto, todo el código está comentado para que lo entiendas, sin embargo, mira el vídeo en nuestro canal de YouTube donde está la explicación del código.

Si te crees que hemos cumplido y te ha gustado por favor ayúdame a compartir este articulo para que podamos seguir creando contenido, suscríbete a nuestro canal en YouTube para seguir nuestros tutoriales.

Repositorio: Mi primera página web

Suscríbete a mi Canal de YouTube de EWebik

 


EWebik.com

Juan Carlos G

Electrónica y diseño web


Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como Node JS, PHP, C# y Bases de datos, si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

@Puedes seguirme en mis redes

📌 Suscríbete 🤘