Tecnologías Multimedia

2009
Tecnologías
Multimedia
Práctica 6 – Fundamentos de lenguajes web
Al finalizar esta práctica conocerás la funcionalidad y aplicaciones de los
lenguajes esenciales en el desarrollo web, así como su utilidad en la
elaboración de productos de comunicación en Red. Asimismo, al tiempo que
elaboras tu ficha de alumno/a, conocerás de forma general la naturaleza de los
lenguajes de marcado (HTML, XHTML, XML), de presentación (CSS) y de
scripting (ECMAScript)
Manuel Gértrudix, Sergio Álvarez

URJC – Facultad de Ciencias de la Comunicación
14/11/2009
Práctica 6  Fundamentos de lenguajes web
Objetivos
1. Conocer la funcionalidad y aplicaciones de los lenguajes esenciales en el desarrollo web, y su
utilidad en la elaboración de productos de comunicación en Red
2. Conocer, de forma general, la naturaleza de los lenguajes de marcado (HTML, XHTML, XML), de
presentación (CSS) y de scripting (ECMAScript)
3. Conocer y operar los principios fundamentales del XHTML (estructura de página, marcado
semántico de texto, enlaces e inserción de elementos multimedia)
4. Conocer, y experimentar, los principios fundamentales de CSS (presentación y diseño)
5. Aplicar técnicas básicas de desarrollo web en XHTML y CSS para realizar la ficha personal del
estudiante de la asignatura
6. Valorar la utilidad de cada lenguaje para el desarrollo de productos de comunicación multimedia
Utilizaremos los siguientes recursos
Campus Virtual
o Ficha del alumno
Herramientas y Servicios
o W3Schools HTML (http://www.w3schools.com/html/default.asp)
o W3Schools XHTML (http://www.w3schools.com/xhtml/default.asp)
o W3Schools CSS (http://www.w3schools.com/css/default.asp)
o HTML Playground (http://htmlplayground.com/)
1. Conceptos básicos de HTML y XHTML

Como hemos dicho, HTML es un lenguaje de marcado que se compone de una colección de
estilos a través de los cuáles se define la estructura y los componentes de un documento web.
Es decir, le indica a un navegador la forma en la que debe mostrar la información que contiene
dicho documento.
Para ello, el documento se compone mediante un conjunto de etiquetas que indican cuáles on
las partes principales del documento y qué contenido debe mostrarse dentro de cada una de
ellas.
Una de las ventajas del lenguaje HTML es que es multiplataforma y multinavegador (es
independiente del sistema en el que corre o funciona). Es el lenguaje base de funcionamiento
de la web y fue creado por Tim Berners-Lee cuando trabajaba en el CERN (Centro de
Investigación Nuclear de Ginebra)
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
Fax: 91 488 82 20
XHTML (Lenguaje de etiquetado de hipertexto extensible) es una evolución de HTML basada
en XML 1. Supone la combinación del vocabulario de HTML (elementos y etiquetas) con la
sintaxis (lenguaje y normas estructurales) de XML. Esto significa que la información describe el
contenido no cómo este debe mostrarse (eso se delega a los lenguajes de presentación: CSS)
Las principales ventajas de XHTML son:
1. Separa contenido de presentación

2. Esto facilita que se pueda presentar el contenido con múltiples aspectos diferentes y,
además, de forma adecuada a través de distintos dispositivos (móviles, PDAs,
pantallas táctiles…) y mediante diferentes agentes de usuario (navegadores visuales,
navegadores vocales, sistemas multimodales, etc.)
3. Compatibilidad inversa (con sistemas anteriores) y directa (sistemas posteriores)
Algunas de las características esenciales de XHTML son:
Formato: Los documentos HTML tienen formato plaint-text (texto simple) por lo que
pueden crearse en cualquier editor de texto (debe guardarse y abrirse como “text only
with line breaks” o “sólo texto con saltos de línea”, o “html”) o mediante el uso de
cualquier editor HTML de tipo WYSIWYG (What You See What You Get)
Elementos de un documento:
o La estructura de un documento de texto XHTML se configura mediante la suma
de elementos como, por ejemplo: encabezados, párrafos, enlaces, imágenes,
tablas, listas…
o Las etiquetas (Tags) de HTML indican a los navegadores cuáles son los
elementos de un archivo.
Sintaxis básica:
o DTD (Definición del tipo de documento) Debe incluirse de forma obligatoria al
inicio de cada documento XHTML. La DTD define la estructura válida
(elementos y atributos para un tipo de documento XHTML concreto) [Más
información en http://www.w3schools.com/dtd/default.asp]
o Hay etiquetas obligatorias: <html> <head> <body> <title>
o Título de página: Debe incluirse la etiqueta <title> dentro de la sección de
encabezamiento
o Las etiquetas van siempre entre paréntesis angulares:
 < Ángulo izquierdo para abrir la etiqueta
 P Nombre de la etiqueta, que indica el elemento al que se refiere (en
este caso, un párrafo)
 > Ángulo derecho que cierra la etiqueta
o Las etiquetas deben ir siempre cerradas (en parejas para abrir y cerrar una
instrucción).
 Abrir: <title>
 Cerrar: </title> (añade un slash /)
o Las etiquetas deben anidarse adecuadamente.
o Todas las etiquetas y atributos deben de ir minúsculas.
Fax: 91 488 82 20
o Todos los valores de los elementos deben ir entre comillados “560px” [por
ejemplo, los número de las definiciones de height (altura) o widht (anchura)]
2. Comandos habituales en XHTML

El número de etiquetas XHTML es evidentemente más amplio, pero para empezar a trabajar y
comprender el funcionamiento de este lenguaje de marcado utilizaremos las más habituales y
aquellas que, normalmente, vamos a trabajar a lo largo del curso:
Podemos clasificarlas en tres bloques:
1. Estructura de página
2. Estilos de texto
3. Enlaces, imágenes y medias
1. ESTRUCTURA DE PÁGINA
<html> </html>
Abren y cierran el documento.

Únicamente se sitúa por encima, y fuera de esta, la DTD (Definición del tipo de
documento)
Indica al navegador que el archivo contiene información codificada en HTML
<head> </head>
Marcan dónde se sitúa la información del encabezado del documento.

Contiene etiquetas informativas que no se visualizan en el navegador pero que sirven
para funciones de indexación por parte de los buscadores (metadatos)
Incluye el Título de la página <title> Este se visualiza en la barra del navegador (y
también es el que queda registrado por defecto cuando guardamos la página en
favoritos, por lo que debe ser muy descriptivo y corto)
<body> </body>
Contienen todo el contenido que se visualiza en el navegador.
2. ESTILOS DE TEXTO
Encabezados [<h1> </h1>] [<h2> </h2>] [<h3> </h3>] [<h4> </h4>] [<h5> </h5>] [<h6> </h6>]
Marcan una estructura jerárquica de encabezados de hasta seis niveles, de mayor

<h1> a menor <h6>
Deben de ir consecutivos, sin saltarse ninguno. Es decir, si hay un <h3>, debe de estar
anidado dentro de un <h2> que se anida, a su vez, en un <h1>
Ejemplo: <h1>Nombre y apellidos del alumno</h1>
Párrafo [<p> </p>]
Marca que el contenido es un párrafo de texto.
Fax: 91 488 82 20
Para incluir un salto de línea es necesario introducir una etiqueta específica <br /> ya
que en HTML no se reconocen saltos de línea ni espacios múltiples dentro de un
mismo párrafo.
Ejemplos:
o Párrafo normal: <p>Nacido en Tarragona, en 1983</p>
o Párrafo con salto de línea: <p>Nacido en Tarragona<br /> en 1983</p>
Listas sin numerar [<ul> </ul>]
Indica que se muestre el contenido en formato lista con viñetas (Unnumbered List)
Los elementos de la lista se marcan con la etiqueta <li> </li>
Ejemplo:
<p>Asignaturas cursadas este año:</p>
<ul> Asignaturas cursadas este año:
<li>Tecnologías multimedia</li> Tecnologías Multimedia

<li>Producción audiovisual</li> Producción audiovisual
<li>Estructura de los medios</li> Estructura de los medios
</ul>
Listas numeradas [<ol> </ol>]
Indica que se muestre el contenido en formato lista numerada (Ordered List)

Ejemplo:
<p>Asignaturas cursadas este año:</p>
<ol> Asignaturas cursadas este año:
<li>Tecnologías multimedia</li> 1. Tecnologías Multimedia

<li>Producción audiovisual</li> 2. Producción audiovisual
<li>Estructura de los medios</li> 3. Estructura de los medios
</ol>
Estilos lógicos
Indican al navegador propiedades concretas (por ejemplo, relevancia) de un

determinado contenido.
Cómo se presente esa propiedad depende del navegador de las CSS.
Se prefiere su uso a los estilos físicos.
Los más habituales son:
o Énfasis [<em> </em>] Los navegadores suelen presentarlo en cursiva.
o Mayor énfasis [<strong> </strong>] Los navegadores suelen presentarlo en
negrita.
Estilos físicos
Fuerzan al navegador a mostrar los caracteres con un determinado estilo.

Son los más comunes pero resultan menos versátiles, por lo que se aconseja el uso de
los estilos lógicos.
Los más habituales son:
Fax: 91 488 82 20
o Cursiva [<i> </i>]
o Negrita [<b> </b>]
o Texto preformateado [<pre> </pre>] Permite utilizar un tamaño de letra
determinado, así como que el navegador reconozca los saltos de línea, los
espacios múltiples y los tabuladores.
3. ENLACES, IMÁGENES Y MEDIAS (OBJETOS)
Enlaces [<a> </a>]
Indica los parámetros para enlazar con otra página o documento (fichero local o en la
web)
Incluye siempre el atributo href. Este indica la URL (absoluta o relativa) del archivo al
que apunta el enlace.
Ejemplos:
o Enlace absoluto: <a href=”www.pantropia.es”>Enlace a la revista digital
Pantropia</a>
o Enlace relativo: <a href=”styles.css”>Enlace a un fichero local que contiene las
hojas de estilo del sitio, y que está situado en la misma carpeta que el fichero
desde el que se enlaza</a>
Imágenes[<img> </img>]
En las páginas web se pueden incluir diferentes tipos de imágenes. Las más habituales
(y que interpretan adecuadamente los navegadores) son: GIF (.gif), JPEG (.jpg .jpeg)
PNG (.png)
Incluye siempre el atributo src. Este indica la URL (absoluta o relativa) del archivo de
imagen.
Además, incorpora otros atributos como height, width o alt.
El W3C recomienda que esta etiqueta se deje de utilizar en favor de la etiqueta
<object> (ver más abajo en el documento)
Ejemplos:
o Enlace absoluto:
<img src=” http://www.pantropia.es/images/stories/urjc/cabecera_canales.jpg”
height=”100” widht=”320” alt=”Canales 2.0 de la URJC”
o Enlace relativo: <img src=”/images/cabecera_canales.jpg” height=”100”
widht=”320” alt=”Canales 2.0 de la URJC”
Medias (Objetos)
Embed [<embed> </embed>]

o Aunque se utiliza mucho, es una etiqueta depreciada que no se incluye en los
actuales estándares del W3C. Por esta razón, su uso da problemas en
aquellos sitios que utilizan plantillas basadas en XHTML 1.0 (Strict) o superior.
o En su lugar, es preferible utilizar <object>
Object [<object> </object>]
Fax: 91 488 82 20
o Es la etiqueta para embeber cualquier tipo de objeto (imágenes, vídeos, audio,
documentos, etc.) recomendada y validada por el W3C.
iFrame [<iframe> </iframe>]
o Permite incluir un “marco” en línea en el que se puede presentar otro
documento integrado
o Aunque lo soportan la mayor parte de los navegadores, no es soportado en
XHTML 1.0 Strict DTD
4. OTRAS ETIQUETAS
Afortunadamente, disponemos de numerosos servicios y web que nos proporcionan

información muy completa de todo el inventario de elementos, etiquetas y atributos de XHTML.
Para completar esta información, recomendamos especialmente los siguientes.
En estos casos, además de ofrecernos amplia información, podemos realizar pruebas

directamente sobre el código de ejemplo que utiliza cada elemento o etiqueta y comprobar los
resultados. Sin duda, una buena manera de aprender.
W3Schools HTML (http://www.w3schools.com/html/default.asp)

W3Schools XHTML (http://www.w3schools.com/xhtml/default.asp)
W3Schools CSS (http://www.w3schools.com/css/default.asp)
HTML Playground (http://htmlplayground.com/)
3. Conceptos básicos de CSS

Las hojas de estilo en cascada, conocidas como CSS, son el lenguaje estándar del W3C que
se utiliza para aplicar estilo a todos los elementos de una página web, desde la tipografía a la
composición y estructura visual de la página.
Son varias las ventajas que presenta el uso de CSS:
Páginas más optimizadas (descargas más óptimas) Al tener menos código, “pesan”
menos.
Hace más sencilla y rápida la administración global de los elementos de presentación
del sitio.
Aumenta la compatibilidad con diferentes navegadores.
Permite un mayor control de la composición visual de las páginas de un sitio.
Fax: 91 488 82 20
Los estilos CSS pueden asociarse a una página web de tres formas distintas:
1. Hoja de estilo incrustada: los estilos se incluyen en el encabezamiento de la página

2. Estilo en línea: uno o varios estilos de incluyen dentro de una etiqueta XHTML
3. Hojas de estilo externas: En el encabezado de la página XHTML se enlaza a una hoja
de estilos externa.
Un estilo CSS puede definirse como un conjunto de reglas o instrucciones que indican a un
navegador cómo debe presentarse un elemento concreto en una página html. Comprende:
Selector: Indica al navegador qué

elemento se verá afectado por la
regla de estilo
Regla: Conjunto de propiedades que

indican al navegador como se debe
mostrar el elemento indicado por el
selector.
Declaración del estilo
Fax: 91 488 82 20
Propiedad
Separadores
Valor
Las reglas CSS pueden aplicarse a tres tipos de selectores:
1. Etiquetas específicas. Por ejemplo, en XHTML, a <h1> o a <p>

2. Clase. Puede aplicarse a cualquier etiqueta o selectores de clase: class, span
3. Selectores ID, pseudo-clases o contextuales que hayamos creado para identificar
partes del documento.
Otras de las características de las hojas de estilo son las de herencia y cascada. La herencia
hace que todos los descendientes de un elemento tengan las mismas propiedades que su
ascendiente. La cascada permite que puedan interactuar varias hojas de estilo
simultáneamente; por ejemplo, la del usuario, y la del navegador.
Para más información sobre las reglas y propiedades CSS, consulta el Anexo I de la práctica.
4. Tarea
Esta actividad vamos a realizarla a lo largo de dos días de prácticas. De forma resumida:
a) El primer día vamos a trabajar con XHTML, y realizaremos la estructura básica de nuestra ficha
de alumno
b) El segundo, aplicaremos estilos con CSS a nuestra ficha.
PRIMERA SESIÓN
A. En primer lugar, vamos a practicar el uso de algunas de las principales etiquetas que hemos visto.
Para ello:
1. Accede a los siguientes enlaces; observa los elementos XHTML, sus atributos (cuando
tenga) y la sintaxis del código. Al principio te resultará complejo, pero si prestas atención
pronto comenzarás a entender cómo se articula el lenguaje XHTML.
2. Modifica los parámetros y valores de los atributos y comprueba cómo esto afecta al
resultado.
3. Enlaces:
i. Estructura de página
Fax: 91 488 82 20
Fichero html y DTD
Encabezado (Head) - Título – Enlace a una hoja de estilos externa -
Metadatos
ii. Estilos de texto
Encabezados de texto – Alineación de encabezados, párrafos…
Párrafos - Salto de párrafo -
Lista sin numerar - Lista numerada
Estilos lógicos - Estilos físicos
iii. Enlaces, imágenes y medias (Objetos)
Enlaces en texto – Enlace en imagen – Enlace en ventana nueva – Enlace
a email
Imágenes – Texto alternativo
Medias (Object): Vídeo - Sonido - Imagen – Otra Web – Flash
B. Ahora que ya sabes cómo funciona, a grandes rasgos, el lenguaje XHTML, tendrás que crear tu
primer fichero XHTML. Con ello, realizarás tu ficha del alumno de la asignatura de Tecnologías
Multimedia. Sigue los siguientes pasos:
1. Accede a Campus Virtual con tu usuario.
2. Accede a tu página personal y edítala (Opción Añadir bloque de texto o editar bloque de
texto)
Fax: 91 488 82 20
3. Se cargará una nueva venta en la que podrás crear tu página. De todas las opciones que
hay, utilizaremos sólo el campo Texto.
Con este tirador puede ampliar

el tamaño del cuadro
Aquí vamos a ir escribiendo el

código
4. Ahora deberás incorporar en este campo texto la siguiente información utilizando el lenguaje
XHTML:
Nombre y apellidos [Encabezado de primer nivel H1]
Foto [Cargar, mediante enlace, la foto publicada en Wordpress, e incluir texto
alternativo]
Titulación [H2]
o Nombre de la titulación, Universidad [Enlace en ventana nueva a la web
de la URJC] Asignatura [Enlace en ventana nueva a la web de Pantropia –
http://www.pantropia.es] [Todo en estilo párrafo]
Curso y Grupo [H3]
o Curso y grupo (mañana-tarde) [Párrafo]
Datos de nacimiento [H2]
o Fecha, y Lugar: ciudad y país [cursiva] [Todo en lista sin numerar]
Datos de contacto durante el curso [H2]
Dirección [H3]
o Calle y número, Código Postal, Municipio, Provincia [Todo en lista sin
numerar]
Teléfonos [H3]
o Móvil, Fijo [Todo en lista numerada, por prioridad]
Fax: 91 488 82 20
Email URJC [H3]
o Texto “Enviar un correo para contactar” [Enlace mailto al correo del
alumno en URJC]
Productos multimedia [H2]
o Blog, Delicious, Netvibes [Todo en lista sin numerar, con los enlaces, en
ventana nueva, a las cuentas personales en estos servicios]
Trabajo [H2]
o Sí o No. Profesión. [En estilo párrafo. Profesión en negrita]
5. Guarda, y comprueba el resultado.
SEGUNDA SESIÓN
1. Ahora vamos a aplicar estilos a nuestra ficha para comprobar cómo funciona CSS.
2. En primer lugar, vamos a aplicar estilos con una hoja de estilos incorporada.
a. Abre de nuevo el documento de tu ficha en Campus Virtual, y dentro del
encabezado, incluye el código del Anexo 2. Repara en que se utiliza la etiqueta
<style> para incorporar los estilos.
b. Comprueba el resultado. Fíjate que como sólo se han declarado estilos para los
elementos básicos de XHTML, únicamente se producen cambios en la tipografía,
color, etc., pero no en el posicionamiento de los elementos o en la estructura de la
página.
3. Ahora, incorporaremos este mismo estilo utilizando una hoja de estilo externa.
Fax: 91 488 82 20
a. Borra el código de estilo que has copiado en el paso anterior dentro del
encabezado.
b. Dentro del encabezado, copia el siguiente código y prueba el resultado.
i. <link href="http://www.pantropia.es/_tmu0910/css/style0.css"
rel="stylesheet" type="text/css" />
4. Ahora vamos a complicarlo un poco para ver el potencial que posee CSS también para
estructurar el diseño de la página y ubicar sus elementos.
a. En primer lugar, tendremos que incorporar nuevas etiquetas al código XHTML de
nuestra ficha para estructurar el documento.
i. Accede al anexo III, y tomando como modelo el código de ejemplo,
incorpora dentro del código de tu ficha las etiquetas que están señaladas
en negrita. Presta atención para ubicarlas adecuadamente, pues de otro
modo, no funcionarán adecuadamente.
b. Ahora podrás enlazar nuevas hojas de estilo que incorporan posicionamiento para
las etiquetas que acabas de incorporar
i. En el encabezado de tu ficha, busca el código que enlaza la hoja de
estilos externa y modifícalo para cargar estas hojas (alternativamente)
<link href="http://www.pantropia.es/_tmu0910/css/style1.css"
<link href="http://www.pantropia.es/_tmu0910/css/style2.css"
c. Cuando finalices, elige el que más te guste (o menos te disguste) y déjalo para
aplicar el estilo a tu ficha.
5. Entregable
Aunque se trabaja durante dos sesiones, sólo se realizará una entrega (al finalizar la segunda sesión)
1. Crea un documento en el que se incluya:

o Parte XHTML
 Al menos cinco capturas de las pruebas realizadas en el punto 1 de la primera
sesión
 Captura de pantalla de tu ficha de alumno sin estilos, publicada en Campus
Virtual
o Parte CSS
 Captura de pantalla de tu ficha de alumno final (con estilos), publicada en
Campus Virtual
2. Prepara el documento en pdf (sigue las instrucciones de entrega)
3. Súbelo al sistema de gestión de trabajos de Campus Virtual.
Fax: 91 488 82 20
6. Para profundizar
En el delicious de Pantropia (http://delicious.com/pantropia) podréis encontrar numerosas referencias en
las etiquetas: diseño, diseñoweb, CSS…
Editores HTML y XHTML Online
Htmledit: http://htmledit.squarefree.com/ Básico.

Tryit editor: http://www.w3schools.com/js/tryit.asp?filename=tryjs_location Es el editor online de la w3schools.
Aunque es sencillo, también admite probar tanto HTML como CSS y JavaScript.
Html Play Ground: http://htmlplayground.com/ Incluye un breve tutorial, muy didáctico, sobre html xtml y css
Rendur. http://rendur.com/ Completo editor hmtl, css, javascript. Un poco menos intuitivo que los anteriores.
Online HTML Editor. http://www.online-html-editor.org La ventaja que tiene es que se parece mucho a los que
utilizan habitualmente en CMS.
Editores online CSS
Tutorial W3Schools: http://www.w3schools.com/css/default.asp

CSSMATE / http://cssmate.com/csseditor.htm
Sitios de interés
W3schools.com: http://www.w3schools.com. Imprescindible. Numerosos tutorials, demos, ejemplos, etc. sobre los
principales lenguajes de desarrollo en la web
HTML Dog. Tutoriales y recursos sobre HTML http://www.cssportal.com Tiene muchos ejemplos demo de código
para ver y entender las cosas que se pueden hacer con CSS
Diseño: http://www.ateneupopular.com
Fax: 91 488 82 20
Anexo I: Código modelo XHTML base
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pedro González Pérez</title>
</head>
<body>
<h1>Pedro González Pérez</h1>
<img src="http://www.demo.es/demofoto.jpg" alt="Fotografía en primer plano de Pedro González Pérez " height="auto"
width="auto" /></img>
<h2> Titulación </h2>
<p>Comunicación Audiovisual <br /> Universidad Rey Juan Carlos <br /> <a href="http://www.pantropia.es"
target="_blank"> Tecnologías Multimedia</a></p>
<h3>Curso y grupo</h3>
<p>3º, Mañana</p>
<h2>Datos de nacimiento</h2>
<ul>
<li>12/02/1981</li>
<li>Madrid</li>
<li><em>España</em></li>
</ul>
<h2>Datos de contacto durante el curso</h2>
<h3>Dirección</h3>
<ul>
<li>Cº del molino, s/n </li>
<li>28943</li>
<li>Fuenlabrada</li>
<li>Madrid</li>
</ul>
<h3>Teléfonos</h3>
<ol>
<li><strong>Móvil:</strong>696853645</li>
<li><strong>Fijo:</strong>914882514</li>
</ol>
<h3>Email URJC</h3>
<a href="mailto:alumno.alumno@alumno.urjc.es" alt="Enlace que abre la aplicación de correo para mandar
un mail a Pedro González"> Enviar un correo para contactar</a>
<h2>Trabajo</h2>
<p>Sí. <strong>Edición de vídeo</strong></p>
<h2>Productos multimedia</h2>
<ul>
<li><a href="http://www.complex.wordpress.com" target="_blank">Blog</li>
<li><a href="http://delicious.com/pedrogonzalez" target="_blank">Delicious</li>
<li><a href="http://www.netvives.com" target="_blank">Netvibes</li>
</ul>
</body>
</html>
Fax: 91 488 82 20
Anexo II: CSS Incorporada
<head>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman", Times, serif;
font: 16px #FFFFFF;
background: url(http://www.cosassencillas.com/wp-content/uploads/2007/10/fondo-pantalla-01.jpg) #000000
no-repeat center top scroll;
padding: 10px 0px 0px 50px;
margin: 5px 0px 0px 0px;
}
p{
color: #E8E8E8;
}
h1, h2, h3 {
text: none;
color: #999999;
text-decoration: overline;
line-height: 140%;
}
ul {
list-style-type: square;
}
ol {
list-style-type: lower-alpha;
}
img {
left: 80px;
cursor: crosshair;
filter: Light;
border: 4px groove #CCCCCC;
}
strong {
font-weight: bolder;
color: #CC0000;
}
em {
text-transform: uppercase;
color: #009933;
}
a{
font-style: italic;
color: #FFFF00;
}
a:hover {
text-decoration: none;
color: #FFCC33;
}
</style>
</head>
Fax: 91 488 82 20
Anexo III: Código modelo XHTML con CSS externa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manuel Gértrudix Barrio</title>
<style type="text/css">
</style>
<link href="http://www.pantropia.es/_tmu0910/css/style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="encabezado">
<div class="content">
<h1>Manuel Gértrudix Barrio </h1>
</div>
</div>
<div id="contenedor">
<div id=lado1>
<img src="http://sonidosimaginarios.es/mgb/curriculum/imagenes/mgeb_index.jpg" alt="Fotografía en primer plano de

Manuel Gértrudix Barrio" /></img>
</div>
</div>
<div id="lado2">
<h2> Titulación </h2>
<p>Comunicación Audiovisual <br /> Universidad Rey Juan Carlos <br /> <a href="http://www.pantropia.es"
target="_blank"> Tecnologías Multimedia</a></p>
<h3>Curso y grupo</h3>
<p>3º, Mañana</p>
<h2>Datos de nacimiento</h2>
<ul>
<li>22/12/1971</li>
<li>Madrid</li>
<li><em>España</em></li>
</ul>
<h2>Datos de contacto durante el curso</h2>
<h3>Dirección</h3>
<ul>
<li>Cº del molino, s/n </li>
<li>28943</li>
<li>Fuenlabrada</li>
<li>Madrid</li>
</ul>
Fax: 91 488 82 20
<h3>Teléfonos</h3>
<ol>
<li><strong>Móvil: </strong>696364585</li>
<li><strong>Fijo: </strong>914882514</li>
</ol>
<h3>Email URJC</h3>
<a href="mailto:manuel.gertrudix@urjc.es" alt="Enlace que abre la aplicación de correo para mandar un mail
a Manuel Gértrudix"> Enviar un correo para contactar</a>
</div>
</div>
<div id="lado3">
<h2>Productos multimedia</h2>
<ul>
<li><a href="http://www.edumetaversos.wordpress.com" target="_blank">Blog</a></li>
<li><a href="http://delicious.com/gertrudix" target="_blank">Delicious</a></li>
<li><a href="http://www.netvives.com" target="_blank">Netvibes</a></li>
</ul>
</div>
</div>
</div>
<div id="pie">
<h2>Trabajo</h2>
<p>Sí. <strong>Profesor de la URJC</strong></p>
</div>
</div>
</body>
</html>
Fax: 91 488 82 20

Tecnologías Multimedia

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tecnologías Multimedia

Transféré par

Droits d'auteur :

Formats disponibles

2009

Manuel Gértrudix, Sergio Álvarez

Utilizaremos los siguientes recursos

1. Conceptos básicos de HTML y XHTML

Las principales ventajas de XHTML son:

1. Separa contenido de presentación

Algunas de las características esenciales de XHTML son:

2. Comandos habituales en XHTML

Podemos clasificarlas en tres bloques:

Abren y cierran el documento.

Marcan dónde se sitúa la información del encabezado del documento.

Contienen todo el contenido que se visualiza en el navegador.

Marcan una estructura jerárquica de encabezados de hasta seis niveles, de mayor

Párrafo [<p> </p>]

Marca que el contenido es un párrafo de texto.

Listas sin numerar [<ul> </ul>]

<li>Tecnologías multimedia</li> Tecnologías Multimedia

Listas numeradas [<ol> </ol>]

Indica que se muestre el contenido en formato lista numerada (Ordered List)

<li>Tecnologías multimedia</li> 1. Tecnologías Multimedia

Indican al navegador propiedades concretas (por ejemplo, relevancia) de un

Fuerzan al navegador a mostrar los caracteres con un determinado estilo.

3. ENLACES, IMÁGENES Y MEDIAS (OBJETOS)

Enlaces [<a> </a>]

Embed [<embed> </embed>]

Afortunadamente, disponemos de numerosos servicios y web que nos proporcionan

En estos casos, además de ofrecernos amplia información, podemos realizar pruebas

W3Schools HTML (http://www.w3schools.com/html/default.asp)

3. Conceptos básicos de CSS

Son varias las ventajas que presenta el uso de CSS:

1. Hoja de estilo incrustada: los estilos se incluyen en el encabezamiento de la página

Selector: Indica al navegador qué

Regla: Conjunto de propiedades que

Declaración del estilo

Las reglas CSS pueden aplicarse a tres tipos de selectores:

1. Etiquetas específicas. Por ejemplo, en XHTML, a <h1> o a <p>

Con este tirador puede ampliar

Aquí vamos a ir escribiendo el

5. Guarda, y comprueba el resultado.

1. Crea un documento en el que se incluya:

Editores HTML y XHTML Online

Htmledit: http://htmledit.squarefree.com/ Básico.

Editores online CSS

Tutorial W3Schools: http://www.w3schools.com/css/default.asp

<h1>Manuel Gértrudix Barrio </h1>

<img src="http://sonidosimaginarios.es/mgb/curriculum/imagenes/mgeb_index.jpg" alt="Fotografía en primer plano de

Vous aimerez peut-être aussi