EL PAÍS

HOMBRE SALTA POR UNA VENTANA, CREYENDO QUE ES UNA MARIPOSA

Las etiquetas de titulos son una H y un numero, que indica la jerarquía. Tienen etiqueta de inicio y de fin

Es de mal estilo no seguir la jerarquía. Debajo del nivel 1 va el 2 u otro 1, por ej.

El título anterior es de jerarquía dos, segundo nivel

Título nivel 3

Título nivel 4

Título nivel 5

Párrafos y texto preformateado

Los párrafos van con la etiqueta p. de inicio y fin.

El texto preformateado es un texto que va a aparecer tal cual lo escribo. La etiqueta es pre, de inicio y fin.

Este texto
        está
        escrito
        en 
        varias
        líneas
        preformateadas

Este texto está escrito en varias líneas con párrafo

Listas

Las listas tienen etiqueta de lista de inicio y fin, y entremedias, los elementos de la lista o list itemas (li)

Listas NO ordenadas

Son listas con viñetas o imágenes. La etiqueta de inicio y fin es ul (unordered list)

Los elementos de la lista no ordenada van entre elementos li

• Patatas
• Coles
• Zanahorias

Las listas se pueden concatenar:

• Hortalizas:
  • Patatas
  • Coles
  • Zanahorias
• Frutas
• Legumbres

Listas ordenadas

Son listas con números o letras. La etiqueta de inicio y fin es ol (ordered list)

Los elementos de la lista ordenada van entre elementos li

1. Patatas
2. Coles
3. Zanahorias

Las listas se pueden concatenar:

1. Hortalizas:
   1. Patatas
   2. Coles
   3. Zanahorias
   4. Boniatos
2. Frutas
3. Legumbres

Listas de definición

La etiqueta de inicio y fin es dl (definition list)

Hay dos elementos en las lista de definición:

• dt: definition term
• dd: definition term

Patatas

Tubérculo blanquecino

Coles

Especie de lechuga blanquecina

Zanahorias

Tubérculo naranja rico en caroteno

Imágenes

Las imágenes SOLO tienes etiqueta de inicio, img, pero siempre llevan parámetros. Aay varios parámetros obligatorios:

• src: indica donde está almacenada la imagen(source)
• alt: todas las imágenes tienen que tener un texto alternativo para la gente que no ve.
• height: altura de la imágen(px)
• width: anchura de la imágen(px)

Hiperenlaces

Los enlaces utilizan la etuqeta a. Tienen etiqueta de inicio y fin, y siempre enlazan desde algún sitio:palabra, iamgen...

Enlace a otra página web

Se enlaza una URL o una dirección relativa en tu sitio web. Por defecto los enlaces se muestran en azulón y subrayados

Página externa --> URL

Voy a enlazar la página de Googledesde una palabra.

Voy a enlazar la página de desde una palabra.

Documento interno

Voy a enlazar el documentnto de Historia de barbiedesde una palabra.

Mapa de imágenes

Se trata de hacer hiperenlaces en partes de una imagen. Previamente hay quer hacer el "mapa de imágenes" , hacer formas sobre la imágen que es desde donde se van a hacer los hiperenlaces

La etiqueta para el mapa de imágenes es map. Hay etiqueta de inicio y de finTiene un atributo que es name.

Entre las etiquetas de inicio y fin de map estableces las areas, con la etiqueta área. Tiene atributos precidos a los hiperencales y a la imágen. El atributo más impotante es shape, que indica la forma. Tambien hay que espicificar las coordenadas.Y los atributos alt y herf.

Existe tambien un atributo para indicar que en iuna imagen quiero usar un maopa de imágenes. Es el atributo usemap. Se usa con el nombre de mapa dentro de la etiqueta img: usemap=#NombreMapa

Enlace a un correo

Com un hiperenlace podemos enviar un correo. las diferencia está en que en el href podemos mailto:

Tablas

Las tablas tienen 2 tipos de etiquetas obligatorias:

• Etiqueta de inicio y fin de tabla, table
• Etiqueta de inicio y de fin de celda, TD (tABLE DATA)
• Etiqueta de inicio y de fin de fila, TR(table Row)

Las tablas se dibujan por filas y solo puede haber contenido dentro de las celdas

Todas las filas tienen que tener el mismo número de celdas, pero se pueden combinar celdas de filas y de columnas

La tabla sela sin bordes si no se los escribes

A1	B1	C1
A2	B2	C2

Por defecto las tablas se dibujan sin bordes. Para que salgan bordes lo tienes que poner en la hoja de estilos. Vamos a crear una clase, tabla1, en la hoja de estilos (las clases empiezan con un punto), y se nombrann como un parámetro de table en la página web.

Unión de celdas en una tabla

Al igual que en excel o calc, se pueden unir varias celdas en una. Podemos unir varias celdas de una misma fila (fácil), o, unir varias celdas de la misma columna (mas difícil y más fácil equivocarse. Hay que eliminar las celdas que sobran.

La unión de celdas se hace con un parámetro dentro de la etiqueta de celda, TD.

Unión de celdas de la misma fila, colspan

El parámetro colspan indica que hay varias celdas unidas en una fila, lo que implica que una celda engloba varias columnas. Por ej. colspan=2 indica que hay dos celdas unidas. Vamos a probar con nuestra tabla.

A1		C1
A2	B2	C2

Vamos a probar englobando las tres primeras celdas:

A1
A2	B2	C2

Unión de celdas de la misma columna, rowspan

El parámetro rowspan indica que hay varias celdas unidas en una columna, lo que implica que una celda engloba varias filas. Por ej. rowspan=2 indica que hay dos celdas unidas. Vamos a probar con nuestra tabla.

A1	B1	C1
	B2	C2

Ejemplo mixto

Ahora haced una tabla de 4 columnas y 6 filas. Las 4 celdas de la primera fila tienen que estar unidas. Y las celdas segunda a sexta de la primera columna tienen que estar unidas.

A1
A2	B2	C2	D2
	B3	C3	D3
	B4	C4	D4
	B5	C5	D5
	B6	C6	D6