Párrafos

Comenzamos la estructuración de contenidos viendo las etiquetas del lenguaje HTML que permiten crear párrafos, saltos de líneas, etc.

Etiqueta Significado
<p> </p> Define un bloque de texto introduciendo un doble salto de línea
<br /> Introduce un salto de línea
<pre></pre> Reproduce el texto tal y como éste se ha introducido en el documento
<hr /> Introduce una regla o línea de texto

 

Atributos para <hr />

color

align=left|right|center

size=núm

width=núm |"núm%"

Listas

 

Podemos crear tres tipos de listas:
 

Listas

 

ETIQUETAS PARA LISTAS

 

Etiqueta Atributo Valor Significado
<ul></ul> type circle, square, disc Crea una lista desordenada
<ol></ol> type 1, A, a, I, i Crea una lista ordenada con número, letras, n. romanos
  start Número Indica con que número o letra comienza la lista

EJEMPLOS

LISTAS ORDENADAS  RESULTADO LISTAS DESORDENADAS   RESULTADO

<ol type="1">

  <li>Rojo</li>

  <li>Amarillo</li>  

  <li>Azul</li>

</ol>

1. Rojo

2. Amarillo

3. Azul

<ul type="circle">

  <li>Rojo</li>

  <li>Amarillo</li>

  <li>Azul</li>

</ul>
• Rojo
• Amarillo
• Azul

<ol  type="A" start=5>

  <li>Rojo</li>

  <li>Amarillo</li> 

  <li>Azul</li>

</ol>

 

E. Rojo

F. Amarillo

G. Azul
   

 

LISTAS DE DEFINICIÓN

Las listas de definición permiten representar términos (palabras) y sus significados (definiciones), mediante las etiquetas <dl> y </dl>.
Cada elemento de la lista tiene una parte que es el término que comienza con la etiqueta <dt> y una parte que es el significado que comienza con <dd>.
 

EJEMPLO

 
 
LISTA DE DEFINICIÓN  RESULTADO

<dl>

<dt>Rojo</dt>

     <dd> color primario que empieza con R</dd>

<dt>amarillo</dt>

<dd>color primario que empieza con A</dd>

</dl>

 

Rojo

       color primario que empieza con R

Amarillo

       color primario que empieza con A
 

ACTIVIDADES

Realizaremos algunas actividades sobre listas para afianzar lo expuesto: click aquí

Tablas

Las tablas suponen una de las estructura más improtantes para la presentación de contenido.

Están formadas por un conjunto de celdas, distribuidas en filas y columnas.

Ejemplo

Ejemplo de Tabla

 

Estructura Básica

<table> Aquí se inicia la tabla

<tr> Esta etiqueta indica el inicio de una fila    

<td> Entre estas etiquetas irá el contenido de la primera celda </td>
<td> Y aquí el de la segunda</td>


</tr> Esta indica el fin de la primera fila. A continuación empezaría la siguiente fila con una nueva etiqueta

<tr> y las correspondientes a las celdas hasta el cierre de la nueva fila con </tr>


</table> Sería la etiqueta de cierre de la tabla

 

 

Actividad guiada

Para realizar este ejercicio puedes utilizar Dreamweaver tanto en modo diseño como en modo de código.

Tabla1) Creamos una página nueva e insertamos en él una tabla con 3 filas y 5 columnas.

  • Como aún no tiene datos nuestra flamante tabla presentará un aspecto bastante "esquelético".
  • Vamos ahora rellenando las celdas con la información pertinente. En la zona superior colocaremos los identificadores de LMSGI, GBD, PAR, ISO,FH y en la izquierda los correspondientes a los grupos 1º ASIR 2014 y 1º ASIR 2015. Inventamos unos datos del numero de aprobados en cada módulo.
  • Guardamos el trabajo como tabla1.html y comprobamos los resultados en el navegador.

 

Propiedades de la Tabla

 PROPIEDAD SIGNIFICADO
align Alinea horizontalmente la tabla con   respecto a su entorno.
background Nos permite colocar un fondo para la   tabla a partir de un enlace a una imagen.
bgcolor Da color de fondo a la tabla.
border Define el número de píxel del borde   principal.
bordercolor Define el color del borde.
cellpadding Define, en píxel, el espacio entre   los bordes de la celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes   (en píxel).
height Define la altura de la tabla en píxel   o porcentaje.
width Define la anchura de la tabla en   píxel o porcentaje.

 

Atributos de la Celda y Fila

ATRIBUTO SIGNIFICADO
align Justifica el texto de la celda del   mismo modo que si fuese el de un párrafo
valign Podemos elegir si queremos que el   texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la   celda
bgcolor Da color a la celda o línea elegida
bordercolor Define el color del borde
background Nos permite colocar un fondo para la   celda a partir de un enlace a una imagen
height Define la altura de la celda en píxel   o porcentaje
width Define la anchura de la celda en   píxel o porcentaje

 

 Atributos para unir celdas horizontalmente o verticalmente

colspan Expande una celda horizontalmente
rowspan   Expande una celda verticalmente

Ejemplo

<td colspan="3"></td>  abarca tres columnas

<td rowspan="2"></td>  abarca dos filas

 

Actividad guiada

Tabla2)   Partiendo de la tabla creada en la actividad tabla1, añadiremos una fila por encima para agrupar los datos en Módulos Teóricos y Modulos Prácticos.

  • Abre el archivo tabla1.html si lo habías cerrado.
  • Pulsa con el botón derecho sobre cualquier celda de la primera fila y elige tabla insertar fila superior.
  • Comprobarás que la fila se ha insertado por encima de la celda en la que nos encontrábamos.
  • Sitúate ahora en la celda que se encuentra encima de la que contiene la referencia al curso 1º y, pulsando y arrastrando haz que queden marcadas esa celda y la que se encuentra a su derecha.
  • Pulsa el botón derecho y elige combinar celdas seleccionadas.
  • Repite la operación con la celda situada encima de la referencia a 3º.
  • Rellena las celdas superiores con el texto Módulos Teóricos y Módulos Prácticos respectivamente.
  • Guarda el trabajo como tabla2.html y comprueba los resultados en el navegador.

 

Tablas anidadas

El lenguaje HTML permite insetar tablas dentro de otra tabla

 

Prueba de tabla anidada
Mes Gastos
Octubre 1000

<table style="background-color: #5bc0de;" border="1" cellspacing="3" cellpadding="5">
<tbody>
<tr>
<td><span style="color: #ffffff;"><strong>Prueba de tabla anidada</strong></span></td>
<td>

<table style="background-color: #62c462;" border="1" cellpadding="5">

<tbody>

<tr>

<td><span style="color: #ffffff;"><strong>Mes</strong></span></td>

<td><span style="color: #ffffff;"><strong>Gastos</strong></span></td>

</tr>

<tr>

<td><span style="color: #ffffff;">Octubre</span></td>

<td><span style="color: #ffffff;">1000</span></td>

</tr>

</tbody>

</table>

</td>
</tr>
</tbody>
</table> 

 

Actividades: Realizar las actividades sobre tablas tabla3 a tabla7

 

Para saber más

Otros atributos

summary (resumen del contenido de la tabla para sistemas acústicos)
Frame (marco) a qué lados de la tabla deben ser añadidos bordes 
Rules (reglas) permite especificar en la etiqueta de apertura <table> las líneas horizontales o reglas para las líneas de la cuadrícula
 

frame

•frame="void" ( void = nada )
•frame="above" ( above = superior )
•frame="below" ( below = inferior )
•frame="hsides" ( horizontal sides = lados horizontales )
•frame="vsides" (vertical sides = lados verticales )
•frame="lhs" (left hand side = lado izquierdo )
•frame="rhs" ( right hand side = lado derecho )
 

rules

1.rules="none" ( none = ningún ) no son visualizadas las líneas de la cuadrícula, el borde exterior de la tabla es sin embargo visualizado.
2.rules="rows" ( rows = filas ) son visualizadas las líneas entre todos las filas de la tabla, pero no las líneas entre las columnas de la tabla.
3.rules="cols" ( cols = columnas ) son visualizadas todas las líneas entre todas las columnas de la tabla, sin embargo no las líneas entre las filas.
4.rules="groups" ( groups = grupos ) son visualizadas todas las líneas entre la cabeza, cuerpo y pie de una tabla

rules="all" ( all = todo ) son visualizadas todas las líneas entre todas las celdas de la tabla. Es el valor preajustado por lo que equivale a no utilizar este atributo.

 

Estructura avanzada de Tabla

Tabla avanzada