Cómo hacer viñetas en HTML

Escrito por sara williams | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer viñetas en HTML
Create bullet points in HTML using and tags. (Burke/Triolo Productions/Brand X Pictures/Getty Images)

Hacer viñetas ayuda a descomprimir grandes cantidades de texto y a resumir información valiosa. Éstas son fáciles de crear en procesadores de texto, pero cuando escribes un documento en HTML necesitarás saber el código para poder efectuarlas; no se requiere un código largo para hacerlo. Coloca cada lista en etiquetas y luego envuélvela enteramente o presenta etiquetas que no estén ordenadas en una lista. Puedes hacer todo lo que quieras si usas el código Cascading Style Sheet.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Escribe el texto para tus viñetas. Comienza cada punto en su propia línea en las etiquetas <li> y </li>, como por ejemplo: <li>Esto es una prueba</li> <li>Esto es una prueba</li>

  2. 2

    Crea una línea en blanco por encima de la lista de viñetas y luego escribe la etiqueta <ul> en esa línea. Ve al final de la lista de viñetas y crea otra línea en blanco también allí. En esta última, escribe una etiqueta de cierre </ul>. Si quieres darle un estilo con CSS más tarde, agrega una clase o un atributo ID a la apertura de la etiqueta <ul&gt. Aquí hay un ejemplo de una lista de viñetas cortas con un atributo ID: <ul id="milista"> <li>viñeta uno</li> <li>viñeta dos</li> </ul>

  3. 3

    Usa "style" (estilo) para crear una lista de viñetas con código CSS. Agrega un código CSS entre las etiquetas <style> y </style>, entre las etiquetas <head> y</head> o puedes escribir un código de este tipo en un archivo .CSS externo e incorporarlo al archivo usando una etiqueta <link> como ésta: <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />. Cambia "path/to/stylesheet.css" con una ruta al archivo .CSS que hayas creado. Usa el ID o el atributo de clase para seleccionar tus listas de viñetas, tal como se ve a continuación: #mylist li { font-style: italic; }. Este código selecciona todas las etiquetas <li> dentro de una etiqueta con un ID de "mylist". Reemplaza el numeral con un punto cuando hagas una selección a través del atributo de clase.

  4. 4

    Usa la propiedad "list-style" (estilo de lista) en CSS para cambiar el tipo de viñetas. Se encuentran disponibles aquéllas con círculos, con discos rellenos y también cuadrados; éstas sirven para las listas sin numeración y sin alfabeto. Aquí hay un ejemplo de viñetas cuadradas: #mylist li {list-style: square;}

Consejos y advertencias

  • Usa la etiqueta en lugar de para crear listas ordenadas. Luego puedes ajustar el tipo de "list-style" para variar los tipos de números o de letras.
  • Crea viñetas de imágenes al especificar "none" (ninguno) en el atributo "list-style" y luego brinda a cada etiqueta una imagen de fondo que no se repita y que esté alineada a la derecha. Agrega relleno del lado izquierdo de cada etiqueta para mover el texto allí; de otra forma, ése se superpondrá a la imagen.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles