1. <html> (Listas No Numeradas)
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul> (etiqueta unordered list)
<li> El cine. (etiquetq list item)
<li> La montaña.
<li> La música.
</ul>
</body>
</html>
2. <html> (Listas Numeradas)
<head>
<title>
Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol> (etiqueta ordered list)
<li> Viajar.
<li> Salir con mis amigos.
<li> Dormir. (etiqueta sin cierre)
</ol>
</body>
</html>
4. <html>
<head>
<title> Listas de definiciones (Tema)
</title>
</head>
<body>
<dl> (Etiqueta de apertura)
<dt>Concepto 1
<dd>Definición del Concepto 1
<dt>Concepto 2
<dd>Definición del concepto 2
</dl> (Etiqueta de cierre)
</body>
</html>
(Los conceptos a definir van con dt y las definiciones con
dd)
5. <html>
<head>
<title>
Sangrados
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
Éste está sangrado respecto del anterior
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html> Sangrados:Se realizan con la etiqueta
<blockquote> de apertura y su
correspondiente de cierre. Aumentan,
también, el interlineado, por eso se
emplean para hacer una cita textual.
6. <html> Se puede utilizar más de una
<head> etiqueta si deseamos un sangrado
<title> mayor:
Sangrados múltiples
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
<blockquote>
<blockquote>
Éste está más sangrado
</blockquote>
</blockquote>
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>
7. Negrita, cursiva y
<html> subrayado.
Para remarcar una
<head> cadena de caracteres
empleamos las
<title> etiquetas <b> y </b>
Negrita, cursiva y subrayado
(bold).
Para hacer que un
</title> texto se muestre en
</head> cursiva: <i> e </i>
(italic).
<body> Para subrayar
empleamos <u> y </u>
Los textos siguientes:<p> (underlined).
<b>Éste está en negrita</b><br>
<i>Éste está en cursiva</i><br>
<u>Éste está subrayado</u>
</body>
</html>
10. <html>
<head>
<title>
Comentarios
</title>
</head>
<body>
Los textos siguientes:<p>
<!-- Voy a añadir un sangrado -->
<blockquote>
<b>Éste está en negrita</b><br>
<i>Éste está en cursiva</i><br>
<u>Éste está subrayado</u>
</blockquote>
</body>
</html> Comentarios.
Si queremos introducir texto que sirva de recordatorio de lo que
hicimos o dejamos de hacer o para dar explicaciones a otras
personas que pueden acceder al código pero que no queremos que
se visualicen en pantalla empleamos la etiqueta (medio etiqueta) <!--
para el comienzo y la etiqueta --> para el final del comentario.
11. <html>
<head>
Tablas.
<title> Empezamos con un tema algo
Tablas 1
</title> complejo.
</head>
<body> Una tabla se define entre las etiquetas
<table>
<tr>
<table> y </table>
<td></td>
<td></td>
A partir de este momento hay que
<td></td> definir las filas de la tabla que se
</tr>
<tr>
definen con <tr> y </tr> (table row). Un
<td></td> par de etiquetas para cada una de las
<td></td>
<td></td> filas.
</tr>
<tr> Dentro de cada fila se definen las celdas
<td></td> que forman esa fila con las etiquetas
<td></td>
<td></td> <td> y </td> (table data).
</tr>
</table> Vamos a empezar definiendo una tabla
</body>
</html>
de 3 filas y 3 columnas (para nuestro
lenguaje serán tres filas, cada una de
ellas con tres celdas):
12. <html> ¿Qué ha pasado? No se ve nada. Esto
<head>
<title>
ocurre porque:
Tablas 2 1.-Dentro de las celdas no hemos
</title>
</head> puesto nada.
<body> 2.-La tabla no tiene bordes.
<table border>
<tr> Tablas con borde y con casillas
<td> </td> vacías.
<td> </td>
<td> </td> Vamos a arreglar estos dos temas: Por
</tr> un lado vamos a indicar que queremos
<tr>
<td> </td> una tabla con borde. Esto se hace
<td> </td> dentro de la etiqueta <table> con el
<td> </td>
</tr>
atributo border. Así: <table border>.
<tr> Por otro lado, vamos a poner algo
<td> </td>
<td> </td>
dentro de cada celda. Pero, en lugar de
<td> </td> poner algo concreto y visible, vamos a
</tr> utilizar una cadena de caracteres que
</table>
</body> ya hemos visto que se utilizaba para
</html> añadir un espacio a la separación entre
palabras:
13. <html> Otros atributos de la tabla.
<head>
<title> Podemos hacer que nuestra
Tablas 3 tabla esté centrada en la
</title>
</head>
página con el atributo
<body> align="center". O "left" o
<table border="3" align="center" width="50%" "right"
bgcolor="#ffcccc">
<tr> Que ocupe una determinada
<td> </td> proporción del espacio en
<td> </td>
<td> </td> horizontal con el atributo
</tr> width="50%". O "30%" o
<tr>
<td> </td>
"70%" o...
<td> </td> Que el borde sea mayor que
<td> </td>
</tr>
el establecido por defecto
<tr> (que es 1): border="3". O ...
<td> </td>
<td> </td> Que tenga un color de fondo
<td> </td> con el atributo
</tr> bgcolor="#6699FF" . O
</table>
</body> cualquier otro (
</html> ver colores html).
14. <html> Atributos de las filas y las
<head>
<title>
celdas.
Tablas 4 De manera similar a los
</title>
</head>
atributos de la tabla, podemos
<body> definir todos esos parámetros
<table border="3" align="center" width="50%" a las filas o a las celdas.
bgcolor="#ffcccc">
<tr> Por ejemplo podemos
<td width="10%"> </td> empezar asignando a las
<td width="30%"> </td>
<td width="60%"> </td> celdas de la primera fila un
</tr> ancho diferente. Si a este
<tr>
<td> </td>
respecto no hago nada más en
<td> </td> las otras celdas, lo que haga
<td> </td> afectará a todas las columnas.
</tr>
<tr> Puedo definir colores
<td bgcolor="#ff00cc"> </td> diferenciados. En este caso, el
<td bgcolor="#ffcc00"> </td>
<td bgcolor="#00cccc"> </td> color de la fila o de la celda
</tr> prevalecerá sobre el definido
</table>
en el conjunto de la tabla
</body>
</html>
15. Tablas con celdas de distinto tamaño.
Es bastante habitual tener que diseñar este tipo de tablas: Una celda puede ocupar dos
columnas, tres,... o dos filas, tres,...
Supongamos que tenemos que diseñar una tabla como ésta:
lo primero que hay que tener claro es el número máximo de columnas y filas que tiene la
tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4 celdas en
cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes.
Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que
debemos emplear es un atributo para la primera celda de la primera fila (debe
"extenderse" sobre las cuatro columnas) <td colspan="4">. Lógicamente la primera fila ya
se ha acabado.
Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td
rowspan="2">. Después de esta celda siguen las otras tres que son normales.
Por último definimos la tercera fila. Como la primera celda ya ha sido definida en la fila
anterior, sólo nos queda la segunda celda, que es normal, y la tercera que se extiende
sobre dos columnas <td colspan="2">
Pondremos un para meter algo aunque no se vea y, para asegurarnos de la simetría
de la tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y
una proporción del espacio total de la tabla en cada columna (25%) y lo haremos en las
celdas que nos parezca (en las "normales" de ancho).
El código podría quedar así:
17. <html>
<head>
Título de la tabla.
<title>
Tablas 6 Disponemos de una
</title>
</head>
etiqueta para poner
<body> el título de la tabla.
<table border align="center" width="30%"
bgcolor="#ffcccc"> Es <caption> con su
<caption>Éste es el título de la tabla</caption>
<tr> correspondiente de
</tr>
<td colspan="4"> </td> cierre.
<tr>
<td rowspan="2" width="25%"> </td>
Se coloca después de
<td width="25%"> </td> la etiqueta de
<td width="25%"> </td>
<td width="25%"> </td> definición de la tabla
</tr>
<tr> y añade un texto por
<td> </td>
<td colspan="2"> </td>
encima de la tabla y
</tr> centrado con ésta.
</table>
</body>
</html>
18. <html>
<head> Celdas de cabecera.
<title>
Tablas 7
Disponemos de una
</title> etiqueta especial para
</head>
<body>
aquellas celdas que son
<table border align="center" width="50%" cabecera respecto de
bgcolor="#ffcccc">
<caption>Ejemplo de celdas de cabecera</caption>
las celdas situadas
<tr> debajo de ellas.
<th>Nombre</th>
<th>Apellido 1</th> Son las etiquetas <TH>
<th>Apellido 2</th> (table header).
</tr>
<tr> El texto situado en ellas
<td width="25%">José</td>
<td width="25%">Pérez</td> queda centrado y en
<td width="25%">Pérez</td> negrita.
</tr>
<tr> Lo único que hay que
<td>Luis</td>
<td>Román</td>
hacer es sustituir la
<td>Sánchez</td> etiqueta normal de
</tr>
</table>
celda por esta otra.
</body>
</html>
19. Alineaciones dentro de las celdas.
Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:
Primera fila (alineación horizontal):
En la primera celda el texto está alineado a la izquierda. No hay que hacer nada,
es la alineación que se establece por defecto. (Podría escribirse, de todas formas:
<td align="left">).
En la segunda celda el texto está alineado en el centro: <td align="center">.
En la tercera celda el texto está alineado a la derecha: <td align="right">.
Segunda fila (alineación vertical):
En la primera celda el texto está alineado en la parte superior: <td valign="top">.
En la segunda celda el texto está alineado en la parte central. No hay que hacer
nada, es la alineación vertical establecida por defecto. (Podría escribirse, de todas
formas: <td valign="middle">) .
En la tercera celda el texto está alineado en la parte inferior: <td
valign="bottom">.
Para observar mejor los resultados se ha forzado la altura de las celdas a 50
píxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> pero
podría escribirse en todas ellas.
21. Separaciones entre celdas y entre borde y contenidos.
La separación por defecto entre las celdas es de 2
píxeles. Se puede modificar esta distancia con el
atributo de table cellspacing. Tabla con cellspacing de
15 píxeles:
En la segunda tabla se ha aumentado la altura de las
celdas a 70 píxeles para observar la alineación
vertical.
Veamos los códigos:
24. Imágenes.
La etiqueta para introducir una imagen en nuestra página es <img
src="nombre.gif"> (src de source en inglés fuente u origen de la imagen)
y siendo nombre el nombre que tiene la imagen y .gif su formato.
La etiqueta funcionará bien siempre y cuando la imagen esté en la
misma carpeta en la que se encuentra la página web desde la que la
llamamos. Es habitual (y recomendable) colocar todas las imágenes en
otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se
encuentra nuestra imagen. Supongamos que la imagen nombre.gif se
encuentra en una carpeta denominada imag, pues bien, la etiqueta
sería <img src="imag/nombre.gif">
Veamos un ejemplo:
En este caso el formato de la imagen es .jpg (junto con el .gif y el .png
los formatos de imágenes más habituales en internet). La imagen se
denomina riglos2.jpg
26. <html> Atributos de la imagen width
<head> y height.
<title>
Imágenes 2 Es muy importante introducir
</title> las medidas de la imagen (las
</head> podemos averiguar desde un
<body> programa gráfico como
<center>
PhotoShop) dentro de la
<img src="imag/riglos2.jpg"
width="150" height="230"> etiqueta <img>. De esta
</center> manera cuando el navegador
</body> va recorriendo la página
</html> reserva el espacio justo para
la imagen y, el resto de la
página se va cargando sin
problemas mientra se acaba
de cargar la imagen. En
nuestro caso la imagen tiene
150 de ancho y 230 de alto.
Escribiríamos:
27. <html> Texto alternativo.
Es otro atributo que se coloca por
<head> varios motivos, el principal es que
<title> aquellas personas que visiten nuestra
Imágenes 3 página sin descargarse las imágenes
(habitual en los que tienen una mala
</title> conexión y no desean eternas
</head> descargas) tengan, al menos, una
<body> orientación del contenido de la
misma. Debe ser una descripción
<center> corta del tema de la imagen. Se
<img src="imag/riglos2.jpg" introduce con la cadena
width="150" height="230" alt="descripción de la imagen" y, al
ser un atributo, se coloca como los
alt="Mallos de Riglos (Huesca)"> dos anteriores, dentro de la etiqueta
</center> <img>.
</body> Cuando el visitante (si navega con el
</html> Internet Explorer) se acerque con el
cursor a la imagen, aparecerá un
rectángulo con el texto alternativo:
Nota: El hecho de que aparezca el
texto alternativo al acercarnos con el
cursor a la imagen, es una desviación
del Explorer. Existe otro atributo
para que esto se produzca
independientemente del navegador
que empleemos. Es el atributo title.
28. <html>
<head>
<title>
Imagen como fondo de página
</title>
</head>
<body background="imag/claro1.gif">
<center>
<h2>
Esta página tiene una imagen de fondo.
</h2>
</center> Colocar una imagen como fondo de la página.
</body>
Simplemente tenemos que colocar dentro de la
</html>
etiqueta <body> el atributo background con el
nombre y/o dirección de la imagen que queremos
colocar. Supongamos que quiero colocar una
imagen denominada claro1.gif que está dentro de
la carpeta imag. El código será el siguiente:
