Ya sea que sea nuevo en la industria de la web o un veterano experimentado, ver la fuente HTML de diferentes páginas web es algo que probablemente hará muchas veces a lo largo de su 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 pueda aprender de ese trabajo y comenzar a usar cierto código o técnicas en su propio trabajo. Como cualquier diseñador web que trabaje hoy en día, especialmente aquellos que lo han estado haciendo desde los primeros días de la industria, y es una apuesta segura que ellos le digan que aprendieron HTML simplemente viendo la fuente de las páginas web que vieron y estaban intrigados. por. Además de leer libros de diseño web o asistir a conferencias profesionales, ver el código fuente de un sitio es una excelente manera para que los principiantes aprendan HTML.
Más que solo HTML
Una cosa para recordar es que los archivos de origen 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 que está viendo, también habrá CSS (hojas de estilo en cascada) que dictan el aspecto visual de ese sitio. Además, muchos sitios web de hoy incluirán archivos de script incluidos junto con el HTML.
Es probable que haya varios archivos de secuencia de comandos incluidos, de hecho, cada uno de ellos impulsa diferentes aspectos del sitio. Francamente, el código fuente de un sitio puede parecer abrumador, especialmente si eres nuevo en hacer esto. No se frustre si no puede descubrir qué está pasando con ese sitio de inmediato. Ver la fuente HTML es solo el primer paso en este proceso. Con un poco de experiencia, comenzarás a comprender mejor cómo todas estas piezas se unen 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 ve el código fuente de un sitio web? Estas son las instrucciones paso a paso para hacerlo utilizando el navegador Google Chrome.
Instrucciones paso a paso
-
Abre el Navegador web Google Chrome (Si no tiene instalado Google Chrome, esta es una descarga gratuita).
-
Navegue a la página web que le gustaría examinar.
-
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.
-
El código fuente de esa página ahora aparecerá como una nueva pestaña en el navegador.
-
Alternativamente, también puede utilizar los atajos de teclado de CTRL + U en una PC para abrir una ventana con el código fuente de un sitio mostrado. En una Mac, este atajo es Comando + Opción + U.
Herramientas de desarrollo
Además de lo simple Ver código fuente La capacidad que ofrece Google Chrome también puede aprovechar sus excelentes 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 para ver los elementos en ese documento HTML.
Para usar las herramientas de desarrollo de Chrome:
-
Abierto Google Chrome.
-
Navegar a la página web que le gustaría examinar.
-
Haga clic en el icono con tres lineas en la esquina superior derecha de la ventana del navegador.
-
Desde el menú, coloque el cursor sobre Más herramientas y luego haga clic Herramientas de desarrollo en el menú que aparece.
-
Esto abrirá una ventana que muestra el código fuente HTML a la izquierda del panel y el CSS relacionado a la derecha.
-
Alternativamente, si haces clic derecho un elemento en una pagina web y seleccione Inspeccionar en el menú que aparece, aparecerán las herramientas de desarrollo de Chrome y el elemento exacto que ha seleccionado se resaltará en el HTML con el CSS correspondiente que se muestra a la derecha. Esto es muy útil si desea obtener más información sobre cómo se diseñó una parte específica de un sitio.
¿Es legal el código fuente de visualización?
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 utilizarlo para su educación y, en última instancia, para el trabajo que realizan. Si bien no es aceptable copiar el código de un sitio al por mayor y pasarlo como propio en un sitio, usar ese código como un trampolín para aprender es en realidad cuántos avances se hacen en esta industria.
Como mencionamos al comienzo de este artículo, ¡hoy en día es muy difícil encontrar un profesional de la red que trabaje 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 un recurso para construir algo similar también está bien. Tomando el código como está y pasándolo como 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 se inspiran, por lo que no dude en ver el código fuente de un sitio y utilizarlo como herramienta de aprendizaje.
