huellitas

TEXTO

Tipos de encabezados

Los encabezados en HTML son elementos que se utilizan para definir títulos y subtítulos en una página web. Nos ayudan a estructurar el contenido de una página, haciéndolo más legible y organizado, por lo que nos permite interpretar la estructura del contenido.


HTML nos ofrece 6 niveles de encabezados:


Encabezado 1

Es el encabezado más importante y generalmente se usa para el título principal de la página o el documento.

<h1>Este es un encabezado de nivel 1</h1>

Este es un encabezado de nivel 1


Encabezado 2

Se usa para los sub-títulos principales dentro de una sección o subsección del contenido.

<h2>Este es un encabezado de nivel 2</h2>

Este es un encabezado de nivel 2


Encabezado 3

Se utiliza para subsecciones más detalladas dentro de un encabezado de nivel 2.

<h3>Este es un encabezado de nivel 3</h3>

Este es un encabezado de nivel 3


Encabezado 4

Para aún más detalle dentro de una subsección de nivel 3.

<h4>Este es un encabezado de nivel 4</h4>

Este es un encabezado de nivel 4


Encabezado 5

Usado para secciones detalladas dentro de un encabezado de nivel 4.

<h5>Este es un encabezado de nivel 5</h5>

Este es un encabezado de nivel 5


Encabezado 6

Es el encabezado de menor importancia y se usa para el contenido más detallado.

<h6>Este es un encabezado de nivel 6</h6>

Este es un encabezado de nivel 6


Formato de texto

Los elementos de formato de texto se utilizan para cambiar la apariencia de un texto. Podemos resaltar una palabra o incluso poniendo una linea debajo de ella. Podemos encontrar los siguientes:

<b> Texto en negrita

<strong> Texto en negrita con énfasis

<i> Texto en cursiva

<em> Texto en cursiva con énfasis

<u> Texto subrayado

<del> Texto eliminado

<sup> Texto superíndice

<sub> Texto subíndice

<mark> Texto resaltado

<s> Texto tachado

<small> Texto pequeño

<big> Texto grande


Listas

Listas ordenadas

Las listas ordenadas en HTML se representan mediante la etiqueta <ol> y cada elemento que forma parte de la lista, estará entre la etiqueta <li>.

Tenemos el siguiente ejemplo:

HTML

<p>Proceso para realizar café</p>

    <ol>
  1. <li>Servir agua caliente a la taza</li>
  2. <li>Agregar café al gusto</li>
  3. <li>Agregar azúcar al gusto</li>
  4. <li>Disfrutar</li>
    5. </ol>

Resultado

    Proceso para realizar café
  1. Servir agua caliente a la taza
  2. Agregar café al gusto
  3. Agregar azúcar al gusto
  4. Disfrutar

Atributo start

Este atributo nos ayuda a comenzar la lista desde un numero especifico. Veamos el siguiente ejemplo:

HTML

<p>Proceso para realizar café</p>

    <ol start="5">
  1. <li>Servir agua caliente a la taza</li>
  2. <li>Agregar café al gusto</li>
  3. <li>Agregar azúcar al gusto</li>
  4. <li>Disfrutar</li>
    5. </ol>

Resultado

    Proceso para realizar café
  1. Servir agua caliente a la taza
  2. Agregar café al gusto
  3. Agregar azúcar al gusto
  4. Disfrutar

Atributo type

¿Sera posible ordenar la lista de diferente manera? ¡Claro! Puedes hacerlo usando letras minúsculas o mayúsculas, inclusive usando la notacion en numero romano.

Entre los tipos de listas que podemos representar tenemos:

Este es un ejemplo de como se veria si aplicaramos el atributo "I"

HTML

<p>Proceso para realizar café</p>

    <ol type="I">
  1. <li>Servir agua caliente a la taza</li>
  2. <li>Agregar café al gusto</li>
  3. <li>Agregar azúcar al gusto</li>
  4. <li>Disfrutar</li>
    5. </ol>

Resultado

    Proceso para realizar café
  1. Servir agua caliente a la taza
  2. Agregar café al gusto
  3. Agregar azúcar al gusto
  4. Disfrutar

Listas desordenadas

Como su nombre lo indica, son listas que no tiene algun tipo de orden. Un ejemplo de este tipo de lista, seria el siguiente:

HTML

<p>Lista de compras</p>

    <ul>
  1. <li>1kg de papa</li>
  2. <li>1 litro de leche</li>
  3. <li>Sal</li>
  4. <li>1kg de plátano</li>
    5. </ul>

Resultado

    Proceso para realizar café
  • 1kg de papa
  • 1 litro de leche
  • Sal
  • 1kg de plátano


Curso creado con para alumnos de UPIICSA