LOG IN
Usuario:

Contraseña:


Últimos temas
» [PHPBB3] Contenido por defecto en la respuesta rapida.
Mar Jul 17, 2018 7:30 pm por Ysamar

» [PHPBB3] Mejorar las Pestañas que aparecen en el perfil de un Usuario.
Dom Jul 01, 2018 12:12 am por Ysamar

» Navbar desplegable sencilla
Dom Jun 17, 2018 2:06 pm por Ysamar

» Modulo de Afiliados 40x40 [Todas las versiones]
Vie Jun 15, 2018 6:44 pm por Ysamar

» 2 Galeria Html Elegante
Miér Jun 13, 2018 8:57 pm por Ysamar

» [PHPBB3]Agregar amigos desde el perfil y dejar mensaje en su muro...
Miér Jun 13, 2018 8:02 pm por Ysamar

» Botón "ir al muro" (mensajes de los visitantes)
Miér Jun 13, 2018 7:49 pm por Ysamar

» ¿No quieres publicidad
Miér Jun 13, 2018 7:37 pm por Ysamar

» Efecto Lightbox automatico en imagenes [Foroactivo]
Miér Jun 13, 2018 7:27 pm por Ysamar

Estadísticas
Tenemos 2352 miembros registrados.
El último usuario registrado es Jhunky

Nuestros miembros han publicado un total de 41230 mensajes en 3360 argumentos.
Afiliados





No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]


1 Clase 4 - Tipos de Listas el Vie Ene 20, 2012 9:14 pm

Curso WEBD: HTML – Clase 4


Bienvenidos a esta cuarta clase de HTML. En este Tutorial veremos las Listas, su función y los tipos de listas existentes.

La función de las Listas en HTML está muy clara, enumerar. Sin embargo, se le fueron dando diversas funciones, por ejemplo, las listas son muy útiles para crear barras de navegación.
Hay distintos tipos de listas:

Listas Ordenadas: Utilizamos la etiqueta
    (ol = lista ordenada en inglés) y dentro de ella colocamos
  1. (esta etiqueta no es necesario cerrarla, aunque podemos hacerlo y no nos altera en nada el resultado)

    Ejemplo:
    Código:
    Lista de usuarios
    <ol>
    <li> Bazinga
    <li> Austin
    <li> Javiuchiha
    </ol>
    Resultado:

    Como pueden ver,
  2. se transforma en un número, por esto se llaman listas ordenadas.
    El numero puede ser cambiado por letras o números romanos colocando el atributo type="Valor" en la etiqueta
      .
      Dentro de Valor podemos colocar:
      1 Para ordenar las listas con números.
      A Para ordenar con letras.
      I Para ordenar con números romanos.

      Además, la numeración no necesariamente debe comenzar desde el 1. Podemos agregar en la etiqueta
        el atributo start="Valor" cambiando Valor por un número.
        Por ejemplo, si colocamos
          la lista comenzará del numero 5. Esto también funciona con listas de números romanos y también con las letras.

          Resultado:

          Código:
          Lista de usuarios
          <ol type=”a” start=”5”>
          <li> Bazinga
          <li> Austin
          <li> Javiuchiha
          </ol>

          Listas desordenadas: A diferencia de las ordenadas, este tipo de lista no tendrá una numeración. Se define con la etiqueta
            (lista desordenada en inglés) y dentro, como vimos anteriormente, la etiqueta
          • .

            Ejemplo:
            Código:
            Lista de usuarios
            <ul>
            <li> Bazinga
            <li> Austin
            <li> Javiuchiha
            </ul>


            Las desordenadas también pueden cambiar de estilo aplicando el atributo type="valor" a la etiqueta
              (aplicando el cambio a todas las
            • ) o bien podemos cambiar un
            • específico.
              Dentro de Valor podemos colocar Circle, Disc o Square

              Veamos un ejemplo:
              Código:
              Lista de usuarios
              <ul type="square">
              <li> Bazinga
              <li type="circle"> Austin
              <li> Javiuchiha
              </ul>

              Listas de definiciones: Los dos primeros tipos de listas eran muy parecidos. Las listas de definiciones tienen etiquetas totalmente diferentes pero muy fáciles de recordar. Como lo dice su nombre, usaremos este tipo de listas para dar definiciones a ciertos términos.
              Utilizamos la etiqueta
              (lista de definición en inglés) y dentro colocaremos dos etiquetas:
              Termino
              Definición

              Ejemplo:
              Código:
              <dl>
              <dt>Web Design Foro</dt>
              <dd>Un foro de diseño web/gráfico</dd>
              <dt>Kn Anime</dt>
              <dd>El mejor foro de Anime!</dd>
              </dl>

              Damos por finalizada la 4º clase. Nos salimos un poco de la rutina de la página HTML que veníamos creando ya que antes de continuar se deben aclarar ciertas cosas que son muy útiles para nuestra futura página web.
              Un saludo!


    1. Última edición por Bazinga el Vie Feb 03, 2012 10:33 pm, editado 1 vez

      Ver perfil de usuario http://www.webdesignforo.net

      2 Re: Clase 4 - Tipos de Listas el Vie Ene 20, 2012 9:28 pm

      Wow, que buena clase ahora si a leerla de nuevo xD, gracias Encantado

      Ver perfil de usuario http://www.aikayweb.forumotion.com

      3 Re: Clase 4 - Tipos de Listas el Vie Ene 20, 2012 9:47 pm

      Buen aporte.. lo que no sabía era lo último de lista definida Encantado Yo usaba una lista dentro de otra Canchero

      Saludos,

      Ver perfil de usuario http://naruteros.forumotion.com

      4 Re: Clase 4 - Tipos de Listas el Sáb Ene 21, 2012 4:59 am

      Muy buena clase Tito, es muy importante aprender a usar las listas jeje, muy bueno!!

      Ver perfil de usuario

      5 Re: Clase 4 - Tipos de Listas el Sáb Ene 21, 2012 8:41 am

      Excelente la clase xD

      Ver perfil de usuario http://animepng.blogspot.com

      6 Re: Clase 4 - Tipos de Listas el Vie Ene 27, 2012 2:44 pm

      Esta bastante bien, gracias!

      Ver perfil de usuario http://www.webdesignforo.net/

      7 Re: Clase 4 - Tipos de Listas el Lun Feb 20, 2012 9:52 pm

      Gracias por la clase.

      Un beso

      Ver perfil de usuario

      8 Re: Clase 4 - Tipos de Listas el Sáb Mar 17, 2012 7:46 pm

      Tus tutoriales deberías de hacerlos de otra forma, pero bueno, si así aprenden, no hay por que no hacerlo así Sonrisa

      Ver perfil de usuario

      9 Re: Clase 4 - Tipos de Listas el Sáb Mayo 26, 2012 7:09 pm

      Excelente clase, muy bien explicado lo de las listas, +1.

      Ver perfil de usuario http://www.webdesignforo.net/

      10 Re: Clase 4 - Tipos de Listas el Sáb Jul 07, 2012 12:48 am

      Vaya o.o no sabia sinceramente que se pudiera hacer algo asi >:< gracias!

      Ver perfil de usuario http://www.mundo-shinobi.org/

      11 Re: Clase 4 - Tipos de Listas el Miér Ago 01, 2012 4:50 am

      Woaaa salgo en la clase :fuckyea: , pero muy buena clase. Ya lo sabía pero de todos modos siempre es bueno repasar el HTML Encantado

      Ver perfil de usuario http://www.designforum.foroactivo.com/

      12 Re: Clase 4 - Tipos de Listas el Jue Ago 02, 2012 6:59 pm

      Gracias:D

      Ver perfil de usuario

      13 Re: Clase 4 - Tipos de Listas el Dom Ene 13, 2013 4:38 am

      Muy Simple pero Weno!
      Ewbte

      Ver perfil de usuario

      14 Re: Clase 4 - Tipos de Listas el Dom Feb 03, 2013 8:54 pm

      Es muy útil, gracias por la clase :3

      Ver perfil de usuario http://pokevento.tumblr.com/

      Contenido patrocinado


      Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

      Permisos de este foro:
      No puedes responder a temas en este foro.