HTML y CSS: habilidades fundamentales para cualquier desarrollador web
Hablar de crear páginas web atractivas y responsivas pasa, forzosamente, porque domines dos elementos: HTML y CSS. Aunque hay quienes sugieren que la Inteligencia Artificial (IA) podría reemplazar su uso, es poco probable que esto suceda en el corto plazo.
Si bien la IA puede mejorar la eficiencia y la automatización en ciertos aspectos del diseño y desarrollo web, HTML y CSS se mantienen como esenciales para la creación y presentación de contenido en páginas web.
HTML es una serie de etiquetas que describen las diferentes partes de una página web como encabezados, párrafos, imágenes y enlaces. Al usar estas etiquetas, puedes crear una estructura jerárquica que facilita que los motores de búsqueda y que los humanos comprendan el contenido de tu página.
En este artículo, te mostraré cómo desarrollar una página web. Para ello, vamos a utilizar una empresa que no existe, la cual llamaré UniFin, dedicada al financiamiento de estudios. En este sentido, crear proyectos ficticios puede ser una excelente práctica para mejorar tus habilidades y agregar más proyectos a tu catálogo. Aprenderás a crear todo desde cero. ¡Diviértete!
Primer paso
Es importante visualizar cómo queremos que esté distribuida nuestra página y podemos hacer un bosquejo. Una herramienta útil para esto es Excalidraw, la cual nos permite dibujar lo que queramos en una pizarra compartida y colaborativa. Ahora, te explicaré cómo pasar de un bosquejo a un diseño real.
Segundo paso
Una vez en mente la idea, debemos abrir el editor de código de nuestra preferencia y darle forma al proyecto a través del código. En este caso, utilizaremos Visual Studio Code. Para empezar, crearemos una carpeta en nuestro equipo con el nombre del proyecto, UniFin, donde se almacenará todo el código que le dará forma al proyecto.
Para comenzar a programar, nos iremos al archivo .html. Si escribimos ! al inicio del archivo, el editor automáticamente inserta la estructura de un archivo html, incluyendo el código para que una página web sea responsive. Luego, agregaremos un título a la página y las líneas de código que conectarán el archivo .html con el archivo de estilos .css. También, podemos agregar fuentes a través de Google Fonts e íconos con Fontawesome. Todo ello irá dentro de la etiqueta <head>, es decir, antes de la etiqueta <body>.
¡Excelente! Ya estás en el proceso de crear una página web. Recuerda que es importante que el título sea claro y representativo del contenido de la página. Para enlazar los archivos de estilos y fuentes, utiliza las etiquetas correspondientes en el head de tu documento HTML.
Tercer paso
De acuerdo con el bosquejo del inicio del artículo, lo primero que se creará será el navbar <nav>. El navbar es la barra de navegación que se encuentra en la parte superior de las páginas web. Una vez que el navbar esté completo, se procederá a crear las siguientes secciones, que serán los contenedores del proyecto y almacenarán la información que se mostrará en pantalla.
Existen diferentes formas de estructurar el código. En este caso, se realizará toda la estructura de HTML para luego agregar interactividad con la hoja de estilos CSS. A medida que aprendas a estructurar páginas web, podrás realizar muchos más proyectos como éste, lo que te dará más experiencia y conocimientos que podrás agregar a tu portafolio. Por ahora, se organizarán todas las secciones e información que se van a renderizar.
La sección que se muestra en la imagen cuenta con etiquetas como las listas no ordenadas, las cuales incluyen íconos que le dan personalidad a la página. Estos íconos son importados al inicio y pertenecen a Fontawesome. Después de crearse el primer contenedor de la página, se puede proceder con la siguiente sección hasta completar la estructura deseada. También he corregido algunas faltas ortográficas.
Cuarto paso
En las secciones que observas arriba se coloca toda aquella información que genere interés en el usuario que visite la página.
También se ha utilizado una llamada a la acción que lleve al usuario a una conversación directa con el proveedor del servicio. Para ello se ha usado una etiqueta ancla <a>, un elemento que crea enlaces a otras páginas.
Si deseas agregar más elementos o contenedores a la página web, puedes hacerlo. Déjalo a tu imaginación y creatividad. Recuerda que es un proyecto ficticio, pero puede ser de mucha ayuda a la hora de un proyecto real.
A diferencia del navbar, el footer se encuentra al final de la página web. En la sección de footer puedes agregar más información acerca de la empresa, contacto, ofertas laborales, redes sociales, información del país en el que se realizó, copyright, entre otros.
Quinto paso
Mostraremos cómo ha quedado la página web con la estructura de HTML sin CSS. Posteriormente, colocaremos todas las propiedades de CSS necesarias para hacer que este proyecto sea interactivo, agradable y con un buen diseño.
¿Están preparados para ver cómo ha quedado el proyecto en HTML sin CSS? Aquí vamos:
No estamos en la edad de las cavernas. Este proyecto no se está renderizando como un proyecto real. Hoy en día, ninguna página web luce de esta manera. Para estilizarla, vamos a utilizar la hoja de estilos CSS.
Colocamos asterisco (*) al inicio ya que actúa como comodín y apunta a todos los elementos de la página. Las propiedades margin y padding controlan el espacio fuera y dentro del borde.
Defino el tipo de fuente de la página con font-family, su tamaño y su color. A todos los elementos a los que deseo intervenir con estilo, les debo colocar un indicador o clase. La propiedad display especifica la forma de mostrar los elementos HTML en la página y display: flex permite la responsividad y flexibilidad en los diseños.
Se desea que las opciones de la barra de navegación sean interactivas al momento de pasar el cursor sobre ellas y esto se logra utilizando el selector hover.
También se desea dar estilo y color a los demás contenedores o secciones del proyecto. Además, se quiere que el contenedor tenga una forma ovalada, lo cual se consigue utilizando la propiedad border-radius.
Esta propiedad se utiliza para especificar el redondeo de las esquinas de un elemento. Se puede utilizar para crear rectángulos redondeados, círculos y otras formas, configurando diferentes valores para la propiedad border-radius.
El botón que se utilizará en el proyecto debe tener un degradado de color y ser interactivo al momento de pasar el cursor sobre él. Para lograr esto, se utiliza la función linear-gradient.
Una página web es más interactiva y atractiva cuando incluye imágenes. Durante el proyecto, se utilizarán diferentes imágenes y se desea que sean redondeadas. Para lograr esto, se debe utilizar la propiedad CSS correspondiente.
En la sección HTML de la página, se encuentra una etiqueta ancla <a> para el ícono de WhatsApp. Se desea que este ícono sea visible en toda la página web y, para lograrlo, se debe utilizar la propiedad CSS display: inline-block, que permite que el elemento se comporte como un elemento en línea y permanezca en la misma línea que el contenido adyacente. Además, se utilizará la propiedad position: fixed para que la posición del elemento permanezca fija, incluso si el usuario se desplaza por la página.
Si se desea que este mismo elemento esté por encima de los demás, se debe utilizar la propiedad z-index, la cual indica que el elemento se superpone a los elementos con valores de z-index menores y, de esta forma, estará por encima de los demás elementos.
Antes de finalizar el artículo se da estilo al footer, se alinean los elementos y se otorga color de fondo y relleno.
Se invita al lector a utilizar esta guía como punto de partida para aprender sobre desarrollo web utilizando HTML y CSS, al tiempo que se sugieren varias formas de agregar funcionalidad a una página web, como la interactividad con JavaScript, botones de compartir en redes sociales y conexiones a bases de datos.
Dependiendo de la funcionalidad deseada, se pueden utilizar diferentes lenguajes y tecnologías. ¡Manos a la obra y a crear tus propios proyectos de desarrollo web!
Es tu turno de hacer tu propio proyecto. Espero puedas sacarle provecho a esta guía completa y accesible para cear páginas utilizando estas dos tecnologías básicas de desarrollo front-end. Si deseas iniciarte en el desarrollo web esta es una excelente introducción. Puedes tomarlo como punto de partida si eres una persona interesada en aprender sobre desarrollo web utilizando HTML y CSS.
En otra oportunidad se puede agregar funcionalidad a este y cualquier proyecto que estés comenzando. Hay varias formas en las que se puede agregar funcionalidad a una página web básica. Aquí hay algunas ideas:
- Interactividad con JavaScript: Una forma común de agregar interactividad a una página web es mediante el uso de JavaScript. Por ejemplo, se pueden agregar botones, formularios y validaciones de entrada.
- Funcionalidad para compartir en redes sociales: Se pueden agregar botones de compartir para que los visitantes puedan compartir el contenido de la página en sus redes sociales.
- Conexiones a bases de datos y almacenamiento de información: Para agregar más funcionalidad, se podría conectar la página web a una base de datos y permitir a los usuarios almacenar y consultar información a través de la página.
Dependiendo de la funcionalidad que desees agregar a tu página web, se pueden utilizar diferentes lenguajes y tecnologías, como JavaScript, PHP o bases de datos SQL.
¡Hasta la próxima!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.