¿Qué es el Lenguaje de Marcado de Hipertexto (HTML)?
HTML es el lenguaje de marcado estándar utilizado para crear y estructurar contenido en páginas web.
Importancia de HTML en el desarrollo web
HTML es fundamental porque define la organización y semántica de los elementos en una página web. Te permite incluir encabezados, párrafos, enlaces, imágenes, formularios, tablas, y más, garantizando que los navegadores puedan interpretar y mostrar correctamente la página.
Crear un archivo HTML
Puedes crear un archivo HTML usando cualquier editor de texto, como el Bloc de notas. Solo guarda tu archivo con la extensión .html para que puedas comenzar a escribir código HTML.
Uso de etiquetas HTML
Las etiquetas son los bloques de construcción de HTML. Una etiqueta incluye una etiqueta de apertura <tag> y de cierre </tag>, que enmarcan el contenido. Por ejemplo:
- <h1> define un encabezado.
- <p> define un párrafo.
- <a> crea un enlace.
Agregar enlaces en HTML
Para añadir un enlace, usa la etiqueta <a> con el atributo href. Por ejemplo:
<a href="https://ejemplo.com">Ir al sitio</a> crea un enlace que dirige a la URL proporcionada.
Insertar imágenes en HTML
Utiliza la etiqueta <img> para incluir imágenes. Añade atributos como:
- src: especifica la ubicación de la imagen.
- alt: texto alternativo.
- width y height: definen sus dimensiones.
Ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">.
Estilizar elementos HTML
Puedes estilizar los elementos HTML con hojas de estilo en cascada (CSS). CSS define características visuales como colores, márgenes, tamaños de tipografía, y más. Puedes implementar CSS:
- En línea (dentro de las etiquetas HTML).
- Internamente (en la cabecera con <style>).
- Externamente (en un archivo .css aparte vinculado con <link>).
Diferencia entre HTML y CSS
HTML estructura y organiza el contenido, mientras que CSS se encarga de su apariencia visual.
Crear tablas en HTML
La etiqueta <table> permite crear tablas, combinándola con etiquetas auxiliares como:
- <tr> para filas.
- <th> para encabezados de tabla.
- <td> para celdas de datos.
Ejemplo:
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
</table>
Uso de formularios
Los formularios en HTML recogen datos que los usuarios pueden enviar a un servidor. Ejemplo de elementos de formulario:
- <input> para campos de texto o contraseñas.
- <select> para menús desplegables.
- <button> para enviar información.
Insertar vídeos en HTML
La etiqueta <video> de HTML5 permite incrustar vídeos, especificando atributos como:
- src: archivo de vídeo.
- controls: añadir controles de reproducción.
Ejemplo:
<video src="video.mp4" controls></video>
También puedes incrustar vídeos de plataformas externas como YouTube usando sus códigos de inserción.
Añadir comentarios en HTML
Los comentarios son útiles para explicar partes de tu código. Usa <!-- comentario aquí --> para agregar notas invisibles al usuario final.
Integrar JavaScript en HTML
La etiqueta <script> incluye código JavaScript para añadir interactividad o comportamientos dinámicos. Puedes escribir scripts directamente o vincular un archivo externo con el atributo src.
Responsividad en páginas HTML
Para crear páginas adaptables a dispositivos de diferentes tamaños, usa media queries en CSS. Esto asegura que tu diseño funcione bien en computadoras, tablets y smartphones.
Validar código HTML
Utiliza servicios como el validador W3C para comprobar errores en tu HTML y asegurar la compatibilidad con estándares.
HTML y SEO
HTML es crucial para SEO porque permite estructurar el contenido para que los motores de búsqueda lo entiendan mejor. Elementos como:
- Encabezados (<h1> a <h6>).
- Meta etiquetas.
- Descripciones en atributos ALT e hipervínculos descriptivos, contribuyen al posicionamiento y accesibilidad.
HTML para correos electrónicos
Aunque puedes usar HTML para diseñar correos electrónicos, necesitarás herramientas como un servidor o servicios especializados para enviarlos.
Apps móviles con HTML
HTML no crea apps nativas, pero frameworks como Ionic o React Native permiten desarrollar apps híbridas usando HTML, CSS y JavaScript.
Audio en páginas web
La etiqueta <audio> permite incrustar audio. Ejemplo:
<audio src="audio.mp3" controls></audio>
Incluye atributos como reproducción automática (autoplay) o repetición (loop).
Insertar documentos PDF
Para incrustar un PDF, utiliza etiquetas como <embed> o <object>. Ejemplo:
<embed src="archivo.pdf" type="application/pdf" width="600" height="400">
