manual html-dreamwaver [by irvingsd].desbloqueado

L.I. Irving Santamaría Domínguez ● DISEÑO DE

SOFTWARE PARA WEB

HTM

L - E

l LE

NG

UA

JE H

TM

L.

1

C o n t e n i d o

El Lenguaje Html. ______________________________ 5 Mi Primer Documento Html. _____________________ 5 Características Generales De Html.. _______________ 6 Cuatro Normas Fundamentales __________________ 7 Estructura De Un Documento Html. _______________ 9 Comandos Básicos De Html ______________________ 9 Enlaces: A. __________________________________ 17 Imágenes ___________________________________ 21 Tablas ______________________________________ 25 Editores Y Conversores ________________________ 30

Dreamweaver 8 ______________________________ 31 Editar Páginas Web Dw8 ______________________ 32 Mi Primera Página En Dreamwaver ______________ 33 El Entorno De Trabajo De Dreamwaver ___________ 36 Configuración De Un Sitio Local En Dw8 __________ 39 Propiedades Del Documento En Dw8 _____________ 40 Los Colores En Dw8 ___________________________ 42 Listas Dw8 __________________________________ 43 Caracteres Especiales En Dw8 ___________________ 43 Estilos Css En Dw8 ____________________________ 44 Hiperenlaces En Dw8 __________________________ 44 Imágenes En Dw8 ____________________________ 47 Tablas En Dw8 _______________________________ 48 Marcos En Dw8 ______________________________ 49 Formularios En Dw8 __________________________ 51 Multimedia En Dw8 ___________________________ 54 Las Plantillas En Dw8__________________________ 56 Html Desde Dreamweaver _____________________ 57

Otros Elementos _____________________________ 60 Publicar Las Páginas En Internet. ________________ 62 Direcciones Internet De Interés. _________________ 62 Bibliografía. _________________________________ 64

EEnn eessttee mmaannuuaall nnooss iinnttrroodduucciirreemmooss eenn llaa ccrreeaacciióónn ddee ssiittiiooss WWeebb,, pprriimmeerroo ddee uunnaa mmaanneerraa mmaannuuaall ppaarraa llaa ccoommpprreennssiióónn ddeell ccóóddiiggoo HHTTMMLL yy ppoosstteerriioorrmmeennttee ccoonn uunn ssooffttwwaarree ddee ddiisseeññoo ccoommoo lloo eess DDrreeaammwwaavveerr..

Compiled by

L.I. Irving Santamaría Domínguez

www.irvingsd.co.cc

L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB

HTM

L ►

El L

EN

GU

AJE

HT

ML

.

2

INTRODUCCIÓN Este manual está pensado para aprender los conceptos básicos necesarios para construir sus propias páginas Web. Para quien quiera ampliar sus conocimientos se suministran también unas referencias de consulta a otros sitios del Web. En su confección se ha procurado seguir siempre un criterio eminentemente práctico. Para mejor asimilar los conceptos tratados, se propone al final de cada apartado un ejemplo práctico. Primeras herramientas: Para comenzar sólo son necesarios dos elementos: Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más

adecuados son los más sencillos (como por ej., El block de notas de). Si se utilizan procesadores como el Word, se deben guardar los archivos como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador.

Un visualizador o navegador del Web: Netscape, MSI Explorer, Mosaic, etc. El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando. Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML Método de trabajo: Con el editor de texto crearemos un archivo con el nombre que queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensión .html (o .htm si nuestro sistema operativo no soporta extensiones de más de tres letras). Habrá un archivo distinto para cada apartado; conviene crear un directorio específico en su ordenador e irlos guardando en él, para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejemplos prácticos. Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.


HTM

L ►

El L

EN

GU

AJE

HT

ML

.

3


HTM

L ►

El L

EN

GU

AJE

HT

ML

.

4

| A C T I V I D A D | Investiga y los siguientes términos y

escribe las conclusiones a las que hayan llegado en tu grupo.

A que se refiere el termino WEB

Diferencia entre página web y sitio web.

Diferencia entre HTML y HTTP

Diferencia entre web estática y web dinámica

Diferencia entre hosting y dominio

De la siguiente dirección escribe las partes de la URL:

http:// www. cbtvillagro .edu .mx /Galeria/ Fotos2012 .html


HTM

L ►

El L

EN

GU

AJE

HT

ML

.

5

EL LENGUAJE HTML. EL LENGUAJE HTML.

HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página

entenderemos el documento que aparece en el navegador.

HTML se compone de una serie de comandos, que son interpretados por el navegador, o

programa que utilizamos para navegar por el WWW. En última instancia es el navegador el que

ejecuta todas las órdenes contenidas en el código HTML, de forma que un navegador puede estar

capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página

tenga una imagen de fondo, o un texto parpadeando, pero si nuestro navegador no está

capacitado para esas funciones, no podremos verlas.

MI PRIMER DOCUMENTO HTML (PRÁCTICA # 1).

Siga las siguientes instrucciones atentamente; ellas le permitirán crear un documento HTML en

su ordenador; este archivo no será visible para otros usuarios de Internet.

Le recomiendo que cree un directorio en su ordenador para almacenar las páginas web que vaya

haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet.

1. Abra el editor de textos: en Windows abra el Block de Notas 2. Teclee lo siguiente:

<HTML> <HEAD>

<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE> </HEAD> <BODY>

<CENTER><H1>Mi primera pagina Web</H1></CENTER> <HR> Esta es mi primera pagina, aunque todavia es muy sencilla. <BR>Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes. <P> Aquí va un segundo parrafo.</P>

</BODY> </HTML>

3. Grabe este archivo con el nombre: ejemplo1.html 4. Abra el navegador. No necesita conectarse a Internet para ver las páginas en su computador.

Puede trabajar Off‐line


HTM

L ►

CA

RA

CT

ER

ÍST

ICA

S G

EN

ER

AL

ES

DE

HT

ML

..

6

5. Elija "Archivo/Abrir página" en la barra de menú del navegador. 6. Seleccione el archivo ejemplo1.html que acaba de crear. Las líneas en blanco y las especificaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores. Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello. ¡Usted ha creado su primer documento HTML!.

CARACTERÍSTICAS GENERALES DE HTML..

Marcas y atributos.

El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora

utilizaremos indistintamente uno de 3 términos para denominar a los elementos que se

estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre

dos signos de menor y mayor como a continuación se muestra:

<marca [atributos]> ......................................[</marca>]

El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el navegador

encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la

marca ‐ el símbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa

propiedad al texto que viene a continuación.

Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que son

insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del

texto. En ese caso, el final de la aplicación se especifica con la misma marca precedida de la barra

inclinada hacia atrás (/).

Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o

modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente

forma:

<marca atrib1=“valor1” atrib2=“valor2”..............>

El valor de los atributos se expresan encerrados entre comillas.


HTM

L ►

CU

AT

RO

NO

RM

AS

FU

ND

AM

EN

TA

LE

S

7

En la mayor parte de los navegadores es posible omitir las comillas y colocar directamente el

valor del atributo. Esta práctica. a pesar de estar extendida, no es muy aconsejable ya que no

está normalizada, y no esta soportada por la totalidad de los navegadores.

Algunos atributos sólo viene definidos por su nombre (no tienen valor); son los atributos

llamados compactos.

Concatenación de marcas.

Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se pueden

aplicar simultáneamente varias propiedades a una misma porción de documento. Así el texto

encerrado en las marcas:

<MARCA1><MARCA2> Texto </MARCA2></MARCA1>

queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2. Todas las

marcas son independientes entre sí, por los las siguientes líneas de código HTML, tiene efectos

idénticos, sean cuales sean las marcas concretas:

<MARCA1><MARCA2> Texto </MARCA2></MARCA1> <MARCA1><MARCA2> Texto </MARCA1></MARCA2> <MARCA2><MARCA1> Texto </MARCA1></MARCA2> <MARCA2><MARCA2> Texto </MARCA2></MARCA1>

A pesar de que son expresiones completamente idénticas, es recomendable seguir el orden

lógico de la concatenación, ya que esto facilita de forma sustancial la edición de documentos

HTML. De las cuatro opciones anteriores, las correctas serían la primera y la tercera.

CUATRO NORMAS FUNDAMENTALES

HTML es simplemente texto

Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede

editar con cualquier editor de texto sencillo, como el Block de Notas de Windows.


HTM

L ►

CU

AT

RO

NO

RM

AS

FU

ND

AM

EN

TA

LE

S

8

Igualdad de mayúsculas y minúsculas.

HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus atributos.

Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en

mayúsculas.

No importan los tabuladores, ni los saltos de línea

Los navegadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en

blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener

resultados uniformes y de buena presentación de manera bastante fácil.

La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas

<P>...</P> o <BR> para evitar que quede todo el texto en una sola línea.

Caracteres especiales

En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del

mecanismo del funcionamiento de HTML, como sucede con los símbolos mayor que (>) y menor

que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del juego de

caracteres internacionales del alfabeto, como sucede con los acentos.

Sea por los motivos que fuere, el caso es que existen ciertos símbolos que no pueden escribirse

directamente, sino que deben sustituirse por una cadena de caracteres que el navegador

interpretará de forma correcta. Estas cadenas de caracteres comienzan siempre por el símbolo

(&) seguido de una combinación de caracteres alfabéticos que tienen un significado especial en

HTML. En la siguiente tabla se muestra cómo escribir algunos de estos caracteres:

Carácter especial Transcripción HTML Comentario

Los acentos &<vocal a acentuar> acute; En la actualidad la mayoría de los browsers los soportan

Símbolo menor que (<) &lt:

Símbolo mayor que (>) >

La eñe ñ En la actualidad la mayoría de los browsers la soportan

Espacios en blanco (non breaking space) HTML sólo reconoce un espacio en blanco entre palabras

De manera más general, para representar símbolos reservados o símbolos particulares, se puede

utilizar el código ASCII del símbolo mediante la sintaxis siguiente:

&#código_ASCII;


HTM

L ►

ES

TR

UC

TU

RA

DE

UN

DO

CU

ME

NT

O H

TM

L.

9

ESTRUCTURA DE UN DOCUMENTO HTML.

Un documento HTML, no es más que el texto definido entre las marcas:

<HTML> ..................... </HTML>

Un documento HTML siempre se compone de las siguientes 2 partes:

<HTML> <HEAD> Cabecera del documento </HEAD> <BODY> Contenido del documento </BODY>

</HTML>

Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la cabecera hay información del documento, que no se ve en la pantalla principal, y que precisa las características del documento, principalmente el título del documento. El título del documento se declara entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones favoritas).

Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando </BODY>. Este comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carácter imprimible.

En la práctica algunos navegadores no necesitan las etiquetas de comienzo y cierre de <HTML>,

<HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo, cuando diseñemos un

página Web debemos tener en cuenta a la mayoría de usuarios posibles, por lo que es muy

recomendable incluir estas marcas.

COMANDOS BÁSICOS DE HTML

A continuación se describen las marcas básicas de HTML que se pueden incluir en el cuerpo de un

documento HTML.

Definición de párrafos: P

La marca <P> sirve para separar párrafos en HTML. Además de introducir un retorno de carro,

fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el

siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible

En esta marca la etiqueta de fin es opcional.


HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

10

Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos

modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que

puede tomar los valores siguientes.

LEFT: el párrafo es justificado a la izquierda. Valor por defecto.

CENTER: el párrafo es centrado.

RIGHT: el párrafo es justificado a la derecha.

Ruptura de líneas: BR.

La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en el

que es colocada. Es equivalente al punto y aparte de un texto normal.

Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.

Titulos de encabezamiento

HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

<H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6>

Puede experimentar en el ejemplo anterior, cambiando el número para comprobar el efecto que se logra.

Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea,

aunque no se le indique.

Dando estilo al texto

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño, color que

se desea que aparezca el texto.

Tipos de letras

Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes:


HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

11

<B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U>

Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.

Tamaño del texto.

Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente:

<FONT SIZE="tamaño">Texto</FONT>

El comando <FONT> requiere la etiqueta de cierre.

HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto.

Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real

del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una

Times de 8.

Existen dos formas de establecer el tamaño de un trozo de texto.

Tamaño de texto absoluto. <FONT SIZE=”argumento”>Texto</FONT>

donde argumento es un número entre 1 y 7

Tamaño de letra relativos. <FONT SIZE=”argumento”>Texto</FONT>

donde argumento es una cadena de caracteres que nos indica, con un signo + ó ‐,

el número de veces que esa fuente va ser mayor o menor que el tamaño de la

fuente por defecto

El uso de tamaños relativos nos permite olvidarnos de cual es el tamaño de letra que se está

utilizando en el momento actual, por lo que, en general, será preferible a utilizar tamaños de

letra absolutos.

Si queremos modificar el tamaño de todo el texto del documento, una forma de hacerlo sería

englobar todo el cuerpo del documento en una etiqueta con el tamaño de letra que queremos

utilizar. Así escribiremos algo parecido a lo que sigue:


HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

12

<HTML> <HEAD> ........... </HEAD> <BODY><FONT SIZE=“4”> ........ (contenido del documento) ....... </FONT></BODY> </HTML>

Sin embargo, hay otra forma de hacerlo más elegante y legible, utilizando la siguiente etiqueta:

<BASEFONT SIZE="tamaño">

Este etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se trata de

una etiqueta que afecta a todo el documento, para mantener la legibilidad lo más lógico es

colocarlo en la cabecera.

Si fijamos un tamaño de letra básico distinto del 3, debemos tener en cuenta que es posible que

alguno de los tamaños relativos no pueda llevarse a cabo, puesto que se sale de los límites

especificados.

Colores del texto.

Para dar color a un texto se utiliza el comando siguiente:

<FONT COLOR="color">Texto</FONT>

En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal.

Consistía en tres números hexadecimales (números expresados en base 16) de dos dígitos cada

uno. Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El

primer número hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el

segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco será FFFFFF, el negro

000000). Esta forma de definir los colores como combinación de los colores rojo, verde, y azul se

denomina RGB (red ‐ green ‐ blue).

Afortunadamente, la mayoría de los navegadores, al menos en sus últimas versiones, admiten

otra forma de insertar colores. En lugar de expresarlos, en formato hexadecimal, se expresan

como cadena de caracteres. Esta cadena es el nombre del color en inglés.


HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

13

Para dar color a todo el texto del documento podemos hacerlo con: <BODY TEXT=“blue”>

Para especificar el color de fondo del documento deberemos utilizar: <BODY BGCOLOR=“blue”>

Listas

Las listas en HTML proporcionan una forma de clasificar la información, y hacer que ésta sea más

inteligible por parte del visitante de las páginas.

Listas ordenadas: OL.

También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un

número que indica el orden del elemento dentro del conjunto de la lista.

La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de

comienzo y fin de estas marcas.

Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <LI> .... </LI>.

La etiqueta de fin puede ser omitida.

Con la marca LI no es necesario introducir un retorno de carro detrás de cada elemento de la

lista.

Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos,

letras, etc.), por defecto se sigue la numeración árabe.

Las listas numeradas pueden ser anidadas una dentro de otra.

Listas desordenadas: UL.

También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna

manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un

punto, un cuadrado, etc..).

La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de

comienzo y fin de esta marca son obligatorias.

Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca

<LI> se puede omitir

También es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de

cada elemento de la lista.

Las listas desordenadas también pueden ser anidadas una dentro de otra.


HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

14

Listas de definición: DL.

A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar

la información sin marcas, ni números, sino que utiliza los sangrados de los párrafos.

Las listas de definición están constituidas por términos y su subsiguiente definición.

La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:

<DL> <DT> Nombre del termino <DD> Definición del término

</DL>

Cada término de la lista de definición se indica con la marca <DT> y no sangrará, mientras que la

descripción del término se indica con la marca <DD> y sangrará hacia la derecha para resaltarla

del término.

Antes y después de la descripción de cada palabra clave, las listas de definición incorporan un

retorno de carro,

Las listas de definición también pueden anidarse.

Texto preformateado: PRE.

El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un

comportamiento arbitrario, sino que es la forma que tenemos de que, independientemente de la

ventana del navegador, nuestro párrafo quede convenientemente justificado

Sin embargo, es posible que en alguna ocasión queramos que el texto aparezca en el navegador

tal y como lo hemos introducido, respetando los retornos de carro e incluso los espacios que

podamos haber dejado entre caracteres. Para ello podemos utilizar la marca <PRE> y englobar en

ella todo el texto del documento.

La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo

original, y la letra aparece como tipo de letra de espacio no proporcional (El tipo de letra usado

por el texto preformateado es el mismo que el de <TT> ... </TT>), y no con el tipo de letra

habitual del navegador. Esta marca permite mostrar el texto preformateado tal cual.

Además, en el texto preformateado no se interpretan los caracteres especiales HTML: <, > y &.

Esta marca requiere de las etiquetas de comienzo y fin.

HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

15

Centrando texto.

Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando

<CENTER> ... </CENTER>.

Líneas horizontales.

La marca <HR> permite trazar una líneas horizontales para separar distintas secciones de una

página HTML

Por defecto, las líneas horizontales van de la parte izquierda de la ventana del navegador a la

derecha.. Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una

sensación de relieve.

Esta marca sólo requiere la etiqueta de comienzo.

Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la línea horizontal

(ancho, longitud,...).

Comentarios no visibles en la pantalla

A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos:  Ejemplo:

HTM

L ►

CO

MA

ND

OS

BÁ

SIC

OS

DE

HT

ML

16

Ejemplo práctico nº2. Formato en HTML

En el editor de textos copiamos: <HTML> <HEAD> <TITLE>Ejemplo 2 - Comandos básicos</TITLE> </HEAD> <BODY> <CENTER><H1>Comandos básicos</H1></CENTER>  <H2>Párrafos</H2> <P>Este es mi primer párrafo del ejemplo 2</P> <P>Este es mi segundo parráfo. Aquí hay una ruptura de línea<BR>de texto</P> <HR> <H2>Listas</H2> <H3>Ordenadas</H3> <P>La <FONT SIZE="+1"><I>musica</I></FONT> que mas me gusta es <I> (en orden de preferencia): </I></P> <OL>

<LI>El rock</LI> <LI>El jazz  <LI>La musica clasica

</OL> <H3>Desordenadas</H3> <P>Sin un orden particular, mis <FONT COLOR="green"><B> aficiones </B></FONT> son las siguientes:</P> <UL>

<LI>El cine <LI>El deporte <LI>Natacion <LI>Baloncesto

</UL> <H2>De definición</H2> <DL>

<DT>Descripcion</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos

</DL> <HR> <CENTER>También sabemos centrar el texto</CENTER> <PRE> y escribir preformateado </PRE> <BLINK>y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> Guardamos el archivo de texto con el nombre ejemplo2.html y lo cargamos en el navegador.


HTM

L ►

EN

LA

CE

S:

A.

17

ENLACES: A.

La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los enlaces. Los enlaces (o links) proporciona al que visita las páginas un mecanismo muy sencillo para moverse entre distintos documentos, permitiéndole moverse en aquellos aspectos que considere más importantes, mientras que desde el punto de vista del que crea las páginas permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a almacenar los distintos documentos.

Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:

<A HREF=”direccion”>Texto del enlace</A>

donde: direccion: es el destino del enlace. texto del enlace: es el texto indicativo del enlace que aparece en la pantalla

normalmente con color especial y subrayado.

<A> requiere de la marca de fin.

Vamos a distinguir tres tipos de enlaces: 1. Enlaces a otras zonas de la misma página, 2. Enlaces a otras páginas., 3. Enlaces a otras zonas

de otras páginas.

Enlaces a otras zonas de la misma página

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada. Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del

mismo documento con solo hacer click. A este tipo de enlaces los llamaremos enlaces locales.

Estos enlaces constan de dos objetos:

El enlace: Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del

documento. Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando

la zona con el comando <A href="#nombre"> ... </A>, en que nombre es la etiqueta que se está

referenciando.

El nombre enlazado o referenciado Corresponde a la zona del documento a la cual el usuario llegará al hacer click en la

referencia correspondiente. Un nombre local se crea delimitando la zona con el comando

<A NAME="nombre"> ... </A>, en que nombre es la etiqueta que asignamos a esta zona.


HTM

L ►

EN

LA

CE

S:

A.

18

Ejemplo práctico nº 3 de enlaces locales

<HTML> <HEAD> <TITLE>Ejemplo 3 - Enlaces locales</TITLE> </HEAD> <BODY> <H2>Enlaces locales</H2> <H3><A NAME="indice">Indice</A></H3> <UL>

<LI><A HREF="#uno">Sección uno</A> <LI><A HREF="#dos">Sección dos</A> <LI><A HREF="#tres">Sección tres</A> <LI><A HREF="#cuatro">Sección cuatro</A> <LI><A HREF="#cinco">Sección cinco</A> <LI><A HREF="#seis">Sección seis</A> <LI><A HREF="#siete">Sección siete</A> <LI><A HREF="#ocho">Sección ocho</A>

</UL> <H3><A NAME="uno">Sección uno</A></H3> <P>Esta es la sección 1 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="dos">Sección dos</A></H3> <P>Esta es la sección 2 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="tres">Sección tres</A></H3> <P>Esta es la sección 3 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="cuatro">Sección cuatro</A></H3> <P>Esta es la sección 4 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="cinco">Sección cinco</A></H3> <P>Esta es la sección 5 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="seis">Sección seis</A></H3> <P>Esta es la sección 6 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="siete">Sección siete</A></H3> <P>Esta es la sección 7 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="ocho">Sección ocho</A></H3> <P>Esta es la sección 8 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> </BODY> </HTML> Guardamos el archivo de texto con el nombre ejemplo3.html y lo cargamos en el navegador. Como vemos, las referencias locales son muy útiles para crear índices al comienzo del

documento.


HTM

L ►

EN

LA

CE

S:

A.

19

Enlaces a otras páginas

Para enlazar a otro documento, es necesario conocer la ubicación exacta del documento que se

referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta

Ubicación relativa: Se indica especificando la posición del documento en la estructura de subdirectorios a

partir de la ubicación del documento actual. Sólo se puede usar para documentos

ubicados en el mismo ordenador.

Una referencia relativa a otro documento se hace usando el comando:

<A HREF="ubicación"> ... </A>

Ubicación absoluta: Se indica especificando el URL (uniform resurce locator) de la página que se está

referenciando.

Los URL son una manera universal de especificar una dirección. La forma más básica de referenciar un hypertexto es usar el comando:

<A href="http://ordenador/directorio/archivo"> ... El ordenador indica la máquina donde se encuentra el documento. El directorio y archivo

indican su posición dentro de ese ordenador. Los URL tienen muchas formas distintas

para referenciar distintos objetos.

Ejemplo práctico n° 4

<HTML>

<HEAD> <TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE> </HEAD>

<BODY>

<H1>Enlaces a otras páginas</H1>

<H2>Referencias relativas</H2>

<P>Se puede referenciar, por ejemplo, a un archivo localizado en el

mismo directorio, como por ejemplo, al <A

href="ejemplo1.html">ejemplo número 1</A>. También a un archivo

localizado en otro directorio, por ejemplo, esta

<A HREF="../guiahtml.html">guia HTML</a></P>

<H2>Referencias absolutas</H2>


HTM

L ►

EN

LA

CE

S:

A.

20

<H3>Algunos servicios WWW en España</H3>

<P>La <A

HREF="http://www.um.es/~biblio/">biblioteca de la Universidad de Murcia</A> que

permite

acceso al catalogo de la biblioteca. También está el servidor WWW de <A

HREF="http://www.rediris.es/">RedIris</A> y el servidor

de <A HREF="http://www.boe.es/">BOE</A> para leer consultar de BOEs

</P>

<H3>Algunos servicios en el extranjero</H3>

<P>Para informarse de la actualidad mundial, se puede acceder al

servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de

la música se encuentra el servidor oficial de la <A

HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de

información está <A HREF="http://www.yahoo.com/">Yahoo!</A>.

</BODY>

</HTML>

Guardamos el archivo de texto con el nombre ejemplo4.html y lo cargamos en el navegador.

Enlaces a una zona de otra página

Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la

página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.

Ejemplo práctico nº5

<HTML>

<HEAD> <TITLE>Ejemplo 5- Enlaces a zonas de otras páginas</TITLE> </HEAD>

<BODY>

<H1>Enlaces a zonas de otras páginas</H1>

<P>Enlazamos a la

<A HREF="ejemplo3.html#uno">la

seccion 1 del ejemplo 3</A>.</P>


HTM

L ►

IM

ÁG

EN

ES

21

<P>Enlazamos a la

<A HREF="ejemplo3.html#cinco">la

sección 5 del ejemplo 3</A>.</P>

</BODY>

</HTML>


IMÁGENES

Las imágenes son un elemento esencial para diseñar páginas atractivas. No obstante, un excesivo

número de imágenes en una página pueden hacer ralentizar el proceso de visualización (las

imágenes son las partes de las páginas que más espacio ocupan, por lo que su transferencia

requiere más tiempo que la del texto). Es importante conseguir un compromiso entre una página

atractiva (lo que lleva incluir gráficos), y una página que pueda cargarse en un tiempo razonable

Principales formatos gráficos en Internet.

Existen una gran cantidad de formatos gráficos en el mundo de los ordenadores, cada uno de

ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet,

solamente debemos tener en cuenta dos formatos muy específicos: el GIF y el JPEG. Su elección

no es en absoluto un capricho, además de la alta resolución que consiguen, se trata como

veremos, de dos formatos que comprimen el tamaño de las imágenes, por lo que éstas pueden

transmitirse más rápidamente por Internet.

Para crear y manipular imágenes hay que utilizar un editor de imágenes, entre los más conocidos

se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop.

Formato GIF.

Las siglas GIF provienen del inglés Graphics Interchange Format o formato de intercambio de

gráficos. Est formato fue desarrollado por CompuServe para proporcionar un mecanismo de

transmisión de archivos de imágenes mediante líneas telefónicas. Este mecanismo consiste en

comprimir las imágenes para una transmisión más rápida en un medio de baja capacidad como

son los hilos telefónicos.

Las imágenes en formato GIF están limitadas a 256 colores simultáneos.


HTM

L ►

IM

ÁG

EN

ES

22

Una propiedad interesante del formato GIF es la de poder seleccionar un color “transparente”.

Así, cuando la imagen en cuestión es mostrada en un navegador, la zona de la imagen con el

color transparente toma el color del fondo del documento.

Otra propiedad interesante del formato GIF, es la poder crear gráficos animados, el formato de

este tipo de imágenes se le denomina GIF 89.

Los archivos de imágenes en este formato tienen asociados la extensión .gif.

Formato JPEG.

JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos Fotográficos

Reunidos). Al igual que el formato GIF, comprime las imágenes para una transmisión más rápida,

aunque difiere en el algoritmo de compresión.

Mientras que con el formato GIF la comprensión de un archivo de imágenes viene determinada,

JPEG nos permite especificar la relación de compresión deseada, por lo que podemos variar el

tamaño del archivo. Naturalmente, a mayor relación de compresión, menor tamaño y peor

calidad en la imagen final. Disminuyendo la compresión obtenemos imágenes de mayor calidad

pero también de mayor tamaño.

No debemos obsesionarnos con la calidad de las imágenes. Hay que tener presente que Internet

es en ocasiones un medio de transmisión bastante lento, por lo que a veces es preferible perder

algo de calidad en las imágenes antes de aburrir al visitante con nuestros documentos.

Los archivos de imágenes en este formato tienen asociado la extensión .jpg.

Inclusión de imágenes

La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la siguiente:

<IMG SRC=”imagen.jpg”></IMG> donde imagen.jpg es un archivo de imagen

Tamaño de las imágenes.

Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño que

tienen originalmente.

Para modificar el tamaño de las imágenes se utilizan los siguientes modificadores en la etiqueta

<IMG>:

WIDTH: especifica la anchura en pixels de la imagen.

HEIGTH: especifica el número de pixels que tendrá de alto la imagen.


HTM

L ►

IM

ÁG

EN

ES

23

Escalado de imágenes.

Con el uso de loa modificadores HEIGHT y WIDTH podemos ampliar, y reducir las imágenes sin

deformarlas, es decir, escalarlas. Una manera cómoda de hacerlo es solamente especificar una

de las dos dimensiones, se asume que la reducción o la ampliación es proporcional a la otra.

Bordes de la imagen.

Mediante el modificador BORDER se puede añadir bordes a nuestras imágenes.

Alineación de texto con las imágenes.

La alineación del texto con las imágenes se realiza mediante el modificador ALIGN. Los valores

que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE,

ABSMIDDLE, BOTTOM, LEFT, y RIGTH.

Además podemos especificar la distancia que queremos establecer entre el gráfico y el texto. Si

este parámetro no se establece, el texto es situado justo a continuación de la imagen. Para

introducir espacios horizontales y verticales a continuación de la imagen se utilizan los

modificadores VSPACE y HSPACE.

Imágenes con texto alternativo.

Los navegadores tienen la opción de no mostrar las imágenes, en un intento de acelerar el acceso

a las páginas. Muchas veces, las imágenes incluidas en una página son fundamentales para

comprender la información que se ofrece. Por ejemplo, una

página destinada a alumnos universitarios de asignaturas de estadística o matemáticas puede

contener imágenes de fórmulas matemáticas. Para estos casos se puede añadir a la imagen un

texto ALTernativo, que dé una idea del contenido de la imagen. Para añadir un texto alternativo,

se utiliza la orden como se muestra a continuación:

<IMG SRC="nombre_imagen" ALT="Texto_alternativo">

Uso de imágenes como enlaces.

Para utilizar una imagen como enlace a otra parte de la página o a otra página, simplemente hay

que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera:

<A HREF=”enlace”> <IMG SRC=”imagen”> </A>


HTM

L ►

IM

ÁG

EN

ES

24

Imágenes como fondo de un documento.

Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML. La manera

de hacerlo es con el atributo BACKGROUND de la marca <BODY>.

La imagen de fondo en general será más pequeña que el área de documento del navegador. Lo

que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen

que hemos elegido como fondo del documento.

A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento

debe ser legible por encima de la imagen, por lo que hay que evitar colocar imágenes con colores

demasiado fuertes.

Mapas sensitivos.

Los mapas sensitivos o mapas de imágenes son un tipo determinado de enlace mediante gráficos.

Constituyen una herramienta de gran potencia, aunque son algo complicados de construir y

mantener.

Los mapas sensitivos están compuestos de dos elementos fundamentales: la imagen del mapa y

los enlaces de cada zona del mapa.

La imagen del mapa es la imagen que vamos a dividir en zonas distintas. Pulsando en cada una de

esas zonas iríamos a un enlace distinto.

Los mapas sensitivos no se explican en esta guía. Puede encontrar información más información

sobre los mapas sensitivos en las referencias que se incluyen en el apartado "Direcciones Internet

de interés".


<HTML>

<HEAD> <TITLE>Ejemplo 6 - Imagenes </TITLE> </HEAD>

<BODY BACKGROUND="nubes.jpg" TEXT="#AA0000">

<CENTER>

<H1>Imágenes</H1>

</CENTER>

<HR>

Esta es mi página del Web. No es muy extensa, pero tiene todos los

elementos básicos. Espero que os guste. Poco a poco le iré

añadiendo más cosas interesantes.


HTM

L ►

TA

BL

AS

25

<P> <A HREF="ejemplo2.html"> <IMG SRC="hombre.gif"> </A> <FONT SIZE=+3>Mis

aficiones</FONT>

<P> <A HREF="ejemplo4.html"> <IMG SRC="casa.gif"> </A> <FONT SIZE=+3>Mis

páginas

favoritas</FONT>

<CENTER>

<H3> Un lugar ideal para mis vacaciones </H3>

<IMG SRC="isla.gif" ALT="isla">

<HR>

<CENTER>

<H3>Expediente X - Mulder</H3>

<IMG SRC="3mulder.gif" WIDTH=119 HEIGHT=160></CENTER>

<HR>

</BODY>

</HTML>


TABLAS

Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se

entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a

su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>..

</TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una

celda. El elemento de cierre de fila y de celda es optativo.

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas

anteriormente

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir

celdas, especificar la alineación del contenido de la celda, y mucho más.

Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de

ejemplos.


HTM

L ►

TA

BL

AS

26

Ejemplo de tabla

Aquí se muestra una tabla muy simple:

<TABLE>

<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>



</TABLE>

Título de la tabla.

Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque

ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la

etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:

<TABLE> <CAPTION> Nombre de la tabla </CAPTION> ……….

</TABLE> Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro

de la anchura de la tabla.

Bordes de la tabla.

Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta

<TABLE>. La sintaxis es:

<TABLE BORDER="anchura"> ……….

</TABLE>

donde anchura indica la anchura en pixels del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se

especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un

valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes

interiores, debemos hacer BORDER=”1”.


HTM

L ►

TA

BL

AS

27

Cabeceras de filas y de columnas.

La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe

una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La

desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado

como el de las otras celdas.

Tamaño de la tabla.

Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin

embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de

la etiqueta <TABLE>. La sintaxis es:

<TABLE WIDTH="anchura"> ……… </TABLE>

Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o

bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del

documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una

anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse

íntegramente.

Justificación de la tabla.

Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la

etiqueta <CENTER>.

Espacio dentro de las celdas.

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que

exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto

puede hacerse mediante los dos siguientes modificadores:

CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.

CELLSPACING: establece la anchura en pixels de los bordes de cada celda.


HTM

L ►

TA

BL

AS

28

Forma de las celdas individuales.

Justificación del texto de las celdas.

HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello

implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo

es:

<TABLE> <TR>

<TD ALIGN=”horizontal” VALIGN=”vertical”> ….. </TD>

</TR> ……….

</TABLE>

donde:

horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.

vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER.

Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de

una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.

Celdas de diferentes tamaños.

Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin

embargo, es posible establecer el tamaños de una determinada celda mediante dos

modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:

WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla.

HEIGHT: establece la altura de una celda individual.

No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La única

forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y

HEIGHT.


HTM

L ►

TA

BL

AS

29

Celdas irregulares.

Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo

es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:

COLSPAN= especifica la altura de una celda en concreta en función de la altura de las celdas adyacentes. Se especifica en número de celdas adyacentes.

ROWSPAN: especifica la anchura de una concreta en función del celdas que están debajo. Se especifica en número de celdas de debajo.

Color de cada celda.

Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la

etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.

Texto en una solo línea.

Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella, y

queremos que el texto no ocupe más líneas, sino que se amplíe la anchura de la celda, debemos

añadir el modificador NOWRAP dentro de la etiqueta <TD>.


<HTML>

<HEAD> <TITLE>Ejemplo 7 - Tablas</TITLE> </HEAD>

<BODY>

<CENTER><H1>Tablas</H1></CENTER>

<H2>Demostracion de COLSPAN y Encabezados</H2>

<TABLE WIDTH="100%" BORDER="1">

<TR>

<TH COLSPAN="2">Head1</TH>

<TH COLSPAN="2">Head2</TH>

</TR>

<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>

</TR>

<TR>

<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>


HTM

L ►

ED

ITO

RE

S Y

CO

NV

ER

SO

RE

S

30

</TR>

</TABLE>

</BODY>

</HTML>


EDITORES Y CONVERSORES

En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso de

herramientas automatizadas para la generación de páginas Web: editores y conversores.

Editores

Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación

de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ?

La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética

o ocupar una calculadora: ambas cosas no se contraponen entre sí.

Un editor HTML es una gran ayuda al diseñador Web: brinda la posibilidad de disponer y ver la

página mientras se crea, y de observar inmediatamente cómo aparecerán distribuidos los colores

y los elementos dentro del documento, es una ayuda para recordar las marcas y sus atributos, sin

embargo; puede resultar inadecuado por lo siguiente:

Poca flexibilidad, y en algunas ocasiones el código que generan en general es difícil de editar o mantener.

El conjunto de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga navegadores, o puede estar obsoleto.

El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento.

Es recomendable comenzar por lo básico, procurando aprender HTML bien, creando documentos

con editores de texto plano. Después si se desea se puede ocupar una combinación editor de

texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades

de ambos sistemas.


HTM

L ►

Dre

amw

eave

r 8

31

Los editores HTML se clasifican en dos tipos:

Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.

No Wysiwyg: ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final.

Por ejemplo, uno de los editores HTML Wysiwyg más completos es el FrontPage 98 de Microsoft

(http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, también permite trabajar en

modo comando.

Conversores

Las herramientas de conversión permiten transformar un documento escrito en otro formato a

un documento HTML.

El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que

existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con

algún grado de truculencia.

¿Cuándo usarlos? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo

previo en otro sistema.

¿Cómo usarlos? la idea básica es simplificar al máximo el documento (eliminar las sangrías,

uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento

HTML.

Finalmente conviene revisar la salida usando un editor de texto, revisando que el código

obtenido sea sintácticamente correcto, y dejando el documento lo suficientemente ordenado y

legible como para que sea fácil de modificar al momento de realizar futuras actualizaciones.

Por ejemplo, el paquete ofimático Oficce 97 (Word, Excel, PowerPoint, ...) de Microsoft incorpora

un conversor de documentos en formato Word a HTML. También el editor FrontPage 98,

anteriormente mencionado, incorpora un conversor de distinto tipos de formato de documentos

a HTML.

DREAMWEAVER 8 DREAMWEAVER 8


DW

8 ►

32

Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa.

EDITAR PÁGINAS WEB DW8

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedía Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.


DW

8 ►

Mi p

rim

era

pági

na e

n dr

eam

wav

er

33

MI PRIMERA PÁGINA EN DREAMWAVER

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, HTML.

Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el título y el color de fondo del documento.

Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Entonces se abrirá una ventana como la que aparece más abajo.

Cambia el Título por Mi primera página.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.

Seguidamente pulsa sobre el botón Aceptar.


DW

8 ►

Mi p

rim

era

pági

na e

n dr

eam

wav

er

34

Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd‐rom o en un disquete, pero preferiblemente en el disco duro.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un archivo de nuestro disco duro.

En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos

en una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como... a que hacíamos referencia anteriormente.

Copia una imagen de tus archivos, para luego poder insertarla en la página web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a través del menú Ventana, con la opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraido. Para que te aparezca desplegado debes pulsar sobre el

botón , que aparece junto al nombre.


DW

8 ►

Mi p

rim

era

pági

na e

n dr

eam

wav

er

35

Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.

Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos

útimas líneas de texto. Pulsa sobre el botón para centrarlos.

Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el

botón y pulsa tres veces sobre el botón .

Selecciona de nuevo la última línea, y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página:

Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12.

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html.

Por ejemplo, puedes llamarlo prueba1.htm.


DW

8 ►

El e

nto

rno

de

trab

ajo

de

Dre

amw

aver

36

EL ENTORNO DE TRABAJO DE DREAMWAVER

Vamos a ver cuáles son los elementos básicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

La pantalla inicial

Al arrancar Dreamweaver

aparece una pantalla inicial como ésta, vamos a ver sus

componentes fundamentales.

Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas

las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.

La barra de título

La barra de menús

La barra de herramientas estándar


DW

8 ►

El e

nto

rno

de

trab

ajo

de

Dre

amw

aver

37

La barra de herramientas de documento

La barra de estado

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior‐derecha.

Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.


DW

8 ►

El e

nto

rno

de

trab

ajo

de

Dre

amw

aver

38

Vistas de un documento

Puedes cambiar la vista del documento a través de la barra de herramientas de documento.

La vista Diseño

La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

La vista Código

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

La vista Código y Diseño

La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.


DW

8 ►

Con

figu

raci

ón d

e u

n s

itio

loca

l en

dw

8

39

CONFIGURACIÓN DE UN SITIO LOCAL EN DW8

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....

Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio.

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio.

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categoría Datos locales.

Debe definirse el Nombre del sitio y la


DW

8 ►

Pro

pie

dad

es d

el d

ocum

ento

en

dw

8

40

Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.

Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.

Estas tres características son las imprescindibles para definir un sitio local.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio

Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.

PROPIEDADES DEL DOCUMENTO EN DW8

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl+J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página. Se abrirá el cuadro de diálogo siguiente:


DW

8 ►

Pro

pie

dad

es d

el d

ocum

ento

en

dw

8

41

Las propiedades están organizadas en categorías.

En la categoría Aspecto, como ves en la imagen anterior, encontramos las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.

Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

Tamaño: permite definir el tamaño de la letra.

Color del texto: es el color de la fuente.

Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores.

En la categoría Título/Codificación encontramos la propiedad:

Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver.

En la categoría Vínculos encontramos las propiedades:

Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.


DW

8 ►

Los

col

ores

en

dw8

42

Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.

Vínculos activos: es el color de los vínculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

En la categoría Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.

LOS COLORES EN DW8 Para asignar colores es posible desplegar una paleta de colorescomo ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

También es posible personalizar los colores a través del botón de la parte superior de la paleta.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con

valor #3399FF, el botón quedaría del siguiente modo: .


DW

8 ►

Lis

tas

dw

8

43

LISTAS DW8 Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto.

La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista

numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Preparar la mochila 1. Sacar los libros de ese día 2. Introducir los libros del día

siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador

Ejemplo de lista con viñetas (desordenada):

Perro Gato Aves

o Canario o Loro

Hamster

CARACTERES ESPECIALES EN DW8

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación.

Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha.

Sólo coloca el puntero del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.


DW

8 ►

Est

ilos

CS

S e

n d

w8

44

Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia.

ESTILOS CSS EN DW8

Con Dreamweaver 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él.

Veámoslo:

Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.

2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos.

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

HIPERENLACES EN DW8

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.

La ubicación es en Internet, por ejemplo, http://www.misitio.com/pagina/pagina1.html.

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo


DW

8 ►

Hip

eren

lace

s en

dw

8

45

del directorio en el que se encuentra el documento actual.

Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual.

En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.

En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.

Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto.

El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.

Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.


DW

8 ►

Hip

eren

lace

s en

dw

8

46

Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual.

Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top: Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos.


DW

8 ►

Im

ágen

es e

n d

w8

47

IMÁGENES EN DW8

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.

Si por algún motivo se desea insertar un BMP, este noaparecerá a no ser que en Tipo se seleccione Todos losarchivos.

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Aquí tienes un ejemplo de rollover. Sitúa el puntero sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.


DW

8 ►

Tab

las

en d

w8

48

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

TABLAS EN DW8

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. Las propiedades de la tabla se especifican a través de su inspector de propiedades.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la


DW

8 ►

Mar

cos

en d

w8

49

izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.).

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia,

para permitir especificar otros valores.

MARCOS EN DW8

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.


DW

8 ►

50

Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.


DW

8 ►

For

mul

ario

s en

dw

8

51

FORMULARIOS EN DW8

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en VBScript, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.


DW

8 ►

For

mul

ario

s en

dw

8

52

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

Campo de t

Área de texto

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

Enviar

También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector de propiedades.

Casilla de verificación

Es un cuadrito que se puede activar o desactivar.

Deseo recibir información

Puede asignársele el Estado inicial como Activado o como Desactivado.

Botón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.

Superman

Spiderman

Lista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.

--- Elige opción lista ---

--- Elige opción menú---PerroGato


DW

8 ►

For

mul

ario

s en

dw

8

53

Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.

Puedes crear formularios a través del menú Insertar, opción Formulario.

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de la derecha.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Validar formularios

La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0.

Después de esto, hay que volver a desplegar el botón , y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.


DW

8 ►

Mu

ltim

edia

en

dw

8

54

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número), una Dirección de correo electrónico, etc.

MULTIMEDIA EN DW8

Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo

Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.

Estas películas pueden crearse mediante el programa Flash de Macromedía, y necesitan que el usuario tenga instalado el plug‐in para poder ser visualizadas.

Las películas Flash pueden insertarse en una página a través del menú Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F.

También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común


DW

8 ►

Mu

ltim

edia

en

dw

8

55

del panel Insertar, botón Media. El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización de la película.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash.

Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.

Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug‐in.

Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.


DW

8 ►

Las

pla

nti

llas

en

dw

8

56

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, elMPEG y el MOV.

Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug‐in.

A la derecha tienes un ejemplo de un archivo de vídeo, para el que se muestran los controles de vídeo. Puedes reproducirlo pulsando sobre los controles.

El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug‐in.

LAS PLANTILLAS EN DW8

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.

La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También pulsando F11.

Una vez abierto el panel hay que seleccionar el botón

, para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón (Si este botón no está activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla).

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.


DW

8 ►

HT

ML

des

de D

ream

wea

ver

57

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

HTML DESDE DREAMWEAVER

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la vista diseño.

En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el código estando dentro de Dreamweaver.

Etiquetas

Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <TITLE> y </TITLE>.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Por ejemplo, un párrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus características predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del párrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.

También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO


DW

8 ►

HT

ML

des

de D

ream

wea

ver

58

dentro del código HTML equivale a la etiqueta <BR>.

También podrás ver la etiqueta <br /> en las páginas que sigan el estándar XHTML. Éste obliga a que todas las etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR>pasa a ser <br /> o <HR> a <hr />.

Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.

Entidades HTML

HTML también dispone de códigos especiales para representar caráceteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >,que podrían malinterpretarse por el inicio de una etiqueta.

Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.

De este modo, < se escribirá como < o <

Usar este método es muy aconsejable, de esta forma los navegadores que estén configurados para visualizar juegos de caracteres que no contengan letras como la ó o la ñ podrán ver el sitio correctamente. En caso contrario estos caracteres se mostrarían de forma extraña.

En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluían en el listado de Dreamweaver y que podrás insertar escribiendo sus entidades en la vista de Código.

Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de nombre de entidad:

Carácter Entidad

con nombre

Entidad numérica

CarácterEntidad

con nombre

Entidad numérica

á á á Á Á Á

é é é É É É

í í í Í Í Í

ó ó ó Ó Ó Ó


DW

8 ►

HT

ML

des

de D

ream

wea

ver

59

ú ú ú Ú Ú Ú

ü ü ü Ü Ü Ü

ñ &ntide; ñ Ñ Ñ Ñ

¿ ¿ ¿ α α α

¡ &iexc; ¡ β β β

– – – © © ©

→ → → ® ® ®

← ← ← € € €

< < < espacio

> > >

& & &

Si escribes más de un espacio en Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto es debido a que en HTML las palabras separadas por más de un espacio se visualizan sapradas de uno.

Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarán tantos espacios como elementos de entidad hayas introducido.

El inspector de código

Recordarás que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseño, vista Código y vista Dividir (Código y Diseño).

Todas estas vistas se aplican directamente sobre la ventana del documento.


DW

8 ►

Otr

os e

lem

ento

s

60

Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de código y puede abrirse a través del menú Ventana. Si la opción Inspector de código no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el Inspector de código pulsando F10.

El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista Código y la vista Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita sólo al espacio del documento.

OTROS ELEMENTOS

Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha.

Marquesinas

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.

También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.

Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:


DW

8 ►

Otr

os e

lem

ento

s

61

<marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee>

Fecha

Dreamweaver permite insertar fácilmente la fecha de última modificación de las páginas.

Cuando se modifica una página en la que se ha insertado este tipo de fecha, se actualizará automáticamente con la fecha del sistema.

Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Pero en el caso de que la página no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación.

Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.

En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo.

Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una regla horizontal no es más que una línea horizontal.

Para insertar una regla hay que dirigirse al menú Insertar, opción HTML, luego la opción Regla horizontal.

El inspector de propiedades para las reglas es el siguiente


DW

8 ►

PU

BL

ICA

R L

AS

PÁ

GIN

AS

EN

IN

TE

RN

ET

.

62

PUBLICAR LAS PÁGINAS EN INTERNET.

Ahora que tenemos nuestra página terminada y registramos el nombre de dominio, llegó el momento de "subirla" a la Red. Y para eso tenemos dos posibilidades: armar el propio servidor o "host", ‐opción que requiere de una inversión considerable, por lo que sólo se aplica en grandes empresas‐ ; la otra consiste en conseguir un "pedacito" de espacio en uno de estos grandes servidores. Las empresas y los sitios que brindan este servicio lo hacen bajo el nombre de "web hosting".

Los usuarios y los pequeños comercios tienen que recurrir a un servicio web hosting. En este sentido la decisión pasará por determinar si se opta por un servicio gratuito o uno pago.

Por una cuestión obvia, los web hosting pagos suelen brindar un servicio mejor que los gratuitos. Aunque ‐como veremos más adelante‐ se pueden obtener, sin invertir un centavo, lugares para alojar páginas Web cuya calidad tiene poco y nada que envidiarle a algunos servicios pagos.

Cuando un usuario contrata los servicios premium de un proveedor de acceso a Internet, además de la conexión recibe casillas de e‐mail y, en muchos casos, un espacio para hospedar una página personal de prestaciones limitadas. Esto constituye para muchos la primera experiencia para publicar contenidos en la Web.

En definitiva, un host gratuito es una opción muy interesante para quienes desean publicar una página de servicios, de su afición, club de fan, hobby, etc. Si la página pertenece a una asociación o empresa de la que se necesita brindar una imagen profesional, seguramente habrá que ir pensando en un host pago (empresas comerciales que se dedican a la venta de espacios en la Red y servicios para tal fin). Estas empresas, entre otras cosas, van a brindar la posibilidad de que la página en cuestión tenga el nombre de dominio (la dirección de que deseamos en el formato elegido), es decir www.nombreelegido.com

Esta quizás es la diferencia más notoria ‐junto con el soporte técnico‐ entre los servicios pagos y los gratuitos: la posibilidad de que el nombre de dominio no sea "ensuciado" por agregados ya que, en mayor o menor medida, los hosts gratuitos hacen resaltar su presencia en la barra de direcciones del navegador.

Te recomiendo usemos para nuestra práctica un hosting gratuito, visita www.miarroba.es y generemos un cuenta, la cual aprenderemos a administrar en nuevo artículo.

Los usuarios y los pequeños comercios tienen que recurrir a un servicio web hosting. En este sentido la decisión pasará por determinar si vamos a optar por un servicio gratuito o uno pago.


DW

8 ►

Pas

os p

ara

crea

r n

ues

tro

pro

pio

sit

io w

eb

63

PASOS PARA CREAR NUESTRO PROPIO SITIO WEB

By L.I. Irving Santamaría Domínguez

| www.irvingsd.co.cc | twiiter@irving_sd |[email protected] |

Breve descripción de los pasos que debemos seguir para crear nuestro sitio web o página web,

desde la idea u objetivo hasta la publicación y mantenimiento…

Muchas veces tenemos la idea de crear un sitio web, o simplemente queremos hacer nuestra

propia página web, y cuando comenzamos nos conseguimos con una gran cantidad de

interrogantes, que al final no sabemos por dónde empezar, con esta guía quiero organizar esos

pasos que debemos seguir para construir nuestro sitio web.

Como pasos principales debemos:

1. Definir el objetivo del sitio. Es decir, antes de tener el nombre de la página, debemos

definir cuál será el objetivo de montar nuestra página web, para ello hay que tener muy en

cuenta lo que vamos a ofrecer, incluso el tipo de personas que visitaran nuestro sitio web

2. Nombre del Dominio. Cumplido el paso 1, tienes que escoger el nombre de nuestro sitio

web, el mismo debe ser medianamente corto, y que le permita al cliente o usuario

recordarlo. Una vez escogido el nombre, debemos proceder a comprarlo, para ello

debemos considerar que nos permitan manejar los DNS del dominio, que se registre a

nuestro nombre y que posea panel de control. Ejemplo de nombres: necesitamos un

nombre de dominio para nuestra empresa que cuyo objetivo es dar soporte técnico de

computación. villagrosptecnico.com (este nombre además de ser muy largo, seguro el

usuario no se recordará) serviciotecnicosb.com (es un nombre corto y permite al usuario

recordar el objetivo del sitio web)

3. Bosquejo del Diseño. Debemos crear un borrador de cómo queremos nuestro sitio web, allí

hay que considerar, opciones del menú, colores, tipo de letra, imágenes, entre otras

características. Al finalizar esta fase se tendrá la idea o borrador de nuestro sitio web.

4. Programación y Diseño. Crear el sitio utilizando un lenguaje de programación o un software

de diseño, tales como: Php, Asp, Dreamweaver, entre otros

5. Adquirir un Hosting. Normalmente nuestras páginas web, deben permanecer guardadas en

un servidor que esté disponible en Internet, para ello hacemos la contratación de un plan

de Hosting, aquí debemos considerar: espacio en disco que ocupa nuestro sitio web, la

aplicación que utilizamos (php, html, asp, entre otros), si manejamos bases de datos, la

cantidad de transferencia, la garantía de que nuestro sitio web estará 100% disponible, que

nos permita tener nuestro panel de control

6. Subir, configurar y Publicar. Este paso sencillamente consiste en copiar todos los archivos

de nuestro sitio web hacia el hosting o servidor que adquirimos, así como configurar la

información de los DNS del dominio. En cuanto a Publicar, no es más que inscribir en los

buscadores nuestro nuevo sitio web.


DW

8 ►

64

7. Mantenimiento. Este último paso, es importante tenerlo en cuenta, ya que muchas

personas cometen el error de tener su sitio web y olvidarse después que lo suben a

internet, el mantenimiento debe hacerse como mínimo mensualmente, ya que así los

visitantes del sitio sabrán que usted está pendiente de actualizar la información que

muestra en la internet

Estos serian los principales pasos que debemos tener en cuenta para crear nuestro sitio web, no

quiere decir que no puedas incluir otros que consideres necesarios, mientras más detalles tengas el

trabajo resultará 100% profesional, dando una buena imagen a tus visitantes.

DIRECCIONES INTERNET DE INTERÉS.

Las siguientes direcciones Internet contienen

guías y manuales donde puede encontrar más

información sobre el lenguaje HTML:

Diversos manuales HTML ‐ http://www.dic.uchile.cl/manual.html Dpto. Informática y Comunicaciones Universidad de Chile WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena Tutorial HTML ‐ http://dns.uncor.edu/info/tutorial.htm Mercedes Doffi [email protected] Universidad Nacional de Córdoba Argentina

BIBLIOGRAFÍA.

Tejedores del Web ‐ http://www.dic.uchile.cl/~manual/ Carlos Castillo Dpto. Informática y Comunicaciones Universidad de Chile Tutorial de HTML ‐ http://www.um.es/~psibm/tutorial/ Juan José López García [ [email protected] ] Dpto. Psicología Básica y Metodología Universidad de Murcia WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena Tutoriales www.Aulaclic.com Dreamwaver.

manual html-dreamwaver [by irvingsd].desbloqueado

Documents