Listas de definición en HTML
joaquinls
1,176 views
13 slides
Feb 21, 2014
Slide 1 of 13
1
2
3
4
5
6
7
8
9
10
11
12
13
About This Presentation
Material educativo sobre Listas de definición en HTML. Por Joaquin Lara Sierra.
Docente Universidad Tecnológica de Bolívar.
Slide Content
joaquinls
Listas de definición en
HTML
Joaquín Lara Sierra
Nuevas etiquetas HTML5 estructurales por JoaquinLara Sierrase encuentra bajo una Licencia CreativeCommonsAtribución-NoComercial-CompartirIgual2.5 Colombia.
Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
1
Listas de definición en
HTML
Joaquín Lara Sierra
Nuevas etiquetas HTML5 estructurales por JoaquinLara Sierrase encuentra bajo una Licencia CreativeCommonsAtribución-NoComercial-CompartirIgual2.5 Colombia.
Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
1
joaquinls
De que hablar
•Listas de definición.
•Ejercicios en clase.
•Taller propuesto (Savio).
2
De que hablar
•Listas de definición.
•Ejercicios en clase.
•Taller propuesto (Savio).
2
joaquinls
Enocasiones,esposibleagrupardeterminadaspalabraso
frasesenunconjuntodeelementosquetienenmás
significadodeformaconjunta.Elmenúdenavegaciónde
unsitiowebporejemploestáformadoporungrupode
palabras.Aunquecadapalabraporseparadotienesentido,
deformaconjuntaconstituyenelmenúdenavegaciónde
lapágina,porloquesusignificadoconjuntoesmayorque
porseparado.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
3
Enocasiones,esposibleagrupardeterminadaspalabraso
frasesenunconjuntodeelementosquetienenmás
significadodeformaconjunta.Elmenúdenavegaciónde
unsitiowebporejemploestáformadoporungrupode
palabras.Aunquecadapalabraporseparadotienesentido,
deformaconjuntaconstituyenelmenúdenavegaciónde
lapágina,porloquesusignificadoconjuntoesmayorque
porseparado.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
3
joaquinls
Tipos
•EllenguajeHTMLdefinetrestiposdiferentesdelistas
paraagruparloselementos:listasnoordenadas(se
tratadeunacolecciónsimpledeelementosenlaque
noimportasuorden),listasordenadas(similarala
anterior,peroloselementosestánnumeradosypor
tanto,importasuorden)ylistasdedefinición(un
conjuntodetérminosydefinicionessimilaraun
diccionario).
No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
4
Tipos
•EllenguajeHTMLdefinetrestiposdiferentesdelistas
paraagruparloselementos:listasnoordenadas(se
tratadeunacolecciónsimpledeelementosenlaque
noimportasuorden),listasordenadas(similarala
anterior,peroloselementosestánnumeradosypor
tanto,importasuorden)ylistasdedefinición(un
conjuntodetérminosydefinicionessimilaraun
diccionario).
No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
4
joaquinls
Laslistasnoordenadassonlasmássencillasylasquemásse
utilizan.Unalistanoordenadaesunconjuntodeelementos
relacionadosentresíperoparalosquenoseindicaunordeno
secuenciadeterminados.
Laetiqueta<ul>(Seempleaparadefinirlistasnoordenadas)
encierratodosloselementosdelalistaylaetiqueta<li>(Se
empleaparadefinirloselementosdelaslistas(ordenadasyno
ordenadas))Cadaunodesuselementos.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
5
Laslistasnoordenadassonlasmássencillasylasquemásse
utilizan.Unalistanoordenadaesunconjuntodeelementos
relacionadosentresíperoparalosquenoseindicaunordeno
secuenciadeterminados.
Laetiqueta<ul>(Seempleaparadefinirlistasnoordenadas)
encierratodosloselementosdelalistaylaetiqueta<li>(Se
empleaparadefinirloselementosdelaslistas(ordenadasyno
ordenadas))Cadaunodesuselementos.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
5
joaquinls
<html>
<head><title>EjemplodeetiquetaUL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Tipos No ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
6
<html>
<head><title>EjemplodeetiquetaUL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Tipos No ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
6
joaquinls
Laslistasordenadassoncasiidénticasalaslistasno
ordenadas,salvoqueenestecasoloselementos
relacionadossemuestransiguiendounordendeterminado.
Cuandosecreaporejemplounalistaconlasinstrucciones
deunproducto,esimportanteelordenenelqueserealiza
cadapaso.Cuandosemuestrauníndiceotablade
contenidosenunlibro,esimportanteelordendecada
elementodelíndice.
Entodosestoscasos,lalistamásadecuadaeslalista
ordenada,quesedefinemediantelaetiqueta<ol>.Los
elementosdelalistasedefinenmediantelaetiqueta<li>,la
mismaqueseutilizaenlaslistasnoordenadas.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
7
Laslistasordenadassoncasiidénticasalaslistasno
ordenadas,salvoqueenestecasoloselementos
relacionadossemuestransiguiendounordendeterminado.
Cuandosecreaporejemplounalistaconlasinstrucciones
deunproducto,esimportanteelordenenelqueserealiza
cadapaso.Cuandosemuestrauníndiceotablade
contenidosenunlibro,esimportanteelordendecada
elementodelíndice.
Entodosestoscasos,lalistamásadecuadaeslalista
ordenada,quesedefinemediantelaetiqueta<ol>.Los
elementosdelalistasedefinenmediantelaetiqueta<li>,la
mismaqueseutilizaenlaslistasnoordenadas.
Tipos No Ordenadas Ejemplo Ordenadas Ejemplo De DefiniciónListas
7
joaquinls
<html>
<head><title>EjemplodeetiquetaOL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufarcorrectamente</li>
<li>Comprobarconexiones</li>
<li>Encenderelaparato</li>
</ol>
</body>
</html>
Contexto Navegadores DocType Estructura Ejemplo De Definición¿Qué es?
8
<html>
<head><title>EjemplodeetiquetaOL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufarcorrectamente</li>
<li>Comprobarconexiones</li>
<li>Encenderelaparato</li>
</ol>
</body>
</html>
Contexto Navegadores DocType Estructura Ejemplo De Definición¿Qué es?
8
joaquinls
Laslistasdedefiniciónapenasseutilizanenlamayoríadepáginas
HTML.Sufuncionamientoessimilaraldeundiccionario,yaque
cadaelementodelalistaestáformadoportérminosydefiniciones.
Laetiqueta<dl>(Seempleaparadefinirlistasdedefinición)creala
listadedefiniciónylasetiquetas<dt>(Seempleaparadefinirlos
términosdeloselementosdeunalistadedefinición)y<dd>(Se
empleaparaindicarlasdefinicionesdeloselementosdeunalista
dedefinición)definenrespectivamenteeltérminoyladescripción
decadaelementodelalista.
9
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Laslistasdedefiniciónapenasseutilizanenlamayoríadepáginas
HTML.Sufuncionamientoessimilaraldeundiccionario,yaque
cadaelementodelalistaestáformadoportérminosydefiniciones.
Laetiqueta<dl>(Seempleaparadefinirlistasdedefinición)creala
listadedefiniciónylasetiquetas<dt>(Seempleaparadefinirlos
términosdeloselementosdeunalistadedefinición)y<dd>(Se
empleaparaindicarlasdefinicionesdeloselementosdeunalista
dedefinición)definenrespectivamenteeltérminoyladescripción
decadaelementodelalista.
9
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
joaquinls
<html>
<head><title>EjemplodeetiquetaDL</title></head>
<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguajeparaladefinicióndeotroslenguajesdemarcado</dd>
<dt>XML</dt>
<dd>LenguajebasadoenSGMLyqueseempleaparadescribir
datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>LenguajesderivadosdeXMLparadeterminadasaplicaciones</dd>
</dl>
</body>
</html>
10
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejemplo
<html>
<head><title>EjemplodeetiquetaDL</title></head>
<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguajeparaladefinicióndeotroslenguajesdemarcado</dd>
<dt>XML</dt>
<dd>LenguajebasadoenSGMLyqueseempleaparadescribir
datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>LenguajesderivadosdeXMLparadeterminadasaplicaciones</dd>
</dl>
</body>
</html>
10
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejemplo
joaquinls
11
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejemplo
11
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejemplo
joaquinls
12
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejercicio
•Determinar el código
HTML que corresponde a
la siguiente lista anidada
compleja.
•Haga el ejercicio y
socialice en la clase
encuentro.
12
Contexto Navegadores DocType Estructura Enfoques De Definición¿Qué es?
Ejercicio
•Determinar el código
HTML que corresponde a
la siguiente lista anidada
compleja.
•Haga el ejercicio y
socialice en la clase
encuentro.
joaquinls
Gracias
13
Gracias
13
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,176
- Slides 13
- Age 4300 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views