Introducción a HTML: estructura básica, etiquetas y atributos
HTML (Lenguaje de marcado de hipertexto) es el lenguaje fundamental utilizado para desarrollar páginas web. Es un lenguaje de marcado, lo que significa que estructura el contenido de la página mediante etiquetas. Estas etiquetas se utilizan para crear elementos como encabezados, párrafos, listas, enlaces, imágenes y más.
Estructura básica de HTML
Una página HTML básica tiene una estructura específica. Comienza con una declaración de tipo de documento () para indicarle al navegador que es una página HTML5. Luego, la página se envuelve con la etiqueta <html>, que contiene dos secciones principales: <head> y <cuerpo>.
La <cabeza> contiene información sobre la página, como el título (que se muestra en la barra o pestaña de título del navegador) y enlaces a CSS (hojas de estilo en cascada) o JavaScript, si es necesario. El <cuerpo> Aquí es donde se coloca el contenido visible de la página.
Etiquetas y atributos HTML
Las etiquetas HTML se utilizan para crear elementos en la página. Cada etiqueta tiene un nombre específico y está escrita entre corchetes angulares (< y >). La mayoría de las etiquetas tienen una etiqueta de apertura y una etiqueta de cierre, con el contenido en el medio. Por ejemplo, la etiqueta <p> se utiliza para crear un párrafo.
Los atributos HTML se utilizan para proporcionar información adicional sobre un elemento. Están incluidos en la etiqueta de apertura y tienen nombre y valor. Por ejemplo, la etiqueta <a> (que crea un enlace) puede tener un atributo "href" que define la URL del enlace.
Manipulación DOM
El DOM (Document Object Model) es una representación de la página HTML como una estructura de árbol de objetos. Cada elemento de la página es un objeto en el DOM y podemos manipularlos usando JavaScript.
Seleccionar elementos
Podemos seleccionar elementos en el DOM usando varios métodos. Los más comunes son getElementById (que selecciona un elemento con un id específico), getElementsByClassName (que selecciona elementos con una clase específica) y getElementsByTagName (que selecciona elementos con una etiqueta específica).
Cambiar elementos
Después de seleccionar un elemento, podemos cambiarlo de varias maneras. Podemos cambiar el contenido de un elemento usando la propiedad InnerHTML, cambiar el estilo de un elemento usando la propiedad style y cambiar los atributos de un elemento usando los métodos setAttribute y removeAttribute.
Añadir y eliminar elementos
También podemos agregar y eliminar elementos en el DOM. Para agregar un elemento, creamos un nuevo elemento usando el método createElement, configuramos su contenido y atributos según sea necesario y luego lo agregamos a la página usando el método appendChild o insertBefore. Para eliminar un elemento, primero seleccionamos el elemento y luego usamos el método removeChild.
La manipulación de DOM es una parte fundamental del desarrollo front-end, ya que permite crear sitios web dinámicos e interactivos. Al combinar HTML, CSS y JavaScript, puedes crear prácticamente cualquier tipo de sitio web o aplicación web que puedas imaginar.
