ndice

I WWW
1. Introduccin
1.1. 1.2. 1.3. 1.4. 1.5. 1.6. 1.7. 1.8. 1.9. Red de computadoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Protocolo de Comunicacin Estndares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2
2
2 2 2 2 3 3 3 4 4

Modelo Cliente / Servidor: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Internet: La red de redes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hipertexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lenguaje de marcado (Markup Language) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navegador Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

II Lenguaje HTML
2. Elementos bsicos de HTML 3. Reglas de sintaxis 4. Estructura bsica de una pgina HTML 5. Clasicacin de los elementos HTML
5.1. 5.2. Clasicacin segun propsito Clasicacin por contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4
4 5 6 6
6 7

6. Elementos de texto de HTML

6.1. 6.2. 6.3. 6.4. 6.5. 6.6. Encabezados (headings): . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prrafos (Pharagraphs): . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Lineas divisorias y saltos de linea:

7
7 7 7 7 7 8

Contenedores de texto: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Comentarios: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Caracteres especiales:

7. Elementos de Caja
7.1. 7.2. 7.3. Listas: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tablas: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contenedores: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9
9 9 10

8. Direcciones en HTML
8.1. 8.2. 8.3. 8.4. Uniform Resource Locator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Direccin absoluta y relativa Imgenes en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10
10 11 12 12

Hipervnculos en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

III Hojas de Estilo

9. Introduccin
9.1. Cascading Stile Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13
13
13

10.Sintaxis de CSS
1

13

11.Selectores
11.1. Reglas generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2. Selectores y atributos especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2.1. Selectores de clase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14
14 15 15 15

11.2.2. Selector id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12.Valores 13.Formas de agregar estilos

16 16

Parte I

WWW
1. Introduccin
1.1. Red de computadoras
Una red de computadoras es un conjunto de equipos (computadora y/o dispositivos) conectados por medio de cables, seales, ondas o cualquier otro mtodo de transporte de datos, que comparten informacin, recursos y servicios, entre otros. Para que se establezca una comunicacin entre estos equipos, es necesario que ambos compartan un mismo lenguaje de comunicacin.

1.2. Protocolo de Comunicacin

Protocolo de red o tambin Protocolo de Comunicacin es el conjunto de reglas que especican el intercambio de datos u rdenes durante la comunicacin entre las entidades que forman parte de una red. Estas permiten el ujo de informacin entre computadoras distintas que manejan lenguajes distintos. Por ejemplo, dos computadoras conectadas en la misma red pero con protocolos diferentes no podran comunicarse jams, para ello, es necesario que ambas "hablen" el mismo idioma. Los protocolos pueden estar implementados bien en hardware (tarjetas de red), software (drivers), o una combinacin de ambos.

1.3. Estndares
Los protocolos que son implementados en sistemas de comunicacin que tienen un amplio impacto, suelen convertirse en estndares, debido a que la comunicacin e intercambio de informacin (datos) es un factor fundamental en numerosos sistemas, y para asegurar tal comunicacin se vuelve necesario copiar el diseo y funcionamiento a partir del ejemplo pre-existente. Estndar signica un modelo que se sigue para realizar un proceso o una gua que se sigue para no desviarnos de un lugar al que se desea llegar. Algunos ejemplos conocidos son: Http, Ftp, irc, imap, pop3, smtp, tcp/ip

1.4. Modelo Cliente / Servidor:

El modelo Cliente/Servidor (de ahora en mas C/S) consiste bsicamente en que un programa (el cliente) realiza peticiones a otro programa (el servidor) que le da respuesta. La separacin entre cliente y servidor es una separacin de tipo lgico, donde el servidor no se ejecuta necesariamente sobre una sola mquina ni es necesariamente un slo programa. Los tipos especcos de servidores incluyen los servidores web, los servidores de archivo, los servidores del correo, etc. Mientras que sus propsitos varan de unos servicios a otros, el modelo bsico seguir siendo el mismo.

Caractersticas de un cliente
En el modelo C/S el remitente de una solicitud es conocido como cliente. Su caractersticas son: Es quien inicia solicitudes o peticiones, tienen por tanto un papel activo en la comunicacin (dispositivo maestro o amo). Espera y recibe las respuestas del servidor. Por lo general, puede conectase a varios servidores a la vez.

Caractersticas de un servidor
En el modelo C/S el receptor de la solicitud enviada por cliente se conoce como servidor. Sus caractersticas son: Al iniciarse esperan a que lleguen las solicitudes de los clientes, desempean entonces un papel la comunicacin. Tras la recepcin de una solicitud, la procesan y luego envan la respuesta al cliente. Por lo general, aceptan conexiones desde un gran nmero de clientes (en ciertos casos el nmero mximo de peticiones puede estar limitado).

pasivo en

1.5. Internet: La red de redes

Internet es un mtodo de interconexin descentralizada de junto de como una red lgica nica, de alcance mundial. Al contrario de lo que se piensa comnmente, Internet no es sinnimo de Word Wide Web (WWW, o "la Web"). sta es parte de Internet, siendo uno de los muchos servicios que ofrece la red Internet. El WWW utiliza Internet como medio de transmisin.

redes de computadoras implementado en un conprotocolos de comunicacin denominado TCP/IP y garantiza que redes fsicas heterogneas funcionen

1.6. Hipertexto
Habitualmente, cuando leemos un libro lo hacemos pgina tras pgina. Si queremos pasar a otro tema del libro debemos consultar el ndice y luego buscar la pgina correspondiente. El hipertexto es un texto en el cual existen numerosos vnculos que nos llevan a otros textos u otras partes del mismo texto. Esto permite que el lector pueda buscar la informacin deseada sin tener que recurrir a un ndice. Esto genera una nueva forma de producir texto donde las palabras y los conceptos se pueden relacionar con otros textos lo que permite acceder a la informacin mas gilmente. Los vnculos que nos transportan de una parte a otra de un hipertexto, son llamados sinnimos comunes son hiperenlace, vnculo, enlace, link (eslabon).

hipervnculos. Otros

1.7. Lenguaje de marcado (Markup Language)

Un lenguaje de marcado o lenguaje de marcas es una forma de escribir un documento que, junto con el texto, incorpora etiquetas o marcas que contienen informacin adicional acerca de la estructura del texto o su presentacin. El lenguaje de marcas ms utilizado es el HTML, fundamento de la WWW. Los lenguajes de marcado suelen confundirse con lenguajes de programacin. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritmticas o variables, ni instruccines al sistema, como s poseen los lenguajes de programacin. Histricamente, el marcado se usaba y se usa en la industria editorial y de la comunicacin, as como entre autores, editores e impresores. Este documento por ejemplo fue escrito con un lenguaje de marcado llamado latex, que sirve para hacer todo tipo de documentos. Un ejemplo de cmo funciona el lenguaje de marcado puede observarse en el dictado de viva voz de un documento a una persona que lo transcribe a mquina:

Ponga estilo de carta. ponga comillas, ponga maysculas, Estimado Juan, ponga dos puntos, aparte, sangra, ponga primera letra mayscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado... etc".
3

El resultado seria: Estimado Juan: Te escribo esta carta

de forma muy urgente ya que no me has enviado ...

1.8. World Wide Web

La World Wide Web (de ahora en adelante WWW) es un sistema de documentos de

hipertexto y/o hiper-

medios enlazados y accesibles a travs de Internet. Con un navegador Web, un usuario visualiza pginas web que pueden contener texto, imgenes, vdeos u otros contenidos multimedia, y navega a travs de ellas usando

hiperevnculos.

1.9. Navegador Web

Un navegador web o explorador web (del ingls, navigator o browser) es una aplicacin de software que permite al usuario recuperar y visualizar documentos de hipertexto, comnmente descritos en HTML, desde servidores web de todo el mundo a travs de Internet. Cualquier navegador actual permite mostrar o ejecutar grcos, secuencias de vdeo, sonido, animaciones y programas diversos adems del texto y los hipervnculos o enlaces. Los ejemplos mas conocidos de navegadores son Internet Explorer, Firefox, Chrome entre otros.

Parte II

Lenguaje HTML
La sigla HTML, HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la construccin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes, videos, etc.

2. Elementos bsicos de HTML

Figura 1: Estructura de una etiqueta.

HTML consiste de varios componentes vitales, incluyendo elementos y sus atributos, tipos de dato, y la declaracin de tipo de documento. Los elementos son la estructura bsica de HTML. Estos tienen dos propiedades bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere vlido al documento HTML. En la gura 1 se puede ver un ejemplo de un elemento, en este caso un parrafo. Los elementos tienen un nombre que los identica, como se ve en (a) la palabra

p.

Un elemento generalmente tiene una etiqueta inicial y una etiqueta nal o de cierre. Toda etiqueta se identica porque est encerrada entre los signos menor que y mayor que (<>). La etiqueta de cierre tiene una barra invertida seguido del nombre de la etiqueta. Los atributos del elemento estn contenidos en la etiqueta de inicio, y se denotan con el nombre seguido del simbolo

class

y su valor dentro de comillas dobles (). En este ejemplo tenemos un atributo llamado

(b) cuyo valor es

foo

(c).

El contenido del elemento est ubicado entre las dos etiquetas.

Algunos elementos, tales como

<br />,

no tienen contenido ni llevan una etiqueta de cierre. En estos casos

se escribe una barra invertida antes del simbolo

>.

3. Reglas de sintaxis
En html, los elementos pueden estar contenidos uno dentro del otro, de manera de poder componer propiedades que uno desee. Por ejemplo:

<div class=noticia><h2>Subasta de canastos</h2><p>Por la tardenoche de ayer ... </p></div>

En este caso tenemos un contenedor (div) de clase noticia, donde adentro hay un subttulo

canastos )

seguido de un prrafo (Por

la tardenoche de ayer ).

( Subasta de

Es importante saber que, para que el documento este bien formado hay que seguir el criterio de que la primera etiqueta que se abre debe ser la ltima que se cierra, y no deben quedar etiquetas sin cerrar. Ejemplos incorrectos:

1.

<h1>Mi nombre <p>es </h1>Jose</p> <p>Esto es un prrafo

2.

Ejemplos correctos:

1.

<h1>Mi nombre es <p>Jose</p></h1> <p>Esto es un prrafo</p>

2.

Los espacios y saltos de linea dentro del contenido no alteran el formato en el que se este se ver en el navegador web. Esto nos permite escribir el cdigo de html de una forma mas legible para nosotros. Por ejemplo:

<h1>Ttulo</h1><div><h2>Subttulo</h2><p>parrafo 1</p><p>parrafo 2</p></div>

Es equivalente a escribir:

<h1>Ttulo</h1> <div> <h2>Subttulo</h2> <p>parrafo 1</p> <p>parrafo 2</p> </div>

El nombre de las etiquetas pueden estar en mayscula o minscula, pero siempre recomendable mantener un mismo estilo en cdigo HTML que se escriba.

4. Estructura bsica de una pgina HTML

Figura 2: Estructura general de HTML

Una pgina escrita con formato HTML debe tener siempre una estructura como se muestra en la gura 2. La primera parte es la declaracin de la pgina, donde se escribe el formato que tendr el documento, segun los estndares internacionales. Por ahora no es importante detallar su uso, sino simplemente saber que es necesario para que los navegadores web sepan que formato van a recibir. Luego se encuentra el elemento encuentran 2 componentes bsicos:

html

que incluir todo el resto del contenido. Dentro de este elemento se

Encabezado de pgina:

Denotado por el elemento

head,

suele contener informacin sobre el documento que

no se muestra directamente al usuario. Como por ejemplo el ttulo de la ventana del navegador (elemento Dentro de la cabecera podemos encontrar:

title).

<title></title>: Dene el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima
de la ventana en el navegador web.

<link>: Para vincular el sitio a hojas de estilo o iconos. Por ejemplo: <link rel="stylesheet" href="/style.css" type="text/css" /> <style>:
Para colocar el estilo interno de la pgina, ya sea usando CSS u otros lenguajes similares. No es

necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta veran ejemplos de estos en las hojas de estilo.

<link>.

Mas adelante se

Cuerpo de pgina:

Denotado con el elemento

body,

dene el contenido principal o cuerpo del documento.

Esta es la parte del documento HTML que se muestra en el navegador. Dentro del cuerpo podemos agregar numerosos elementos que veremos a continuacin.

5. Clasicacin de los elementos HTML

5.1. Clasicacin segun propsito
Los elementos de html se pueden clasicar segun su propsito de la siguiente forma:

Elementos de marcado estructural:

establece

Describen el propsito del texto. Por ejemplo el marcado

Noticias

<h2>Noticias</h2>

como un encabezado de segundo nivel (subttulo). El marcado estructural no dene cmo se

ver el elemento, pero la mayora de los navegadores web han estandarizado el formato de los elementos.

Elementos de marcado presentacional:

ejemplo,

Describen la apariencia del texto, sin importar su funcin. Por

<b>gato</b>

indica que los navegadores web visuales deben mostrar el texto

gato

en negrita, pero no

indica qu deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En este apunte no se hara uso de estas etiquetas, ya que el objetivo es separar la logica presentacional de la estuctura del texto. Para esto se vera mas adelante lo que se llaman hojas de estilo.

5.2. Clasicacin por contenido

Tambien es necesario hacer otra clasicacin de los elementos por su contenido:

Elementos de texto: Elementos de caja:

Son los elementos que contienen textos, o dan formato a los textos.

Son elementos contenedores mas grandes que se comportan como cajas, es decir, tienen

un tamao, margenes interiores y exteriores, pueden tener bordes, etc. Los elementos de caja pueden contener tanto elementos de caja como elementos de texto. Los elementos de texto solo pueden contener elementos de texto.

6. Elementos de texto de HTML

6.1. Encabezados (headings):
Los encabezados se utilizan para escribir ttulos, subttulos y secciones, entre otros. Existen 6 niveles de jerarqua, desde el encabezado principal al mas pequeo, denotados por los nombres h1, h2, ... , h6, donde h1 es el encabezado mas grande y h6 el mas pequeo. Estas etiquetas tienen contenido, que ser el texto del encabezado. Por defecto los navegadores le asignan un tamao descendente a los encabezados, pero eso no necesariamente se cumple cuando se aplican estilos a las pginas.

6.2. Prrafos (Pharagraphs):

Los prrafos, denotados con los elementos llamados

p, sirven para denir un nuevo prrafo de texto, indicando

al navegador que el mismo debe empezar en una nueva lnea, dejando un espaciado antes y despus del prrafo.

6.3. Lineas divisorias y saltos de linea:

Son elementos sin contenido: Las lineas divisorias (horizontal rules), con el nombre se las coloque.

hr,

generarn una linea divisoria en el lugar donde

Las lineas divisorias no son de texto

Los saltos de linea, con el nombre br, generaran un salto al comienzo de la linea siguiente del texto.

6.4. Contenedores de texto:

Los contenedores de texto, de nombre

span, son elementos con contenido que se utilizan para dar propiedades

a los textos. Por si solos no alteran el texto pero sirven para asignarles atributos al texto contenido. Se ver mas adelante su uso en las hojas de estilo.

6.5. Comentarios:
Tal vez deseemos escribir algn comentario o una aclaracin en alguna parte de la pgina, pero no queremos que se vea cuando se muestre la pgina en el navegador. Para eso se utiliza una notacin especial que empieza con

<!--

y termina con

-->.

En la gura 1se puede ver un ejemplo.

HTML

Navegador

Cuadro 1: ejemplo elementos bsicos

Cdigo
&aacute; &eacute; &iacute; &oacute; &uacute;

Caracter

Cdigo
&ntilde; &Aacute; &Eacute; &Iacute; &Oacute;

Caracter

Cdigo
&Uacute; &Ntilde; &lt; &gt; &amp;

Caracter
< > &

Cuadro 2: caracteres especiales

6.6. Caracteres especiales:

HTML no soporta todos los caracteres asccii , sino solo un subconjunto para hacer mas livianos y universales en todo el mundo. Adems, existen caracteres reservados como menor (<) y mayor (>) que son utilizados para marcar las etiquetas. Para estos se utiliza una serie de caracteres que se traducen automticamente cuando se muestra en pantalla.

Algunos de estos se pueden observar en la tabla 2

1 ascii es un Standard de caracteres utilizados para documentos de texto

7. Elementos de Caja
7.1. Listas:
HTML Navegador

Cuadro 3: Ejemplo de listas

Las listas son una composicin de elementos, anidados uno dentro de otro. Existen varios tipos de listas pero solo veremos dos: Listas numeradas u ordenadas: Estan contenidas en el elemento elementos de forma numerada. Listas con vietas o sin orden: Estan contenidas en el elemento elementos como vietas, sin ninguna enumeracin. Cada elemento de la lista estar contenido en un elemento y sangra

ol

(ordered list), y sirven para listar

ul

(unordered list), y sirven para listar

2 cada elemento en el orden que fueron escritos.

li.

Cuando el navegador interpreta una lista, lista

Las listas pueden estar anidadas (una dentro de otra), de manera que la lista secundaria sangre respecto a la principal. Recordar que al hacer esto, el elemento de la lista principal englobar todo el conjunto de las listas y los elementos de las listas secundaras se cerraran antes de volver a la lista principal.

7.2. Tablas:
Las tablas nos permiten representar y ordenar elementos en forma de planilla con las y columnas de modo que podamos resumir grandes cantidades de informacin de una manera que pueda representarse rpida y facilmente. Son elementos densos y muchas veces es dicil darse cuenta a que columna corresponde cada elemento, por lo que se recomienda utilizarlos solo cuando son realmente necesarios y no para resolver espacios dentro de una pgina. Las tablas estan contenidas dentro del elemento

table. Dentro de este elemento existen otros dos elementos:

thead tbody

Dene la cabecera de la tabla, es decir, los titulos de cada una de las columnas de la tabla. Dene el cuerpo de la tabla, es decir, cada una de las celdas que va a tener la tabla.

Cada la de la tabla esta denida por los elementos

tr.

En la cabecera se suele denir por lo general una sola

la, que contendr los ttulos. Cada celda de la cabecera estar denida por el elemento llamados

th.

En el cuadro 4

tenemos un ejemplo de una tabla con 3 columnas. En la cabecera se dene una la con tres celdas de ttulo,

Columna 1, Columna 2 y Columna 3.

2 Se dice sangrar (de sangra) cuando se deja un espacio horizontal con respecto al margen izquierdo al comenzar un prrafo.

HTML

Navegador

Cuadro 4: Ejemplo de tabla

Dentro del cuerpo de la tabla se denen las las tambien con el elemento tr, y cada celda de la la con el elemento td. De esta manera siguiendo el cuadro 4 tenemos dos las con tres celdas cada uno. Observen como el

Elemento 5 se muestra en la segunda celda de la segunda la.

Existen formas para combinar las y celdas, pero no las abarcaremos para no confundir al lector, ya que

incrementan el grado de ilegibilidad del texto en html. La tabla por si sola no tiene ningun formato, sino que son elementos alineados otando sin bordes, pero mas adelante veremos que aplicandole estilos podremos construir tablas mucho mas elegantes.

7.3. Contenedores:
Asi como en los elementos de texto tenemos el cuyo elemento es de nombre

div.

Estos, al igual que los

span, tambien existen contenedores de elementos de caja, span, sirven para contener otros elementos y mediante

los atributos darles propiedades especiales.

8. Direcciones en HTML
Ya tenemos un conjunto importante de elementos denidos para crear documentos en html, pero nos estan faltando los mas importantes, que distinguen a un texto comun de un hipertexto. Antes que esto necesitamos saber como se llama a una direccin de internet.

8.1. Uniform Resource Locator

Figura 3: Esquema de URL

El Uniform Resource Locator

3 (de ahora en adelante URL) es una forma estandarizada de ubicar los recursos

en la Web. Es la referencia a un archivo que se encuentra en algun lugar de internet. El formato general de una direccin URL es como se muestra en la gura 3, donde las partes listadas son:

3 Traduccin: Locador Uniforme de Recursos

10

Protocolo

(a) Es donde se escribe el protocolo que se va a utilizar para obtener el recurso que nosotros estamos

buscando. Los mas comunes son: HTTP (Hypertext Transfer Protocol) Ejemplo:

http://www.google.com

FILE (Cuando el recurso es un archivo que se encuentra en la maquina local) Ejemplo: FTP (File Transfer Protocol) Ejemplo:

file://home/user/index.h

ftp://www.google.com.ar/imagen.jpg

Otros comunes: HTTPS, SFTP, SVN, SMB, MAILTO

Direccin

(b) Es nombre con el que se identica la direccin de la mquina donde se encuentra el recurso. En

este campo pueden ir: Nombre de dominio: Es el nombre con el cual se identica la maquina en la red. Es una direccin separada por puntos. Ejemplo: www.google.com.ar Direccin IP: Es un nmero nico en el cual se identica una maquina en la red. Se escribe separado en 4 nmeros que van desde 0 a 255 separados por puntos. Ejemplo: 200.155.32.135 A veces se agregan otros datos adicionales referentes a otra informacin especca sobre la autenticacin o el destinatario. Ejemplo:

http://usuario:clave@direccion:puerto/

Existe una direccin particular para denominar a la red interna de la pc que estamos utilizando, con nombre de dominio localhost, correspondiente a la direccin IP 127.0.0.1.

Directorio Archivo

(c) Son las carpetas donde esta ubicado el archivo. Por ejemplo

esta indicando que el archivo se encuentra dentro de una carpeta

imagenes.

http://localhost/imagenes/fotos/foto1.gif fotos contenida dentro de la carpeta foto.gif, index.html.

(d) Es el nombre del archivo al que queremos acceder. Ejemplos:

No es obligatorio poner el nombre de un archivo. Por lo general la maquina destino tiene un archivo por defecto para devolver, y en ciertos casos puede mostrar la lista de archivos que estan contenidos en esa carpeta.

8.2. Direccin absoluta y relativa

Figura 4: Carpetas y archivos de ejemplo Cuando hacemos referencia a una direccin a donde se encuentra un archivo dentro de un documento html pueden darse dos casos: Utilizar una direccin absoluta, es decir, una URL de donde se encuentra el archivo al que estamos haciendo referencia. Utilizar una direccin relativa, es decir, una direccin relativa al lugar en el que esta situado el archivo html que estamos utilizando. Cuando utilizamos una direccin relativa podemos hacer referencia slo a archivos que se encuentran en el mismo servidor donde se encuentra el documento. Para entender el concepto vamos a suponer que en el servidor que estamos usando los documentos estan todos contenidos en la carpeta www como se muestra en la gura 4. Si quisieramos hacer referencia a

foto1.jpg

desde

documento1.html,

la direccin relativa es

11

imagenes/fotos/foto1.jpg
Si queremos hacer referencia de

documento1.html

documento2.html,

la direccin relativa es

favoritos/documento2.html
Para hacer referencia a una carpeta anterior se utiliza  ../. Asi por ejemplo si quisieramos hacer referencia a

documento1.html

desde

documento2.html

la direccin relativa es

../documento1.html
Si quisieramos hacer referencia a la

foto1.jpg

desde

documento2.html

la direccin relativa es

../imagenes/fotos/foto1.jpg
De esta manera podemos hacer referencia a documentos dentro del entorno en el que estamos desarrollando nuestras pginas sin necesidad de utilizar una URL.

8.3. Imgenes en HTML

Para incorporar imgenes en un documento html, se utiliza el elemento el atributo

img. Esta etiqueta no tiene contenido.

Para incorporar una imagen es necesario indicar cual es la imagen que se va a incorporar. Para esto se utiliza

src.

La imagen tiene los siguientes atributos bsicos:

src alt

Este atributo es obligatorio e indica la direccin donde se encuentra la imagen que se desea insertar. El valor del atributo entonces ser una direccin absoluta o relativa. Es el texto alternativo que se mostrar en caso de que la imagen no se encuentre en la direccin especicada. Es el ancho de la imagen que vamos a representar. Es el alto de la imagen.

width

height

Para el ancho y el alto de la imagen trataremos de no utilizar los atributos mencionados anteriormente, dejndolo para cuando apliquemos estilos a la pgina. De esta forma siguiendo el ejemplo de la gura 4, si deseramos insertar la imagen en html se escribira de la siguiente forma:

documento1.html,

foto1.html

desde el

<img src=imagenes/fotos/foto1.jpg />

De la misma forma si quisieramos insertar la imagen

foto2.jpg

desde

documento2.html:

<img src=../imagenes/fotos/foto1.jpg />

Si quisieramos agregar un texto alternativo al ejemplo anterior:

<img src=../imagenes/fotos/foto1.jpg alt=Foto 1 />

8.4. Hipervnculos en HTML

Un hipervnculo en la Web, es un enlace normalmente entre dos pginas web de un mismo sitio. Pero un enlace tambin puede apuntar a una pgina de otro sitio web, a un chero, a una imagen, etc. Para navegar al destino al que apunta el enlace desde el navegador, hemos de hacer clic sobre l. Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el puntero est sobre el hipervnculo. Dependiendo de cual sea el destino, hacer clic en un hipervnculo puede hacer que ocurran varias cosas. Si el destino es otra pgina web, el navegador la cargar y la mostrar; pero si el destino es otro tipo de archivo, por ejemplo un documento de Word, el navegador nos dar la posibilidad de abrir este documento con la aplicacin adecuada para visualizarlo, por ejemplo Word, o de guardar el archivo localmente. En html, para crear un hipervnculo se utiliza el elemento siguientes atributos:

a.

Todo lo que esta contenido dentro de este

elemento podr ser clickeable desde el navegador, llevndonos al vnculo de este. Este elemento tiene los

12

href title

Es la direccin a donde hace referencia el hipervnculo. Esta direccin puede ser una direccin absoluta (URL) o relativa. Es el texto que se mostrar al pasar por encima del vnculo con el mouse.

Asi, siguiendo el ejemplo de la gura 4, si quisieramos hacer un vnculo desde podremos escribirlo en html de la siguiente forma:

documento1.html a documento2.html,

<a href=favoritos/documento2.html>Ir al documento 2</a>

Si quisieramos hacer un hipervnculo desde

documento2.html

foto2.jpg

seria:

<a href=../imagenes/fotos/foto1.jpg>Ver primera foto</a>

Parte III

Hojas de Estilo
9. Introduccin
Cuando se construye un hipertexto es necesario describir las partes que lo conforman, para lo cual utilizamos html. Pero tambin desearamos darle un diseo visual a nuestro hipertexto, como por ejemplo denir colores, imgenes de fondo, espaciado entre prrafos, que tipo de letra queremos usar de titulo son algunos ejemplos. Para eso se construy el Standard Cascading Stile Sheet.

9.1. Cascading Stile Sheet

CSS, siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnologa desarrollada por la W3C

4 con el n de separar la presentacin de la estructura del HTML. Funciona aplicando reglas de estilo a

los elementos HTML, entre las que incluyen, tamao, color de fondo, color del texto, posicin de los elementos, margenes, tipos de letra, etc... quedando de esta manera todo lo que tiene que ver con la parte grca de la web, separada completamente de la estructura del HTML.

10. Sintaxis de CSS

La sintaxis de css de cada componente tiene la estructura como se muestra en la gura 5.

selector { propiedad: valor; propiedad: valor; ... } selector { ... }

Figura 5: Estructura de CSS

Cada elemento de CSS comienza con un selector, y luego entre llaves estan las propiedades con sus respectivos valores separados por punto y coma entre si. Luego se escriben los elementos uno debajo del otro. Asi podemos identicar 3 partes:

4 El Consorcio Word Wide Web (W3C) es un consorcio internacional donde las organizaciones miembro, personal a tiempo completo y el pblico en general, trabajan conjuntamente para desarrollar estndares Web.

13

Figura 7: Combinacin de selectores

Selector

Indica a que elementos del documento html se le va a aplicar las propiedades entre llaves

Propiedad Dene la propiedad que se quiere modicar Valor

Dene el valor que tendr la propiedad, siendo el valor correspondiente a la propiedad

Figura 6: Ejemplo de CSS Siguiendo el ejemplo de la gura 6, podemos ver dos elementos: El primer elemento tiene como selector valor

body,

es decir que va a aplicar las propiedades al elemento

que es toda la parte visible de la pgina. Dentro del elemento dene la propiedad

red,

body background-color con

que signica que el color de fondo va a ser rojo.

El segundo elemento tiene como selector

que son los prrafos. Dentro de este elemento tenemos la propiedad que signica que el estilo de los textos va a ser itlico.

nos dice que se va a sangrar el parrafo

italic,

p, es decir que va a aplicar las propiedades a todos los elementos text-indent con valor 10px, que en 10 pxeles. Luego describe la propiedad font-style con valor

Resumiendo, la hoja de estilos de la gura 6 nos dice que el color de fondo de la pgina es rojo y que los parrafos van a empezar con una sangra de 10 pxeles y van a estar en itlico.

11. Selectores
11.1. Reglas generales
Los selectores son muy simples y nos permiten expresar un conjunto muy preciso de los elementos de la pgina a la que queremos aplicar estilos. Asi es como podemos denir los selectores de diversas formas: Podemos seleccionar mas de un elemento separndolos con comas. En el primer elemento de la gura 7 se puede ver un ejemplo. En este caso se aplica alineacin centrada del texto para todas las cabeceras (h1,

h2, h3, h4, h5, h6).

Podemos seleccionar elementos de forma anidada, de manera de seleccionar los elementos que estan contenidos dentro de otros separndolos con espacios. Siguiendo el ejemplo de la gura 7, el segundo elemento nos dice que todos los items(li) de las listas ordenadas (ol) tienen un tamao de texto de 10 pxeles. dentro de un vnculo (a) y que a su vez esos vnculos estn contenidos dentro de algun contenedor de cajas El tercer elemento es mas preciso ahn; nos dice que para todas las imgenes (img) que esten contenidas

(div), estas tengan un margen izquierdo de 3 centmetros.

14

CSS

HTML

Este parrafo va a estar en negrita

Este parrafo va a estar centrado

Navegador

Texto centrado y en negrita

p.centrado { text-align: center; } p.negrita { font-weight: bold; } .gris { color:gray; } <p class="negrita"> Este parrafo va a estar en negrita </p> <p class="centrado"> Este parrafo va a estar centrado </p> <p class="centrado negrita"> Texto centrado y en negrita </p> <span class="gris"> Texto gris </span>

Texto gris

Figura 8: Selectores de clase

11.2. Selectores y atributos especiales

Existen en particular dos tipos de atributos de los elementos html que se utilizan para aplicar estilos. Hasta el momento no tenemos una forma de distinguir un parrafo de otro, por dar un ejemplo. Para eso se utilizan:

11.2.1. Selectores de clase

Los selectores de clase son una forma de crear estilos propios y asignrselos a las etiquetas que deseemos. Se hace referencia a los elementos html con atributo En la gura 8 pueden verse algunos ejemplos: Los primeros dos elementos de CSS nos dicen que los parrafos de clase centrado van a estar centrados, y los parrafos de clase negrita van a estar en negrita. En el html se ven los dos primeros parrafos vemos ejemplos de como se escribe la clase para que se apliquen los estilos mencionados. Los atributos de clase pueden ser mas de uno, escribiendo los nombres separados con un espacio. En el tercer elemento html vemos un prrafo que tiene clase negrita y centrado. Se puede utilizar un selector de clase sin necesidad de decir a que elemento nos referimos. En el tercer elemento de css vemos un selector para todos los elementos que tengan clase gris. En el cuarto elemento de html vemos un span con clase gris, al que se le va a aplicar la regla.

class.

La forma de hacer referencia a los elementos que

tengan el atributo es escribiendo el valor del atributo anteponiendo un punto.

11.2.2. Selector id
Tambin podemos denir estilos para HTML a los elementos con atributo por id debemos escribir el valor del id anteponiendo el smbolo numeral (#). Un ejemplo: Si deseamos aplicar un estilo a un elemento cuyo id es principal en CSS seria de la forma:

id.

Para seleccionar un elemento

#principal { color: green; }

Luego en el html se aplicara el color verde a la etiqueta con atributo Por ejemplo:

<p id=verde>Este parrafo tiene color verde</p>

15

id=verde.

Es importante notar la diferencia entre el atributo id y el atributo class. El atributo id se utiliza para darle una identicacin nica a un elemento del documento html, de manera que si utilizamos el mismo id para dos elementos de un mismo documento no estaremos cumpliendo los standares de html. Esto no pasa con los atributos class, ya que sirven para darle propiedades a mas de un elemento.

12. Valores
Los valores dependen del la propiedad a la que se quiere asignar. En particular: Los valores de medida, se pueden utilizar distintas escalas, ya sean pixeles (px), centmetros (cm), entre otros. Tambien se puede utilizar un porcentaje, siendo este aplicado al tamao previo. Los colores se puede utilizar:

Directamente el nombre de color en ingles. Una notacion hexagecimal llamada RGB, anteponiendo el simbolo numeral (Ej. #FF3300). Los dos primeros caracteres luego del numeral representan la cantidad de rojo, los dos siguientes la cantidad de verde, y los dos ltimos la cantidad de azul. Se llama codigo hexagesimal porque son nmeros cuya base es 16. De esa manera en vez de tener 10 nmeros como en la base decimal tenemos 16 nmeros, que son 0,1,2,3,..,9,A,B,...,F. De esta manera el nmero 2F en decimal sera

2x161 +15x160 = 32+15 =

47

(notar que F representa el nmero 15)

13. Formas de agregar estilos

Existen tres formas de aplicar estilos CSS a una pagina HTML: Haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la seccin head de la pgina:

<head> <link href="archivo.css" rel="stylesheet" type="text/css"> </head>

Esta forma es la mas recomendable porque as se puede vincular el archivo.css a todas las pginas del sitio, es mucho mas liviano al ver la pagina y adems a la hora de modicar algo se hace solo una vez. Escribiendo los estilos directamente en la seccin forma:

<head>

del documento HTML. Se hace de la siguiente

<head> <title>Pagina</title> <style type="text/css"> <!-body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#333333; } --> </style> </head>
Es buena idea colocarlos de esta forma si son estilos exclusivos de la pagina a la que se aplica. El tercer mtodo,

no recomendable, aunque algunas veces puede ser necesario, consiste en aplicar el estilo directamente sobre un elemento HTML, utilizando el atributo style. Por ejemplo:
<div style="background-color:#333333; padding:2px; width:300px; height:100px;> Caja con estilos </div>

16