Introduccin a las Tecnologas Web HTML Y CSS

Protocolo http

Los recursos accesibles en Internet se identifican por un URI (identificador de recurso uniforme)(URL) p.e. http://www.uv.es/cerveron/paginasweb/index.ht ml
el

protocolo con que acceder al recurso el nombre (o direccin) del host el nombre del recurso

Internet es el medio de comunicacin para diversas aplicaciones, que utilizan diferentes protocolos, destacando el correo electrnico, la transferencia de ficheros (FTP) y la web

Recursos en Internet

Los recursos accesibles en Internet se identifican por un URI (identificador de recurso uniforme)(URL) p.e. http://www.uv.es/cerveron/paginasweb/index.ht ml
el

protocolo con que acceder al recurso el nombre (o direccin) del host el nombre del recurso

Internet es el medio de comunicacin para diversas aplicaciones, que utilizan diferentes protocolos, destacando el correo electrnico, la transferencia de ficheros (FTP) y la web

La web

La web es un sistema de informacin distribuido basado en hipertexto Los usuarios, mediante un navegador (cliente) solicitan recursos (normalmente pginas web) a un servidor web
el

cliente enva una peticin el servidor produce una respuesta (una pgina HTML)
[puede

ser de error]

Cmo se inici?

Tim Barnes Lee (CERN, 1989). Repositorio esttico de documentos:

Una

forma cmoda de acceder a documentos estticos interrelacionados almacenados en servidores distribuidos alrededor del mundo.

La especificacin inicial inclua:

Un

lenguaje para dar formato a los documentos (HTML). Un protocolo sencillo para comunicar navegadores (clientes) y servidores (HTTP).
5

Cmo funciona la web

Para poder visualizar una pgina web es preciso:

Tener

un ordenador conectado a Internet:

Establecer

una conexin PPP con la mquina del ISP. El ordenador recibe una direccin IP temporal
Usando DHCP (Dynamic Host Configuration Protocol)
El

ordenador recibe la direccin de un servidor de nombres (DNS, Domain Name Server)

Iniciar sesin en un navegador Web (ej.: Internet Explorer, Mozilla, Netscape, etc.) Indicar al navegador el URL de la pgina que se desea "visitar". El navegador pide al DNS la direccin IP correspondiente al servidor que contiene el documento cuyo URL se ha indicado. El navegador abre una sesin TCP con la mquina cuya direccin IP se ha obtenido.
7

El navegador solicita al servidor que le transmita el documento (orden GET). El servidor web enva el documento. La conexin TCP finaliza. El navegador muestra el documento.

Cmo funciona la web

9

Abrir direccin http://www.uv.es/cerveron/index.html

Internet

Cliente Web (Mosaic, Netscape, Internet Explorer, Firefox, etc.)

Servidor de nombres (DNS)

Servidor Web

Estructura de un URL
10

URL = Uniform Resource Locator http://www.uv.es/cerveron/index.html

Nombre del protocolo de comunicacin con el servidor (http es el estndar para web)

Localizacin del documento dentro del sistema de archivos del servidor web

Nombre del dominio del servidor web donde se almacena el documento

Cmo funciona la web

11

Abrir direccin http://www.uv.es/cerveron/index.html

Internet
Buscando host: www.uv.es 147.156.11.1

Servidor Web Cliente Web (Mosaic, Netscape, Internet Explorer, Firefox, etc.)
direccin IP www.uv.es?

Servidor de nombres (DNS)

Cmo funciona la web

12

Abrir direccin http://www.uv.es/cerveron/index.html

Internet

Envame el documento cerveron/index.html

Servidor Web Cliente Web (Mosaic, Netscape, Internet Explorer, Firefox, etc.)

Servidor de nombres (DNS)

WWW es un sistema Cliente/Servidor

Clientes Web: Utilizan el protocolo HTTP para conectar con los servidores. Solicitan y muestran las pginas web almacenadas en los servidores. Clientes tpicos: navegadores web (Explorer, Firefox). Servidores Web: "Escuchan" conexiones entrantes desde clientes. Utilizan el protocolo HTTP para conversar con los clientes. Almacenan y transmiten pginas web a los clientes. Actualmente interactan con el usuario y generan dinmicamente pginas web
13

Aplicaciones web

La web era al principio un conjunto de pginas fijas La evolucin de la web ha llevado al desarrollo de aplicaciones web Una aplicacin web es un programa informtico en la red (en un servidor) cuya interaccin con el usuario sea mediante un navegador web El programa recibe los inputs del usuario El programa genera dinmicamente pginas web que muestran informacin personalizada y en su caso permiten al usuario seguir interactuando
14

El lenguaje HTML

HTML es un lenguaje que permite incluir texto junto a las indicaciones de cmo mostrarlo, cmo y dnde incluir imgenes y cmo acceder mediante enlaces a otros recursos en Internet (y tambin posibilita la entrada de datos) El navegador-cliente solicita y recibe del servidor web una pgina y nos la presenta formateada La pgina puede pedir al servidor imgenes (o otros recursos) que estn en archivos distintos de la propia pgina web y son enviados por el servidor y presentados por el cliente junto al texto
15

Actividades

Acceder a una pgina escribiendo la URI Acceder a una pgina mediante un enlace contenido en otra Ver el cdigo fuente de una pgina Guardar una pgina web (slo HTML) para luego ver el archivo guardado y visualizar la pgina Guardar una pgina web completa para luego ver los archivos guardados y visualizar la pgina

16

Actividades
Consultar Estructura de una pgina web Formatos de texto Formatos de prrafo en
http://www.uv.es/cerveron/paginasweb/notashtml.html

para despus Crear una pgina web simple directamente con el editor de texto y visualizarla en tu PC Manipular botones, texto y animaciones
17

CSS

CSS=Cascading Style Sheet Cascading significa que la definicin de estilos fluye en las etiquetas anidadas. Ejemplo: La aplicacin del color rojo a la etiqueta <body> se propagar a otros elementos contenidos en la etiqueta Style significa que se aplicarn estilos a las etiquetas Sheet implica que toda la definicin se guardar en una pgina.
18

Una especificacin para la presentacin de documentos complementaria a HTML. HTML sirve para describir el contenido de una pgina Web. CSS es como una plantilla que se usa para definir un estilo para un elemento HTML y que se puede aplicar en todos las pginas donde aparezca dicho elemento.

Ventajas CSS: Separa contenido de presentacin Separa la capa de estilo de una pgina web de los datos y de la informacin que se muestran en ella. Permite especificar la apariencia de todo el sitio web en un nico lugar. Los estilos para fuentes, tamaos de la fuente, espaciado de letras, colores, y mrgenes. Un cambio en un fichero genera cambios en todos los ficheros. Puede ser usado para pginas HTML y para XML Desventajas CSS: No todos los navegadores soportan CSS

Implementar CSS

La sintaxis general es: selector { propiedad: valor } selector, ..., selector { propiedad1: valor1; Propiedad_n: valor_n } Donde: Selector es cualquier etiqueta HTML o XML afectada por el estilo. Propiedad y Valor describen la apariencia de las etiquetas. Los espacios entre los : y los ; son opcionales. Debe usarse un ; entre las propiedades, aunque es opcional para la ltima propiedad.

Dnde Implementar Estilos: Inline: Afecta a etiquetas individuales. <p><font color=green> Texto </font></p> Embedded o Internal: Afecta a una nica pgina web: <style type=text/css> P{color:green} </style> <p> Texto </p> External o Linked: Puede afectar a todo el sitio web. Se pone en un fichero aparte con ext. CSS: mihoja.css <link rel=stylesheet type=text/css href= mihoja.css>

Orden de precedencia: - Instrucciones HTML de formateado - Estilos Inline - Estilos Embedded - Estilos Linked - Estilos por Defecto del Navegador.

Tipos de Estilos CSS Etiquetas. Clases. Pseudo-clases. Identificadores.

Etiquetas o grupos de etiquetas Se define el estilo para una etiqueta individual o grupos de estiquetas. Etiquetas Individuales Selector {Propiedad1:Valor1; }

P {color= green} Grupos de Etiquetas o selectores: El prrafo tendr el texto verde Selector1, Selector2 {Propiedad1: Valor1, } B, P {color=green} B {background-color=white} La negrita y el prrafo sern verdes Aplicando estilo a etiquetas anidadas: Selector1 Selector2 {Propiedad1: Valor1, } TD B {color=green} La negrita en las tablas ser verde

Define diferentes estilos para el mismo Selector. Son asignados como valor del atributo class dentro del elemento HTML Clase asignada a una etiqueta Selector.NombreClase {Propiedad1: Valor1, } P {font-size:18} P.amarillo{color:yellow} P.verde{color:green} <p class=amarillo> Texto1 </p> <p class=verde> Texto2</p> Clase asignable a cualquier etiqueta: .NombreClase {Propiedad1: Valor1, } .amarillo{color:yellow} .verde{color:green} <P class=amarillo> Texto 1 </p> <H1 class=amarillo> Texto2 </h1> <h2 class=verde> Texto 3 </h2>

ID para Selectores Define el mismo estilo para varios selectores. Son asignados como valor del atributo ID dentro del elemento HTML. Definicin de estilos con ID #IdElemento {Propiedad1: Valor1, } #parrafoespecial{font-weight:bold} <p ID=parrafoespecial> Texto1 </p> <b ID=parrafoespecial> Y Texto 2 </b> <p class=verde ID=parrafoespecial> Texto1 </p>

PseudoClases: Desarrollo de Aplicaciones con Sistemas de Bases de Datos Se usa cuando un selector puede tener varios estados. La etiqueta <a> puede estar en visitado, activo y con el cursor encima a:link {color: black;} a:hover { color: blue; font-size: 125%; Define el estado de enlace del tag <a>

Define el estado de hover para la etiqueta <a> } a:visited { color: green; font-weight: bold;

Define el estado visitado para la etiqueta <a> }

Pseudo-Elementos Son usados para aadir efectos especiales a algunos selectores. Selector:PseudoElemento {Propiedad1: Valor1, } Selector.Clase:PseudoElemento{Propiedad 1 : Valor1, } p.article:first-letter {color:

Conceptos y Tutoriales: http://www.w3.org/Style/CSS/learning http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo http://www.w3schools.com/css/default.asp http://www.desarrolloweb.com/manuales/2/ http://www.meyerweb.com/eric/css/ Taller de CSS: http://www.desarrolloweb.com/manuales/63/ Ejemplos: http://www.w3schools.com/css/css_examples.asp http://www.camaleoncss.com/ http://www.csszengarden.com/tr/espanol/ Ejemplos de menus: http://dhtmlcentral.com/projects/coolmenus/?m=31