Cabecera

Cabecera <head>
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/REC-

html401/strict.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 7</title>
<style type="text/css>
<link rel=“stylesheet" type="text/css" href=“estilos.css">
Body
 bgcolor
 background
 text, link, vlink y alink dando un valor a estos atributos podemos modificar el color de
texto, vínculo (por defecto azul), vínculo visitado (por defecto morado) y vínculo activo
(por defecto rojo) respectivamente para toda la página
 leftmargin, topmargin, marginwidth, marginheigth
 scroll (yes/no): no es estándar permite quitar ó poner las barras de desplazamiento en
pantalla si el contenido sobrepasa las dimensiones de la pantalla
Manejo de textos
 <b> : texto en negrita
 <i> : texto en itálica
 <u> : texto subrayado
 <s> : texto tachado
 <sup> : para los superíndices
 <sub> : para subíndices
 <strike>: texto también tachado
 <small>: texto mas pequeño es acumulativo
 <big>: texto mas grande es acumulativo
 <tt> : texto en formato maquina de escribir
 <pre> : Cuando queremos que aparezca un texto tal y como lo hemos puesto
 <blink>: si quiero que parpadee el texto
 <abbr> : texto es una abreviatura
 <acronym>:texto es un acrónimo
 <dfn>: texto afectado es una definición de un término
Tanto <abbr>,<acronym>,<dfn> pueden llevar el atributo title= “nombre” que nos va a indicar
el significado completo de la abreviatura, el acrónimo ó la definición: Los navegadores suelen
mostrar un borde punteado debajo del texto y al poner el ratón sobre el sale lo que es
 <cite> … texto </cite> texto es una referencia a otras fuentes generalmente el autor
 <address> . texto .</address> texto es la información de contacto de una persona
 <blockquote> : texto es una cita textual de un párrafo. El texto entre esa etiqueta
aparece con márgenes Puede tener el atributo cite= “url” para indicar de donde se
saco el texto
 <q>: texto es una cita textual de una frase
 <var>: el texto es una variable de u programa
 <kbd>: dice el texto que el usuario debe introducir en una aplicación informatica
 <sampo>: texto con formato ejemplo
 <marquee>: permite incluir un texto móvil, horizontal ó vertical . Algunos de sus
atributos
o align: alineacion del texto (top |middle |bottom)
o behavior: como se mueve el texto ( scroll | slide | alternate)
o bgcolor: color fondo letrero
o direction: direccion movimiento (right | left |top)
o loop: número de veces se produce el movimiento (n | infinite )
o width: ancho del letrero
Símbolos especiales
&lt (<) &lg (>) &amp (&) &quot (“) &apos (‘) &nbsp (espacio en blanco)
Listas
 Listas desordenadas: <ul type=square/circle/disc> <li></li> </ul>
 Listas ordenadas:
o <ol>: Puede tener los siguientes atributos:
 type (1/I/i/A/a) que sirve para cambiar el tipo de viñeta que aparece
antes de todos los elementos de la lista (numérica, romanos
mayúscula, romanos minúscula, alfabético mayúscula, alfabético
minúscula).
 compact que hace que se muestre la lista lo más compacta posible.
 start sirve para definir el valor de comienzo de la numeración de la
lista
o Para declarar cada elemento de la lista se usa la etiqueta <li>….</li>. En esta se
puede omitir el cierre . Puede tener como atributos:
 type para un elemento en concreto de la lista

 value para definir el número por el que se continua la numeración de
la lista
 Listas descriptivas:
o La etiqueta <dl> …………</dl> sirve para encerrar al conjunto de elementos que
forman la lista.
o La etiqueta <dt> …. </dt> encierra el término
o La etiqueta <dd> ….</dd> encierra la definición
Imágenes
 <img > es la etiqueta utilizada para insertar imágenes. No tiene cierre y tiene un
atributo obligatorio src (source) . Además de este puede llevar los siguientes atributos:
 src: especifica el nombre del fichero gráfico que contiene la imagen ó la ruta donde
está es decir su URL. Los estándares son los formatos gif y jpg, aunque las últimas
versiones ya admiten también el formato png
 title: recoge un texto para ponerle un titulo
 border: sirve para indicar el borde de la imagen por defecto vale cero
 alt: es una descripción corta de la imagen y se verá cuando un navegador no puede
mostrar una imagen ó al ponernos con el ratón sobre ella
 longdesc: no es habitual pero contiene la dirección donde se puede ver información
sobre la imagen
 width: indica el ancho en píxeles con el que se muestra la imagen. Puede indicarse con
un número (pixeles) ó con un porcentaje (20%) bien con respecto al elemento en el
que esta ó a bien a la página si la imagen no está contenida en un elemento.
 height: indica el alto en píxeles con el que se muestra la imagen. Se indica como el
ancho
 align: sirve para indicar como se alinea una imagen respecto al texto que la acompaña.
Puede ser top (coloca el punto más alto de la imagen coincidiendo con el alto de la
línea de texto actual), middle (alinea el punto medio en altura de la imagen con la base
del texto), bottom (valor por defecto, alinea el punto más bajo de la imagen con la
base del texto), left (pone la imagen a la izquierda del texto) y right (coloca la imagen a
la derecha del texto). Normalmente se emplean los dos últimos Cuando se usa align no
se deja ningún espacio en blanco entre las imágenes y los elementos que siguen. En
estos casos se puede usar el atributo vspace= “x” y hspace = “x” siendo x el numero
de pixeles de espacio a añadir a la derecha e izquierda de la imagen ó bien arriba y
abajo
Mapa de imágenes
 <img> sirve para insertar la imagen y usaremos un atributo de esa etiqueta que es
usemap donde pondremos con un # el “#nombre” del mapa que estará declarado en la
etiqueta map
 <map> para poder definir las zonas. Tiene un atributo name para poner el nombre que
identifica a ese mapa
 <area> para cada una de las zonas. Puede tener los atributos:
o href para indicar la URL a la que se accede al pinchar sobre el área
o shape para decir el tipo de área que se define ( default | rect | circle | poly )
o coords para indicar las coordenadas del área separadas por comas ej: (X1, Y1,
X2,Y2). En el caso de polígonos si las dos últimas coordenadas no son iguales a
las primeras se cierra el polígono de forma automática
ENLACES
 <a> ……………. </a> Pero no es suficiente solo con poner un texto en esta etiqueta ya
que además necesitamos decirle donde queremos que vaya para lo cual necesitamos
el atributo href en el cual indicaremos la URL del recurso al que queremos enlazar :
o Una pagina en el mismo directorio: pagina2.html
o Una página en nivel superior: ../pagina2.html
o Una página en dos niveles superior: ../../pagina2.html
o Una pagina en otra ruta del mismo sitio
http://www.ejemplo.com/ruta4/pagina2.html
(absoluta) ../../../ruta4/pagina2.html (relativa)
o Una página en un nivel inferior: ruta5/pagina2.html
 Una imagen también puede ser un hiperenlace si la metemos dentro de la etiqueta

<a> :<a href= “pagina.html”> <img src = “imagen.gif”> </a>
ENLACES INTERNOS (PUNTO DE FIJACION ó ANCLA)

Para poner un ancla se usa la etiqueta <a> pero en este caso utilizando el atributo: name que
sirve para indicar el lugar de destino del enlace. Ese nombre lo vamos a inventar, va a ir entre
comillas y no puede tener espacios en blanco ni caracteres especiales (investigar id)
Por ejemplo: si tengo una página ejemplo.html y desde el texto de esa página que dice ver
clasificación quiero ir a otro sitio de la página donde esta esa clasificación tendremos que
poner en el lugar de destino un ancla con un nombre pero justo en el punto al que queremos ir.
A ese nombre (ancla) nos referiremos en la URL del sitio de partida es decir:
<p> Los animales son seres vivos, <a href= “#ancla1”> ver clasificaciön </a>, que nacen crecen
(en el lugar de la página donde este la clasificación pondremos esta línea para el ancla)
<a name = “ancla1”> Clasificación </a> de los animales……….
Puede ocurrir que el lugar donde queremos ir este en otra página. En ese caso pondremos la
línea del ancla en la otra página, justo en el lugar al que queremos ir, y en nuestra página en el
lugar de partida escribiremos la siguiente línea
<p> Los animales son seres vivos, <a href= “pagina2.html#ancla1”> ver clasificacion </a> , que
nacen crecen se reproducen y mueren …
target es otro atributo de la etiqueta <a> que nos permite abrir un vínculo en una nueva
ventana con lo que el usuario va a tener acceso a la página que llama y a la pagina llamada.
El atributo target puede tener distintos valores que hacen que el documento referenciado se
muestren en:
 _blank en una nueva ventana

 _self en la misma ventana (por defecto)
 _parent en la ventana padre de la actual
 _top usando todo el espacio de la ventana
Tablas
La etiqueta <table> puede tener muchos atributos :
 border tamaño del borde exterior de la tabla. Si no queremos borde se pone 0

 align alineación de la tabla respecto a la página (center, right, left )
 width ancho de la tabla en pixeles ó en porcentaje %
 height alto de la tabla en pixeles ó en porcentaje%
 background imagen de fondo de la tabla
 bgcolor color de fondo de la tabla
 bordercolor color de borde de la tabla
 cellspacing espacio entre celdas
 cellpadding espacio entre la celda y su contenido
<caption> … </caption> es una etiqueta que se puede poner justo detrás de la etiqueta
<table> y va a permitir poner el título de la tabla que además puede estar formateado con
otras etiquetas de HTML y puede tener el atributo align (top/ bottom. (IE: left, rigth, center)
Frames
La etiqueta <frameset> es la que va a indicar al navegador que existen ventanas “marcos” y

además cuanto ocupa cada uno de ellos entre comas.
Sus atributos más habituales:
 cols si la división de la ventana principal es vertical (columnas)

 rows si la división es horizontal (filas)
El tamaño es decir el valor de esos dos atributos puede estar expresado como:
número entero el tamaño se indica de forma absoluta en pixeles
número entero seguido de % indica un porcentaje del espacio disponible
número entero seguido de * el tamaño se indica de forma relativa al espacio sobrante
Ejemplos:
<frameset rows= “30% ,*”> …………………….</frameset> dos frames horizontales
<frameset cols= “100, 200 , * “> ……………..</frameset> 3 frames verticales
Esa etiqueta puede también tener otros atributos; frameborder, framecolor ó framespacing
Además la etiqueta <frameset> va a contener dentro de ella una declaración por cada una de
las divisiones que se han hecho de la pantalla y para ello usa la etiqueta <frame>
<frame> va a indicar al navegador las características de cada ventana y no tiene etiqueta de

cierre. Sus posibles atributos son:
 src indica donde esta el documento (página) que va a cargarse en esa ventana
 name asigna un nombre a la ventana ó al frame para poder referirnos a el con el
atributo target
 noresize es un atributo boleando si se pone el marco no será redimensionable por el
usuario
 scrolling controla el uso de barras de desplazamiento en el marco (auto | yes |no) por
defecto es auto y sale cuando hay un trozo de la página que no cabe
 frameborder si quiero tener borde(1) ó no (0), en el caso de que queramos quitarlo a
todos se pondrá en frameset
 framecolor indica el color del marco
 marginheigth y marginwidth indica el espacio entre el contenido y los límites
horizontales y verticales respectivamente del marco
Cuando pulsamos en un enlace situado en un marco el documento al que llamamos se carga
en el mismo marco pero podemos hacer que se cargue en otro marco distinto poniendo el
nombre del marco de destino en el atributo target
<a href=“destino.html” target= “ventana_derecha”> enlace </a>
El atributo target puede tener los valores:
 _blank el navegador carga el recurso del destino en una nueva ventana

 _self el navegador carga el recurso del destino en la misma ventana
 _parent el navegador carga el recurso del destino en el marco padre del actual
 _top el navegador carga el recurso del destino en la ventana completa
Puedes hacer marcos flotantes con la etiqueta <iframe>
FORMULARIOS
Los formularios más sencillos se pueden crear usando solo las etiquetas <form> y <input>
<form> ---</form> sirve para encerrar todo el contenido del formulario (botones, cuadros de
texto, listas despegables). Sus posibles atributos :
 action indica la URL donde se envían los datos (dirección del programa que los
procesará)
 method método http usado para enviar el formulario al servidor: post ó get
 enctype tipo de codificación empleada al enviar el formulario al servidor. Solo se usa
explícitamente en los formularios que nos permiten enviar archivos Se suele poner
text/plain
 accept lista separada por comas de los tipos de archivos que acepta el servidor
 name permite indicar un nombre para el formulario se usa en los scripts en el cliente
 id, accept-charset, onsubmit, onreset
La mayoría de formularios usan solo los dos primeros:
 action para indicar la URL de la aplicación del servidor que por un lado va a procesar
los datos que mete el usuario y por otro se encarga de generar la respuesta que nos da
el navegador . Realmente sirve para indicar que quiero hacer con el formulario
 method que indica la forma en que se envían los datos del formulario al servidor. Este
atributo hace referencia al método HTTP que no es algo propio de HTML. Los dos
valores que se usan son:
o GET (admite 500 bytes como máximo, no permite adjuntar archivos con el
formulario y los datos enviados se ven en la barra de direcciones del
navegador)
o POST permite el envío de mucha mas información y (pasa los datos de forma
oculta)
Se suele usar el método GET cuando el formulario no modifica la información (ejemplo es una
búsqueda) y POST cuando la modifica (insertamos, modificamos ó borramos información)
Los elementos de un formulario (cuadros de texto, botones) se llaman también campos y

controles de formulario y la mayoría se declaran dentro de la etiqueta <form> usando la
etiqueta <input> que no tiene cierre y que va a dar lugar a distintos tipos de formulario
dependiendo del valor que presente su atributo type
Los atributos comunes a todos los tipos son:
 type (text | password | checkbox | radio | submit | reset | button | file | hidden |
image ) indica el tipo de control que se incluye en ese formulario
 name da un nombre al formulario es imprescindible para que el servidor lo pueda
procesar
 value asigna un valor inicial al cuadro de texto del control
 size tamaño inicial (se refiere al nº de caracteres en campos de texto y de password)
en los demás pixeles
 maxlength máximo nº de caracteres que se pueden escribir en el cuadro (para texto y
password)
 checked para controles (checkbox y radiobutton ) nos deja indicar la opción
preseleccionada
 src para los controles que permitan crear botones con imágenes indica la URL de la
imagen
 alt para describir el control
 tabindex = “n” nos permite indicar el orden de tabulación dentro del formulario. Ese
orden sirve para indicar que orden se sigue a la hora de rellenar un formulario y dar al
tabulador. El elemento tabindex =1 sera el primero, el 2 el segundo etc
 readonly el contenido del control se ve pero no se puede modificar. Solo se podrá
cambiar usando scripts
 disabled el control aparece deshabilitado y su valor no se envía al servidor con el resto
de los datos
Otros elementos de un formulario son: los menús de selección <select> y los cuadros de texto
multilínea <texarea>
FORMULARIOS TEXTO
Es el elemento más usado en los formularios. Al ejecutarse aparece un cuadro de texto vacio ó
con el valor por defecto en el que el usuario meterá información
Atributos: type, name, size, value, maxlength, title
Si no pongo ningún tipo en un campo input lo toma tipo text
<form>
<p> Nombre
<input type = “text” name = “nombre” value = “valor por defecto” size= “20”
maxlength = “30” readonly = “readonly” > .
</form>
El atributo name es el más importante en los campos del formulario ya que si no se pone los
datos del formulario no se envían al servidor. Este valor será el nombre que usa la aplicación
del servidor para obtener el valor de este campo de formulario.
El atributo value se suele poner en aquellos formularios que sirven para modificar datos
El formulario tiene ya un tamaño predeterminado que varia según navegador pero el atributo
size es bueno para campos muy grandes y pequeños
El atributo maxlength que sirve para limitar el nº de caracteres que podemos introducir
resulta útil para valores de códigos postales, nº de la seguridad social etc
El atributo title hace que salga un texto explicativo si paso el ratón por encima
EJEMPLOS DE OTROS FORMULARIOS

<form>
<p> Introduce la clave
<input type = “password” name = “Clave” size= “20” maxlength= “6” > .
</form>
<form>
<p> Tipo de trabajo
<input type = “checkbox” name = “uno” value = “1” > Profesor.
<input type = “checkbox” name = “dos” value = “1” > Ayudante.
</form>
<form>
<p> Elige una opcion

<input type = “radio” name = “sexo” value =“m” >mujer
<input type = “radio” name = “sexo” value =“h” >hombre
</form>
<form>
<input type = “submit” name = “botonenvio” value = “Pulsa” >
</form>
<form>
<input type = “reset” name = “reseeteo” value =“Refrescar” >
</form>
<input type = “button” name = “boton” value = “Pulsame” onclick = “alert(„Hola Mundo‟)” >
<input type = “file” name = “fichero” >
<input type = “hidden” name = “URL anterior” value = “/provincia/campos” >
<input type = “image” name = “imagen” src= “ enviar.png” >
FORMULARIOS DE TEXTO MULTILINEA
<textarea> que va a contener un texto más menos largo entre su etiqueta de inicio y su
etiqueta de fin.
Esta etiqueta puede tener como atributos:
 name para indicar el nombre del control

 cols para indicar el numero de líneas de la caja de texto
 rows indica el numero de caracteres visibles de cada línea
 wrap tiene tres valores posibles
 off es el valor por defecto en Netscape y hace que el texto se muestre en una sola
línea hasta que demos ENTER
 soft valor por defecto en IE pasa de forma automática a la siguiente línea cuando se
llega al final del área reservada pero al enviarlo lo junta en una sola línea
 hard como antes pero al enviar guarda el formato
<form>
<texarea name="texto“ rows="10“ cols=“15">
Esto es una prueba de texto multilinea para poder ver que hace el texto.
</textarea>
</form>
CUADROS DE SELECCIÓN

Utilizan la etiqueta <select> que tiene comienzo y final y sirve para mostrar un menu con una
serie de opciones de forma que el usuario pueda elegir una o varias. Existen dos formas de
mostrarlas: como una lista con desplazamiento, o usando un menu desplegable. Para poner las
distintas opciones usaremos la etiqueta <option> que solo tiene inicio
<form>
Elija un color:<br>
<select name="color">
<option>Verde
<option selected>Negro
<option>Rojo
</select>
</form>
Esto aparecerá como una persiana despegable en la que se ve solo Verde y una flecha que nos
permite poder ver los demas valores
Poniendo <option selected > en una opción hace que esta sea la mostrada. Si ninguna opcion
lo lleva aparecera siempre la primera linea del menu
Si ponemos <select name = “color” size =“2”> serán visibles dos opciones y se vera una barra
de desplazamiento. Si se pone size = “” aparece la barra de desplazamiento
Si ponemos <select name = “color” size =“2” multiple> nos permitirá seleccionar mas de una
de las opciones teniendo presionada la tecla CTROL. En este caso podríamos tener
preseleccionados varias opciones
Si usamos el atributo value por ejemplo <option value =“V”> Verde entonces significa que
enviara al navegador solo V es decir el valor que toma el campo tipo name color al seleccionar
esa opcion. Podemos poner value =“” y aparece una opcion en blano
FORMULARIOS AVANZADOS
Utilizan la etiqueta <fieldset> para agrupar controles ó campos del formulario a los que va a
encerrar. El navegador muestra por defecto un borde resaltado para cada agrupación y
tambien la etiqueta <legend> que se incluye dentro de cada etiqueta <fieldset> y establece el
título que muestra el navegador para cada agrupación de elementos.
<form>
<fieldset> <legend>Datos personales</legend>
Nombre <br/> <input type="text" name="nombre" value="“ > <br/>
Apellidos <br/> <input type="text" name="apellidos" value="“ > <br/>
DNI <br/> <input type="text" name="dni" value="" size="10" maxlength="9“ >
</fieldset>
<fieldset> <legend>Datos de conexión</legend>
Nombre de usuario<br/> <input type="text" name="nombre" value="" maxlength="10“ > <br>
Contraseña<br/> <input type="password" name="password" value="" maxlength="10" /> <br>
Repite la contraseña<br/> <input type="password" name="password2" value=""

maxlength="10”>
</fieldset>
</form>
Tambien utilizan la etiqueta <optgroup> con su atributo label para agrupar opciones
relacionadas, por medio de un título común, en los menús desplegables.
<select> <optgroup label="Colores primarios"> <option value="rojo">Rojo
<option value="azul">Azul <option value="amarillo">Amarillo </optgroup> <optgroup

label="Colores secundarios"> <option value="verde">Verde <option value="naranja">Naranja
<option value="violeta">Violeta
</optgroup> </select>
CABECERA 2
En la etiqueta <meta> pueden especificarse los atributos name y content para definir
metadatos
El atributo name indica el tipo de información, y el atributo content indica el valor de dicha
información.
El atributo http_equiv sirve para indicar que el valor establecido por este metadato puede ser
utilizado por el servidor al entregar la página al navegador del usuario.
Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de ellos se
utilizan en tantas páginas que se han convertido prácticamente en un estándar
<head>
<meta name="author" content="Juan Pérez" /> define el autor de la pagina
<meta name="generator" content=“NotePad++" /> define el programa con el que se crea
<meta name="copyright" content="librosweb.es" /> define el copyright del documento
<meta name="description" content=“Pagina de ventas IBM" /> define descripcción
<meta name="keywords" content="HTML,CSS,XML,JavaScript" /> define palabras clave
<meta name=”lang” content=”es”> para especificar lenguaje
<meta http-equiv="refresh" content=“5;URL=http://www.um.es" > para refrescar una página

pasado un cierto tiempo ó redirigirla a otra
<meta http-equiv=“ Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv=“ Content-Type" content="text/html; charset=ISO-8859-1" />
definen la codificación de caracteres del documento
</head>
Fuentes
Elementos Descripción Valores
font-
Familias de fuentes ^[^nombre-familia | familia-genérica^]^
family
font-style Estilo de la fuente normal | italic | oblique
Convierte las minúsculas a
font- mayúsculas pero mantienen
normal | small-caps
variant un tamaño inferior a las
mayúsculas
font- normal | bold | bolder | lighter | 100 | 200 |
Intensidad de la fuente
weight 300 | 400 | 500 | 600 | 700 | 800 | 900
xx-small | x-small | small | medium | large | x-
font-size Tamaño de la fuente large | xx-larger;; larger | smaller | ^longitud^
| ^porcentaje^
[ [ [ ^font-style^ || ^font-variant^ || ^font-
Atajo para establecer el resto
weight^ ]? ^font-size^ [ / ^line-height^ ]?
font de propiedades sobre las
^font-family^ ] | caption | icon | menu |
fuentes a la vez
message-box | small-caption | status-bar ]
Texto
Desplazamiento de la primera línea
text-indent ^[^longitud | porcentaje^]^
del texto
text-align Alineamiento del texto nleft | right | center | justify
Efectos de subrayado, tachado, [ none | [ underline || overline
text-decoration
parpadeo || line-through || blink ] ]
letter-spacing | Espacio entre caracteres | Espacio
normal | ^longitud^
word-spacing entre palabras
Transformaciones del texto a capitalize | uppercase |
text-transform
mayúsculas/minúsculas lowercase | none
Comportamiento de los espacios normal | pre | nowrap | pre-
white-space
dentro de los elementos wrap | pre-line
Márgenes
margin-top margin-right Tamaño del margen superior, ^longitud^ |
margin-bottom margin-left derecho, inferior e izquierdo ^porcentaje^| auto
Ancho para varios márgenes ^longitud^ |
margin
individuales ^porcentaje^| auto |
{1,4}
Relleno
padding-top padding-right Ancho del relleno superior, ^longitud^ |
padding-bottom padding-left derecho, inferior e izquierdo ^porcentaje^| auto
^longitud^ |
Tamaños para varios rellenos
padding ^porcentaje^| auto |
individuales
{1,4}
Bordes
border-top-width border- Anchura del borde
thin | medium | thick |
right-width border-bottom- superior, derecho,
^longitud^
width border-left-width inferior o izquierdo
Anchos de varios bordes thin | medium | thick |
border-width
individuales ^longitud^ {1,4}
border-top-color border- Color del borde
right-color border-bottom- superior, derecho, [ ^color^ | transparent ]
color border-left-color inferior o izquierdo
Color de varios bordes
border-color [ ^color^ | transparent ] {1,4}
individuales
border-top-style border- Estilo del borde [ none | hidden | dotted | dashed
right-style border-bottom- superior, derecho, | solid | double | groove | ridge |
style border-left-style inferior o izquierdo inset | outset ]
[ none | hidden | dotted | dashed
Estilo de varios bordes
border-style | solid | double | groove | ridge |
individuales
inset | outset ] {1,4}
Númeracion/Listas
Agregador de [ normal | none | [ ^texto^ | ûri^ | ^contador^ |
content contenido para :after attr(X) | open-quote | close-quote | no-open-quote |
y :before no-close-quote]+ ]
Especifica las marcas
quotes [ [ ^texto^ ^texto^ ]+ | none ]
para indicar las citas
counter-
Inicializa un contador [ [ [ îdentificador^ êntero^? ]+ | none ] ]
reset
counter- Incrementa un
[ [ [ îdentificador^ êntero^? ]+ | none ] ]
increment contador
[ disc | circle | square | decimal | decimal-leading-
Estilo aplicable a los
list-style- zero | lower-roman | upper-roman | lower-greek |
marcadores visuales
type lower-latin | upper-latin | armenian | georgian |
de las listas
lower-alpha | upper-alpha | none ]
Imagen aplicable a los
list-style-
marcadores visuales [ url("http://...") | none ]
image
de las listas
Posición dentro de la
list-style- lista de los elementos
[ inside | outside ]
position marcadores de las
listas
Tablas
caption-side Posición del título respecto a la tabla [top|bottom] ]
Control del algoritmo usado para el formato de las
table-layout [auto|fixed]
celdas, filas y columnas
border-
Selección del modelo de los bordes [ collapse|separate ]
collapse
border- ^longitud^
Espaciado entre los bordes de celdas adyacentes
spacing ^longitud^?
empty-cells Visibilidad de los bordes de celdas sin contenido [show | hide ]
Formato
[ inline | block | list-item | run-in | inline-block
| table | inline-table | table-row-group | table-
Comportamiento del
display header-group | table-footer-group | table-row |
contenedor
table-column-group | table-column | table-cell
| table-caption | none ]
Desplazamiento de la
top, right, caja(respecto al limite
[^longitud^| ^porcentaje^ | auto ]
bottom, left superior, derecho, inferior
o izquierdo del contenedor
float [left|right|none ]
Control de cajas adyacentes
clear none | left | right | both
a los float
Solapamiento de niveles de
z-index [auto | êntero_con_signo^ ]
capas
Sentido direccional de la
direction [ltr | rtl ]
escritura
CSS POSITION
Los valores de esta propiedad tiene los siguientes significados:
 static : La caja es una caja normal, situada de acuerdo al flujo normal. Las propiedades
'top', 'right', 'bottom' y 'left' no se aplican.
 relative : La posición de la caja se calcula de acuerdo al flujo normal (ésta se llama la
posición en el flujo normal). Luego la caja se desplaza de modo relativo a su posición
normal.
 absolute : La posición de la caja (y posiblemente el tamaño) se especifica con las
propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades especifican los
desplazamientos con respecto al bloque de contención de la caja. Las cajas
posicionadas absolutamente son quitadas del flujo normal. Esto significa que ellas no
tienen ningún impacto sobre la composición de los hermanos siguientes. También,
aunque las cajas posicionadas absolutamente tiene márgenes, no se cierran con
ningún otro margen.
 fixed : La posición de la caja se calcula de acuerdo al modelo 'absolute', pero además,
la caja se fija con respecto a alguna referencia visual, la pantalla. La caja no es afectada
por el scroll y debe definirse un Doctype
COLORES
#RRGGBB Color RGB (6 Valores

hexadecimales)
#RGB Notación simplificada (#RGB
= #RRGGBB)
rgb(R,G,B) Color RGB (3 valores de 0 a
255)
rgb(R%,G%,B%) Color RGB (3 valores
porcentuales)
Propiedad Descripción Valores
width Ancho [ <longitud> |
<porcentaje> | auto ]
min-width Ancho mínimo [ <longitud> |
<porcentaje> ]
max-width Ancho máximo [ <longitud> |
<porcentaje> | none ]
height Alto [ <longitud> |
<porcentaje> | auto ]
min-height Alto mínimo [ <longitud> |
<porcentaje> ]
max-height Alto máximo [ <longitud> |
<porcentaje> | none ]
line-height Altura entre las bases [ normal | <número> |
del texto <longitud> |
<porcentaje> ]
vertical-align Alineación vertical del [ baseline | sub |
texto super | top | text-top
| middle | bottom |
text-bottom |
<porcentaje> |
<longitud> ]
Propiedad Descripción Valores

overflow Comportamiento del [ visible | hidden |
contenido si se scroll | auto ]
desborda en la caja
clip Especifica la región [ rect (<longitud>,
visible del elemento <longitud>,
<longitud>,
<longitud>) | auto ]
visibility Visibilidad de las [ visible | hidden |
cajas collapse ]
FLOAT
Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en
absoluto. Puede especificarse para los elementos que generan cajas que no están posicionadas
absolutamente. Los valores de esta propiedad tiene los siguientes significados:
◦Left. El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye sobre
el costado derecho de la caja, comenzando en la parte superior (sujeto a la propiedad 'clear').
La propiedad 'display' es ignorada, a menos que tenga el valor 'none'.
◦Right. Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja,
comenzando en la parte superior.
◦None. La caja no es flotante.
POSITION
Los valores de esta propiedad tiene los siguientes significados:
 static La caja es una caja normal, situada de acuerdo al flujo normal. Las propiedades
'top', 'right', 'bottom' y 'left' no se aplican.
 relative La posición de la caja se calcula de acuerdo al flujo normal (ésta se llama la
posición en el flujo normal). Luego la caja se desplaza de modo relativo a su posición
normal.
 Absolute La posición de la caja (y posiblemente el tamaño) se especifica con las
propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades especifican los
desplazamientos con respecto al bloque de contención de la caja. Las cajas
posicionadas absolutamente son quitadas del flujo normal. Esto significa que ellas no
tienen ningún impacto sobre la composición de los hermanos siguientes. También,
aunque las cajas posicionadas absolutamente tiene márgenes, no se cierran con
ningún otro margen.
 Fixed La posición de la caja se calcula de acuerdo al modelo 'absolute', pero además, la
caja se fija con respecto a alguna referencia visual, la pantalla. La caja no es afectada
por el scroll y debe definirse un Doctype

Cabecera

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cabecera

Cargado por

Copyright:

Formatos disponibles

Cabecera <head>

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/REC-

<meta charset="UTF-8" />

<link rel=“stylesheet" type="text/css" href=“estilos.css">

 type para un elemento en concreto de la lista

 Una imagen también puede ser un hiperenlace si la metemos dentro de la etiqueta

ENLACES INTERNOS (PUNTO DE FIJACION ó ANCLA)

<a name = “ancla1”> Clasificación </a> de los animales……….

 _blank en una nueva ventana

La etiqueta <table> puede tener muchos atributos :

 border tamaño del borde exterior de la tabla. Si no queremos borde se pone 0

La etiqueta <frameset> es la que va a indicar al navegador que existen ventanas “marcos” y

Sus atributos más habituales:

 cols si la división de la ventana principal es vertical (columnas)

número entero el tamaño se indica de forma absoluta en pixeles

número entero seguido de % indica un porcentaje del espacio disponible

número entero seguido de * el tamaño se indica de forma relativa al espacio sobrante

<frameset rows= “30% ,*”> …………………….</frameset> dos frames horizontales

<frameset cols= “100, 200 , * “> ……………..</frameset> 3 frames verticales

<frame> va a indicar al navegador las características de cada ventana y no tiene etiqueta de

<a href=“destino.html” target= “ventana_derecha”> enlace </a>

El atributo target puede tener los valores:

 _blank el navegador carga el recurso del destino en una nueva ventana

Puedes hacer marcos flotantes con la etiqueta <iframe>

La mayoría de formularios usan solo los dos primeros:

Los elementos de un formulario (cuadros de texto, botones) se llaman también campos y

Los atributos comunes a todos los tipos son:

EJEMPLOS DE OTROS FORMULARIOS

<p> Introduce la clave

<p> Tipo de trabajo

<input type = “checkbox” name = “uno” value = “1” > Profesor.

<input type = “checkbox” name = “dos” value = “1” > Ayudante.

<p> Elige una opcion

<input type = “radio” name = “sexo” value =“h” >hombre

<input type = “submit” name = “botonenvio” value = “Pulsa” >

<input type = “reset” name = “reseeteo” value =“Refrescar” >

<input type = “file” name = “fichero” >

<input type = “hidden” name = “URL anterior” value = “/provincia/campos” >

<input type = “image” name = “imagen” src= “ enviar.png” >

FORMULARIOS DE TEXTO MULTILINEA

Esta etiqueta puede tener como atributos:

 name para indicar el nombre del control

<texarea name="texto“ rows="10“ cols=“15">

<fieldset> <legend>Datos personales</legend>

Nombre <br/> <input type="text" name="nombre" value="“ > <br/>

Apellidos <br/> <input type="text" name="apellidos" value="“ > <br/>

DNI <br/> <input type="text" name="dni" value="" size="10" maxlength="9“ >

<fieldset> <legend>Datos de conexión</legend>

Nombre de usuario<br/> <input type="text" name="nombre" value="" maxlength="10“ > <br>

Contraseña<br/> <input type="password" name="password" value="" maxlength="10" /> <br>

Repite la contraseña<br/> <input type="password" name="password2" value=""

<select> <optgroup label="Colores primarios"> <option value="rojo">Rojo

<option value="azul">Azul <option value="amarillo">Amarillo </optgroup> <optgroup

<meta name="author" content="Juan Pérez" /> define el autor de la pagina

<meta name="generator" content=“NotePad++" /> define el programa con el que se crea

<meta name="copyright" content="librosweb.es" /> define el copyright del documento

<meta name="description" content=“Pagina de ventas IBM" /> define descripcción

<meta name="keywords" content="HTML,CSS,XML,JavaScript" /> define palabras clave

<meta name=”lang” content=”es”> para especificar lenguaje

<meta http-equiv="refresh" content=“5;URL=http://www.um.es" > para refrescar una página

<meta http-equiv=“ Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv=“ Content-Type" content="text/html; charset=ISO-8859-1" />

definen la codificación de caracteres del documento