Lenguajes Cliente Web

LENGUAJES WEB DEL CLIENTE
Aplicaciones Web

LENGUAJES DESDE EL CLIENTE
•Lenguaje de Marcas HTML.
•Hojas de Estilos CSS.
•Lenguaje de Marcas XHTML.
•JavaScript.
rmonago
2
IES Augustóbriga – 2º SMR – Aplicaciones Web

Página WebPágina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores
• Tipografías
• Alineación
• Efectos
• Validaciones
• Automatización
• Párrafos
• Encabezados
• Listas
•Tablas
• Capas
• Etc.
• Textos
• Imágenes
• Enlaces
• Fondos
• Tamaños
• Etc.
rmonago
3

LENGUAJE CSS
Al crear una página web, se utiliza en primer lugar el
lenguaje HTML/XHTML para marcar los contenidos,
es decir, para designar la función de cada elemento
dentro de la página: párrafo, 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,
tamaño y tipo de letra del texto, separación horizontal y
vertical entre elementos, posición de cada elemento
dentro de la página, etc.
rmonago
4

EN HTML : FORMATOS DE TEXTO
<font color=“green” size="4" face="Comic Sans MS">
Ejemplo de texto en verde
</font>
Las propiedades del texto pueden modificarse a través de la etiqueta
<font> . Para ello, podemos insertar el texto entre las etiquetas y ,
especificando algunos de los atributos de la etiqueta:
FACE: fuente. nombre de la fuente, o fuentes
COLOR: color del texto. número hexadecimal o texto predefinido
SIZE: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o
desplazamiento respecto al tamaño por defecto, añadiendo + o -
delante del valor
rmonago
5

EN HTML : FORMATOS DE TEXTO – EJEMPLO
rmonago
6

EN CSS : FORMATOS DE TEXTO
rmonago
7
La solución que propone CSS es mucho mejor, ejemplo:
<html>
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>

EJEMPLO CSS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
8

CSS
rmonago
9
CSS permite separar los contenidos de la página y la información sobre su
aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una
zona especial en la que se incluye toda la información relacionada con los estilos
de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin
ensuciar el código HTML de los contenidos con etiquetas <font>. Como se verá
más adelante, la etiqueta <style> crea una zona especial donde se incluyen todas
las reglas CSS que se aplican en la página.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de
atributos respecto a la solución anterior.
Pero parece que sigue sin ser una solución ideal: Como los estilos CSS sólo se
aplican en la página que los incluye, ¿si queremos que las 100 páginas
diferentes del sitio tengan el mismo aspecto, se deberían copiar 100 veces
esas mismas reglas CSS?.

CÓMO INCLUIR CSS
rmonago
10
Una de las principales características de CSS es su
flexibilidad y las diferentes opciones que ofrece para
realizar una misma tarea. De hecho, existen tres
opciones para incluir CSS en un documento HTML.
•Incluir CSS en los elementos HTML
•Incluir CSS en el mismo documento HTML
•Definir CSS en un archivo externo

INCLUIR CSS EN LOS ELEMENTOS HTML
11
El menos utilizado, ya que tiene los mismos problemas que la
utilización de las etiquetas <font>.
Esta forma de incluir CSS directamente en los elementos
HTML solamente se utiliza en determinadas situaciones en las
que se debe incluir un estilo muy específico para un solo
elemento concreto.
<body>
<p style="color: black; font-family: Verdana;">Un
párrafo de texto.</p>
</body>

INCLUIR CSS EN EL MISMO DOCUMENTO HTML
12
Los estilos se definen en una zona específica del propio
documento HTML. Se emplea la etiqueta <style> de HTML y
solamente se pueden incluir en la cabecera del documento.
<html>
<head>
<title>Estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

DEFINIR CSS EN UN ARCHIVO EXTERNO
13
Los estilos CSS se incluyen en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>. El archivo CSS es un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos
CSS que sean necesarios y cada página HTML puede enlazar tantos
archivos CSS como necesite.
Para ello, se deben seguir los siguientes pasos:
1) Se crea el archivo css y se le añade el siguiente contenido:
p { color: black; font-family: Verdana; }
2) Se guarda el archivo de texto con el nombre estilos.css y no .txt
3) En la página HTML se enlaza el archivo CSS externo mediante la
etiqueta <link>

14
<html>
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css“ media="screen" />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Cuando el navegador carga la página HTML anterior, antes de mostrar
sus contenidos también descarga los archivos CSS externos
enlazados mediante la etiqueta <link> y aplica los estilos a los
contenidos de la página.

<LINK>
15
La etiqueta <link> incluye cuatro atributos para enlaza un archivo CSS:
• rel: indica el tipo de relación que existe entre el recurso enlazado (en
este caso, el archivo CSS) y la página HTML. Para los archivos CSS,
siempre se utiliza el valor stylesheet
• type: indica el tipo de recurso enlazado. Sus valores están
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 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. Más adelante se explican en detalle los medios CSS y su
funcionamiento.

16
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos
CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa
de incluir un archivo CSS externo se muestra a continuación:
…
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
…
En este caso, para incluir en la página HTML los estilos definidos en archivos
CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo
@import siempre preceden a cualquier otra regla CSS

REGLAS CSS
rmonago
17
• Regla: cada uno de los estilos que componen una hoja de estilos Cada regla está
compuesta de una parte de "selectores", el símbolo de llave de apertura { , otra
parte denominada "declaración" y por último, el símbolo llave de cierre }.
• Selector: indica el elemento/os HTML a los que se aplica la regla CSS.
• Declaración: especifica los estilos que se aplican a los elementos. Está
compuesta por una o más propiedades CSS.
• Propiedad: característica que se modifica en el elemento, ejemplo : color
• Valor: establece el nuevo valor de la característica modificada en el elemento.

MEDIOS CCS
18
Una de las características más importantes de las hojas de estilos CSS es que
permiten definir diferentes estilos para diferentes medios o dispositivos:
pantallas, impresoras, móviles, proyectores, etc.
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print" href="especial.css" />

SELECTORES BÁSICOS
19
• Universal
• Tipos o etiquetas
• Descencientes
• De clases
• De ID
• Combinación de selectores

SELECTOR UNIVERSAL
20
El selector universal se indica mediante un asterisco (*).
A pesar de su sencillez, no se utiliza habitualmente, ya
que es difícil que un mismo estilo se pueda aplicar a
todos los elementos de una página.

SELECTOR DE TIPOS O ETIQUETAS
21
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.
h1 {
color: red;
}
CSS permite agrupar reglas individuales en una sola regla con un selector
múltiple. Para ello, se incluyen todos los selectores separados por una coma (,)
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif; }
También es habitual agrupar las propiedades comunes de varios elementos en
una única regla CSS y posteriormente definir las propiedades específicas de
esos mismos elementos.

SELECTOR DESCENCIENTES
22
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas
de apertura y de cierre del otro elemento.
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector p span selecciona tanto texto1 como texto2.Al resto de elementos
<span> de la página que no están dentro de un elemento <p>, no se les aplica
la regla CSS anterior.

SELECTOR DESCENCIENTES
23
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 descendiente con la combinación de
selectores
p, a, span, em { text-decoration: underline; }

SELECTOR DE CLASES
24
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo?
Creamos una nueva regla llamada destacado
<p> Texto de párrafo </p>
<p class="destacado">Ejemplo párrafo distinto al resto </p>
<p> Texto de párrafo </p>
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la página
cuyo atributo class sea igual a destacado", por lo que solamente el segundo
párrafo cumple esa condición.

SELECTOR DE CLASES
25
Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento.
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
<p class="especial destacado error">Párrafo de texto...</p>

SELECTOR DE ID
26
El selector de ID permite seleccionar un elemento de la página a través del valor
de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la
página porque el valor del atributo id no se puede repetir en dos elementos
diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de
clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.)
como prefijo del nombre de la regla CSS
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

MÁS SELECTORES
27
Selector de hijos
Selector adyacente
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a
href="#"><span>Texto2</span></a></p>
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>

MÁS SELECTORES
28
Selector de atributos
Tipos de selectores de atributos son:
•[nombre_atributo], selecciona los elementos que tienen establecido el
atributo llamado nombre_atributo, independientemente de su valor.
•[nombre_atributo=valor], selecciona los elementos que tienen establecido
un atributo llamado nombre_atributo con un valor igual a valor.
•[nombre_atributo~=valor], selecciona los elementos que tienen establecido
un atributo llamado nombre_atributo y al menos uno de los valores del
atributo es valor.
•[nombre_atributo|=valor], selecciona los elementos que tienen establecido
un atributo llamado nombre_atributo y cuyo valor es una serie de palabras
separadas con guiones, pero que comienza con valor.

SELECTOR DE ATRIBUTOS
29
Se muestran azul todos los enlaces que tengan un atributo "class", independientemente de
su valor
a[class] { color: blue; }
Se muestran azul todos los enlaces que tengan un atributo "class" con el valor "externo"
a[class="externo"] { color: blue; }
Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com"
a[href="http://www.ejemplo.com"] { color: blue; }
Se muestran de color azul todos los enlaces que tengan un atributo "class" en el que al
menos uno de sus valores sea "externo"
a[class~="externo"] { color: blue; }
Selecciona todos los elementos de la página cuyo atributo "lang" sea igual a "en", es decir,
todos los elementos en inglés
*[lang=en] { ... }
Selecciona todos los elementos de la página cuyo atributo "lang" empiece por "es", es
decir, "es", "es-ES", "es-AR", etc.
*[lang|="es"] { color : red }

UNIDADES DE MEDIDA
30
Unidades relativas
La unidades relativas son más flexibles que las unidades absolutas porque se
adaptan más fácilmente a los diferentes medios. A continuación se muestra la
lista de unidades de medida relativas y la referencia que se toma para
determinar su valor real:
• em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño
de letra empleado. Aunque no es una definición exacta, el valor de 1em se
puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo y
tamaño de letra que se esté utilizando
• ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y
tamaño de letra que se esté utilizando
• px, (píxel) relativa respecto de la resolución de la pantalla del usuario
body { font-size: .9em; }

UNIDADES DE MEDIDA
31
Unidades absolutas
Las unidades absolutas definen las medidas de forma completa, ya que sus
valores reales no se calculan a partir de otro valor de referencia, sino que son
directamente los valores indicados. A continuación se muestra la lista completa de
unidades absolutas definidas por CSS y su significado:
• in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros)
• cm, centímetros
• mm, milímetros
• pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)
• pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)
a { font-size: 12pt }

UNIDADES DE MEDIDA
32
Porcentajes
CSS define otra unidad de medida relativa basada en los porcentajes. Un
porcentaje está formado por un valor numérico seguido del símbolo % y siempre
está referenciado a otra medida.
body { font-size: 1em; }
h1 { font-size: 200%; }

UNIDADES DE COLOR
33
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras
clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual.

MODELO DE CAJAS
34
El modelo de cajas es la característica más importante del lenguaje de
hojas de estilos CSS, ya que condiciona el diseño de todas las páginas
web. El modelo de cajas es el comportamiento de CSS que hace que
todos los elementos de las páginas se representen mediante cajas
rectangulares.
Las cajas de una página se crean automáticamente. 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
página:

MODELO DE CAJAS
35

MODELO DE CAJAS
36
Las partes que componen cada caja y su orden de visualización desde el punto
de vista del usuario son las siguientes:
• Contenido (content): se trata del contenido HTML del elemento (las palabras
de un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el
borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del
contenido y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de
cajas adyacentes.

Margin-left Margin-right
Margin-top Margin-bottom
Unidades CSS
margin-left: 1cm;
margin-left: 0,5in;
Indicamos con este atributo el tamaño del margen a la izquierda, …
Padding-left Padding-right
Padding-top Padding-bottom
Unidades CSS
padding-left: 0.5in;
padding-left: 1px;
Indica el espacio insertado, por la izq.., entre el borde del elemento-continente y el contenido.
Border-color color RGB y nombre de color
border-color: red;
border-color: #ffccff;
Para indicar el color del borde del elemento de la página al que se lo aplicamos. Por separado con
los atributos border-top-color, border-right-color, border-bottom-color,…
Border-style
none | dotted | solid | double | groove
| ridge | inset | outset
border-style: solid;
border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece
funcionar), solid=solido, double=doble borde, y el resto estilos 3D.
border-width Unidades CSS
border-width: 10px;
border-width: 0.5in;
El tamaño del borde del elemento al que lo aplicamos.
float none | left | right float: right;
Sirve para alinear un elemento haciendo que el texto se agrupe alrededor.
clear none | right | left clear: right;
CAJAS
37

TEXTOS
38
text-indent
Desplazamiento de la primera
línea del texto
[ <longitud> |
<porcentaje> ]
text-align Alineamiento del texto
[ left | right | center |
justify ]
text-decoration
Efectos de subrayado, tachado,
parpadeo
[ none | [ underline ||
overline || line-through
|| blink ] ]
letter-spacing Espacio entre caracteres [ normal | <longitud> ]
word-spacing Espacio entre palabras [ normal | <longitud> ]
text-transform
Transformaciones del texto a
mayúsculas/minúsculas
[ capitalize | uppercase |
lowercase | none ]
white-space
Comportamiento de los espacios
dentro de los elementos
[ normal | pre | nowrap |
pre-wrap | pre-line ]

font-family Familias de fuentes
[ [ <nombre-familia> | <familia-genérica> ] [,
<nombre-familia> | <familia-genérica> ]* ]
font-style Estilo de la fuente [ normal | italic | oblique ]
font-variant
Convierte las minúsculas a
mayúsculas pero mantienen
un tamaño inferior a las
mayúsculas
[ normal | small-caps ]
font-weight Intensidad de la fuente
[ normal | bold | bolder | lighter | 100 |400
]
font-size Tamaño de la fuente
[ [ xx-small | x-small | small | medium | large
| x-large | xx-large] | [larger | smaller] |
<longitud> | <porcentaje> ]
font
Atajo para establecer el resto
de propiedades sobre las
fuentes a la vez
[ [ [ <font-style> || <font-variant> || <font-
weight> ]? <font-size> [ / <line-height> ]?
<font-family> ] | caption | icon | menu |
message-box | small-caption | status-bar ]
FUENTES
39

TABLAS
40
caption-side
Posición del título de
respecto la tabla
[ top | bottom ]
caption-side
respecto la tabla
[ top | bottom ]
caption-side
respecto la tabla
[ top | bottom ]
caption-side
respecto la tabla
[ top | bottom ]
caption-side
respecto la tabla
[ top | bottom ]

43
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

Lenguajes Cliente Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (15)

Semelhante a Lenguajes Cliente Web

Semelhante a Lenguajes Cliente Web (20)

Mais de rmonago

Mais de rmonago (20)

Último

Último (20)

Lenguajes Cliente Web