HTML en Las Canteras

H1 es el tíulo de mayor jerarquía

Títulos

Las etiquetas de títulos son una H y un número, que indica la jerarquía. Tienen etiqueta de inicio y de fin

El título anterior es jerarquía 2, segundo nivel

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

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 teexto 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 items (li)

Listas no ordenadas

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

Los elemtos de la lista no ordenada van entre etiquetas li.

Las listas se pueden concatenar

Listas ordenadas

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

Los elemtos de la lista ordenada van entre etiquetas 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 listas de definición.

Patatas:
Tubérculo blanquecino.
Coles:
Especie de lechugas rizadas.
Zanahorias:
Tubérculo naranjo rico en caroteno.

Imágenes

Las imágenes solo tienen etiqueta de inicio ,img, pero siempre llevan parámetros. Hay varios parámetros obligatorios

Imagen de un ornitorrinco Imagen de un armadillo
Imagen de un armadillo

Hiperenlaces

Los enlaces usan la etiqueta a. tienes etiqueta de inicio y fin, y siempre enlazan desde algún sitio:palabra, imagen...

Enlace a otra página web u otros

carta.png

Se enlaza a una URL o a una dirección relativa en tu sitio web. Por defecto los enlaces de muetsran 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 logo realista de googledesde una imagen

Enlace a otra página web

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

Documento interno

Voy a enlazar el documento de Libro Alicia en el país de las Maravillasdesde una palabra.

Mapa de imágenes

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

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

Dentro entre las etiquetas de inicio y fin de map estableces las áreas, con la etiqueta área. Tiene atributos parecidos a los hiperenlaces y a la imagen. El atributo más importantes es shape, que indica la form. Tambiéń hay que especificar las coordenadas. Y los atributos alt y href.

Existe también un atributo para indicar que en una imagen quiero usar un mapa de imágenes. Es el atributo usemap. Se usa con el nombre del mapa, dentro de la etiqueta img: usemap=#NombreMapa

ojoizdo ojodcho nariz boca Imagen de una cra con mapa de imágenes en distintas áres

Enlace a un correo

con un hiperenlace podemos enviar un correo. La diferencia está en que el href ponemos mailto:

Contacto
icono carta

Tablas

Las tablas tienen 3 tipos de etiquetas obligatorias

Las tablas se dibujan por filas y solo puede haber contenido deentro 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 sale sin borden 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