Abra el código de la página en Google usando claves. Conocimientos básicos de código. Esto será interesante para principiantes.

Entonces, hoy veremos varias herramientas útiles para webmasters que facilitan la vida al diseñar un sitio web. Comencemos con la consola del web master en Google Chrome. Y repasemos las preguntas que con mayor frecuencia le surgen a un webmaster durante el diseño de un sitio web.

Para acceder a la consola, abra su sitio web en Google Chrome, haga clic derecho en cualquier lugar de la página web y seleccione "Ver código de página" en el menú desplegable contextual, o en un elemento específico para estudiar seleccionando "Ver elemento de código". ".

En la parte superior tendrás varias pestañas enumeradas. Hoy hablaremos de la pestaña “Elementos” , que presenta los elementos de una página web con resaltado de etiquetas, propiedades, resaltando el anidamiento de elementos, una representación de la jerarquía del elemento en el árbol DOM (una pista en la parte inferior, desde el padre raíz hasta el actual), la capacidad para editar elementos, una lista de sus propiedades, considere buscar por elementos, así como familiaricémonos con la visualización de estilos CSS, etc., asociados con los elementos.

¿Cómo puedo ver todos los estilos asociados a un elemento específico? ¿Cuál se usa ahora? ¿En qué archivos se encuentran?

¡Nada podría ser más fácil! Abra el navegador Google Chrome, abra nuestro sitio web (la fuente de las preguntas), haga clic derecho en el elemento deseado si está visible en el contexto de la página y seleccione "Ver código del elemento" en el menú contextual.

En la parte inferior tenemos una consola con una pestaña resaltada a la izquierda " Elementos" y todos los estilos asociados al elemento de la derecha, donde: Estilos calculados– estos son estilos generales de "resumen" que se asignaron al elemento a partir de las reglas CSS y la configuración del navegador del usuario (su entorno), y al mismo tiempo la pestaña está colapsada.

Pero nos interesa la pestaña "Estilos", expandida debajo, que enumera a su vez todos los estilos asignados al elemento, así como los archivos donde se especifican estas reglas para este elemento por su tipo, id, clase, nombre, propiedad. , atributo, etc. Además, si una regla CSS está tachada, significa que se redefinió antes/posteriormente (lo que facilita rastrear cuál de las reglas CSS tiene prioridad y se aplica en este caso al elemento).

Debajo de la consola hay una línea que muestra el elemento en la jerarquía del documento, lo que le permite ver fácilmente la lista completa de elementos principales desde la raíz hasta el elemento seleccionado. Algo así como “pan rallado”.

¿La etiqueta HTML no es visible en el contexto de la página? ¿O necesita buscar todas las etiquetas, por ejemplo, por una clase, nombre, propiedad o tipo específico?

Abra el sitio en Google Chrome, haga clic derecho, abra el menú contextual, seleccione « Ver código de página » . Presione la combinación de teclas "CTRL + F" al mismo tiempo, ingrese la frase que necesitamos ( Por ejemplo: clase =”relleno") y moverse por la lista de resultados encontrados, viendo simultáneamente todos los estilos asociados con los elementos deseados en el lado derecho de la página.

Cómo ver el código html de un elemento cargado dinámicamente (por ejemplo: vía Ajax)

Estamos esperando que se cargue la página en Google Chrome. Realizamos las acciones necesarias para que Ajax funcione. Haga clic derecho en los datos cargados, seleccione "Ver código de elemento" en el menú contextual y examine el resultado en la consola en la pestaña "Elementos" a la izquierda.

Ver cambios de estilo CSS en tiempo real

Por cierto, también conviene observar, si es necesario, qué estilos se asignan a un elemento sobre la marcha, por ejemplo, al desplazarse por una galería y otros eventos del temporizador. Todos los estilos asignados vía javascript en tiempo real se mostrarán en la propiedad estilo elemento seleccionado en la ventana de la pestaña “Elementos”.

Vea de forma interactiva el impacto de las reglas CSS en la presentación de etiquetas HTML

Google Chrome proporciona una consola interactiva para estilos CSS. Esto significa que no sólo puede ver qué estilos se aplican al elemento, sino también mover el cursor del mouse sobre una propiedad CSS específica, habilitarla usando la casilla de verificación emergente a la derecha o deshabilitarla borrando la bandera y ver el resultado resultante en la página.

Cambiamos la estructura de presentación de los elementos html sobre la marcha (directamente en el navegador)

Entonces, ya hemos aprendido cómo explorar la estructura de un documento web en Google Chrome, ahora veremos brevemente cómo editar elementos sobre la marcha. Nos dirigimos a la consola de la forma que más nos convenga. Encontramos el elemento deseado en la pestaña "Elementos", hacemos clic derecho sobre él, abriendo así el menú contextual emergente:

• Agregar atributo– agrega un atributo para el elemento especificado. Tan pronto como el cursor se activa, comenzamos a configurar la propiedad deseada. Por ejemplo: escribiremos nombre=”itemImage”, que se agregará inmediatamente a nuestro elemento.
• Editar atributo– si hace clic derecho en el atributo de un elemento, el elemento pasa a estar disponible editaratributo. Haga clic y edite.

Ejemplo de uso: Olvidamos la contraseña guardada con asteriscos en Google Chrome (si la contraseña se guardó en este navegador). Haga clic derecho en el elemento con la contraseña ingresada, haga clic en "Ver código de elemento" , en la consola en la pestaña izquierda Elementos haga clic derecho en el atributo tipo = "contraseña", haga clic izquierdo en Editaratributo cambiar el atributo tipo =”contraseña" en tipo =”texto", y ahora, en lugar de asteriscos, se muestra la misma contraseña en forma de texto.

• EditarHTML– haga clic derecho en el elemento en la consola Elementos, seleccionar EditarHTML, cambia el código a tu gusto.
• CopiarcomoHTML– copiamos la parte de HTML que necesitamos para una mayor investigación, por ejemplo, en un bloc de notas, o para otros fines en los que necesitamos aplicar exactamente el mismo diseño. Ahorramos tiempo.
• CopiarXPATH– copia la representación XPATH de la estructura desde la raíz del elemento principal al elemento seleccionado.
• Borrarnodo– si necesita eliminar el elemento actualmente seleccionado y todos sus hijos del contexto de la página web y ver el resultado.
• Palabraenvoltura– representará una vista de página web en el contexto de la consola Elementos más legible.

En los siguientes artículos continuaremos considerando herramientas para webmasters y, en particular, nos familiarizaremos con las pestañas restantes de herramientas para webmasters en Google Chrome y también considere depurar errores de JavaScript usando diferentes navegadores

Durante mucho tiempo, la opción "mostrar fuente de la página" fue inútil y poco interesante para mí. Hasta ahora, aprender HTML en Codecademy y diseñar mis propios sitios web no se ha convertido en mi nuevo pasatiempo. Aquí surgió la pregunta: ¿dónde encontrar casos reales y tomar prestadas soluciones interesantes para su “alcancía”? La respuesta fue inesperadamente sencilla, como toda cosa ingeniosa: ¡mira el código fuente de la página en Google Chrome! Comparto con vosotros mis modestos hallazgos.

¿Cuál es el código fuente de la página?

Si usted, como yo, recién está dando sus primeros pasos en la programación HTML, sería una buena idea averiguar cuál es el código fuente de una página.

El código fuente, también conocido como código de página HTML, es texto en lenguaje de marcado de hipertexto (HTML). Incluye el contenido real de la página (texto, tablas) y etiquetas. Estos últimos actúan como instrucciones para el navegador: cómo mostrar el contenido, qué tipo de formato utilizar, dónde insertar un hipervínculo o un archivo multimedia. Bueno, para nosotros, programadores novatos, el código fuente es el mejor campo de entrenamiento: encontramos un sitio interesante, lo espíamos, lo guardamos y utilizamos fragmentos exitosos. ¿Cómo?

Cómo ver el código fuente en la página del navegador Google Chrome

Encuentra la página que te gusta. Por ejemplo, me interesaba el diseño del menú del sitio. Hay tres formas de abrir el código fuente en el navegador Google Chrome:

1. Haga clic en el icono menú en la esquina superior derecha del navegador y seleccione “Más herramientas”. Entre otras, existe la opción “Ver código fuente”. Francamente, rara vez uso este método: hay muchos movimientos innecesarios. Se puede hacer aún más sencillo.
2. Presione la combinación de teclas Ctrl+U– se abre una nueva ventana con el código fuente;
3. Para los fanáticos del menú contextual: haga clic derecho en la página y seleccione la opción "Ver código de página".

Nos enfrentamos a la tarea de ver el código HTML de la página en el navegador. Pasemos a la etapa más interesante.

Cómo editar y guardar el código fuente

Para aprender a crear sitios web, no basta con leer el código HTML de otra persona. Tienes que jugar con él, experimentar, hacer cambios y comprobar el resultado. Incluso puedes empezar recopilando algunas muestras exitosas. ¿Cómo editar y guardar el código fuente?

Opción 1. “Manualmente”

Después de haber abierto el código fuente de la página, llame al menú contextual y seleccione la opción "Guardar como" y guarde el archivo en su disco duro. Editamos el archivo en el Bloc de notas o Notepad, guardamos los cambios y lo abrimos a través del navegador. Los resultados de nuestros cambios (exitosos y no tan exitosos) se reflejarán en la ventana del navegador.

Opción 2. Para los profesionales

Cuando "juegas" con el código fuente todos los días, el proceso de "guardar - abrir - cambiar - guardar - verificar" se vuelve agotador. Para mí, encontré una solución instalando un complemento para Google Chrome: Firebug Lite. Le permite editar y guardar el código fuente sin salir de la ventana del navegador.

Necesita ver rápidamente todos los cambios en el sitio en sí, sin afectar los archivos y el código del sitio publicado en Internet. Por ejemplo, cambiar la combinación de colores de un bloque, mover un elemento que se ha movido, etc.

Para hacer esto, muchos webmasters utilizan servidores locales Denwer u OpenServer y ejecutan una copia completa del sitio en su computadora. Este método es universal y adecuado para profesionales; se puede utilizar para probar el funcionamiento de varios scripts y complementos, experimentar con cambios de diseño y editar todos los archivos del sitio y, después de la prueba, transferir los cambios apropiados directamente al sitio.

Para los usuarios que están lejos del arte de los webmasters, recomiendo utilizar un navegador para estos fines. Como uso Chrome, proporcionaré instrucciones con capturas de pantalla para este navegador en particular. Por analogía, puedes trabajar con Opera, Yandex.Browser, Mozilla Firefox y otros navegadores, el principio de funcionamiento de sus herramientas es similar.

Instrucción 1: cómo ver el código HTML completo de un sitio en un navegador

Abra la página web requerida de su sitio. Haga clic derecho en el elemento requerido, aparecerá un menú desplegable contextual del navegador con los comandos disponibles:

Figura 1. Ver el código HTML completo de una página web en el navegador Chrome

Importante: Los comandos en el menú desplegable pueden diferir, por ejemplo, para elementos activos (enlaces, imágenes, videos) e inactivos (texto, fondo, divs):

Figura 2. Menú desplegable del navegador Chrome

Entonces, si no encuentra el comando que necesita, simplemente haga clic derecho en otro lugar o use las teclas de acceso rápido de su navegador.

Volvamos a la Figura 1, muestra el comando necesario para ver todo el código HTML de la página web fuente, se llama " Ver código de página". Haga clic en el comando, se abrirá una nueva pestaña con el código completo de la página web de origen, una gran ventaja para todo: la visualización está disponible con resaltado de sintaxis:

Figura 3. Fragmento de código de este sitio

Esta herramienta es muy útil para encontrar y editar los elementos que buscas.

Formas alternativas de ver todo el código HTML de una página web

Para un acceso más rápido, puede utilizar otras formas de llamar a esta herramienta.

1. En la Figura 1 también vemos que este comando está disponible mediante un atajo de teclado. + ;
2. Pegue view-source:site en la barra de direcciones del navegador en lugar de mi dominio, inserte su dirección;

Ambos métodos son universales y deberían funcionar en todos los navegadores.

Al principio, algunos pueden pensar que esta no es una herramienta necesaria en absoluto, pero ver el código HTML completo de un sitio es excelente para encontrar los elementos necesarios en el código, estos pueden ser enlaces, etiquetas, metaetiquetas, atributos y otros elementos. .

combinación de teclas de acceso rápido +abre la ventana de búsqueda, en el navegador Chrome aparece arriba a la derecha:

Figura 3. Búsqueda por código de sitio

Luego de ingresar una solicitud en el formulario de búsqueda, la pantalla se moverá al primer elemento encontrado, usando las flechas podrás moverte entre ellos y seleccionar el que necesitas:

Figura 4. Búsqueda por código de sitio HTML

Instrucción 2: cómo ver y editar el código HTML y CSS de un sitio en el navegador Google Chrome

Ahora la parte más importante, en la que mostraré cómo se puede editar el código HTML y CSS de un sitio web en un navegador. luego transfiera los cambios al navegador.

Esta útil herramienta siempre está disponible en su navegador; experimente con otros comandos que le facilitarán la edición de su sitio.

Navegando por innumerables sitios en Internet, puedes encontrar algunos que realmente nos gustan. Inmediatamente surgen una serie de preguntas. ¿El sitio se creó utilizando código casero o algún tipo de CMS? ¿Qué estilos CSS tiene? ¿Cuáles son sus metaetiquetas? Etcétera.

Existen muchas herramientas que se pueden utilizar para extraer información sobre el código de una página web. Pero siempre tenemos el botón derecho del ratón a mano. Esto es lo que usaremos, usando mi sitio como ejemplo.

¿Cómo ver el código de la página?

Para ver el código fuente de la página de un sitio, debe pasar el mouse sobre cualquier área de la página web (excepto imágenes y enlaces). Después de esto, haga clic en el botón derecho del mouse. Se abrirá frente a nosotros una ventana con varias opciones (pueden diferir ligeramente en diferentes navegadores). En el navegador Google Chrome, por ejemplo, estos son los comandos:

• atrás;
• adelante;
• reiniciar;
• guardar como;
• sello;
• traducir al ruso;
• ver código de página;
• ver código.

Necesitamos hacer clic en ver código de página, y el código html de la página del sitio se abrirá frente a nosotros.

Ver el código de la página: ¿a qué prestar atención?

Entonces, el código de la página HTML es una lista numerada de líneas, cada una de las cuales contiene información sobre cómo se crea este sitio. Para aprender rápidamente a comprender esta gran cantidad de signos y símbolos especiales, es necesario distinguir entre las diferentes secciones del código.

Por ejemplo, las líneas de código dentro de la etiqueta head contienen información para motores de búsqueda y webmasters. No se muestran en el sitio. Aquí puede ver para qué palabras clave se promociona esta página, cómo está escrito su título y descripción. También aquí puede encontrar un enlace, tras el cual conoceremos la familia de fuentes de Google utilizadas en el sitio.

Si el sitio está creado en CMS WordPress o Joomla, esto también será visible aquí. Por ejemplo, esta área muestra información sobre un tema de WordPress o una plantilla de sitio web de Joomla. Puedes verlo leyendo el contenido de los enlaces resaltados en azul. Un enlace muestra una plantilla de sitio web.

Por ejemplo:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Veremos los estilos de fuente CSS de la página. En este caso, se utiliza la fuente. Esto se puede ver aquí: font-family: 'Source Sans Pro'.

Este sitio está optimizado con el complemento Yoast SEO. Esto se puede ver en esta sección de código comentada:

Este sitio está optimizado con el complemento Yoast SEO v3.4.2: https://yoast.com/wordpress/plugins/seo/

El navegador muestra toda la información contenida dentro de la etiqueta del cuerpo en la pantalla del monitor. Aquí vemos el código html de la página y en la parte inferior está el código del script de Yandex Metrics. Está rodeado por una etiqueta comentada con el texto:

/Contador Yandex.Metrika

resumámoslo

Habiendo realizado un análisis bastante superficial del código de la página principal del sitio, podemos sacar una conclusión sobre con qué herramientas se creó esta página. Vimos en él:

• CMSWordPress;
• Fuente de Google Source Sans Pro;
• Tema de WordPress – Sídney;
• Complementos de Yoast;
• Contador de métricas de Yandex.

Ahora el principio de analizar el código HTML de una página web es bastante claro. No es en absoluto necesario mantener abierta la página que estás investigando en el navegador. Puede guardar el código de la página en su computadora usando las combinaciones de teclas ctrl+a, ctrl+c, ctrl+v. Pégalo en cualquier editor de texto (preferiblemente Notepad++) y guárdalo con la extensión html. De esta manera, podrás profundizar en él en cualquier momento y encontrar más información útil para ti.

La probabilidad de mirar la inicial. código web paginas, recibido por el navegador como resultado de una solicitud al servidor, está disponible prácticamente en todos los navegadores de Internet. El acceso al comando correspondiente se organiza aproximadamente de manera idéntica, pero existen diferencias significativas en el método y la forma en que se realiza el comando inicial. código .

Instrucciones

1. En el navegador Mozilla Firefox, expanda la sección "Ver" en el menú y haga clic en "Inicial". código paginas" El mismo elemento también está en el menú contextual que aparece si hace clic derecho en el texto. paginas. También puede utilizar la combinación de teclas CTRL + U. Mozilla FireFox no utiliza programas externos - inicial código paginas con resaltado de sintaxis se abrirá en una ventana separada del navegador.

2. En Internet Explorer, haga clic en el menú Archivo y seleccione Editar en el Bloc de notas. En lugar del nombre Bloc de notas, se puede escribir otro programa que haya asignado en la configuración del navegador para ver el inicial código A. Al hacer clic paginas con el botón derecho del mouse aparece un menú contextual, que también tiene un elemento que permite abrir la página inicial código paginas en un programa externo – “Ver HTML- código A".

3. En el navegador Opera, abra el menú, vaya a la sección "Página" y tendrá la oportunidad de seleccionar el elemento "Inicio" en la subsección "Herramientas de desarrollo". código"o el elemento "Inicial código marco." Las teclas de acceso rápido CTRL + U y CTRL + SHIFT + U están asignadas a esta selección, respectivamente. En un menú contextual vinculado a un clic paginas Haga clic derecho, también hay un elemento "Inicial código" Opera abre el código fuente paginas en un programa externo que está asignado en el sistema operativo o en la configuración del navegador para editar archivos HTML.

4. El navegador Google Chrome sin duda tiene la mejor organización para visualizar la inicial código A. Al hacer clic derecho en la página, puede elegir ver código A paginas"y luego el código fuente con resaltado de sintaxis se abrirá en una pestaña separada. O tal vez prefieras la línea "Ver" en el mismo menú. código elemento” y el navegador en la misma pestaña abrirá dos marcos adicionales en los que puede inspeccionar HTML y CSS código cada elemento paginas. El navegador responderá cuando el cursor se mueva entre líneas. código y, resaltando elementos en la página que corresponden a esta sección de HTML código A.

5. En el navegador Apple Safari, expanda la sección Ver y seleccione Ver HTML código A". En el menú que aparece al hacer clic derecho en abrir paginas, el elemento correspondiente se llama "Ver código fuente". A esta acción se le asignan las teclas de acceso rápido CTRL + ALT + U. Inicial código se abre en una ventana separada del navegador.