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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi1mf8fQeb05eXxYhmmdfW2rzTWPyJpcRt0SzMpZmfuPJ6q4F9UBEGANjbTpMb0AwTnF81saONf9774TI8poFI9ZlNxHGLG-jQ3yiCBZZNnm97MJ5nOn4DZ_yKNZR0Y0n5BZb5kquCGQ/s1600/CABECERA+DINAMICA.png" WIDTH="178" HEIGHT="180">

Visualizando así en el navegador: