¿Cómo crear una página web?

 ¿En algún momento se te ha ocurrido o te gustaría crear tu propia página web?

Entonces estas en el lugar correcto, porque hoy te enseñare a crear una página web desde cero, te mostrare que lo que puedes imaginar lo puedes codificar.

Hola que tal, soy yo de nuevo, tu amigo Yisus y esta vez enseñando a aprender a hacer una página web sin tanta dificultad, ahora ¡comencemos!.


Herramientas

para poder crear una página web es necesario tener una computadora o laptop para hacer posible codificar lo que imaginas, además de un editor de código como por ejemplo:
  • Visual Studio Code
  • Sublime Text
  • Notepad++
  • Vim

Pero personalmente yo te recomiendo Visual Studio Code ya que es más cómodo, fácil de usar, es amigable y sobre todo es gratis, disponible tanto para PC y MAC.
 Ahora ya teniendo estas dos cosas ya podemos programar nuestra página web, siguiendo estos pasos:

Pasos para crear una página web

  1.   Crear una carpeta: Vamos a crear una carpeta con un nombre que identifiques para tu página web, ya sea en el almacenamiento de tu PC o en una memoria USB, por ejemplo en mi caso la carpeta se llamara "web"

2. Organización: Yo en lo personal te recomiendo tener un orden en la carpeta para ubicar cada archivo, imágenes, estilos, etc. Por ejemplo cree dos carpetas, una para imágenes y otra para estilos.


3. Creación de archivos: 

Ahora vamos a crear nuestros archivos, uno con formato HTML y otro con el formato CSS, ya que uno será nuestro elemento principal y el otro será el estilo. Por ejemplo en este caso mi archivo HTML se llama "index.html" y mi archivo CSS se llama "style.css".

4. Empezar a codificar:

HTML

Comenzamos con la estructura de HTML5 para poder mostrar en el navegador lo que estemos escribiendo o agregando, escribiremos "!" o la palabra "html5" y saldrá una opción para poder agregar la estructura, y esta es la estructura:


Ahora tenemos toda la libertad de escribir para nuestra página web en este caso es mi ejemplo:



 Cada etiqueta tiene su función, la cual te explicare su función en la página:

  1. <div>: Esta etiqueta tiene la función de ser como una caja para nuestros textos e imágenes teniendo una mayor facilidad para acomodar nuestros elementos a la hora de estilizar.
  2. <h3> y <h4>: Estas etiquetas funcionan para hacer títulos, subtítulos, títulos secundarios, etc. dependiendo el número cambiara el tamaño.
  3. <p>: Esta etiqueta es especialmente para escribir nuestros párrafos.
  4. <img>: Esta etiqueta como tal lo dice su nombre, sirve para agregar imágenes en la web.
  5. <br>: Esta etiqueta es como un salto de línea dando espacios y dándole una buena visualización a nuestra información.
Y como puedes ver la estructura se repite, por lo cual no es tan complicado ya que estamos usando las mismas etiquetas, y por ultimo tenemos nuestro footer:


   Lo que visualizamos en estas líneas de código es que támbien lo tenemos en un contenedor para poder tener una libertad a la hora de estilizar. El <footer> es la parte final de una página en donde contiene información adicional de la página, como redes sociales, números de teléfono, ubicaciones, etc.

  CSS

Aquí es la parte más divertida y creativa de crear una web, ya que le das estilo y personalidad a la página, en este caso te enseñare los estilos que le puse a mi web y te explicare.}


 
Por como puedes ver le estamos dando estilo al cuerpo y a los textos de nuestra web:

  • font-family: Esta etiqueta sirve para cambiar la tipografía de nuestra letra.
  • background-color: Es el color de fondo de la página.
  • margin: En este caso que es 0 es para eliminar el margen predeterminado del navegador.
  • padding: Añade un espacio interno alrededor del contenido.
  • color: Define el color del texto.
  • max-width: Limita el ancho máximo de nuestro contenedor principal.
  • box-shadow: Añade sombras.
  • text-align: Es para alinear textos.
  • font-size: Es para el tamaño de la fuente.
  • margin-bottom: Agrega un espacio en el margen de la parte inferior.
  • border-bottom: Añade un borde en la parte inferior.
  • padding-bottom: Le da un espacio a la parte inferior.

 Ahora le daremos estilo a los párrafos, imágenes, salto de línea y el footer.
  • line-height: Define el interlineado.
  • width: Es para definir el tamaño del ancho.
  • max-width; Para definir el máximo tamaño de ancho.
  • height: Sirve para definir la altura.
  • display; Es para definir como se va a comportar nuestro elemento.
  • border-radius: Redondea las esquinas.
  • border-left: Modifica el borde izquierdo.

Ahora por lo que puedes ver se repiten mucho algunas líneas de código por lo cual no es necesario explicar de nuevo y ahora te explicare los últimos detalles.
  • text-decoration: Sirve para dar un buen estilo al texto, normalmente en los links.
  • position: Ajusta la posición de nuestro elemento.
  • margin-top: Se le da estilo al margen superior.
  • font-weigth: Le da peso a la fuente.
Y así es como se crea una página, solo es cuestión de tener una buena idea, estilo, paciencia y creatividad, además de probar con muchas funciones de las etiquetas para que se vea muy bien tu página, ahora te daré el link de la página para que visualices el resultado


Muchas gracias por leer este blog y haya sido de tu gusto, soy tu amigo Yisus y nos vemos hasta la próxima, chao.  

Comentarios

Publicar un comentario