Sei sulla pagina 1di 7

INSTITUCIN EDUCATIVA TCNICA ANTONIO NARIO SEDE TCNICO ACADMICA LGICA Y PROGRAMACIN

TALLER No. 2 ACTIVIDADES

1. Tomar apuntes en el cuaderno 2. Realizar los ejercicios y explicar su funcionamiento.

ESTRUCTURA DE UNA PGINA La estructura bsica de una pgina es: <html> <head> ... </head> <body> ... </body> </html>

Ahora veamos cmo funcionan estas etiquetas.

Identificador del tipo de documento <html> Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina.

Por ejemplo: <html> ... </html>

Ing. Olga Roco Berro Leguizamn

Pgina 1

Cabecera de la pgina <head> La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo: <html> <head> ... </head> ... </html> Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son: <link>, <style>, <script>, <meta> y la etiqueta <title>

Ttulo de la pgina <title> El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html>

Cuerpo del documento <body> El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas cabecera. Por ejemplo: Ing. Olga Roco Berro Leguizamn Pgina 2

<body> y </body>, que van justo debajo de la

<html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html>

A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina. El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.

Colores en hexadecimal

Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.

Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.

Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal.

A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.

Ing. Olga Roco Berro Leguizamn

Pgina 3

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:

Ing. Olga Roco Berro Leguizamn

Pgina 4

Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir: ... <body bgcolor="#0000FF"> ... </body> </html>

Sera equivalente a poner: ... <body bgcolor="blue"> ... </body> </html> La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir: ... <body background="fondo.gif"> ... </body> Ing. Olga Roco Berro Leguizamn Pgina 5

</html>

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir: ... <body background="imagenes/fondo.gif"> ... </body> </html>

A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir: ... <body text="#FF0000"> ... </body> </html>

Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin(margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir: ... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html>

EJERCICIOS

1. Abrir el Bloc de notas, brelo para realizar el primer ejercicio. Ing. Olga Roco Berro Leguizamn Pgina 6

2. Escribe el cdigo que aparece a continuacin: <html> <head> <title>Inicio</title> </head> <body bgcolor="#99CC99"> </body> </html> 3. Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios_html/animales.

Ing. Olga Roco Berro Leguizamn

Pgina 7

Potrebbero piacerti anche