2017. Diario de clase TIyC 4º de ESO: febrero 2017

jueves, 23 de febrero de 2017

Crear una tabla

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

Estrucura de un documento HTML

Los sitios que nos facilitan la creación, pero también nos ocultan la estructura básica de una página.

A continuación tenéis un modelo sencillo en el que se puede ver que consta de dos partes:

cabecera (head)
cuerpo (body)

La cabecera contiene elementos no visibles. En el ejemplo vemos que tiene indicaciones como la codificación de caracteres, el título, y otras más que no aparecen en el ejemplo.
Blogger no nos permite acceder a la cabecera de una página.
El cuerpo (body) contiene todos los elementos visibles de la página y los muestra dentro de la ventana del navegador.

Esta es la estructura básica de una página web:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
</head>

<body>

   <!-- esto es un comentario
        que no se verá en la página --> 
        <h1>Esto es un encabezado</h1>
        <p>La increíble y triste historia de la cándida 
        Eréndira y de su abuela desalmada</p>
</body>
</html>

---

miércoles, 15 de febrero de 2017

CSS. Primeras pruebas

¿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 Cascadind 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

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).

Bloques

En HTML hay elementos que se comportan como un bloque. Pueden ocupar todo el ancho disponible y empiezan y terminan con un salto de línea.
Ejemplos son los encabezamientos, los párrafos, etc.

Otros elementos no se comportan como bloques, por ejemplo etiquetas como <b>, <i>, <u>, imágenes, enlaces, ...

La etiqueta <div></div> me permite definir un bloque y dentro de el meter lo que quiera.
La etiqueta <span></span> me permite meter dentro elementos, pero no se comporta como bloque, se usa dentro de una línea.

Nosotros lo usaremos para aplicar después estilos.

En la siguiente entrada veremos ya ejemplos de CSS.

Atributos que usaremos

class="nombre". Con class puedo decir que un elemento es de una clase determinada. Pueden existir distintos elementos de la misma clase.

id="identificador". Con id puedo dar un nombre único a un elemento.

style="....". Permite aplicar estilo directamente con instrucciones CSS.

Ejemplos

Los atributos class e id los veremos dentro de poco cuando nos hagan falta.

viernes, 10 de febrero de 2017

Enlaces

La etiqueta que se utiliza para hacer un enlace es <a></a>
Se utilizan como mínimo el atributo src para indicar la URL del recurso enlazado.
Atributos utilizados:

src, para indicar la URL del recurso enlazado.
target, para indicar si queremos que se abra en la misma ventana o en otra.

Se pueden hacer enlaces dentro de la misma página, pero no lo vamos a ver. Como ejemplo podéis ver cualquier artículo de la Wikipedia, suelen tener un índice de contenidos al comienzo del artículo.

Ejemplo: enlace a mis fotos en Flickr:

con href indicamos la URL y target="_blank" indica que al pulsar el enlace se debe abrir en una ventana o pestaña nueva.
<a href="https://www.flickr.com/photos/teclasorg/" target="_blank">mis fotos en Flickr</a>

mis fotos en Flickr

Un ejemplo más complicado

Una opción avanzada es el uso de Iframes.
Un iframe es un marco dentro de una página, un "espacio" en el que queremos que se abran algunos de nuestros enlaces
Las siguientes imágenes tienen un enlace a una foto igual pero del mismo tamaño y le decimos que se abran en el iframe.

código de los enlaces:

código del iframe

jueves, 9 de febrero de 2017

Insertar imágenes

Para insertar imágenes se utiliza la etiqueta <img> y como mínimo se añade el atributo src para indicar la URL de la imagen a mostrar.
Usaremos los siguientes atributos:

src, para indicar la URL de la imagen a mostrar.
title, para que aparezca un texto cuando pasemos el ratón por encima.
style, para aplicar estilo, ya veremos.
alt, para que muestre un texto alternativo en caso de que no cargue la imagen o en caso de que tarde demasiado en cargar.
width y height, para indicar ancho y alto, aunque lo mejor es usar CSS.

La siguente imagen la he insertado con el icono del editor de Blogger:

ejemplo buganvilla:

ejemplo Mercedes:

martes, 7 de febrero de 2017

Repaso e introducción a CSS

Repasamos etiquetas que ya conocemos

h1..h6
hr
ol, ul, li

Nuevas etiquetas

<p> párrafo. Mira el código HTML de esta línea

Esto es un párrafo que he escrito con el editor HTML ya que en el editor de Blogger no existe opción para usarla. Lo he escrito en HTML y luego he mostrado el editor. Al volver al modo HTML veo que Blogger quita las etiquetas de los párrafos. Es por ello que para aplicar estilo al texto usa la etiqueta <span>

Primeras prubas con CSS

Para usar CSS en principio usaremos el atributo style.
Mira el código del siguiente ejemplo

Haz tu lo mismo.

pon un borde de color rojo a este título

Resumen de lo visto hoy

repasamos las etiquetas que ya conocemos.
etiqueta <p>.
vemos como se codifica <p> (<p>).
cambiamos el color a un texto y vemos lo genera.
uso style para cambiar el color del separador.
uso style para cambiar el borde de un título.

jueves, 2 de febrero de 2017

Ejemplo HTML

02/02/2017 mando ejercicio una lista dentro de otra lista:

Les pido que busquen en internet la etiqueta html para una línea horizontal

31/1/2017 Comento opciones para formatear y decorar el texto y les hablo de HTML y CSS, sin entrar en materia. Muestro botones 'Redactar' y 'HTML'.

Les muestro el código y como ejemplo inserto la etiqueta hr con estilo, color rojo.

Les hago una pequeña lista usando el icono del editor y después cambio la etiqueta ul por ol para que vean el cambio.

Primavera
Verano
Otoño
Invierno

Durante esta clase lo que se pretende es mostrar la utilidad de aprender algo de HTML y CSS ya que el editor de Blogger o de otras herramientas de publicación 'en-línea' son limitados.

Estadísticas

Vemos el apartado de 'Estadísticas' y vemos también cómo hacer para que no cuente nuestras propias entradas, aunque tenemos sospechas que no es muy eficaz.

Algunos alumnos se interesan por añadir un contador externo: flag counter.