Archivo
Ejercicio 10 html – Listas y enlaces
Haz la siguiente página con enlaces a los periódicos (que se abran en otra ventana).
.
Ejercicio 9 HTML – Listas
Determinar el código HTML que corresponde a la siguiente lista anidada simple
Los enlaces que se ven hazlos a un periódico digital distinto cada vez.
Resolución del anterior ejercicio:
Construye la siguiente página:
Listas de definiciones: los elementos DL, DT y DD
Las listas de definiciones sólo difieren levemente de los otros tipos de listas, en que los objetos de lista consisten en dos partes: un término y una descripción. El término viene dado por el elemento DT y está restringido a contenido en línea. La descripción viene dada por un elemento DD que contiene contenido en bloque.
Aquí tenemos un ejemplo:
<DL>
<DT>Dweeb
<DD>persona joven y excitable que puede madurar y convertirse
en un <EM>Nerd</EM> o en un <EM>Geek</EM>
<DT>Hacker
<DD>un programador inteligente
<DT>Nerd
<DD>técnicamente brillante pero socialmente inútil
</DL>
Aquí tenemos un ejemplo con términos y definiciones múltiples:
<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court,
or forward line.
</DL>
Otra aplicación de DL es, por ejemplo, dar formato a un diálogo, de modo que cada DT identifica al hablante, y cada DD contiene sus palabras.
Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.
<html> <head><title>Ejemplo de etiqueta DL</title></head> <body> <h1>Metalenguajes</h1> <dl> <dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd> <dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd> <dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd> </dl> </body> </html>
Listas anidadas en HTML
Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siquiente lista:
- Lunes
- Ingles
- Frances
- Martes
- Ingles
- Correccion de ejercicios
- Proponer ejercicios
- Ingles
Habría que escribir:
<ol>
<li>Lunes
<ul type=«square»>
<li>Ingles</li>
<li>Frances</li>
</ul>
</li>
<li>Martes
<ol>
<li>Ingles</li>
<ol type=«A»>
<li>Correccion de ejercicios</li>
<li>Proponer ejercicios </li>
</ol>
</li>
</ol>
</li>
</ol>
Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes.
El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type=«square»>que tiene dos elementos <li>Ingles</li> y <li>Frances</li>.
El elemento Martes contiene una lista ordenada de un sólo elemento <li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo letras mayúsculas <ol type=«A»> con los dos elementos <li>Correccion de ejercicios</li> y <li>Proponer ejercicios </li>
Descarga el ejemplo de clase.
Listas desordenadas en HTML
Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.
Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:
<UL>
<LI> Primera voz del menú</LI>
<LI> Segunda voz del menú</LI>
<LI> Tercera voz del menú</LI>
</UL>
Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:
Para el elemento UL, los valores posibles del atributo type sondisc(disco),square(cuadrado), ycircle(círculo). El valor por defecto depende del nivel de anidamiento de la lista actual. Estos valores no distinguen entre mayúsculas y minúsculas.
El modo en que se presenta cada valor depende del agente de usuario. Los agentes de usuario deberían intentar presentar un «disc» como un pequeño círculo relleno, un «circle» como un pequeño círculo vacío, y un «square» como un pequeño cuadrado vacío.
Un agente de usuario gráfico podría hacer las siguientes representaciones:
.
Listas ordenadas en Html
Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.
Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:
<OL>
<LI> Primera voz del menú</LI>
<LI> Segunda voz del menú</LI>
<LI> Tercera voz del menú</LI>
</OL>
Resultado:
A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).
Por ejemplo, para insertar la siquiente lista:
- Perro
- Gato
- Periquito
Habría que escribir:
<ol type=«i»>
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>
Parámetro START de OL:
start= number. Sólo paraOL. Este atributo especifica el número del primer objeto de una lista ordenada. El número inicial por defecto es el «1». Obsérvese que si bien el valor de este atributo es un entero, el rótulo correspondiente puede no ser numérico. Así, por ejemplo, cuando el estilo de objeto de lista es de letras latinas mayúsculas (A, B, C, …),start=3significa «C». Cuando el estilo es de numerales romanos en minúsculas,start=3significa «iii», etc.
Parámetro VALUE de LI:
Detalles sobre el orden de los números.En las listas ordenadas, no es posible reanudar automáticamente la numeración de una lista donde acabó una lista anterior, así como tampoco ocultar la numeración para un objeto de la lista. Sin embargo, los autores pueden inicializar el número de un objeto de la lista estableciendo su atributovalue. La numeración de los objetos de lista subsiguientes continúa a partir del nuevo valor. Por ejemplo:
<ol> <li value="30"> hace que éste sea el objeto de lista número 30. <li value="40"> hace que éste sea el objeto de lista número 40. <li> hace que éste sea el objeto de lista número 41. </ol>
…
Etiquetas de frase. HTML
Los elementos de frase añaden información estructural a fragmentos de texto. Los significados normales de los elementos de frase son los siguientes:
- EM:
- Indica énfasis (emphasis).
- STRONG:
- Indica un énfasis más fuerte.
- CITE:
- Contiene una cita o una referencia a otras fuentes.
- DFN:
- Indica que aquí es donde se define el término encerrado.
- CODE:
- Designa un fragmento de código de computadora.
- SAMP:
- Designa una muestra de la salida de un programa, script, etc.
- KBD:
- Indica texto que debe ser introducido por el usuario.
- VAR:
- Indica que el texto es una variable o un argumento de un programa.
- ABBR:
- Indica una forma abreviada (p.ej., WWW, HTTP, URI, Mass., etc.).
- ACRONYM:
- Indica un acrónimo (p.ej., WAC, radar, etc.).
…
Etiqueta <address></address>
Ofrece una manera de dar formato a un pequeño cuerpo de texto que se asemeje a la rotulación de una carta convencional.
Sintaxis de ejemplo:
<address>José Pérez<br>
Real, 22<br>
Atarfe – Granada</address>
Etiqueta <cite> </cite>
El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita
Sintaxis de ejemplo:
<cite>Este texto estará inclinado</cite>
Etiqueta <code> </code>
El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados cuando se visualiza a través de un navegador.
Sintaxis de ejemplo:
<code>Este texto aparece con tipo de letra especial</code>
Etiqueta <em> </em>
Indica que se debe dar énfasis al texto que se contiene. EL navegador resaltará este texto con negrita e inclinación italica.
Sintaxis de ejemplo:
<em>Texto resaltado</em>
Etiqueta <kbd> </kbd>
La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del teclado hecha por el usuario.
Sintaxis de ejemplo:
<kbd>Escriba su mensaje:</kbd>
Etiqueta <nobr> </nobr>
La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL extenso.
Sintaxis de ejemplo:
No deseo que esta dirección URL larga sea cortada: <nobr>http://www.movilidadgranada.com/mapa/plantillamapacamaras.php</nobr>
Etiqueta <tt> </tt>
Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho fijo.
Sintaxis de ejemplo:
<tt>Este es un tipo de letra de teletipo</tt>
Etiqueta <var> </var>
Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.
Sintaxis de ejemplo:
<var>Este texto será mas pequeño y de formato especial</var>
Etiqueta <abbr></abbr> y <acronym></acronym>
Los elementosABBRyACRONYMpermiten a los autores indicar claramente la aparición de abreviaturas y acrónimos. Los idiomas occidentales hacen uso extensivo de acrónimos tales como «GmbH», «NATO», y «F.B.I.», así como de abreviaturas como «M.», «Inc.», «et al.», «etc.». Tanto en chino como en japonés se utilizan mecanismos de abreviación análogos, por los cuales las referencias subsiguientes a un nombre largo se realizan con un subconjunto de los caracteres Han del nombre original. Al marcar estas estructuras se proporciona información útil a los agentes de usuario y a herramientas tales como correctores ortográficos, sintetizadores de voz, sistemas de traducción e indexadores de motores de búsqueda.
El contenido de los elementosABBRyACRONYMespecifica la expresión abreviada, tal y como aparece en el texto. Puede utilizarse el atributo title de estos elementos para proporcionar la forma completa o expandida de la expresión.
Aquí tenemos algunos ejemplos deABBR:
<P>
<ABBR title="World Wide Web">WWW</ABBR>
<ABBR lang="fr"
title="Société Nationale des Chemins de Fer">
SNCF
</ABBR>
<ABBR lang="es" title="Doña">Doña</ABBR>
<ABBR title="Abbreviation">abbr.</ABBR>
Obsérvese que las abreviaturas y los acrónimos tienen a menudo pronunciaciones idiosincráticas. Por ejemplo, mientras que «IRS» y «BBC» se suelen pronunciar letra por letra, «OTAN» y «UNESCO» se pronuncian fonéticamente. Y hay otras formas abreviadas (p.ej., «URI» y «SCSI») que algunas personas deletrean y que otras pronuncian como palabras. Cuando sea necesario, los autores deberían usar hojas de estilo para especificar la pronunciación de una forma abreviada.
Ejercicio 8 html – Enlaces
En este ejercicio hay que crear 5 ficheros HTML:
andalucia.html
jaen.html
granada.html
atarfe.html
maracena.html
y dotarlos con la siguiente estructura de navegación:
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 