HTML significa Lenguaje de Marcado de Hipertexto . Es un lenguaje especial que se utiliza para crear páginas web. Cuando visitas un sitio web, el ordenador lee HTML para mostrarte las palabras, imágenes y enlaces. Piensa en HTML como los componentes básicos de un sitio web. Al igual que se usan piezas de Lego para construir una casa o un coche, usamos etiquetas HTML para crear una página web.
HTML es el código que le indica a una computadora cómo mostrar texto, imágenes, videos y enlaces en una página web. Es como darle instrucciones a un amigo que te está dibujando. HTML usa palabras entre corchetes angulares, llamadas etiquetas , para marcar el inicio y el final de una parte de la página web.
Todos los sitios web que visitas usan HTML de alguna manera. Sin HTML, no habría páginas web disponibles. HTML ayuda a organizar el contenido e indica al ordenador cómo mostrar la página. Es lo primero que se aprende en desarrollo web, ya que hace que internet funcione.
Un documento HTML tiene una estructura especial. Comienza con una declaración llamada <code><!DOCTYPE html></code> que indica al ordenador que la página usa HTML. El documento se divide en dos partes principales: el encabezado y el cuerpo.
Un documento HTML muy simple se ve así:
<código><!DOCTYPE html>
<html>
<cabeza>
<title>Mi primera página web</title>
</cabeza>
<cuerpo>
<p>¡Hola, mundo!</p>
</cuerpo>
</html> </código>
En este ejemplo, la sección <head> proporciona el título de la página y la sección <body> es donde se coloca el contenido que aparece en la pantalla.
HTML usa etiquetas para marcar diferentes partes de la página web. Una etiqueta es una palabra entre corchetes angulares. Por ejemplo, <code><p></code> indica al ordenador que lo que sigue es un párrafo. Al finalizar el párrafo, se usa la etiqueta de cierre, <code></p></code>, para indicar el final.
Un elemento en HTML consta de una etiqueta de apertura, contenido y una etiqueta de cierre. Por ejemplo:
<code><p>Este es un párrafo.</p></code>
Cada etiqueta indica al navegador web cómo mostrar el contenido.
Hay muchas etiquetas en HTML. Algunas de las más comunes son:
Los atributos proporcionan información adicional sobre un elemento HTML. Se añaden a la etiqueta de apertura, dentro de los corchetes angulares. Los atributos más comunes son src y alt, que se usan con la etiqueta de imagen.
Por ejemplo, para agregar una imagen, podrías escribir:
<code><img src="picture.jpg" alt="Una bonita foto"></code>
Aquí, src le dice al navegador dónde está el archivo de imagen y alt proporciona una descripción de la imagen si no se puede mostrar.
El documento HTML se divide en dos partes:
Los enlaces permiten pasar de una página a otra. En HTML, se crean enlaces mediante la etiqueta <a> . El atributo href dentro de la etiqueta indica al navegador el destino del enlace.
Por ejemplo:
<code><a href="https://www.example.com">Visite Example.com</a></code>
Al hacer clic en este enlace, su navegador abrirá el sitio web example.com .
Las imágenes realzan una página web y la hacen más interesante. Para añadir una imagen, se usa la etiqueta <img> . Recuerda que la etiqueta <img> no tiene etiqueta de cierre.
Aquí te explicamos cómo agregar una imagen:
<code><img src="sunflower.jpg" alt="Un girasol brillante"></code>
Este código indica al navegador que muestre la imagen de un girasol. El atributo src indica la ubicación de la imagen y el atributo alt proporciona una descripción.
Las listas organizan la información en un formato ordenado. Existen dos tipos principales de listas en HTML:
A continuación se muestra un ejemplo de una lista desordenada:
<código><ul>
<li>Manzana</li>
<li>Plátano</li>
<li>Cereza</li>
</ul> </código>
Y aquí hay un ejemplo de una lista ordenada:
<código><ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol> </code>
Las tablas ayudan a mostrar información en filas y columnas. Son útiles cuando se necesita comparar datos o listar elementos en una cuadrícula.
A continuación se muestra un ejemplo sencillo de una tabla HTML:
<code><table border="1">
<tr>
<th>Nombre</th>
Edad
</tr>
<tr>
<td>Alicia</td>
10
</tr>
</tabla> </código>
En esta tabla, <tr> define una fila de la tabla, <th> se utiliza para el encabezado de la tabla (texto en negrita) y <td> se utiliza para los datos de la tabla (las celdas).
HTML también te permite añadir multimedia como sonido y vídeo. Con la etiqueta <audio> , puedes incluir archivos de sonido. Con la etiqueta <video> , puedes incrustar reproductores de vídeo en tu página web.
A continuación se muestra un ejemplo de un código de inserción de vídeo:
<code><video width="320" height="240" controls>
<fuente src="película.mp4" tipo="video/mp4">
</video> </código>
Este código crea un reproductor de vídeo con botones para reproducir, pausar o ajustar el volumen. El atributo "controls" indica al navegador que muestre estos botones.
Todos los sitios web de internet están creados con HTML. Imagina que estás visitando el sitio web de tu escuela, un sitio de juegos divertidos o leyendo una historia en línea. El HTML funciona entre bastidores para organizar el texto, las imágenes y demás contenido para que puedas verlos con claridad.
Por ejemplo, cuando ves una imagen de tu personaje de dibujos animados favorito en línea o haces clic en un enlace para leer más sobre un tema divertido, el HTML está ahí para que eso funcione.
Veamos un proyecto sencillo. Imagina que quieres crear una pequeña página web sobre tu animal favorito, como un gato. Puedes incluir un título, un párrafo sobre gatos, una imagen e incluso un enlace a un sitio web con datos curiosos sobre gatos.
Su código HTML podría verse así:
<código><!DOCTYPE html>
<html>
<cabeza>
<title>Mi animal favorito</title>
</cabeza>
<cuerpo>
Todo sobre los gatos
Los gatos son juguetones y tiernos. Les encanta dormir y ronronear. A mucha gente le encanta tener gatos como mascotas.
<img src="cat.jpg" alt="Un lindo gato">
<a href="https://www.catfacts.com">Aprenda más sobre los gatos</a>
</cuerpo>
</html> </código>
Este proyecto utiliza encabezados, párrafos, imágenes y enlaces. Muestra cómo se usa HTML para crear una página web completa con múltiples componentes.
Si bien HTML construye la estructura de una página web, existen otras herramientas que hacen que los sitios web se vean y se comporten de manera divertida.
Aunque hoy estamos aprendiendo sobre HTML, conocer CSS y JavaScript nos ayuda a entender cómo se crean los sitios web.
A medida que explores HTML, encontrarás muchas otras etiquetas. Aquí tienes algunas más que debes conocer:
Estas etiquetas le brindan más control sobre cómo aparece su contenido en una página web.
HTML ha cambiado mucho desde su creación. Con el tiempo, se han añadido muchas etiquetas y funciones nuevas. Cada nueva versión de HTML facilita la creación de sitios web complejos y atractivos. Hoy en día, HTML se integra con CSS y JavaScript para crear sitios web modernos, fáciles de usar y con un diseño atractivo.
Esta evolución significa que HTML es fácil de aprender y lo suficientemente potente para crear todo, desde páginas web simples hasta aplicaciones web complejas.
Aunque aprender HTML es divertido, siempre es importante mantenerse seguro en internet. Cuando visites sitios web o explores contenido en línea, recuerda pedir ayuda a un adulto si tienes alguna duda. Tu seguridad es lo primero, y aprender HTML siempre debe ser una experiencia divertida y segura.
Veamos algunos términos importantes que has aprendido hoy:
El HTML se utiliza en muchos entornos reales. Aquí tienes algunos ejemplos:
Estos ejemplos muestran cómo HTML es una herramienta muy útil en muchas partes de la vida cotidiana.
Hoy aprendimos que HTML es la abreviatura de Lenguaje de Marcado de Hipertexto . Es el lenguaje básico para crear páginas web. Estos son los puntos clave para recordar:
HTML es la base de todos los sitios web que ves en internet. Con elementos básicos sencillos como etiquetas y atributos, puedes crear páginas divertidas e interactivas. A medida que aprendas, verás cómo HTML ayuda a dar vida a las páginas web, haciendo de internet un lugar útil y emocionante para explorar.
