Programación en html

(1)

El lenguaje HTML consiste en un conjunto de etiquetas predefinidas que el navegador interpreta a la hora de construir una página para su visualización. Así, el HTML es el lenguaje utilizado para estructurar una página web.

Todas las páginas web se estructuran mediante código HTML acompañado de otros dos lenguajes: CSS y JavaScript.

LAS ETIQUETAS

Una etiqueta HTML consta de un nombre que la define encerrado entre símbolos <> y escrito en minúsculas. Existen etiquetas que pueden contener texto y otras que representan partes de una estructura. Por ello, las etiquetas con contenido se deben cerrar para definir con precisión qué engloban. Para ello, se emplea una etiqueta de cierre, idéntica a la de apertura, pero con el símbolo / delante del nombre.

Si una etiqueta contiene otras etiquetas la más interna debe cerrase antes de poder encerrar la estructura que las contiene. Aunque no es obligatorio, se recomienda incluir el símbolo /, precedido de un espacio al final de la única etiqueta presente para indicar que esta termina ahí.

LOS ATRIBUTOS

Los atributos son valores adicionales que se agregan a una etiqueta para configurarla o definir su comportamiento. Existen atributos propios y exclusivos de algunas etiquetas, así como atributos globales aplicables a cualquier etiqueta, sino sólo aquellos necesarios para modificar el comportamiento de la etiqueta según corresponda.

Los atributos se añaden, únicamente a la etiqueta de apertura, nunca a la de cierre. Cada atributo tiene un nombre que define la propiedad que modifican y un valor encerrado entre comillas dobles. Los atributos se agregan después del nombre de la etiqueta, separados por un espacio de dicho nombre y del resto de atributos. Por ejemplo <img src=”imagen.jpg” alt=”Imagen de prueba”> es un ejemplo de etiqueta de tipo <img> con atributos para insertar una imagen, en esta línea de código vemos:

 Una etiqueta <img> que hace referencia a que vamos insertar una imagen

 El atributo src indica cuál es el archivo que contiene la imagen

 El atributo alt se utiliza para mostrar un texto alternativo en el caso de que la imagen no estuviera disponible.

ESTRUCTURA BÁSICA DE UNA PÁGINA HTML (Se puede instalar un complemento para Firefox llamado firebug que nos permite editar código HTML).

Para crear un documento HTML se puede utilizar cualquier editor de texto plano. Es conveniente además que el editor elegido resalte el HTML destacando las etiquetas y atributos frente al texto del contenido, de modo que mejore su legibilidad.

Antes de empezar a crear el documento HTML es preciso definir la estructura básica, algunos editores añaden esta estructura por defecto.

(2)

DOCTYPE.- Informa al navegador de qué tipo de archivo se trata. Se incluye siempre como la primera etiqueta del documento y es la única que se escribe en mayúsculas.

<html>.- es el elemento raíz que contiene todo el documento HTML, se define justo después del DOCTYPE.

<head>.- es el primer elemento que aparece en el interior del <html>. Dentro de esta etiqueta se incluye información general sobre la página web dirigida, por lo general, al navegador o a los buscadores web. El único elemento cuyo valor se muestra al usuario es <title>, que define el título de la página y aparece como título de la ventana cuando el documento se abre en el navegador.

<body>.- Se añade a continuación de <head>. El contenido que se mostrará al usuario deberá incluirse dentro del elemtento body.

TIPOS DE ELEMENTOS

Los elementos HTML se pueden clasificar en dos categorías: los elementos de bloque y los elementos en línea.

 Elementos de bloque

o Ocupan por defecto todo el ancho disponible dentro del elemento que los contiene

o Los elementos situados tras un elemento de bloque siempre se sitúan debajo de este, aunque se modifique su ancho y puedan disponerse uno junto al otro

o Pueden contener otros elementos de bloque y otros elementos de línea

o Los párrafos <p>, los bloques de división <div>, las listas <ul>, <ol> y las tablas <table> constituyen ejemplos de este tipo de elementos.

 Elementos en línea

o Ocupan tan solo el ancho necesario, que viene definido por la cantidad de texto incluido o por el tamaño de la imagen que se debe mostrar

o Los elementos en línea, seguidos, se sitúan uno junto al otro hasta que ocupan el ancho disponible

o Estos elementos solo pueden contener otros elementos en línea, texto e imágenes

o Las imágenes <img>, los enlaces <a>, los botones <button> y el texto resaltado <strong> son ejemplos de este tipo de elementos.

ETIQUETAS BÁSICAS

(3)

<p>.- representa un párrafo y solo puede englobar elementos en línea. Los párrafos establecen márgenes superiores e inferiores con respecto al resto del contenido

<span> se usa para agrupar elementos en línea, es similar a <div> con la diferencia de que no define un bloque. Se usa para agrupar textos y otros elementos en línea, así como para, con posterioridad aplicar estilos con CSS

<u>.- El texto al que se le aplique esta etiqueta aparecerá subrayado

<em>.- Al texto al que se le aplique esta etiqueta aparecerá en cursiva

<strong>.- Al texto al que se le aplique este etiqueta aparecerá en negrita.

<sub>.- el texto que engloba esta etiqueta representa un subíndice

<sup>.- el texto englobado se convierte en superíndice

<br>.- fuerza un salto de línea en el texto. No tiene etiqueta de cierre

<hr>.- Elemento de bloque que dibuja una línea de separación horizontal en la página. No tiene etiqueta de cierre

Estas etiquetas son las más habituales, se muestra la guía completa de etiquetas HTML5

El simbolo indica que el elemento fue añadido en HTML5. Nótese que otros

elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.

Elemento raíz

Elemento Descripcion

<!doctype html> Define que el documento esta bajo el estandar de HTML 5

Elemento Descripción

<html> Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

Metadatos del documento

(4)

<title>

Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.

<base> Define la URL base para las URLs relativas en la página.

Scripting

Elemento Descripción

Secciones

<body>

Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un

documento.

<section> Define una sección en un documento.

<nav>

Define una sección que solamente contiene enlaces de navegación

(5)

<aside>

Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido

Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.

Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.

Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.

<address> Define una sección que contiene información de

contacto.

<main>

Define el contenido principal o importante en el documento. Solamente existe un

elemento <main> en el documento.

Agrupación de Contenido

<p> Define una parte que debe mostrarse como un párrafo.

<hr> Representa un quiebre temático entre parrafos de una sección o

articulo o cualquier contenido.

<pre> Indica que su contenido esta preformateado y que este formato

debe ser preservado.

(6)

<ol> Define una lista ordenada de artículos.

<ul> Define una lista de artículos sin orden.

<li> Define un artículo de una lista ennumerada.

<dl> Define una lista de definiciones, es decir, una lista de términos y

sus definiciones asociadas.

<dt> Representa un término definido por el siguiente <dd>.

<dd> Representa la definición de los terminos listados antes que él.

<figure> Representa una figura ilustrada como parte del documento.

<figcaption> Representa la leyenda de una figura.

<div> Representa un contenedor genérico sin ningún significado

especial.

Semántica a nivel de Texto

<a> Representa un hiperenlace , enlazando a otro recurso.

<em> Representa un texto enfatizado , como un acento de intensidad.

<strong> Representa un texto especialmente importante .

<small>

Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son

esenciales para la comprensión del documento.

<s> Representa contenido que yano es exacto o relevante .

(7)

<q> Representa una cita textual inline.

<dfn> Representa un término cuya definición está contenida en su contenido ancestro más próximo.

<abbr> Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.

<data>

Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).

<time>

Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.

<code> Representa un código de ordenador .

<var>

Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.

<samp> Representa la salida de un programa o un ordenador.

<kbd>

Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz transcritos.

<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.

<i>

Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.

<b>

(8)

<u> Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.

<mark>

Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.

<ruby>

Representa contenidos a ser marcados con anotaciones

ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.

<rt> Representa el texto de una anotación ruby .

<rp>

Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.

<bdi>

Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.

<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.

<span>

Representa texto sin un significado específico. Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales

como class, lang, o dir.

<br> Representa un salto de línea.

<wbr>

(9)

Ediciones

<ins> Define una adición en el documento.

<del> Define una remoción del documento.

Contenido incrustado

<img> Representa una imagen.

<embed>

Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.

Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.

<param> Define parámetros para el uso por los plugins invocados por los elementos <object>.

<video>

Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.

<audio> Representa un sonido o stream de audio.

<source> _{Permite a autores o autoras especificar recursos multimedia}

alternativos para los elementos multimedia como <video> o <audio>.

<track>

Permite a autores o autoras especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>.

(10)

<map> En conjunto con <area>, define un mapa de imagen.

<area> En conjunto con <map>, define un mapa de imagen.

<math> Define una fórmula matemática.

Datos tabulares

<table> Representa datos con más de una dimensión.

<caption> Representa el título de una tabla.

<colgroup> Representa un conjunto de una o más columnas de una tabla.

<col> Representa una columna de una tabla.

<tbody> Representa el bloque de filas que describen los datos contretos de una tabla.

<thead> Representa el bloque de filas que describen las etiquetas de columna de una tabla.

<tfoot> Representa los bloques de filas que describen los resúmenes de columna de una tabla.

<tr> Representa una fila de celdas en una tabla.

<td> Representa una celda de datos en una tabla.

(11)

Formularios

<form> Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.

<fieldset> Representa un conjunto de controles.

<legend> Representa el título de un <fieldset>.

<label> Representa el título de un control de formulario.

<input> Representa un campo de datos escrito que permite al usuario o usuaria editar los datos.

<button> Representa un botón .

<select> Represents un control que permite la selección entre un conjunto de opciones.

Representa un conjunto de opciones predefiniddas para otros controles.

<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.

<option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.

<textarea> Representa un control de edición de texto multi-línea.

<keygen> Representa un control de par generador de llaves.

<output> Representa el resultado de un cálculo.

<progress> Representa el progreso de finalización de una tarea.

<meter>

(12)

Elementos interactivos

Representa un widget desde el que un usuario o usuaria puede obtener información o controles adicionales.

Representa un resumen, título o leyenda para un elemento <details> dado.

<command> Representa un comando que un usuario o usuaria puede invocar.

(13)

EJEMPLOS

Para llevar a cabo los proyectos usaremos la herramienta de Firefox THIMBLE, la cual nos permite escribir en paralelo el código y la página en apariencia “real”.

Podemos acceder desde https://thimble.mozilla.org/es/?ref=webmaker.org

Pulsamos “Empieza tu proyecto desde cero”

Nos aparecerá el siguiente fragmento de código:

(14)

Veamos el código que aparece y qué significa cada elemento:

Estas primeras líneas son “estándar” y deberíamos ponerlas en todas las páginas que diseñemos.

Esta línea es la que muestra el título, es decir, es la que se mostraría en la parte superior de la ventana.

Así, todos estos elementos constituyen lo que se denomina <head> o encabezado de la página, hay que tener en cuenta que ninguno de estos elementos se va a ver directamente.

ANÁLISIS DEL CUERPO DE LA PÁGINA

El cuerpo de la página es lo que realmente vamos a ver, va dentro de la etiqueta <body>

(15)

Aquí observamos, dentro de la etiqueta <h1> el título principal de la página, posteriormente el párrafo (entre <p>) y la palabra amazing que al ir dentro de la etiqueta <strong> aparece en negrita.

Vamos a modificar la página para añadirle diversos elementos.

LISTAS

Una lista es una estructura que engloba un conjunto de elementos que la componen. Existen dos tipos de listas, por un lado las listas desordenadas y por otro lado las listas ordenadas. En el caso de que la lista no mantenga ningún orden concreto (por ejemplo la lista de ingredientes de una receta) recibe el nombre de lista desordenada, si se quiere establecer un orden concreto, como por ejemplo, en la clasificación de la Liga de fútbol, hablamos de lista ordenada.

Los elementos que componen la lista se representan con la etiqueta <li> en ambos casos. Esta etiqueta es equivalente a un párrafo en cuanto a su contenido y por lo tanto, es un elemento de bloque.

La lista ordenada se representa con la etiqueta <ol>. Esta etiqueta, además de los globales, admite varios atributos, de los que estuidaremos:

 reversed.- invierte el orden

 start.- establece en qué número empieza la lista, por defecto será 1  type, que indica qué tipo de numeral se va a usar:

o 1: números

o a: letras minúsculas o A: letras mayúsculas o I: números romanos

o i: números romanos en minúscula

(16)

La página web quedaría:

Si queremos editar una lista desordenada, a diferencia de la anterior está asociada a la etiqueta <ul>, además, no es necesario usar los atributos. Por ejemplo:

(17)

Si queremos editar una lista anidada:

Lo que daría lugar a algo así:

LOS ENCABEZADOS

(18)

Lo que quedaría:

EJERCICIOS

Ejercicio 1.- Diseña un código HTML que tenga como resultado el siguiente texto:

(19)

SOLUCIÓN AL EJERCICIO 1

(20)

LAS TABLAS

Una tabla (que en código html se denota por <table>) es un elemento de bloque que se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

Las filas de una tabla se representan con la etiqueta <tr> y solamente contienen celdas o <td>. Cada fila debe contener el mismo número de celdas, las cuales pueden contener cualquier texto en su interior.

El atributo border se usa para dibujar bordes de separación con las celdas.

EJEMPLO

El siguiente código:

Corresponde a la siguiente tabla

(21)

EJEMPLO

Con esta instrucción conseguiríamos que la segunda fila ocupara 3 celdas, quedando una cosa como la que se muestra a continuación:

EJEMPLO 2

(22)

EJERCICIOS

1.- Crea un código HTML que haga una tabla de 3 filas y 3 columnas, con borde de tipo 3. En cada celda tiene que aparecer un nombre de una persona de clase.

2.- Modifica el código anterior para que la segunda columna ocupe 2 celdas

(23)

(24)

(25)

IMÁGENES

En HTML las imágenes son elementos en línea. Así, al insertar una imagen en un documento, se alineará con el resto del texto o, en el caso de varias imágenes seguidas, aparecerán junto a la otra siempre que el ancho lo permita.

Las imágenes se representan con la etiqueta <img>, la cual no va acompañada de etiqueta de cierre (no existe </img>). El archivo correspondiente a la imagen se referencia estableciendo la ruta al mismo con el atributo src. Es conveniente incluir el atributo alt=_______ que nos permite introducir un texto alternativo en el caso de que no cargue la imagen.

La ruta a la imagen se establece desde el directorio, donde se encuentra el documento HTML que se está visualizando. La barra / es el separador de directorios. En el caso de que se trate de una imagen externa debemos introducir la dirección completa.

Un ejemplo de imagen sería

<img

src=http://as01.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png alt=”Real Madrid”/>

El código HTML nos quedaría

(26)

Para obtener la dirección de la imagen tenemos que abrirla en el explorador, pulsar con el botón de la derecha sobre ella y pulsar “Copiar ruta del enlace”.

INSERCIÓN DE ENLACES

En HTML también podemos insertar enlaces que al pulsarlos nos abran nuevas páginas, para ello, tenemos que usar la etiqueta <a href=”dirección de la página>Texto</a>

Un ejemplo sería:

Que daría lugar a una página como se muestra:

EJERCICIOS

1.- Diseña un código HTML que dé lugar a una página en la que veamos una tabla de 1 fila y dos columnas. En cada una de las celdas tiene que haber un enlace a una página.

(27)

Se debe visualizar:

(28)

PERSONALIZACION DE LA PÁGINA

CSS es el lenguaje utilizado para definir el modo de presentar el código HTML a la hora de visualizarlo con el navegador.

Para vincular un código CSS a una estructura HTML tenemos varias posibilidades:

 en un atributo HTML con el atributo style.- el atributo style se puede incluir en cualquier etiqueta y permite insertar directamente código CSS como valor de dicho atributo. A su vez, las diferentes instrucciones incluidas se separan por punto y coma. Esta manera de incluir el código CSS es desaconsejable. Ejemplo:

Lo que daría una página:

(29)

 En un archivo independiente.- Es la mejor manera de incluir código CSS. El archivo asociado tendrá extensión .css y se situará en una carpeta diferente al de los documentos HTML. Para incluir un documento CSS es preciso insertar la siguiente etiqueta en la cabecera de los documentos HTML a los que se quiera aplicar:

Donde “css/estilo.css” se correspondería con el nombre del archivo en el que tenemos recogidos los estilos a aplicar.

En nuestro caso, la última opción va a ser la que usemos. Thimble ya nos proporciona por defecto un archivo de estilo.

El archivo style.css será el archivo en el que modifiquemos todos los elementos relativos al formato y a la presentación del documento.

(30)

EL LENGUAJE CSS

El lenguaje CSS se usa para dar formato a una web y para poder modificar elementos por separado de la web que estemos diseñando.

Para ello, debemos tener diseñado el archivo .html de tal manera que podamos hacer referencia a los elementos que queremos modificar.

Por defecto el archivo de estilo viene de la siguiente manera:

Esto quiere decir que todo lo que esté dentro de la etiqueta <body> estará afectado por los requisitos de estilo que aparecen dentro de las llaves

MODIFICACIONES DE TEXTO

Se pueden hacer diversas modificaciones al texto, básicamente las mismas que se pueden hacer en un editor de textos tipo Word. Las que vamos a usar son las siguientes:

1.- Alineación de texto. Se usa text-align: las opciones que tenemos:

o Left o Right o Center o Justify

2.- Subrayado.- Se usa text-decoration: posteriormente se añadirá:

o Underline.- subrayado o Overline.- encima del texto o Line-through.- tachado

3.- Tamaño del texto.- Se usa font-size Define el tamaño del texto contenido. Los valores en los que podemos especificar la unidad de medida son:

o Pixeles (px) o Puntos (pt)

(31)

o También se pueden usar tamaños estándar  x-small

 small  médium  large  x-large

4.- Tipo de fuente.- Usaremos el comando font-family: seguido del tipo de fuente que queremos utilizar entre comillas

5.- Sombreado del texto.- Se usa text-shadow: posteriormente se usa el tamaño del sombreado:

Con todo esto, la página que nos quedaría sería:

COLORES

Para modificar el color del texto que incluye un elemento se utiliza la propiedad color. Para especificar el color podemos usar varias técnicas:

 Nombre del color en inglés

(32)

 Proporción de cada RGB en porcentajes: rgb (100%,5%,36%)

 Proporción de cada valor RGB más un valor de 0 a 1 que indica la transparencia del color rgb(100,25,36,0.5)

Podemos modificar, tanto el color de la letra como el color del fondo

 Para modificar el color de la fuente usaremos color:

 Para modificar el color del fondo usaremos background-color:

Nos quedaría una cosa de esta manera:

CÓMO HACER PARA MODIFICAR SÓLO UN ELEMENTO

Cuando editamos el código del archivo .css estamos introduciendo cambios que afectan a todo el cuerpo de la página, pero si queremos modificar un elemento concreto de la página, debemos realizar otra operación.

(33)

El nombre que le hayamos puesto servirá para identificarlo en el archivo .css, para eso, usamos #identificador, es decir, en el archivo .css:

De esta manera estaré actuando sólo sobre el elemento al que afecta el #, la página que estamos modificando quedará:

Es decir, sólo quedará modificado el texto del párrafo.

También podemos dividir la página en distintas partes usando la etiqueta <div id=”nombre”> y actuar sobre la división correspondiente.

LOS BORDES

En un elemento HTML, además de un color de fondo se puede añadir un borde alrededor del mismo. El borde no tiene por qué rodear completamente al elemento, ya que se puede optar por establecer un borde independiente en la parte superior, inferior, derecha o izquierda. Otra posibilidad es establecer bordes con estilos diferentes en cada una de las zonas del elemento.

Las propiedades de borde serán:

1.- Añadir grosor al borde de los cuatro lados: se usa border-width y se establece en pixels (px) opcionalmente se puede añadir a cada lado usando:

(34)

2.- Tipo de trazo con el que se dibuja el borde: se usa border-style, los valores que se le añaden a continuación son:

 Solid (línea continua)  Dashed (línea discontinua)  Dotted (línea punteada)  Doublé (línea continua doble)

3.- Color del borde.- Se usa border-color.

4.- Radio de curvatura de las esquinas del borde.- se usa boder-radius y se especifica en pixels.

MÁRGENES

(35)

1.- margin.- representa el espacio entre un elemento y los elementos que lo rodean, o el borde del elemento que lo contiene. Como unidad se utiliza el pixel (px) o porcentaje.

2.- padding.- Representa el espacioi o margen interno entre un elemento y su contenido. De esta manera, es el elemento contenedor el que fuerza que los elementos interiores se despeguen de su borde. Acepta las mismas propiedades que margin.

También existe la posibilidad de modificar solamente uno de los márgenes, para ellos usaremos:

 Para modificar el margen de la izquierda margin-left  Para modificar el margen de la derecha margin-right  Para modificar el margen superior margin-top

 Para modificar el margen inferior margin-botton

También podemos modificar el ancho y alto con las propiedades width y heigth especificando en px el tamaño que queremos para el contenedor de texto.

POSICIONAMIENTO

El posicionamiento se usa para hacer que el navegador muestre en posiciones distintas a la original determinados elementos. Los elementos que vamos a usar son:

 position: static.- es el valor por defecto que, después de cada elemento de bloque realiza un salto de línea

 position: relative.- de cara al resto de elementos de la página, un elemento con este valor ocupará el mismo espacio que si su valor fuese static, se puede obligar al navegador a desplazar l aposición donde lo dibujará usando las propiedades top, bottom, left y right, las cuales desplazar´na el elemento hacia el lado seleccionado.

 position-absolute.- al aplicar este valor, el elemtno se sitúa en la esquina superior izquierda del elemento que lo contien. Además, hay que tener en cuenta que se despega del documento, es decir, que para el resto de elementos, la posición se interpreta como si no estuviera ocupando espacio en el documento, de forma similar a si se situara en una capa superior.

 margin-top y margin-left.- Permite mover un elemento. Sin embargo, si se usa esto, el elemento deja de situarse respecto al elemento que lo contiene y emplea todo el documento como referencia.

ESTABLECER UNA IMAGEN DE FONDO

Para establecer una imagen de fondo en la página se usan las siguientes propiedades:

 background-image.- su valor será la ruta a la imagen deseada (igual que al introducir imágenes normales)

 background-position.- en el caso de que la imagen sea más pequeña que el elemento esta propiedad establece la alineación vertical y horizontal de la misma. Se establecen dos valores separados por espacio:

(36)

o La alineación vertical: top, center o bottom.

 background-repeat.- si la imagen es más pequeña que el elemento se repitirá, por defecto horizontal y verticalmente hasta ocupar todo el espacio disponible. Este comportamiento se puede modificar con los valores:

o no-repeat.- no se repite

o repeat-x.- se repite horizontalmente o repeat-y.- se repite verticalmente.

CÓMO CREAR PÁGINAS MULTIPANTALLA

Si queremos crear páginas multipantalla, debemos agregar una archivo html por cada pantalla que querramos tener. Para agregar pantalla tenemos que pulsar el botón + que hay en la esquina superior izquierda: