Diario de clase TIyC 4º de ESO: febrero 2018

20 de febrero de 2018

Poner una imagen de fondo

Supongamos que queremos poner una imagen de fondo a un título
Queremos poner una imagen de fondo a un título:

Con CSS es fácil usando background-image:url('url_de_la_imagen');
El problema al usar una herramienta como Blogger es que no es fácil conocer de antemano la dirección (URL) de la imagen que queremos usar de fondo.
Pasos a seguir:

Románico

12 de febrero de 2018

Recursos online para el diseño de páginas web

Una colección de enlaces de sitios que nos pueden facilitar el diseño de páginas web.OJO: para Bachillerato

Colores

Modelo de caja (box model)

Para generar mapas de enlaces en imágenes (imagemap)

Generador de tablas

Editores online

Fuentes

https://fonts.google.com/

Tablas

Para crear una tabla sencilla tenemos que usar como mínimo tres etiquetas:

<table></table> para crear la tabla.
<tr></tr> para crear una fila. Va anidada dentro de <table>. Una tabla puede tener muchas filas
<td></td> para crear una celda, una casilla dentro de una fila. Una fila puede tener muchas celdas.

Si queremos, podemos usar <th> en vez de <td> para las celdas que pertenezcan a la cabecera.

ejemplo del código de una tabla de 3 filas con 4 celdas cada una

<table>
  <tr>
     <td>Primavera</td>
     <td>Verano</td>
     <td>Otoño</td>
     <td>Invierno</td>
  </tr>
  <tr>
     <td>Spring</td>
     <td>Summer</td>
     <td>Autumn</td>
     <td>Winter</td>
  </tr>
  <tr>
     <td>Frühling</td>
     <td>Sommer</td>
     <td>Herbst</td>
     <td>Winter</td>
  </tr>
<table>

Aquí podemos ver el resultado:

Primavera	Verano	Otoño	Invierno
Spring	Summer	Autumn	Winter
Frühling	Sommer	Herbst	Winter

Podemos observar que no "dibuja" la tabla, para mejorar su aspecto debemos usar CSS.
Aquí tenemos la misma tabla con un poco de CSS para mejorar su aspecto:

Primavera	Verano	Otoño	Invierno
Spring	Summer	Autumn	Winter
Frühling	Sommer	Herbst	Winter

Aquí vemos el CSS que tenemos que añadir a cada celda de la tabla:

<table>
  <tr>
     <td style="border: 1px solid green; width: 120px;">Primavera</td>

7 de febrero de 2018

Cuidado al copiar y pegar

Hay veces que preparamos nuestra entrada en casa y luego venimos al aula y la copiamos y pegamos como entrada nueva en blogger. Esto no es problema, pero debemos tener en cuenta evitar escribir nuestra entrada en un procesador de textos.
Si lo hacemos, observad el código HTML de lo pegado y veréis todo lo que incrusta en nuestra entrada.
Para evitarlo es mejor preparar las entradas con un editor de textos en vez de con un procesador de textos.
Esto es especialmente problemático si lo copiado y pegado contiene imágenes.
El hacerlo también hará que la entrada no se vea en condiciones, respetando el tema elegido.

Editores de textos

gedit
bloc de notas de windows

Procesadores de textos

Microsoft Word
LibreOffice Writer

5 de febrero de 2018

CSS

¿Qué es CSS3?

Es un lenguaje con el cual le indicamos el estilo con el que se deben mostrar los distintos elementos HTML. CSS significa Cascading style sheets (hojas de estilo en cascada).

¿Dónde se usa?

El CSS se puede usar de 3 modos distintos:

En un archivo separado con extensión .css. Esta opción no es viable directamente con blogger. Lo que sí se puede, es añadir nuestras órdenes css a la plantilla que usemos, pero eso lo veremos más adelante.
En la cabecera (<head></head>) de un documento HTML añadimos la etiqueta <style></style> y dentro de ella escribimos las órdenes. Esta opción no la podemos usar en blogger ya que no tenemos acceso a la cabecera del documento.
Directamente dentro de la etiqueta usando el atributo style="" e insertando dentro de las comillas las órdenes separadas por punto y coma (;).

Formato

Si el CSS se usa en un archivo o en la cabecera de un documento, el formato es el siguiente:
selector {propiedad:valor; propiedad2:valor2;...}

Si lo usamos directamente dentro de una etiqueta usando el atributo style;
style="propiedad:valor; propiedad2:valor2;..."

Primeras propiedades

propiedad	función
color	para cambiar el color del texto
background-color	para cambiar el color de fondo
border	para cambiar el borde
width	para indicar el ancho
height	para indicar el alto

Ejemplo: cambiamos color de texto, color de fondo y borde

ejemplo de uso de css

<h3 style="color:red; background-color:lightblue; border:2px solid green;">ejemplo de uso de css
</h3>

colores

<h4><span style="background-color: purple; border: 10px dotted fuchsia; color: yellow; text-align: center;">colores
</span></h4>

Ahora una línea separadora con estilo:

Los colores se pueden indicar mediante su código en hexadecimal pero también se pueden usar muchos colores predefinidos mediante su nombre.
Buscando encontrarás muchos sitios web que te permiten seleccionar colores y averiguar su código y que también proporcionan sus nombres. Aquí tienes dos sitios adecuados para ello:

Unidades de medida

Existen muchas unidades de medida distintas (em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax).
Nosotros usaremos px (pixels) o %(porcentaje).