Es muy posible que en algún momento te hayas preguntado cómo definir el tamaño de un elemento HTML desde el código. No nos referimos al proceso físico de estilizar un elemento HTML a través de la utilización de las propiedades width o height, sino al proceso mental de determinar qué valor darle a cada propiedad. Aunque no hay reglas específicas a la hora de tomar decisiones de estilo para tus elementos, vamos a intentar resolverte esta duda de forma clara y sencilla.
Por este motivo, en este post, te daremos algunos consejos para desarrollar tu habilidad de decisión al programar y, por tanto, también te aconsejaremos sobre cómo definir el tamaño de un elemento en HTML.
¿Por qué ponemos una medida y no otra?
Como hemos dicho al principio del post, preguntarse por qué definir el tamaño de un elemento HTML con un valor y no con otro es una duda bastante común, sobre todo teniendo en cuenta que a veces les damos tamaños a los elementos incluso antes de verlos en la página web. Podemos, por ejemplo, decir que una barra de navegación tendrá un alto de 50px. Pero ¿por qué?
La verdad es que muchas veces será el propio equipo de diseño el que tendrá que definir el tamaño de un elemento HTML, no el desarrollador web. Sin embargo, cada vez que programas entiendes más las distancias de tu pantalla.
Si estás pensando, por ejemplo, en una página web que se verá en un portátil estándar, tendrás que tener en cuenta que un portátil de gama media tiene una resolución habitual de 1366px por 768px. Entonces, pensarás que tu viewport tiene seguramente 90px menos de alto, quitando la barra de pestañas y el url. Por ello, un desarrollador web experto hará que la barra de navegación ocupe el menor espacio posible para dejar más espacio al contenido real de la página web.
Otra característica a tener en cuenta para definir el tamaño de un elemento en HTML es que las pantallas modernas son mucho más anchas que largas. Por esta razón, hay una tendencia en las páginas web a poner más elementos en los costados de la página web que en la parte de arriba, pues hay menos espacio para el contenido de manera vertical.
Frameworks
Otra manera de definir el tamaño de un elemento HTML es usar las librerías de frameworks, como pueden ser Material y Skeleton. Estos sistemas de guías y plantillas ya tienen incorporados estilos en los elementos HTML. Cuando utilices estas herramientas para crear la base de tu página web, te encontrarás con que muchos de los tamaños que definen se acomodan a tus necesidades, por lo que no necesitarás cambiarlos.
En último lugar, te recomendamos que siempre que dudes sobre una propiedad, desees intentar un nuevo estilo o quieras probar algo nuevo, empieces una nueva rama en Git. Esto te dará la tranquilidad de intentar nuevas funciones sin perder lo que tenías antes. Si algo te gusta, después podrás mezclas las ramas, y en caso de que no te satisfaga el resultado, vuelves a la original, así de sencillo.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo definir el tamaño de un elemento HTML y que la mejor forma de avanzar en el campo del desarrollo web es practicar y practicar, ¡es hora de que le dediques más energía y tiempo a tu aprendizaje! Por ello, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí, aprenderás mucho más sobre los lenguajes de programación y, en muy pocos meses, serás un experto en desarrollo web. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡No te pierdas esta oportunidad e inscríbete!
