HTML Introduction
HTML significa HyperText Markup Language. Es un lenguaje de marcado utilizado para crear páginas web y aplicaciones que pueden visualizarse en Internet. Desarrollado en la década de 1990, combina el Hipertexto (que define los enlaces entre páginas web) y el Marcado (que define la estructura del contenido).
Las etiquetas HTML se utilizan para definir elementos HTML. Un elemento HTML suele constar de una etiqueta de inicio y una de cierre, con el contenido insertado entre ellas. Las etiquetas HTML se utilizan para crear documentos HTML y representar su contenido en los navegadores web. Algunas de las etiquetas HTML básicas incluyen <html>, <head>, <title>, <body>, <h1> a <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img>, y muchas más.
Versiones de HTML
HTML fue desarrollado por primera vez por el físico británico Tim Berners-Lee en 1990. Desde entonces, han existido muchas versiones de HTML.
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
Conceptos básicos de HTML
Elementos, etiquetas y atributos son conceptos básicos en HTML.
El elemento HTML es la unidad estructural principal de una página web. Las etiquetas HTML se utilizan para definir elementos HTML, y los atributos proporcionan información adicional sobre estos elementos.
Etiquetas HTML
Las etiquetas HTML se utilizan para estructurar el contenido del sitio web (texto, hipervínculos, imágenes, medios, etc.). Las etiquetas no se muestran en los navegadores; solo “instruyen” a los navegadores sobre cómo mostrar el contenido de la página web.
Hay más de 100 etiquetas en HTML, y puedes encontrarlas en nuestro tutorial de HTML.
Las etiquetas HTML se escriben entre paréntesis angulares (por ejemplo <html>).
La mayoría de las etiquetas HTML vienen en pares, como las etiquetas <p> </p>. La primera etiqueta de un par se llama etiqueta de inicio (o de apertura), y la segunda es la etiqueta de fin (o de cierre). La información se escribe entre las etiquetas de apertura y cierre.
Sin embargo, existen etiquetas sin par o vacías, que solo tienen una etiqueta de apertura (por ejemplo, <img>).
Consideremos un ejemplo.
Si necesitas definir un párrafo (que es un elemento), debes usar la etiqueta <p>. El contenido del párrafo debes escribirlo entre las etiquetas de apertura (<p>) y de cierre (</p>).
Ejemplo
Este es un párrafo entre las etiquetas de apertura <p> y de cierre </p>.
Atributos HTML
Los atributos HTML se añaden a un elemento HTML para proporcionar información adicional sobre él. Por ejemplo, si defines una imagen con la etiqueta <img>, puedes usar los atributos src, height y width para proporcionar información sobre su origen, altura y anchura, respectivamente.
Estructura de un documento HTML
La declaración <!DOCTYPE html> especifica la versión de HTML utilizada en el documento. Todo documento HTML debe comenzar con esta declaración para que los navegadores puedan representar la página de acuerdo con los estándares HTML.
Existen varios tipos de <!DOCTYPE> definidos para cada versión de HTML.
Todo el contenido de la página web se escribe entre las etiquetas <html> </html>. El elemento <html> se utiliza para informar a los navegadores que se trata de un documento HTML.
El elemento <head> contiene metadatos (datos sobre el documento HTML), conjunto de caracteres, título del documento, estilos, etc. Estos datos no se muestran a los espectadores.
El <title> muestra el título del sitio web en la pestaña del navegador cuando se carga la página. El título se escribe entre las etiquetas <title> </title>.
El <body> contiene el contenido de la página web (texto, imágenes, videos, etc.). El contenido se escribe entre las etiquetas <body> y </body>.
Los elementos de encabezado contienen diferentes tipos de títulos. Hay seis niveles de encabezado - <h1>-<h6>, donde <h1> es la etiqueta más importante y <h6> la menos importante.
El elemento <p> contiene párrafos de texto. El contenido se escribe entre las etiquetas <p> y </p>.
Ejemplo
Introducción a HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Resultado
Para comenzar a escribir código HTML para tu sitio web, necesitarás un editor. Hablaremos sobre editores HTML en nuestro próximo capítulo.
Práctica
¿Qué es HTML y cuál es su uso según la página web proporcionada?