1. Centrar el texto: Si queremos que nuestro texto: Bienvenid@ aparezca en el centro de la página, escribimos delante del saludo la etiqueta y al final del mismo la etiqueta de cierre.
El código quedaría así:
1.2. Guardamos los cambios:
1.3. Minimizamos y comprobamos los resultados con el Explorer :
2. Veamos un tabla en la que se nos muestran estas etiquetas html
:
| Etiquetas para estilos físicos |
|---|
<b></b> | Texto en negrita |
<s></s> | Para tachar un texto |
<i></i> | Texto en cursiva |
<u></u> | Para subrayar texto |
<tt></tt> | Simular texto a máquina |
2.1. Para hacer uso de estos estilos físicos basta con encerrar el texto que queramos que se vea afectado entre la etiqueta en cuestión. Por ejemplo, supongamos que queremos subrayar el sujeto que realizó la acción en la siguiente oración: Jaime corría mucho. Entonces, el código html sería el siguiente:<u>Jaime</u> corría mucho.
2.2. Estudiemos el siguiente código html en donde se hace uso de todas estas etiquetas para los estilos físicos:
<p><b>A la hora de dar estilo al texto</b>, en
html tenemos <u>estilos físicos y lógicos</u>.
<i>Los primeros no tienen ninguna relación
conceptual</i>; mientras que los segundos si:
podemos dar una enfatización al texto.</p>
<p>También, con los físicos, podemos
<s>tachar</s> texto o simular un <tt>escrito
a máquina</tt>.</p>
2.3 En el código hemos escrito dos párrafos en donde hay textos afectados por los estilos físicos que hemos visto en la tabla. El navegador debería mostrarnos una página similar a lo que muestra esta imagen:
2.4. Ahora solo queda que practiques un poco con los estilos físicos. No es difícil asimilar estas etiquetas html que hemos visto; por ejemplo, puedes escribir tus propios textos en html y poner texto en negrita, o subrayar alguna palabra.
3. Aumentar el tamaño del texto:
Si nuestro mensaje es algo pequeño. Podemos aumentar su tamaño empleando las etiquetas de encabezados. Las etiquetas van desde el <h1> (h de head, en inglés, cabeza) para la más grande, al <h6> para la más pequeña.
3.1. Vamos a poner el tamaño mayor:
3.2. Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores
4. Cambiar el color del texto:
Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos a cambiar el color negro del texto, al color blanco.
4.1. Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo.
La etiqueta quedaría:
<font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que es el ffffff. La etiqueta quedaría así: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo.
Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:
5. Saltos de línea.
A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno de los navegadores abriendo la página. En su lugar vamos a hacer un enlace para que se abra una ventana nueva de tu navegador al leer estas páginas. Pero el proceso que se debe seguir para construir las páginas no ha cambiado:
5.1. Modificar/ampliar el código en el bloc de notas.
5.2. Guardar los cambios.
5.3. Abrir el Explorer y Actualizar si es necesario.
5.4. Abrir el Firefox y Recargar si es necesario.
Vamos, ahora, a incluir una nueva línea en nuestra página: Por ejemplo vamos a poner: A mi primera página web:
5.5. Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:
index.html
¿Qué ha pasado? Esto no era lo previsto.
5.6.Lo que ocurre es que el salto de línea que hemos hecho en el código no lo reconocen los navegadores. Para que el salto de línea se incorpore hay que hacerlo con la etiqueta <br> del inglés break, romper. Esta etiqueta no tiene cierre.
El código quedaría así:
6. Párrafos: Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario:
7. Listas:
A menudo hay que hacer listas de objetos, de conceptos, de definiciones. Las listas pueden ser no numeradas (el orden no importa) y numeradas:
7.1.- Listas no numeradas.
Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.
7.2.- Listas numeradas.
Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.
7.3. Listas animadas.Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación de las etiquetas de apertura y cierre:
Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto que se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor).
8. Tablas.
Una tabla se define entre las etiquetas <table> y </table>
A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (table row). Un par de etiquetas para cada una de las filas.Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table data).
Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje serán tres filas, cada una de ellas con tres celdas):
¿Qué ha pasado? No se ve nada. Esto ocurre porque:
Dentro de las celdas no hemos puesto nada.La tabla no tiene bordes.
8.1. Tablas con borde y con casillas vacías.
Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla con borde. Esto se hace dentro de la etiqueta <table> con el atributo border. Así: <table border>.
Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para añadir un espacio a la separación entre palabras:
9. Otros atributos de la tabla:
9.1. Podemos hacer que nuestra tabla esté centrada en la página con el atributo align="center". O "left" o "right"
9.2. Que ocupe una determinada proporción del espacio en horizontal con el atributo width="50%". O "30%" o "70%".
9.3. Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O
9.4. Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro.
10. 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.
10.1. 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">
10.2. Veamos un ejemplo:
Esta es la imagen:
Así se verá la imagen en la página web:
11. Atributos de la imagen width y height.
Es muy importante introducir las medidas de la imagen (las podemos averiguar desde un programa gráfico comoPhotoShop) dentro de la etiqueta <img>. De esta manera cuando el navegador va recorriendo la página 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:
12. Colocar una imagen como fondo de la página.
Simplemente tenemos que colocar dentro de la 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:
Así se verá con la imagen de fondo:
Imagen de fondo con imagen en la página:
