diff options
Diffstat (limited to 'files/es/learn/html/introduccion_a_html/debugging_html/index.html')
| -rw-r--r-- | files/es/learn/html/introduccion_a_html/debugging_html/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/files/es/learn/html/introduccion_a_html/debugging_html/index.html b/files/es/learn/html/introduccion_a_html/debugging_html/index.html new file mode 100644 index 0000000000..114b93ff0f --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/debugging_html/index.html @@ -0,0 +1,171 @@ +--- +title: Depurar el HTML +slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML +tags: + - Error + - Guía + - HTML + - Principiante + - Validación + - Validador + - depurar + - programar +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>, <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Conocimientos básicos de aplicación de formato a textos con HTML</a> y <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hiperenlaces</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Depurar_no_debe_asustarnos">Depurar no debe asustarnos</h2> + +<p>Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje <a href="https://www.rust-lang.org/">Rust</a>.</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en <code>println!(Hello, world!");</code> faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.</p> + +<p>Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.</p> + +<h2 id="HTML_y_depuración">HTML y depuración</h2> + +<p>HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más <strong>permisiva</strong> que la de los otros lenguajes, cosa que es buena y mala a la vez.</p> + +<h3 id="Código_permisivo">Código permisivo</h3> + +<p>¿Qué queremos decir con <em>permisivo</em>? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:</p> + +<ul> + <li><strong>Errores sintácticos</strong>: Son errores de escritura en el código que impiden que el programa funcione, como el error en Rust de arriba. Suelen ser fáciles de arreglar si estamos familiarizados con las herramientas adecuadas y sabemos el significado de los mensajes de error.</li> + <li><strong>Errores lógicos</strong>: En estos errores la sintaxis es correcta, pero el código no hace lo que debería, por lo que el programa funciona de forma incorrecta. Estos errores son, por lo general, más difíciles de solucionar que los sintácticos, porque no hay mensajes de error que nos avisen de ellos.</li> +</ul> + +<p>HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.</p> + +<div class="note"> +<p><strong>Nota</strong>: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.</p> +</div> + +<h3 id="Aprendizaje_activo_Estudio_del_código_permisivo">Aprendizaje activo: Estudio del código permisivo</h3> + +<p>Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.</p> + +<ol> + <li>En primer lugar, hagamos una copia de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">ejemplo-demo a depurar</a> y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está <strong>mal formado</strong>, en contraposición a un marcado <strong>bien formado</strong>).</li> + <li>A continuación, abrámoslo en un navegador; veremos lo siguiente:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>): + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Veamos qué problemas podemos descubrir: + <ul> + <li>El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.</li> + <li>El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.</li> + <li>Esta sección está mal anidada: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.</li> + <li>Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.</li> + </ul> + </li> + <li>Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubrir las herramientas de desarrollo del navegador</a>, y luego continuaremos.</li> + <li>En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado): + <ul> + <li>Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.</li> + <li>Al no estar claro el final del elemento <code><strong></code>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta <code>strong</code> propia, desde donde está ¡hasta el final del documento!</li> + <li>El navegador ha arreglado el anidamiento incorrecto del modo siguiente: + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue: + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Validación_HTML">Validación HTML</h3> + +<p>Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?</p> + +<p>La mejor estrategia es comenzar por pasar tu página HTML por el <a href="https://validator.w3.org/">servicio de validación de etiquetas</a>; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.</p> + +<h3 id="Aprendizaje_activo_Validación_de_un_documento_HTML">Aprendizaje activo: Validación de un documento HTML</h3> + +<p align="left">Vamos a probar de validar nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">documento ejemplo</a>.</p> + +<ol> + <li>Primero, cargamos el <a href="https://validator.w3.org/">servicio de validación</a> en una pestaña del navegador, si no lo tenemos ya.</li> + <li>Hacemos clic en la subpestaña <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Copiamos el código del documento ejemplo (no solo el <code>body</code>) y lo pegamos en el cuadro de texto grande.</li> + <li>Hacemos clic en el botón <em>Check</em>.</li> +</ol> + +<p>Esto debería proporcionar una lista de errores y otras informaciones:</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Interpretación_de_los_mensajes_de_error">Interpretación de los mensajes de error</h4> + +<p>La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.</p> + +<ul> + <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document.": No se trata de un error, sino de una advertencia (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomendación</a> es definir siempre un idioma, y este "warning" explica cómo hacerlo..</span></li> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instancias): Estos mensajes indican que un elemento que ha sido abierto debe ser cerrado. La etiqueta de cierre se supone, pero no está ahí. La información de la línea/columna apunta a la primera línea después de donde debería estar la etiqueta de cierre; es una buena pista para ver qué pasa.</li> + <li>"Unclosed element <code>strong</code>": Un elemento {{htmlelement("strong")}} no ha sido cerrado, y la línea/columna apunta directamente al lugar del error.</li> + <li>"End tag <code>strong</code> violates nesting rules": Este apunta a elementos que están incorrectamente anidados, y la línea/columna nos indica donde están.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": Esta es bastante enigmática; se refiere al hecho de que el valor de un atributo no ha sido bien construido, posiblemente cerca del final del archivo porque el final aparece dentro del valor del atributo. El hecho de que el navegador no muestre el enlace nos debería dar una buena pista de qué elemento es el erróneo.</li> + <li>"End of file seen and there were open elements": Este es un poco ambiguo, pero básicamente se refiere al hecho de que hay elementos abiertos que necesitan ser cerrados adecuadamente. Los números de línea apuntan a las últimas líneas del archivo, y este mensaje de error viene con una línea de código que indica un ejemplo de un elemento abierto: + <pre class="notranslate">example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Nota</strong>: Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.</p> + </div> + </li> + <li>Unclosed element <code>ul</code>: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.</li> +</ul> + +<p><span>No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.</span></p> + +<p><span>Sabremos que todos los errores están arreglados cuando veamos el mensaje siguiente: </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Resumen">Resumen</h2> + +<p>Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> |