Equipo 3

LENGUAJE DE
PRESENTACIN:
SINTAXIS

18/03/15

Lenguaje de presentacin: Sintaxis

4/20/15

S.E.P.

D.G.E.S.T.

INSTITUTO TECNOLGICO

de Tuxtepec
Programacin

Web

CARRERA:
Ingeniera en Sistemas Computacionales

PRESENTA:
Carlos Concepcin Merln Cruz
Karen Amaro Castillo
Wendy de Jess Ronquillo Herrera
Carlos Gregorio Guzmn Galn
Daniel Tello Cruz
ngel Ortiz Salinas
8 Semestre Grupo A

DOCENTE:

L.I. Mara de Los ngeles Martnez Morales

FECHA

ISC
2010/01

19 de Marzo del 2015

Febrero de 2015

INTRODUCCIN
Actualmente

los

presentacin

lenguajes

de

sintaxis

son

su

utilizados para:
desarrollar

contenidos

interactivos

para la web
dependiendo

del

medio

del

contenido que se desea desarrollar, la

sintaxis puede cambiar en pequeas
instrucciones

pues

los

medios

de

renderizado y/o compilacin cambian.

Lenguaje de presentacin: Sintaxis

4/20/15

CMO FUNCIONA UN
LENGUAJE DE
PRESENTACIN?

Funciona por medio de reglas especificas las cuales presentan un

soporte adecuado para la correcta interpretacin y estructuracin
de un documento en el que se exprese la informacin necesaria
solicitada.
En este lenguajes se expresan los atributos de los elementos de tal
forma que se definen los diseos y contenidos, por ejemplo:
Mrgenes
Tipo de ttulos
Color de fondo
Tipo de letra
Lenguaje de presentacin: Sintaxis

Etc

4/20/15

CMO FUNCIONA UN
LENGUAJE DE
PRESENTACIN?

Actualmente en el mundo de la web debido a la evolucin del

mundo electrnico y de comunicacin hacen falta lenguajes de
presentacin con la finalidad de sealar elementos, estos
funcionan

en

estructuras

de

programacin

como

los

navegadores web, la importancia de los lenguajes es para que

los elementos web se muestren correctamente, los lenguajes
mas utilizados son:
XHTML para el marcado
CSS para la presentacin
Lenguaje de presentacin: Sintaxis

4/20/15

PRESENTACIN

XHTML

Lenguaje de presentacin: Sintaxis

CSS

4/20/15

Presentac
in

SINTAXIS
Cuando se habla de la sintaxis de un lenguaje se trata de

un elemento que se le conoce como etiqueta, la cual

alberga

instrucciones

programacin,

estas

especificas

del

sealizaciones

se

lenguaje

de

determinan

encapsulando las palabras reservadas entre un smbolo

de mayor y uno de menor que se ubican al principio y al
final de la palabra respectivamente.

Lenguaje de presentacin: Sintaxis

4/20/15

SINTAXIS
Las etiquetas funcionan para instrucciones como:
Letras cursivas, negritas, subrayadas
Alineacin del texto
Salto de lnea
Salto de prrafo
Insercin de nombre de pagina (ttulo)
Inicio y final del cuerpo del documento
Etc

Lenguaje de presentacin: Sintaxis

4/20/15

SINTAXIS
La etiqueta presenta frecuentemente dos partes: Una

apertura de forma general <etiqueta> Un cierre de tipo

</etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las

modificaciones que caracterizan a esta etiqueta. As por

ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si

en nuestro documento HTML escribimos una frase con el

siguiente cdigo:

<b>Esto est en negrita</b>

Lenguaje de presentacin: Sintaxis

4/20/15

SINTAXIS
El resultado Ser:
Esto est en negrita
Las etiquetas <p> y </p> definen un prrafo. Si en

nuestro documento HTML escribiramos:

<p>Hola, estamos en el prrafo 1</p>

<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo

Lenguaje de presentacin: Sintaxis

4/20/15

10

SELECTORES
Los selectores son los encargados de identificar los

elementos dentro de un sitio web para poder identificar

sus atributos y/o propiedades, o elementos pueden ser,
texto, imagen, video, animacin, etc.

Lenguaje de presentacin: Sintaxis

4/20/15

11

SELECTORES
Los selectores en su variedad comprenden del nombre de las

etiquetas utilizadas dentro de los documentos HTML, por ejemplo;

Body
P
Code
Table
Ul
Etc
Lenguaje de presentacin: Sintaxis

4/20/15

12

CSS (CASCADING STYLE

SHEETS)
CSS permite separar los contenidos de la pgina y la

informacin sobre su aspecto.

Utilizando CSS, se pueden establecer los mismos estilos

con menos esfuerzo y sinensuciarel cdigo HTML de los

contenidos con etiquetas<font>.

Lenguaje de presentacin: Sintaxis

4/20/15

13

CSS (CASCADING STYLE

SHEETS)
Para qu sirve CSS?
Permite elegir el color de tu texto.
Permite seleccionar el tipo de letra utilizado en tu sitio.
Establece el tamao, bordes, fondo ...
Adems, puede hacer el diseo un sitio. Se le puede

decir: quiero que mi men est a la izquierda y ocupe

una anchura tal que la cabecera de mi sitio siempre sea
visible, etc.
Lenguaje de presentacin: Sintaxis

4/20/15

14

CSS (CASCADING STYLE

SHEETS)
Glosario bsico
CSS define una serie de trminos que permiten describir

cada una de las partes que componen los estilos CSS. El

siguiente esquema muestra las partes que forman un
estilo CSS muy bsico:

Lenguaje de presentacin: Sintaxis

4/20/15

15

CSS (CASCADING STYLE

SHEETS)
Los diferentes trminos se definen a continuacin:
Regla: cada uno de los estilos que componen una hoja de
estilos

CSS.

Cada

regla

est

compuesta

de

una

parte

de"selectores", un smbolo de"llave de apertura"({), otra parte

denominada"declaracin"y por ltimo, un smbolo de"llave de
cierre"(}).
Selector: indica el elemento o elementos HTML a los que se
aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los
elementos. Est compuesta por una o ms propiedades CSS.
Lenguaje de presentacin: Sintaxis

4/20/15

16

CSS (CASCADING STYLE

SHEETS)
Propiedad: caracterstica que se modifica en el
elemento seleccionado, como por ejemplo su tamao de
letra, su color de fondo, etc.
Valor: establece el nuevo valor de la caracterstica
modificada en el elemento.
Un archivo CSS puede contener un nmero ilimitado de
reglas CSS, cada regla se puede aplicar a varios selectores
diferentes y cada declaracin puede incluir tantos pares
propiedad/valor como se desee.
Lenguaje de presentacin: Sintaxis

4/20/15

17

CSS: SOPORTE DE LOS

NAVEGADORES
Al igual que HTML, CSS ha evolucionado. Ha habido cuatro
versiones principales de CSS:
CSS 1
CSS 2.0
CSS 2.1
CSS 3

Lenguaje de presentacin: Sintaxis

4/20/15

18

Lenguaje de presentacin: Sintaxis

4/20/15

19

DNDE SE ESCRIBE EL
CDIGO CSS?
Se tienes que elegir una opcin, porque se puede escribir
cdigo en CSS en tres lugares diferentes:
Forma 1: en un archivo con extensin css (el mtodo ms

recomendado).
Forma 2: en la cabecera <head> del archivo HTML.
Forma 3: directamente en las etiquetas del archivo HTML

a travs de un atributo de estilo (el mtodo menos

recomendable).
Lenguaje de presentacin: Sintaxis

4/20/15

20

FORMA 1
<html>
<head>

estilo.css
p { color: blue }
Este cdigo se
crea en un
archivo separado
junto a los html

<meta charset="utf8" />

<link rel="stylesheet" href="estilo.css" />
<title>Primera prueba de CSS</title>

</head>
<body>
<h1>Mi supersitio</h1>
<p>Bienvenidos!</p>
<p>Por el momento est casi <em>vaco</em>.Ten
paciencia!</p>

</body>

</html>
Lenguaje de presentacin: Sintaxis

4/20/15

21

FORMA 2
<html>

<head>
<meta charset="utf8" />
<style>
p
{
color: blue
}

El cdigo se
integra en el
mismo html
pero en la parte
del encabezado

</style>
<title>Prueba de CSS</title>

</head>
<body>
<h1>Mi supersitio</h1>
<p>Bienvenidos!</p>
<p>Por el momento est casi <em>vaco</em>.Ten
paciencia!</p>

</body>

</html>
Lenguaje de presentacin: Sintaxis

4/20/15

22

FORMA 3
<html>
<head>
<meta charset="utf8" />
<title>Prrueba de CSS</title>

</head>
<body>
<h1>Mi supersitio</h1>
</p>

Aqu
podemos
ver que el
cdigo css
se integra
directament
e en la
etiqueta

<p style="color: blue">Bienvenidos!

<p>Por el momento est casi <em>vaco</em>.Ten
paciencia!</p>

</body>

</html>
Lenguaje de presentacin: Sintaxis

4/20/15

23

CONCLUSIN
Para que una pagina Web funcione sin colapsar, es

necesario

contar

con

una

buena

arquitectura

de

elementos y ubicacin de informacin, pues depende de

varias herramientas que al momento de su ejecucin
pueden mejorar el funcionamiento del servicio que se
ofrece a los usuarios.

Lenguaje de presentacin: Sintaxis

4/20/15

24