1

INTRODUCCIÓN AL DISEÑO Y
PUBLICACIÓN DE LAS PAGINAS
WEB

Material elaborado por: Prof. Norhemma Acevedo

 2

En el Capitulo anterior hemos visto un poco cómo funciona

en general Internet, para entender cómo se lleva a cabo la
interacción entre el servidor y la persona que utiliza sus
servicios.

En este capitulo veremos el lenguaje en el que se basan

las páginas WWW para dar paso a formas de interacción
que conoceremos durante el transcurso del resto de la
asignatura

Material elaborado por: Prof. Norhemma Acevedo

 3

El paradigma cliente-servidor es uno de los más

extendidos dentro de los servicios a través de red. La
idea básica y general que hay detrás de este modelo es
que hay alguien que ofrece algo (el servidor) y alguien
que quiere algo (el cliente).
En el caso de las páginas web tenemos
un servidor web que es aquél que
tiene las páginas web (o sea, la
información) y un cliente (un
navegador) que es el que pide la
página web (generalmente para
mostrarla). El modelo cliente-servidor
aparece también en multitud de
situaciones cotidianas que tienen poco
que ver con la informática: así cuando
estamos en la cola de una
hamburguesería somos los clientes
que estamos demandando un servicio
(nuestra comida) de un servidor (que
sería
Material elaborado el cajero
por: Prof. y que
Norhemma nos "sirve" la
Acevedo

comida).
 4
¿Qué es?

HTML (HyperText Markup Language) es un

lenguaje muy sencillo que permite describir
hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros
documentos o fuentes de información
relacionadas, y con inserciones hipermedia
(gráficos, sonido...). Este lenguaje es el que
se utiliza para presentar información en el
World Wide Web.
La descripción se basa en especificar en el texto la
estructura lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc.), así como
los diferentes efectos que se quieren dar (cursiva, negrita, o
un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un navegador.

Material elaborado por: Prof. Norhemma Acevedo

 5
Una de las características de este
lenguaje más importantes para el
programador es que no es necesario ¿Qué necesitas para
ningún programa especial para crear una una página Web?
página Web. Gracias a ello se ha
conseguido que se puedan crear páginas
con cualquier ordenador y sistema
operativo. El código HTML, como hemos
adelantado en el párrafo anterior, no es
más que texto y por tanto lo único
necesario para escribirlo es un editor de
texto como el que acompañan a todos los
sistemas operativos: edit en MS-DOS,
También se puede usar procesadores de texto, que son
block de notas en Windows,vien UNIX, etc.
editores con capacidades añadidas, como pueden ser
Microsoft Word o WordPerfect pero hay que tener cuidado
porque en ocasiones hacen traducciones automáticas del
código HTML que no siempre son deseadas. En estos dos
últimos casos, también hay que tener en cuenta que
deberemos guardar el archivo en modo texto.

Material elaborado por: Prof. Norhemma Acevedo

 6

Una vez hemos

escrito el código
deberemos guardar el
archivo (con formato
de texto) con la
extensión .html o
.htm en MS-DOS,
Windows o cualquier
otro sistema que sólo
acepte tres letras en
la extensión.
Los siguientes son nombres válidos de archivos que
contengan código HTML: index.html,
index.htm,principal.html, PRINCIPAL.htm, etc...

Material elaborado por: Prof. Norhemma Acevedo

Últimamente han aparecido nuevas alternativas que facilitan la 7
programación de páginas Web. Son los editores HTML. Podemos
dividir estos editores en dos grupos:

Asistentes: ayudan a crear el código HTML e incluyen plantillas

de código prefabricadas, por ejemplo HotDog (Win),
HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o
Bluefish, (Linux, GNOME).

Conversores: son programas con otra función que la de la

programación Web pero que permiten convertir a HTML. Son
ejemplos de conversores Microsoft Word ,Quark XPress y
PageMaker.
Editores WYSIWYG (What You See Is
What You Get, lo que ves es lo que
obtienes): estos editores permiten
crear páginas web sin escribir código
HTML como si se tratase de un
programa de dibujo por ordenador.
Algunos ejemplos de este tipo de
editores son Macromedia
Dreamweaver, HotMetal o Microsoft
Frontpage.
Material elaborado por: Prof. Norhemma Acevedo
 8
¿Qué es?

XHTML es una familia de módulos y tipos de documentos

que reproduce, engloba y extiende HTML 4.0 [HTML]. Los
tipos de documentos de la familia XHTML están basados en
XML, y diseñados fundamentalmente para trabajar en
conjunto con aplicaciones de usuario basados en XML.

XHTML 1.0 (esta especificación) es el primer

tipo de documento de la familia XHTML. Es
una reformulación de las tres definiciones de
tipo de documento HTML 4.0 como
aplicaciones de XML 1.0 [XML]. Su finalidad es
ser usado como lenguaje de contenidos que es
a la vez conforme a XML y, si se siguen
algunas sencillas directrices, funciona en
aplicaciones de usuario conformes con HTML
4.0.
Material elaborado por: Prof. Norhemma Acevedo
 9
Los desarrolladores que migren aplicaciones hacia
XHTML 1.0 apreciarán las siguientes mejoras:

•Los documentos XHTML son conformes a XML.

Como tales, son fácilmente visualizados, editados y
validados con herramientas XML estándar.

•Los documentos XHTML pueden escribirse para que

funcionen igual o mejor que lo hacían antes tanto en
las aplicaciones de usuario conformes a HTML 4.0
como en los nuevas aplicaciones conformes a XHTML
1.0.
•Los documentos XHTML pueden usar
aplicaciones (e.g. scripts y applets) que se
basen ya sea en el Modelo del Objeto
Documento de HTML o XML.

Material elaborado por: Prof. Norhemma Acevedo

 10

A medida que la familia XHTML evolucione, los documentos

conformes a XHTML 1.0 estarán más preparados para
interactuar dentro de y entre distintos entornos XHTML.

La familia XHTML es el siguiente paso en la evolución de

Internet. Al migrar en este momento hacia XHTML, los
desarrolladores de contenidos web entran en el mundo de
XML con todos los beneficios que se esperan de él a la vez
que se aseguran la compatibilidad con aplicaciones de
usuario pasadas y futuras.

Material elaborado por: Prof. Norhemma Acevedo

ETIQUETAS 11

Las órdenes de este lenguaje estarán formadas por unos comandos

llamados etiquetas que pueden tener o bien la siguiente estructura:

<NOMBRE _ ETIQUETA>O bien esta otra:

<NOMBRE _ ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Como vemos, la primera estructura está formada por una única

instrucción y la segunda por dos: una que marca el inicio de la etiqueta
y otra que marca el final, con texto entre ambas.

Por ejemplo, para indicarle al navegador que queremos que

pinte una línea horizontal debemos escribir:

<hr> Así de sencillo.

Como vemos, el nombre de la etiqueta va delimitado por los

símbolos menor que (<) y mayor que (>), todas las instrucciones
de HTML deben ir encerradas entre estos dos símbolos.
Material elaborado por: Prof. Norhemma Acevedo
 12

Las etiquetas no se limitan a indicar ordenes tan sencillas,

estas órdenes tienen en ocasiones parámetros.
Por ejemplo la etiqueta <hr> tal y como lo hemos hecho
anteriormente daría lugar a la línea,

es decir, le dice al navegador que dibuje una línea

horizontal en la pantalla. Esta línea tiene un grosor
predeterminado y un ancho variable en función del
tamaño de la ventana del navegador.

Material elaborado por: Prof. Norhemma Acevedo

 13
Hay muchas formas de pintar una línea y sería deseable poder
elegir detalles tales como la anchura y el grosor que va a tener
dicha línea. Para especificar este tipo de detalles se crearon los
atributos de las etiquetas. Este nuevo elemento se introduce
en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta,

después el nombre del atributo seguido por un signo igual y
posteriormente el valor que queramos darle a ese atributo
encerrado entre comillas una etiqueta puede tener tantos
atributos como se deseen y en ocasiones son necesarios para
que la etiqueta tenga algún significado.

Material elaborado por: Prof. Norhemma Acevedo

 14
En nuestro ejemplo de la línea horizontal existe un atributo
llamado SIZE, que significa tamaño en inglés, que permite
controlar el grosor de la línea que será dibujada en pantalla.
Veamos un ejemplo en donde podemos ver la línea horizontal
con diferentes grosores.

El valor numérico que le damos al atributo size no

va entrecomillado, por ejemplo en <hr size=5>.

Material elaborado por: Prof. Norhemma Acevedo

 15

NOTA

En HTML no es necesario entrecomillar los

valores de los atributos cuando están formados
únicamente por números [0-9], letras [a-z, A-
Z], guiones y puntos. En todo caso es muy
recomendable incluir las comillas siempre. De
esta forma no tenemos que preocuparnos de
cuando ponerlas y cuando no y a la vez
cumplimos el nuevo estándar XHTML.

Material elaborado por: Prof. Norhemma Acevedo

 16
FORMATOS DE PARRAFOS

Deberemos especificar que el archivo de texto que

estamos escribiendo es un documento HTML, para ello
usamos las instrucciones de inicio y fin de la etiqueta
<html> al principio y al final de la página
respectivamente:

<html>
Código de la página
</html>

El código de la página esta formado a su vez por dos

grandes bloques, la cabecera y el cuerpo.

Material elaborado por: Prof. Norhemma Acevedo

 17
La cabecera de la página está delimitada por las
instrucciones de inicio y fin de la etiqueta head.
Estas instrucciones deben estar dentro de la
etiqueta HTML de la siguiente manera:

<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>

En la cabecera de la página se introduce toda

aquella información que afectará a toda la página.
En un principio esta información se limitará al
título.

Material elaborado por: Prof. Norhemma Acevedo

 18

Usando el
WordPad El
título se
indicará con la
etiqueta title
usando la
siguiente
sintaxis:

Material elaborado por: Prof. Norhemma Acevedo

 19

Se debe guardar
el archivo con:
“nombre.html”
y con un tipo de
archivo de
texto.

Material elaborado por: Prof. Norhemma Acevedo

 20

Abrimos el
Navegador y
se busca el
archivo
guardado

Si nos fijamos en la cabecera de la ventana del

navegador vemos que el título a pasado de ser
Microsoft Internet Explorer a "Mi primera página WEB -
Microsoft Internet Explorer". Es decir el título que le
demos a nuestra página con la etiqueta <TITLE>
pasará a ser el título de la ventana del navegador

Material elaborado por: Prof. Norhemma Acevedo

 21

Usando el
WordPad El título
se indicará con la
etiqueta body
usando la
siguiente sintaxis:

El cuerpo es el siguiente gran bloque de nuestro

documento HTML, éste quedará delimitado por la
etiqueta body. En su interior introduciremos todos
aquellos elementos de los que queremos que
conste nuestra página como pueden ser testo,
imágenes, tablas, etc. Conociendo la etiqueta body
podemos ampliar el ejemplo anterior para que
incluya texto.
Material elaborado por: Prof. Norhemma Acevedo
 22

El cuerpo es el siguiente gran bloque de nuestro

documento HTML, éste quedará delimitado por la
etiqueta body. En su interior introduciremos todos
aquellos elementos de los que queremos que conste
nuestra página como pueden ser testo, imágenes,
tablas, etc. Conociendo la etiqueta body podemos
ampliar el ejemplo anterior para que incluya texto.

Material elaborado por: Prof. Norhemma Acevedo

 23

OTRAS ETIQUETAS

La etiqueta de font face, nos permite editar el tipo de la

letra que se desee utilizar, y para cambiar el tamaño de la
letra debemos utlizar la etiqueta de font size. Si queremos
agregar el estilo italico se agrega después de las etiquetas
de font la etiqueta i, la cual nos dara el estilo italico de
letra, y para obtener el estilo bold utilizamos la etiqueta b,
por ultimo debemos tener en cuenta que no puede quedar
todo junto asi que usamos la etiqueta p, para separar
párrafos.
Para el cambio de color de las letras de nuestro
página Web, podemos utilizar la etiqueta text, y para
darle color a nuestro fondo de página Web utilizamos
bgcolor. Ahora entenderemos mejor lo anterior con el
siguiente ejemplo :

Material elaborado por: Prof. Norhemma Acevedo

 24
Usando el WordPad se escribirán la etiqueta mencionadas
en la página anterior usando la siguiente sintaxis:

Ejemplo:

Material elaborado por: Prof. Norhemma Acevedo

 25

Abrimos el
Navegador y
se busca el
archivo
guardado

Material elaborado por: Prof. Norhemma Acevedo

 26

Abrimos el
Navegador y
se busca el
archivo
guardado

Material elaborado por: Prof. Norhemma Acevedo

 27
Usando el WordPad procedemos a elaborar una tabla
dentro de la página utilizando la etiqueta “table” (“tr”
para las columnas de tabla, y “td” para las filas) usando
la siguiente sintaxis:

Material elaborado por: Prof. Norhemma Acevedo

 28

Usando el WordPad procedemos a insertar una imagen

dentro de la página utilizando la etiqueta “img src”
(colocando luego de =“la dirección del objeto) usando la
sintaxis anterior:

Material elaborado por: Prof. Norhemma Acevedo

 29

Abrimos el
Navegador y
se busca el
archivo
guardado

Material elaborado por: Prof. Norhemma Acevedo

 30

Usando el WordPad procedemos a insertar un

hipervínculo dentro de la página utilizando la etiqueta
“a href” (colocando luego de =“la dirección a
hipervincular) usando la sintaxis anterior:

Material elaborado por: Prof. Norhemma Acevedo

 31

Abrimos el
Navegador y
se busca el
archivo
guardado

Luego haz
Click en el
hipervínculo de
“Yahoo.es”

Material elaborado por: Prof. Norhemma Acevedo

 32

El hipervínculo
nos lleva a su
destino. En este
caso es:
Yahoo.es

Material elaborado por: Prof. Norhemma Acevedo

 33

1. Construye una página Web.

Material elaborado por: Prof. Norhemma Acevedo

 34

Willard, Wendy. FUNDAMENTOS DE PROGRAMACIÓN EN

HTML.2002. Osborne-McGraw Hill. Colombia.

Material elaborado por: Prof. Norhemma Acevedo