Unidad 3 Romero Mendez Ivan Daniel 12011267 Programacion Web PDF

PROGRAMACION WEB 2016
INSTITUTO TECNOLGICO
DE ORIZABA
ALUMNO
ROMERO MENDEZ IVAN DANIEL
MATERIA
PROGRAMACION WEB
TEMA
ACTIVIDADES PROGRAMACION WEB
GRUPO
7g5D
HORA
16:00 A 17:00
Unidad 3
3.1 Introduccin
Un leguaje de presentacin define un conjunto de etiquetas y atributos validos y que ofrecen un

significado visual para cada elemento del lenguaje, sino que ofrece un numero de reglas
sintcticas para poder crear documentos. Uno de los lenguajes mas comunes para presentar
informacin
web
es
HTML.
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los
documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentacin y es imprescindible para crear paginas web complejas.
Al crear una pagina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la funcin de cada elemento dentro de la pagina: prrafo,
titular,
texto
destacado,
tabla,
lista
de
elementos,
etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamao y tipo de letra del texto, separacin horizontal, etc.
Un lenguaje de marcado cumple con dos objetivos esenciales a la hora de disear y procesar un
documento digital :
Especifica las operaciones tipogrficas y las funciones que debe ejecutar el programa
navegador/visualizador sobre dichos elementos. Las operaciones tipogrficas son
instrucciones de formato que se aplican a cada uno de los elementos de un documento
digital como, por ejemplo, imprimir un ttulo en negrita y a un determinado tamao.
Separa un texto en los elementos de los que se compone, como por ejemplo un prrafo,
un captulo, un encabezamiento, etc.
As, pues, hay 2 tipos de marcacin:
especfica: describe cmo ha de formatearse el documento: fuente, tamao, color, etc.
Romero Mndez Ivn Daniel
Pgina 2
estructural: describe la estructura del documento: titular, prrafo, etc.
En general los lenguajes de marcado siguen una sintaxis basada en el uso de marcas o etiquetas:
una etiqueta que indica el principio de un elemento y otra el final del mismo.
3.2 Sintaxis
Funcionamiento bsico de CSS

Antes de que se generalizara el uso de CSS, los diseadores de paginas web utilizaban etiquetas
HTML especiales para modificar el aspecto de los elementos de la pagina. El siguiente ejemplo
muestra una pagina HTML con estilos definidos sin utilizar CSS:
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el
color, el tipo y el tamao de letra de cada elemento.
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
CSS permite separar los contenidos de la pagina y la informacin sobre su aspecto. En le ejemplo
anterior, dentro de la propia pagina HTML se crea una zona especial en la que se incluye toda la
informacin
relacionada
con
los
estilos
de
la
pagina.
Utilizando CSS, se puede establecer los mismos estilos con menos esfuerzo y sin ensuciar el
cdigo HTML de los contenidos con etiquetas <font>. Como se vera mas adelante, la etiqueta
<style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pagina.
Los
estilos
se
definen
en
una
zona
especifica
del
propio
documento
HTML.
Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del

documento
(solo
dentro
de
la
seccin
<head>).
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
Rel: indica el tipo de relacin que existe entre el recurso enlazado (en este caso, el archivo CSS) y
la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
Type: indica el tipo de recurso enlazado. Sus valores estn estandarizados y para los archivos CSS
su
valor
siempre
es
text/css.
Href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o
Pgina 3
absoluta y puede apuntar a un recurso interno o externo al sitio web.

Media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Mas adelante se
explican en detalle los medios CSS y su funcionamiento.
Pgina 4
3.3 Selectores
Selector universal
Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte
de la declaracin de la regla CSS):
*{
margin: 0;
padding: 0;
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difcil que un mismo estilo se pueda aplicar a todos los elementos de una
pgina.
No obstante, s que se suele combinar con otros selectores y adems, forma parte de algunos
hacks muy utilizados, como se ver ms adelante.
Pgina 5
Selector de tipo o etiqueta

Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector.
El siguiente ejemplo selecciona todos los prrafos de la pgina:
p{
...
}
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los
caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los prrafos de una pgina HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p{
color: black;
}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los
selectores. En el siguiente ejemplo, los ttulos de seccin h1, h2 y h3 comparten los mismos
estilos:
Pgina 6
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector
mltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es
que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 {
color: #8A8E27;
}
Pgina 7
En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos
en una nica regla CSS y posteriormente definir las propiedades especficas de esos mismos
elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los ttulos
de seccin (color y tipo de letra) y a continuacin, establece el tamao de letra de cada uno de
ellos:
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es
Descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del Otro
elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la pgina que
se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el cdigo HTML de la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
Pgina 8
...
</p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que en el
selector Descendente, un elemento no tiene que ser descendiente directo del otro. La
nica Condicin es que un elemento debe estar dentro de otro elemento, sin importar el nivel de
profundidad en el que se encuentre. Al resto de elementos <span> de la pgina que no estn
dentro de un elemento <p>, no se les aplica la regla CSS anterior. Los selectores descendentes
permiten aumentar la precisin del selector de tipo o Etiqueta. As, utilizando el selector
descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente
ejemplo ampla el anterior y muestra de color azul todo el texto de los <span> contenidos dentro
de un <h1>:
p span { color: red; }
h1 span { color: blue; }
Con las reglas CSS anteriores:
Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
El resto de elementos <span> de la pgina, se muestran con el color por defecto aplicado por el
navegador. La sintaxis formal del selector descendente se muestra a continuacin:
selector1 selector2 selector3 ... selectorN
Los selectores descendentes siempre estn formados por dos o ms selectores separados entre s
por espacios en blanco. El ltimo selector indica el elemento sobre el que se aplican los estilos y
todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento En el
siguiente ejemplo, el selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren Dentro
de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de Tipo <a> que se
encuentren dentro de elementos de tipo <p>. No debe confundirse el selector descendente con la
combinacin de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
Pgina 9
p a span em { text-decoration: underline; }

Se puede restringir el alcance del selector descendente combinndolo con el selector
universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de Color rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La razn es que el selector p * a se interpreta como todos los elementos de tipo <a>
que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro
de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente
bajo un elemento <p>, no se cumple la condicin del selector p * a.
Selector de clase
Si
se
considera
el
siguiente
cdigo
HTML
de
ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Cmo se pueden aplicar estilos CSS slo al primer prrafo? El selector universal (*) no se puede
utilizar porque selecciona todos los elementos de la pgina. El selector de tipo o etiqueta (p)
tampoco se puede utilizar porque seleccionara todos los prrafos. Por ltimo, el selector
descendente (body p) tampoco se puede utilizar porque todos losprrafos se encuentran en el
mismo sitio.Una de las soluciones ms sencillas para aplicar estilos a un solo elemento de la pgina
Pgina 10
Consiste en utilizar el atributo class de HTML sobre ese elemento para indicar Directamente la
regla CSS que se le debe aplicar:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuacin, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos
que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros
tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el
siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la pgina cuyo atributo class sea
igual a destacado", por lo que solamente el primer prrafo cumple esa condicin. Este tipo de
selectores se llaman selectores de clase y son los ms utilizados junto con los selectores de ID que
se vern a continuacin. La principal caracterstica de este selector es que en una misma pgina
HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Los selectores de clase son imprescindibles para disear pginas web complejas, ya que Permiten
disponer de una precisin total al seleccionar los elementos. Adems, estos Selectores permiten
reutilizar los mismos estilos para varios elementos diferentes. A continuacin se muestra otro
ejemplo de selectores de clase:
.aviso {
padding: 0.5em;
Pgina 11
border: 1px solid #98be10;

background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>
<div class="aviso">...</div>
El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas
CSS indicadas por el selector.error. Por su parte, el elemento <div> tiene un atributo
class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el

ejemplo anterior:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Pgina 12
Cmo es posible aplicar estilos solamente al prrafo cuyo atributo class sea igual a destacado?
Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho ms
especfico:
p.destacado { color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un
atributo class con valor destacado". De la misma forma, el selector a.destacado solamente
selecciona los enlaces cuyo atributo class sea igual a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos
los diseadores obvian el smbolo * al escribir un selector de clase normal. No debe confundirse
el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso" */

p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estn dentro

de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con

atributo class="aviso" de la pgina */
p, .aviso { ... }
Por ltimo, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis
es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el
siguiente ejemplo:
<p class="especial destacado error">Prrafo de texto...</p>
Al prrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y .error, por
lo que en el siguiente ejemplo, el texto del prrafo se vera de color rojo, en negrita y con un
tamao de letra de 15 pxel:
Pgina 13
.error { color: red; }

.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Si un elemento dispone de un atributo class con ms de un valor, es posible utilizar un selector
ms avanzado:
.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
3.4 Tipos de medios
Tipos de medios
Uno de los rasgos ms importantes de las hojas de estilo es que especifican cmo debe ser
presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de
voz,
con
un
dispositivo
braille,
etc.
Ciertas propiedades CSS son diseadas slo para ciertos medios (ejemplo, la propiedad 'cuebefore' para las aplicaciones del usuario auditivas). En ocasiones, sin embargo, las hojas de estilo
para diferentes tipos de medios pueden compartir una propiedad, pero requieren de valores
Pgina 14
diferentes para esa propiedad. Por ejemplo, la propiedad 'font-size' es til para la pantalla y los
medios impresos. Sin embargo, los dos medios son lo suficientemente diferentes como para
requerir diferentes valores para la propiedad comn; un documento necesitar tpicamente una
fuente mayor en una pantalla de computadora que sobre papel. La experiencia tambin
demuestra que las fuentes sans-serif son ms fciles de leer en pantalla, mientras que las fuentes
con serif son ms fciles de leer sobre papel. Por estas razones, es necesario expresar que una
hoja de estilo --o una seccin de una hoja de estilo-- se aplica a ciertos tipos de medios.
Especificacin de hojas de estilos dependientes de los medios
Actualmente hay dos maneras de especificar la dependencia de las hojas de estilos:

Especificando el medio de destino desde una hoja de estilo con las reglas-arroba @media o
@import.
@import url("loudvoice.css") aural;
@media print {
/* la hoja de estilo para impresin va aqu */
Especificando el medio de destino dentro del lenguaje del documento. Por ejemplo, en
HTML 4.0 ([HTML40]), el atributo "media" en el elemento LINK especifica el medio de
destino de una hoja de estilo externa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Vnculo a un medio</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>El cuerpo...
</BODY>
</HTML>
Pgina 15
La regla @import es definida en el captulo sobre cascada.

La regla @media
Una regla @media especifica los tipos de medios de destino (separados por comas) de un juego de
reglas (delimitadas por llaves). La construccin @media le permite a la hoja de estilo reglas para
distintos medios en la misma hoja de estilo:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Tipos de medios reconocidos
Un tipo de medio de CSS designa un juego de propiedades CSS. Una aplicacin del usuario que
aspira a dar soporte a un tipo de medio por nombre debe implementar todas las propiedades que
se aplican a ese tipo de medio. Los nombres elegidos para los tipos de medios de CSS reflejan los
dispositivos de destino para los cuales las propiedades relevantes tienen sentido. En el siguiente
listado de tipos de medios de CSS, las descripciones entre parntesis no son normativas.
Solamente brindan un sentido de la clase de dispositivo del tipo de medio a que se hace
referencia.
all
Apropiado para todos los dispositivos

aural
Propuesto para los sintetizadores de voz. Ver la seccin sobre hojas de estilo auditivas para ms
detalles.
Braille
Pgina 16
Propuesto para dispositivos tctiles braille.

Embossed
Propuesto para impresoras de pginas braille.
handheld
Propuesto para dispositivos de mano (tpicamente de pantalla pequea, monocromos, de
limitado ancho de banda).
print
Propuesto para material opaco en pginas y para documentos percibidos en pantalla en modo de
vista previa a la impresin. Por favor, consulte la seccin sobre medios paginados por informacin
acerca de los formatos de publicacin que son especficos de los medios paginados.
projection
Propuesto para las presentaciones proyectadas, por ejemplo, proyectores o transparencias

impresas. Por favor, consulte la seccin sobre medios paginados por informacin acerca de los
formatos de publicacin que son especficos de los medios paginados.
screen
Propuesto primariamente para pantallas de computadora a color.
tty
Propuesto para medios que usan una grilla de caracteres de espacio fijo, tales como teletipos,
terminales o dispositivos porttiles con limitada capacidad del monitor. Los autores no deben usar
las unidades en pixeles con el tipo de medio "tty".
tv
Propuesto para dispositivos de tipo televisin (baja resolucin, color, pantalla con limitado
desplazamiento, sonido disponible).Los nombres de los tipos de medios no diferencian entre
maysculas y minsculas. Debido al acelerado cambio de las tecnologas, CSS2 no especifica una
lista definitiva de tipos de medios que pueden ser valores para @media.
Pgina 17
3.5 Modelos de cajas

Modelo de cajas
El modelo de cajas o "box model" es seguramente la caracterstica ms importante del lenguaje de
hojas de estilos CSS, ya que condiciona el diseo de todas las pginas web. El modelo de cajas es el
comportamiento de CSS que hace que todos los elementos de las pginas se representen
mediante
cajas
rectangulares.
Las cajas de una pgina se crean automticamente. Cada vez que se inserta una etiqueta HTML, se
crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen
muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la pgina:
Figura 4.1 Las cajas se crean automticamente al definir cada elemento HTML los navegadores
crean y colocan las cajas de forma automtica, pero CSS permite modificar todas sus
caractersticas. Cada una de las cajas est formada por seis partes, tal y como muestra la siguiente
imagen:
Las partes que componen cada caja y su orden de visualizacin desde el punto de vista del usuario
son las siguientes:
Contenido (content): se trata del contenido HTML del elemento (las palabras de un prrafo, una
imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Pgina 18
Borde (border): lnea que encierra completamente el contenido y su relleno.

Imagen de fondo (background image): imagen que se muestra por detrs del contenido y el
espacio de relleno.
Color de fondo (background color): color que se muestra por detrs del contenido y el espacio de
relleno.
Margen (margin): separacin opcional existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen de fondo (si estn definidos) y en el espacio ocupado por el margen se
muestra el color o imagen de fondo de su elemento padre (si estn definidos). Si ningn elemento
padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la
propia
pgina
(si
estn
definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene ms prioridad y es la
que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si
la imagen tiene zonas transparentes, tambin se visualiza el color de fondo. Combinando
imagenes transparentes y colores de fondo se pueden lograr efectos grficos muy interesantes.
Anchura
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.
La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de
la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de
su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explcita un
valor a esta propiedad, indica que el navegador debe calcular automticamente la anchura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:
#lateral { width: 200px; }
<div id="lateral">
...
</div>
CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y maxwidth, que se vern ms adelante.
Altura
La propiedad CSS que controla la altura de los elementos se denomina height.
Pgina 19
Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un
porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene
una altura definida explcitamente, se asigna el valor auto a la altura.
El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto,
que es el que se utiliza si no se establece de forma explcita un valor a esta propiedad, indica que
el navegador debe calcular automticamente la altura del elemento, teniendo en cuenta sus
contenidos
y
el
sitio
disponible
en
la
pgina.
El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:
#cabecera { height: 60px; }
<div id="cabecera">
...
</div>
CSS define otras dos propiedades relacionadas con la altura de los elementos: min-height y maxheight, que se vern ms adelante.
Margen
CSS define cuatro propiedades para controlar cada uno de los mrgenes horizontales y verticales
de un elemento. Cada una de las propiedades establece la separacin entre el borde lateral de la
caja y el resto de cajas adyacentes:
Las unidades ms utilizadas para indicar los mrgenes de un elemento son los pxeles (cuando se
requiere una precisin total), los em (para hacer diseos que mantengan las proporciones) y los
porcentajes
(para
hacer
diseos
lquidos
o
fluidos).
El siguiente ejemplo aade un margen izquierdo al segundo prrafo:
Pgina 20
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,

cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros

egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>
A continuacin se muestra el aspecto del ejemplo anterior en cualquier navegador:
Algunos diseadores web utilizan la etiqueta <blockquote> para tabular los contenidos de los
prrafos. Se trata de un error grave porque HTML no debe utilizarse para controlar el aspecto de
Pgina 21
los elementos. CSS es el nico responsable de establecer el estilo de los elementos, por lo que en
vez de utilizar la etiqueta <blockquote> de HTML, debera utilizarse la propiedad margin-left de
CSS. El ejemplo anterior de mrgenes se puede reescribir utilizando la propiedad margin:
Cdigo CSS original
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
div img {
margin: .5em;
margin-left: 1em;
}
Pgina 22
3.6 Aplicacin en documento web

Aplicacin en documento web
CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web:
1. Una hoja de estilo externa, esta almacenada en un archivo diferente al archivo donde se
almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente,
porque separa completamente las reglas de formateo para la pgina HTML de la
estructura bsica de la pgina.
2. Una hoja de estilo interna, est incrustada dentro de un documento HTML (Dentro del
elemento <head>). De esta manera se obtiene el beneficio de separar la informacin del
estilo, del cdigo HTML se pierde. En general, la nica vez que se usa una hoja de estilo
interna, es cuando se quiere proporcionar alguna caracterstica especfica una pgina
Web.
3. Un estilo en lnea, que es un mtodo para insertar el lenguaje de estilo de pgina,
directamente, dentro de una etiqueta HTML. Este modo de trabajo se podra usar de
manera ocasional si se pretende aplicar un formateo al vuelo. No es todo lo claro, o
estructurado, que debera ser, pero funciona. es necesario incluir el atributo STYLE.
Hoja de estilo interna
El
siguiente
cdigo
estar
colocado
en
el
head
<style>
body
del
archivo
html.
{
background-color:#345485;
}
h1
font-family:'Times
}
p
New
{
color:orange;
Roman';
text-align:center;
{
color:#E9EBAB;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
text-align:center;
Pgina 23
</style>
Hoja de estilo externa
El cdigo que a continuacin se presenta deber almacenarse en un archivo con extensin

css.
Dicho archivo ser referenciado desde el head con la siguiente lnea.
<head>
<link href='0306css02.css' rel='stylesheet' />
<head>
Fijar una imagen de fondo
El atributo background nos indica la imagen que se usara de fondo (lnea 2)
El atributo background-attachment en fixed fija la imagen al centro de la forma (lnea 3).
body {
background: transparent url('escudoITV.png')
no-repeat center
background-attachment: fixed;
}
h1 {
color:red;
font-family:'Times New Roman';
font-size:24px;
font-weight:bold;
text-align:center;
}
h2 {
Pgina 24
color:blue;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
}
p{
color:black;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
}
Pgina 25
ACTIVIDAD Unidad 3 XML

XML (Extensible Markup Language) es un lenguaje de etiquetas, es decir, cada paquete
de informacin est delimitado por dos etiquetas como se hace tambin en el lenguaje
HTML, pero XML separa el contenido de la presentacin. Explicaremos esto con el
siguiente ejemplo:
<H1>Mateo</H1>
<Nombre>Mateo</Nombre>
<--- HTML
<--- XML
<H1> y <Nombre> son etiquetas. Ambas encierran el texto o paquete de informacin

Mateo. La etiqueta <H1> es de HTML, y se encarga de mostrar visualmente el texto
Mateo en la pgina web en un tamao determinado pero no dice nada del significado de
Mateo: si es una ciudad o un nombre, por ejemplo. En cambio la etiqueta <Nombre> es
de XML y nos dice que Mateo es un nombre de persona, por lo tanto XML se preocupa
del significado del texto que encierra y no de la apariencia de cmo se muestre el texto en
la pgina web. Por eso se dice que XML es un lenguaje de etiquetas, que como hemos
dicho anteriormente, separa el contenido de la presentacin. Lo mismo se puede definir el
lenguaje XML usando palabras mas tcnicas pero con el mismo significado que la
definicin anterior: XML describe el sentido semntico de los datos dejando de lado la
presentacin.
Un programa informtico puede estar escrito en Java, Visual Basic y cualquier otro
lenguaje. En esencia, todos los programas procesan informacin, entendindose por
informacin dato + significado. Para el caso que estamos viendo, el dato en el ejemplo
sera Mateo y el significado es un nombre de persona. Por lo tanto un documento
escrito en XML tendra la informacin que necesitan los programas para procesar.
Caracterstica
1. XML es un estndar para escribir datos estructurados en un fichero de texto.
Pgina 26
XML provee un conjunto de reglas, normas y convenciones para disear formatos de texto
para datos estructurados que van desde las hojas de clculo, o las libretas de direcciones
de Internet, hasta parmetros de configuracin, transacciones financieras o dibujos
tcnicos.
Su uso Los programas que los generan, utilizan normalmente formatos binarios o de
texto. XML es permite resolver problemas comunes, como la falta de extensibilidad,
carencias de soporte debido a caractersticas de internacionalizacin, o problemas
asociados a plataformas especficas.
2. XML parece HTML pero no lo es.
Tanto XML como HTML usan marcas y atributos, ms su diferencia radica en que, HTML
cada marca y atributo estable un significado a la vez que incluyendo el aspecto que debe
tener al verse en un navegador, en XML slo se usan las marcas para delimitar
fragmentos de datos, dejando la interpretacin de stos a la aplicacin que los lee.
3. XML est en formato texto, pero no para ser ledo.
El formato texto puede ser usado en cualquier plataforma, esto le da innumerables
ventajas de portabilidad, depuracin, independencia de plataforma, e incluso de edicin,
pero su sintaxis es ms estricta que la de HTML: una marca olvidada o un valor de
atributo sin comillas convierten el documento en inutilizable. No hay permisividad en la
construccin de documentos, ya que esa es la nica forma de protegerse contra
problemas ms graves.
4. XML consta de una familia de tecnologas.
La definicin (estndar) de XML 1.0 que viene de Febrero 98, pero su desarrollo se ha ido
enriqueciendo paulatinamente a medida que se vean sus posibilidades: de esa forma,
contamos con una especificacin Xlink, que describe un modo estndar de aadir
hipervnculos a un documento XML. XPointer y XFragments son especificaciones para
establecer la forma de vincular partes de un documento XML. Incluso el lenguaje de hojas
de estilo (CSS) se puede utilizar con XML al igual que se hace con HMTL. XSL es
precisamente, una extensin del anterior, en la que se dispone de todo un lenguaje de
programacin exclusivamente para definir criterios de seleccin de los datos almacenados
en un documento XML, y que funciona conjuntamente con las CSS o con HTML para
suministrar al programador y al usuario mecanismos de presentacin y seleccin de
informacin, que no requieran de la intervencin constante del servidor. Se basa en un
lenguaje anterior para transformacin (XSLT) que permite modificar atributos y marcas de
forma dinmica.
5. XML es prolijo, pero eso no supone un problema.
Los ficheros resultantes, son casi siempre mayores que sus equivalentes binarios. Esto es
intencionado, y las ventajas ya las hemos comentado ms arriba, mientras que las
Pgina 27
desventajas, siempre pueden ser soslayadas mediante tcnicas de programacin que

permite comprimir los datos.
6. XML es nuevo, pero no tanto.
El estndar empez a disearse en 1996, y se public la recomendacin en Febrero/98.
Como ya hemos comentado, eso no significa que la tecnologa no est suficientemente
madura, ya que el estndar SGML en el que se basa, data de una especificacin ISO del
ao 1986.
7. XML no requiere licencia
Es un estndar abierto independiente de la plataforma, y tiene un amplio soporte
extendido a un sinnmero herramientas y desarrolladores.
ESTRUCTURA
Un documento XML tiene dos estructuras, una lgica y otra fsica. Fsicamente, el
documento est compuesto por unidades llamadas entidades. Una entidad puede hacer
referencia a otra entidad, causando que esta se incluya en el documento. Cada
documento comienza con una entidad documento, tambin llamada raz. Lgicamente el
documento est compuesto de declaraciones, elementos, comentarios, referencias a
caracteres e instrucciones de procesamiento, todos los cuales estn indicados por una
marca explcita. Al revisar las estructuras lgica y fsica nos damos cuenta que los
documentos XML deben cumplir dos requisitos:
Deben ser Bien formados: Son todos los que cumplen las especificaciones del lenguaje
respecto a las reglas sintcticas sin estar sujetos a unos elementos fijados en un DTD. De
hecho los documentos XML deben tener una estructura jerrquica muy estricta y los
documentos bien formados deben cumplirla.
Deben ser Vlidos: Adems de estar bien formados, siguen una estructura y una
semntica determinada por un DTD: sus elementos y sobre todo la estructura jerrquica
que define el DTD, adems de los atributos, deben ajustarse a lo que el DTD dicte.
Un primer ejemplo: Hola mundo en XML

Veamos un primer ejemplo muy sencillo, que muestra en pantalla el clsico mensaje Hola
Mundo.
<?xml version=1.0 encoding=UTF-8?>
<!DOCTYPE Mensaje [ <!ELEMENT Contenido (#PCDATA)> ]>
<! este es un comentario >
<Contenido>Hola, mundo!</Contenido>
Pgina 28
Visto en el Navegador Mozilla Firefox

En el ejemplo ya podemos observar 3 lneas clave: La primera, es la definicin general.
Nos indica que lo que viene a continuacin es un documento XML (las de inicio y fin son
el carcter obligatorio que delimita esa definicin. Adems, observamos dos atributos:
versin -que se establece a 1.0- que nos indica que el intrprete de XML debe de utilizar
las normas establecidas en Febrero/98 y enconding, asignado a UTF-8, y que el
estndar recomienda incluir siempre. Tngase en cuenta que XML debe soportar
caractersticas internacionales, por tanto se dice que, tras su interpretacin, todo
documento XML devuelve Unicode. El valor por defecto es UTF-8.
La segunda lnea es una DTD muy simple. Consta de la declaracin de tipo de documento
mediante !DOCTYPE seguido del nombre genrico que va a recibir el objeto que se defina
a continuacin (mensaje), e indica que slo va a contener un elemento (!ELEMENT) que
tambin se denominar mensaje y que est compuesto de texto (#PCDATA).
Finalmente, la cuarta lnea (la tercera es un simple comentario) contiene la informacin en
s. Dentro de dos etiquetas de apertura y cierre con el nombre definido en la lnea 2, se
incluye la informacin propiamente dicha.
En la salida de ejemplo producida en Mozilla Firefox no estamos indicando ningn modo
de presentacin. Por tanto el navegador asume que lo que queremos es analizar el
documento con el parser y averiguar si existe algn error en l: reconoce el tipo de
documento, simplifica el DTD limitndose a mostrar su cabecera, y recorre los datos
cambiando el color de las marcas y smbolos para que la interpretacin sea ms sencilla.
Elementos
Elementos XML se pueden definir como bloques de construccin de un XML Los
elementos pueden comportarse como contenedores para texto, elementos, atributos,
objetos de soporte o de todas ellas.
Cada documento XML contiene uno o ms elementos, el alcance de lo que son o bien
delimitado por las etiquetas inicial y final, o de elementos vacos, de una etiqueta de
elemento vaco.
Sintaxis
Siguiente es la sintaxis para escribir un elemento XML:
<element-name attribute1 attribute2>
....content
</element-name>
Pgina 29
Donde
Element-name es el nombre del elemento. El nombre en las etiquetas inicial y final deben
coincidir.
attribute1, attribute2 son atributos del elemento separados por espacios en blanco. Un
atributo define una propiedad del elemento. Es decir, se asocia un nombre con un valor,
que es una cadena de caracteres. Un atributo se escribe como:
name = "value"
Nombre es seguido por el = signo y un cadena valor doble interior(" ") o (' ') cita.
Elemento vaco
Un elemento vaco (elemento que no tiene contenido) tiene la siguiente sintaxis:
<name attribute1 attribute2.../>
Ejemplo de un documento XML utilizando diversos elemento XML:
<?xml version="1.0"?>
<contact-info>
<address category="residence">
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
<address/>
</contact-info>
Elementos XML Reglas necesarias para ser seguido por elementos XML:
Nombre de un elemento puede contener cualquier combinacin de caracteres
alfanumricos. El nico signo de puntuacin en nombres son el guin (-), la puntuacin (_)
y el punto (.).
Los nombres son sensibles a las maysculas y minsculas. Por ejemplo, la direccin, la
direccin y la direccin son diferentes nombres.
La etiqueta inicial y final de un elemento debe ser idntico.
Pgina 30
Un elemento, que es un contenedor, puede contener texto o elementos como se ve en el

ejemplo de arriba.
Atributos
Este captulo describe los atributos XML. Los atributos son parte de los elementos XML.
Un elemento puede tener varios atributos nicos. Atributo proporciona ms informacin
acerca de elementos XML. Para ser ms precisos, se definen las propiedades de los
elementos. Un atributo XML es siempre un par de nombre-valor
Sintaxis
Un atributo XML tiene la siguiente sintaxis:
<element-name attribute1 attribute2 >

....content..
< /element-name>
Donde atributo1 y atributo2 tiene la siguiente forma:
Name = "valor"
Valor tiene que ser en doble (" ") o (' ') cita. Aqu, atributo1 y atributo2 son atributo
exclusivo etiquetas.
Los atributos se utilizan para agregar una etiqueta nica a un elemento, coloque la
etiqueta de una categora, agregar una bandera booleana, o de lo contrario se ha de
asociar una cadena de datos. Ejemplo siguiente muestra el uso de atributos:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE garden [
<!ELEMENT garden (plants)*>
<!ELEMENT plants (#PCDATA)>
<!ATTLIST plants category CDATA #REQUIRED>
]>
<garden>
Pgina 31
<plants category="flowers" />

<plants category="shrubs">
</plants>
</garden>
Los atributos se utilizan para distinguir entre elementos del mismo nombre. Cuando no se
desea crear un nuevo elemento de cada situacin. Por lo tanto, el uso de un atributo
puede agregar un poco ms en detalle a la hora de diferenciar dos o ms elementos
similares. En el ejemplo anterior, se han considerado las plantas incluyendo atributo
categora y asignar valores diferentes a cada uno de los elementos. Por lo tanto, tenemos
dos categoras de plantas, una flores y otros colores. Por lo tanto, tenemos dos elementos
vegetales con diferentes atributos.
Tambin se puede observar que hemos declarado este atributo en el comienzo del XML.
Tipos de atributos
StringType
Toma cualquier cadena literal como un valor. CDATA es una StringType. CDATA es de
caracteres. Esto significa cualquier cadena de caracteres de marcas es una parte jurdica
del atributo.
TokenizedType
Este tipo es ms limitada. La validez las restricciones que se muestran en la gramtica se
aplican despus de que el valor de atributo se normaliza. La TokenizedType atributos son
los siguientes:
ID : se utiliza para especificar el elemento como nico.
IDREF : se usa para hacer referencia a un ID que ha sido nombrado por otro elemento.
IDREFS : se usa para hacer referencia a todos los ID de un elemento.
ENTIDAD : indica que el atributo se representan una entidad externa en el documento.
ENTIDADES : indica que el atributo se representan las entidades externas en el
documento.
NMTOKEN : es similar a CDATA con restricciones sobre el tipo de datos puede ser parte
del atributo.
Pgina 32
NMTOKENS : es similar a CDATA con restricciones sobre lo que los datos pueden ser
parte del atributo.
EnumeratedType
Este tiene una lista de valores predefinidos en su declaracin y de la cual, se debe
asignar un valor. Hay dos tipos de enunciados atributo:
NotationType : declara que un elemento se har referencia a una notacin declarada en
algn otro lugar del documento XML.
Enumeracin : Enumeracin permite definir una lista de valores especfica que el valor del
atributo debe coincidir.
Reglas de atributos Elemento
A continuacin, se indican las reglas que debern seguirse para atributos:
Un nombre de atributo no debe aparecer ms de una vez en la misma etiqueta de inicio o
vaco de etiqueta de elemento.
Un atributo debe ser declarado en la definicin de tipo de documento (DTD) utilizando un
Attribute-List Declaracin.
Los valores de los atributos no deben contener directa o indirecta las referencias a
entidades externas.
El texto de reemplazo de cualquiera de las entidades a que se refiere directa o
indirectamente en un valor de atributo no debe contener menos de signo <
Pgina 33

Unidad 3 Romero Mendez Ivan Daniel 12011267 Programacion Web PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Unidad 3 Romero Mendez Ivan Daniel 12011267 Programacion Web PDF

Caricato da

Copyright:

Formati disponibili

PROGRAMACION WEB 2016

Un leguaje de presentacin define un conjunto de etiquetas y atributos validos y que ofrecen un

As, pues, hay 2 tipos de marcacin:

especfica: describe cmo ha de formatearse el documento: fuente, tamao, color, etc.

Romero Mndez Ivn Daniel

estructural: describe la estructura del documento: titular, prrafo, etc.

Funcionamiento bsico de CSS

Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del

absoluta y puede apuntar a un recurso interno o externo al sitio web.

Romero Mndez Ivn Daniel

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

Romero Mndez Ivn Daniel

Selector de tipo o etiqueta

Romero Mndez Ivn Daniel

Romero Mndez Ivn Daniel

p a span em { text-decoration: underline; }

Romero Mndez Ivn Daniel

border: 1px solid #98be10;

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el

Romero Mndez Ivn Daniel

/* Todos los elementos de tipo "p" con atributo class="aviso" */

/* Todos los elementos con atributo class="aviso" que estn dentro

/* Todos los elementos "p" de la pgina y todos los elementos con

Romero Mndez Ivn Daniel

.error { color: red; }

Actualmente hay dos maneras de especificar la dependencia de las hojas de estilos:

@import url("loudvoice.css") aural;

/* la hoja de estilo para impresin va aqu */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

La regla @import es definida en el captulo sobre cascada.

Apropiado para todos los dispositivos

Propuesto para dispositivos tctiles braille.

Propuesto para las presentaciones proyectadas, por ejemplo, proyectores o transparencias

Romero Mndez Ivn Daniel

3.5 Modelos de cajas

Borde (border): lnea que encierra completamente el contenido y su relleno.

<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,

<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros

Romero Mndez Ivn Daniel

3.6 Aplicacin en documento web

Romero Mndez Ivn Daniel

El cdigo que a continuacin se presenta deber almacenarse en un archivo con extensin

Dicho archivo ser referenciado desde el head con la siguiente lnea.

El atributo background nos indica la imagen que se usara de fondo (lnea 2)

El atributo background-attachment en fixed fija la imagen al centro de la forma (lnea 3).

Romero Mndez Ivn Daniel

Romero Mndez Ivn Daniel

ACTIVIDAD Unidad 3 XML

<H1> y <Nombre> son etiquetas. Ambas encierran el texto o paquete de informacin

Romero Mndez Ivn Daniel

Romero Mndez Ivn Daniel

desventajas, siempre pueden ser soslayadas mediante tcnicas de programacin que

Un primer ejemplo: Hola mundo en XML

Visto en el Navegador Mozilla Firefox

Romero Mndez Ivn Daniel

Un elemento, que es un contenedor, puede contener texto o elementos como se ve en el

<element-name attribute1 attribute2 >

Romero Mndez Ivn Daniel

<plants category="flowers" />

Romero Mndez Ivn Daniel

Romero Mndez Ivn Daniel

Potrebbero piacerti anche