¿cual es el html, css y script para hacer un Tidy html Markup Corrector?
Para crear un HTML Tidy Markup Corrector, necesitarás utilizar un script en JavaScript que reconozca y analice el código de HTML, optimice su formato y estilo, y devuelva una versión corregida del código. En este ejemplo, se utilizará la librería HTML Tidy en su versión más reciente para realizar el código.
HTML:
En la sección `<head>` de tu archivo HTML, incorpora el enlace al archivo que contiene el código JS de HTML Tidy:
```html
<script src="
https://cdnjs.cloudflare.com/ajax/libs/tidy-html5/5.6.0/tidy.min.js"></script>
```
A continuación, crea un formulario que permita al usuario ingresar el código HTML que desea corregir:
```html
<body>
<h1>HTML Tidy Markup Corrector</h1>
<form>
<label for="inputCode">Ingresa aquí tu código HTML:</label><br>
<textarea id="inputCode" name="inputCode" rows="10" cols="50"></textarea><br><br>
<button type="button" onclick="tidyCode()">Corregir código</button>
</form>
<br>
<p>Resultado:</p>
<pre id="outputCode"></pre>
</body>
```
CSS:
En la sección de hojas de estilo CSS de tu archivo HTML, puedes personalizar el estilo de tu formulario y la salida del código:
```css
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
textarea {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
}
button {
background-color: #0072c6;
color: #fff;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
transition: opacity 0.2s;
}
button:hover {
opacity: 0.8;
}
pre {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
white-space: pre-wrap;
word-wrap: break-word;
}
```
JavaScript:
En el archivo JavaScript de tu sitio, coloca el siguiente código para procesar la entrada del formulario y devolver la versión corregida del código HTML:
```javascript
function tidyCode() {
var inputCode = document.getElementById('inputCode').value;
var config = {
'indent': 'auto',
'indent-spaces': 2,
'wrap': 80,
'markup': true,
'output-xml': false,
'numeric-entities': true,
'quote-marks': true,
'quote-nbsp': false,
'show-body-only': true,
'quote-ampersand': false,
'break-before-br': true,
'uppercase-tags': false,
'uppercase-attributes': false,
'new-inline-tags': ''
};
var outputCode = tidy_html5(inputCode, config);
document.getElementById('outputCode').innerHTML = outputCode;
}
```
Ten en cuenta que es posible que debas ajustar la configuración del script según tus necesidades específicas. También es importante tener en cuenta que, si bien HTML Tidy es una herramienta útil para corregir problemas de formato y estilo en el código HTML, no puede corregir errores sintácticos o de lógica en el código. En estos casos, puede ser necesario revisar manualmente el código HTML para identificar y solucionar los problemas.
