Tan pronto como comience a crear páginas web con HTML, comenzará a trabajar con el tamaño. Para hacer que su sitio tenga el aspecto que desea, es probable que coincida con un diseño que usted u otro diseñador haya creado, querrá cambiar el tamaño del texto en ese sitio, así como otros elementos en la página. Para hacer esto, puede comenzar a buscar una etiqueta HTML de "tamaño", pero rápidamente la encontrará perdida.
La etiqueta de tamaño HTML no existe en HTML. En su lugar, para establecer el tamaño de sus fuentes, imágenes o diseño, debe usar hojas de estilo en cascada. De hecho, cualquier cambio visual que deba hacer al texto de un sitio u otro elemento debe ser manejado por CSS. HTML es sólo para la estructura.
La etiqueta más cercana a una etiqueta de tamaño HTML es la antigua etiqueta de fuente, que de hecho incluía un atributo de tamaño. Tenga en cuenta que esta etiqueta ha quedado obsoleta en las versiones actuales de HTML y es posible que no sea compatible con los navegadores en el futuro. ¡No quieres usar la etiqueta de fuente en tu HTML! En su lugar, debe aprender CSS para ajustar el tamaño de sus elementos HTML y el estilo de su página web en consecuencia.
Tamaños de fuente
Las fuentes son posiblemente la cosa más fácil de dimensionar con CSS. Más que simplemente dimensionar ese texto, con CSS puede ser más específico acerca de la tipografía de su sitio web. Puede definir el tamaño de fuente, el color, la carcasa, el peso, el encabezado y más. Con la etiqueta de fuente, solo puede definir el tamaño, y luego solo como un número relativo al tamaño de fuente predeterminado del navegador, que difiere para cada cliente.
Para establecer que su párrafo tenga un tamaño de fuente de 12 puntos, use la propiedad de estilo de tamaño de fuente:
h3 {font-size = 24px; }
Este estilo establecería el tamaño de fuente de los elementos headiing3 de 24 píxeles. Podría agregar esto a una hoja de estilo externa y todos los H3 de su sitio usarían este estilo.
Si desea agregar estilos tipográficos adicionales a su texto, puede agregarlos a esta regla CSS:
h3 {font-size: 24px; color: # 000; peso de la fuente: normal; }
Esto no solo establecería ese tamaño de fuente para H3, sino que también establecería el color en negro (que es lo que significa el código hexadecimal de # 000) y establecería el peso en "normal". De forma predeterminada, los navegadores representan los encabezados 1-6 como texto en negrita, por lo que este estilo anularía ese valor predeterminado y esencialmente "no en negrita" el texto.
Tamaños de imagen
Las imágenes pueden ser difíciles de definir tamaños porque realmente puede usar el navegador para cambiar el tamaño de la imagen. Por supuesto, cambiar el tamaño de las imágenes con el navegador es una mala idea porque hace que las páginas se carguen más lentamente y los navegadores a menudo hacen un mal trabajo de redimensionamiento, haciendo que las imágenes se vean mal. En su lugar, debe usar un software de gráficos para cambiar el tamaño de las imágenes y luego escribir sus tamaños reales en el HTML de su página web.
A diferencia de las fuentes, las imágenes pueden usar HTML o CSS para definir el tamaño. Se define el ancho de la imagen y la altura. Cuando utiliza HTML, solo puede definir el tamaño de la imagen en píxeles. Si usa CSS, puede usar otras medidas, como pulgadas, centímetros y porcentajes. Este último valor, los porcentajes, es muy útil cuando sus imágenes deben ser fluidas, como en un sitio web sensible.
Para definir el tamaño de su imagen usando HTML, use los atributos de alto y ancho de la etiqueta img. Por ejemplo, esta imagen sería de 400x400 píxeles cuadrados:
altura = "400" ancho = "400" alt = "imagen" />
Para definir el tamaño de su imagen usando CSS, use las propiedades de estilo de alto y ancho. Aquí está la misma imagen, usando CSS para definir el tamaño:
style = "height: 400px; width: 400px;" alt = "imagen" />
Tamaños de diseño
El tamaño más común que define en un diseño es el ancho, y lo primero que tendrá que decidir es si usar un diseño de ancho fijo o un sitio web sensible. En otras palabras, ¿va a definir el ancho como un número exacto de píxeles, pulgadas o puntos? ¿O vas a configurar el ancho de tu diseño para que sea flexible usando ems o porcentajes? Para definir el tamaño de su diseño, use las propiedades CSS de ancho y alto como lo haría en una imagen.
Ancho fijo:
style = "width: 600px;">
Ancho del líquido:
estilo = "ancho: 80%;">
Cuando decida los anchos para su diseño, debe tener en cuenta los diferentes anchos de navegador que sus lectores podrían estar usando y los diferentes dispositivos que también usarán. Esta es la razón por la cual los sitios web receptivos, que pueden cambiar su diseño y tamaño en función de diferentes dispositivos y tamaños de pantalla, son el estándar de mejores prácticas en la actualidad.
