Cordiales saludos
)
Continuamos hoy con nuestra formación en HTML. Ya les comenté que éste es un curso para principiantes, algo así como para dummies. Mi compromiso es para quienes están interesados en aprender, para quienes se interesan al ver que se puede hacer una web de una manera fácil y sencilla. También servirá para aprender una nueva tecnología para los estudiosos, además de servir para adentrar en en el desarrollo web a cualquier colegial, niño, jóven y adulto.
Coemncemos.
favicon
La imagen que aparece al lado del Título de nuestra página, en la pestaña de nuestro explorador preferido de internet la denominaremos favicon. Es muy fácil agregarla, tan solo coloquemos ésta linea de código dentro de nuestro head:
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
)
)
Estilos
Dentro del head, tambien podemos colocarle estilos al contenido de nuestra web. Se deduce rápidamente que el body, la parte visible de nuestra web, tiene un color azul, así mismos modificamos los colores de las etiquetas h1, h2 y los párrafos. Este es un ejemplo, corresponderá de acuerdo a nuestras necesidades e interés modificar los estilos.
El código en cuestión es el siguinete:
<style>
body {background-color: blue;}
h1 {color: red;}
h2 {color: yellow;}
p {color: white;}
</style>
)
Scripts
También podemos colocar dentro del head pequeños scripts, por medio del lenguje de programación: Java Script. Colocamos una mensaje en un cuadro emergente que se quitará, o permitirá visualizar el contenido de nuestra web, despues que le demos click, al OK.
<script>
alert( 'Click en Ok. Para continuar' );
</script>
)
)
)
Consejos y Sugerencias
📌 Organizando nuestros proyectos
Es importante que cada proyecto tengo su directorio,siempre les daré por aquí consejos y sugerencia para una mejor manera de trabajo. Además de consejos generales, de mucho interés para llegar a ser profesionales del desarrollo web.
En esta publicación tomé como ejemplo el ejercicio anterior, para guardar nuestro nuevo ejercicio.Una vez abierto nuestro ejercicio anterior a continuación: Archivo/Guardar como...
)
)
)
)
)
📌 Como realizar nuestro favicoin
Aquí les muestro como cree el favicon utilizando el programa inkscape. Primero importé la imagen, que tenía en un directorio personal.
)
)
)
Luego la redimensionamos a 32 por 32, y a continuación la exportamos (ver flecha roja)
)
)
)
Hasta aquí nuestra publciación de hoy. es bueno aclarar, que como estamos viendo en este momento HTML, los estilos y scripts los estamos viendo desde la forma más básica. Cuando avancemos verás una mejor forma de hacerlo.
Repositorio local:
Es de mi interés que conozcamos git, por eso siempre coloco el avance de nuestras publicaciones dentro de un Repositorio local.
)
)
De interés
Mi twitter Nos vemos en una próxima entrega! Rafael Aquino
Comments (1)
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.