A través de la etiqueta es posible establecer el color o ...

1 GUIA 2

A través de la etiqueta <body> es posible establecer el color o la imagen de fondo

de la página.

El color de fondo puede establecerse a través del atributo bgcolor, al que es posible

asignarle un color representado en hexadecimal o por un nombre predefinido.

Por ejemplo, para hacer que el color de fondo de una página sea de color azul,

tendremos que escribir:

...

<body bgcolor="#0000FF">

...

</body>

</html>

Sería equivalente a poner:

...

<body bgcolor="blue">

...

</body>

</html>

La imagen de fondo puede establecerse a través del atributo background, indicando

la ruta en la que se encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen

fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada

la página, tendremos que escribir:

...

<body background="fondo.gif">

...

2 GUIA 2

</body>

</html>

En el caso de que la imagen no se encuentre en el mismo directorio que la página,

y se encuentre dentro de la carpeta imágenes, que sí se encuentra en el mismo

directorio que la página, tendremos que escribir:

...

<body background="imagenes/fondo.gif">

...

</body>

</html>

Entre el borde de la ventana y el contenido de la página existe un margen, cuyo

tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen

izquierdo) y topmargin (margen superior). O los atributos marginwidth (anchura del

margen) y marginheight (altura del margen).

Por ejemplo, para hacer que una página no tenga margen superior, y tenga un

margen izquierdo de 20 píxeles, tendremos que escribir:

...

<body leftmargin="20" topmargin="0" marginwidth="20"

marginheight="0" >

...

</body>

</html>

3 GUIA 2

EL TEXTO

Los caracteres < y > son dos caracteres especiales que indican inicio y fin de

etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el

nombre que los representa:

< Se representa con <

Se representa con >

A continuación se muestra una lista con algunos caracteres y el nombre con el que

han de ser representados:

Carácter Representación

< <

> >

á á

Á Á

é é

É É

í í

Í Í

ó ó

Ó Ó

ú ú

Ú Ú

ñ ñ

Ñ Ñ

™

Etiqueta <br>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al

pulsar la tecla INTRO.

Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el

código, pero no se mostrará en el navegador. Para que se produzca el salto de línea

Carácter Representación

€ €

ç ç

Ç Ç

ü ü

Ü Ü

& &

¿ ¿

¡ ¡

" "

· ·

º º

ª ª

¬ ¬

© ©

® ®

4 GUIA 2

en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br>

donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta

</br> después de ella, ya que dicha etiqueta no existe.

Ejercicio paso a paso 1: etiqueta <br>

Insertar el texto:

Queridos usuarios,

tengo el placer de comunicarles que hay una nueva sección.

Habra que escribir:

Queridos usuarios,<br>tengo el placer de comunicarles que hay una nueva

secci&oacuten.

Separadores <hr>

El elemento que suele utilizarse para separar secciones dentro de una misma página

es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta

<hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.

Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

align alineación de la regla

dentro de la página

left(izquierda)

right (derecha)

center (centro)

width ancho de la regla un número, acompañado de % cuando

se desee que sea en porcentaje

size alto de la regla un número

5 GUIA 2

noshade eliminar el sombreado de

la regla no puede tomar valores

Ejercicio paso a paso 2: etiqueta <hr>

Insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi página.

Habra que escribir:

Inicio<hr align="left" width="300%" size="5"

noshade>Bienvenidos a mi página.

Formatear el texto <font>

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para

ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando

algunos de los atributos de la etiqueta:

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto número hexadecimal o texto predefinido

size tamaño del texto

valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamaño por defecto,

añadiendo + o - delante del valor

6 GUIA 2

Ejercicio paso a paso 3: etiqueta <font color size>

Insertar el texto:

Bienvenidos a laarboleda.edu.co

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial,

MS Sans Serif">Bienvenidos a laarboleda.edu.co</font>

También es posible definir una fuente para todo el documento. Para ello, hay que

insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los

mismos atributos del texto que la etiqueta <font>.

Por ejemplo:

<body>

<basefont color="#006699" size="4" face="Arial">

...

Este código haría que la fuente del documento fuera por defecto de color azul, de

tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el

navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que

se encuentra.

Resaltado del texto <b>

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se

encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden

agruparse según vayan asociados al tipo de letra o a la información que represente el

7 GUIA 2

texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre,

y que pueden aplicarse varias etiquetas al mismo texto.

A continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo

<b> negrita curso HTML

<i> cursiva curso HTML

<u> subrayado curso HTML

<s> tachado curso HTML

<tt> teletipo (máquina de escribir) curso HTML

<big> aumenta el tamaño de la fuente curso HTML

<small> disminuye el tamaño de la fuente curso HTML

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta Significado Ejemplo

<cite> cita curso HTML

<code> ejemplo de código curso HTML

<dfn> definición curso HTML

<del> eliminado curso HTML

<em> énfasis curso HTML

<ins> insertado curso HTML

<kbd> teclado curso HTML

<samp> muestra curso HTML

<strong> destacado curso HTML

<sub> subíndice curso HTML

<sup> superíndice curso HTML

<var> variable curso HTML

8 GUIA 2

Ejercicio paso a paso 4: etiqueta <Font color size> en un mismo texto

Insertar el texto:

Bienvenidos a www.elpais.com


<font color="#993366" size="4" face="Comic Sans MS, Arial,

MS Sans Serif">Bienvenidos a <b><u><tt>www.

elpais.com</tt></u></b></font>

Párrafos <p>

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno

de los párrafos debe insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se

modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right

(derecha), center (centrado) o justify (justificado).

9 GUIA 2

Ejercicio paso a paso 5: etiqueta <p align=”center”, “left”, “rigth”></p>

Insertar el texto:


Aquí encontraras cursos de formación muy interesantes.


<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute encontraras cursos de formaci&oacuten muy interesantes. </p>

Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>,

para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta

<p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la

separación entre ellos es menor.

Ejercicio paso a paso 5.1: etiqueta <div> </div>

Insertar el texto:


Aquí encontraras cursos de formación muy interesantes.


<div align="center">Bienvenidos a mi p&aacutegina.</div>

<div>Aqu&iacute encontraras cursos de formaci&oacuten muy interesantes.</div>

También es posible insertar el texto entre las etiquetas <center> y </center> para

que aparezca centrado.

10 GUIA 2

Ejercicio paso a paso 6: etiqueta <center></center>

Insertar el texto:



<center>Bienvenidos a mi p&aacutegina.</center>

Encabezados <h1>

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro

de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de

la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos

que tiene encima y debajo de él.

Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas

estas etiquetas precisan una etiqueta de cierre.

A continuación se muestran los distintos encabezados existentes:

Etiqueta Ejemplo

<H1> Título 1: HTML <H2> Título 2: HTML <H3> Título 3: HTML

<H4> Título 4: HTML



11 GUIA 2

Ejercicio paso a paso 7

1. Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el

siguiente código en ella:

<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.

2. Escribe el siguiente texto: Inicio

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

<h1>Inicio</h1>

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

4. 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.

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

6. 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ón de veterinarios, estudiantes de veterinaria, o

simplemente amantes de los animales.

<br>

12 GUIA 2

Desde esta página web intentaremos resolver tus dudas acerca de

có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>).

7. Guarda el archivo, en la carpeta ejercicios, como EjercicioUno y visualízalo en

tu navegador, comprueba que obtienes una página como la que aparece aquí.

13 GUIA 2

Ejercicio 8.

Crear una 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. 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>

14 GUIA 2

<h3>¿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, en la carpeta Ejercicios con el nombre Ejercicio2 y visualízalo

en el navegador.

Ejercicio 9: Deportes.

15 GUIA 2

Añadir el código necesario para que la página quede de la siguiente forma:

Ejercicio 10: Listas: Crear un documento similar al de la imagen, agregándole color de fondo:

A través de la etiqueta es posible establecer el color o ...

Documents

Transcript of A través de la etiqueta es posible establecer el color o ...