Académique Documents
Professionnel Documents
Culture Documents
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
UF1302:
Construccin
de pginas
web con el
lenguaje de
marcas
UF1302:
Construccin
de pginas
web con el
lenguaje de
marcas
bit.ly/UF1302
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
<!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>
<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>
</html>
<html> </html>
<head> </head>
<body> </body>
Esto es lo que muestra un navegador web a partir del cdigo html que hemos visto antes.
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>
<h3>
Encabezado nivel 3
<I>
Texto en cursiva
<h4>
Encabezado nivel 4
<PRE>
Texto preformateado
<h5>
Encabezado nivel 5
<TT>
<h6>
Encabezado nivel 6
<BLOCKQUOTE>
<P>
Prrafo
<SUP>
Superndice
<BR>
Salto de lnea
<SUB>
Subndice
<HR>
Lnea divisoria
<S>
Texto tachado
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>
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>
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.
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
ENTIDAD
ENTIDAD
<
<
"
"
>
>
>
>
&
&
®
©
(C)
á
€
ñ
ü
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.
EJERCICIO(Ref. html_002)
Replicar el texto de una carta de acuse de recibo.
EJERCICIO(Ref. html_003)
Confeccionar un curriculum vitae en formato HTML.
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
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.
<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
<ul >
<li>Azcar</li>
<li>Harina</li>
<li>Para el perro:
<ul>
<li>Correa</li>
<li>Mordedor</li>
<ul>
<li>
</ul>
<ol >
<li>Huevos</li>
<li>Azcar</li>
<li>Harina</li>
</ol>
1. Huevos
2. Azcar
3. Harina
PUNTOS
34
32
30
25
10
10
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>
Local:
En este caso href apunta a una pgina html que est en el mismo directorio que el
documento que contiene el enlace.
Interno:
En este caso href apunta a una posicin dentro del documento en el que est
el enlace.
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.
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
JPEG
GIF
PNG
Mapas de imgenes
Mapas de imgenes
Mapas de imgenes
Mapas de imgenes (2)
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
Mapas de imgenes
Tipos de reas
Mapas de imgenes
Utilidades online
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
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>
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>
</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>
</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>
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 pie (<tfoot>)
Tablas avanzadas
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>
Propiedades de la tabla
La etiqueta <table> puede tener los siguientes atributos que
afectan a su representacin visual.
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
cellspacing
OBJETIVOS: Manejar correctamente las etiquetas relacionadas con las tablas HTML.
TIEMPO PARA RESOLVER EL EJERCICIO: 45 minutos
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>
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">
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>
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" />
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>
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:
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>
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>
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:
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)
Elementos Multimedia
MARQUESINAS
Permiten animar texto en una pgina web: etiqueta <marquee>
Elementos Multimedia
<object>
Permite ejecutar aplicaciones externas dentro de un pgina web.
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">
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>