Listas, Tablas y algo más

1. Listas

Las listas pueden ser ordenadas y no ordenadas:

<ol></ol>Para crear listas ordenadas, quiere decir que van numeradas
<ul></ul>Para crear listas no ordenadas o sea sin numeración, pero con viñetas
<li></li>Estas van rodeando cada elemento de la lista

Podemos hacer una lista entre otra lista, siempre teniendo en cuenta que la última lista que empezamos sea la primera que se cierra. Ejemplo:

    <h2>Integrantes de las danzas</h2>
    <ul>
        <li>Niños</li>
            <ol>
                <li>Manuel</li>
                <li>Jaiver</li>
                <li>Sebastian</li>
            </ol>
        <li>Niñas</li>
            <ol>
                 <li>Vanesa</li>
                 <li>Daniela</li>
                 <li>Sarita</li>
            </ol>
</ul>
 Integrantes de las danzas
  • Niños
    1. Manuel
    2. Jaiver
    3. Sebastian
    4. Niñas
      1. Vanesa
      2. Daniela
      3. Sarita
    5. Niñas
      1. Vanesa
      2. Daniela
      3. Sarita
      4. Niñas
        1. Vanesa
        2. Daniela
        3. Sarita

1.2 Listas definidas

Se utiliza para hacer listas de términos con sus respectivas definiciónes
<dl> viene de definition list
<dt> viene de definition term
<dd> viene de definition description

<dl>
     <dt>Título </dt>
         <dd> Argumento </dd>
</dl>

C++
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.
Java
Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.
JavaScript
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.

2. Tablas

Una tabla es un grupo de información ordenada en filas y columnas. La primera etiqueta que usaremos es:

<table></table> para crear tablas

Para colocar un título fuera de la tabla, pero relacionada con ella se utiliza <caption></caption> después de la etiqueta <table>

Una tabla se divide en encabezado y cuerpo.

2.1. Encabezado de la tabla

El encabezado nos ayuda a darle estilo a nuestra tabla, es donde van los títulos.

<thead></thead> Es el encabezado de tabla (del inglés table head). Contiene los títulos de la tabla.
<th></th> Son las celdas en el encabezado de una tabla y en cada una de las celdas puede ir un titulo
colspan Es un atributo que se utiliza con la etiqueta <th> y <td> para que un título en la parte superior de la tabla que por defecto ocupa 1 columna, cubra la cantidad de columnas que necesitemos en la tabla. Debemos decirle cuantas columnas debe ocupar. Ejemplo:

<th colspan="3"></th> Ocupara el espacio de tres columnas

<th rowspan="3"></th> Ocupara el espacio de tres filas

2.2. Cuerpo de la tabla

<tbody></tbody> Cuerpo de tabla (del inglés table body). Contiene los datos tabulares de la tabla.
<tr></tr> Para crear una fila de la tabla
<td></td>Es una celda con uno de los datos de la tabla.

Para crear columnas en cada fila se incluye una celda por cada columna.

Un ejemplo de una tabla con dos imagenes, y dos textos, una imagen y un texto con enlace:

Como se escribe Asi se ve en la página
<table>
      <head>
           <th colspan="2">Asi se ve en la página</th>
      </thead>
      <tbody>
           <tr>
                <td><a href="http://www.codecademy.com/?locale_code=es"><img src=" http://xurl.es/1q5qj"></img src=""></ag&t</td>
<td><p>Paisajes</p></td>
           </tr>
           <tr>
                <td><img src="http://xurl.es/qwa17"></img></td> <td><a href="http://www.codecademy.com/?locale_code=es"><p>Aprende HTML</p> </a></td>            </tr
      </tbody>
</table>

Paisajes

Aprende HTML

3. Propiedad border

Es el espacio que hay entre nuestro elemento y los elementos adyacentes.
Para demarcar los bordes de la tabla en HTML se pone como valor del atributo style seguido de igual(=) a uno o varios valores entre las comillas (" ") separados por espacios

El border se da en pixeles(#px)

Valor del atributo Style
↓
<table style="border:1px solid blue;" >
↑ ↑↑↑
etiquetaatributopropiedad cssvalor de la propiedad border

Los bordes se pueden definir uno por uno o los cuatro a la vez; cuando definimos uno a uno se empieza por el borde superior(top), luego el borde derecho(right), despues el borde inferior(botton) y por ultimo el borde izquierdo(left) separados por un espacio entre si.

derecha izquierda
↓ ↓
< table style= "border: 3px 4px 3px 5px;">
↑↑
superiorinferior

Algunos de los valores de border son:

collapsable Une los bordes de las celdas adyacentes
color Color
none: No se muestra ningún borde.
hidden: Visualmente es igual a none, pero para el navegador es diferente a la hora de asociarlos con los bordes adyacentes.
dotted: Borde punteado, es un borde formado por una serie de puntos separados por espacios.
dashed: Borde discontinuo, formado por una serie de pequeñas líneas separadas por espacios.
solid: Borde continuo, formado por una línea continua.
double: Borde doble, formado por dos líneas cotinuas.
groove: Borde hundido, que visualmente parece que está por debajo del nivel de la superficie de la pantalla.
ridge: Borde saliente, que visualmente parece que está por encima del nivel de la superficie de la pantalla.
inset: Borde hundido, que provoca que el elmento que encierra parezca que está por debajo del nivel de la superficie de la pantalla.
outset: Borde saliente, que provoca que el elemento que encierra parezca que está por encima del nivel de la superficie de la pantalla.
inherit: Que hereda del elemento padre
collapse
border-radius: Esta propiedad modifica las esquinas de los objetos de HTML, si colocamos al 100% quedara redondo.

En Css para hacer un borde de 2 píxeles de ancho, sólido, y de color rojo, es asi:

selector {
     border: valor valor valor;
} 		selector {
     border: 2px solid red;
}

También podemos colocar 2 valores para los cuatro lados, el primer valor es para top y botton y el segundo para right y left,

4. Etiquetas autocerradas

Las etiquetas de autocerrado son las etiquetas que no admiten contenido. Algunas de ellas son:

<br />Se utiliza para crear un salto de línea. Pasa al otro renglon
<meta />Indica el tipo de codificacion que estamos utilizando
<img />Se utiliza para insertar una imagen
<link />Se utiliza para enlazar un archivo HTML con otros archivos
<hr />Representa una línea horizontal para separar diferentes secciones de un documento
<input />Se utiliza para el ingreso de datos del usuario.

5. Bibliografía