Diseño de páginas web básico

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

6. La etiqueta BODY

En este apartado vamos a ver la etiqueta con la cual crearemos el cuerpo del documento. La parte que visualizara el navegador. Las etiquetas de esta parte pueden tener basicamente dos funciones:

  1. Definir un elemento de la página web, si es párrafo, título, imagen, etc..
  2. Modificar el aspecto de algún elemento del documento, Cambiar el color de fondo, poner el texto en negrita, etc... Esta función del código xhtml como veremos en próximos capítulos sera realizada por las reglas css.

 

Primero vamos a nombrar las etiquetas que puede contener la propia etiqueta <body>

 

Propieda

 Descripción Ejemplo

bgcolor

Cambia el color de fondo.

 

 <body bgcolor="#000">

background

Establece una imagen como fondo de la página web.

 

 <body background= "img/fondo.jpg">
bgproperties

Porpiedades del fondo de la página. Con su valor fixed deja fija la imagen y solo se desplaza el texto.

 

 <body bgproperties="fixed">

text

Cambia el color del texto de la página

 

 <body text="#fff">

link, alink, vlink

Establece el color de los vinculos del documento:

  1. link: Enlaces no visitados
  2. alink: Enlaces activos
  3. vlink: Enlaces visitados

 

 

 <body link="0000ff" alink="00ff00" vlink="ff0000" >

topmargin, bottommargin, leftmargin, rightmargin.

Establece los márgenes del documento: superior, inferior, izquierdo y derecho.

 

 <body topmargin="100px" leftmargin="100px">

 

Como ejemplo la etiqueta para una pagina con texto de color blanco, margen superior de 100px e izquierdo de 100 px, un color de fondo negro por si no se ve la foto, y una imagen de fondo. Color diferente para los link, etc.. Esto quedaría así:

<body bgcolor="#000" background="img/fondo.jpg" text="#fff" link="#00f" alink="#0f0" vlink="#f00" topmargin="100px" leftmargin="100px">

Pero vuelvo a repetir y espero me perdonen de repetitivo. Estas propiedades las comento a modo informativo, para que sepan que existen, pero lo que utilizaremos para dar dar formato a la página son las reglas css.

Task Discussion


  • Yob   April 20, 2012, 9:39 a.m.

    La ventaja de definir el estilo (colores, tamaños, posiciones, etc) con las reglas CSS es que se pueden definir para varias paginas, de tal manera que al hacer un cambio en el CSS, las afecta a todas, en vez de tener que hacer el cambio manualmente en cada pagina.

    Además el CSS tiene muchisimas más opciones de personzalicion, que las que ofrece HTML

  • jose francisco   April 20, 2012, 9:49 a.m.
    In Reply To:   Yob   April 20, 2012, 9:39 a.m.

    Exactamente, no has podido definir mejor las css. Pero el html no tiene más etiquetas para dar formato al texto debido a que ya desde el principio, cuando se crearón las css y el html, se penso en separar el contenido del diseño. El w3c creo un equipo de trabajo para cada uno de esos lenguajes con el fin de desarrollarlos.

    También otra ventaja es la limpieza en el codigo. Ya de por si en un portal o página grande tienes que colocar comentarios para guiarte. Todavía seria más engorroso si le tenemos que agregar todos los comandos del diseño.