HTML en Las Canteras

h1 es el título de mayor jerarquía

Título

Las estiquetas de título son una H y un número, 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 2, segundo nivel

Título nivel 3

Título nivel 4

Título nivel 5

Párrafos y textos 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, entre medias, los elementos de la lista o list itmes (li)

Listas NO ordenadas

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

Los elementos de la lista no ordenada van entre etiquetas 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 (ordened list)

Los elementos de la lista ordenadas 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. Van también entre li

• dt: definition term
• dd: definition definition

Patatas

Tubérculo blanquecino

Coles

Especie de lechuga rizada

Zanahorias

Tubérculo naranja rico en carateno

Imágenes

Las imágenes SOLO tienen etiqueta de inicio, img, pero siempre llevan parámetros. hay varios parámetroos obligatorios:

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

Hiperenlaces

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

Enlace a otra página web

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

Página externa --> URL

Voy a enlazar la página de Google Desde una palabra

Voy a enlazar la página de Desde una imagen

Documento interno --> URL

Voy a enlazar el dcoumento de trigonometría Desde una palabra

Mapa de imágenes.

se trata de hacer hiperenlaces 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 hacer los hiperenlaces

La etiqueta para mapa e imǵanes es map. hya etiqueta de inici y de fin. Tiene un atributo que es name (al mapa le tiens que dar un nombre)

Dentro, entre las etiquetas de inicio y fin de mape stableces lasáreas (desde donde vas a enlazar) con la etiqueta area. Tiene atributos parecidos a los hiperenlaces y a las imágens. El atributo más importante es shape, que indica la forma. También hay que especificar las cordenadas.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 usesmap. Se usa con el nombre del map, dentro de la etiqueta img: usemap=#NombreMapa

Enlace a un correo

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

Tablas

Las tablas tienen tres tipos de etiquetas obligatorias

• Estiqueta de inicio y fin de tabla, table
• Etiqueta de inicio y fin de fila, TR (table row)
• Etiqueta de inicio y fin de celda, TD (table data)

Las tablas se dibujan por filas y solo puede haber contenido dentro de las celdas.Si no le pones tulos bordes no salen por defecto.

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 celdas empiezan con un punto), y se nombran como un parámetro de table en la página web.

Unión de celdas en una tabla

Al igual que en un 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.

Vamos a probar englobando las tres primeras celdas:

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.

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.