Listas en html

1. LISTAS
 En ocasiones es necesario presentar
información de manera ordenada mediante
listas con viñetas o listas numeradas. Con
HTML se pueden crear tres de estos tipos de
listados: listas ordenadas o numeradas,
listas con viñetas o listas de definición, cada
una de ellas con sus variaciones.

2. LISTA ORDENADA <OL>
<OL TYPE ="1" START ="4">
<LI>Dirección de Informática
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
I

3.  En la etiqueta <OL>, el atributo TYPE ="1"
indica que la lista será Numérica (el número
entre comillas puede ser cualquier entero y el
resultado será el mismo), mientras que el
atributo START ="4" hace que el primer
elemento del listado esté precedido por el
número 4, el segundo por el número 5 y así
sucesivamente. Sí no se incluye ninguno de los
dos atributos anteriores, el explorador
desplegará la misma lista pero comenzando el
listado en 1.

4. <OL TYPE = "A" START ="1">
<LI>Dirección de Informática
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
Esta etiqueta hace la lista ordenada pero con
parte LITERAL, es decir, a, b, c, ….

5. LISTA CON VIÑETAS <UL>
<UL TYPE = "circle">
<LI> Ítem 1
<LI> Ítem 2
<LI> Ítem 3
<LI> Ítem 4
</UL>
Las otras dos opciones de TYPE son square y
disc.

6. LISTA DE DEFINICIÓN <DL>
Esta etiqueta como su nombre lo indica,
permite desplegar listas de palabras con su
correspondiente definición. Se utiliza
típicamente en la construcción de glosarios.
Considere por ejemplo, la siguiente lista de
términos que definen las funciones de
algunas dependencias de la empresa:

7. PLANEACIÓN:
Encargada de ejecutar y revisar los planes de
inversión.
INFORMÁTICA:
Encargada de diseñar, implementar y ejecutar los
planes de desarrollo informático en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el
recurso humano.

8. El listado anterior se comienza y termina con
las etiquetas <DL> y </DL>. Cada uno de
los términos a definir se precede con la
etiqueta <DT>, mientras que a la definición
en sí, se le antepone la etiqueta <DD>:

9. <DL>
<DT>PLANEACIÓN:
<DD>Encargada de ejecutar y revisar los planes de
inversión.
<DT>INFORMÁTICA:
<DD>Encargada de diseñar, implementar y ejecutar los
planes de desarrollo informático
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso
humano.
</DL>

10. TABLAS
 Una tabla está compuesta por
columnas y filas que conforman un
conjunto de celdas que permiten
mostrar información de manera
organizada. En una celda se puede
incluir indistintamente texto, imágenes o
cualquier otro elemento soportado por
HTML.

11.  En la etiqueta <TABLE> se definen las
características principales de la tabla,
pero no se dice de cuántas filas y columnas
estará compuesta ni cuál será su contenido.
En realidad existen tres etiquetas
adicionales, que colocadas adecuadamente
dentro de <TABLE> y </TABLE> permiten
controlar el número de filas y columnas,
además de otras características:

12.  <TR> Se utiliza para definir una
nueva fila.
 <TD> Permite agregar una celda o
columna dentro de una fila
 <TH> Es similar a <TD>, con la
diferencia de que el texto contenido
en ella será escrito en negrilla.

13. Lo anterior significa que una tabla
en HTML tendrá tantas filas como
etiquetas <TR> contenga y una
fila estará compuesta por un
número de celdas igual al de
etiquetas <TD> o <TH> que la
misma tenga.

14.  Las siguientes líneas ilustran el uso de estas etiquetas para crear una
tabla sencilla, compuesta por dos filas y dos columnas:
<TABLE BORDER=”1”>
<TR>
<TH>Primera Celda</TH>
<TH>Segunda Celda</TH>
</TR>
<TR>
<TD>Tercera Celda</TD>
<TD>Cuarta Celda</TD>
</TR>
</TABLE>

16.  Las etiquetas <TD> y <TH> tienen entre otros,
atributos que permiten controlar: el color del
fondo de la celda (BGCOLOR=”color”), la
alineación del texto o de la imagen dentro de
la celda (ALIGN=”alineación”), y que
funcionan de manera idéntica a los utilizados
con las etiquetas <H#>, <P> y <FONT>. Otro
de los atributos importante de estas dos
etiquetas, es el que permite indicar el número
de columnas o de filas que ocupará una celda
en particular.

17.  Suponga que se debe crear una tabla similar
a la siguiente:

18.  Observe que la tabla está compuesta por dos
filas y dos columnas, y que la celda del título
ocupa dos columnas. Cuando este es el caso,
es decir que una celda está distribuida en dos o
mas columnas o filas, se utiliza para su
definición el atributo COLSPAN=”X” o
ROWSPAN=”X” respectivamente. X
obviamente corresponde al número de
columnas o filas sobre las que se distribuirá la
celda.
Para crear la tabla que se muestra arriba, se debe
escribir:

19. <TABLE BORDER=”1”>
<TR>
<TH COLSPAN=”2”>TÍTULO DE LA
TABLA</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>

20.  Y si lo que se desea es crear una tabla como
la siguiente:

21.  Se debe escribir:
<TABLE BORDER=”1”>
<TR>
<TH ROWSPAN=”2”>TÍTULO DE LA TABLA</TH>
<TD>Celda 1</TD>
</TR>
<TR>
<TD>Celda 2</TD>
</TR>
</TABLE>

23. IMAGENES
 Las páginas Web además de mostrar texto, son
capaces de desplegar imágenes que han de ser
creadas en cualquiera de los formatos
aceptados: GIF, JPG o PNG.
 Para insertar imágenes lo único que se necesita
conocer es la ruta y el nombre del archivo que
la contiene. La etiqueta <IMG> junto con su
atributo SRC ="ruta" permiten mostrar una
imagen:
 <IMG SRC ="logo.gif">

24.  La etiqueta <IMG> cuenta además de SRC
con otros atributos que controlan la
manera como se desplegarán las imágenes:
1. ALT ="Texto alternativo" Permite definir
un texto que aparecerá en caso de que la
imagen por alguna razón no pueda ser
mostrada, o cuando se desplaza elpuntero
del ratón sobre la imagen ya desplegada.

25. 2. HEIGHT = ”XX” y WIDTH = ”XX” Medida
en píxeles del alto y ancho de la imagen.
Con ellos podemos controlar además el
tamaño original de una imagen.
3. BORDER ="X" Dibuja un borde o marco
negro de x puntos alrededor de la
imagen. Si se omite este atributo,
simplemente no se dibujará ningún borde.

26. 4. ALIGN = ”Alineación de texto” Permite
especificar la alineación respecto de la
imagen de un texto que se escriba
inmediatamente después de la etiqueta
<IMG>. El texto en mención, puede
alinearse arriba, utilizando TOP como valor;
en el centro de la imagen, si utilizamos
MIDDLE y en la parte inferior de la misma, si
el valor para ALIGN es BOTTOM. Además, el
atributo ALIGN puede recibir el valor LEFT,
con lo que la imagen se colocará a la
izquierda del texto, o RIGHT, caso en el que
la imagen aparecerá a la derecha.

27. EJEMPLO
 Para comprender mejor el comportamiento
de las imágenes, copie en una carpeta
denominada Imágenes un archivo que sea
una foto o imagen y luego escriba en un
archivo HTML las líneas que a continuación
se muestran, teniendo en cuenta que
XXXXXX representa el nombre de su
archivo:

28. <IMG SRC =“XXXXXXX.gif" ALT ="Logo tamaño 180 x 180
píxeles" WIDTH = 180 ALIGN = “top” BORDER=”5”>Este texto
alineado arriba de la imagen, con borde cinco.
<P>
<IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño original"
ALIGN = “middle” BORDER=”3”>Este Texto alineado en la mitad
de la imagen con borde 3 y la muestra en su tamaño original.
<P>
<IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño 60 x 60
píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de
la
Imagen sin borde
<P>
<IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto

29. ENLACES
 Para crear hipervínculos o enlaces se utiliza
la etiqueta <A> acompañada del atributo
HREF cuyo valor en comillas dobles será el
nombre de la pagina web a la cual se
accederá al darle click.
 La sintaxis es la siguiente:
<A HREF=“pagina.html”>Click aquí</A>

30. ENLACES DENTRO DE LA MISMA PAGINA WEB
 Para crear enlaces dentro de la misma
pagina web
 La sintaxis es la siguiente:
<A name=“nombre”>se muestra el orden de
los equipos a continuacion</A> este es el
lugar al que saltará el navegador cuando
demos click al enlace.
Y este es el enlace
<A Href=“#nombre”>Tabla de posiciones </a>

31. ACTIVIDAD

32. 1 - QUE SON LAS HOJAS DE
ESTILO (CSS)?
CSS son las siglas de Cascade Style
Sheet que traducido significa hojas de
estilo en cascada.
Las hojas de estilo es una tecnología que
nos permite controlar la apariencia de una
página web. En un principio, los sitios web
se concentraban más en su contenido que
en su presentación.

33. el HTML y la Web en general.
Con CSS podemos especificar estilos
como el tamaño, fuentes, color, espaciado
entre textos y recuadros así como el lugar
donde disponer texto e imágenes en la
página.
Veremos que podemos asociar las reglas
de estilo a las marcas HTML de tres
maneras: directamente a la marca, en el
head de la página o agrupar las reglas de
estilo en un archivo independiente con
extensión *.css

34. En este periodo veremos las tres
metodologías, pero pondremos énfasis en
la tercera forma, que es la más adecuada
para separar el contenido de la página y la
forma como se debe representar la misma
por medio de la hoja de estilo.
La metodología a trabajar brinda un
concepto teórico corto, luego un problema
resuelto que invito a ejecutar, modificar y
jugar con el mismo. Por último, y lo más
importante, un ejercicio propuesto que nos
permitirá saber si podemos aplicar el
concepto.

35. EJEMPLO
<!DOCTYPE html>
<html>
<head>
<title>Prueba de hojas de estilo</title>
</head>
<body>
<p style="color:#000000;background-
color:yellow;font-family:verdana;font-
size:25px;text-align:center">Esto es un
ejemplo</p>
</body>
</html>

37. 2 - DEFINICIÓN DE ESTILOS A NIVEL
DE ELEMENTO HTML.
Es la forma más fácil pero menos recomendada
para aplicación de un estilo a un elemento
HTML. Se define en la propiedad style los estilos
a definir para dicho elemento.
Es común a veces definir estilos directamente
en los elementos HTML cuando estamos
probando diseños de elementos particulares de
la página y posteriormente trasladar el estilo
creado a una hoja de estilos.
La sintaxis para definir un estilo a un elemento
HTML es la siguiente:

38. EJEMPLO
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-
color:#ffff00"> Este mensaje es de color rojo
sobre fondo amarillo. </h1>
</body>
</html>

39. Veremos más adelante que hay muchas
propiedades en CSS. En este primer ejemplo
inicializamos las propiedades color (define el
color del texto) y background-color (define el
color de fondo del texto).
Cada vez que inicializamos una propiedad
debemos separarla de la siguiente por punto y
coma.
Cuando definimos estilos directamente en el
elemento HTML, tenemos que tener en cuenta
que el estilo se aplica únicamente a dicho
elemento donde inicializamos la propiedad style,
es decir, si tenemos dos secciones h1,
deberemos definir la propiedad style para cada
elemento:

40. <h1 style="color:#ff0000;background-
color:#ffff00"> Primer título </h1>
<h1 style="color:#ff0000;background-
color:#ffff00"> Segundo título </h1>
Como podemos observar, más allá que los dos
estilos son exactamente iguales, estamos
obligados a definirlos para cada elemento
HTML.