Cómo ver la fuente HTML en Google Chrome

Este artículo explica cómo acceder a los Código fuente HTML en el navegador web Google Chrome, así como acceder y utilizar las herramientas de desarrollo de Chrome. Ver el código fuente de un sitio es una forma excelente para que los principiantes aprendan HTML.

Ver código fuente en Chrome

Entonces, ¿cómo ves el código fuente de un sitio web? Aquí están las instrucciones paso a paso para hacerlo usando el navegador Google Chrome.

1. Abre el Navegador web Google Chrome (Si tu no tienes Google Chrome instalado, Esta es una descarga gratuita).

2. Navega al página web que le gustaría examinar.

3. Botón derecho del ratón la página y mira el menú que aparece. Desde ese menú, haga clic en Ver código fuente.

   

4. El código fuente de esa página aparecerá ahora como una nueva pestaña en el navegador.

5. Alternativamente, también puede utilizar los atajos de teclado de control+U en una PC para abrir una ventana con el código fuente de un sitio mostrado. En una Mac, este atajo es Mando+Opción+U.

Utilice las herramientas para desarrolladores de Chrome

Además de lo simple Ver código fuente capacidad que ofrece Google Chrome, también puede aprovechar su excelente Herramientas de desarrollo para profundizar aún más en un sitio. Estas herramientas le permitirán no solo ver el HTML, sino también el CSS que se aplica a los elementos de visualización en ese documento HTML.

Para utilizar las herramientas de desarrollo de Chrome:

1. Abierto Google Chrome.

2. Navegar a la página web que le gustaría examinar.

3. Selecciona el menú de tres puntos en la esquina superior derecha de la ventana del navegador.

4. En el menú, coloca el cursor sobre Más herramientas y luego elige Herramientas de desarrollo en el menú que aparece.

   

5. Se abrirá una ventana que muestra el código fuente HTML a la izquierda del panel y el CSS relacionado a la derecha.

6. Alternativamente, si hace clic derecho un elemento en una página web y seleccione Inspeccionar en el menú que aparece, las herramientas de desarrollo de Chrome aparecerán y resaltarán la parte específica que eligió en el HTML con el CSS correspondiente que se muestra a la derecha. Es muy útil si desea obtener más información sobre una parte en particular de un sitio.

¿Es legal ver el código fuente?

A lo largo de los años, muchos diseñadores web nuevos se han preguntado si es aceptable ver el código fuente de un sitio y usarlo para su educación y, en última instancia, para el trabajo que realizan. Si bien copiar el código de un sitio al por mayor y pasarlo como propio en un sitio web ciertamente no es aceptable, usar ese código como un trampolín para aprender es en realidad cuántos avances se hacen en este industria.

Como mencionamos al comienzo de este artículo, ¡sería difícil encontrar un profesional web que trabaje hoy y que no haya aprendido algo al ver la fuente de un sitio! Sí, ver el código fuente de un sitio es legal. Usar ese código como recurso para crear algo similar también es seguro. Tomando el código tal como está y haciéndolo pasar como su trabajo es donde comienza a encontrar problemas.

Al final, los profesionales de la web aprenden unos de otros y, a menudo, mejoran el trabajo que ven y en el que se inspiran, así que no dude en ver el código fuente de un sitio y utilizarlo como herramienta de aprendizaje.

Más que solo HTML

Una cosa para recordar es que los archivos fuente pueden ser muy complicados (y cuanto más complejo sea el sitio web que está viendo, más complejo será el código del sitio). Además de la estructura HTML que conforma la página, también habrá CSS (hojas de estilo en cascada) que dictan la apariencia visual de ese sitio. Además, muchos sitios web de hoy incluirán archivos de script incluidos junto con el HTML.

Es probable que se incluyan varios archivos de script; de hecho, cada uno impulsa diferentes aspectos del sitio. Francamente, el código fuente de un sitio puede parecer abrumador, especialmente si eres nuevo en esto. No se frustre si no puede averiguar qué está pasando con ese sitio de inmediato. Ver la fuente HTML es solo el primer paso de este proceso. Con un poco de experiencia, comenzará a comprender mejor cómo encajan todas estas piezas para crear el sitio web que ve en su navegador. A medida que se familiarice con el código, podrá aprender más de él y no le parecerá tan abrumador.