Muy buenas a todos! Hoy os traigo una guía básica de HTML para aquellos que estáis dando vuestros primeros pasos en este apasionante mundo del desarrollo web. ¡No os preocupéis! Explicaré todo de manera sencilla y detallada para que todos podáis comprenderlo sin problemas.
<!DOCTYPE html>: Esta declaración indica al navegador que estamos usando la versión HTML5.
<html>: Define el inicio y el fin del documento HTML.
<head>: Contiene información adicional sobre el documento, como el título de la página.
<title>: Define el título de la página, que aparece en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página, como texto, imágenes y enlaces.
<h1> a <h6>: Representan encabezados de diferente tamaño, siendo <h1> el más grande y <h6> el más pequeño.
<p>: Define un párrafo de texto.
<a>: Crea un enlace a otra página o recurso, utilizando el atributo href.
<img>: Inserta una imagen en la página, utilizando el atributo src para indicar la URL de la imagen.
<ul> y <ol>: Crean listas desordenadas (con viñetas) y ordenadas (numeradas), respectivamente. Dentro de estas listas, utilizamos <li> para definir cada elemento de la lista.
<strong>: Aplica un formato en negrita al texto contenido entre las etiquetas.
<em>: Aplica un formato en cursiva al texto contenido entre las etiquetas.
<span>: Se utiliza para aplicar estilo a una parte específica del texto sin cambiar la estructura del documento.
<div>: Define una sección o contenedor genérico en el documento HTML. Normalmente se utiliza junto con CSS para aplicar estilos y estructurar el contenido.
<table>: Crea una tabla para organizar y mostrar datos en filas y columnas. Dentro de una tabla, utilizamos <tr> para definir filas, <th> para encabezados de columna y <td> para las celdas de datos.
<form>: Define un formulario que permite a los usuarios enviar información, como datos de contacto o de inicio de sesión. Dentro de un formulario, utilizamos elementos como <input>, <textarea> y <button> para crear campos y botones interactivos.
<iframe>: Permite incrustar otro documento HTML, como un vídeo de YouTube o un mapa de Google Maps, dentro de la página actual.
<br>: Inserta un salto de línea en el texto.
<hr>: Dibuja una línea horizontal en la página, útil para separar secciones visualmente.
<nav>: Define una sección de navegación en la página, como un menú o un índice.
<header>: Define la cabecera de un documento o sección, que normalmente contiene un logotipo, el título del sitio y una barra de navegación.
<footer>: Define el pie de página de un documento o sección, que suele contener información de contacto, derechos de autor y enlaces a otras páginas del sitio.
<article>: Representa un contenido independiente y autónomo, como una entrada de blog o una noticia.
<section>: Define una sección temática dentro de un documento, agrupando contenido relacionado.
<aside>: Representa un contenido secundario o complementario al contenido principal, como una barra lateral con enlaces relacionados o una publicidad.
<figure> y <figcaption>: Se utilizan para insertar una imagen o ilustración con una leyenda opcional en la página.
<address>: Utilizado para representar información de contacto, como dirección, teléfono y correo electrónico.
<abbr>: Indica una abreviatura o acrónimo y puede incluir el atributo title para proporcionar la versión completa del término abreviado.
<blockquote>: Define una cita o texto citado de otra fuente, normalmente se muestra con sangría para indicar que el contenido proviene de otro lugar.
<cite>: Representa el título de una obra, como un libro, artículo o película.
<code>: Muestra un fragmento de código de programación con un estilo de fuente monoespaciado.
<del> y <ins>: Indican texto que ha sido eliminado (<del>) o añadido (<ins>) en una nueva versión del documento.
<dfn>: Representa la definición de un término específico.
<kbd>: Representa una entrada de teclado, como una combinación de teclas o una secuencia de comandos.
<mark>: Resalta o marca un texto relevante en un contexto específico, como términos de búsqueda encontrados en un resultado de búsqueda.
<meter>: Representa una medida dentro de un rango conocido, como un medidor de batería o una barra de progreso.
<pre>: Muestra texto preformateado, respetando espacios y saltos de línea, útil para mostrar código fuente o texto ASCII.
<progress>: Representa el progreso de una tarea, como la carga de un archivo o la realización de un cuestionario.
<q>: Define una cita corta en línea, que automáticamente añade comillas alrededor del texto.
<ruby>, <rt> y <rp>: Permiten añadir anotaciones de pronunciación (como furigana en japonés) sobre caracteres, para facilitar la lectura en idiomas que lo requieran.
<samp>: Representa texto de salida de un programa o script, como un mensaje de error o un resultado de comando.
<small>: Muestra el texto con un tamaño de fuente más pequeño, a menudo utilizado para notas al pie o información secundaria.
<sub> y <sup>: Permiten crear texto en subíndice (<sub>) o superíndice (<sup>), como en fórmulas matemáticas o químicas.
<time>: Representa una hora o fecha, y puede incluir el atributo datetime para una representación más precisa y legible por máquinas.
<wbr>: Indica un punto de ruptura de palabra opcional, que permite al navegador dividir una palabra muy larga en varias líneas si es necesario.
Estos son algunos elementos de HTML que podéis encontrar útiles al crear vuestras páginas web. A medida que ganéis experiencia en el desarrollo web, aprenderéis cuándo y cómo utilizar.
Los atributos son propiedades que proporcionan información adicional o modifican el comportamiento de un elemento HTML. A continuación, se muestran algunos atributos comunes que se utilizan en diferentes elementos:
id: Asigna un identificador único a un elemento, lo que facilita seleccionarlo y aplicarle estilos mediante CSS o manipularlo con JavaScript.
class: Asigna una o varias clases a un elemento, lo que permite aplicar estilos CSS a varios elementos que comparten la misma clase.
src: Indica la URL de un recurso externo, como una imagen o un archivo multimedia.
href: Define la URL a la que apunta un enlace.
alt: Proporciona un texto alternativo para una imagen, que se mostrará si la imagen no se puede cargar y que también es útil para la accesibilidad.
title: Proporciona información adicional sobre un elemento, que generalmente se muestra como una descripción emergente cuando el usuario pasa el cursor sobre el elemento.
style: Permite aplicar estilos CSS en línea directamente en un elemento HTML.
Aquí tienes un ejemplo que utiliza varios de los atributos mencionados:
En este ejemplo:
Espero que os haya resultado útil esta guía básica de HTML. Si tenéis alguna duda o no habéis entendido algo, no dudéis en dejar un comentario en este post, estaré encantado de ayudaros. Y si os ha gustado, no olvidéis darle al "like"
Un saludo!!
¿Qué es HTML?
HTML (Hypertext Markup Language) es el lenguaje utilizado para crear y estructurar el contenido de las páginas web. Es la base de todo sitio web y permite definir la estructura, los elementos y cómo se visualizan en el navegador.Estructura básica de un documento HTML
Todo documento HTML tiene una estructura básica que incluye una serie de etiquetas o elementos. Veamos un ejemplo sencillo:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
<html>: Define el inicio y el fin del documento HTML.
<head>: Contiene información adicional sobre el documento, como el título de la página.
<title>: Define el título de la página, que aparece en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página, como texto, imágenes y enlaces.
Elementos comunes en HTML
Ahora que conocéis la estructura básica de un documento HTML, veamos elementos que podréis utilizar para dar forma a vuestras páginas:<h1> a <h6>: Representan encabezados de diferente tamaño, siendo <h1> el más grande y <h6> el más pequeño.
<p>: Define un párrafo de texto.
<a>: Crea un enlace a otra página o recurso, utilizando el atributo href.
<img>: Inserta una imagen en la página, utilizando el atributo src para indicar la URL de la imagen.
<ul> y <ol>: Crean listas desordenadas (con viñetas) y ordenadas (numeradas), respectivamente. Dentro de estas listas, utilizamos <li> para definir cada elemento de la lista.
<strong>: Aplica un formato en negrita al texto contenido entre las etiquetas.
<em>: Aplica un formato en cursiva al texto contenido entre las etiquetas.
<span>: Se utiliza para aplicar estilo a una parte específica del texto sin cambiar la estructura del documento.
<div>: Define una sección o contenedor genérico en el documento HTML. Normalmente se utiliza junto con CSS para aplicar estilos y estructurar el contenido.
<table>: Crea una tabla para organizar y mostrar datos en filas y columnas. Dentro de una tabla, utilizamos <tr> para definir filas, <th> para encabezados de columna y <td> para las celdas de datos.
<form>: Define un formulario que permite a los usuarios enviar información, como datos de contacto o de inicio de sesión. Dentro de un formulario, utilizamos elementos como <input>, <textarea> y <button> para crear campos y botones interactivos.
<iframe>: Permite incrustar otro documento HTML, como un vídeo de YouTube o un mapa de Google Maps, dentro de la página actual.
<br>: Inserta un salto de línea en el texto.
<hr>: Dibuja una línea horizontal en la página, útil para separar secciones visualmente.
<nav>: Define una sección de navegación en la página, como un menú o un índice.
<header>: Define la cabecera de un documento o sección, que normalmente contiene un logotipo, el título del sitio y una barra de navegación.
<footer>: Define el pie de página de un documento o sección, que suele contener información de contacto, derechos de autor y enlaces a otras páginas del sitio.
<article>: Representa un contenido independiente y autónomo, como una entrada de blog o una noticia.
<section>: Define una sección temática dentro de un documento, agrupando contenido relacionado.
<aside>: Representa un contenido secundario o complementario al contenido principal, como una barra lateral con enlaces relacionados o una publicidad.
<figure> y <figcaption>: Se utilizan para insertar una imagen o ilustración con una leyenda opcional en la página.
<address>: Utilizado para representar información de contacto, como dirección, teléfono y correo electrónico.
<abbr>: Indica una abreviatura o acrónimo y puede incluir el atributo title para proporcionar la versión completa del término abreviado.
<blockquote>: Define una cita o texto citado de otra fuente, normalmente se muestra con sangría para indicar que el contenido proviene de otro lugar.
<cite>: Representa el título de una obra, como un libro, artículo o película.
<code>: Muestra un fragmento de código de programación con un estilo de fuente monoespaciado.
<del> y <ins>: Indican texto que ha sido eliminado (<del>) o añadido (<ins>) en una nueva versión del documento.
<dfn>: Representa la definición de un término específico.
<kbd>: Representa una entrada de teclado, como una combinación de teclas o una secuencia de comandos.
<mark>: Resalta o marca un texto relevante en un contexto específico, como términos de búsqueda encontrados en un resultado de búsqueda.
<meter>: Representa una medida dentro de un rango conocido, como un medidor de batería o una barra de progreso.
<pre>: Muestra texto preformateado, respetando espacios y saltos de línea, útil para mostrar código fuente o texto ASCII.
<progress>: Representa el progreso de una tarea, como la carga de un archivo o la realización de un cuestionario.
<q>: Define una cita corta en línea, que automáticamente añade comillas alrededor del texto.
<ruby>, <rt> y <rp>: Permiten añadir anotaciones de pronunciación (como furigana en japonés) sobre caracteres, para facilitar la lectura en idiomas que lo requieran.
<samp>: Representa texto de salida de un programa o script, como un mensaje de error o un resultado de comando.
<small>: Muestra el texto con un tamaño de fuente más pequeño, a menudo utilizado para notas al pie o información secundaria.
<sub> y <sup>: Permiten crear texto en subíndice (<sub>) o superíndice (<sup>), como en fórmulas matemáticas o químicas.
<time>: Representa una hora o fecha, y puede incluir el atributo datetime para una representación más precisa y legible por máquinas.
<wbr>: Indica un punto de ruptura de palabra opcional, que permite al navegador dividir una palabra muy larga en varias líneas si es necesario.
Estos son algunos elementos de HTML que podéis encontrar útiles al crear vuestras páginas web. A medida que ganéis experiencia en el desarrollo web, aprenderéis cuándo y cómo utilizar.
Atributos en elementos HTML
Los atributos son propiedades que proporcionan información adicional o modifican el comportamiento de un elemento HTML. A continuación, se muestran algunos atributos comunes que se utilizan en diferentes elementos:
id: Asigna un identificador único a un elemento, lo que facilita seleccionarlo y aplicarle estilos mediante CSS o manipularlo con JavaScript.
class: Asigna una o varias clases a un elemento, lo que permite aplicar estilos CSS a varios elementos que comparten la misma clase.
src: Indica la URL de un recurso externo, como una imagen o un archivo multimedia.
href: Define la URL a la que apunta un enlace.
alt: Proporciona un texto alternativo para una imagen, que se mostrará si la imagen no se puede cargar y que también es útil para la accesibilidad.
title: Proporciona información adicional sobre un elemento, que generalmente se muestra como una descripción emergente cuando el usuario pasa el cursor sobre el elemento.
style: Permite aplicar estilos CSS en línea directamente en un elemento HTML.
Aquí tienes un ejemplo que utiliza varios de los atributos mencionados:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
En este ejemplo:
- Se han utilizado los atributos href y title en los enlaces del menú de navegación.
- Se ha asignado un atributo id al elemento <h1> para identificarlo de manera única.
- Se ha aplicado una clase (.titulo-principal) al encabezado <h1> y otra clase (.texto-destacado) al primer párrafo.
- Se han utilizado los atributos src, alt y title en la imagen.
- Se ha aplicado un estilo CSS en línea al primer párrafo con el atributo style.
¡Pon en práctica lo aprendido!
Ahora que ya conocéis algunos elementos de HTML, os animo a que experimentéis y creéis vuestras propias páginas web. ¡Veréis cómo con práctica y dedicación, podréis crear sitios web increíbles!Espero que os haya resultado útil esta guía básica de HTML. Si tenéis alguna duda o no habéis entendido algo, no dudéis en dejar un comentario en este post, estaré encantado de ayudaros. Y si os ha gustado, no olvidéis darle al "like"
Un saludo!!
