Artículos
CSS

Formato de texto por defecto con CSS

Creado: 05/Dic/2007 Actualizado: 12/Nov/2021

Cuando carguemos una página web en nuestro navegador, el formato de texto que se utilizará por defecto será el que indique las propiedades del navegador. Esto sucederá siempre y cuando la página web no indique nada al respecto. Es por ello que vamos a ver cómo podemos definir el formato de texto por defecto con CSS.

De esta forma lo normal será establecer algún formato de texto por defecto en nuestra página. Para ello nos apoyaremos en las hojas de estilo CSS.

Para definir el formato de texto por defecto con CSS lo primero que tenemos que conocer son las propiedades CSS que afectan al formato. Estas serán las relativas al texto y la fuente. Entre ellas tenemos las siguientes:

  • color, para indicar el color del texto.
  • text-align, para alinear el texto (left, right, center o justify).
  • text-decoration, añade decoraciones al texto, como subrayado, tachado,…
  • font-family, nombre de la fuente a utilizar (Arial, Courier,…).
  • font-size, tamaño de la fuente
  • font-style, estilo de la fuente (negrilla, itálica u oblicua).

Ahora solo nos quedará el aplicarlas al elemento body de la página. De esta forma se convertirá en el formato de texto por defecto de nuestra página.

Para ello insertamos el estilo CSS en la cabecera de la página de la siguiente forma:

body {
 font-family: Arial, sans-serif;
 font-size: 10pt;
 color: #f00;
}

Vemos que hemos utilizado directamente como selector el nombre del elemento HTML en cuestión, es decir, body.

Lo que tenemos que hacer es dar valores a las diferentes propiedades. Ahora solo nos quedará insertar texto en la página, de tal manera que todo el texto aparecerá con el formato especificado en la cabecera. Y ya tenemos nuestro formato de texto por defecto con CSS .

Código Fuente

Descárgate el código fuente de Formato de texto por defecto con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Artículos
HTML

Alto y ancho de una imagen con HTML

Creado: 04/Dic/2007 Actualizado: 01/Oct/2023

Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.

El elemento HTML que nos permite poner imágenes en nuestra página web es img. La línea de código que necesitaríamos sería la siguiente:

<img src="mifoto.jpg" />

Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.

Así, si queremos poner la imagen a 100×100 pixels, la línea de código quedaría de la siguiente forma:

<img src="mifoto.jpg" width="100" height="100" />

De esta forma tan sencilla hemos podido definir el alto y ancho de una imagen con HTML utilizando los atributos del elemento img. Ahora un reto, ¿sabrías como puedes conseguir lo mismo pero haciendo uso del lenguaje CSS? ¿Son válidas las dos alternativas cuando queremos manejar el alto y el ancho o solo una es la correcta? Te lo contamos en el artículo Definir el tamaño de una imagen con CSS.

Código Fuente

Descárgate el código fuente de Alto y ancho de una imagen con HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Alto y ancho de una imagen con HTML

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Blog

Estadisticas de Noviembre

Creado: 03/Dic/2007 Actualizado: 17/Dic/2007

Si hace dos días, por el poco tiempo que he podido dedicar a Linea de Código, teníamos las estadísticas de octubre, ya estamos aquí con las de noviembre.

Se ve que hay un descenso en el número de visitas. Mezcla entre que noviembre tiene un día menos que octubre y que nuestro ritmo de publicación ha sido muy bajo.

Tímida subida de FireFox ante Intener Explorer. Si bien los márgenes de este siguen siendo un abismo.

Generales

  • Visitas: 45.982 (-2.155)
  • Visitantes Únicos: 39.338 (-1.740)
  • Páginas Vistas: 73.644 (-5.804)
  • Page Rank: 3 (=)

Navegadores

  • Internet Explorer:62,40 (-2,78%)
  • FireFox:34,40 (+2,68%)
  • Opera: 1,73 (-0,06%)
  • Safari: 0,44 (+0,01%)

Sistemas Operativos

  • Windows:94,72 (-0,61%)
  • Linux:4,32 (+0,68%)
  • Macintosh:0,80 (-0,02%)
Artículos
Javascript

Añadir la página a favoritos

Creado: 02/Dic/2007 Actualizado: 09/Jul/2020

Posibilitar el añadir la página a favoritos es otro claro ejemplo de código JavaScript que solo funciona en Internet Explorer.

No vamos a poner en tela de juicio la funcionalidad en cuestión, si bien es cierto que todo código que manipule la estructura del navegador (o agente web) queda fuera, de momento, de los modelos de objetos y por lo tanto de su manipulación mediante JavaScript.

La decisión de utilizar esta funcionalidad deberá de ponderarse dependiendo del público objetivo de nuestra página y del navegador que estos usen.

El código JavaScript es muy sencillo, simplemente tendremos que utilizar la función addFavorite presente en el objeto window.external.

window.external.addFavorite(...);

Esta función recibe dos parámetros, el primero es la URL que queremos almacenar en los favoritos, mientras que el segundo es el titulo relacionado con dicha URL. Quedándonos la estructura de la siguiente forma:

window.external.AddFavorite(url, titulo);

Ahora solo tenemos que desencadenar la ejecución de este código. Por ejemplo, tras pulsar en un enlace. La línea de código será la siguiente:

<a href="#" onclick="window.external.addFavorite('https://lineadecodigo.com','Linea de Codigo');" title="Añadir Linea de Codigo a Favoritos">
    Añadir Linea de Codigo a Favoritos
</a>

Tenemos la versión con aviso, la cual avisa a los usuarios que no tienen Internet Explorer:

<a href="#" onclick="window.external.addFavorite('https://lineadecodigo.com','Linea de Codigo');" title="Añadir Linea de Codigo a Favoritos">
Añadir Linea de Codigo a Favoritos
</a><br>(Solo IE, resto navegadores Ctrl-D)

 

Código Fuente

Descárgate el código fuente de Añadir la página a favoritos
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript