viernes, 16 de mayo de 2014

Personalizar texto (fuente tamaño color), imágenes y colores en HTML

En el cuarto módulo del curso de HTML básico mostraré como colocar imágenes, personalizar texto, y poner colores a ciertos elementos por ejemplo un color de fondo a nuestro archivo html, bien teniendo en cuenta que ya se sabe la estructura básica un documento html, además de que porporcioné una gran parte de etiquetas usadas en este lenguaje y como implementarlas, supondremos como darle color a un texto o poner una imagen y ajustar su tamaño, para ello iniciamos:

Color, tamaño y fuente de texto en HTML

Ya se tiene conocimiento sobre la estructura básica así que, para incorporar texto sabemos que va entre las etiquetas base <body> y </body> de esta forma llevo con mi texto:
 <html>
      <head>

      </head>

      <body>
  Campo para mi texto

      </body>
    
 </html>

Ahora tengo el texto normal su visualización seria muy simple: 

 A continuación daré en el siguiente orden las propiedades que aplicaré, color, tamaño letra y fuente de letra

<html>
      <head>

      </head>

      <body>

  <font color="blue" font="Comic Sans MS" size="20"> Campo para mi texto </font>

      </body>
 </html>

Si bien se ve para aplicar nuevas etiquetas a un texto se necesita abrir otra con <font> y se cierra al final de texto a afectar con </font>, pero, dichas propiedades van entre font y antes del ">" es decir:


Analizando cada propiedad dentro la etiqueta:

- Al escribir una propiedad dentro de una etiqueta sea cual sea esta siempre irá en formato [propiedad="valor"] con una real diría [color="yellow"] si queremos aplicar otra propiedad dentro de la misma etiqueta basta con dar un espacio y poner la nueva que se quiere es decir, [color="yellow" size="34"]

Con el código escrito anteriormente se obtiene un resultado así:


Si bien vemos que todo lo que quise se aplicó, el Color azul, letra arial y tamaño de fuente 20 recondando que debo cerrar con </font> para que sólo afecte ese fragmento.

Algunas propiedades para las imágenes en HTML

También a las imágenes podemos definirle propiedades, pero para poner una imagen en HTML, es igual, entre las etiquetas <body> </body>, se define la etiqueta de imagen de esta forma:
<IMG SRC="Link o ruta de la imagen">

Si bien es muy fácil sólo se reemplaza donde dice "Link o ruta de la imagen" por la que es, en mi caso usaré el link del logo de bloggin Red y quedaría:


Su visualización en el navegador seria:


Estableciendo tamaño a las imágenes, para ello usamos las propiedades alto y ancho teniendo en cuenta el concepto anterior de como escribir las propiedades se usa el mismo método:
<IMG SRC="http://3.bp.blogspot.com/--Ow-Mequ2vs/UtxNRpQSKfI/AAAAAAAAEM0/jcq7e1xnAs0/s1600/CABECERA%2BDINAMICA.png" WIDTH="178" HEIGHT="180">

Visualizando así en el navegador:


Se tiene en cuenta que le podemos poner cualquier valor a la propiedad en imágenes.

Cambiando el fondo de un Archivo HTML

Existe algo en <body> en lo cual se puede personalizar el fondo del sitio en html el código que se utiliza con su debdia propiedad es:


<BODY BGCOLOR="red">

El atributo BGCOLOR="color" da el color de fondo a nuestro sito veamos como queda:



De tal forma que la visualización de todo mi código es: 




4 comentarios:

  1. muy buena información :3

    ResponderEliminar
    Respuestas
    1. Hola anónimo gracias por comentar... Me alegra le veas utilidad.

      Saludos,

      Eliminar
  2. mUY BUENO TU TUTORIAL SIGUE ASI 5 ESTRELLAS

    ResponderEliminar
    Respuestas
    1. Hola amigo, gracias por comentar me alegra que te sirva y guste.

      Saludos,

      Eliminar

SÍGUENOS EN: