CURSO BSICO DE CREACIN DE SITIOS WEB

UNIDAD 1

Servidores y direcciones URL

Cuando visitamos pginas web en realidad estamos accediendo a archivos en un servidor web. La
direccin o URL tiene este formato:

http://www.nombredominio.com/directorio/paginaweb.html

Donde http:// es el protocolo y www. indica el sistema de pginas web. Habrs observado que no
hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de aadirlo, no
porque no sea necesario. nombredominio.com es el nombre del sitio. Al ir directamente ah, vamos
a su pgina de inicio. La ltima parte indica el archivo del sitio que estamos viendo. En este caso,
una pgina llamada paginaweb.html que est en una carpeta llamada directorio.

Internet est formada por un conjunto de servidores conectados. Un servidor es un ordenador

conectado a la red de acceso a Intenet que dispone de un programa que es capaz de recibir una URL
y devolver una pgina web al que hizo la peticin.

Podramos decir que Internet est formado por una gran cantidad de ordenadores que pueden
intercambiar informacin entre ellos. Es una gran red mundial de ordenadores.

Los ordenadores se pueden comunicar porque estn unidos a travs de conexiones y gracias a que
utilizan un lenguaje o protocolo comn, el TCP/IP.

Qu es una pgina web?

Una pgina web es un documento de texto con marcas, llamadas etiquetas (tags en ingls). Cuando
este documento se ve a travs de un navegador web, las etiquetas se interpretan y se visualiza el
documento como una pgina web. Las etiquetas no se muestran pero determinan el aspecto de la
pgina, y otras caractersticas.

Editor de Texto
Para escribir una pgina web sencilla se puede utilizar un editor de texto sin formato, como puede
ser el Bloc de notas (Notepad) includo en Windows. En Ubuntu (Linux) puedes usar el editor de
texto Gedit.
Extensin de Archivos
La extensin indica de qu tipo es un archivo y con qu programa/s es posible abrirlo. La extensin
son las tres letras que van despus del punto al final del nombre de un archivo (por ejemplo,
imagen.gif o documento.doc).

Los archivos de pginas web deben guardarse con extensin htm o html, esto permitir que dichos
archivos sean abiertos con un navegador instalado en la computadora.

Navegador Web
Un navegador o navegador web, o browser, es un software que permite el acceso a Internet,
interpretando la informacin de archivos y sitios web para que stos puedan ser ledos.

La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos de texto,

posiblemente con recursos multimedia incrustados. Adems, permite visitar pginas web y hacer
actividades en ella.

En conclusin, un navegador web es una aplicacin capaz de interpretar el cdigo HTML, formado
por etiquetas y mostrarlo debidamente formateado.

Los navegadores ms populares son el Google Chrome, Mozilla Firefox, Internet Explorer (solo en
Windows) y Opera.

Sitio web
Cuando tenemos varias pginas web, podemos organizarlas en un sitio web. Un sitio web no es ms
que una carpeta que se encuentra en un equipo informtico, ya sea nuestro ordenador personal o
un potente servidor. La primera carpeta es la carpeta raz. Por ejemplo, si accedemos a
www.cesf.edu.sv, estamos accediendo a la carpeta raz del sitio del CESF.

Cuando escribimos www.cesf.edu.sv en el navegador, en realidad estamos accediendo a la pgina

www.cesf.edu.sv/index.html, es decir, al escribir una direccin que no acaba en .html (o en .htm),
el navegador lo interpreta como el nombre de una carpeta y busca en ella un archivo que se llame
index.html, si no lo encuentra devuelve el mensaje del tipo "No se puede encontrar la pgina web".

Tal como lo haramos con una carpeta de Windows, podemos organizar nuestro sitio con
subcarpetas. Por ejemplo, una carpeta con todas las imgenes, otra con los vdeos, etc.

Es frecuente llamarle a un sitio web slo pgina web, por ejemplo "se ha actualizado la pgina
web del ministerio", cuando en realidad se ha actualizado una o varias pginas del sitio web.
UNIDAD 2

Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las
etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,
<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo
<body> (apertura) y </body> (cierre). Entre la apertura y el cierre, est el contenido de la etiqueta,
que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen
contenido, y se cierran sobre s mismas. Esto se expresa colocando la apertura y el cierre en la misma
etiqueta, como por ejemplo: <br />, que equivaldra a <br></br>.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o

identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el
formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir
el nombre de la etiqueta y los atributos en minscula, y los valores contenidos entre comillas dobles.
Si un atributo tiene ms de un valor, se escriben todos los valores dentro de las mismas comillas,
separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Estructura bsica de una Pgina Web

El Cdigo HTML bsico de cualquier pgina web, es el siguiente:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

La etiqueta <head> contiene informacin sobre la pgina. Por ejemplo contiene etiquetas que
pueden decir sobre qu es la pgina, el ttulo que debe de mostrar en la barra del navegador, o
cdigo javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros
archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador.
Obligatoriamente debe de contener la etiqueta <title></title>, que contiene el ttulo de la pgina,
que es lo que se ve en la barra de ttulo del navegador.

En el <body> se pone el contenido de la pgina, lo que se ve a travs del navegador: texto, imgenes,
enlaces, tablas, etc.
Ejemplo:

<html>
<head>
<title>C.E. San Francisco</title>
</head>
<body>
<p>Bienvenido a la Web del Complejo Educativo San Francisco. En esta web
encontrars informacin sobre nuestra institucin.</p>
</body>
</html>

Estructura del texto

Los prrafos se identifican con la etiqueta <p></p>. Dentro de los prrafos colocaremos texto e
imgenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros
prrafos anidados.

A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van
desde el <h1></h1> de mayor tamao, al <h6></h6>, el ms pequeo.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de lnea no
se muestran como en el cdigo fuente. Si hay varios espacios seguidos, slo se mostrar uno. Si
queremos poner varios espacios seguidos, utilizaremos el cdigo html para el espacio &nbsp;.

El navegador tambin ignora los saltos de lnea. As si dentro de un prrafo colocamos varios saltos
de lnea pulsando Intro, estos no se vern. Para crear un salto de lnea dentro de un prrafo,
utilizamos la etiqueta <br />.

Ejemplo:

<html>
<head>
<title>C.E. San Francisco</title>
</head>
<body>
<h1>C.E. San Francisco</h1>
<h2>Presentacin</h2>
<p>Bienvenido a la Web del Complejo Educativo San Francisco. <br />
En esta web encontrars informacin sobre nuestra institucin.</p>

<h2>Contacto</h2>
<p>Telefono: 2334-4611, 2327-1180. Correo:
ce.sanfrancisco@hotmail.com</p>
</body>
</html>
Texto y caracteres especiales
Cuando escribimos texto, hemos de tener en cuenta ciertas consideraciones.

No todos los idiomas tienen los mismos caracteres. Por ejemplo, no todos los idiomas tienen las
letras acentuadas, y la letra es exclusiva del espaol. Esto puede producir que estos caracteres no
se vean correctamente, dependiendo del navegador y la regin.

Una forma de solucionar esto, es indicar en la pgina web que codificacin utilizamos. Por ejemplo,
podemos hacerlo aadiendo la siguiente etiqueta a nuestra pgina:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

La etiqueta informa de que es una pgina de texto/HTML, y que utiliza el juego de carcteres iso-
8859-i. Como esta etiqueta da informacin sobre la pgina, la incluiremos en el <head>.

Pero existen otros caracteres especiales que no podemos mostrar en la pgina. Por ejemplo, si
queremos escribir 1<2, el navegador interpretar < como una apertura de etiqueta. Por ello, todos
los caracteres se pueden representar como un cdigo con el formato &codigo;.

Los caracteres ms utilizados, tienen un cdigo html propio, como vemos en la siguiente tabla:

Carcter Representacin Carcter Representacin

< &lt; &euro;
> &gt; &ccedil;
&aacute; &Ccedil;
&Aacute; &uuml;
&eacute; &Uuml;
&Eacute; & &amp;
&iacute; &iquest;
&Iacute; &iexcl;
&oacute; " &quot;
&Oacute; &middot;
&uacute; &ordm;
&Uacute; &ordf;
&ntilde; &not;
&Ntilde; &copy;
Espacio &nbsp; &reg;

Otra cosa que se muestra en el cdigo pero no en el navegador son los comentarios. Podemos
escribir un comentario con el siguiente formato
<!-- contenido del comentario -->
En el comentario podemos poner texto y etiquetas, que el navegador ignorar.
Imgenes
Uno de los elementos ms utilizados en una pgina web son las imgenes, tanto para mostrar
informacin como parte del propio diseo de la pgina. Bsicamente, en pginas web nos
encontramos tres tipos de imgenes: GIF, PNG y JPG.

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que
como mnimo ha de tener esta etiqueta son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Los atributos:

ATRIBUTO FUNCIN
src Ruta de la ubicacin del archivo de imagen.
alt Muestra un texto alternativo cuando el archivo de la imagen no es encontrado.
height Altura de la imagen (expresada en pixeles).
width Anchura de la imagen (expresada en pixeles).
title Muestra un texto al pasar el cursor del mouse sobre la imagen.

Ejemplo:
<img src="imagenes/monograma.png" alt="CESF" width="91" height="41"
title="Monograma del CESF" />

Enlaces
Cualquier pgina web tiene imgenes o texto, que al pulsarlos nos llevan a otra pgina del mismo
sitio, o a una pgina de un sitio distinto. Esto es un enlace o hiperenlace (en ingls link o hyperlink)
tambin llamado hipertexto o hipervnculo.

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma
y pasa de una flecha a una mano. Tambin es muy frecuente que los enlaces aparezcan subrayados,
ya que es la opcin por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un enlace es la

siguiente:
<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un archivo html,
por ejemplo http://www.cesf.edu.sv/index.html . El contenido del enlace es lo que el usuario ve
en la pgina y que al pulsar sobre l nos lleva al enlace. Normalmente es texto o una imagen.

Es muy comn aadir a los enlaces el atributo title, para que muestre informacin sobre el destino
del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo:

<a href="http://www.cesf.edu.sv" title="Visita la web del CESF">Clic

aqu&iacute;</a>
Por defecto, al hacer clic en el enlace, este se abrir en la misma ventana. Si queremos que se abra
en una nueva ventana (o pestaa) del navegador, podemos utilizar el atributo target="_blank" para
evitar que el usuario se vaya de nuestra pgina.