Manual 1.3 HTML
0 recomendaciones366 vistas
Este documento describe los diferentes tipos de listas que se pueden crear en HTML, incluyendo listas ordenadas, sin ordenar y de definición. Explica cómo anidar listas y agregar atributos como tipo y valor. También cubre cómo incluir iconos e hipervínculos en listas de definición.
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
COMO CREAR LISTAS
Listas hay en todas partes:
En los libros escolares, junto al teléfono, en las facturas y en toda clase de documentos.
Existen tipos de listas que se pueden trabajar en HTML:
1. Listas Ordenadas.
2. Listas sin Ordenar.
3. Listas de Definición.
Las listas tienen especial utilidad en las páginas Web para llamar la atención ante datos de
información pequeños.
NOTA: Al crear listas, trate de incluir frases cortas, en lugar de oraciones largas, para cada ítem
de la lista.
1. Listas Ordenadas.
Una lista ordenadas es aquella en donde cada artículo está precedido por un número o una
letra. Por Ejemplo:
Mis Frutas Favoritas son:
1. Naranjas
2. Fresas.
3. Manzanas.
Si desea crear la lista anterior en una página Web, debe usar una lista ordenada. El
siguiente es el aspecto que podría tener el código HTML. Ejmplo:
Mis frutas Favoritas son:
<ol>
<li>Naranjas</li>
<li>Fresas</li>
<li>Manzanas</li>
</ol>
<ol> esta etiqueta de apertura le dice al navegador que ésta será una lista ordenada.
<li> este símbolo equivale a “artículo de la lista” y distingue cada artículo de la lista.
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-1-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
En las listas ordenadas la condición predeterminada para la numeración es el uso de
números arábigos; no obstante, puede usar el atributo TYPE para cambiarlos.
La TABLA SIGUIENTE identifica los distintos tipos de listas ordenadas que usted puede
crear con el atributo TYPE.
Para cambiar el tipo de la lista ordenada, agregue el atributo TYPE y su valor a la
etiqueta de apertura <ol>.
TIPO DE ATRIBUTO DE ESTILO DE NUMERACIÓN
VALOR
1 Números Arábigos 1, 2 , 3, ……….
a Alfabeto en Minúsculas a, b, c,……….
A Alfabeto en Mayúsculas A, B, C, ………..
Numerales Romanos en
i I, ii, iii, …………
Minúsculas.
Numerales Romanos en
I I, II, III, ……………
Mayúsuclas
Ejemplo con TYPE:
<ol type=”I”>
<li>Introducción</li>
<li>Entender el Medio</li>
<li>Estructura Básica de la Página</li>
</ol>
Ejemplo con TYPE y START:
<ol type=”a” start=”3”>
<li>Color </li>
<li>Trabajar con texto</li>
<li>Trabajar con Enlaces</li>
</ol>
Ejemplo con TYPE y START atributo Value:
<ol type=”a” start=”3”>
<li>Color </li>
<li>Trabajar con texto</li>
<li value=”7” >Trabajar con Enlaces</li>
</ol>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[2]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-2-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
El Atributo START está con el valor entero 3 esto quiere decir que empezará por la
tercera Letra.
El atributo VALUE de la Etiqueta <li> le dice al navegador que la letra de la
posición 3 (letra e) será sustituida por la letra de la posición 7 en este caso “g”.
2. Listas sin Ordenar.
El segundo tipo de lista es similar al primero, salvo que en las listas sin ordenar no se usan
números o letras. Estas listas usan Viñetas que preceden cada artículo que las componen.
El siguiente Ejemplo es una lista sin Ordenar.
Ejemplo:
<ul>
<li>Rojo </li>
<li>Verde</li>
<li>Azul</li>
</ul>
NOTA: Aquí también se puede utilizar el Atributo type, para cambiar el estilo de
Viñetas, que cuenta con tres opciones:
type= “disc” : usualmente se presenta como círculo relleno.
type= “circle” : por lo común es un circulo sin rellenar.
type= “square” : por lo general es un cuadrado sin llenar.
3. Listas de Definición.
El tercer tipo de lista que puede crear en HTML se llama lista de Definición. Como su
nombre sugiere, una lista de definición se podría usar para mostrar términos y sus
definiciones. Por Ejemplo:
REDES
Una red de computadoras, también llamada red de ordenadores o red informática,
es un conjunto de equipos conectados por medio de cables, señales, ondas o
cualquier otro método de transporte de datos, que comparten información
(archivos), recursos (CD-ROM, impresoras, etc.), servicios (acceso a internet, e-mail,
chat, juegos), etc.
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[3]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-3-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
HTML
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de
Hipertexto), es el lenguaje de marcado predominante para la elaboración de
páginas web. Es usado para describir la estructura y el contenido en forma de
texto, así como para complementar el texto con objetos tales como imágenes.
Una lista de Definición funciona como esta:
<dl>
<dt>REDES </dt>
<dd> Una red de computadoras, también llamada red de ordenadores o red
informática, es un conjunto de equipos conectados por medio de cables,
señales, ondas o cualquier otro método de transporte de datos, que
comparten información (archivos), recursos (CD-ROM, impresoras, etc.),
servicios (acceso a internet, e-mail, chat, juegos), etc.
</dd>
<dt>HTML </dt>
<dd> HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de
Hipertexto), es el lenguaje de marcado predominante para la elaboración de
páginas web. Es usado para describir la estructura y el contenido en forma de
texto, así como para complementar el texto con objetos tales como
imágenes.
</dd>
</dl>
Especificación de Atributos:
<dl> : Esta etiqueta comienza la lista de definición.
<dt> : Esta etiqueta especifica el título de la Definición.
<dd> : Utilizada para la Definicion.
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[4]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-4-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
ANIDAR LISTAS
Usted también puede usar una lista dentro de otra e incluso un tipo de lista dentro de otro
Tipo. Cuando procede de ese modo, está anidando listas.
Ejemplo:
<ol type=”I”>
<li>Introducción</li>
<li>Parte 1</li>
<ol type=”A”>
<li>Descripción</li>
<li>Ejemplos</li>
<ol type=”1”>
<li>Referencia uno</li>
<li> Referencia dos</li>
</ol>
</ol>
<li>Parte 2</li>
<li>Resumen</li>
</ol>
EJERCICIO: Realice usted el siguiente anidamiento con listas según el
gráfico.
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[5]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-5-320.jpg)
![IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIDÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
Trabajar listas de Definiciones con Iconos y Enlaces
También se pueden incluir gráficos como Viñetas y enlaces de la Siguiente Manera.
Pero antes deberá de guardar los iconos o gráficos en una carpeta.
<dl>
<dt> <font face="arial" size="+1" color="FF8000"> <img src="icono/red.jpg"
width="30" height="30" align="middle" border="0"> Conexión a la Red.
</font>>
</dt>
<dd> <a href="normativa.html"><img src="icono/star.jpg" width="30"
height="30"align="middle" border="0"> Normativa de conexión a Red.
</a>
</dd>
<dd><a href="software.htm"><img src="icono/star.jpg" width="30"
height="30"align="middle" border="0"> Instalación de Software de
Comunicaciones.</a>
</dd>
<dd><a href="solicitud.htm"><img src="icono/star.jpg"width="30" height="30"
align="middle" border="0"> Solicitud de Servicios de
Comunicaciones.</a>
</dd>
<dd><a href="proxy.html"><img src="icono/star.jpg"width="30" height="30"
align="middle" border="0"> Servidores Proxy. </a>
</dd>
<dt> <font face="arial" size="+1" color="FF8000"><img src="icono/mensaje.jpg"
width="30" height="30" align="middle" border="0"> Mensajería Electrónica.
</font></a>
</dt>
<dd><a href="portada.html"><img src="icono/star.jpg"width="30"
height="30" align="middle" border="0">Manual Práctico de Eudora.
</a>
</dd>
<dd><a href="mensaje.html"><img src="icono/star.jpg"width="30" height="30"
align="middle" border="0">Mensajería Institucional. </a>
</dd>
</dl>
DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[6]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS](https://image.slidesharecdn.com/clase-1-4-110127101128-phpapp02/85/Manual-1-3-HTML-6-320.jpg)
Manual 1.3 HTML
- 1. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA COMO CREAR LISTAS Listas hay en todas partes: En los libros escolares, junto al teléfono, en las facturas y en toda clase de documentos. Existen tipos de listas que se pueden trabajar en HTML: 1. Listas Ordenadas. 2. Listas sin Ordenar. 3. Listas de Definición. Las listas tienen especial utilidad en las páginas Web para llamar la atención ante datos de información pequeños. NOTA: Al crear listas, trate de incluir frases cortas, en lugar de oraciones largas, para cada ítem de la lista. 1. Listas Ordenadas. Una lista ordenadas es aquella en donde cada artículo está precedido por un número o una letra. Por Ejemplo: Mis Frutas Favoritas son: 1. Naranjas 2. Fresas. 3. Manzanas. Si desea crear la lista anterior en una página Web, debe usar una lista ordenada. El siguiente es el aspecto que podría tener el código HTML. Ejmplo: Mis frutas Favoritas son: <ol> <li>Naranjas</li> <li>Fresas</li> <li>Manzanas</li> </ol> <ol> esta etiqueta de apertura le dice al navegador que ésta será una lista ordenada. <li> este símbolo equivale a “artículo de la lista” y distingue cada artículo de la lista. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 2. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA En las listas ordenadas la condición predeterminada para la numeración es el uso de números arábigos; no obstante, puede usar el atributo TYPE para cambiarlos. La TABLA SIGUIENTE identifica los distintos tipos de listas ordenadas que usted puede crear con el atributo TYPE. Para cambiar el tipo de la lista ordenada, agregue el atributo TYPE y su valor a la etiqueta de apertura <ol>. TIPO DE ATRIBUTO DE ESTILO DE NUMERACIÓN VALOR 1 Números Arábigos 1, 2 , 3, ………. a Alfabeto en Minúsculas a, b, c,………. A Alfabeto en Mayúsculas A, B, C, ……….. Numerales Romanos en i I, ii, iii, ………… Minúsculas. Numerales Romanos en I I, II, III, …………… Mayúsuclas Ejemplo con TYPE: <ol type=”I”> <li>Introducción</li> <li>Entender el Medio</li> <li>Estructura Básica de la Página</li> </ol> Ejemplo con TYPE y START: <ol type=”a” start=”3”> <li>Color </li> <li>Trabajar con texto</li> <li>Trabajar con Enlaces</li> </ol> Ejemplo con TYPE y START atributo Value: <ol type=”a” start=”3”> <li>Color </li> <li>Trabajar con texto</li> <li value=”7” >Trabajar con Enlaces</li> </ol> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[2] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 3. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA El Atributo START está con el valor entero 3 esto quiere decir que empezará por la tercera Letra. El atributo VALUE de la Etiqueta <li> le dice al navegador que la letra de la posición 3 (letra e) será sustituida por la letra de la posición 7 en este caso “g”. 2. Listas sin Ordenar. El segundo tipo de lista es similar al primero, salvo que en las listas sin ordenar no se usan números o letras. Estas listas usan Viñetas que preceden cada artículo que las componen. El siguiente Ejemplo es una lista sin Ordenar. Ejemplo: <ul> <li>Rojo </li> <li>Verde</li> <li>Azul</li> </ul> NOTA: Aquí también se puede utilizar el Atributo type, para cambiar el estilo de Viñetas, que cuenta con tres opciones: type= “disc” : usualmente se presenta como círculo relleno. type= “circle” : por lo común es un circulo sin rellenar. type= “square” : por lo general es un cuadrado sin llenar. 3. Listas de Definición. El tercer tipo de lista que puede crear en HTML se llama lista de Definición. Como su nombre sugiere, una lista de definición se podría usar para mostrar términos y sus definiciones. Por Ejemplo: REDES Una red de computadoras, también llamada red de ordenadores o red informática, es un conjunto de equipos conectados por medio de cables, señales, ondas o cualquier otro método de transporte de datos, que comparten información (archivos), recursos (CD-ROM, impresoras, etc.), servicios (acceso a internet, e-mail, chat, juegos), etc. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[3] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 4. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA HTML HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. Una lista de Definición funciona como esta: <dl> <dt>REDES </dt> <dd> Una red de computadoras, también llamada red de ordenadores o red informática, es un conjunto de equipos conectados por medio de cables, señales, ondas o cualquier otro método de transporte de datos, que comparten información (archivos), recursos (CD-ROM, impresoras, etc.), servicios (acceso a internet, e-mail, chat, juegos), etc. </dd> <dt>HTML </dt> <dd> HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. </dd> </dl> Especificación de Atributos: <dl> : Esta etiqueta comienza la lista de definición. <dt> : Esta etiqueta especifica el título de la Definición. <dd> : Utilizada para la Definicion. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[4] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 5. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ANIDAR LISTAS Usted también puede usar una lista dentro de otra e incluso un tipo de lista dentro de otro Tipo. Cuando procede de ese modo, está anidando listas. Ejemplo: <ol type=”I”> <li>Introducción</li> <li>Parte 1</li> <ol type=”A”> <li>Descripción</li> <li>Ejemplos</li> <ol type=”1”> <li>Referencia uno</li> <li> Referencia dos</li> </ol> </ol> <li>Parte 2</li> <li>Resumen</li> </ol> EJERCICIO: Realice usted el siguiente anidamiento con listas según el gráfico. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[5] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
- 6. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIDÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA Trabajar listas de Definiciones con Iconos y Enlaces También se pueden incluir gráficos como Viñetas y enlaces de la Siguiente Manera. Pero antes deberá de guardar los iconos o gráficos en una carpeta. <dl> <dt> <font face="arial" size="+1" color="FF8000"> <img src="icono/red.jpg" width="30" height="30" align="middle" border="0"> Conexión a la Red. </font>> </dt> <dd> <a href="normativa.html"><img src="icono/star.jpg" width="30" height="30"align="middle" border="0"> Normativa de conexión a Red. </a> </dd> <dd><a href="software.htm"><img src="icono/star.jpg" width="30" height="30"align="middle" border="0"> Instalación de Software de Comunicaciones.</a> </dd> <dd><a href="solicitud.htm"><img src="icono/star.jpg"width="30" height="30" align="middle" border="0"> Solicitud de Servicios de Comunicaciones.</a> </dd> <dd><a href="proxy.html"><img src="icono/star.jpg"width="30" height="30" align="middle" border="0"> Servidores Proxy. </a> </dd> <dt> <font face="arial" size="+1" color="FF8000"><img src="icono/mensaje.jpg" width="30" height="30" align="middle" border="0"> Mensajería Electrónica. </font></a> </dt> <dd><a href="portada.html"><img src="icono/star.jpg"width="30" height="30" align="middle" border="0">Manual Práctico de Eudora. </a> </dd> <dd><a href="mensaje.html"><img src="icono/star.jpg"width="30" height="30" align="middle" border="0">Mensajería Institucional. </a> </dd> </dl> DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[6] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS