Después de introducir los conceptos básicos de la creación de páginas web con HTML, vamos a realizar unas modificaciones en este blog. Para ello abriremos el apartado de "Configuración" > "Tema" > "Editar HTML":
 |
| Ventana de configuración en Blogger. Elaboración propia. |
Una vez abierta esta opción, observamos como está estructurado el blog, y los diferentes elementos que contiene, todo ello definido en lenguaje HTML:
 |
| Código HTML en Blogger. Elaboración propia. |
Después de analizar el código, seleccionamos algún elemento que deseamos cambiar, y procedemos a cambiar el código HTML correspondiente a ese elemento:
 |
| Vista de este blog y ventana de inspección de elemento con código HTML. Elaboración propia. |
Primero, en la vista del blog, seleccionamos el elemento que queremos modificar, y pulsando el botón derecho del ratón, seleccionamos inspeccionar elemento. Nos aparece una ventana en la que se muestra el código HTML de la página, y subrayado, podemos observar el código correspondiente al elemento seleccionado. Esto facilita enormemente la búsqueda y modificación de los elementos de una página web o blog.
Seleccionamos el banner de la imagen anterior, y buscamos su código HTML. Ahora ya podemos encontrarlo dentro de nuestro código HTML. Primero introducimos un comentario para indicar las modificaciones que se van a llevar a cabo:
 |
| Ventana de modificación del código HTML. Elaboración propia |
Antes de aplicar los cambios, hacemos "clic" en la opción "Vista previa del tema", para pre-visualizar nuestro cambio antes de modificar. Si la modificación es adecuada y nos gusta el resultado, se pueden aplicar los cambios clicando en "Guardar Tema":
 |
| Vista previa de la modificación realizada. Elaboración propia. |
Como podemos observar, la nueva situación del "banner" es mucho más atractiva que la posición anterior:
 |
| Posición inicial del banner |
 |
| Posición después de la modificación. |
No hay comentarios:
Publicar un comentario