# Herramientas para Desarrolladores
Las **herramientas de desarrollo** de los navegadores web son un conjunto de herramientas integradas que permiten a los desarrolladores inspeccionar y depurar código **HTML**, **CSS** y **JavaScript**. A estas herramientas se accede pulsando **F12** o haciendo clic con el botón derecho del ratón en una página web y seleccionando **"Inspeccionar "**.

Por ejemplo, examinemos la página web `google.com`. Pulsando `F12`, podemos acceder a la siguiente vista:

En el lado izquierdo, tenemos la pestaña **Elements**. Muestra la estructura del documento HTML. Si hacemos clic en cualquier elemento, obtendremos los estilos de este elemento en la pestaña de la derecha **Styles**. Si pasamos el ratón por encima de cualquier elemento, se resaltará en la página web que vea el usuario.

Para observar su funcionamiento, vea la breve grabación que se proporciona a continuación:

Apart from element inspection, developer tools allow us to modify **HTML** and **CSS** code. Any changes made will be instantly reflected in the webpage but not permanently saved in the source code. This functionality is helpful for testing and experimenting with markup and styles.

# Estilo de código
**El estilo de código** en HTML se refiere a los principios y directrices establecidos para estructurar y dar formato al código HTML con el fin de mejorar su legibilidad, mantenimiento y uniformidad. Aunque HTML no impone reglas rígidas de estilo de código, la adhesión a prácticas coherentes puede mejorar significativamente la comprensión del código y facilitar las tareas de desarrollo. Al emplear convenciones estandarizadas, los desarrolladores pueden asegurarse de que su código HTML sea más fácil de comprender y de trabajar con él.

>Nota
>
> Si está interesado en las mejores prácticas de estilo de código, se recomienda visitar la siguiente fuente: <a href="https://codeguide.co/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >Guía de código de @mdo</a>.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04IiAvPgogICAgPG1ldGEKICAgICAgbmFtZT0iZGVzY3JpcHRpb24iCiAgICAgIGNvbnRlbnQ9IkxlYXJuIHRoZSBwcmluY2lwbGVzIG9mIHdlYiBkZXZlbG9wbWVudC4iCiAgICAvPgogICAgPHRpdGxlPldlYiBEZXZlbG9wbWVudDwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gV2ViIERldmVsb3BtZW50PC9oMT4KICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2ludHJvZHVjdGlvbiI+SW50cm9kdWN0aW9uPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3R1dG9yaWFscyI+VHV0b3JpYWxzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2NvbnRhY3QiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgoKICAgIDxtYWluPgogICAgICA8c2VjdGlvbiBpZD0iaW50cm9kdWN0aW9uIj4KICAgICAgICA8aDI+SW50cm9kdWN0aW9uPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIFRoaXMgaXMgYSBkZWVwIGRpdmUgaW50byB3ZWIgZGV2ZWxvcG1lbnQuIFdlIHdpbGwgZXhwbG9yZSB2YXJpb3VzCiAgICAgICAgICB0ZWNobm9sb2dpZXMuCiAgICAgICAgPC9wPgogICAgICA8L3NlY3Rpb24+CgogICAgICA8c2VjdGlvbiBpZD0idHV0b3JpYWxzIj4KICAgICAgICA8aDI+V2ViIERldmVsb3BtZW50IFR1dG9yaWFsczwvaDI+CiAgICAgICAgPHA+Rm9sbG93IGFsb25nIHRvIGxlYXJuIEhUTUwsIENTUywgSmF2YVNjcmlwdCwgYW5kIG1vcmUhPC9wPgogICAgICA8L3NlY3Rpb24+CiAgICA8L21haW4+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IDIwMjQgTWljaGFlbCBHcmFuZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC48L3A+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

>Note
>
> If you are interested in code styling best practices, it is recommended to visit the following source: <a href="https://codeguide.co/" target="_blank">Code Guide by @mdo</a>. 

Aprenda lo esencial de HTML (HyperText Markup Language), la base del desarrollo web. Este curso para principiantes abarca etiquetas, atributos, elementos y estructuración de páginas webs. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore las mejores prácticas, la optimización y la accesibilidad web. Comience su viaje por el desarrollo web con HTML.

Explore el funcionamiento interno de la web. Aprenda cómo viajan los datos a través de las redes, descubra el papel de los protocolos y desentrañe los misterios de las direcciones IP y los nombres de dominio. Adquirir una comprensión de alto nivel de cómo los navegadores web y servidores se comunican para entregar contenido web.

Descubra el poder de las tags para estructurar contenidos, desde títulos y párrafos hasta listas y tablas. Aprende a mejorar los elementos con atributos.

El núcleo de la estructura de los documentos HTML. Conozca los componentes de un documento HTML, incluyendo la declaración doctype, head y body. Entender el propósito de cada elemento y cómo contribuyen a la estructura general de una página web.

Hacer más atractiva una página web con la ayuda de medios como imágenes, audio y vídeo. Trabajar con datos tabulares estructurados en forma de tablas.

Explore la versatilidad de los formularios HTML. Aprenda a diseñar formularios intuitivos y fáciles de usar aprovechando conceptos y técnicas clave. Descubra cómo los formularios permiten la interacción del usuario y el envío de datos en los sitios web.

HTML Definitivo

Herramientas para Desarrolladores

Herramientas para Desarrolladores

Estilo de código