Seleccionar página
Compartir contenido

Desde Discovery Formación queremos mostrarte Como editar contenido de una página web en el navegador.

Cuando visitamos una página web tenemos acceso a una serie de herramientas dentro del propio navegador, que nos permitirán ver el código fuente de la misma. Podremos desde crear una simple broma (noticia viral), hasta poder investigar la estructura de la página (de cara a SEO por ejemplo).
Tenemos dos maneras de acceder al código de la web visitada, en este tutorial asumiremos que estamos usando el navegador Chrome.

Ver código fuente completo

Hacemos click derecho en cualquier parte de la página y vamos a ver código fuente

Editar contenido de una página web en el navegador 1

Donde podremos ver el código fuente al completo

editar contenido de una página web en el navegador 2

Si queremos acceder o buscar algún término en concreto podemos usar el buscador de palabras mediante “CONTROL + F”

editar contenido de una página web en el navegador 3

Lo cual nos permitirá localizar elementos dentro del código de manera muy cómoda.

Ver código de un elemento en concreto

Hacemos click derecho sobre el elemento que nos interese (por ejemplo, un título), e iremos a la opción “Inspeccionar”

editar contenido de una página web en el navegador 3

Esto nos abrirá el editor de código del navegador

editar contenido de una página web en el navegador 4

En la parte izquierda podemos acceder al código HTML (que mostrará la estructura de la web, así como el tipo de elemento).
El elemento aparecerá marcado en azul y ahora podremos hacer click derecho y elegir la opción “edit as html”, lo que nos permitirá modificar el texto del elemento original.

editar contenido de una página web en el navegador 5

Si cerramos el editor, podemos visualizar el nuevo contenido en la página

Si refrescamos el navegador, se volverá a cargar el contenido original.

Mediante el editor del navegador, también podemos acceder a las propiedades de formato (CSS), donde podemos editar propiedades o incluso añadir nuevas propiedades para realizar pruebas.

Cursos relacionados:

Creación de páginas web con wordpress

Entradas relacionadas: