Una cabecera para el blog

Cada alumno y alumna tendrá que diseñar su propia cabecera e insertarla en una entrada además de ponerla en el blog como cabecera.

Aquí unos cuantos ejemplos:

Estos ejemplos están basados en ejercicios de retoque fotográfico:

ejemplo de tabla

uno	dos	tres	cuatro	dfdfsad
dfdfsad	dfdfsad	dfdfsad	dfdfsad	dfdfsad
dfdfsad	dfdfsad	dfdfsad	dfdfsad	dfdfsad

fin

Tablas

En algunas ocasiones necesitamos tablas para mostrar la información organizada.
Para crear una tabla necesitamos la etiqueta <table></table> para crear la tabla. La tabla tiene filas <tr></tr> y cada fila tiene celdas <td></td>. Al crear una tabla vemos que Blogger añade una etiqueta <tbody></tbody>, la dejaremos, pero no le daremos más importancia. Si se quiere también se puede usar etiquetas <th></th> para aquellas celdas que pertenezcan a la cabecera de la tabla.
Cuando escribimos la tabla con HTML no se ve bien, no se ven las líneas, debemos añadir un poco de CSS para que se vea. Ya sabemos añadir css dentro de una etiqueta HTML, pero en esta ocasión lo haremos  añadiendo al tema de nuestro blog órdenes CSS directamente. La ventaja es que sólo tenemos que indicar la orden una única vez en vez de tener que añadir la misma orden para cada una de las celdas de la tabla

los números en
castellano	inglés	francés
uno	one	un
dos	two	deux
tres	three	trois
cuatro	four	quatre
cinco	five	cinq
seis	six	six
siete	seven	sept
ocho	eight	huit
nueve	nine	neuf
diez	ten	dix

El código para crear la tabla anterior sería:

<table style="border-collapse: collapse; margin-left: 10%; width: 60%;"> 
<tbody> 
<tr>   <th colspan="3">los números en </th> 
</tr> <tr> 
  <th>castellano</th> 
  <th>inglés</th> 
  <th>francés</th> 
</tr> 
<tr> 
  <td>uno </td> 
  <td>one </td> 
  <td>un </td> 
</tr> 
<tr> 
  <td>diez</td> 
  <td>ten</td> 
  <td>dix</td> 
</tr> 
</tbody>
</table>

Para añadir CSS en el tema: vamos a editar el tema, seleccionaos 'avanzado' y vamos a 'añadir CSS'. En mi ejemplo he añadido lo siguiente:

th {
   background-color:orange;
   color: gray;
   border: 2px solid gray;
}
td {
   border: 2px solid orange;

}

CSS, 2ª parte

Hoy veremos algunas cuestiones diversas sobre CSS:

Unidades

Se pueden indicar valores de muchas formas (cm, mm, in, px, pt, pc, em, ex, ch, rem, vw, vh, vmin, vmax, %), nosotros usaremos en este curso px (pixels) y % (porcentaje con respecto al contenedor).

Width y height

nos sirven para indicar el tamaño de algo
En el siguiente encabezado hemos añadido el siguiente código:
style="background-color: #eed490; height: 30px; text-align: center; width: 200px;"
queda

ejemplo

Border

Con CSS podemos añadir un borde a distintos elementos. Existen muchas órdenes para indicar ancho (border-width), color (border-color), estilo (border-style), etc. Nosotros usamos una versión compacta con la que le indicamos las tres propiedades básicas.
Ejemplo: a la imagen le hemos añadido un borde:
style="border: 3px solid darkgreen;"


Otros ejemplos de bordes: solid dashed dotted double groove ridge

Colores

Podemos indicar el color de fondo con background-color, el color de un borde con border-color, el color de texto con color. Ya hemos visto ejemplos y casi siempre hemos usado un nombre de color.
Buscando en internet "nombre colores CSS" encontrarás muchas páginas en las que se puede consultar los 140 nombres de colores que existen, como por ejemplo en esta.

Otra forma de indicar un color es mediante su código en hexadecimal, para ello podemos usar GIMP o cualquier otra herramienta. Existen herramietas online que también permiten seleccionar los códigos de colores, para ello buscad en internet "css color picker".

Margin y Padding

Margin sirve para añadir márgenes entre un elemento y lo que lo rodea. Margin es es espacio que queremos que haya entre el borde y lo que lo rodea y padding es el espacio entre el borde y el contenido. En la imagen anterior hemos dejado espacio entre el borde y la imagen utilizando padding.