Otros85 visualizaciones·Actualizado 11 ago 2026·76 páginas

Guía Completa de HTML

Camila Reducindo@camilareducindo

Añadir a fuentes de Google

El HTML es el lenguaje fundamental para crear páginas web....

1 / 76

of 76

¿Qué es HTML?

HTML (Hyper Text Markup Language) es el lenguaje base para crear páginas web. No te asustes por ser un "lenguaje informático" - realmente es solo una forma especial de dar formato a textos e imágenes para ser vistos en un navegador.

Para empezar a trabajar con HTML solo necesitas tres cosas básicas:

Saber escribir con un teclado
Saber manejar un ratón
Y lo más importante: ¡tener ganas de aprender!

¡Dato importante! Aunque existen editores complejos, es recomendable comenzar con el Bloc de Notas u otro editor de texto sencillo para entender bien la estructura del código.

Al terminar de aprender HTML serás capaz de crear tu propio sitio web con calidad profesional, conocerás las tecnologías usadas en la web y posiblemente descubrirás una afición que podría convertirse en tu futura profesión.

of 76

Fundamentos de HTML

Las páginas web que ves en tu navegador están escritas en HTML. Este lenguaje nos permite combinar textos, sonidos e imágenes y, lo más interesante, crear enlaces que conectan con otras páginas mediante hipervínculos.

HTML se creó originalmente con fines divulgativos, sin prever que la web se convertiría en el área multimedia que es hoy. Por eso, ha ido evolucionando a través de diferentes estándares (como HTML 4.01) para adaptarse a nuevos usos.

Esta evolución ha requerido la introducción de tecnologías complementarias como CSS y JavaScript para organizar, optimizar y automatizar el funcionamiento de las webs.

¡Ojo con esto! Uno de los grandes retos del HTML es que los diferentes navegadores (Chrome, Firefox, Edge, etc.) interpretan el mismo código de maneras ligeramente distintas. Por eso es importante probar tus páginas en varios navegadores.

Para crear páginas HTML solo necesitas un editor de texto simple como el Bloc de notas de Windows. Aunque existen editores específicos más avanzados, es mejor comenzar con algo sencillo para familiarizarte con el código.

of 76

La sintaxis de HTML

Los archivos HTML son simplemente texto plano con extensión .html o .htm. La estructura del lenguaje se basa en etiquetas que indican al navegador cómo mostrar el contenido.

Las etiquetas generalmente tienen dos partes:

Una apertura: <etiqueta>
Un cierre: </etiqueta>

Todo lo que escribas entre estas etiquetas se verá afectado por ellas. Por ejemplo:

<b>Esto está en negrita</b>

Aparecerá como: Esto está en negrita

O si usamos etiquetas de párrafo:

<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>

Consejo práctico: Es recomendable escribir todas las etiquetas en minúsculas aunque HTML no es sensible a mayúsculas/minúsculas. Esto te ayudará cuando trabajes con otras tecnologías como XML que sí distinguen entre mayúsculas y minúsculas.

Un documento HTML siempre debe estar delimitado por las etiquetas <html> y </html>, y dentro de estas podemos distinguir dos partes principales: el encabezado (<head>) y el cuerpo (<body>).

of 76

La estructura de un documento HTML

Un documento HTML completo tiene esta estructura básica:

<html>
  <head>
    Etiquetas y contenidos del encabezado
    <!-- Datos que no aparecen en nuestra página pero son importantes -->
  </head>
  <body>
    Etiquetas y contenidos del cuerpo
    <!-- Parte visible de la página: texto e imágenes -->
  </body>
</html>

En el <head> colocamos información que no se ve directamente en la página, como el título, palabras clave para buscadores, etc. En el <body> va todo el contenido visible de la página.

Tu primera página HTML

¡Vamos a crear tu primera página web! Abre tu editor de texto y copia este código:

<html>
<head>
  <title>Cocina Para Todos</title>
</head>
<body>
  <p><b>Bienvenido,</b></p>
  <p>Estás en la página <i>Comida para Todos</i></p>
  <p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>
</html>

Guarda el archivo con extensión .html (por ejemplo, "mi_pagina.html") y ábrelo con tu navegador. ¡Felicidades! Acabas de crear tu primera página web.

Consejo para nombrar archivos: Usa nombres descriptivos sin acentos, espacios ni caracteres especiales. Es mejor usar guiones (-) o guiones bajos $_$ para separar palabras, como "recetas_faciles.html".

of 76

Visualización en navegadores

Una vez creada tu página HTML, puedes verla abriendo el archivo con cualquier navegador. Simplemente haz doble clic sobre el archivo o usa la opción "Abrir archivo" del navegador.

Es importante tener en cuenta que no todos los navegadores muestran las páginas exactamente igual. Internet Explorer, Firefox, Chrome y otros pueden interpretar algunas partes del código de manera ligeramente diferente.

Por eso, una buena práctica es revisar cómo se ve tu página en diferentes navegadores para asegurarte de que todos los usuarios tengan una experiencia similar, independientemente del navegador que usen.

Cuando abras tu primera página, notarás dos elementos clave:

El texto que colocaste dentro de la etiqueta <title> aparece en la parte superior del navegador (en la pestaña o barra de título)
Todo lo que pusiste dentro del <body> se muestra en el área principal del navegador

Truco profesional: Si quieres ver cómo está hecho un sitio web que te gusta, haz clic derecho en cualquier parte de la página y selecciona "Ver código fuente". Podrás ver todo el HTML que hay detrás y aprender técnicas que otros desarrolladores utilizan.

of 76

Formato de texto básico

HTML nos permite darle estilo a nuestro texto con varias etiquetas sencillas. Vamos a ver las más comunes:

Párrafos

Los párrafos se definen con la etiqueta <p>. Cada párrafo se muestra separado por un espacio en blanco:

<p>Este es el primer párrafo.</p>
<p>Este es otro párrafo separado del anterior.</p>

Saltos de línea

Si solo quieres cambiar de línea sin dejar espacio, usa <br>:

Línea 1<br>
Línea 2 (justo debajo)

Alineación de párrafos

Puedes alinear párrafos usando el atributo align:

<p align="left">Texto alineado a la izquierda</p>
<p align="center">Texto alineado al centro</p>
<p align="right">Texto alineado a la derecha</p>

¡Atención! Aunque este método todavía funciona, actualmente se recomienda usar CSS para dar formato. Lo verás más adelante en tu aprendizaje.

También puedes alinear varios párrafos a la vez usando <div>:

<div align="center">
  <p>Todos estos párrafos</p>
  <p>estarán alineados</p>
  <p>al centro</p>
</div>

of 76

Encabezados y texto formateado

Encabezados

HTML ofrece etiquetas especiales para títulos y subtítulos llamados encabezados. Van desde <h1> (el más grande) hasta <h6> (el más pequeño):

<h1>Encabezado principal (muy grande)</h1>
<h2>Subtítulo importante</h2>
<h3>Subtítulo menor</h3>

Los encabezados automáticamente aparecen en negrita y con un tamaño de letra proporcional a su nivel. También puedes alinearlos:

<h2 align="center">Título centrado</h2>

Formateando el texto

Para dar estilo a tu texto, puedes usar varias etiquetas:

Para negrita:

<b>Texto en negrita</b>

Para cursiva:

<i>Texto en cursiva</i>

Para subrayado:

<u>Texto subrayado</u>

¡Cuidado! Evita subrayar texto normal porque los usuarios pueden confundirlo con enlaces.

También puedes combinar formatos anidando etiquetas:

<b>Texto en negrita <i>y también en cursiva</i></b>

Subíndices y superíndices

Útiles para fórmulas matemáticas o científicas:

H<sub>2</sub>O (subíndice)
10<sup>2</sup> = 100 (superíndice)

of 76

Color y tamaño de texto

Aunque actualmente se recomienda usar CSS, puedes cambiar el aspecto del texto con la etiqueta <font> y sus atributos:

Cambiando el tipo de letra

<font face="Comic Sans MS, Arial, Verdana">Este texto tiene otra tipografía</font>

Es buena práctica listar varias fuentes separadas por comas por si el usuario no tiene la primera instalada.

Cambiando el tamaño

Puedes definir el tamaño de 1 (más pequeño) a 7 (más grande):

<font size="4">Este texto es más grande</font>

O cambiar el tamaño relativamente:

<font size="+1">Un nivel más grande</font>
<font size="-1">Un nivel más pequeño</font>

Cambiando el color

<font color="red">Este texto está en rojo</font>

También puedes usar códigos hexadecimales para colores específicos:

<font color="#FF0000">Texto en rojo</font>

Atributos para toda la página

Puedes definir el color de fondo, texto y enlaces para toda la página usando atributos en la etiqueta <body>:

<body bgcolor="#000000" text="#FFFFFF" link="#FFFF00">
  <!-- Fondo negro, texto blanco, enlaces amarillos -->
</body>

Consejo: Asegúrate siempre de que haya suficiente contraste entre el color del texto y el fondo para que la página sea legible.

of 76

Listas en HTML

Las listas son perfectas para presentar información de manera organizada. HTML ofrece tres tipos:

Listas desordenadas (con viñetas)

Se crean con las etiquetas <ul> (unordered list) y cada elemento se marca con <li>:

<ul>
  <li>Argentina</li>
  <li>Perú</li>
  <li>Chile</li>
</ul>

Esto muestra:

Argentina
Perú
Chile

Puedes cambiar el tipo de viñeta con el atributo type:

<ul type="square">
  <li>Elemento con cuadrado</li>
  <li type="circle">Elemento con círculo</li>
</ul>

Listas ordenadas (numeradas)

Usa <ol> (ordered list) y <li> para cada elemento:

<ol>
  <li>El jefe siempre tiene la razón</li>
  <li>En caso de duda, aplicar regla 1</li>
</ol>

Esto muestra:

El jefe siempre tiene la razón
En caso de duda, aplicar regla 1

Puedes cambiar el tipo de numeración con type:

<ol type="a">       <!-- letras: a, b, c... -->
<ol type="A">       <!-- letras mayúsculas: A, B, C... -->
<ol type="i">       <!-- números romanos: i, ii, iii... -->
<ol type="I">       <!-- números romanos mayúsculas: I, II, III... -->

¡Inténtalo tú mismo! Combina diferentes tipos de listas, incluso anidándolas unas dentro de otras, para crear estructuras más complejas.

of 76

Listas de definición y anidadas

Listas de definición

Sirven para presentar términos junto con sus definiciones, usando <dl> para la lista, <dt> para el término y <dd> para la definición:

<dl>
  <dt>Brújula</dt>
  <dd>Señora montada en una escobula</dd>
  <dt>Oreja</dt>
  <dd>Sesenta minutejos</dd>
</dl>

Se verá así:

Brújula Señora montada en una escobula Oreja Sesenta minutejos

Las definiciones aparecen automáticamente con sangría, lo que puede ser útil para crear textos con diferentes niveles de indentación.

Anidando listas

Puedes combinar diferentes tipos de listas para crear estructuras más complejas:

<ul>
  <li>Argentina
    <ol>
      <li>Buenos Aires</li>
      <li>Bariloche</li>
    </ol>
  </li>
  <li>Uruguay
    <ol>
      <li>Montevideo</li>
      <li>Punta del Este</li>
    </ol>
  </li>
</ul>

Esto mostrará:

Argentina
1. Buenos Aires
2. Bariloche
Uruguay
1. Montevideo
2. Punta del Este

Tip para estudiar: Las listas anidadas son muy útiles para crear esquemas o índices de estudio, te ayudarán a organizar tus apuntes de cualquier materia de forma clara.

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

of 76

Pensamos que nunca lo preguntarías...

Nuestro compañero de IA está específicamente adaptado a las necesidades de los estudiantes. Basándonos en los millones de contenidos que tenemos en la plataforma, podemos dar a los estudiantes respuestas realmente significativas y relevantes. Pero no se trata solo de respuestas, el compañero también guía a los estudiantes a través de sus retos de aprendizaje diarios, con planes de aprendizaje personalizados, cuestionarios o contenidos en el chat y una personalización del 100% basada en las habilidades y el desarrollo de los estudiantes.

Puedes descargar la app en Google Play Store y Apple App Store.

¡Sí lo es! Tienes acceso totalmente gratuito a todo el contenido de la app, puedes chatear con otros alumnos y recibir ayuda inmeditamente. Puedes ganar dinero utilizando la aplicación, que te permitirá acceder a determinadas funciones.

¿Qué es HTML?

Fundamentos de HTML

La sintaxis de HTML

La estructura de un documento HTML

Tu primera página HTML

Visualización en navegadores

Formato de texto básico

Párrafos

Saltos de línea

Alineación de párrafos

Encabezados y texto formateado

Encabezados

Formateando el texto

Subíndices y superíndices

Color y tamaño de texto

Cambiando el tipo de letra

Cambiando el tamaño

Cambiando el color

Atributos para toda la página

Listas en HTML

Listas desordenadas (con viñetas)

Listas ordenadas (numeradas)

Listas de definición y anidadas

Listas de definición

Anidando listas

Pensamos que nunca lo preguntarías...

¿Qué es Knowunity AI companion?

¿Dónde puedo descargar la app Knowunity?

¿Knowunity es totalmente gratuito?

Contenido similar

Miosina y actina

Anatomía del corazón

La célula: generalidades

Cáncer de mama

Escalas de notas

Lumbalgia mecánica

Contenidos más populares: Sections

Anatomía del corazón

Contenidos más populares de Otros

Español

Historia de México

Sistema Circulatorio

Corazón

Apuntes bonitos

Técnicas de estudio

Ecuaciones cuadraticas

Sinónimos, antónimos, paronimos y homónimos

Binomios al cuadrado

Contenidos más populares

Quimica ECOEMS(Comipems)

INGLES

Historia ECOEMS (Comipems)

Aritmética básica

Lo principal de la química

La química

Examen ecoems unam

Teorema de tales

Mapa metabólico

Mira lo que dicen nuestros usuarios. Les encantó — y a ti también te encantará.

Inscríbete para ver los apuntes. ¡Es gratis!

¿Qué es HTML?

Inscríbete para ver los apuntes. ¡Es gratis!

Fundamentos de HTML

Inscríbete para ver los apuntes. ¡Es gratis!

La sintaxis de HTML

Inscríbete para ver los apuntes. ¡Es gratis!

La estructura de un documento HTML

Tu primera página HTML

Inscríbete para ver los apuntes. ¡Es gratis!

Visualización en navegadores

Inscríbete para ver los apuntes. ¡Es gratis!

Formato de texto básico

Párrafos

Saltos de línea

Alineación de párrafos

Inscríbete para ver los apuntes. ¡Es gratis!

Encabezados y texto formateado

Encabezados

Formateando el texto

Subíndices y superíndices