H1 es el título de mayor jerarquía.
Las etiquetas de títulos son una H y un números, 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
Los párrafos llevan etiqueta de inicio y fin.
El texto preformateado va a ser un texto que va a aparecer tal cuál 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 parrafo
Las listas tienen etiqueta de lista de inicio y fin, y,entremedias, los elementos de la lista o lists items (li)
Son listas con viñetas o imágenes. La etiqueta deinicio y fin es ul (unordered list)
Los elementos de la lista no ordenada van entre etiquetas li
Las listas se pueden concatenar:
Son listas con números o letras. La etiqueta deinicio y fin es ol (ordered list)
Los elementos de la lista ordenada van entre etiquetas li
Las listas se pueden concatenar:
La etiqueta de inicio y fin es dl (definition list)
Hay dos elementos emlas listas de definición:
Las imagenes solo tienen etiqueta de inicio, img, pero siempre llevan parámetros. Hay varios parámetros obligatorios:
Los enlaces usan la etiqueta a. Tienen etiqueta de inicio y de fin, y siempre enlazan desde algún sitio:palabras, imagen...
Se enlaza a una URL o a una dirección relativa en tu sitio web. Por defecto los enlaces se muestran en azul y subrrayados.
Voy a enlazar la página de Google desde una palabra.
Voy a enlazar la página de desde una imagen.
Voy a enlazar un documento de El Quijote desde una palabra.
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 elk mapa de imagenes es map. Hay etiqueta de inicio y de fin. Tiene un atributo que es name.
Entre las etiquetas de inicio y fin de map estableces las areas, con la etiqueta area. Tiene atributos parecidos a los hiperenlaces y a la imagen. El atributo más importante es shape, que indica la forma. También 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
Con un hiperenlace podemos enviar un correo. La diferencia está en que en el href ponemo mail to:
ContactoLas tablas tienen tres tipos de etiquetas obligatorias.
Las tablas se dibujan por filas y solo puede haber contenido dentro de las celdas.
Todaslas filas tienen que tener el mismo número de celdas, pero se pueden combinar celdas de filas y de columnas.
Los bordes no salen sino lo pones.
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.
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.
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 |
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 |
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 |