Tanto si eres nuevo en la industria de la web como si eres un veterano, ver el código HTML de diferentes páginas web es algo que probablemente harás muchas veces a lo largo de tu carrera.

Para aquellos que son nuevos en el diseño web, ver el código fuente de un sitio es una de las maneras más fáciles de ver cómo se hacen ciertas cosas para que puedas aprender de ese trabajo y empezar a usar cierto código o técnicas en tu propio trabajo. Como cualquier diseñador web que trabaja hoy en día, especialmente aquellos que han estado en ello desde los primeros días de la industria, y es una apuesta segura que te digan que aprendieron HTML simplemente viendo la fuente de las páginas web que vieron y por las que estaban intrigados. Además de leer libros de diseño web o asistir a conferencias profesionales, ver el código fuente de un sitio es una gran manera para que los principiantes aprendan HTML.

Más que sólo HTML

Una cosa a 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 compone la página que está viendo, también habrá CSS (hojas de estilo en cascada) que dictan la apariencia visual de ese sitio. Además, muchos sitios web hoy en día incluyen archivos de script incluidos junto con el HTML.

Es probable que haya múltiples archivos de script incluidos, de hecho, cada uno de ellos potenciando 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 inmediatamente. La visualización del código fuente HTML es sólo el primer paso de este proceso. Con un poco de experiencia, empezarás a entender mejor cómo encajan todas estas piezas para crear el sitio web que ves en tu navegador. A medida que se familiarice con el código, podrá aprender más de él y no le parecerá tan desalentador.

Entonces, ¿cómo ves el código fuente de un sitio web? A continuación se presentan las instrucciones paso a paso para hacerlo mediante el navegador Google Chrome.

Instrucciones paso a paso

1. Abra el navegador web de Google Chrome (si no tiene instalado Google Chrome, la descarga es gratuita).

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

3. Haga clic con el botón derecho en la página y observe el menú que aparece. Desde ese menú, haga clic en Ver el origen de la página .

   

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 CTRL + U en un PC para abrir una ventana con el código fuente de un sitio mostrado. En un Mac, este acceso directo es Comando + Opción + U .

Herramientas para desarrolladores

Además de la sencilla Ver la fuente de la página habilidad que ofrece Google Chrome, también puedes aprovechar sus excelentes herramientas de desarrollo para profundizar aún más en un sitio. Estas herramientas le permitirán no sólo ver el HTML, sino también el CSS que se aplica para ver los elementos en ese documento HTML.

Para usar las herramientas de desarrollo de Chrome:

1. Abrir Google Chrome .

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

3. Haga clic en el icono con tres líneas en la esquina superior derecha de la ventana del navegador.

4. En el menú, pase el ratón por encima de Más herramientas y, a continuación, haga clic en Herramientas para desarrolladores en el menú que aparece.

   

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

6. Alternativamente, si haces clic con el botón derecho en un elemento de una página web y seleccionas Inspeccionar en el menú que aparece, aparecerán las herramientas de desarrollo de Chrome y el elemento exacto que hayas seleccionado se resaltará en el HTML con el CSS correspondiente que se muestra a la derecha. Esto es muy útil si desea saber más acerca de cómo se creó una pieza específica de un sitio.

   

¿Es legal ver el código fuente?

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

Como mencionamos al principio de este artículo, sería difícil encontrar un profesional de la web que hoy en día no ha 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 un recurso para construir algo similar también está bien. Tomando el código tal cual y haciéndolo pasar como su trabajo es donde usted 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 una herramienta de aprendizaje.