Cómo cambiar el tamaño de las fuentes e imágenes HTML

Cómo cambiar el tamaño de las fuentes e imágenes HTML

Cómo cambiar el tamaño de las fuentes e imágenes HTML

VALORACIÓN DEL ARTÍCULO:
5/5


Tan pronto como empiece a construir páginas web con HTML, empezará a trabajar con el tamaño. Para hacer que su sitio se vea como usted quiere que se vea, probablemente haciendo juego con un diseño que usted u otro diseñador han creado, usted querrá cambiar el tamaño del texto en ese sitio, así como otros elementos en la página. Para hacer esto puede empezar a buscar una etiqueta HTML «size», pero rápidamente la encontrará faltante.

El tag HTML size no existe en HTML. En su lugar, para establecer el tamaño de sus fuentes, imágenes o diseño debe utilizar Hojas de Estilo en Cascada. De hecho, cualquier cambio visual que necesite hacer en el 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 sido desaprobada en las versiones actuales de HTML y puede que no sea compatible con los navegadores en el futuro! Usted no quiere utilizar la etiqueta de fuente en su HTML! En su lugar, deberías aprender CSS para dimensionar tus elementos HTML y estilizar tu página web en consecuencia.

Tamaños de fuente

Las fuentes son probablemente lo más fácil de dimensionar con CSS. Además de dimensionar el texto, con CSS puede ser más específico sobre la tipografía de su sitio web. Puede definir el tamaño de la fuente, el color, la carcasa, el peso, la parte delantera y mucho más. Con la etiqueta de fuente, sólo puede definir el tamaño, y luego sólo 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 12pt, use la propiedad font-size style:

h3 {font-size=24px;}

Este estilo establecería el tamaño de fuente de headiing3 elementos de 24 píxeles. Usted podría agregar esto a una hoja de estilo externa y todos los H3s de su sitio usarían este estilo.

Si desea añadir estilos tipográficos adicionales a su texto, puede añadirlos a esta regla CSS:

h3 {tamaño de fuente:24px;color: #000;font-weight:normal;}

Esto no sólo fijaría ese tamaño de fuente para H3s, sino que también fijaría el color al negro (que es lo que significa el código hexadecimal de #000) y fijaría el peso a «normal». Por defecto, los navegadores muestran los encabezados del 1 al 6 como texto en negrita, por lo que este estilo anula el texto por defecto y esencialmente lo «desnuda».

Tamaños de imagen

Las imágenes pueden ser difíciles de definir porque puedes 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 cambio de tamaño, haciendo que las imágenes se vean mal. En su lugar, debe utilizar software de gráficos para cambiar el tamaño de las imágenes y luego escribir sus tamaños reales en su página Web HTML.

A diferencia de las fuentes, las imágenes pueden usar HTML o CSS para definir el tamaño. Usted define el ancho de la imagen y la altura. Cuando se utiliza HTML, sólo se puede definir el tamaño de la imagen en píxeles. Si utiliza CSS, puede utilizar otras medidas como pulgadas, centímetros y porcentajes. Este último valor, porcentajes, es muy útil cuando sus imágenes necesitan ser fluidas, como en un sitio web sensible.

Para definir el tamaño de la imagen utilizando HTML, utilice los atributos de altura y anchura de la etiqueta img. Por ejemplo, esta imagen sería de 400×400 píxeles cuadrados:

height="400" alt="image" />

Para definir el tamaño de la imagen utilizando CSS, utilice las propiedades de estilo de altura y anchura. Aquí está la misma imagen, usando CSS para definir el tamaño:

 alt="image" />

Tamaños de diseño

El tamaño más común que se define en un diseño es el ancho, y lo primero que tendrá que decidir es si desea utilizar un diseño de ancho fijo o un sitio web con capacidad de respuesta. En otras palabras, ¿va a definir el ancho como un número exacto de píxeles, pulgadas o puntos? ¿O va a configurar el ancho de su diseño para que sea flexible utilizando ems o porcentajes? Para definir el tamaño de su diseño, utilice las propiedades CSS de anchura y altura tal y como lo haría en una imagen.

Ancho fijo:

>

Anchura del líquido:

>

Cuando decida el ancho de su diseño, debe tener en cuenta los diferentes anchos de navegador que sus lectores pueden estar utilizando y los diferentes dispositivos que también utilizarán. Esta es la razón por la que los sitios web con capacidad de respuesta, que pueden cambiar su diseño y tamaño en función de los diferentes dispositivos y tamaños de pantalla, es el estándar de mejores prácticas en la actualidad.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo