Una opción que tenemos en HTML es fijar unos atributos generales para toda la pagina web y que estos atributos el navegador los tome por defecto para todos los elementos. Esto lo vamos a conseguir poniendo atributos con diferentes valores a la etiqueta “body”.
Vamos a ver algunos ejemplos, el primer atributo que vamos a usar es “bgcolor” y con el vamos a asignar un color a toda la pagina web completa. La sintaxis seria la siguiente:
<body bgcolor="blue">
1 <body bgcolor="blue">
Con esto conseguiremos que el fondo de la pagina web que hagamos sea siempre, salvo que lo cambiemos en otra parte del código HTML, de color azul. Los valores del atributo “bgcolor” son colores y pueden ir expresados con su nombre en ingles o su valor hexadecimal. Hay que tener el cuenta su relación con el texto de la pagina y que al poner el color del fondo de la pagina web se pueda leer el texto de la pagina correctamente. Es recomendable poner siempre un color de fondo ya que si hay algún problema con la imagen que pongamos por lo menos tengamos un color de fondo, aunque tampoco es obligatorio.
El siguiente atributo es “background” y nos servirá para poner una imagen de fondo a la pagina web. Hay que tener el cuenta el tamaño de la imagen ya que si es mas pequeña que la pagina web se repetirá tantas veces como sea necesario hasta llenar toda la pagina entera. La sintaxis es la siguiente:
<body background="imagen.jpg">
1 <body background="imagen.jpg">
Al poner el nombre de la imagen hay que tener en cuenta que tiene que estar en el mismo directorio en el cual esta el archivo HTML que estemos usando. Ya veremos mas adelante como seleccionar rutas diferentes.
El siguiente atributo que vamos a ver es “text” y nos servirá para poner todo el texto que aparecerá en la pagina web con un color por defecto. La sintaxis es la siguiente:
<body text="red">
1 <body text="red">
Con el ejemplo anterior veremos todo el texto que aparezca en la pagina en color rojo.
También vamos a ver como dar formato a los enlaces que colocaremos en una pagina. Los enlaces a otras paginas tienen tres estados que son:
- link – enlace no visitado, que no hayamos hecho click en el
- vlink – enlace visitado, mientras estamos en la pagina hemos hecho click en el alguna vez
- alink – enlace activo, mientras pinchamos en el
Podemos definir sus colores correspondientes de la siguiente forma:
<body link="black" vlink="green" alink="pink">
1 <body link="black"vlink="green"alink="pink">
Con el ejemplo anterior los enlaces se veran de color negro, cuando pinchemos en ellos se verán de color rosa y los que hayamos pinchado los veremos de color verde.
Otro atributo que podemos darle al cuerpo de la pagina web es ponerle margenes. Aquí es donde vamos a empezar a ver que hay algunas diferencias entre unos navegadores y otros ya que tendremos que poner atributos que hacen lo mismo pero que tienen distinto nombre para que, cuando un usuario visite nuestra pagina se ejecute el correspondiente atributo al navegador web que este usando.
Por ejemplo vamos a ver como poner margenes a los lados y arriba y abajo en dos tipos de navegadores, Internet Explorer y Firefox. Voy a poner un ejemplo y luego lo explico:
<body leftmargin="200" topmargin="100" marginwidth="200" marginheight="100">
1 <body leftmargin="200"topmargin="100"marginwidth="200"marginheight="100">
los dos primeros atributos, “leftmargin” y “topmargin” son para Internet Explorer, si un usuario visita nuestra pagina desde ese navegador se aplicaran esos atributos y los otros dos siguientes, como no los “conoce” no hará nada con ellos. Si el usuario esta visitando la pagina desde Firefox o Chrome los dos primeros no los usara y aplicara los dos últimos. Tenemos que poner los cuatro para que el el diseño sea siempre el mismo ya que si solo pusiésemos los últimos desde Internet Explorer la pagina no se vería como queremos. Esto sobre todo lo veremos y sufriremos con CSS :D.
Algo que se me había olvidado mencionar es que podemos poner muchos atributos a la vez y combinarlos entre si como veréis en el vídeo que he colgado en mi canal de Youtube y que os dejo aquí para que podáis verlo:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure