Creación de su propio sitio web para principiantes: 5 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Si alguna vez ha soñado con ser un programador de computadoras o si alguna vez ha usado un sitio web, seamos realistas, somos casi todos, la tecnología de la información se ha convertido en la columna vertebral de los negocios. Aunque la programación puede parecer un poco aterradora al principio, mi objetivo es enseñarte los conceptos básicos fundamentales del diseño web para que, después de este tutorial, puedas crear tu propia página web. Con eso fuera del camino, ¡empecemos!

Suministros

• Una PC con Macintosh o Windows (aunque también se pueden usar distribuciones de Linux, las estoy omitiendo por ahora, ya que esta es una introducción para principiantes).
• Su elección de editor de texto (Bloc de notas en Windows, TextEdit en Mac) o su elección de IDE. En mi experiencia, descubrí que Visual Studio Code funciona mejor para mí, por lo que también recomiendo consultarlo aquí: https://code.visualstudio.com/ sin mencionar que funciona en todas las plataformas de SO.

Paso 1: etiquetas y un poco de historia

Una vez que haya decidido su elección de editor de texto o IDE, comencemos con lo básico.

Lo crea o no, HTML o HyperText Markup Language ha existido durante casi 30 años y con cada año han aparecido más y más mejoras en el lenguaje. Ahora, podría preguntarse, ¿cómo interpreta un navegador qué poner en la pantalla? Esto se hace en algunas partes:

El formateo de documentos HTML es fácil. Tienes dos secciones conocidas como la cabeza y el cuerpo. El encabezado de un sitio web contiene un código que no es visible para el usuario. Esto se utiliza para vincular hojas de estilo y declarar otros bits necesarios para que el sitio se muestre correctamente. Siguiendo a la cabeza, el cuerpo es como suena, el cuerpo del sitio web. ¡Aquí es donde puedes hablar tu voz y mostrar a la audiencia tus fantásticas habilidades HTML! Ahora no es tan fácil como simplemente escribir texto en el cuerpo y hacer que se muestre exactamente de la manera deseada, pero es casi así de fácil en cierto sentido con el uso de cosas que llamamos etiquetas.

Estas son algunas de las etiquetas HTML básicas:

• título - que se utiliza para decirle al navegador cuál es el título de la página. Esto también es lo que ve cuando mira la pestaña de una página web.
• h1, h2, h3, h4, que se utilizan para diferentes tamaños de encabezado, siendo h1 el más grande y h4 el más pequeño. Cubriré más sobre esto en la siguiente sección.
• p - párrafo, utilizado para escribir párrafos de texto. Como párrafos en un papel.
• br - ruptura, que inserta una ruptura en línea con el texto.
• a: se utiliza para crear enlaces a otras páginas, como un enlace en el que se puede hacer clic.
• img: se utiliza para vincular una imagen a la página web.
• ul, ol, li: listas desordenadas, listas ordenadas y elementos de lista.
• : Se utiliza para realizar comentarios en línea en el código que el usuario final no verá.

Y aquí hay algunas etiquetas CSS (visuales):

• color: se utiliza para asignar un color específico a un elemento específico o establecer en la página web.
• font-size: se utiliza para cambiar el tamaño de fuente en la página.
• background-color: se utiliza para cambiar el color de fondo de cierto elemento o de toda la página.

También he adjuntado una pequeña hoja de trucos para ayudarte si te sientes un poco perdido, pero no te preocupes, ¡lo entenderás en poco tiempo! Además, www.w3schools.com también es un recurso fantástico para cualquiera de sus preguntas sobre programación. Definitivamente me han ahorrado un tiempo o también.

Esencialmente, la forma en que el navegador lee el archivo es fácil. Va línea por línea y procesa función por función. Los caracteres se utilizan para declarar una etiqueta como

y se utilizan para cerrar la etiqueta como

. Esto es importante, de lo contrario, el navegador no se detendrá donde detenerse. Entre el

y

etiquetas, es donde ingresa lo que quiera.

Paso 2: Configuración del editor

Ahora que hemos cubierto un poco sobre los elementos básicos de un sitio web HTML, profundicemos y probémoslo por nosotros mismos. Para este próximo paso, usaré Visual Studio Code para programar el sitio web, pero el diseño del código será el mismo si se siente más cómodo con solo usar el Bloc de notas o TextEdit.

Dentro del Bloc de notas:

• Con el Bloc de notas, el programa se inicia con un archivo en blanco, lo que hace que sea muy fácil comenzar. Esto también nos permitirá saltar algunos pasos en comparación con el uso de VS Code. Comencemos guardando el archivo en el formato correcto.
• Haga clic en Archivo> Guardar
• Ingrese un nombre para su archivo seguido de.html y en Guardar como tipo, seleccione todos los archivos. Clic en Guardar.

Dentro de VS Code:

• La mejor manera de aprovechar todas las funciones del IDE es comenzar por crear el archivo y decirle al IDE qué tipo de archivo es. Esto puede hacerse de la siguiente manera:
• Haga clic en Archivo> Nuevo archivo
• Se abre un archivo en blanco
• A continuación, querrá comenzar guardando el archivo, aunque en blanco, ya que esto permitirá que el IDE pueda comprender qué tipo de archivo será el producto final. Al guardar, asegúrese de incluir la extensión.html al final del nombre del archivo. Clic en Guardar.

Paso 3: planos

Una vez que haya guardado correctamente su archivo filename.html, comencemos por crear el marco para nuestra página web. Recuerde de arriba qué partes clave del archivo debemos declarar antes de que podamos comenzar a crear el resto de la página HTML. Consejo profesional: al iniciar el marco para el sitio, la etiqueta HTML! DOCTYPE le dice al navegador que el archivo que está leyendo es un archivo html. Esto puede resultar útil si tiene diferentes tipos de código en el mismo archivo y desea cambiar entre intérpretes. Para el alcance de este instructivo, no tocaremos demasiado sobre esto, pero si después de este Instructable tiene curiosidad por ver más sobre el desarrollo HTML, no dude en intentarlo. Insertaré la etiqueta HTML! DOCTYPE en la parte superior del archivo como mejor práctica. Recuerde abrir y cerrar con.

Aquí es donde es útil guardar el archivo antes de comenzar a programar, ahora que el IDE sabe que está trabajando con un archivo HTML, usará intellisense para terminar la expresión y ofrecer sugerencias para que no olvide cerrar una etiqueta por accidente.. Tenga en cuenta que para aquellos de ustedes que están usando el Bloc de notas, intellisense no está disponible como en el IDE. Comenzamos ingresando las etiquetas de cabeza y cuerpo de la siguiente manera: (ver segunda imagen).

Ahora que se ha completado la configuración del documento, ¡podemos ir a las carreras y divertirnos un poco!

Paso 4: Código; Código; Código;

Podemos comenzar insertando un título para nuestro archivo recién creado. Ingrese lo que desee. Recuerda que este es el nombre que aparece en la pestaña del navegador. También comencemos ingresando un encabezado para nuestro sitio. Recuerde de antes cómo hacemos esto. ¿Escuché h1 / 2/3/4? ¡Eso es correcto!

Antes de continuar, me parece útil abrir nuestro archivo en una ventana del navegador para que podamos ver en tiempo real cómo se reflejan nuestros cambios en el navegador. Puede hacer esto haciendo clic en Archivo> Guardar para guardar el archivo, navegando a la carpeta en la que está guardado el archivo HTML, para mí, este es el escritorio, y use el navegador de su elección para abrir el archivo y lo miraría, ahí está tu página web! Nota: Yo personalmente uso Safari como mi navegador preferido en mi computadora; sin embargo, en el desarrollo web, Firefox es el navegador estándar de oro para las pruebas, ya que funciona con casi todos los lenguajes de programación web.

Como puede ver, el título se muestra en la pestaña, además de ver nuestro encabezado h1. Prefiero tener tanto la ventana del navegador del archivo abierta junto con el IDE como cuando hace un cambio en el IDE y lo guarda, los cambios son instantáneos en el navegador.

Siéntase libre de intentar agregar etiquetas y jugar con las diferentes cosas que puede hacer con HTML. Como puede ver a continuación, he agregado algunos párrafos, saltos, hipervínculo externo a Instructables.com, una imagen (que puede estar vinculada desde una fuente externa o dentro del mismo directorio donde se almacena el archivo. HTML), un ejemplo de una lista desordenada, una lista ordenada y, por último, un comentario.

Si desea intentar agregar algo de color y opciones de disposición, puede ingresar una etiqueta de estilo en el encabezado del archivo. Este es el punto en el que esto cambia de HTML a CSS, pero por motivos visuales, ingresaré algunas líneas para que pueda ver cómo funciona. Básicamente, el funcionamiento de CSS es que le permite controlar los elementos HTML dentro de las funciones mediante el uso de corchetes {} para ingresar su código para un elemento HTML específico.

Paso 5: Pensamientos finales

Y ahí lo tienes; ¡Ha creado con éxito su primera página web! Como esta es una guía para principiantes, quiero que su primera experiencia con HTML sea agradable. La mejor manera de aprender en mi experiencia es sumergirse y probar cosas prácticas, ver qué puede hacer con su código y también ver cómo puede romper su código. Esto crea integridad y le ayuda a comprender mejor cómo y por qué el código funciona de la forma en que lo hace. Recuerde que www. W3Schools.com es un gran recurso para preguntas e incluso ofrecen una caja de arena virtual dentro del navegador para probar su código. ¡Esperamos que hayas aprendido algo y disfrutes de la codificación!