Scribd Logo
Carica

Benvenuto in Scribd!

  • Listas en HTML

    Caricato da

    GerenciaVirtual
    138 visualizzazioni7 pagine
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    138 visualizzazioni7 pagine

    Listas en HTML

    Caricato da

    GerenciaVirtual
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    GERENCIA VIRTUAL

    “Capacitación y asesoría a solo un click”

    Listas en HTML
    HTML nos permite crear listas en las páginas Web, pudiendo ser listas simples no ordenadas
    mediante la etiqueta <ul> o listas ordenada utilizando la etiqueta <ol>.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2>Lista no Ordenada</h2>
    <ul>
    <li>Textos</li>
    <li>Tablas</li>
    <li>Listas</li>
    </ul>

    <h2>Lista Ordenada</h2>
    <ol>
    <li>Textos</li>
    <li>Tablas</li>
    <li>Listas</li>
    </ol>
    </body>
    </html>
    Código 68.html

    Listas no ordenadas en HTML


    Las listas no ordenadas se denotan con la etiqueta <ul>. Los ítems de dicha lista se definen con la
    etiqueta <li>.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2>Lista no Ordenada</h2>
    <ul>
    <li>Magallanes</li>
    <li>Leones</li>
    <li>Cardenales</li>
    </ul>
    </body>
    </html>

    Código 69.html
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Estilo de viñetas en listas no ordenadas


    Las listas no ordenadas por defecto tendrán una viñeta en forma de punto grande de color negro,
    pero podemos cambiar la forma de la viñeta utilizando la propiedad list-style-type.

    Valor Descripción
    disc Es la viñeta por defecto, un punto grande negro.
    circle Coloca una viñeta en forma de circulo.
    square Coloca una viñeta en forma de cuadrado
    none No coloca viñeta

    El color de Estas viñetas también puede ser configurado.

    <ul style="list-style-type:disc">
    <li>Café</li>
    <li>Té</li>
    </ul>
    <ul style="list-style-type:circle">
    <li>Café</li>
    <li>Té</li>
    </ul>
    <ul style="list-style-type:square">
    <li>Café</li>
    <li>Té</li>
    </ul>
    <ul style="list-style-type:disc">
    <li>Café</li>
    <li>Té</li>
    </ul>
    Segmento de código donde se indica estilo de viñetas

    Vista de una lista con el código de estilo anterior.


    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Listas ordenadas en HTML


    Las listas ordenadas se denotan con la etiqueta <ol>. Los ítems de dicha lista se definen con la
    etiqueta <li>.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2>Lista Ordenada</h2>
    <ol>
    <li>Magallanes</li>
    <li>Leones</li>
    <li>Cardenales</li>
    </ol>
    </body>
    </html>

    Código 70.html

    Estilo de numeración en listas ordenadas


    Las listas ordenadas por defecto tendrán una viñeta numérica, pero podemos cambiar la forma de
    la viñeta utilizando el atributo type en la etiqueta <ol>.

    Valor Descripción
    type=”1” Los ítems de la lista se ordenan con números (por defecto).
    type=”A” Los ítems de la lista se ordenan con letras mayúsculas.
    type=”a” Los ítems de la lista se ordenan con letras minúsculas.
    type=”I” Los ítems de la lista se ordenan con números romanos en mayúscula.
    type=”i” Los ítems de la lista se ordenan con números romanos en minúscula.
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    <ol type="1">
    <li>Café</li>
    <li>Té</li>
    </ol>
    <ol type="A">
    <li>Café</li>
    <li>Té</li>
    </ol>
    <ol type="a">
    <li>Café</li>
    <li>Té</li>
    </ol>
    <ol type="I">
    <li>Café</li>
    <li>Té</li>
    </ol>
    <ol type="i">
    <li>Café</li>
    <li>Té</li>
    </ol>

    Segmento de código donde se indica estilo de numeración

    Vista de una lista con el código de estilo anterior.


    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Listas con descripción en HTML


    HTML también puede generar listas con descripción, donde la lista con descripción es una lista de
    términos con una descripción para cada término. La etiqueta <dl> define la lista con descripción,
    la etiqueta <dt> define el término y la etiqueta <dd> describe cada término.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2>Lista con Descripción</h2>
    <dl>
    <dt>Magallanes</dt>
    <dd>equipo Nacional</dd>
    <dt>Cardenales</dt>
    <dd>Equipo de Lara</dd>
    </dl>
    </body>
    </html>

    Código 71.htm

    Listas anidadas en HTML


    HTML permite crear listas anidadas (una lista dentro de otra lista).

    <ul>
    <li>Café</li>
    <li>Té</li>
    <ul>
    <li>Té Negro</li>
    <li>Té Verde</li>
    </ul>
    <li>Leche</li>
    </ul>

    Segmento de código donde se crea una lista anidada.


    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Vista de una lista con el código anterior.

    El navegador automáticamente detecta la tabla anidada en el código HTML y asigna la sangría y la


    viñeta correspondiente, bien sea a un ítem principal o secundario. La lista de ítems puede
    contener nuevas listas u otros elementos HTML, tales como imágenes enlaces, etc.

    Control de numeración de listas ordenadas en HTML


    Por defecto la numeración de las listas ordenadas comienza con el número 1, si nosotros
    quisiéramos comenzar esta numeración desde un número distinto podemos establecerlo
    mediante el uso del atributo <start>.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2>Lista Ordenada con numeración a partir de 100</h2>
    <ol start="100">
    <li>Café</li>
    <li>Azúcar</li>
    <li>Leche</li>
    </ol>
    </body>
    </html>

    Código 72.htm
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Listas horizontales con CSS


    La apariencia de las listas pueden ser modificadas de diferentes maneras y por diferentes vías por
    medio de CSS, una de las maneras más populares de configurar las listas es crear listas
    horizontales para desplegarlas como menú de navegación.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    ul {
    List-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #cccccc;
    }
    li {
    float: left;
    background-color: #555555;
    margin: 1px;
    }
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    }
    li a:hover {
    background-color: #111111;
    }
    </style>
    </head>
    <body>
    <h2>Menú Principal</h2>
    <ul>
    <li><a href="inicio.html">Inicio</a></li>
    <li><a href="nosotros.html">Nosotros</a></li>
    <li><a href="noticias.html">Noticias</a></li>
    <li><a href="contacto.html">Contacto</a></li>
    </ul>
    </body>
    </html>

    Código 73.htm

    Cuando realicen la prueba del código, coloquen el puntero sobre algún ítem del menú para que
    puedan observar los efectos del estilo establecido. Para la visualización de este código
    posicionamos el puntero sobre el ítem “Nosotros”, podemos ver el cambio de color del mismo.

    Potrebbero piacerti anche