2 HTML

Lista ordenada (<ol>)
Este elemento HTML es útil cuando debemos numerar o listar una serie de objetos.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos
el orden de llegada de tres corredores:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
La marca <ol> y su correspondiente marca de cerrado es </ol>

En su interior cada uno de los items se los dispone con el elemento li, que también
tiene la marca de comienzo <li> y la marca de fin de item </li>
Luego se encarga el navegador de numerar cada uno de los items contenidos en la
lista, tengamos en cuenta que se numeran porque se trata de una lista ordenada.
Para recordar el nombre de estos elementos HTML:
<ol> viene de las palabras ordered list

<li> viene de las palabras list item
1. Problema: Mostrar el orden de llegada de tres corredores utilizando el

elemento HTML ol.
Lista no ordenada (<ul>)
Una lista no ordenada como su nombre lo indica no utiliza un número delante de

cada items sino un pequeño símbolo gráfico.
La forma de implementar este tipo de listas es idéntico a las listas ordenadas.
Veamos un ejemplo donde implementamos una lista no ordenada:
INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

TECNICO EN PROGRAMACION DE SOFTWARE
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
Para recordar los nombres de estas marcas HTML:

<ul> viene de las palabras unordered list
<li> viene de las palabras list item
2. Problema: Confeccionar una página HTML que contenga una lista no

ordenada con cuatro lenguajes de programación muy populares. Agregar
un título de segundo nivel indicando el concepto de esta lista.
Lista de definiciones (<dl>)
Como su nombre lo indica se utiliza para asociar un término y la definición del

mismo. El navegador se encarga de destacar y separa el término y su definición.
Crearemos una lista con la definición de varios lenguajes de programación:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<dl>
<dt>C++</dt>
<dd>Es un lenguaje de programación, diseñado a mediados de
los años 1980, por Bjarne Stroustrup, como extensión del
lenguaje

de programación C.</dd>
<dt>Java</dt>
<dd>Es un lenguaje de programación orientado a objetos
desarrollado
por Sun Microsystems a principios de los 90.</dd>
<dt>JavaScript</dt>
<dd>Es un lenguaje interpretado, es decir, que no requiere
compilación,
utilizado principalmente en páginas web, con una sintaxis
semejante a la
del lenguaje C.</dd>
</dl>
</body>
</html>
Como podemos observar intervienen más marcas que en los otros dos tipos de
listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl>
Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd>
(Definition Description)
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list

<dt> viene de definition term
<dd> viene de definition description
3. Problema: Confeccionar una lista de definición indicando en los conceptos

distintos lenguajes de programación. En la definición hacer una breve
introducción del mismo.
Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar
listas de distinto tipo, por ejemplo, podemos tener una lista no ordenada y uno de
los item puede ser una lista ordenada.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y
cerrado de las marcas
Implementaremos una página que enumere una serie de países en una lista
ordenada y luego en cada país dispondremos una lista de hipervínculos de
periódicos de dicho país:
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
<li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El
Universal</a></li>
</ul>
</li>
</ol>
</body>
</html>
Se puede insertar en un elemento li una lista como podemos ver:

<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La
Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página
12</a></li>
</ul>
</li>
4. Problema: Implementar una página que enumere una serie de países en

una lista ordenada y luego en cada país disponer una lista de hipervínculos
de periódicos de dicho país.

Tabla (<table><tr><td>)
El objetivo fundamental de las tablas es mostrar una serie de datos en forma

ordenada, organizado en filas y columnas.
Algo importante es que no utilizaremos las tablas para organizar la página completa
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de
cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del
elemento tr. Este elemento requiere la marca de cierre.
<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.
La mejor forma de entender y dominar este concepto es implementar tablas y ver

su resultado dentro del navegador. Confeccionemos una tabla que muestre los
nombre de paises en una columna y su cantidad de habitantes en otra:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>

Lo primero que aparece es la apertura del elemento table, donde inicializamos la
propiedad border con el valor 1, con esto el contorno de cada celda será visible
(pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primer celda de la primer fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la próxima celda:
<td>
Disponemos el valor de la celda:
1300 millones
Cerramos la celda:
</td>
Ahora cerramos la primer fila de la tabla:
</tr>
El mecanismo de la siguiente fila es similar a la primera.
5. Problema: Confeccionar una tabla que muestre los nombres de países en

una columna y su cantidad de habitantes en otra.
Tabla (<table><tr><td>)
El objetivo fundamental de las tablas es mostrar una serie de datos en forma

ordenada, organizado en filas y columnas.
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de
cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del
elemento tr. Este elemento requiere la marca de cierre.
<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.
La mejor forma de entender y dominar este concepto es implementar tablas y ver
su resultado dentro del navegador. Confeccionemos una tabla que muestre los
nombre de países en una columna y su cantidad de habitantes en otra:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Lo primero que aparece es la apertura del elemento table, donde inicializamos la

propiedad border con el valor 1, con esto el contorno de cada celda será visible
(pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primer celda de la primer fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la proxima celda:
<td>
Disponemos el valor de la celda:
1300 millones
Cerramos la celda:
</td>
Ahora cerramos la primer fila de la tabla:
</tr>
El mecanismo de la siguiente fila es similar a la primera.

6. Problema: Confeccionar una tabla que muestre los nombres de países en
una columna y su cantidad de habitantes en otra. Disponer un título a cada
columna mediante celdas creadas mediante el elemento th.
Tabla con título (<caption>)
Para disponer un título a una tabla debemos incorporar el elemento caption

inmediatamente después que abrimos la marca table. El elemento caption requiere
la marca de apertura y cierre.
Dispongamos un título a nuestra tabla con la población de distintos paises:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<caption>Población de los paises con mayor cantidad de
habitantes.</caption>
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Como podemos observar la marca caption está inmediatamente después que se

abre la marca de comienzo de la tabla:
<table border="1">
<caption>Población de los paises con mayor cantidad de
habitantes.</caption>
<tr>
Para recordar el nombre de este nuevo elemento HTML:
<caption> significa título.

7. Problema: Confeccionar una tabla que muestre los nombre de países en
una columna y su cantidad de habitantes en otra. Disponer un título de los
datos que representa la tabla.
Tabla y combinación de celdas.
En algunas situaciones se necesita que una celda ocupe el lugar de dos o más
celdas en forma horizontal o vertical, para estos casos el elemento td o th dispone
de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad
colspan con el valor 3:
<td colspan="3">Facturación de los últimos tres
meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego
hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinación de celdas:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="4">Recursos</td><td colspan="4">Facturación de
los últimos tres meses</td>
</tr>
<tr>
<td>Discos
Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>

Veamos como definimos la primer fila de la tabla:
<tr>
<td rowspan="4">Recursos</td><td colspan="4">Facturación
de los últimos tres meses</td>
</tr>
Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la
segunda celda la expandimos hacia la derecha en 4 celdas.
Cuando tenemos que disponer las celdas de la segunda fila debemos tener en
cuenta que la primera está ocupada. Luego el código es:
<tr>
<td>Discos
</tr>
8. Problema: Confeccionar una tabla que muestre la facturación de los

últimos tres meses de los artículos:'Discos Duros', 'CPU' y 'Monitores'. La
primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto
'Facturación de los últimos tres meses'.
Contenido de la cabecera de la página (<title>)
Hasta ahora habíamos dispuesto la cabecera del archivo HTML sin mensionar
mucho sobre su contenido, ya que casi toda la información que disponemos en ella
no se visualiza en el navegador. La única excepcion corresponde al elemento title.
El elemento title nos permite definir el título que aparecerá en la barra del navegador
(es decir en la parte más alta de la ventana)
Siempre debemos buscar un título lo más significativo en cuanto a lo que muestra
la página.
Veamos una simple página que muestre un mensaje y contenga un hipervínculo a
una segunda página que muestre otro título:
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Título de la primer página</title>
</head>
<body>
<h1>Prueba del elemento title</h1>
<a href="pagina2.html">Ir a la segunda página</a>
</body>
</html>

pagina2.html
<!DOCTYPE html>
<html>
<head>
<title>Título de la segunda página</title>
</head>
<body>
<h1>Prueba del elemento title (segunda página)</h1>
<a href="pagina1.html">Ir a la primer página</a>
</body>
</html>
9. Problema: Confeccionar dos páginas que inicialicen el elemento title.

Disponer un hipervínculo en cada página.
Contenido de la cabecera de la página (<meta>)
Un elemento que no se visualiza es el meta, que tiene por objetivo especificar

información sobre el propio documento.
Veamos las dos propiedades fundamentales de la marca meta y los valores más
comunes con lo que podemos inicializarlos:
<meta name="nombre de la propiedad" content="valor de la

propiedad">
Name almacena el nombre de la propiedad y content el valor de la propiedad.

No existe ninguna especificación de la W3C que defina los valores posibles para el
atributo name, si bien existen algunos que son estandares de facto (description,
keywords, author etc.)
Veamos las propiedades y valores más comunes
<meta name="keywords" content="html, programación,

webmaster">
Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la

propiedad name del elemento meta con el valor keywords luego buscará en la
propiedad content las distintas palabras claves más representativas para dicha
página. Esto es muy útil para posicionar nuestra página según el contenido que
provee.

Veamos otras inicializaciones del elemento meta:
<meta name="description" content="El objetivo de este

tutorial es presentar los conceptos básicos de HTML. Es
objetivo prioritario respetar los estándares del W3C">
En este caso especificamos una descripción de la página, pudiendo ser del sitio si
se trata de la página principal.
<meta name="author" content="Diego Rodriguez">

<meta name="copyright" content="Interpolacion inc.">
10. Problema:Confeccionar una página HTML. Definir el elemento title y

los metadatos para indicar autor, palabras claves para buscadores,
descripción de la página y copyright.
Comentarios dentro de una página 
Un comentario es un texto que solo le interesa a la persona que desarrolló la página,

el navegador ignora todo el contenido que se encuentra dentro de esta marca.
Los comentarios son muy útiles para el desarrollador de la página. Uno deja
anotaciones para facilitar el mantenimiento del sitio.
Además, hay que tener en cuenta que puede ser otra persona la que continúe en
otro momento el mantenimiento de las páginas que desarrollamos nosotros. Lo que
para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio.
Otro uso muy habitual cuando estamos desarrollando la página si queremos
deshabilitar una parte del código podemos encerrarla entre los caracteres de
comentarios.
La sintaxis para definir un comentario es:

Es obligatorio luego del caracter de menor < disponer el signo de admiración y los
dos guiones seguidos. Cerramos el comentario con dos guiones y el signo de
mayor >
Confeccionaremos una página donde emplearemos comentarios:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación
de los últimos tres meses</th>
</tr>
<tr>
<td>Discos
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>
Un comentario puede abarcar varias líneas:


De todos modos, hay que tener en cuenta que cuando un navegador pide la página
a un sitio el servidor envía el archivo HTML completo, es decir con los comentarios.
Los comentarios consumen ancho de banda en la transferencia, ya que el archivo
es más grande.

11. Problema: Confeccionar una página que contenga una tabla. Almacenar
en un comentario datos referentes al contenido de la tabla que solo interesen
al desarrollador.
Sintaxis para caracteres especiales.
Posiblemente hasta ahora no se ha preguntado cómo disponer dentro de una página

los caracteres: < y >. Veremos que no los podemos disponer directamente ya que
el navegador los confudiría con los caracteres que se utilizan para las marcas
HTML.
La solución es utilizar otra sintaxis para dichos caracteres, veamos los más
utilizados:
< <
> >
& &
//Espacio en blanco.
© ©
€ €
Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo

(por lo menos para los que entienden ingles) y finalmente un punto y coma.
Para ver su funcionamiento mostraremos la siguiente ecuación:
10+x*y < 12*z
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
10+x*y < 12*z
</h1>
</body>
</html>
12. Problema: Mostrar la siguiente ecuación:

10+x*y agregar aquí el símbolo menor 12*z

2 HTML

Cargado por

Copyright:

Formatos disponibles

2 HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2 HTML

Cargado por

Copyright:

Formatos disponibles

Lista ordenada (<ol>)

La marca <ol> y su correspondiente marca de cerrado es </ol>

<ol> viene de las palabras ordered list

1. Problema: Mostrar el orden de llegada de tres corredores utilizando el

Lista no ordenada (<ul>)

Una lista no ordenada como su nombre lo indica no utiliza un número delante de

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Para recordar los nombres de estas marcas HTML:

2. Problema: Confeccionar una página HTML que contenga una lista no

Lista de definiciones (<dl>)

Como su nombre lo indica se utiliza para asociar un término y la definición del

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

<dl> viene de definition list

3. Problema: Confeccionar una lista de definición indicando en los conceptos

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Se puede insertar en un elemento li una lista como podemos ver:

4. Problema: Implementar una página que enumere una serie de países en

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

El objetivo fundamental de las tablas es mostrar una serie de datos en forma

La mejor forma de entender y dominar este concepto es implementar tablas y ver

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

5. Problema: Confeccionar una tabla que muestre los nombres de países en

El objetivo fundamental de las tablas es mostrar una serie de datos en forma

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Lo primero que aparece es la apertura del elemento table, donde inicializamos la

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Tabla con título (<caption>)

Para disponer un título a una tabla debemos incorporar el elemento caption

Como podemos observar la marca caption está inmediatamente después que se

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Tabla y combinación de celdas.

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

8. Problema: Confeccionar una tabla que muestre la facturación de los

Contenido de la cabecera de la página (<title>)

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

9. Problema: Confeccionar dos páginas que inicialicen el elemento title.

Contenido de la cabecera de la página (<meta>)

Un elemento que no se visualiza es el meta, que tiene por objetivo especificar

<meta name="nombre de la propiedad" content="valor de la

Name almacena el nombre de la propiedad y content el valor de la propiedad.

Veamos las propiedades y valores más comunes

<meta name="keywords" content="html, programación,

Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

<meta name="description" content="El objetivo de este

<meta name="author" content="Diego Rodriguez">

10. Problema:Confeccionar una página HTML. Definir el elemento title y

Comentarios dentro de una página

Un comentario es un texto que solo le interesa a la persona que desarrolló la página,

Confeccionaremos una página donde emplearemos comentarios:

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Un comentario puede abarcar varias líneas:

INSTRUCTOR ALBER DELFIN PEÑA ORTIGOZA

Sintaxis para caracteres especiales.

Posiblemente hasta ahora no se ha preguntado cómo disponer dentro de una página

Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo

10+x*y < 12*z

12. Problema: Mostrar la siguiente ecuación:

10+xy < 12z