HTML en las Canteras

H1 es eñ titulo de mayor jerarquia.

Titulos

Las etiquetas de los titulos son una H y un número, que indica la jerarquia. Tienen etiqueta de inicio y de fin

El titulo anterior es de juerarquia 2, segundo nivel

Es de mal estilo no seguir la jerarquia. Debajo del nivel 1 va el 2 u otro 1, por ejemplo.

Titulo nivel 3

titulo nivel 4

titulo nivel 5

Parrafos y texto preformateados

Los parrafos van con la etiqueta p, de inicio y de 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
          esta 
          escrito
          en
          varias
          lineas
          preformateadas

Este texto esta escrito en varias lineas con parrafo

Listas

Las listas tienen etiqueta de lista de inicio y fin y, entre medias, los elementos de la lista o list items (li)

Listas no ordenadas

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

Los elementos de la lista no ordenada van entre etiquetas li

las listas se pueden concatenar:

Listas ordenadas

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

Los elementos de la lista ordenada van entre etiquetas li

  1. Patatas
  2. Coles
  3. Zanahorias

las listas se pueden concatenar:

  1. Hostalizas:
    1. Patatas
    2. Coles
    3. Zanahorias
    4. boniato

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 lechuga rizada
Zanahorias
tubérculo naranja rico en caroteno

Imágenes

Las Imagenes solo solo tienen etiqueta de inicio, img, pero siemopre llevan parámetros. Hay varios parametros obligatorios.

Imagen armadillo
Imagen demonio de tasmania
Imagen ornitorrinco

Hiperenlaces

Los enlaces usan la etiqueta a. Tienen etiqueta de inicio y fin, y siempre enlazan desde alugun sitio, palabra, imagen...

Enlace a otra pagina web

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

Página esterna --> URL

Voy a enlacar la pagina de Googledesde una palabra

Voy a enlacar la pagina de imagen logo googledesde una palabra

Documento interno --> PDF

Voy a enlacar el documento del catalogo de ferrari documentodesde una palabra

Mapa de imagenes

se trata de hacer hiperenlaces en partes de una imagen. Previamente hay q ahcer el "mapa de imagenes", hacer formas sobre la imagens que es desde donde se va hacer los hiperenlaces

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

Entre las etiquetas de inicio y de fin de mapa establece las areas, con la etiqueta area. Tiene atributos parecidos a los hiperenlaces y a las imagenes. El atributo mas impoprtante es shape, que indica la forma. Tambien hay q expecificar las coordenadas. Y los atributos alt y href.

Existe tambien un atributo para indicar que en una imagen quiero usar un mapa de imagenes. Es el atributo usemap, se usa con el nombre del mapa, dentro de ña etiqueta img: usemap=#NombreMapa

ojo dech ojo izq boca nariz Imagen de una cara con mapa de imagenes distintas areas

Enlace a un correo

Con un hiperenlace podemos enviar un correo. La diferencia esta en que en el href ponemos mailto:

Contacto
icono carta

Tablas

Las tablas tienen tres tipos de etiquetas obligatorias

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

todas las filas tienen q tener el mismo numero de celdas, pero se pueden combinar celdas filas y columnas.

La tabla sale sin bordes si no se lo especificas

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