Descubre el Lenguaje HTML: Estructura, Etiquetas y Atributos

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el 12 de Enero de 2025 en español con un tamaño de 6,95 KB

¿Qué es HTML?

HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje estándar para la creación de páginas web. Este estándar sirve como referencia para el software que se conecta con la elaboración de páginas web en sus diferentes versiones. Define una estructura básica y un código (código HTML) para la definición del contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

Es un estándar a cargo del World Wide Web Consortium (W3C), organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante, siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

Elementos y estructura básica de HTML

Los elementos son la estructura básica de HTML. Tienen dos propiedades fundamentales: atributos y contenido. La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre del elemento.

Cada página HTML comienza con la etiqueta <HTML>. Luego, se define la cabecera, delimitada por <HEAD> y </HEAD>. A continuación, el comando <BODY> indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación y finalizarán con </BODY>. La página acabará con </HTML>.

Cabecera y cuerpo

La cabecera, delimitada por <HEAD> y </HEAD>, contiene componentes opcionales. El cuerpo es la parte delimitada por <BODY> y </BODY>.

Etiquetas y atributos HTML más comunes

A continuación, se presentan algunas de las etiquetas y atributos HTML más utilizados:

<!DOCTYPE html>: Define el tipo de documento.
<h1> a <h6>: Encabezados de diferentes niveles.
<p>: Párrafo.
<a href="URL">: Enlace (link). Ejemplo: Esto es un link
<img src="URL" alt="Texto alternativo">: Imagen. Ejemplo:
Atributo href: Especifica la URL del enlace. Ejemplo: This is a link
Atributo src: Especifica la ruta de la imagen. Ejemplo:
Atributos width y height: Especifican el ancho y la altura de la imagen. Ejemplo:
Atributo alt: Proporciona texto alternativo para la imagen. Ejemplo:
Atributo style: Permite aplicar estilos CSS en línea. Ejemplo:
I am a paragraph
Atributo lang: Define el idioma del documento. Ejemplo: <html lang="en-US">
Atributo title: Proporciona información adicional sobre el elemento. Ejemplo:
Pasa el ratón por encima
<h1 style="font-size:60px;">: Encabezado grande.
<hr>: Línea horizontal.
<br>: Salto de línea.
<pre>: Texto preformateado.
<body style="background-color:powderblue;">: Color de fondo.
<h1 style="color:blue;">: Texto de color.
<p style="color:red;">: Texto de color en párrafo.
<h1 style="font-family:verdana;">: Fuente del texto.
<p style="font-family:courier;">: Fuente del texto en párrafo.
<h1 style="font-size:300%;">: Tamaño del texto.
<p style="font-size:160%;">: Tamaño del texto en párrafo.
<h1 style="text-align:center;">: Alineación del texto.
<p style="text-align:center;">: Alineación del texto en párrafo.
<b>, <strong>: Negrita.
<em>, <i>: Cursiva.
<small>: Texto pequeño.
<mark>: Texto marcado.
<del>: Texto tachado.
<ins>: Texto subrayado.
<sub>: Subíndice.
<sup>: Superíndice.
<q>: Citas cortas.
<abbr title="World Health Organization">: Abreviaturas.
<address>: Información de contacto del autor (generalmente en cursiva).
<cite>: Título de una obra (generalmente en cursiva).
: Comentarios en el código HTML.

Tipos de enlaces (links)

Enlace externo: <a href="URL">link text</a>
Enlace local: <a href="html_images.asp">HTML Images</a>
Enlace con apertura en nueva pestaña: <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Enlace con imagen: <a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"></a>
Enlace en título: <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Enlace a una sección específica: <a href="#C4">Jump to Chapter 4</a>
Enlace a una web externa: <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Imágenes

Insertar imagen: <img src="img_chania.jpg" alt="Flowers in Chania">
Definir ancho y altura de imagen: <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;"> o <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Entradas relacionadas:

Etiquetas: