Prueba de conocimientos de CSS. Pruebas de conocimiento de tecnologías Web. Creando una prueba simple

Quizás toda persona interesada activamente en el desarrollo y promoción en buscadores Recursos de Internet, al menos una vez me encontré con un término como validez del código del sitio. Entonces, ¿qué significa una frase tan misteriosa, a primera vista?

La validez del código significa el uso del lenguaje de marcado de hipertexto (HTML) del sitio, que cumple plenamente con todas las reglas y estándares del Consorcio. World Wide Web (Mundial Web Consortium o W3C para abreviar).

El estricto cumplimiento de todas estas reglas y estándares confiere al sitio una serie de ventajas, a saber: compatibilidad entre navegadores (visualización correcta de las páginas del sitio en todos navegadores populares), aumentando la velocidad de carga de las páginas web, percepción positiva del recurso por parte de los motores de búsqueda y otros factores.

Con el desarrollo de la electrónica, que en últimos años avanza a pasos agigantados, los requisitos de validez como uno de los criterios de calidad de los recursos de Internet son cada vez más estrictos. Esto se debe principalmente a la aparición de un gran número aparatos moviles con exhibiciones de lo más diferentes tamaños. Y no hace falta decir que un sitio web con un código válido debe mostrarse de la forma más correcta posible en cualquier smartphone o tableta.

¿Cómo comprobar la validez del código del sitio?

Para verificar la estructura y pureza (validez) del código, debe utilizar uno de los muchos verificadores (validadores) en línea. En el sitio web oficial del World Wide Web Consortium también puedes comprobar la validez del código del sitio:

validator.w3.org para validez HTML y jigsaw.w3.org/css-validator para validez CSS.

El servicio validator.w3.org permite comprobar la validez del lenguaje de marcado de hipertexto de un sitio de una de las tres formas propuestas:

1. Validar por URI: comprobar la validez de HTML por dirección de página web;
2. Validar mediante carga de archivo: comprobar la validez del HTML del documento cargado;
3. Validar mediante entrada directa: comprobar la validez de un fragmento de código HTML.

Para elegir la manera correcta Para verificar la validez del código, solo necesita ir a la pestaña correspondiente:

Abajo en ejemplo claro Demostraré los resultados de comprobar la validez de un recurso tan popular entre desarrolladores y SEO como Habrahabr. Para hacer esto, inserte la URL del sitio en el campo del validador correspondiente y haga clic en el botón VERIFICAR. ¡Voilá! Tan solo unos segundos y el validador nos da el resultado:

El resultado es muy decente, ya que al comprobar la validez de la gran mayoría de sitios aparecerán cientos y, a veces, miles de errores.

¿Cómo corregir errores de código?

Si, al verificar la validez de su código de recurso, se encontró una gran cantidad de errores, entonces bajo ninguna circunstancia debes enojarte. Aunque solo sea porque no hay tantos sitios que cumplan plenamente con las reglas y estándares del W3C. Y todos los errores se pueden corregir con bastante rapidez. Y muchas veces esto se puede hacer incluso sin ayuda externa.

Al finalizar la verificación del código de la página web, el validador emite una lista de todos los errores y amenazas con explicaciones detalladas e instrucciones para eliminarlos. Todo esto va acompañado de ejemplos, por lo que corregir errores de código no será difícil ni siquiera para un principiante.

¿La validez del código afecta la optimización de los motores de búsqueda?

La validez del código es uno de los indicadores de la calidad del sitio, no sólo porque garantiza la compatibilidad del recurso entre navegadores, una mayor velocidad de carga, etc. El punto es que limpio y HTML estructurado El código es uno de los componentes más importantes de una persona competente. optimización interna sitio. Y las razones de esto son bastante obvias:

• motores de búsqueda en los algoritmos de clasificación, en igualdad de condiciones, se da preferencia a los sitios de mayor calidad;
• código válido se procesa fácil y rápidamente y la probabilidad de que los robots de búsqueda lo lean mal es mínima.

Sin duda, es necesario trabajar en los errores en el código, pero los errores pueden ser diferentes, no todos pueden conducir a una mala clasificación del sitio, si no tiene +100500 o más errores, ¡entonces esto no es motivo de preocupación! Corrija aquellos que usted (como propietario de su sitio) considere más peligrosos. Esta es mi opinión personal y puede que no comparta la opinión de ninguno de los lectores.

Esto es lo que piensa Google sobre la validez del código de un sitio web. Posición oficial motor de búsqueda sobre el impacto de la validez del código en optimización de motores de búsqueda presentado en este breve vídeo.

Quiero dedicar el artículo de hoy a la validación de sitios (es decir, HTML). Primero, ¡definamos qué significa este término! La validación del sitio es un control. errores de sintaxis, comprobando el anidamiento de etiquetas y otros criterios. Como regla general, los validadores (servicios para verificar sitios en busca de errores en la estructura de los documentos) verifican que el código HTML cumpla con un determinado estándar, que se indica al principio de cualquier página HTML en la primera línea. Si no sabías para qué servía, ¡ahora lo sabrás! 🙂 Pero, ¿por qué exactamente se necesita esta validación y en qué afecta?

"¿Qué es la validación del sitio?"

Como dije anteriormente, la validación es el cumplimiento del código HTML con ciertas reglas y estándares. XHTML fue reemplazado por , lo que hizo la vida mucho más fácil a los desarrolladores. El caso es que en la versión XHTML la sintaxis era muy estricta. Si en HTML5 puedes escribir una etiqueta envolvente
como sin barra oblicua, entonces en esta forma
, entonces solo en XHTML última opción. HTML5 no es tan estricto y, además, han aparecido muchas etiquetas útiles, pero ya no se trata de eso :)

"¿A qué afecta la validación del sitio?"

Ahora respondamos la segunda pregunta.

La validación del sitio le permite monitorear la visualización correcta del sitio en diferentes navegadores. Por ejemplo, si no cierra la etiqueta o comete un error tipográfico en algún lugar del código, es posible que la misma página se muestre de manera diferente en diferentes navegadores. Además, es posible que (CSS) no se muestre como esperaba. Por lo tanto, es necesario seguir esto de cerca.

Además, no pude evitar decir que la validación afecta a los motores de búsqueda: Los motores de búsqueda dan preferencia a los sitios con código HTML válido.. ¡Ten esto en cuenta!

Bueno, ¿te he convencido de que la validación de un sitio web es realmente necesaria? ¡Entonces terminamos con la teoría y pasemos a la práctica!

Métodos de verificación de validación

Escribí sobre cada uno de los métodos. instrucciones detalladas en forma de texto, y además, si a alguien le da pereza leer y entender, hice un vídeo 😉 .

1 vía. Servicio validador.w3.org

La esencia del primer método es utilizar un servicio para comprobar la validez del sitio. Cómo comprobar la validez de un sitio utilizando el servicio validador.w3.org:

1. Vaya a la dirección: validator.w3.org. Se abrirá una página frente a nosotros con 3 pestañas. En la primera pestaña "Validar por URI" puede verificar la validez de un sitio publicado en Internet, en la segunda "Validar por carga de archivo" - cargar un archivo desde su computadora, y en la tercera "Validar por entrada directa" - pegue el contenido del archivo directamente en el formulario de entrada. Hablaré de la primera opción, es decir, cuando el sitio se publica en Internet (creo que no tendrás ningún problema con otros métodos). Por lo tanto, seleccione la primera pestaña como en la imagen a continuación:

• Codificación de caracteres- codificación de su sitio. ¡PERO! Si ya está entre las etiquetas (en su sitio web en su navegador, presione el atajo de teclado CTRL+U y busque al principio del documento una línea como esta

  ). Si hay algo similar en la primera línea, deje el valor aquí también (detectar automáticamente).

Si no tiene nada de lo que describí anteriormente, deberá configurar estos valores usted mismo. No cambié nada aquí y dejé todo como está.

3. Luego, en el campo "Dirección", ingrese la dirección de su sitio como lo hice yo:

Luego haga clic en el botón “Verificar”, que se encuentra en el medio del bloque gris:

4. Luego viene la validación de su sitio y después de un tiempo aparecerá el resultado de la validación. Voluntad página similar con el mensaje "¡Este documento se comprobó correctamente como HTML5!" (lo que significa que su sitio ha pasado con éxito la verificación de validez un cierto tipo documento, es decir, en mi caso HTML5):

Si tiene una inscripción sobre un fondo rojo, esto significa que tiene errores en su documento HTML. Es necesario corregirlos. Para ello simplemente resalta el nombre del error (en el vídeo te muestro cómo hacer todo esto) y pégalo, por ejemplo, en Google. Luego simplemente lea cómo otros webmasters abordaron este error y corríjalo siguiendo estos consejos. También tienes otra opción: confiar este asunto a persona conocedora, que comprenda el código y déjelo hacerlo por usted.

Método 2. Complementos del navegador

1. Complemento del navegador Mozilla Firefox- Ir

Siga el enlace de arriba y seleccione la versión. Navegador Firefox y haga clic en el botón “Descargar”. Luego seleccione el requerido Sistema operativo e instálelo como un complemento normal. (los que no entiendan, miren el vídeo :)

2. Complemento para navegador de google Cromo - Ir

Aquí debe hacer clic en el botón "Gratis" y luego hacer clic en "Agregar" en la ventana emergente.

3. Complemento para navegador ópera- Ir

Aqui tambien pasa instalación normal adiciones.

4. Complemento para Navegador Safari- Ir

Todos los servicios presentados en este extremadamente selección útil ayudar a un diseñador web a probar que su sitio cumple con los estándares y normas generalmente aceptadas de los desarrolladores web. En particular, puede comprobar la exactitud del código HTML de la página, los estilos CSS, la accesibilidad del sitio en todo el mundo, la accesibilidad para dispositivos móviles, carga extrema en el sitio, velocidad de carga de la página, cómo se ve el sitio en diferentes navegadores y en particular en Internet Explorer.

1. Enlace de verificación
Comprueba un sitio o página en busca de enlaces rotos

2. Comprobador de URL
Comprueba la disponibilidad del sitio en diferentes puntos globo.

3. Comprobador móvil
Comprueba qué tan accesible es el sitio para dispositivos móviles y muestra una lista de errores y comentarios.

4. Unicornio
Varias pruebas para el sitio, en particular HTML 1.0 y validación del Feed.

5. validador CSS
Examen mesas en cascada estilos (CSS) y documentos (X)HTML.

6. Fuente RSS Validador
Comprobación de la sintaxis de los canales RSS.

7. Accesibilidad con estilo
Prueba el sitio para verificar el cumplimiento de los estándares WCAG 1.0.

8. Contraste de colores
cheques contraste de color entre los elementos frontal y posterior del sitio.

9.WDG Validador HTML
Validador de páginas web HTML.

10.Dr. Verificación de validación del sitio de Watson
Revisión completa del sitio en varias áreas: HTML, enlaces, enlaces de imágenes, velocidad de carga, SEO.

11. Comprobador de robots
Servicio de comprobación del archivo robots.txt.

12. Firebug Firefox Extensión
Extensión para Firefox con un conjunto de herramientas de prueba.

13. Impacto de carga
Probando el sitio en condiciones extremas aumento de carga al sitio.

14.Comprobador de accesibilidad
Otro servicio para probar el cumplimiento de los estándares de un sitio.

15. Viewlike.us: el servicio no funciona
Muestra cómo se ve el sitio cuando diferentes resoluciones pantalla.

¡Hola a todos! Hoy te diré qué es. validez del código del sitio, por qué es necesario y cómo comprobarlo y solucionarlo utilizando varios servicios de validación del W3C en línea (html, CSS). Entonces, comencemos con las teorías. ¿Qué es exactamente este término?

La validez del código es el grado en que el código de su sitio web cumple con los estándares internacionales aceptados, abreviado como W3C. En otras palabras, hace mucho tiempo varios reglas generales sobre la escritura de código, que en caso de incumplimiento de los estándares W3C puede conllevar visualización incorrecta su sitio en varias computadoras y navegadores móviles. Además, en algunos casos especialmente raros, esto puede dar lugar a sanciones por parte de los motores de búsqueda, así como a la imposición de diversos filtros que pueden ralentizar el desarrollo de su proyecto. Pero esto sucede muy raramente, ya que incluso el propio Yandex código de google no es 100% válido, es decir, contiene errores.

En realidad, probablemente tengas una pregunta: ¿por qué necesito gastar mi propio tiempo¿Editar el código de su sitio para que sea válido, si aún no afecta nada? Como escribí anteriormente, esto es necesario para garantizar que su sitio se muestre correctamente (sin fallos ni errores) en varios navegadores. Hoy, como sabes, son cada vez más populares. varios tipos Modelos de teléfonos: iPhone, Android, Smartphone y otros, que ya son utilizados por toda la población de la tierra. Hoy en día una de cada tres personas tiene la suya. teléfono móvil, a través del cual puede conectarse y visitar su sitio. Esto es aproximadamente 20-30 veces más que aquellos que tienen su propia propia computadora, computadora portátil, tableta.

Es decir, entiendes el punto. La audiencia de personas que utilizan dispositivos móviles es la más grande, y es a eso a lo que debemos dirigirnos. Y si recuerda cuántos dispositivos móviles se han lanzado en los últimos 10 años y cuántos modelos nuevos se siguen lanzando cada seis meses, queda claro que sería muy estúpido perder ese tráfico (visitantes). Además, las nuevas tecnologías no se detienen, y con la llegada del lenguaje html5 actualizado, su antiguo sitio web creado en el año 200 puede convertirse, por así decirlo, en un gran desastre en el contexto de la red global.

¿Cómo comprobar la validez del código html y CSS de su sitio?

Hay muchos servicios de este tipo en Internet, pero casi todos son fraudulentos e incluso en Internet Inglés, donde aún con ello no será muy fácil entender de qué se trata estamos hablando de. Pero aún así, hay uno de ellos que es más normal, que no sólo da una explicación, sino que también muestra en qué línea de código se encuentra el error. Entonces, familiarícese con jigsaw.w3.org.

Al visitar este sitio, puede verificar la validez del código de su sitio de tres maneras. En la pestaña "Verificación de URI", ingrese la dirección de su sitio y el servicio le brindará la lista completa de errores encontrados en los códigos solo en pagina de inicio! Si, como yo, no tiene mucho conocimiento sobre códigos y al ver el código de su sitio no puede encontrar la línea que necesita ser corregida, entonces simplemente puede cargar su archivo de estilos CSS (diseño del sitio) en la sección "verificar archivo cargado". " pestaña. .

En este caso, ya sabrás en qué archivo debes insertar el código. Por cierto, puedes hacerlo aún más fácil. Si su sitio se ejecuta en algún motor, por ejemplo, solo necesitará ir al panel de administración del blog en " apariencia» “editor”, seleccione un archivo, por ejemplo, un encabezado (header.php), copie el código y péguelo en el servicio en la pestaña “comprobar el texto escrito”. Así es como revisé personalmente mi blog.

Entonces, en mi sitio personalmente hubo 44 errores, lo cual es muy poco en comparación con otros sitios. Por cierto, el tío Yandex tiene hasta 155 errores, ah-ah-ah. Bueno, está bien, no hablemos de cosas tristes.

Para que te resulte más fácil corregir estas imprecisiones en los códigos, déjame mostrarte personalmente algunos ejemplos en mi blog. Primero, preste atención a la inscripción Línea 26. Esto indica una línea de código. Para encontrarlo rápidamente, coloque este codigo, que insertó en el servicio jigsaw.w3.org, las etiquetas de las líneas se muestran en cualquier editor html.

Observe que alguna etiqueta siempre está resaltada en rojo en el código. Este es el lugar donde debes buscar y editar el código. La mayoría de las veces, es necesario eliminarlo por completo o agregarle las etiquetas que faltan. También en el título y en la parte inferior de la inscripción hay consejos en inglés sobre lo que se debe hacer para corregir el error.

Ejemplo 1. Aquí debe eliminar las comillas resaltadas en rojo. <> . No deben estar dentro del código, donde ya existen al principio y al final.

Ejemplo 2. Falta una etiqueta de cierre al final del código. /> . Observe que si en la parte superior del código hay otra línea también con etiqueta abierta, entonces también debe cerrarse; de ​​lo contrario, el error no desaparecerá.

Ejemplo 3. Aquí solo necesitas eliminar la línea repetida: “ href=""> .

Por cierto, primero debes corregir los errores resaltados con una cruz, y no signo de exclamación, ya que estos errores no son tan importantes. Además, antes de arreglar algo, haz esto, ya que existe una alta probabilidad de que lo rompas. Después de limpiar completamente el código, recomiendo observar cómo se muestra su sitio en diferentes navegadores. diferentes plataformas PC y teléfonos. El servicio gratuito en línea browsershots.org puede ayudarle con esto.

¿De qué otra manera puedes comprobar rápidamente la validez del código html y CSS de tu sitio?

Si jigsaw.w3.org no fue suficiente para ti, aquí tienes un par más servicios adicionales para comprobar la validez código html sitio web: www.validome.org, watson.addy.com,

En conclusión, quiero decir que si encuentras un par de errores en ti mismo, entonces no tienes que preocuparte por eso, ya que hoy no es tan importante. En general, se han realizado experimentos sobre este tema durante mucho tiempo, de los cuales quedó claro que un código mal válido no afecta los resultados de búsqueda de un sitio. Pero, desgraciadamente, Internet es un entorno en el que todo cambia rápidamente. Hoy puede que no importe, pero mañana Yandex endurecerá esto algoritmo adicional y las posiciones de búsqueda pueden disminuir (caer). Entonces, si tiene tiempo adicional para modificar el código de su sitio, es mejor hacerlo ahora.

La verificación de la validez del código HTML del sitio está necesariamente incluida en mi . Pero no hay necesidad de sobrestimar la importancia de los errores de validación en Promoción SEO- es muy pequeño. Para cualquier tema en el TOP habrá sitios con un gran número cometiendo tales errores y viviendo bien por sí mismos.

¡PERO! Ausencia errores técnicos en el sitio es un factor de clasificación y, por lo tanto, no se debe desaprovechar esta oportunidad. Es mejor arreglarlo, definitivamente no empeorará. Los motores de búsqueda verán tus esfuerzos y te darán un pequeño plus en tu karma.

Cómo comprobar la validez del código HTML de un sitio

La validación del código del sitio se verifica usando servicio en línea Validador HTML del W3C. Si hay errores, el servicio le proporciona una lista. Ahora analizaré los tipos de errores más comunes que he encontrado en los sitios.

• Error: ID duplicado min_value_62222

Y detrás de este error hay una advertencia.

• Advertencia: la primera aparición del ID min_value_62222 fue aquí

Esto significa que el ID del identificador de estilo está duplicado, lo que según las reglas validez html debe ser único. En lugar de ID, puedes usar CLASS para objetos duplicados.

Corregir esto es deseable, pero no muy crítico. Si hay muchos errores de este tipo, es mejor corregirlos.

Del mismo modo, puede haber otras opciones:

• Error: ID duplicado placeWorkTimes
• Error: devolución de llamada de ID duplicadaCss-css
• Error: ID duplicado Capa_1

La siguiente es una advertencia muy común.

• Advertencia: el atributo de tipo no es necesario para JavaScript recursos

esto es muy error común al verificar la validación del sitio. Según las reglas HTML5 atributo de tipo La etiqueta script no es necesaria, es un elemento obsoleto.

Advertencia similar para estilos:

• Advertencia: el atributo de tipo para el elemento de estilo no es necesario y debe omitirse

Corregir estas advertencias es deseable, pero no crítico. En grandes cantidades mejor arreglarlo.

• Advertencia: considere evitar valores de ventana gráfica que impidan a los usuarios cambiar el tamaño de los documentos

Esta advertencia indica que no puede aumentar el tamaño de la página en dispositivos móviles o tabletas. Es decir, el usuario quería mirar más de cerca las imágenes o el texto muy pequeño y no puede hacerlo.

Considero que esta advertencia es muy indeseable, es un inconveniente para el usuario y es un inconveniente de comportamiento. Se elimina eliminando estos elementos: escala máxima = 1.0 y escalable por el usuario = no.

• Error: se especificó el atributo itemprop, pero el elemento no es una propiedad de ningún elemento

Este es un micro marcado, el atributo itemprop debe estar dentro del elemento con itemscope. Creo que este error no es crítico y se puede dejar como está.

• Advertencia: Los documentos no deben usar about:legacy-compat, excepto si son generados por sistemas heredados que no pueden generar el tipo de documento estándar.

La línea about:legacy-compat solo es necesaria para generadores html. Aquí solo necesitas hacerlo, pero el error no es crítico en absoluto.

• Error: fuente de etiqueta final perdida

Si miras el código del sitio y encuentras este elemento, puedes ver que etiqueta única registrados como un par; esto no es correcto.

En consecuencia, debe eliminar la etiqueta de cierre del código.. De forma similar a este error, pueden aparecer etiquetas.

• Error: un elemento img debe tener un atributo alt, excepto bajo ciertas condiciones. Para obtener más información, consulte la guía sobre cómo proporcionar alternativas de texto para imágenes.

Todas las imágenes deben tener atributo alternativo, Considero que este error es crítico y debe solucionarse.

• Error: el elemento ol no está permitido como hijo del elemento ul en este contexto. (Suprimiendo más errores de este subárbol).

Aquí el anidamiento de etiquetas es incorrecto. EN

solo debería haber
• . EN en este ejemplo Estos elementos no son necesarios en absoluto.

  

  Del mismo modo, puede haber otros errores como este:

  • El elemento h2 no está permitido como hijo del elemento ul en este contexto.
  • El elemento a no está permitido como hijo del elemento ul en este contexto.
  • El elemento noindex no está permitido como hijo del elemento li en este contexto.
  • El elemento div no se permite como hijo del elemento ul en este contexto.

  Todo esto necesita ser corregido.

  • Error: el atributo http-equiv no está permitido en el elemento meta en este momento

  

  El atributo http-equiv no está destinado al elemento meta; debe eliminarse o reemplazarse.

  Errores similares:

  • Error: el atributo n2-lightbox no está permitido en el elemento a en este momento.
  • Error: el atributo asyncsrc no está permitido en el script del elemento en este momento.
  • Error: el precio del atributo no está permitido en la opción del elemento en este momento.
  • Error: cadena hash de atributo no permitida en el intervalo de elementos en este momento.

  Aquí también debe eliminar los atributos n2-lightbox, asyncsrc, price, hashstring o reemplazarlos con otras opciones.

  • Error: etiqueta de inicio incorrecta en img en head

  O así:

  • Error: etiqueta de inicio incorrecta en div en head

  

  Las etiquetas Img y div no deben estar en . Este error debe corregirse.

  • Error: CSS: Error de análisis

  

  EN en este caso No debe haber punto y coma después del corchete en estilos.

  Bueno, un error así, un poco, pero no agradable) Compruebe usted mismo si es necesario eliminarlo o no, no tendrá ningún impacto en la promoción del sitio.

  • Advertencia: el atributo charset en el elemento script está obsoleto

  Ya no es necesario especificar la codificación en los scripts; este es un elemento obsoleto. La advertencia no es crítica, queda a su criterio.

  • Error: el script del elemento no debe tener el atributo charset a menos que también se especifique el atributo src

  En este error, debe eliminar el atributo charset="uft-8" del script, ya que muestra la codificación fuera del script. Creo que este error debe corregirse.

  • Advertencia: encabezado vacío

  

  Aquí hay un encabezado h1 vacío. Es necesario eliminar las etiquetas

  o poner un título entre ellos. El error es crítico.
  • Error: etiqueta final br

  

  La etiqueta br es única, pero está confeccionada como si cerrara un par. Necesitamos eliminar / de la etiqueta.

  • Error: la referencia del carácter nombrado no terminaba con un punto y coma. (O & debería ha sido escapó como &.)

  

  Este caracteres especiales HTML, debes escribirlo correctamente o copiarlo. Es mejor corregir este error.

  • Error fatal: no se puede recuperar después del último error. Cualquier error adicional será ignorado.

  Este es un error grave:

  

  Después no debería haber nada en absoluto ya que es la última etiqueta de cierre de la página. Debes eliminar todo lo que aparece después o moverlo hacia arriba.

  • Error: CSS: correcto: solo 0 puede ser una unidad. Debes poner una unidad después de tu número.

  Necesitas escribir el valor en px:

  

  Aquí hay un error similar:

  • Error: CSS: margen superior: solo 0 puede ser una unidad. Debes poner una unidad después de tu número.
  • Error: elemento no cerrado a