You are on page 1of 160

(IFCD0110) CONFECCIN Y PUBLICACIN DE PGINAS WEB

MF0950_2
Construccin de pginas web
MF0951_2
Integracin de componentes software en
pginas web
MF0952_2
Publicacin de pginas web
MP0278
Mdulo de prcticas profesionales no laborales

(IFCD0110) CONFECCIN Y PUBLICACIN DE PGINAS WEB

MF0950_2: Construccin de pginas web


UF1302 Construccin de pginas web con
el lenguaje de marcas
09 diciembre 05 enero
UF1303 Elaboracin de hojas de estilo
07 enero 26 enero
UF1304 Elaboracin de plantillas y
formularios
27 enero 11 febrero

UF1302:
Construccin
de pginas
web con el
lenguaje de
marcas

UF1302:
Construccin
de pginas
web con el
lenguaje de
marcas

Dnde descargar esta presentacin:

bit.ly/UF1302

LOS LENGUAJES DE MARCAS


QU ES UN LENGUAJE DE MARCAS
Un lenguaje de marcas permite codificar un documento, incorporando
etiquetas o marcas que contienen informacin adicional acerca de la
estructura, formato y presentacin del texto.
GML (Generalized Markup Language) fue el primer lenguaje de
marcas, creado por IBM en los aos 60.
Entre los lenguajes de marcas ms conocidos estn HTML, XHTML,
XML, Latex, RTF, ...

LOS LENGUAJES DE MARCAS


HISTORIA DEL LENGUAJE HTML
El lenguaje HTML (HyperText Markup Language) es un lenguaje de
marcas que incorpora al texto etiquetas o marcas que contienen
informacin sobre su estructura o su presentacin.
En 1991, Sir Tim Berners-Lee public el primer documento HTML; el
lenguaje posea 22 etiquetas y era relativamente sencillo.
HTML es el lenguaje que un navegador web va interpretando para
visualizar una pgina web. El lenguaje ha ido evolucionando y la
versin HTML 4.1 es la ltima versin del lenguaje en la actualidad.

HTML4, XHTML, HTML5 , CSS Y JavaScript


LA FAMILIA HTML
Es importante distinguir entre los diferentes miembros de esta familia,
html4 y xhtml son estndares establecidos por el W3C (World Wide
Web Consortium), mientras que html5 an esta en proceso de
aprobacin, en el W3C an no es una recomendacin definitiva.
Los estndares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML
4.0 y el HTML 4.01, aunque actualmente ya se trabaja en el HTML 5.
Hasta el momento la versin de HTML ms utilizada ha venido siendo
la 4.01. Esta versin fue definida por la W3C (Comit Internacional
que define los estndares web) hace varios aos.

HTML4, XHTML, HTML5 , CSS Y JavaScript


SE DEBE USAR HTML5
Como se ha dicho, la versin de HTML 4.01 es la ms usada
actualmente. HTML5 incorpora mejoras (nuevas etiquetas),
destacando la posibilidad de definir dilogos, nuevas funcionalidades
de audio y video, e informacin sobre autores y licencias.
En HTML5 se hace intensivo de CSS y se eliminarn algunas etiquetas
(<frame>, <applet>, ). Si nos acostumbramos a utilizar HTML4.01
y CSS, nicamente tendremos que aprender las nuevas etiquetas
cuando HTML5 est finalmente definido.

HTML4, XHTML, HTML5 , CSS Y JavaScript


HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms
que una adaptacin de HTML al lenguaje XML.
Esquema de la evolucin de HTML y XHTML

El W3C recomienda el uso de XHTML:

el documento debe comenzar con la declaracin de XML


<?xml version="1.0" encoding="utf-8"?>
el elemento title es obligatorio
todos los nombres de los elementos se escriben en
minsculas, al igual que los de los atributos
las etiquetas de cierre de los elementos son obligatorias
los elementos vacos requieren espacio antes de />

HTML4, XHTML, HTML5 , CSS Y JavaScript


Caractersticas de una pgina web bien construida

Una web se tiene que poder ver en todos los navegadores


Separar el contenido del diseo
El cdigo HTML tiene que ser vlido (http://validator.w3.org/)
El cdigo CSS tambin vlido (http://jigsaw.w3.org/css-validator/)
Sitio web debe ser accesible
Usar los estndares web:

HTML: para hacer pginas web.

CSS: para separar contenido y diseo.

JavaScript: s, JavaScript es un estndar.

Flash, Java, y otros formatos para contenidos externos.

XML: para estructurar datos.

PNG: formato grfico.

SVG: grficos vectoriales.

SOAP: para compartir informacin entre aplicaciones por HTTP.

MathML: para mostrar frmulas matemticas en la pgina web.

HTML4, XHTML, HTML5 , CSS Y JavaScript


HTML Y CSS
Originalmente, las pginas HTML slo incluan informacin sobre sus
contenidos de texto e imgenes. Con el desarrollo del estndar HTML,
las pginas empezaron a incluir tambin informacin sobre el
aspecto de sus contenidos: tipos de letra, colores y mrgenes.
Incluir en una misma pgina HTML los contenidos, el diseo y la
programacin complica en exceso su mantenimiento.
Normalmente, los contenidos y el diseo de la pgina web son
responsabilidad de diferentes personas, por lo que es conveniente
separarlos.
CSS es el mecanismo que permite separar los contenidos definidos
mediante HTML y el aspecto que deben presentar esos contenidos. Un
buen ejemplo de esto es :http://www.csszengarden.com.

HTML4, XHTML, HTML5 , CSS Y JavaScript


HTML Y JavaScript
JavaScript es un lenguaje de programacin que se utiliza para crear
pginas web dinmicas.
Una pgina web dinmica es aquella que incorpora efectos como texto
que aparece y desaparece, animaciones, acciones que se activan al
pulsar botones y ventanas con mensajes de aviso al usuario.
Tcnicamente, JavaScript es un lenguaje de programacin
interpretado, por lo que no es necesario compilar los programas para
ejecutarlos. En otras palabras, los programas escritos con JavaScript
se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.
* A pesar de su nombre, JavaScript no guarda ninguna relacin con el lenguaje de programacin Java.

HTML4, XHTML, HTML5 , CSS Y JavaScript


IMPORTANCIA DE W3C
Como se puede ver, en la produccin de una pgina web hay
involucradas diferentes tecnologas que han de encajar entre ellas
para obtener un resultado ptimo tanto funcional como grficamente.
Los estndares establecidos por el W3C, son los que establecen el
contexto en el que todas estas tecnologas funcionan juntas.
El resultado del respeto a los estndares es como mnimo una mayor
facilidad para el mantenimiento, menores costes generados por
trfico de datos, ampliacin del pblico que puede recibir la
informacin y mejor trato por parte de los motores de bsqueda.
Un trmino ligado a los estndares es accesiblidad que hace
referencia a la posibilidad de cualquier persona de acceder a los
contenidos independientemente de cualquier limitacin que tenga.

UF1302: Construccin de pginas web con el lenguaje de marcas

1. EL lenguaje HTML
2. Marcado de texto
3. Reglas de etiquetas
4. Las listas
5. Los vnculos
6. Las imgenes
7. Las tablas
8. Frames
9. Iframes

El lenguaje HTML

El lenguaje html Definicin


DEFINICIN
Para la creacin de pginas web se usa el lenguaje llamado
Hypertext Markup Language o HTML.
HTML es un lenguaje de marcado o lenguaje de marcas que es
una forma de codificar un documento que, junto con el texto,
incorpora etiquetas o marcas que contienen informacin
adicional acerca de la estructura del texto.
Dicho de otro modo, un archivo de texto puede incluir marcas
(etiquetas o etiquetas) que lo transformen en un documento
html.

El lenguaje html W3C


W3C
La principal actividad del W3C es desarrollar protocolos y directrices
que aseguren el crecimiento de la Web a largo plazo. Los
estndares del W3C definen las partes claves que hacen que la
World Wide Web funcione.
http://www.w3c.es/
Es el W3C quien determina cmo es una etiqueta HTML, cul es su
uso ms adecuado, qu atributos tiene, qu valores pueden tomar
esos atributos, etc.

El lenguaje html Etiquetas


ETIQUETAS
HTML consta de varias etiquetas fundamentales, incluyendo
elementos y sus atributos y la declaracin de tipo de documento,
que veremos ms adelante.
Cada etiqueta tiene un significado para el programa que las
interpreta (por lo general, un navegador web), que muestra los
contenidos del documento segn le indican esas etiquetas.
Todas las etiquetas HTML tienen la misma estructura: siempre
aparece como una palabra o grupo de palabras situada entre los
caracteres menor que (<) y mayor que (>):
<nombre-de-elemento atributo="valor">texto</nombre-de-elemento>
* Si la etiqueta carece de significado para el navegador que la interpreta, aunque tenga una estructura correcta, es
ignorada mostrando slo el contenido

El lenguaje html Interpretacin de html


QU PROGRAMAS INTERPRETAN LAS ETIQUETAS HTML?
Los agentes de usuarios, como los navegadores web. Actualmente
existen varios programas de este tipo. A la hora de ver pginas web
cualquiera de ellos cumple con su cometido aunque con diferencias.
Las diferencias a la hora de mostrar las pginas web vienen dadas
por la forma de implementar los estndares en los navegadores.
Estas diferencias actualmente son pocas pero siguen haciendo de
Internet Explorer el menos indicado para desarrollar nuestras
pginas web ya que es el ms creativo a la hora de implementar
los estndares.
*Hay otros agentes de usuario, como lectores de pantalla que tambin interpretan
HTML.

El lenguaje html Edicin de html


QU PROGRAMAS PERMITEN EDITAR ARCHIVOS HTML?
Como ya dijimos un documento HTML es un archivo de texto, por lo
que cualquier editor de texto permite editarlo.
El bloc de notas de Windows por ejemplo es perfectamente vlido
para editar pginas web.
COMO CREAMOS UN DOCUMENTO HTML?
Usando el bloc de notas de Windows, creamos un nuevo documento
de texto, y lo guardamos con extensin html. El nombre del
documento ser, por ejemplo, mipagina.html.
EJERCICIO
Si lo abrimos con un navegador veremos que lo que muestra es una pgina
en blanco. Al escribir cdigo html, el navegador interpretar las etiquetas.

El lenguaje html Estructura bsica de un documento HTML


ESTRUCTURA BSICA DE UN DOCUMENTO XHTML
Aqu podemos ver la estructura del documento que vamos a crear, vemos varias etiquetas,
explicaremos dentro de poco que es cada una de ellas. Antes vamos a ver el cdigo funcionando.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo</title>
</head>
<body>
<p>Ejemplo<br>de una pgina en html</p>
</body>
</html>

El lenguaje html Estructura bsica de un documento HTML


<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo</title>
</head>
<body>
<p>Ejemplo<br>de una pgina en html</p>
</body>
</html>

En la caja naranja vemos la etiqueta que indica el tipo de


documento que estamos usando; le dice al navegador que
especificaciones tiene que usar para interpretar el cdigo html.
Si no se especifica el tipo de documento el navegador intenta
adaptarse al documento html.

El lenguaje html Estructura bsica de un documento HTML


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo<br />de una p&aacute;gina en html</p>
</body>

</html>

<html> </html>

Indica al navegador que el documento de texto que esta


leyendo es un documento HTML. Esta etiqueta se abre al
inicio del archivo y se cierra al final del mismo.

El lenguaje html Estructura bsica de un documento HTML


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo<br>de una p&aacute;gina en html</p>
</body>
</html>

<head> </head>

Aqu se detalla el encabezado de la pgina WEB. Esta


etiqueta se abre a continuacin de <html>.
La etiqueta <meta> indica la codificacin del documento
La etiqueta <title> indica el ttulo del documento web.

<body> </body>

Cuerpo de la pgina donde se despliega el contenido que se


ver en pantalla. Esta etiqueta se abre despus de cerrar el
encabezamiento con </head> y se extiende hasta elfinal de la
pgina; se cierra con </html>.

El lenguaje html Estructura bsica de un documento HTML

Esto es lo que muestra un navegador web a partir del cdigo html que hemos visto antes.

El lenguaje html Estructura bsica de un documento HTML


<meta> Con este tipo de etiqueta establecemos una serie de
datos que dan informacin acerca del documento.
No hay una lista de metados estndar, aunque el
uso repetido de algunos los ha transformado
prcticamente en uno.
<meta name=autor content=Certificado de Profesionalidad />
<meta name=generator content=WordPress />
<meta name=robots content=index, follow />
<meta name=keywords content=web, css, html />
<meta name=description content=Curso web />

El lenguaje html Comentarios


COMENTARIOS
Los comentarios son bloques de texto que aparecen en los ficheros
de HTML pero que son ignorados por el visualizador (navegador)
y por tanto no sern vistos por el usuario.
Se suelen emplear para dejar indicaciones que faciliten el
mantenimiento y la modificacin de un documento
HTML.
Para introducir un comentario en un documento HTML hay
que anteponer los caracteres <!-- y finalizarlo con -->.
EJERCICIO
Introducir el comentario <!-- esto es un comentario --> en un
documento web.

El lenguaje html Codificacin de caracteres


CODIFICACIN DE CARACTERES
Los ordenadores utilizan largas secuencias de ceros y uno para
manejar la informacin y los caracteres de los textos son
informacin.
Para traducir esos unos y ceros a letras se usa la codificacin de
caracteres estableciendo una secuencia de ceros y uno como
equivalente a un carcter, por ejemplo en ASCII 1000001 equivale
a una A .
El conjunto de equivalencias entre secuencias de ceros y unos y los
caracteres se denomina juego de caracteres.
Hay diferentes codificaciones; se recomienda usar UTF-8, una
codificacin universal que contiene caracteres del castellano.

El lenguaje html Codificacin de caracteres


Resumiendo. Las codificaciones de caracteres nacieron con las
computadoras como un mecanismo de traducir el cdigo binario
de una computadora a texto legible por humanos.
En HTML. Es recomendable usar el estndar unicode (UTF).
Cmo especificamos el juego de caracteres que usamos en
un documento HTML?
En la cabecera del documento html, es decir entre <head></head>
escribiremos
Para utf-8:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Para ASCII:
<meta http-equiv="content-type" content="text/html; charset=US-ASCII">
Para ISO:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

El lenguaje html Codificacin de caracteres


El ms recomendable es UTF-8, ya que siendo compatible con ASCII
tambin permite colocar caracteres de cualquier tipo.
No obstante es imprescindible que lo editemos con un programa que
guarde los documentos HTML codificados como UFT-8 para que la
interpretacin sea correcta.
Veamos como especificamos el juego de caracteres en nuestro
ejemplo:
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo<br>de una pgina en html</p>
</body>
</html>

Marcado de texto

Marcado de texto
HTML dispone de varias etiquetas que permiten controlar el aspecto
del texto en el navegador. Es recomendable evitar este tipo de
etiquetas centrndonos en un uso orientado a la semntica y no al
visualizacin.
Aunque su uso es posible, el control del aspecto se ha de dejar a
CSS para que HTML sea el encargado de indicar la estructura de la
informacin que estamos mostrando.
Para modificar el aspecto del texto se recurre normalmente a los
distintos tipos de letra y a sus aspectos (negrita, superndices,...).

Marcado de texto
A la hora de usar estas etiquetas tenemos que hacerlo de forma
coherente con la funcin de la etiqueta. Es decir, no usar <sup>
para hacer la fuente ms pequea, hacerlo por que su contenido es
un superndice. Veamos algunas:
ETIQUETA

DESCRIPCIN

ETIQUETA

DESCRIPCIN

<B>

Texto en negrita

<h1>

Encabezado nivel 1

<U>

Texto subrayado

<h2>

Encabezado nivel 2

<FONT>

Fuente, color y tamao de esta

<h3>

Encabezado nivel 3

<I>

Texto en cursiva

<h4>

Encabezado nivel 4

<PRE>

Texto preformateado

<h5>

Encabezado nivel 5

<TT>

Texto tipo mquina de escribir

<h6>

Encabezado nivel 6

<BLOCKQUOTE>

Texto destacado (cita)

<P>

Prrafo

<SUP>

Superndice

<BR>

Salto de lnea

<SUB>

Subndice

<HR>

Lnea divisoria

<S>

Texto tachado

&nbsp;

Espacio en blanco

Marcado de texto
<H1><H6>
Los encabezados, que sirven como ttulos para porciones de
contenido, ayudan a organizar la informacin de un documento
para lograr una mejor comprensin del contenido.
Existen seis niveles de encabezados (h1 a h6) que establecer ttulos y
subttulos jerarquizando la informacin en el documento, esta
jerarqua la establecen los niveles. Gracias a esto, los encabezados
de un documento pueden ser interpretados como su tabla de
contenidos.
Los navegadores pueden mostrar encabezados con tamaos de
fuente mayores que aquellos utilizados para el texto regular. El
tamao usualmente depende del nivel del encabezado: disminuye
cuando el nivel del encabezado es menor.
<h1>Ttulo de nivel 1</h1>

Marcado de texto
<B>
El elemento HTML <b> hace que su contenido sea mostrado en
negrita. Este elemento es en un buen candidato para ser
desaprobado en futuras versiones de HTML, de modo que la
recomendacin general es dejar de usarlo.
<b>Texto que se ver en negrita</b>

Un sustituto adecuado es la etiqueta <strong> que da a su contenido


nfasis fuerte y es usualmente mostrado por los navegadores en
negrita.
Existe una gran diferencia entre estos dos mtodos: <b> no provee
informacin semntica.

Marcado de texto
<U>
El elemento HTML <u> hace que su contenido se muestre
subrayado.
Esta etiqueta no debera de utilizarse, dejando el subrayado a CSS.
<u>Texto subrayado</u>
<FONT>
Esta etiqueta est estrictamente prohibida en los nuevos
estndares, no obstante los navegadores la pueden interpretar.
<font size= " 5" face= "Arial" color= "#000000" >
Texto</font>
Estamos haciendo que el navegador muestre el texto usando la tipografa Arial,
con un tamao de 5pt en color negro.

Marcado de texto
<I>
El elemento HTML <i> hace que su contenido sea representado en
estilo de fuente itlica. Es un buen candidato para ser desaprobado
en versiones futuras de HTML, de modo que la recomendacin
general es dejar de utilizarlo.
<i>estilo de fuente itlica</i>.
Una alternativa a <i> es <em>, que da nfasis a su contenido y es
habitualmente mostrado con estilo de fuente itlica.
Como con <b>, <i> no provee informacin semntica mientras
que
<em> si.

Marcado de texto
<PRE>
El texto preformateado <pre> se aplica cuando queremos que en la
presentacin final del documento se respeten los espacios y retornos
de carro que hayamos puesto en el texto fuente.
Adems se utilizar un tipo de letra parecido al de una mquina de
escribir, ms pequeo que el del texto normal. Este estilo de
texto puede ser adecuado, por ejemplo, para poner cdigo de
programacin.
<pre>
function decirHola(){
alert(Hola);
}
</pre>

Marcado de texto
<TT>
El elemento HTML tt representa a su contenido como texto de
mquina de escribir (con una fuente de ancho fijo o monoespaciada).
<tt>es mostrado con una fuente de ancho fijo</tt>
es mostrado con una fuente de ancho fijo
En una fuente monoespaciadad todos los caracteres ocupan el mismo ancho, por ejemplo la i ocupa el
mismo ancho que la m.

Marcado de texto
<BLOCKQUOTE>
Inserta citas en forma de bloque. Como es un elemento a nivel de
bloque es til, por ejemplo, para insertar citas largas que se dividen
en prrafos. Los navegadores generalmente muestran el texto
dentro de este elemento con un margen izquierdo mayor.
<blockquote>
<p>El poder de la web est en su universalidad. El acceso para
todos sin importar su discapacidad es un aspecto esencial.</p>
</blockquote>
Cuando la cita slo ocupa una lnea usar <q>

Marcado de texto
<SUB>
Hace que su contenido sea representado como subndice. Los
subndices son usualmente representados con un tamao de fuente
menor y un poco ms abajo que el texto normal. Puede ser til en
algunas ciencias como, por ejemplo, la qumica.
<p>H<sub>2</sub>O</p> H20
<SUP>
Hace que su contenido sea representado como superndice. Los
superndices son usualmente mostrados con un tamao de fuente
menor y un poco ms arriba que el texto normal. Puede ser til en
algunas ciencias como, por ejemplo, matemticas.
<p>f(x) = x<sup>3</sup></p> f(x)=x3

Marcado de texto
<P>
El elemento HTML <p> inserta un prrafo en el documento. Los
prrafos son elementos a nivel de bloque que constituyen una
estructura bsica de un documento y son usualmente mostrados por
los navegadores con mrgenes superior e inferior.
Los prrafos no pueden contener elementos a nivel de bloque,
incluyendo otros prrafos.
<p>Esto es un prrafo</p>

<BR>
Inserta un salto de lnea donde se coloque. Puede colocar tantas
como desee y se insertar un salto de lnea por cada una de ellas.
<p>Esto es un<br> prrafo con un salto de lnea</p>

Marcado de texto
<HR>
Al igual que <br>, inserta un salto de lnea pero adems muestra una
lnea en pantalla. El atributo width, si se pone, indica el ancho de
esa lnea (en pxeles o en %). Si se omite ocupa el 100%.
<p>Esto es un<hr width=="80%"> prrafo con lnea
divisoria</p>

&nbsp;
Esto no es una etiqueta, pero es til para formatear textos. Inserta
un espacio en blanco.
Los navegadores web cuando se encuentran con varios espacios en blanco seguidos
en el cdigo HTML slo muestran uno, por lo que se utiliza este referencia al carcter
espacio en blanco tantas veces como necesitemos.

<p>Insetar dos espacios en blanco &nbsp;&nbsp; que se vean</p>

Marcado de texto
Acabamos de ver una referencia a un carcter o entidad de referencia
HTML, pero hay muchas ms.
Se utilizan para poner smbolos que no estn presentes en el juego
de caracteres que estemos usando en nuestro documento o bien para
smbolos que no sabemos como escribir. En el siguiente enlace se
puede ver un listado de esas entidades:
http://es.wikipedia.org/wiki/Ayuda:Caracteres_especiales

Vemos algunos ejemplos tiles de entidades:


ENTIDAD

ENTIDAD

ENTIDAD

&lt;

<

&quot;

"

&gt;

>

&gt;

>

&amp;

&

&reg;

&copy;

(C)

&aacute;

&euro;

&ntilde;

&uuml;

EJERCICIO(Ref. html_001)
Replicar el siguiente texto haciendo uso de las etiquetas y entidades
html que se han visto hasta el momento.
TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos
OBJETIVOS: Adquirir soltura en la escritura de html. Repasar los contenidos vistos.

ELECCIONES DEL 20D (Ttulo de tamao h1)

El domingo 20 de diciembre de 2015 se celebrarn elecciones a Cortes Generales en


Espaa.6 Sern las duodcimas desde la transicin a la democracia y las primeras con
Felipe VI como rey.

Candidaturas (Ttulo de tamao h2)

1. Partido Popular:Mariano Rajoy Brey.


2. Partido Socialista Obrero Espao: Pedro Snchez
3.Izquierda Unida: Alberto Garzn Espinosa.
...
10. Partido Animalista Contra el Maltrato Animal: Silvia Barquero Nogales
* Titular el documento: Elecciones Generales 20D

EJERCICIO(Ref. html_002)
Replicar el texto de una carta de acuse de recibo.

TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos


OBJETIVOS: Adquirir soltura en la escritura de html. Repasar los contenidos vistos.
Oviedo, 10 de noviembre de 2015
Manuel Prez Garca
C/Serrano 25, 1D
33001 Oviedo
Estimado Manu,
Teniendo en cuenta tu prxima fecha de jubilacin y los aos trabajados en la empresa,
me es grato agradecerte toda tu dedicacin durante todos este tiempo.
Simplemente transmitirte mis mejores deseos para el futuro.
Un saludo cordial,
Mariano Prez
Director de Recursos Humanos
* Titular el documento: Jubilacin de Manu

EJERCICIO(Ref. html_003)
Confeccionar un curriculum vitae en formato HTML.

TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos


OBJETIVOS: Adquirir soltura en la escritura de html. Repasar los contenidos vistos.
Isabel Girn Garca
C/Esperanza 25, 6A
33542 Llanes

CURRICULUM VITAE

ESTUDIOS FINALIZADOS
Graduado en ESO, 2009-2014
Colegio Ursulinas de Oviedo
Certificado de Profesionalidad IFC0110 Programacin de pginas web, 2015-2016
Competencias adquiridas: Crear y publicar pginas web que integren textos, imgenes y
otros elementos, utilizando lenguajes de marcas, segn especificaciones dadas.
EXPERIENCIA PROFESIONAL
Seresco, Mayo 2016
Prcticas profesionales: desarrollo de pgina web para el Despacho de Abogados Ura

Reglas de
etiquetas

Las etiquetas

Como ya hemos comentado anteriormente, las etiquetas son


elementos especiales que se encargan de indicarle al navegador que
acciones debe emprender, es decir cmo debe interpretar el
documento HTML.
Todas las etiquetas responden a la misma estructura y siempre
aparece como una palabra o frase situada entre los caracteres < y >.

Las etiquetas
Las etiquetas puede ser abiertas o cerradas. Las primeras precisan
aparecer una sola vez para que se realice la accin que tiene
asociada, en cambio las segundas necesitan una aparicin al principio
y otra al final del bloque para el cual queremos que se realice alguna
operacin.
CERRADA
<etiqueta atributo="valor">texto</etiqueta >
ABIERTA
<etiqueta atributo="valor" />
Ejemplos:
Cerrada: <p align="center">Hola</p>
Abierta : <img src= "imagen.jpg" width="200px" height= "150px" />

Las etiquetas
Algo fundamental es no dejar etiquetas abiertas si no se trata de
etiquetas de este tipo. Son muchas las razones para no hacerlo
ms all de que de este modo no se respeta el estndar del W3C.
Una razn es que el navegador al interpretar el documento HTML crea
un modelo del documento(DOM) que podemos utilizar para acceder a
los elementos de dicho documento mediante algn lenguaje de
programacin, normalmente Javascript. Una etiqueta mal escrita
pude llegar a dar problemas para posteriormente acceder al DOM.
Visualmente se pueden generar efectos extraos, desde que el
contenido se muestre descolocado hasta que falle la aplicacin de
reglas de visualizacin en CSS.
En definitiva, que un navegador no detenga la interpretacin de un
documento HTML con errores de sintaxis y no informe de ello, no
significa que el documento est correcto.

Las etiquetas
ATRIBUTOS
Casi todas las etiquetas pueden llevar ms de un atributo; en la
mayora de los casos estos atributos no son obligatorios.
<etiqueta atributo="valor" atributo="valor" ></etiqueta>
Estos atributos tienen diferentes cometidos, modifican la forma en
que el navegador interpreta la etiqueta, le indican que tiene que
mostrar, permiten aplicar estilos CSS

Las etiquetas
Generalmente dentro de un bloque delimitado por una etiqueta se
pueden incluir otras etiquetas , con lo que el efecto de todas ellas se
acumula sobre los distintos bloques de texto especificados.
Por ejemplo, dentro de la etiqueta <HTML> se encuentra la etiqueta
<HEAD> y tambin la etiqueta <BODY> , y a su vez dentro de estas
tambin habrn contenidas otras etiquetas.
Ejemplo:
<p> Mira esta imagen:<br />
<img src= "imagen.jpg" width="200px" height= "150px" />
</p>
En HTML las tabulaciones, los espacios en blanco y los saltos de linea se ven en el navegador con un nico
espacio en blanco.

Las etiquetas
APERTURA Y CIERRE DE ETIQUETAS. ANIDAMIENTO.
Como se ha dicho las etiquetas HTML pueden contener a otras.
Veamos un ejemplo.
<p> Ejemplo de anidamiento, <em>es importante</em></p>
En el texto del ejemplo superior se ve que las etiquetas contenidas
se abren y se cierran dentro de la etiqueta contenedora.
El siguiente ejemplo sera incorrecto.
<p> Ejemplo de anidamiento, <em>es importante</p></em>

Las etiquetas
ELEMENTOS DE BLOQUE Y EN LINEA.
El estndar HTML clasifica a todos sus elementos en dos grandes
grupos: elementos en lnea y elementos de bloque.
Los elementos de bloque siempre empiezan en una nueva
lnea y ocupan todo el espacio disponible hasta el final de la
lnea.
Por su parte, los
elementos en lnea no
empiezan
necesariamente en
nueva lnea y slo
ocupan el espacio
necesario para
mostrar sus
contenidos.

Las etiquetas

Las etiquetas
Las caractersticas de estos dos tipos de elementos hacen que un
elemento de bloque no pueda estar anidado en un elemento
de de linea.

Las etiquetas
Los elementos en lnea definidos por HTML son: a, abbr,
acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img,
input, kbd, label, q, s, samp, select, small, span, strike, strong,
sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML son: address,
blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5,
h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
Los siguientes elementos tambin se considera que son de
bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque
segn las circunstancias: button, del, iframe, ins, map,
object, script.

Las listas

Las listas
Elementos fundamentales en la organizacin de contenidos. Son muy
utilizadas para estructurar la informacin en lugar de las tablas cuyo
uso est orientado a un tipo de datos particular.
Las listas se escriben en HTML de forma muy sencilla: se dice dnde
empieza la lista, dnde empieza cada item de la lista y dnde
acaba la lista. Las etiquetas que se utilicen en cada caso deben
aparecer al principio de lnea, o al menos sin texto por delante
(slo espacios o tabulaciones).
Podemos recurrir a tipos distintos de listas, cada una con una
presentacin diferente: lista no numeradas y listas numeradas.
Las listas se pueden anidar, es decir, en el lugar donde debera ir uno de los trminos
de la lista se pone una nueva lista, que por supuesto no tiene porqu ser del mismo
tipo.

Las listas Listas desordenadas


LISTAS DESORDENADAS
Todas las listas consisten en un bloque delimitado por un
etiqueta que indica que es una lista y el tipo, dentro de la cual
hay otras etiquetas que corresponden con los items de esa lista.
Una lista desordenada se indica con <ul> </ul> y los items con <li> tal
como vemos a continuacin:

<ul >
<li>Huevos</li>
<li>Azcar</li>
<li>Ralladura de limn</li>
<li>Un yogurt</li>
<li>Aceite</li>
</ul>

Huevos
Azcar
Ralladura de limn
Un yogurt
Aceite

Las listas Listas desordenadas


Esta listas pueden ser anidadas, es
decir, contener o estar contenidas
por otras listas. De hecho, la
versatilidad es tal, que tambin
pueden anidarse con listas
ordenadas.

<ul >

<li>Azcar</li>
<li>Harina</li>
<li>Para el perro:
<ul>

Para lograr un cdigo correcto, las


sub-listas deben ser insertadas
dentro de los tems y no
directamente como contenido de la
lista padre.

<li>Correa</li>
<li>Mordedor</li>
<ul>
<li>

A la derecha se puede ver un


ejemplo de dos listas desordenadas
anidadas.

</ul>

Las listas Listas ordenadas


LISTAS ORDENADAS
Son iguales a las listas desordenadas en lo tocante a sitanxis,
excepto por la etiqueta o etiqueta que las define y el representacin
por parte del navegador.
Para listas ordenadas es <ol></ol>.

<ol >

<li>Huevos</li>
<li>Azcar</li>
<li>Harina</li>
</ol>

1. Huevos
2. Azcar
3. Harina

EJERCICIO (Ref. html_004)


Replicar el documento HTML que presenta una lista no numerada.
OBJETIVOS: Manejar correctamente las etiquetas de listas no numeradas.
TIEMPO PARA RESOLVER EL EJERCICIO: 30 minutos

10 BUENOS PROPSITOS PARA 2016

Dejar de fumar; de este ao no pasa: ahorrars dinero y ganars salud.


Hacer ms deporte: dedicar al menos 30 minutos al da.
Aprender ingls de una vez por todas: apuntarse a una academia y tomarse el
ingls en serio desde el primer da.
..

EJERCICIO (Ref. html_005)


Replicar el documento HTML que presenta una lista ordenada.
OBJETIVOS: Manejar correctamente las etiquetas de listas ordenadas y
desordenadas.
TIEMPO PARA RESOLVER EL EJERCICIO: 30 minutos

CLASIFICACIN DE LA LIGA 2015-2016


EQUIPO
1. FC Barcelona
2. Atltico de Madrid
3. Real Madrid
4. Celta de Vigo
..
..
..
19. UD Las Palmas
20. Levante

PUNTOS
34
32
30
25

10
10

*Consejo: utilizar <font face=Courier New> y el smbolo del espacio en blanco


&nbsp; para elaborar la tabla con un aspecto ms uniforme

Las listas Listas de definicin


LISTAS DE DEFINICIN
Un caso particular de listas, los items estn compuestos por dos
elementos, el elemento a definir y la definicin.
El elemento HTML <dl> inserta una lista de definiciones, compuesta
por dos sub-elementos: los trminos <dt> y las descripciones <dd>.
En las listas de definiciones, los trminos pueden ser asociados a una
o ms descripciones y viceversa.
Veamos un ejemplo.

Las listas Listas de definicin


<html>
<head>
<title>Listas de definicin</title>
</head>
<body>
<p>Ingredientes:</p>
<dl>
<dt>Chocolate</dt>
<dd>Cacao</dd>
<dd>Azucar</dd>
<dd>Leche</dd>
<dt>Caramelo</dt>
<dd>Azucar</dd>
<dd>Colorantes</dd>
</dl>
</body>
</html>

Las listas Listas de definicin


Visualizacin del cdigo HTML
Ingredientes:
Chocolate
Cacao
Azucar
Leche
Caramelo
Azucar
Colorantes

EJERCICIO (Ref. html_006)


Utilizar una lista de definicin para mostrar la informacin de una
receta.
OBJETIVOS: Manejar correctamente las etiquetas de listas de definicin.
TIEMPO PARA RESOLVER EL EJERCICIO: 15 minutos

TARTA DE QUESO
INGREDIENTES
Galletas, unas 20-22
Nata lquida, 500 mililitros
Queso cremoso, 250 gramos
Mermelada de arndanos
Azcar blanca, 250 gramos
Mantequilla, 120 gramos
Un par de hojas de gelatina
PREPARACIN
Hidratar las lminas de gelatina con agua, las echamos en un recipiente y las
cubrimos con abundante agua durante varios minutos, hasta que las lminas
se hinchen, despus las escurrimos bien. Las metemos en el microondas en
otro recipiente vaco, y las ponemos a potencia media hasta que se derritan.

Los vnculos

Los vnculos
Los vnculos son uno de las elementos claves en las pginas web.
Establecen relaciones entre recursos dentro del WWW, basndose en la idea
de una simple referencia pero potenciada por la interactividad, es decir,
con un clic podemos acceder al contenido al que se hace referencia.
Los vnculos pueden ser clasificados como visuales (ubicados en el
contenido del documento) u ocultos (definiendo informacin relacional
generalizada).
Las etiquetas que definen estas referencias en HTML son :

<a></a>
<link>

Estas etiquetas, especialmente <a> tiene una serie de atributos muy


importantes que pueden proveer informacin para diferentes intrpretes como
los motores de bsqueda.

Los vnculos - Atributo href


<A>
Permite insertar referencias dentro del contenido de un documento. Estas
referencias puede ser locales, internas y externas.
Hay muchas formas de construir un enlace de este tipo al tener varios
atributos, pero es fundamental que al menos contenga el atributo href para
indicar a donde debe de apuntar el enlace, es decir, con que recurso
enlazar.
El lugar (dominio en algunos casos) en donde est el recurso har que el
enlace sea local (el recurso est en el mismo lugar que el documento que
contiene en enlace), interno (el recurso est en el mismo documento), o
externo (el recurso est en otra lugar).

Los vnculos - Atributo href


Veamos ejemplo sencillo para cada uno de los tipos de enlace:
Externo:

El atributo href contiene la informacin de donde se encuentra el recurso. En este


caso en un dominio externo

<a href="http://www.undominio.com" target="_blank">Un dominio</a>

Local:
En este caso href apunta a una pgina html que est en el mismo directorio que el
documento que contiene el enlace.

<a href="pagina2.html" target="_blank">Ver esto</a>

Interno:
En este caso href apunta a una posicin dentro del documento en el que est
el enlace.

<a href="#ancla1">Ir a </a>

Los vnculos - Atributo target


ENLACES EXTERNOS
El atributo target, que indica en donde se cargar el documento o
recurso al que hace referencia el atributo href.
Este atributo target pude tomar los siguientes valores:

_blank carga el recurso en una nueva ventana del navegador

_self abre el documento en el mismo marco.

_parent abre el documento en el set de marcos padre del marco actual.


Si no hay un set de marcos padre, se comporta igual que "_self".

_top abre el documento en el set de marcos padre del marco actual. Si


no hay un set de marcos padre, se comporta igual que "_self".
Por tanto el siguiente enlace abrir una nueva ventana/pestaa del
navegador en la que mostrar la pgina web en el dominio www.google.es
<a href="http://www.google.es/" target="_blank">Abre Ventana</a>

Los vnculos Marcadores o marcas


ENLACES INTERNOS
En los ejemplos de enlaces vimos uno que haca referencia a un contenido
dentro del documento que contena el enlace. Este tipo de enlace se le llama
marcador.
La insercin de una marca se hace con la etiqueta <A> y el atributo "id" que
asignar un nombre identificativo a la marca , justo delante de lo que
queremos ver con el vnculo.
<a id="marca">Texto que vamos a ver con el enlace</a>
Para hacer referencia a una marca establecida se utilizar tambin la
etiqueta <A> con el atributo "href" delante del texto que hace de vnculo,
como se muestra a continuacin:
<a href ="#marca">Texto que hace de vnculo</a>

EJERCICIO (Ref. Html_007)


Elaborar un documento web con vnculos internos.
OBJETIVOS: Familiarizarse con los vnculos internos. TIEMPO DE RESOLUCIN: 30 minutos
LOS DESTINOS MS ROMNTICOS
Hay algo ms romntico que un paseo con tu pareja con un maravilloso atardecer
como teln de fondo? Si uno de esos atardeceres, adems, se produce en alguna
ciudad llena de magia, como Verona, o Pars, la escena gana muchos ms puntos.
Verona
La ciudad de Verona es Patrimonio de la Humanidad declarado por la Unesco. Sus
numerosos puentes, supervivientes de la II Guerra Mundial, son el complemento
perfecto para un romntico paseo.
Ushuaia
Ushuaia, al sur de Argentina, es tambin conocida como la ciudad del fin del mundo. Es
la nica ciudad argentina al otro lado de los Andes y, adems, la ciudad ms austral del
mundo.
Roma
La capital de Italia es uno de los destinos romnticos. Djate sorprender por sus calles.

Los vnculos Link


El elemento HTML link es muy similar al elemento HTML debido a que se
utiliza para vincular a un documento con otros recursos. Pero a diferencia del
mismo, el elemento HTML link slo puede ser definido en el encabezado del
documento (<head>) y es usado para proveer informacin relacional acerca
del documento.
Por ejemplo, los autores pueden crear un vnculo a un documento que hace
de ndice para el documento actual, a una versin alternativa en otro idioma,
o una versin alternativa diseada para otro dispositivo (por ejemplo, una
impresora).
Un uso particular y muy comn del elemento <link> es para proveer un
archivo externo de hojas de estilo para el documento html.
<link type="text/css" href=estilos.css">

EJERCICIO (Ref. Html_008)


Realizar un documento web con informacin sobre 5 concursantes de Gran Hermano.
La informacin de cada cada concursante se guardar en un documento
independiente a modo de ficha, nombrado con el nombre del concursante. Entre la
informacin de cada concursante, incluir amistades, parentescos o relaciones
sentimentales con otros concursantes, de manera que se pueda acceder a ellos
mediante un enlace. Adems, crear al principio de cada documento los enlaces a cada
uno de los concursantes, como si de un men de navegacin se tratase.
OBJETIVOS: Plasmar en un ejercicio el uso bsico de los enlaces para poder acceder a
todos los recursos de un sitio. Construccin de mens usando listas para organizarlos.
SUGERENCIAS PARA LA RESOLUCIN: Crear una pgina de inicio (home) desde la que
enlazar todos los contenidos; o un men de navegacin en la parte superior alineado:
<h1><center>Men1&nbsp;&nbsp;Men2;&nbsp;&nbsp;Men3</center></h1>
TIEMPO PARA RESOLVER EL EJERCICIO: 90 minutos

EJERCICIO (Ref. Html_008): continuacin

Maite Suso Ricky Sofa Carolina


Nombre: Maite.
Edad: 46 aos.
Procedencia: Pamplona.
Profesin: Conductora de autobs.
Se define como: Una mujer luchadora, enrgica y llena de
energa positiva. Es capaz de superar las dificultades con
resistencia y endereza. Afirma ser una persona muy impulsiva y
con un carcter muy marcado. Es cabezota y testaruda. Presume
de ser una pamplonesa de pura cepa. Madre de Sofa.
Aficiones: Ir al gimnasio, el ciclismo y la naturaleza.

Las imgenes

Las imgenes
Hasta ahora slo hemos visto como se podra incluir texto o hacer referencia
a otros documentos, pero ya sabemos que el atractivo principal de una
pgina Web son las imgenes.
Vamos a ver ahora como incluir imgenes en un documento HTML , uno de
los elementos que a contribuido a que el trfico en Internet se haya
incrementado.
El elemento HTML <img> inserta una imagen en un documento, cuya
ubicacin se establece en el atributo "src".
<img src=imagen.jpg"/>

Las imgenes
Adems de indicar donde est al imagen en el atributo src, tambin podemos
indicar las diemensiones que ha de darle el navegador.
Para hacerlo se usan los atributos width y height del siguiente modo:
<img src=imagen.jpg" width="88" height="31" />
Los numeros 88 y 31 se refieren pxeles.

width: es el ancho que ha de tener la imagen.


height: es la altura que ha de tener la imagen.

Otros atributos de la etiqueta img es alt. El valor de este atributo provee una
alternativa textual para el contenido o propsito de la image, y por los tanto,
debe describir exactamente lo que la imagen intenta mostrar.
<img src="img/mapa-del-tesoro.jpg" alt="Este mapa muestra la ruta al
tesoro. debes doblar a la derecha dos veces y seguir derecho hasta
que lo encuentres." />

Las imgenes
Las imgenes resultan excelentes para mostrar informacin que es difcil de
explicar con texto. Pero no debes olvidar que las personas con discapacidades
visuales pueden no recibir su contenido.
Esta es la principal razn de la existencia del atributo "alt" (y su presencia
obligatoria en XHTML), el cual debera ser utilizado por los autores para
proveer una versin alternativa textual para la informacin mostrada en la
imagen o su propsito.
Atributo align
Esta etiqueta est en desuso, pero se ha utilizado tradicionalmiente para
alinear la imagen respecto a un texto.
<body>
Imagen y luego texto <img src="imagen.png" alt="Alineacin" align="left">
</body>

Las imgenes
Consideraciones a la hora de usar imgenes

A la hora de utilizar imgenes en una pgina web hay que tener


en cuenta que no es posible utilizar cualquier formato de imagen.
Las imgenes en formato BMP no estn comprimidas, y por tanto
hacen que la web sea ms pesada y la carga del documento
web ms lenta.
Los formatos de imagen recomendados son:

JPEG
GIF
PNG

Deben utilizarse herramientas y editores grficos para manipular y


comprimir imgenes. Los ms conocidos son GIMP y Adobe PhotoShop.

EJERCICIO (Ref. Html_009)

Elaborar artculo de noticias insertando imagen de la noticia.

OBJETIVOS: Familiarizarse con la insercin de imgenes en documentos web.


TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos
Garzn avisa de un estallido social que puede derivar en el auge del fascismo
El candidato de IU, Alberto Garzn, ha advertido de que la situacin
en Espaa es tan precaria que podra darse un estallido social, una
situacin que puede canalizarse bien por un proceso de "radicalidad"
democrtica, o por la va del auge del fascismo, como ha pasado en
Francia.
Oslo prohibir la circulacin de coches en 2019
Madrid se ahoga en contaminacin. Barcelona tambin ha tenido
serios problemas este ao. E incluso en ciudades en las que suele
llover habitualmente, como Oviedo, se han tenido que tomar
medidas anti polucin.

Mapas de imgenes
Mapas de imgenes

Los mapas de imgenes tienen la propiedad de permitir insertar


dentro de una imagen distintos enlaces a otras pginas web.
Para ello se definen distintas partes dentro de la imagen y a cada
una de ellas se le asigna un enlace.
1) El primer paso es insertar una imagen con la propiedad usemap
<img src='./miimage.png' usemap='#miMapaDeImagenes'>
2) En el segundo paso se define el mapa de la imagen:
<MAP name='miMapaDeImagenes'>

Mapas de imgenes
Mapas de imgenes (2)

Se definen las distintas zonas sensibles de la imagen con la


etiqueta <area>; este paso se realiza tantas veces como distintas
zonas se quieran definir. La etiqueta <area> usa las propiedades:

shape: tipo de rea: rect, poly o circle


coords: pares de coordenadas para definir el rea activa
href: indica la URL de la pgina de destino

Mapas de imgenes
Mapas de imgenes: ejemplo
Creamos un mapa de imgenes de 4 zonas en la siguiente imagen.
<img src="imagen.gif" usemap="#mapa_zonas" />
<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triang.html" />
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="rectangulo.html" />
<area shape="default" nohref="nohref" />
</map>

Mapas de imgenes
Cmo crear un mapa de imgenes

Para crear el mapa de imgenes necesitamos delimitar por medio


de lneas geomtricas imaginarias cada una de las reas por medio
de coordenadas.
Cada imagen es definida por unas dimensiones de ancho (X) y alto
(Y) y cada punto de la imagen puede ser definido por tanto
diciendo a que altura (x) y anchura (y) nos encontramos.

Mapas de imgenes
Tipos de reas

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">

Mapas de imgenes
Utilidades online

Manuales online en espaol:

http://www.canalip.com/blog/mapear-imgenes-online/
http://www.ciudadblogger.com/2014/05/como-mapear-imagenes-online.html
http://www.ite.educacion.es/formacion/materiales/107/cd/imagen/imagen1202.html

Herramientas:
http://github.com/summerstyle/summer
http://imagemap-generator.dariodomi.de/
http://www.mobilefish.com/services/image_map/image_map.php

EJERCICIO (Ref. Html_010)


Crear un mapa de bits similar al siguiente que dirija a distintos puntos de un sitio web.
OBJETIVOS: Familiarizarse con el uso de los mapas de imgenes.
TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos

Pgina Principal: Bienvenidos

EJERCICIO (Ref. Html_011)


Realizar un mapa de bits que se corresponda con un pas o provincia, y dirija a
distintas pginas web al pinchar en las distintas zonas de la imagen.
OBJETIVOS: Familiarizarse con el uso de los mapas de imgenes.
TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos

Las tablas

Las tablas
Las tablas en HTML son la forma de mostrar informacin y relacionarla. Pero
no son una herramienta con un enfoque visual.
El tipo de informacin para el que estn destinadas las tablas son datos
tabulares. Es decir, toda informacin almacenada en forma de filas y
columnas (campos y registros).
Dada la orientacin a los datos tabulares, las etiquetas HTML relacionadas
con ellas permiten representar no slo el contenido en forma de tabla,
tambin las relaciones entre los elementos de la informacin.
Veamos un ejemplo de tabla bsico

Las tablas
<table>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>

<td>Fila 1, columna 1</td>


<td>Fila 1, columna 2</td>
<td>Fila 1, columna 3</td>
<td>Fila 2, columna 1</td>
<td>Fila 2, columna 2</td>
<td>Fila 2, columna 3</td>
<td>Fila 3, columna 1</td>
<td>Fila 3, columna 2</td>
<td>Fila 3, columna 3</td>
<td>Fila 4, columna 1</td>
<td>Fila 4, columna 2</td>
<td>Fila 4, columna 3</td>

El elemento table define la


tabla.
El elemento tr define una fila
de la tabla.
El elemento td define una
celda normal de datos. stos
deben estar entre las
etiquetas tr.
Las filas siempre contiene
lasceldas, nunca al revs.

Las tablas
Para algunas tablas puede ser necesario unificar dos o ms
celdas en una sola que pasar a ocupar el lugar de aquellas
afectadas.
Estas unificaciones pueden ser llevadas a cabo con los atributos
rowspan (para unificacin vertical) y colspan (para
unificacin horizontal), ambos disponibles para celdas.

<table>
<tr>

<td>Fila 1, columna 1</td>


<td colspan="2">Fila 1, columna 2 y 3</td>

</tr>
<tr>
<td>Fila 2, columna 1</td>
<td>Fila 2, columna 2</td>
<td>Fila 2, columna 3</td>
</tr>
</table>

Las tablas
Veamos un ahora un ejemplo con
rowspan
<table>
<tr>

<td rowspan="2">Fila 1 y 2, columna 1</td>


<td colspan="2">Fila 1, columna 2 y 3</td>

</tr>
<tr>
<td>Fila 2, columna 2</td>
<td>Fila 2, columna 3</td>
</tr>
</table>

Celdas de encabezado
Las celdas de encabezado son un tipo especial de celda, la etiqueta
HTML para definirlas es <th>.
Estas celdas tienen caractersticas diferentes a las celdas normales al verse
en pantalla. Generalmente el texto se muestra centrado y en negrita.
Su uso aporta informacin que puede ser til para navegadores no visuales
y motores de bsqueda. Se usa normalmente con el atributo scope que
indica a que celdas aporta informacin de cabecera.
<table border="1">
<tr>
<th scope="col">Encabezado 1</th>
<th scope="col"> Encabezado 2</th>
<th scope="col"> Encabezado 3</th>
</tr>
<tr>
<td>Fila 2, columna 1</td>
<td>Fila 2, columna 2</td>
<td>Fila 2, columna 3</td>
</tr>

</table>

Las tablas Celdas de encabezado


Vemos en el ejemplo anterior que hemos usado el atributo scope
para la etiqueta th.
<th scope="col">Encabezado 1</th>
Este atributo puede tomar los siguientes valores:

row (fila): La celda actual proporciona informacin de encabezado para el


resto de la fila que la contiene.
col (columna): La celda actual proporciona informacin de encabezado
para el resto de la columna que la contiene.
rowgroup (grupo de filas): La celda de encabezado proporciona
informacin de encabezado para el resto del grupo de filas que la
contiene.
colgroup (grupo de columnas): La celda de encabezado proporciona
informacin de encabezado para el resto del grupo de columnas que la
contiene.

Tablas avanzadas
Algunas tablas complejas estn formadas por ms elementos
que filas y celdas de datos. As, es comn que las tablas ms
avanzadas dispongan de una seccin de cabecera, una
seccin de pie y varias secciones de datos.
Adems, tambin es posible agrupar varias columnas de forma
lgica para poder aplicar estilos similares a un determinado
grupo de columnas.
Esta organizacin se distribuye horizontalmente en tres
grupos:

El encabezado (<thead>)

El cuerpo o cuerpos (<tbody>)

El pie (<tfoot>)

Tablas avanzadas

Cada uno de estos elementos encierra un grupo de filas.


Estas divisiones pueden ayudar a hacer las tablas ms fciles de
leer, especialmente cuando la tabla se debe mostrar en ms de
una pgina (por ejemplo, cuando una tabla grande debe ser
impresa).
Es estos casos, el encabezado y el pie son mostrados en cada
pgina para mejorar la comprensin.
Veamos un ejemplo

Tablas avanzadas
<table>
<thead>
<tr>
<th scope="col">AO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>

EJERCICIO (Ref. html_012)


Hacer un documento html que reproduzca la tabla que se puede ver en la siguiente
imagen:

OBJETIVOS:Resolver la tabla usando las etiquetas vistas hasta


ahora en el tema de tablas.
TIEMPO PARA RESOLVER EL EJERCICIO:45 minutos

Propiedades de la tabla
La etiqueta <table> puede tener los siguientes atributos que
afectan a su representacin visual.

summary : Descripcin del contenido de la tabla mediante un breve


texto
border = " numero ", indicar el ancho del borde en pxeles de la tabla
(y sus celdas).

bordercolor = "color" , indicar el color del borde.

bordercolorlight = "color" , indicar el color claro del borde.

bordercolordark = "color" , indicar el color oscuro del borde.

background = "nombre-archivo" , cuyo valor ser un archivo


de imagen, indicar el fondo de la tabla.
bgcolor = "color" , indicar el color de fondo de la tabla.

Propiedades de la tabla

width =
"nmero"
, indicar ancho total de la tabla. El valor del
ancho puede darse en unidades absolutas (pxeles), o en tanto por ciento (el
nmero con % al final) . En este ltimo caso si se le da, por ejemplo, un 50%
la tabla ocupar la mitad del ancho disponible en la ventana del navegador.
height = "numero" , es igual que width, pero afecta a la altura de la
tabla
align = " texto" , indicar la alineacin de la tabla que podr ser central ,
izquierda o derecha. Tomando para ello los valores ,center, left, right
respectivamente.

width
height

Propiedades de la tabla

cellpadding = "numero" , indicar el alto de las celdas.

cellspacing = "numero" , indicar el espacio entre las celdas.

cellpadding

cellspacing

Propiedades de una celda


La etiqueta <td> puede tener los siguientes atributos que
afectan a su representacin visual.
Alineaciones

align , indicar la alineacin horizontal del texto de la celda.


Tendr tres posibles valores: "right" , "left" y "center" .
valign , indicar la alineacin vertical del texto de la celda.
Tendr tres posibles valores: "bottom" , "middle" y "top" .

Propiedades de una celda


Aspecto de la celda

bgcolor = "color" , indicar el color de fondo de la tabla.

bordercolor = "color" , indicar el color del borde .

bordercolorlight = "color" , indicar el color claro del borde


de la celda.
bordercolordark = "color" , indicar el color del borde oscuro
de la celda.

Evitar en la medida de lo posible estos atributos, es preferible


usar CSS. Vemos un ejemplo con lo que hemos visto para las
celdas y las tablas.

Propiedades de una celda


<table width="80%" border="5" bordercolor="#000000" cellpadding="10" cellspacing="2" align="center">
<tr>
<td bgcolor="#669900">&nbsp;</td>
<th bgcolor="#669900">Variable 1</th>
<th bgcolor="#669900">Variable 2</th>
<th bgcolor="#669900">Variable 3</th>
<th bgcolor="#669900">Variable 4</th>
</tr>
<tr>
<th bgcolor="#FFFF99">A&ntilde;o 1</th>
<td bgcolor="#FFFF99">504578</td>
<td bgcolor="#FFFF99">58633</td>
<td bgcolor="#FFFF99">5</td>
<td bgcolor="#FFFF99">554</td>
</tr>
<tr>
<th bgcolor="#CCFFCC">A&ntilde;o 2</th>
<td bgcolor="#CCFFCC">451232</td>
<td bgcolor="#CCFFCC">60221</td>
<td bgcolor="#CCFFCC">4</td>
<td bgcolor="#CCFFCC">625</td>
</tr>
<tr >
<th bgcolor="#FFFF99">A&ntilde;o 3</th>
<td bgcolor="#FFFF99">843333</td>
<td bgcolor="#FFFF99">87112</td>
<td bgcolor="#FFFF99">9</td>
<td bgcolor="#FFFF99" align=center>800</td>
</tr>
</table>

EJERCICIO (Ref. html_013)


Elaborar un documento html que reproduzca una factura utilizando tablas.

OBJETIVOS:Hacer uso de las etiquetas de tablas.


TIEMPO PARA RESOLVER EL EJERCICIO:45 minutos

EJERCICIO (Ref. html_014)


Representar la clasificacin de la Liga BBVA en forma de tabla.

OBJETIVOS: Manejar correctamente las etiquetas relacionadas con las tablas HTML.
TIEMPO PARA RESOLVER EL EJERCICIO: 45 minutos

EJERCICIO (Ref. html_015)


Utilizar tablas para maquetar una pgina con aspecto de tienda online.
OBJETIVOS: Manejar correctamente las etiquetas relacionadas con las tablas HTML.
TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos

EJERCICIO (Ref. Html_015) - continuacin


Al hacer click sobre la imagen de un producto o su enlace, se ampliar
la informacin del mismo, mostrando nuevas imgenes.

EJERCICIO (Ref. html_016)


Utilizar tablas para maquetar un portal web con noticias de Asturias.

OBJETIVOS: Manejar correctamente las etiquetas relacionadas con las tablas HTML.
TIEMPO PARA RESOLVER EL EJERCICIO: 60 minutos

Frames

Frames
QU SON LOS FRAMES
Los frames (marcos o cuadros) permiten dividir la ventana en
varias ms pequeas, de modo que en cada una de ellas se carga
una pgina html distinta.
Las versiones ms antiguas de los navegadores no tienen
implementada esta caracterstica, por lo que no podrn verlos.
Los frames se declaran con la etiqueta <FRAMESET>, que
debe ser colocada antes de la etiqueta <BODY>. Si no se
cumple este requisito, la etiqueta se ignorar.
Veamos un ejemplo

Frames
CREACIN DE DOS FRAMES (HORIZONTAL)
<html>
<head><title> Ttulo de la pgina </title></head>
<frameset rows=75,*>
<frame src="frames1.htm" name ="frame1" >
<frame src="frames2.htm" name ="frame2" >
</frameset>
<noframes>
<body>
Lo siento,su navegador no soporta frames.
Pulse <a href="frames1.htm>aqu </a>
para acceder a los contenidos de estas pginas.
</body>
</noframes>
</html>

Frames

Frames
<frameset rows=75,*>
<frame src="frames1.htm" name ="frame1" >
<frame src="frames2.htm" name ="frame2" >
</frameset>

EL atributo rows (filas) es el que define el nmero y el tamao de los


frames, en este caso dos filas, de 75 pxels la primera y el resto de
la ventana la segunda. Tambin se puede dividir en columnas
mediante cols.
El tamao de los frames se puede especificar de ms formas:
cols=*,5* dos columnas, la segunda cinco veces mayor que la
primera
cols=150,*,150 tres colunmas, la primera y tercera de 150 pxels, la
segunda ocupa el resto.
rows=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio
respectivamente.

Frames
CREACIN DE TRES FRAMES (1 HORIZONTAL/2 VERTICALES)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 frames</title>
</head>
<frameset rows="15%,85%">
<frame src="superior.html" name="superior">
<frameset cols="50%,50%">
<frame src="izquierda.html" name="izquierda">
<frame src="derecha.html" name="derecha">
</frameset>
</frameset>
</html>

Frames
ATRIBUTO FRAMEBORDER
EL atributo frameborder=0 oculta las divisiones entre los frames.
Debe especificarse para cada frameset.
<frameset rows="16%,84%" frameborder=0>
..
</frameset>
ATRIBUTO NOSCROLLING
EL atributo scrolling=no permite ocultar las barras de scroll de los
frames. Debe especificarse para cada frame.
<frame name="content" src="perros.html" scrolling="no">

EJERCICIO (Ref. html_017)


Elaborar un documento html con tres frames para reproducir el
siguiente documento web.
OBJETIVOS: Usar frames para construir un documento web.
TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

Frames
INTERACCIN DE FRAMES
Lo ms interesante de los frames es la posibilidad que tienen de
interactuar entre s, es decir: pulsar un enlace en un frame y cargar el
contenido en otro frame.
El atributo name identifica a cada uno de los frames; de este modo
podemos hacer que el atributo target de la etiqueta <a> apunte al
frame donde queremos cargar el recurso indicado en href.
Un enlace en frames1.html cargar una pgina en frame2.
<a href="contenido1.html" target ="frame1" >Ver Intro</a>

EJERCICIO (Ref. html_018)


Elaborar un documento html con cuatro frames: el frame lateral izquierdo
contiene nicamente enlaces para visualizar pginas en el frame derecho.
Adems, habr un frame superior fijo a modo de cabecera y tambin un
frame inferior fijo a modo de pie de pgina.

OBJETIVOS: Usar frames para construir un documento web.


TIEMPO PARA RESOLVER EL EJERCICIO:120 minutos

EJERCICIO (Ref. Html_018) - continuacin

Iframes

Iframes
El elemento HTML iframe inserta un marco dentro de un documento.
ste, trabaja casi exactamente como el elemento HTML frame,
excepto que el ltimo, slo puede ser insertado en un conjunto de
marcos (elemento HTML frameset).
Resulta til, a la hora de mostrar un documento en una porcin
de otro.
El documento mostrado dentro de este marco incrustado, se debe
especificar en el atributo "src".
Para agentes de usuario que no soportan marcos, el contenido del
elemento sirve como versin alternativa del documento, razn por
la cual, es una buena prctica usarlo para explicar y proveer un
vnculo al contenido que se debera haber cargado en este marco.

Iframes
El siguiente ejemplo define la altura y anchura del iframe, indica la
URL que se debe mostrar y mediante el atributo scrolling se indica
que el iframe no debe mostrar barras de scroll ni siquiera en el caso
de que el contenido mostrado no quepa en el iframe definido:
<iframe src="/ruta/documento.html" width="250" height="250" scrolling="no" />

Atributos importantes de iframe


src: Para indicar la pgina web que se mostrar en el espacio
del frame flotante.
width: Para definir la anchura del recuadro del iframe.
height: Para definir la altura del iframe.
name: Para especificar el nombre del frame, que podemos
utilizar luego para referirnos a l con el target de los links, o
mediante javascript.

Iframes
id: Para indicar el identificador del iframe, y poder referirnos a
l desde javascript.
frameborder: para definir si queremos o no que haya un borde en el
frame. Los valores posibles son 0 | 1. frameborder=0 indicara que
no queremos borde y frameborder=1 que s.
scrolling: indica si se quiere que aparezcan barras de
desplazamiento para ver los contenidos del iframe completo, en el
caso que no aparezcan en el espacio reservado para el iframe. Los
valores posibles son: yes | no | auto. El valor "yes" es para que
aparezcan siempre las barras de desplazamiento o barras de scroll,
"no" sirve para que no aparezcan nunca y "auto" es para que
aparezcan slo cuando son necesarias (es el valor por defecto).

Iframes
EJEMPLO: iframe muestra una pgina externa
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Iframe</title>
</head>
<body>
<center>
<h1>Bienvenidos a nuestra empresa</h1>
<iframe width="800" height="600" src="http://www.umich.edu">
</iframe>
</center>
</body>
</html>

Iframes
EJEMPLO: iframe muestra una imagen
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Iframe</title>
</head>
<body>
<h1>Imagen en iframe</h1>
<iframe frameborder="0" scrolling="no" src="./imagen.png"
name="imgbox">
</iframe>
</body>
</html>
* El atributo target de la etiqueta <a> permite mostrar image en iframe:
<a href="./img/1.jpg" target="imgbox">Ver Imagen</a>

EJERCICIO (Ref. html_019)


Elaborar un documento html que permita visualizar una secuencia de
imgenes.

OBJETIVOS: Usar iframes para visualizar contenidos externos en un


documento web.
TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

EJERCICIO (Ref. html_020)


Elaborar un documento html con la informacin sobre bares, cafeteras,
restaurantes o sitios de ocio de un lugar de Asturias. Adems de imgenes y
datos del lugar, incluir un iframe con un mapa de su ubicacin geogrfica.

OBJETIVOS: Usar iframes para visualizar contenidos externos en un


documento web.
TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

EJERCICIO (Ref. Html_020) - continuacin


Combinar el uso de frames y iframes para conseguir aspecto de portal web.

OBJETIVOS: Usar iframes para visualizar contenidos externos en un


documento web.
TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

EJERCICIO (Ref. html_020)


Insertar en un iframe la ubicacin geogrfica de Google Maps.

Elementos
Multimedia

Elementos Multimedia
Los elementos multimedia han contribuido a hacer una web ms
amigable, atractiva y funcional.
Algunos de los elementos multimedia ms importantes son:

Sonido
Vdeos
Animaciones
Flash
Applets

Elementos Multimedia
AUDIO
El audio se puede utilizar, por ejemplo, para que reproducir una
meloda de fondo mientras el usuario navega por la web.
Existen dos formatos de audio que se pueden clasificar en
funcin de la compresin:

Audio sin comprimir: El audio se guarda directamente en el


fichero por lo que suele tener muy buena calidad pero ocupa
mucho espacio. Formatos: WAV, AIFF, AU, MIDI,
Audio comprimido: Requiere mayor tiempo de procesamiento
pero ocupa menos espacio. Formatos: MP3, MP4, ...

Elementos Multimedia
<bgsound>
Se utiliza para insertar un sonido de fondo, que se carga con la
pgina y se reproduce mientras se navega por ello.
src: URL del archivo a reproducir (MIDI, WAV o AU)
loop: nmero de veces que el fichero se reproduce (infinite
indica que se reproduce de forma ilimitada)
volumen: determina el volumen del audio (0: indica el valor
actual del usuario; se puede bajar hasta -10.000)
<bgsound src=audio.wav volume=0 loop=3></bgsound>

Elementos Multimedia
<embed>
Permite incrustar ficheros de audio dentro de una pgina web.
src: URL del archivo a reproducir (MP3, MP4, ...)
loop: nmero de veces que el fichero se reproduce (infinite
indica que se reproduce de forma ilimitada)
autostart: (true/false) comenzar al cargar pgina
witdh: ancho del reproductor de audio
<embed src=audio.mp3 width=300 autostart=false></embed>

* <embed> Requiere de un plugin en el navegador

Elementos Multimedia
<audio>
Etiqueta HTML5 para incluir audio en pginas web.
controls: Indica si se muestran los controles del reproductor de
audio.
loop: nmero de veces que el fichero se reproduce (infinite
indica que se reproduce de forma ilimitada)
src: archivo a reproducir
<audio controls autoplay src="happy.mp3"></audio>

EJERCICIO (Ref. html_021)


Elaborar un documento web que reproduzca un archivo de audio relacionado
con la portada de un disco.

TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

Elementos Multimedia
VIDEO
El video se puede insertar de distintas formas o bien, reproducir
de manera remota mediante iframe.
<embed>
Permite incrustar ficheros de video dentro de una pgina web.
src: URL del archivo a reproducir
autostart: (true/false) comenzar al cargar pgina
witdh y height: ancho y altura del reproductor de audio
<embed src=video.wmv width=420 height=420 autostart=true>
</embed>

Elementos Multimedia
<video>
Etiqueta HTML5 para incluir video en pginas web.
autoplay: se inical al cargar la pgina
audio muted: inicia la reproduccin sin sonido
controls: muestra o no los controles del reproductor de video.
loop: nmero de veces que el fichero se reproduce (infinite
indica que se reproduce de forma ilimitada)
src: archivo a reproducir
width/height: ancho/altura del reproductor
<video autoplay src="video.mpg" width=300 height=300 controls>
</video>

Elementos Multimedia
REPRODUCIR VIDEOS DE YOUTUBE
El video se puede reproducir en un iframe o bien incrustar
mediante la etiqueta <object>
En un iframe podemos especificar los siguientes parmetros:

autohide (0/1/2): muestra/oculta controles de Youtube

autoplay(0/1): inicia reproduccin automtica

loop (0/1)
<iframe width="420" height="315"
src="http://www.youtube.com/embed/xDNh1ooVl1A">
</iframe>

Elementos Multimedia
REPRODUCIR VIDEOS DE YOUTUBE(2)
Para incrustar un video de Youtube en un documento web:
1)
2)
3)
4)

Haz clic en el enlace Compartir debajo del vdeo.


Haz clic en el enlace Insertar.
Copia el cdigo que aparece en el cuadro ampliado.
Pega el cdigo en tu blog o en tu sitio web.

EJERCICIO (Ref. html_022)


Elaborar un documento web que permita visualizar videos.

TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

Elementos Multimedia
MARQUESINAS
Permiten animar texto en una pgina web: etiqueta <marquee>

align: alineacin de la marquesina


bgcolor: color de fondo
direction: direccin del desplazamiento (up, down, right, left)
height/width
scrolldelay: velocidad de desplazamiento
loop: nmero de repeticiones (infinite)
behaviour=alternate
<marquee bgcolor="#66CD00">Texto</marquee>

EJERCICIO (Ref. html_023)


Elaborar un documento web utilizando marquesinas que muestre los
titulares de las noticias desplazndose por la pantalla.

TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

EJERCICIO (Ref. html_024)


Elaborar un documento web utilizando marquesinas que muestre dos textos
o imgenes en movimiento.

TIEMPO PARA RESOLVER EL EJERCICIO:60 minutos

Elementos Multimedia
<object>
Permite ejecutar aplicaciones externas dentro de un pgina web.

align: alineacin del objeto


data: URL del archivo a ejecutar
type: formato del objeto
standby: permite mostrar mensaje mientras el objeto se carga
height/width
codebase: URL de descarga de plugins necesarios

Elementos Multimedia
<object>: incrustar animacin flash
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="550" height="400" id="movie_name" align="middle">
<param name="movie" value="movie_name.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="movie_name.swf"
width="550" height="400">
<param name="movie" value="movie_name.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_pla
yer.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

Elementos Multimedia
<object>: incrustar applet Java
<object id="obj1"
xml:base="http://www.example.com/applets/classes"
type="application/x-java-applet"
data="Clock.class">
<param name="delay" value="100"/>
<param name="link" value="http://www.example.com/"/>
<param name="border" value="5"/>
<param name="nradius" value="80"/>
<param name="cfont" value="TimesRoman|BOLD|18"/>
<param name="bgcolor" value="ddddff"/>
<param name="shcolor" value="ff0000"/>
<param name="mhcolor" value="00ff00"/>
<param name="hhcolor" value="0000ff"/>
<param name="ccolor" value="dddddd"/>
<param name="ncolor" value="000000"/>
<em>alternate text</em>
</object>

ANEXO:
cdigo HTML

Cdigo HTML
Cambiar color de fondo de un documento web
<body bgcolor="green">
Cambiar color de texto de un documento web
<body style=blue">

Slo un prrafo: <p style=blue">

Aadir una imagen de fondo en un documento web


<body style=background-image:url('fondo.jpg');>
Cambiar tipo de letra
<body style="font-family:'Comic Sans MS';font-size='11'">

Cdigo HTML
Aplicar una textura
<body background="./img/estilo.png" bgproperties="fixed">
Texto resaltado
<p>La Guerra Civil Espaola</p> entre <mark>1936 y 1939</mark>

Cdigo HTML
Aadir un Tool Tip
<span title=Mensaje de ayuda>Texto</span>
Cambiar imagen
<span onMouseOver="document.pic1.src='blue.gif'"
onMouseOut="document.pic1.src='black.gif'">
<img src="black.gif" height="50" width="150" name="pic1">
</span>

You might also like