Professional Documents
Culture Documents
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)
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
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/)
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)
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.
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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)]
1. Estructura de página
2. Estilos de texto
3. Enlaces, imágenes y medias
1. ESTRUCTURA DE PÁGINA
<html> </html>
<head> </head>
<body> </body>
2. ESTILOS DE TEXTO
Encabezados [<h1> </h1>] [<h2> </h2>] [<h3> </h3>] [<h4> </h4>] [<h5> </h5>] [<h6> </h6>]
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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>
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:
Estilos lógicos
Estilos físicos
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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.
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)
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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
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.
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
Fax: 91 488 82 20
Los estilos CSS pueden asociarse a una página web de tres formas distintas:
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:
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
Fax: 91 488 82 20
Propiedad
Separadores
Valor
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
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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)
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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.
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]
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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]
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.
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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"
rel="stylesheet" type="text/css" />
<link href="http://www.pantropia.es/_tmu0910/css/style2.css"
rel="stylesheet" type="text/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)
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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…
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
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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>
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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>
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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">
</div>
</div>
<div id="contenedor">
<div id=lado1>
<div class="content">
<div id="lado2">
<div class="content">
<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>
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
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">
<div class="content">
<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">
<div class="content">
<h2>Trabajo</h2>
<p>Sí. <strong>Profesor de la URJC</strong></p>
</div>
</div>
</body>
</html>
Edificio Departamental. Camino del Molino s/n. 28943-Fuenlabrada. Madrid. España. Teléfono: 91 488 81 68
Fax: 91 488 82 20