Cómo usar imágenes para sus titulares de páginas web basadas en HTML5 y CSS3 - Dummies

Generalmente, debe usar fuentes estándar para el contenido principal de la página web HTML5 y CSS3, por lo tanto tener una variedad limitada de fuentes no es un gran problema. A veces, sin embargo, desea utilizar fuentes en sus titulares. Puede usar un editor gráfico, como GIMP, para crear imágenes basadas en texto y luego incorporarlas en sus páginas.

Aquí está el proceso para usar una fuente especial:

1. Planifica tu página.

   Cuando usas gráficos, pierdes un poco de flexibilidad. Necesitas saber exactamente cuáles deberían ser los titulares. También necesita saber qué título se mostrará en qué nivel. En lugar de confiar en el navegador para mostrar sus titulares, está creando gráficos en su herramienta gráfica y colocándolos directamente en la página.

2. Crea tus imágenes.

   Puedes usar la maravillosa función de Logos en GIMP (elige Xtns ➩ Script-fu ➩ logotipos) para crear tu texto.

3. Especifique los tamaños de fuente directamente.

   En la imagen, tiene sentido especificar los tamaños de fuente en píxeles porque aquí realmente está hablando de un número específico de píxeles. Está creando un "texto virtual" en su editor gráfico, por lo tanto, haga que el texto sea cual sea el tamaño que desee que esté en la página finalizada.

4. Usa la fuente que quieras.

   No tiene que preocuparse de si el usuario tiene la fuente porque no está enviando la fuente, solo una imagen compuesta con la fuente.

5. Crea una imagen separada para cada título.

   Este ejercicio en particular tiene dos imágenes: un encabezado de nivel 1 y un nivel 2. Debido a que está creando imágenes directamente, depende de usted hacer un seguimiento de cómo la imagen comunicará su nivel de título.

6. Considere el nivel del título.

   Asegúrese de que los valores de título 2 de nivel se vean un poco más pequeños o menos enfatizados que el nivel 1. Es decir, si tiene imágenes que se usarán en una configuración de título 1, deberían usar una fuente más grande que las imágenes que serán utilizado en un nivel de encabezado menos enfatizado. Por lo general, esto se hace ajustando el tamaño de fuente en sus imágenes.

7. Crea la página como lo harías normalmente.

   Después de crear estas imágenes especiales, crea una página web regular. Coloque las etiquetas

   y

   exactamente en los mismos lugares que suele hacer.

8. Ponga etiquetas

   dentro de los encabezados.

   En lugar de texto ordinario, coloque etiquetas de imagen dentro de las etiquetas

   y

   . Vea el próximo código imageTitles. html si estás un poco confundido.

9. Ponga el texto principal en el atributo alt.

   El atributo alt es especialmente importante aquí porque si el usuario tiene gráficos desactivados, el texto aún aparece como un encabezado con el estilo apropiado.Las personas con conexiones lentas ven el texto antes de que se carguen las imágenes, y las personas que usan lectores de texto todavía pueden leer el texto alternativo de la imagen.

Aquí está el código usado para generar los encabezados basados ​​en imágenes:

imageTitles. html



Esta página describe vacas famosas en la historia



La mayoría de la gente no sabe que el ganado realmente participó en la batalla. No lo hicieron, por supuesto. Acabo de inventarlo.

Esta técnica es un buen compromiso entre gráficos personalizados y HTML ordinario de la siguiente manera:

• Usted tiene un gran control de sus imágenes. Si es hábil con su herramienta de gráficos, puede hacer que cualquier tipo de imagen que desee sea un título. Literalmente no hay límite excepto tu habilidad y creatividad.

• La página conserva su estructura. Aún tiene las etiquetas de encabezado en su lugar, por lo que es fácil ver que quiere decir que una imagen en particular actúa como título. Todavía puede ver la organización de la página en el código HTML.

• Tienes texto alternativo. Los atributos alt se activarán si las imágenes no se pueden mostrar.

• Se conserva el significado semántico de los titulares de las imágenes. Las etiquetas alt proporcionan otra gran característica. Si replican el texto de la imagen, este texto todavía está disponible para los lectores de pantalla y los motores de búsqueda, por lo que el texto no está oculto en la imagen.

Esta técnica es ideal para titulares u otras áreas, pero observe que el texto del titular se repitió en la etiqueta. Esto es importante porque no quiere perder el texto. Las herramientas del motor de búsqueda y los lectores de pantalla necesitan el texto.

No se sienta tentado de usar esta técnica para cantidades más grandes de texto corporal. Hacerlo causa algunos problemas:

• El texto ya no se puede buscar. Los motores de búsqueda no pueden encontrar texto si está oculto en las imágenes.

• El texto es más difícil de cambiar. No puede actualizar su página con un editor de texto. En su lugar, debe descargar la imagen, modificarla y volver a cargarla.

• Las imágenes requieren mucho más ancho de banda que el texto. No use imágenes si no agregan sustancialmente a su página. Puede justificar algunas imágenes de encabezado, pero es más difícil justificar que toda su página se almacene como una imagen solo para usar una fuente en particular.