Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la página, escribimos delante del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center>
El código quedaría así:
Guardamos los cambios:
Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la barra de tareas):
Si observamos que nuestro mensaje no aparece centrado le damos al botón 
. Puede ocurrir que no haya puesto al día los cambios:
. Puede ocurrir que no haya puesto al día los cambios:
Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los cambios al día le damos al botón 
.
.
Minimizamos.
Nota: Es conveniente tener los tres programas abiertos: Los dos navegadores y el Bloc de notas. Si cerramos los programas, podemos recuperar el Bloc de notas a partir del Explorer. Botón derecho del ratón > Ver código fuente. Se abrirá el Bloc de notas. Puedo hacer los cambios que se señalan en este manual, guardar y minimizar. Abrir cada navegador y Actualizar o Recargar.
Otra forma de recuperar el Bloc de notas es abrirlo desde Inicio > Todos los programas > Accesorios > Bloc de notas. Una vez abierto el programa, buscamos nuestro index.html en el escritorio. Archivo > Abrir y buscamos el escritorio. Tienes que observar que en Tipo está seleccionado Todos los archivos. En caso contrario no verás el index.html  |
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.
Vamos a poner el tamaño mayor:
Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores
No olvidarse de dar al botón Actualizar en el caso de no ver los cambios a la primera.
Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bgde background ).
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:
Si deseas profundizar en este tema de los colores, pulsa el botón... |
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.
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:
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:
- Modificar/ampliar el código en el bloc de notas.
- Guardar los cambios.
- Abrir el Explorer y Actualizar si es necesario.
- 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:
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados: index.html
¿Qué ha pasado? Esto no era lo previsto.
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í:
Veamos ahora el resultado: index.html
Ahora sí que es lo que queríamos.
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.5.6.- Párrafos.
Veamos ahora el resultado: index.html
Si queremos separar más no es suficiente repetir la etiqueta <p>. Hay que unir las dos etiquetas y repetir ambas:
Veamos ahora el resultado: index.html
Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de párrafo con la de cierre escribiendo dentro un caracter invisible: (non breaking space):
Veamos ahora el resultado: index.html
La cadena también se puede utilizar para añadir un espacio en blanco extra a la separación entre dos palabras, repitiéndolo cuantas veces haga falta. Aunque, su definición inicial, era para añadir un espacio de separación entre dos palabras "que no se pueda romper" caiga, por las configuraciones de pantalla diferenciadas, donde caiga.
No hay comentarios:
Publicar un comentario