Ejercicio paso a paso. Insertar texto con diferentes propiedades


Objetivo.

 

Practicar las operaciones que hay que realizar para insertar texto especificando sus propiedades.

 

Ejercicio 1.

 

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales.

3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella:

<basefont color="red" size="1 ">

Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento.

Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto.

4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto: Inicio

5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño.

Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamaño de las letras.

6 Rectifica la etiqueta <basefont para que quede así:

<basefont color="#003333" size="4">

Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento.

7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.

8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:

<h1>Inicio</h1>

Con este código estarás conviertiendo el texto en un encabezado de primer nivel.

9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande.

10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.

Con esta etiqueta estarás insertando una regla horizontal.

11 Guarda el archivo y visualízalo en tu navegador, observa la regla

12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código en ella:

<blockquote>
<blockquote>
<p
align="left">
<em>

Somos una asociaci&oacute;n de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales.
<br>
Desde esta p&aacute;gina web intentaremos resolver tus dudas acerca de c&oacute;mo cuidar a tus mascotas.
</em>
</p>
</blockquote>
</blockquote>

Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).

Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y tendrá doble sangrado (<blockquote>).

13 Guarda el archivo y visualízalo en tu navegador, comprueba que obtienes una página como la que aparece si pulsas aquí. Para apreciar mejor el efecto del párrafo ves cambiando el tamaño de la ventana de tu navegador y verás como el texto se va escribiendo en más líneas pero siempre alineado a la izquierda y saltando de línea después de la primera frase.

Ejercicio 2.

 

1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales

Vamos a modificar la página para que tenga el siguiente aspecto:

1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1>

Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el explorador con la página gatos.htm y después de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página).

2 Detrás añadimos una regla con la etiqueta <hr>.

3 Añadimos una línea en blanco con <br>

4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3:

<blockquote>
<h3>&iquest;COMO PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>

5 Sólo nos queda definir la lista intercalando las siguientes etiquetas:

<ul>
<li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li>
<ul>
<li>
Preferiblemente que coma pienso</li>
</ul>
<li>
Cepillarle los dientes una vez a la semana</li>
<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li>
</ul>

6 Guarda el archivo y visualízalo en tu navegador.

   Inicio 


.