Manual HTML-Dreamwaver (By IrvingSd) .Desbloqueado

Compiled by
L.I. Irving Santamara

Domnguez
www.irvingsd.co.cc

ElLenguajeHtml.______________________________5
Contenido
Dreamweaver8______________________________31
EditarPginasWebDw8______________________32
MiPrimeraPginaEnDreamwaver______________33
ElEntornoDeTrabajoDeDreamwaver___________36
ConfiguracinDeUnSitioLocalEnDw8 __________39
PropiedadesDelDocumentoEnDw8_____________40
LosColoresEnDw8___________________________42
ListasDw8__________________________________43
CaracteresEspecialesEnDw8___________________43
EstilosCssEnDw8____________________________44
HiperenlacesEnDw8__________________________44
ImgenesEnDw8 ____________________________47
TablasEnDw8_______________________________48
MarcosEnDw8 ______________________________49
FormulariosEnDw8 __________________________51
MultimediaEnDw8___________________________54
LasPlantillasEnDw8__________________________56
HtmlDesdeDreamweaver _____________________57
OtrosElementos _____________________________60
PublicarLasPginasEnInternet.________________62
DireccionesInternetDeInters._________________62
Bibliografa._________________________________64
L.I. Irving Santamara Domnguez DISEO DE

SOFTWARE
PARA WEB
HTML - El LENGUAJE HTML.
En este manual nos introduciremos en la

creacin de sitios Web, primero de una
manera manual para la comprensin del
cdigo HTML y posteriormente con un
software de diseo como lo es
D r ea m w a v er .
MiPrimerDocumentoHtml._____________________5
CaractersticasGeneralesDeHtml.._______________6
CuatroNormasFundamentales __________________7
EstructuraDeUnDocumentoHtml._______________9
ComandosBsicosDeHtml______________________9
Enlaces:A.__________________________________17
Imgenes___________________________________21
Tablas______________________________________25
EditoresYConversores ________________________30
INTRODUCCIN
Este manual est pensado para aprender los conceptos bsicos necesarios para construir sus
propias pginas Web. Para quien quiera ampliar sus conocimientos se suministran tambin unas
referencias de consulta a otros sitios del Web.
En su confeccin se ha procurado seguir siempre un criterio eminentemente prctico. Para mejor
asimilar los conceptos tratados, se propone al final de cada apartado un ejemplo prctico.
Primeras herramientas: Para comenzar slo son necesarios dos elementos:
Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los ms
adecuados son los ms sencillos (como por ej., El block de notas de). Si se utilizan
procesadores como el Word, se deben guardar los archivos como 'Slo 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 aadidos 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
Mtodo de trabajo: Con el editor de texto crearemos un archivo con el nombre que queramos (p.
ej. ejemplo1), pero que debe tener necesariamente la extensin .html (o .htm si nuestro sistema
operativo no soporta extensiones de ms de tres letras).
Habr un archivo distinto para cada apartado; conviene crear un directorio especfico en su
ordenador e irlos guardando en l, para poder repasar lo aprendido, aparte de que pueden ser
necesarios para ejecutar otros ejemplos prcticos.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.,
de una forma muy sencilla y visual.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
HTML El LENGUAJE HTML.
Dreamweaver es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.

PARA WEB
PARA WEB
| A C T I V I D A D |Investigaylossiguientestrminosy
escribelasconclusionesalasquehayanllegadoentugrupo.
AqueserefiereelterminoWEB
Diferenciaentrepginawebysitioweb.
DiferenciaentreHTMLyHTTP
Diferenciaentrewebestticaywebdinmica
Diferenciaentrehostingydominio
DelasiguientedireccinescribelaspartesdelaURL:
http:// www. cbtvillagro .edu .mx /Galeria/ Fotos2012 .html
EL LENGUAJE HTML.
EL LENGUAJE HTML.
HTML es un lenguaje que se utiliza para la creacin de pginas en la WWW. Por pgina
entenderemoseldocumentoqueapareceenelnavegador.
HTML se compone de una serie de comandos, que son interpretados por el navegador, o
programaqueutilizamosparanavegarporelWWW.Enltimainstanciaeselnavegadorelque
ejecutatodaslasrdenescontenidasenelcdigoHTML,deformaqueunnavegadorpuedeestar
capacitadoparaunasprestaciones,peronoparaotras.As,podremosespecificarqueunapgina
tenga una imagen de fondo, o un texto parpadeando, pero si nuestro navegador no est
capacitadoparaesasfunciones,nopodremosverlas.
MI PRIMER DOCUMENTO HTML (PRCTICA # 1).

Sigalassiguientesinstruccionesatentamente;ellaslepermitirncrearundocumentoHTMLen
suordenador;estearchivonoservisibleparaotrosusuariosdeInternet.
Lerecomiendoquecreeundirectorioensuordenadorparaalmacenarlaspginaswebquevaya
haciendoalaprender;yquepractiqueuntiempoantesdeponerpginasenInternet.
<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. Grabeestearchivoconelnombre:ejemplo1.html
4. Abraelnavegador.NonecesitaconectarseaInternetparaverlaspginasensucomputador.
PuedetrabajarOffline
PARA WEB
1. Abraeleditordetextos:enWindowsabraelBlockdeNotas
2. Tecleelosiguiente:
5. Elija"Archivo/Abrirpgina"enlabarrademendelnavegador.
6. Seleccioneelarchivoejemplo1.htmlqueacabadecrear.
Las lneas en blanco y las especificaciones del texto se han puesto para mayor claridad, pero no
son necesarias. De hecho, podra estar todo en una sola lnea. Lo importante es el orden correcto
de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Vase en el ejemplo
cmo 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
produciran errores.
Obsrvese adems la falta de los acentos. Se hablar ms adelante sobre el motivo de ello.
UstedhacreadosuprimerdocumentoHTML!.
CARACTERSTICAS 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 trminos para denominar a los elementos que se
estructuraHTML).LaformageneraldeunamarcaesladeuncomandoHTMLencerradoentre
dossignosdemenorymayorcomoacontinuacinsemuestra:
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 smbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa
propiedadaltextoquevieneacontinuacin.
Hay marcas que se aplican a todo el documento HTML, o slo desde el punto en que son
insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del
texto.Enesecaso,elfinaldelaaplicacinseespecificaconlamismamarcaprecedidadelabarra
inclinadahaciaatrs(/).
Lasmarcaspuedencontenerdeformaopcionaluobligatoria,loquesedenominanatributoso
modificadores.Losatributosmatizanelsignificadodelamarca,yqueseexpresandelasiguiente
forma:
<marcaatrib1=valor1atrib2=valor2..............>
Elvalordelosatributosseexpresanencerradosentrecomillas.
PARA WEB
HTML CARACTERSTICAS GENERALES DE HTML..
<marca[atributos]>......................................[</marca>]
En la mayor parte de los navegadores es posible omitir las comillas y colocar directamente el
valor del atributo. Esta prctica. a pesar de estar extendida, no es muy aconsejable ya que no
estnormalizada,ynoestasoportadaporlatotalidaddelosnavegadores.
Algunos atributos slo viene definidos por su nombre (no tienen valor); son los atributos
llamadoscompactos.
Concatenacin de marcas.
Lasmarcassepuedenanidaroencadenarunaacontinuacindeotra,deformaquesepueden
aplicar simultneamente varias propiedades a una misma porcin de documento. As el texto
encerradoenlasmarcas:
<MARCA1><MARCA2>Texto</MARCA2></MARCA1>
quedaafectadotantoporlaspropiedadesdelaMARCA1comoporlosdelaMARCA2.Todaslas
marcassonindependientesentres,porloslassiguienteslneasdecdigoHTML,tieneefectos
idnticos,seancualesseanlasmarcasconcretas:
CUATRO NORMAS FUNDAMENTALES
HTML es simplemente texto

LoprimeroessaberqueundocumentoHTMLesunarchivodetextosimple,luego,sepuede
editarconcualquiereditordetextosencillo,comoelBlockdeNotasdeWindows.
PARA WEB
HTML CUATRO NORMAS FUNDAMENTALES
Apesardequesonexpresionescompletamenteidnticas,esrecomendableseguirelorden
lgicodelaconcatenacin,yaqueestofacilitadeformasustanciallaedicindedocumentos
HTML.Delascuatroopcionesanteriores,lascorrectasseranlaprimeraylatercera.
Igualdad de maysculas y minsculas.

HTMLnodistingueentremaysculasyminsculasenlaespecificacindemarcasysusatributos.
Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en
maysculas.
No importan los tabuladores, ni los saltos de lnea
Los navegadores no toman en cuenta las tabulaciones, los saltos de lnea ni los espacios en
blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener
resultadosuniformesydebuenapresentacindemanerabastantefcil.
La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas
<P>...</P>o<BR>paraevitarquequedetodoeltextoenunasolalnea.
Caracteres especiales
En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del
mecanismodelfuncionamientodeHTML,comosucedeconlossmbolosmayorque(>)ymenor
que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del juego de
caracteresinternacionalesdelalfabeto,comosucedeconlosacentos.
Carcterespecial
Losacentos
TranscripcinHTML
&<vocalaacentuar>acute;
Comentario
Enlaactualidadlamayoradelos
browserslossoportan
Smbolomenorque(<) &lt:
Smbolomayorque(>) >
Laee
ñ
Enlaactualidadlamayoradelos
browserslasoportan
Espaciosenblanco
(nonbreakingspace) HTMLsloreconoceunespacioen
blancoentrepalabras
Demaneramsgeneral,pararepresentarsmbolosreservadososmbolosparticulares,sepuede
utilizarelcdigoASCIIdelsmbolomediantelasintaxissiguiente:
&#cdigo_ASCII;
PARA WEB
HTML CUATRO NORMAS FUNDAMENTALES
Seaporlosmotivosquefuere,elcasoesqueexistenciertossmbolosquenopuedenescribirse
directamente, sino que deben sustituirse por una cadena de caracteres que el navegador
interpretardeformacorrecta.Estascadenasdecaracterescomienzansiempreporelsmbolo
(&)seguidodeunacombinacindecaracteresalfabticosquetienenunsignificadoespecialen
HTML.Enlasiguientetablasemuestracmoescribiralgunosdeestoscaracteres:
ESTRUCTURA DE UN DOCUMENTO HTML.

UndocumentoHTML,noesmsqueeltextodefinidoentrelasmarcas:
<HTML>
.....................
</HTML>
UndocumentoHTMLsiempresecomponedelassiguientes2partes:
Enlaprcticaalgunosnavegadoresnonecesitanlasetiquetasdecomienzoycierrede<HTML>,
<HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo, cuando diseemos un
pgina Web debemos tener en cuenta a la mayora de usuarios posibles, por lo que es muy
recomendableincluirestasmarcas.
COMANDOS BSICOS DE HTML

AcontinuacinsedescribenlasmarcasbsicasdeHTMLquesepuedenincluirenelcuerpodeun
documentoHTML.
Definicin de prrafos: P
La marca<P> sirve para separar prrafos en HTML. Adems de introducir un retorno de carro,
fuerza un segundo retorno de carro para dejar una lnea en blanco entre un prrafo y el
siguiente.Deestamaneralosprrafosquedanmsespaciadosyeltextosevuelvemslegible
Enestamarcalaetiquetadefinesopcional.
PARA WEB
HTML ESTRUCTURA DE UN DOCUMENTO HTML.
<HTML>
<HEAD>Cabeceradeldocumento
</HEAD>
<BODY>Contenidodeldocumento
</BODY>
</HTML>
Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la
cabecera hay informacin del documento, que no se ve en la pantalla principal, y que precisa
las caractersticas del documento, principalmente el ttulo del documento.
El ttulo del documento se declara entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser
breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra
pgina a su bookmark (o agenda de direcciones favoritas).
Cuerpo:seiniciamedianteelcomando<BODY>yseterminaconelcomando</BODY>.Este
comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye
cualquiercarcterimprimible.
Por defecto, el prrafo de un documento HTML est justificado a la izquierda. Pero podemos
modificarlaalineacinhorizontaldeunprrafomedianteelatributoALIGNdelamarca<P>,que
puedetomarlosvaloressiguientes.
LEFT:elprrafoesjustificadoalaizquierda.Valorpordefecto.
CENTER:elprrafoescentrado.
RIGHT:elprrafoesjustificadoaladerecha.
Ruptura de lneas: BR.
Lamarca<BR>introduceunretornodecarro(osaltodelnea)enelpuntodeldocumentoenel
queescolocada.Esequivalentealpuntoyapartedeuntextonormal.
Estamarcaesvacademaneraquenonecesitadelaetiquetadefindemarca.
Titulos de encabezamiento
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamao, que se utilizan
para marcar los ttulos o resaltes en las pginas. Se activan con el comando <Hn> y se desactivan
con </Hn>, donde n es un nmero de 1 a 6. siendo el nmero indicativo del tamao. El tamao
mayor es el correspondiente al nmero 1.
<H1>Niveldeencabezado1</H1>
Losttulosdeencabezadorequierenlamarcadefin,ysiempreprovocanunsaltodelnea,
aunquenoseleindique.
Dando estilo al texto
Lasmarcasdeestilodetextoespecificaneltipodeletra(negrita,cursiva,..),tamao,colorque
sedeseaqueaparezcaeltexto.
Tipos de letras
Algunasdelasmarcasquepermitenespecificarlatipografadeloscaracteressonlassiguientes:
PARA WEB
HTML COMANDOS BSICOS DE HTML
Puede experimentar en el ejemplo anterior, cambiando el nmero para comprobar el efecto que se
logra.
10
<B>Negrita(Bold)</B>
<I>Cursiva(Italic)</I>
<BLINK>Parpadeante(Blink)</BLINK>
<TT>Tamanofijo(TypeWriter)</TT>
<EM>nfasis(Emphasis)</EM>
<STRONG>Grannfasis(Strong)</STRONG>
<U>Subrayado(Underline)</U>
Todasestasmarcasrequierenetiquetasdecomienzoyfin,ysepuedenanidar.
Tamao del texto.
ParamodificareltamaoseutilizaelatributoSIZEdelamarca<FONT>,delamanerasiguiente:
<FONTSIZE="tamao">Texto</FONT>
Elcomando<FONT>requierelaetiquetadecierre.
HTMLdefinesietetamaosdeletradistintos,siendoeltamao3elqueseadoptapordefecto.
Sinembargo,lamayoradelosnavegadorespermitenestablecerculeslacorrespondenciareal
deltamao3.As,sepuedehacerqueeltamao3correspondaaunafuenteArialde16,oauna
Timesde8.
Existendosformasdeestablecereltamaodeuntrozodetexto.
Tamaodetextoabsoluto.
<FONTSIZE=argumento>Texto</FONT>
dondeargumentoesunnmeroentre1y7
Tamaodeletrarelativos.
<FONTSIZE=argumento>Texto</FONT>
dondeargumentoesunacadenadecaracteresquenosindica,conunsigno+,
elnmerodevecesqueesafuentevasermayoromenorqueeltamaodela
fuentepordefecto
Elusodetamaosrelativosnospermiteolvidarnosdecualeseltamaodeletraqueseest
utilizandoenelmomentoactual,porloque,engeneral,serpreferibleautilizartamaosde
letraabsolutos.
Siqueremosmodificareltamaodetodoeltextodeldocumento,unaformadehacerlosera
englobartodoelcuerpodeldocumentoenunaetiquetaconeltamaodeletraquequeremos
utilizar.Asescribiremosalgoparecidoaloquesigue:
PARA WEB
11
<HTML>
<HEAD>
...........
</HEAD>
<BODY><FONTSIZE=4>
........
(contenidodeldocumento)
.......
</FONT></BODY>
</HTML>
Sinembargo,hayotraformadehacerlomseleganteylegible,utilizandolasiguienteetiqueta:
<BASEFONTSIZE="tamao">
Esteetiquetapuedesituarseencualquierlugardeldocumento.Sinembargo,comosetratade
una etiqueta que afecta a todo el documento, para mantener la legibilidad lo ms lgico es
colocarloenlacabecera.
Sifijamosuntamaodeletrabsicodistintodel3,debemostenerencuentaqueesposibleque
alguno de los tamaos relativos no pueda llevarse a cabo, puesto que se sale de los lmites
especificados.
Colores del texto.

Paradarcolorauntextoseutilizaelcomandosiguiente:
EnunprincipiolaformadeespecificaruncolorenHTML,eramedianteelformatohexadecimal.
Consistaentresnmeroshexadecimales(nmerosexpresadosenbase16)dedosdgitoscada
uno.Conunnmerohexadecimaldedosdgitospodemosexpresarhasta256valoresdistintos.El
primer nmero 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).Estaformadedefinirloscolorescomocombinacindeloscoloresrojo,verde,yazulse
denominaRGB(redgreenblue).
Afortunadamente, la mayora de los navegadores, al menos en sus ltimas versiones, admiten
otra forma de insertar colores. En lugar de expresarlos, en formato hexadecimal, se expresan
comocadenadecaracteres.Estacadenaeselnombredelcoloreningls.
PARA WEB
<FONTCOLOR="color">Texto</FONT>
12
Paradarcoloratodoeltextodeldocumentopodemoshacerlocon:
<BODYTEXT=blue>
Paraespecificarelcolordefondodeldocumentodeberemosutilizar:
<BODYBGCOLOR=blue>
Listas
LaslistasenHTMLproporcionanunaformadeclasificarlainformacin,yhacerquestaseams
inteligibleporpartedelvisitantedelaspginas.
Listas ordenadas: OL.
Tambin llamadas listas numeradas son aquellas en las que cada elemento tiene delante un
nmeroqueindicaelordendelelementodentrodelconjuntodelalista.
La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de
comienzoyfindeestasmarcas.
Cadaelementodelalistaordenadaseidentificaescribindolodentrodelamarca<LI>....</LI>.
Laetiquetadefinpuedeseromitida.
Con la marca LI no es necesario introducir un retorno de carro detrs de cada elemento de la
lista.
Esposibleespecificareltipodenumeracinquesedar(nmerosarbigos,nmerosromanos,
letras,etc.),pordefectosesiguelanumeracinrabe.
Laslistasnumeradaspuedenseranidadasunadentrodeotra.
Tambinllamadaslistasnonumeradassonlistasenlasquenoesnecesarionumerardealguna
maneraloselementosquelacomponen,sinoquecadaelementotienedelanteunsmbolo(un
punto,uncuadrado,etc..).
La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de
comienzoyfindeestamarcasonobligatorias.
Cadaelementodelalistaseidentificamediantelamarca<LI>.Laetiquetadefinparalamarca
<LI>sepuedeomitir
Tambinesposibleenlaslistasdesordenadasespecificarelsmboloquevaaaparecerdelantede
cadaelementodelalista.
Laslistasdesordenadastambinpuedenseranidadasunadentrodeotra.
PARA WEB
Listas desordenadas: UL.
13
Listas de definicin: DL.

Adiferenciadelosdostiposanterioresdelistas,laslistasdedefinicin,seutilizanparapresentar
lainformacinsinmarcas,ninmeros,sinoqueutilizalossangradosdelosprrafos.
Laslistasdedefinicinestnconstituidasportrminosysusubsiguientedefinicin.
Laformadeimplementarlaslistasdedefinicinesconlamarca<DL>delasiguienteforma:
<DL>
<DT>Nombredeltermino
<DD>Definicindeltrmino
</DL>
Cadatrminodelalistadedefinicinseindicaconlamarca<DT>ynosangrar,mientrasquela
descripcindeltrminoseindicaconlamarca<DD>ysangrarhacialaderechapararesaltarla
deltrmino.
Antes y despus de la descripcin de cada palabra clave, las listas de definicin incorporan un
retornodecarro,
Laslistasdedefinicintambinpuedenanidarse.
Texto preformateado: PRE.
Sinembargo,esposiblequeenalgunaocasinqueramosqueeltextoaparezcaenelnavegador
tal y como lo hemos introducido, respetando los retornos de carro e incluso los espacios que
podamoshaberdejadoentrecaracteres.Paraellopodemosutilizarlamarca<PRE>yenglobaren
ellatodoeltextodeldocumento.
La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo
original,ylaletraaparececomotipodeletradeespacionoproporcional(Eltipodeletrausado
por el texto preformateado es el mismo que el de <TT> ... </TT>), y no con el tipo de letra
habitualdelnavegador.Estamarcapermitemostrareltextopreformateadotalcual.
Adems,eneltextopreformateadonoseinterpretanloscaracteresespecialesHTML:<,>y&.
Estamarcarequieredelasetiquetasdecomienzoyfin.
PARA WEB
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un
comportamientoarbitrario,sinoqueeslaformaquetenemosdeque,independientementedela
ventanadelnavegador,nuestroprrafoquedeconvenientementejustificado
14
Centrando texto.
Paracentrarunapartedeldocumento,sedelimitaloquesedeseacentrarmedianteelcomando
<CENTER>...</CENTER>.
Lneas horizontales.
La marca <HR> permite trazar una lneas horizontales para separar distintas secciones de una
pginaHTML
Por defecto, las lneas 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
sensacinderelieve.
Estamarcaslorequierelaetiquetadecomienzo.
Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la lnea horizontal
(ancho,longitud,...).
Comentarios no visibles en la pantalla

A veces es muy til escribir comentarios en el documento HTML sobre el cdigo 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 smbolos: 
Ejemplo:

PARA WEB
15
Ejemploprcticon2.FormatoenHTML
En el editor de textos copiamos:
<BODY>
<CENTER><H1>Comandos básicos</H1></CENTER>

<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 definicin</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.

PARA WEB
<HTML>
<HEAD>
<TITLE>Ejemplo 2 - Comandos básicos</TITLE>
</HEAD>
16
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 pginas un mecanismo muy sencillo para moverse entre
distintos documentos, permitindole moverse en aquellos aspectos que considere ms importantes, mientras
que desde el punto de vista del que crea las pginas permite distribuir de forma transparente al visitante el
lugar o lugares en los que se van a almacenar los distintos documentos.
Paradefinirenlaceshipertextoseutilizalamarca<A>delamanerasiguiente:
<AHREF=direccion>Textodelenlace</A>
donde:
direccion:eseldestinodelenlace.
texto del enlace: es el texto indicativo del enlace que aparece en la pantalla
normalmenteconcolorespecialysubrayado.
<A>requieredelamarcadefin.
Vamos a distinguir tres tipos de enlaces:
1. Enlaces a otras zonas de la misma pgina, 2. Enlaces a otras pginas., 3. Enlaces a otras zonas
de otras pginas.
Enlaces a otras zonas de la misma pgina
A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto
desde una posicin a otra determinada.
Asesposiblehacerenlacesquellevenalusuariodeunapartedeldocumentoaotradentrodel
mismodocumentoconsolohacerclick.Aestetipodeenlaceslosllamaremosenlaceslocales.
Estosenlacesconstandedosobjetos:
Elenlace:
Correspondealazonaenlacualelusuarioharclick,paraviajaraotrapartedel
documento.Estazonaaparecesubrayadaeneldocumento.Unenlacelocalsecreadelimitando
Elnombreenlazadooreferenciado
Correspondealazonadeldocumentoalacualelusuariollegaralhacerclickenla
referenciacorrespondiente.Unnombrelocalsecreadelimitandolazonaconelcomando
<ANAME="nombre">...</A>,enquenombreeslaetiquetaqueasignamosaestazona.
PARA WEB
HTML ENLACES: A.
lazonaconelcomando<Ahref="#nombre">...</A>,enquenombreeslaetiquetaqueseest
referenciando.
17
Ejemploprcticon3deenlaceslocales
<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">Seccin uno</A>
<LI><A HREF="#dos">Seccin dos</A>
<LI><A HREF="#tres">Seccin tres</A>
<LI><A HREF="#cuatro">Seccin cuatro</A>
<LI><A HREF="#cinco">Seccin cinco</A>
<LI><A HREF="#seis">Seccin seis</A>
<LI><A HREF="#siete">Seccin siete</A>
<LI><A HREF="#ocho">Seccin ocho</A>
</UL>
<H3><A NAME="uno">Seccin 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">Seccin dos</A></H3>
<H3><A NAME="tres">Seccin tres</A></H3>
<H3><A NAME="cuatro">Seccin cuatro</A></H3>
<H3><A NAME="cinco">Seccin cinco</A></H3>
<H3><A NAME="seis">Seccin seis</A></H3>
<H3><A NAME="siete">Seccin siete</A></H3>
</BODY>
</HTML>

Comovemos,lasreferenciaslocalessonmuytilesparacrearndicesalcomienzodel
documento.
PARA WEB
HTML ENLACES: A.
<H3><A NAME="ocho">Seccin ocho</A></H3>

18
Enlaces a otras pginas

Paraenlazaraotrodocumento,esnecesarioconocerlaubicacinexactadeldocumentoquese
referenciar.Unaubicacin,puedeserreferenciadaenformarelativaoabsoluta
Ubicacinrelativa:
Seindicaespecificandolaposicindeldocumentoenlaestructuradesubdirectoriosa
partirdelaubicacindeldocumentoactual.Slosepuedeusarparadocumentos
ubicadosenelmismoordenador.
Unareferenciarelativaaotrodocumentosehaceusandoelcomando:
<AHREF="ubicacin">...</A>
Ubicacinabsoluta:
SeindicaespecificandoelURL(uniformresurcelocator)delapginaqueseest
referenciando.
Los URL son una manera universal de especificar una direccin. La forma ms bsica de
referenciar un hypertexto es usar el comando:
<A href="http://ordenador/directorio/archivo"> ...
Elordenadorindicalamquinadondeseencuentraeldocumento.Eldirectorioyarchivo
indicansuposicindentrodeeseordenador.LosURLtienenmuchasformasdistintas
parareferenciardistintosobjetos.
Ejemploprcticon4
<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
HTML ENLACES: A.
href="ejemplo1.html">ejemplo nmero 1</A>. Tambin a un archivo

localizado en otro directorio, por ejemplo, esta
<A HREF="../guiahtml.html">guia HTML</a></P>
<H2>Referencias absolutas</H2>
PARA WEB
19
<H3>Algunos servicios WWW en Espaa</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. Tambin 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 msica se encuentra el servidor oficial de la <A
HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de
informacin est <A HREF="http://www.yahoo.com/">Yahoo!</A>.
</BODY>
</HTML>
Enlaces a una zona de otra pgina

Paraestetipodeenlacesseutilizaunamezcladelasdosformasanteriores.SeindicaelURLdela
pginaareferenciar,luegounsigno#yluegoelnombredelazonaareferenciar.
Ejemploprcticon5
<HTML>
<HEAD> <TITLE>Ejemplo 5- Enlaces a zonas de otras pginas</TITLE> </HEAD>
HTML ENLACES: A.
<BODY>
<H1>Enlaces a zonas de otras pginas</H1>
<P>Enlazamos a la
<A HREF="ejemplo3.html#uno">la
seccion 1 del ejemplo 3</A>.</P>
PARA WEB
20
<P>Enlazamos a la
<A HREF="ejemplo3.html#cinco">la
sección 5 del ejemplo 3</A>.</P>
</BODY>
</HTML>
IMGENES
Lasimgenessonunelementoesencialparadisearpginasatractivas.Noobstante,unexcesivo
nmero de imgenes en una pgina pueden hacer ralentizar el proceso de visualizacin (las
imgenes son las partes de las pginas que ms espacio ocupan, por lo que su transferencia
requieremstiempoqueladeltexto).Esimportanteconseguiruncompromisoentreunapgina
atractiva(loquellevaincluirgrficos),yunapginaquepuedacargarseenuntiemporazonable
Principales formatos grficos en Internet.
Existen una gran cantidad de formatos grficos en el mundo de los ordenadores, cada uno de
ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet,
solamentedebemostenerencuentadosformatosmuyespecficos:elGIFyelJPEG.Sueleccin
no es en absoluto un capricho, adems de la alta resolucin que consiguen, se trata como
veremos,dedosformatosquecomprimeneltamaodelasimgenes,porloquestaspueden
transmitirsemsrpidamenteporInternet.
Paracrearymanipularimgeneshayqueutilizaruneditordeimgenes,entrelosmsconocidos
seencuentran:PaintShopPro,GifConstructionSet,yGraphicWorkshop.
Las siglas GIF provienen del ingls Graphics Interchange Format o formato de intercambio de
grficos. Est formato fue desarrollado por CompuServe para proporcionar un mecanismo de
transmisin de archivos de imgenes mediante lneas telefnicas. Este mecanismo consiste en
comprimirlasimgenesparaunatransmisinmsrpidaenunmediodebajacapacidadcomo
sonloshilostelefnicos.
LasimgenesenformatoGIFestnlimitadasa256coloressimultneos.
PARA WEB
HTML IMGENES
Formato GIF.
21
UnapropiedadinteresantedelformatoGIFesladepoderseleccionaruncolortransparente.
As, cuando la imagen en cuestin es mostrada en un navegador, la zona de la imagen con el
colortransparentetomaelcolordelfondodeldocumento.
OtrapropiedadinteresantedelformatoGIF,eslapodercreargrficosanimados,elformatode
estetipodeimgenesseledenominaGIF89.
Losarchivosdeimgenesenesteformatotienenasociadoslaextensin.gif.
Formato JPEG.
JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos Fotogrficos
Reunidos).AligualqueelformatoGIF,comprimelasimgenesparaunatransmisinmsrpida,
aunquedifiereenelalgoritmodecompresin.
MientrasqueconelformatoGIFlacomprensindeunarchivodeimgenesvienedeterminada,
JPEG nos permite especificar la relacin de compresin deseada, por lo que podemos variar el
tamao del archivo. Naturalmente, a mayor relacin de compresin, menor tamao y peor
calidadenlaimagenfinal.Disminuyendolacompresinobtenemosimgenesdemayorcalidad
perotambindemayortamao.
Nodebemosobsesionarnosconlacalidaddelasimgenes.HayquetenerpresentequeInternet
esenocasionesunmediodetransmisinbastantelento,porloqueavecesespreferibleperder
algodecalidadenlasimgenesantesdeaburriralvisitanteconnuestrosdocumentos.
Losarchivosdeimgenesenesteformatotienenasociadolaextensin.jpg.
Inclusin de imgenes
LaetiquetaqueseutilizaparalainclusindeimgenesenunapginaWebeslasiguiente:
<IMGSRC=imagen.jpg></IMG>
dondeimagen.jpgesunarchivodeimagen
Tamao de las imgenes.
Paramodificareltamaodelasimgenesseutilizanlossiguientesmodificadoresenlaetiqueta
<IMG>:
WIDTH:especificalaanchuraenpixelsdelaimagen.
HEIGTH:especificaelnmerodepixelsquetendrdealtolaimagen.
PARA WEB
HTML IMGENES
Sinoespecificamosnadams,lasimgenesaparecernenelnavegadorconeltamaoque
tienenoriginalmente.
22
Escalado de imgenes.
ConelusodeloamodificadoresHEIGHTyWIDTHpodemosampliar,yreducirlasimgenessin
deformarlas, es decir, escalarlas. Una maneracmoda de hacerlo es solamenteespecificar una
delasdosdimensiones,seasumequelareduccinolaampliacinesproporcionalalaotra.
Bordes de la imagen.
MedianteelmodificadorBORDERsepuedeaadirbordesanuestrasimgenes.
Alineacin de texto con las imgenes.
La alineacin del texto con las imgenes se realiza mediante el modificador ALIGN. Los valores
que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE,
ABSMIDDLE,BOTTOM,LEFT,yRIGTH.
Ademspodemosespecificarladistanciaquequeremosestablecerentreelgrficoyeltexto.Si
este parmetro no se establece, el texto es situado justo a continuacin de la imagen. Para
introducir espacios horizontales y verticales a continuacin de la imagen se utilizan los
modificadoresVSPACEyHSPACE.
Imgenes con texto alternativo.
Losnavegadorestienenlaopcindenomostrarlasimgenes,enunintentodeacelerarelacceso
a las pginas. Muchas veces, las imgenes incluidas en una pgina son fundamentales para
comprenderlainformacinqueseofrece.Porejemplo,una
pgina destinada a alumnos universitarios de asignaturas de estadstica o matemticas puede
contenerimgenesdefrmulasmatemticas.Paraestoscasossepuedeaadiralaimagenun
textoALTernativo,quedunaideadelcontenidodelaimagen.Paraaadiruntextoalternativo,
seutilizalaordencomosemuestraacontinuacin:
<IMGSRC="nombre_imagen"ALT="Texto_alternativo">
Parautilizarunaimagencomoenlaceaotrapartedelapginaoaotrapgina,simplementehay
queintroducirlasdentrodelaetiqueta<AHREF>delasiguientemanera:
<AHREF=enlace><IMGSRC=imagen></A>
PARA WEB
HTML IMGENES
Uso de imgenes como enlaces.
23
Imgenes como fondo de un documento.

UnefectomuyutilizadoeselusodeimgenescomofondodeundocumentoHTML.Lamanera
dehacerloesconelatributoBACKGROUNDdelamarca<BODY>.
Laimagendefondoengeneralsermspequeaqueelreadedocumentodelnavegador.Lo
quehaceentonceselnavegadoresrepetir,partiendodelaesquinasuperiorizquierda,laimagen
quehemoselegidocomofondodeldocumento.
Alahoradeelegirlaimagendefondo,esprecisotenerencuentaqueeltextodeldocumento
debeserlegibleporencimadelaimagen,porloquehayqueevitarcolocarimgenesconcolores
demasiadofuertes.
Mapas sensitivos.
Losmapassensitivosomapasdeimgenessonuntipodeterminadodeenlacemediantegrficos.
Constituyen una herramienta de gran potencia, aunque son algo complicados de construir y
mantener.
Losmapassensitivosestncompuestosdedoselementosfundamentales:laimagendelmapay
losenlacesdecadazonadelmapa.
Laimagendelmapaeslaimagenquevamosadividirenzonasdistintas.Pulsandoencadaunade
esaszonasiramosaunenlacedistinto.
Losmapassensitivosnoseexplicanenestagua.Puedeencontrarinformacinmsinformacin
sobrelosmapassensitivosenlasreferenciasqueseincluyenenelapartado"DireccionesInternet
deinters".
Ejemploprcticon6
<HTML>
<HEAD> <TITLE>Ejemplo 6 - Imagenes </TITLE> </HEAD>
<BODY BACKGROUND="nubes.jpg" TEXT="#AA0000">
<CENTER>
HTML IMGENES
<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.
PARA WEB
24
<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
Unatablaesunamaneramuycompactayclarademostrarlainformacin.UnatablaenHTMLse
entiendecomounconjuntodefilas(fila=horizontal),apiladasunasobreotra.Cadafilacontienea
suvezunconjuntodeceldas,puestasunaalladodelaotra.
Unatablasedeclarausandoelcomando<TABLE>...</TABLE>.Dentrodelatabla,seusa<TR>..
</TR>paraindicarunafilaydentrodeunafila,<TD>...</TD>paradelimitarelcontenidodeuna
celda.Elelementodecierredefilaydeceldaesoptativo.
Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir
celdas,especificarlaalineacindelcontenidodelacelda,ymuchoms.
Paraentendermejorelcomando<TABLE>...</TABLE>,estdisponibleunamuyampliagamade
ejemplos.
PARA WEB
HTML TABLAS
Eltextoincluidodentrodecadaceldapuedeserformateadoconcualquieradelasetiquetavistas
anteriormente
25
Ejemplodetabla
Aqusemuestraunatablamuysimple:
<TABLE>
<TR><TD>CeldaA1</TD><TD>CeldaB1</TD><TD>CeldaC1</TD></TR>
</TABLE>
Ttulo de la tabla.
Esconvenientequelastablastenganunttuloquelasidentifiqueyaclaresucontenido.Aunque
esettulopuedesercontenidocolocandotextoformateadoantesdelatabla,HTMLdisponedela
etiqueta<CAPTION>paradarlenombrealatabla,delasiguienteforma:
<TABLE>
<CAPTION>Nombredelatabla</CAPTION>
.
</TABLE>
Estaetiquetatienelaventajaqueeltextoformateadosecolocaautomticamenteenelcentro
delaanchuradelatabla.
Bordes de la tabla.
ParacolocarbordesaunatablaenHTMLseutilizaelmodificadorBORDERdentrodelaetiqueta
<TABLE>.Lasintaxises:
<TABLEBORDER="anchura">
.
</TABLE>
dondeanchuraindicalaanchuraenpixelsdelbordeexteriordelatabla.
ElefectodesombreadodelbordeexteriorseproducecuandoelmodificadorBORDERtomaun
valorsuperiorauno.Siqueremosqueelbordeexteriordelatablaseaigualquelosbordes
interiores,debemoshacerBORDER=1.
PARA WEB
HTML TABLAS
ElmodificadorBORDERcolocabordesexternoseinternosenlatabla,perolaanchuraquese
especificasoloafectaalosbordesexternos.
26
Cabeceras de filas y de columnas.

Lainclusindecabecerasencadafilaycolumnaayudaacomprenderelcontenidodelatabla.
Nohayningunadificultadparahacerestoconlasetiquetasquehemosvisto.Sinembargo,existe
unaformaalternativadeindicarlacabeceradeunafilaocolumnamediantelaetiqueta<TH>.La
desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado
comoeldelasotrasceldas.
Tamao de la tabla.
Por defecto el tamao de la tabla viene dado por el texto o los grficos que contiene. Sin
embargo,esposiblequeenocasionesqueramoscambiarlaanchuradenuestratabla.
LaformadeestablecerunaanchurafijaenunatablaesutilizarelmodificadorWIDTHdentrode
laetiqueta<TABLE>.Lasintaxises:
<TABLEWIDTH="anchura"></TABLE>
Aquanchurapuedeserunnmeroqueespecifiqueenpixelslaanchuraabsolutadelatabla,o
bien un porcentaje que indique la anchura de la tabla en relacin a la anchura del rea del
documentodelnavegador.
A pesar deque podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una
anchuramayor,latablatomarlaanchuramnimaparaqueeltextodelasceldaspuedaverse
ntegramente.
Justificacin de la tabla.
Pordefecto,nuestratablaquedarjustificadaalaizquierda.Laformadecentrarlaesmediantela
etiqueta<CENTER>.
Espacio dentro de las celdas.
CELLPADDING:estableceladistanciamnimaenpixelsentrelosbordesdecadacelday
eltextoquevaencerradoenellas.Suvalorpordefectoes1.
CELLSPACING:establecelaanchuraenpixelsdelosbordesdecadacelda.
PARA WEB
HTML TABLAS
Esposiblequequeramosquenuestrotextonoquedeapretadodentrodelasceldas,sinoque
existamsespacioentrelostextosdelasceldascontiguasdeformaquepuedaleersemejor.Esto
puedehacersemediantelosdossiguientesmodificadores:
27
Forma de las celdas individuales.

Justificacin del texto de las celdas.
HTMLpermitejustificarhorizontalyverticalmenteeltextodentrodecadacelda.Paraello
implementalosmodificadoresALIGNyVALIGNdentrodelaetiqueta<TD>.Laformadehacerlo
es:
<TABLE>
<TR>
<TDALIGN=horizontalVALIGN=vertical>
..
</TD>
</TR>
.
</TABLE>
donde:
horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto
valeLEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE.
PordefectovaleCENTER.
Siqueremosqueunadeterminadajustificacinhorizontaloverticalafecteatodaslasceldasde
unafila,podemoshacerloincluyendoelmodificadorALIGNoVALIGNdentrodelaetiqueta<TR>.
Celdas de diferentes tamaos.
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamao. Sin
embargo, es posible establecer el tamaos de una determinada celda mediante dos
modificadoresdelaetiqueta<TD>,quesonWIDTHyHEIGHT:
WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar
comovalorabsolutoobiencomorelativoenformadeporcentajedelaanchuradela
tabla.
HEIGHT:establecelaalturadeunaceldaindividual.
No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La nica
formadehacerloesponiendoencadaceldadelafilalosvalorescorrespondientesdeWIDTHy
HEIGHT.
PARA WEB
HTML TABLAS
28
Celdas irregulares.
Podemosdesearqueunadenuestrasceldasocupevariasfilasy/ocolumnas.Laformadehacerlo
esintroducirlosmodificadoresCOLSPANyROWSPANenlaetiqueta<TD>:
COLSPAN=especificalaalturadeunaceldaenconcretaenfuncindelaalturadelas
celdasadyacentes.Seespecificaennmerodeceldasadyacentes.
ROWSPAN: especifica la anchura de una concreta en funcin del celdas que estn
debajo.Seespecificaennmerodeceldasdedebajo.
Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la
etiqueta<TD>.Comoformatodecoloresseaceptaelhexadecimalounacadenadecaracteres.
Texto en una solo lnea.
Si hemos indicado la anchura de una celda y sta es menor que el texto incluido en ella, y
queremosqueeltextonoocupemslneas,sinoqueseamplelaanchuradelacelda,debemos
aadirelmodificadorNOWRAPdentrodelaetiqueta<TD>.
Ejemploprcticon7
<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>
HTML TABLAS
</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>
PARA WEB
29
</TR>
</TABLE>
</BODY>
</HTML>
EDITORES Y CONVERSORES
Enelpresenteapartadoseproveedealgunoscomentariosyreflexionesacercadelusode
herramientasautomatizadasparalageneracindepginasWeb:editoresyconversores.
Editores
Seguramenteustedhavistooconoceprogramasquepuedenasistiraunapersonaenlacreacin
depginasWeb,yquizssehapreguntado:usouneditoroaprendoHTML?
Larespuestaqueyoledaraeslamismaquesiustedmepreguntarasiesmejorsaberaritmtica
oocuparunacalculadora:ambascosasnosecontraponenentres.
Poca flexibilidad, y en algunas ocasiones el cdigo que generan en general es difcil de

editaromantener.
Elconjuntodecomandosqueincorporapuedeserlimitado,encasodequeseauneditor
producidoporalgunaempresaquehaganavegadores,opuedeestarobsoleto.
El HTML que generan est fuertemente orientado al formato fsico, ms que a la
estructura,conlocualsepierdeuniversalidadeneldocumento.
Esrecomendablecomenzarporlobsico,procurandoaprenderHTMLbien,creandodocumentos
con editores de texto plano. Despus si se desea se puede ocupar una combinacin editor de
textoplanomseditorHTMLparacreardocumentos,afindeexplotaralmximolascapacidades
deambossistemas.
PARA WEB
HTML EDITORES Y CONVERSORES
UneditorHTMLesunagranayudaaldiseadorWeb:brindalaposibilidaddedisponeryverla
pginamientrassecrea,ydeobservarinmediatamentecmoaparecerndistribuidosloscolores
yloselementosdentrodeldocumento,esunaayudapararecordarlasmarcasysusatributos,sin
embargo;puederesultarinadecuadoporlosiguiente:
30
LoseditoresHTMLseclasificanendostipos:
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
disposicinenpantalladeloselementos.
NoWysiwyg:ellosusualmenteinvocanunaaplicacinexterna(unbrowser)paramostrarlo
quesevacreando.SonmuytilespararecordarloscomandosHTMLysusatributos.
Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el cdigo HTML y otro
con el resultado final.
Porejemplo,unodeloseditoresHTMLWysiwygmscompletoseselFrontPage98deMicrosoft
(http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, tambin permite trabajar en
modocomando.
Conversores
Lasherramientasdeconversinpermitentransformarundocumentoescritoenotroformatoa
undocumentoHTML.
ElcdigoHTMLquegeneranescasiimposibledeleer,debidoaquehaymuchasdistincionesque
existenenlenguajesdeformateodetextoquenoexistenenHTML,ydebensersimuladas,con
algngradodetruculencia.
Cundousarlos?cuandonohayotraalternativa,porqueesinviableoyasehizoungrantrabajo
previoenotrosistema.
Cmo usarlos? la idea bsica es simplificar al mximo el documento (eliminar las sangras,
uniformar los tamaos de letra, etc.) para luego pasar el conversor, generando un documento
HTML.
Porejemplo,elpaqueteofimticoOficce97(Word,Excel,PowerPoint,...)deMicrosoftincorpora
un conversor de documentos en formato Word a HTML. Tambin el editor FrontPage 98,
anteriormentemencionado,incorporaunconversordedistintotiposdeformatodedocumentos
aHTML.
DREAMWEAVER 8
DREAMWEAVER 8
PARA WEB
HTML Dreamweaver 8
Finalmente conviene revisar la salida usando un editor de texto, revisando que el cdigo
obtenidoseasintcticamentecorrecto,ydejandoeldocumentolosuficientementeordenadoy
legiblecomoparaqueseafcildemodificaralmomentoderealizarfuturasactualizaciones.
31
Dreamweaver8esunsoftwarefcildeusarquepermitecrearpginaswebprofesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y
funcionalidadalaspginas,sinlanecesidaddeprogramarmanualmenteelcdigoHTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript,
etc.,deunaformamuysencillayvisual.
AdemsincluyeunsoftwaredeclienteFTPcompleto,permitiendoentreotrascosastrabajarcon
mapasvisualesdelossitiosweb,actualizandoelsitiowebenelservidorsinsalirdelprograma.
ParaseguirestecursotepuedesdescargarlaversingratuitadeDreamweaverdesdelapginade
Adobe,laversincaducaalcabode30das,peroseguroqueteanimasacomprarlaversinde
pagodeesteestupendoprograma.
EDITAR PGINAS WEB DW8

Cualquier editor de texto permite crear pginas
web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e
incluir como contenido del documento el cdigo
HTMLdeseado.PuedeutilizarseinclusoelBlocde
notasparahacerlo.
PerocrearpginaswebmedianteelcdigoHTML
es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta
mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms
complicadocrearunaaparienciaprofesionalparalapgina.
Hoyendaexisteunaampliagamadeeditoresdepginasweb.Unodelosmsutilizados,yque
destacaporsusencillezyporlasnumerosasfuncionesqueincluye,esMacromedaDreamweaver.
ParaquetevayashaciendounaideadecmofuncionaDreamweaver,vamosacrearunapgina
websencilla,convariosestilosdetexto,unaimagenyunenlaceaotrapgina.Crearestapgina
solotellevarunospocosminutos,ysabrscmotrabajarconloselementosbsicosconlosque
estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el
momentoparadescubrirlofcilquees.
PARA WEB
DW8
AdemsdeDreamweaver,existenotraseriedebuenoseditoresdepginasweb,comopuedenser
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.
32
MI PRIMERA PGINA EN DREAMWAVER
Loprimeroquetienesquehacer
es abrir Dreamweaver. Ya has
vistoenlapginaanteriorcomo
puede hacerse. Abres un
documento nuevo y seleccionas
la Categora Pgina bsica,
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 ttulo y el color de
fondodeldocumento.
Paraellodebeshacerclicsobreel
menModificaryelegirlaopcin
Propiedadesdelapgina.
Entonces se abrir una ventana
comolaqueaparecemsabajo.
CambiaelTtuloporMiprimerapgina.
EnColordeFondoescribe#CCCCFF,deestemodoelfondodeldocumentopasaraserdecolor
azul.
SeguidamentepulsasobreelbotnAceptar.
PARA WEB
DW8 Mi primera pgina en dreamwaver
33
Ahoravasainsertarunaimagen.Parainsertarlaimagen,hadeestaraccesibleparanosotros.Para
ellodebeencontrarseennuestrodiscoduro,enuncdromoenundisquete,peropreferiblemente
eneldiscoduro.
MuchasdelasimgenesquevemosenInternetsepuedencopiaraldiscoduro.Alhacerclicconel
botnderechodelratnsobrelaimagenquequeremostraerdeInternet,seabreunaventanacon
una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que
permitegrabardichaimagenenunarchivodenuestrodiscoduro.
En los navegadores ms 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
mismomenGuardarimagencomo...aquehacamosreferenciaanteriormente.
Copia una imagen de tus archivos, para luego poder insertarla en la pgina web que estamos
creando.Puedesguardarla,porejemplo,enlacarpetaMisDocumentos.
Ahora tienes que insertar la imagen debajo de la segunda
lneadetexto.Enprimerlugardebessituarelcursoralfinal
de la segunda lnea y pulsar un intro (Enter) para ir a una
nueva lnea. Despus debes dirigirte al men Insertar, a la
opcinImagen.
Enlanuevaventanaqueaparece,debersbuscarlaimagen
en la carpeta en la que la habas guardado, y despus
seleccionarla.
Ahoravasapasaracambiarelformatodeltexto.Paraellonecesitasvisualizar
elinspectordepropiedadesqueseencuentranormalmenteenlaparteinferior
delaventana,yquetieneelsiguienteaspecto:
Si no te aparece, puedes mostrarlo a travs del men

Ventana,conlaopcinPropiedades.
Si lo que te ocurre es que nicamente te aparece el
ttulodelpanel,esporqueestcontraido.Paraqueteaparezcadesplegadodebespulsarsobreel
botn ,queaparecejuntoalnombre.
PARA WEB
34
SeleccionalaprimeralneadetextoycambiaelFormatoporEncabezado1yelcolorpor#000066,
talycomosemuestraenlasiguienteimagen.
Despusdeesto,laaparienciadelaprimeralneahabrcambiado.Seleccionalaimagenylasdos
timaslneasdetexto.Pulsasobreelbotn
paracentrarlos.
Unavezhayascentradolaimagenylasotrasdoslneassiguientes,seleccionalasegundalneade
texto,queannohasidomodificada.CambiaelFormatoporEncabezado3,pulsaunavezsobreel
botn
ypulsatresvecessobreelbotn
Seleccionade nuevo la ltima lnea, yen Vnculo introduce http://www.elpais.es, paracrear un

enlaceaesaotrapgina:
Despus de todos estos pasos, puedes ver cmo ha quedado el

documentopulsandolateclaF12.
Porltimoguardaeldocumento.Yasabesquepuedeshacerloatravs
delmenArchivo,desdelaopcinGuardar.
Puedes llamar al documento como lo desees, pero siempre teniendo

encuentaquelaextensinhadeserhtmohtml.
Porejemplo,puedesllamarloprueba1.htm.
PARA WEB
35
EL ENTORNO DE TRABAJO DE DREAMWAVER

Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los
paneles,etc,parasaberdiferenciarentrecadaunodeellos.Aprenderemoscmosellaman,dnde
estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no
sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de
empezaracrearpginasweb.
La pantalla inicial
arrancar
Dreamweaver
aparece
una
pantalla
inicial
comosta,vamos
a
ver
sus
componentes
fundamentales.
As conoceremos
los nombres de
los
diferentes
elementos y ser
ms
fcil
entender el resto
del curso. La
pantalla que se
muestra
a
continuacin (y
en general todas
las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada
usuariopuededecidirquelementosquierequeseveanencadamomento,comoveremosms
adelante.
DW8 El entorno de trabajo de Dreamwaver
Al
La barra de ttulo
La barra de mens
La barra de herramientas estndar
PARA WEB
36
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
comopanelesoinspectores.Ladiferenciaentrepaneleinspectoresque,engeneral,laapariencia
yopcionesdeuninspectorcambiandependiendodelobjetoseleccionado.
AtravsdelaopcinVentana,delabarrademens,esposiblemostraruocultarcadaunodelos
panelesoinspectores.Vamosaverlosmsimportantes.
ElinspectordePropiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento

seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento
seleccionadoseatextomostrareltipodefuente,laalineacin,siestennegritaocursiva,etc.
Pulsandosobreelbotn sedespliegaparamostrarmsopciones.Estebotnseencuentraenla
esquinainferiorderecha.
LabarradeherramientasInsertaropaneldeobjetos
LabarradeherramientasInsertaropaneldeobjetospermiteinsertarelementosenundocumento
sinlanecesidadderecurriralmenInsertar.Loselementosestnclasificadossegnsucategora:
tablas,texto,objetosdeformulario,etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos
(comoocurreenlaimagenanterior),paraquesemuestrenlosnombresdelosobjetos,oparaque
semuestrenambosalavez.
PARA WEB
SeguramenteserlaherramientadeDreamweaverquemsvayasautilizar.
37
Vistas de un documento
Puedescambiarlavistadeldocumentoatravsdelabarradeherramientasdedocumento.
LavistaDiseo
LavistaDiseopermitetrabajarconeleditorvisual.Esla
vista predeterminada de Dreamweaver y la que se suele
utilizarhabitualmente.
LavistaCdigo
La vista Cdigo se utiliza para poder trabajar en un

entornototalmentedeprogramacin,decdigofuente.
Nopermitetenerdirectamenteunareferenciavisualde
cmo va quedando el documento segn se va
modificandoelcdigo.
LavistaCdigoyDiseo
LavistaCdigoyDiseopermitedividirlaventana
en dos zonas. La zona superior muestra el cdigo
fuente, y la inferior el editor visual. Cuando se
realiza un cambio en alguna de las zonas, este
cambioseaplicadirectamentesobrelaotra.
PARA WEB
38
CONFIGURACIN DE UN SITIO LOCAL EN DW8

Enestetemavamosaverquesunsitioweb,cmocrearlosygestionarlos,ycmomodificarlas
propiedadesdelosdocumentos,comopuedeserelcolordefondo.
Crear o editar un sitio web sin conexin a Internet
Unavezcreadaslascarpetasqueformarnunsitiolocal,yaes
posibledefinirelsitioenDreamweaver.
ParaellohayquedirigirsealmenSitio,alaopcinAdministrar
sitios....
RecuerdaqueatravsdelpanelArchivos,pestaaArchivos,se
puede acceder a cada uno de los sitios creados y a la opcin
Administrarsitio.
En el caso de haber seleccionado la opcin Administrar

sitios,apareceunaventanaquecontienelalistadesitios
localesdefinidosconanterioridad.
Por supuesto, pueden existir varios sitios locales en un
mismoordenador.
Tanto si se elige la opcin Nuevo..., como si se elige la
opcinEditar...,semostrarlamismaventanaenlaque
definirlascaractersticasdelsitio.
DW8 Configuracin de un sitio local en dw8
Las caractersticas del sitio se agrupan en

diferentes categoras que aparecen en la
parteizquierda.
Para visualizar las caractersticas de una
categora basta con seleccionarla de la lista
haciendoclicenella.
Vamosaverlosdatosquehayqueeditarpara
lacategoraDatoslocales.
Debe definirse el Nombre del sitio y la
PARA WEB
39
Carpetarazlocal,queesenlaqueseencuentraelsitiodentrodeldiscodurolocal.
Despus,sisedesea,atravsdelacategoraMapadediseodelsitiopuededefinirselapgina
principaldelsitio,delaquecolgarnelrestodedocumentosHTMLdentrodelsitio,sienlacarpeta
razdelsitioexisteunapginaconelnombreindex.htm,Dreamweaverlacogerpordefecto.
Estastrescaractersticassonlasimprescindiblesparadefinirunsitiolocal.
Lasdemsopcionesenestemomentononosinteresan,yaqueestamosdefiniendoelsitiolocal,y
noesnecesarioestablecerlosdatosdelservidorenelqueestarelsitioremoto.
DespusderellenarlosdatospulsamoselbotnAceptaryabrimoselsitio
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios....
seleccionarelsitiodelalistadesitiosypulsarsobreelbotnListo.
TambinpodemosutilizarelpanelArchivos,buscaryseleccionarelsitio
abrirenelmendesplegabledelapestaaArchivos.
PROPIEDADES DEL DOCUMENTO EN DW8
Puede definirse el formato de cada una de las

pginasatravsdelcuadrodedilogoPropiedades
delapgina.
Este cuadro se puede abrir de tres modos
diferentes:
PulsarlacombinacindeteclasCtrl+J.
HacerclicsobreelmenModificaryelegirlaopcinPropiedadesdelapgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del
mencontextuallaopcinPropiedadesdelapgina.Seabrirelcuadrodedilogosiguiente:
PARA WEB
DW8 Propiedades del documento en dw8
Esconvenientedefinirsitioshomogneos,quetodas
las pginas de un sitio sigan un mismo formato, es
decir, que tengan el mismo color de fondo, de
fuente,etc.
40
Laspropiedadesestnorganizadasencategoras.
EnlacategoraAspecto,comovesenlaimagenanterior,encontramoslaspropiedades:
Imagendefondo:permiteespecificarunaimagendefondoparaeldocumento.Dichaimagense
muestraenmosaico.Esimportantealelegirunaimagendefondotenerencuentaquesegnlos
coloresdelaimagensernecesarioestablecerunosuotroscoloresparaeltexto,ascomoqueno
esconvenientetenerungifanimadocomofondo.
Colordefondo:permiteespecificaruncolordefondoparaeldocumento,perodichocolorsolose
mostrarenelcasodenohaberestablecidoningunaimagendefondo.
Tamao:permitedefinireltamaodelaletra.
Colordeltexto:eselcolordelafuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior
solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo
funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de
documentodeDreamweaver,solosemostrarnenlosnavegadores.
EnlacategoraTtulo/Codificacinencontramoslapropiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la
ventanadedocumentodeDreamweaver.
Colordevnculo:eselcolordelosvnculos,queayudaalusuarioadistinguirentreeltextonormal
ylosvnculosquesirvendeenlaceaotraspginas.
PARA WEB
DW8 Propiedades del documento en dw8
EnlacategoraVnculosencontramoslaspropiedades:
41
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos
vnculosyahansidovisitadosono.
Vnculosactivos:eselcolordelosvnculosactivos.
Estilosubrayado:pordefecto,cuandotenemosuntextoconunvnculoasociado,eltextoaparece
subrayado,conestaopcinpodemoselegirotrotipodeestiloporejemploparaquenoaparezca
subrayado.
EnlacategoraImagenderastreoencontramoslaspropiedades:
Imagenderastreo:permiteestablecerunaimagencomofondodeldocumento,peroqueslose
mostrarenlaventanadedocumentodeDreamweaver,ynuncaenunnavegador.Dichaimagen
seutilizacomoplantillagrficasobrelaquecreareldocumento.
Transparencia:permiteestablecerlaopacidaddelaimagenderastreo.
LOS COLORES EN DW8

Para asignar colores es posible desplegar una paleta de colores
comosta.Alseleccionaruncolordeestaspaletas,semuestrael
valorhexadecimaldelcolorenlapartesuperior.
LaspaletasdecoloresdeDreamweaverutilizanlapaletade216
coloressegurosparaweb.stossonloscoloresquesemuestran
delamismaformaenMicrosoftInternetExploreryenNetscape
Navigator,tantoenWindowscomoenMacintosh.
Tambinesposiblepersonalizarloscoloresatravsdelbotn
delapartesuperiordelapaleta.
Elcolorpuedeinsertarsededosmodos.Unodeellosespulsandosobreelrecuadrogris ,loque
hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el
nmerohexadecimaldelcolorenelrecuadroblanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con
.
DW8 Los colores en dw8
valor#3399FF,elbotnquedaradelsiguientemodo:
PARA WEB
42
LISTAS DW8
Esposibleinsertartextoamododelista.Asuvez,lalistapuedesernumeradaoconvietas.
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 opcin de lista correspondiente, ya sea a
travsdelinspectordepropiedades,oatravsdelmenTexto.
La lista con vietas (desordenada) se selecciona a travs del botn
numerada(ordenada)seseleccionaatravsdelbotn .
Ejemplo de
(desordenada):
Ejemplo de lista numerada (ordenada):

1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da
siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Perro
Gato
Aves
Canario
Loro
Hamster
, mientras que la lista
lista
con
vietas
o
o
CARACTERES ESPECIALES EN DW8

A veces necesitars introducir caracteres
especiales en tus pginas. Debido al modo editor
de Diseo de Dreamweaver esta tarea es muy
sencilla utilizando el teclado, podemos incluir
caracterescomo,,,,..deformarpidaporsi
quieres poner dos espacios en blanco y los
introduces por teclado, Dreamweaver no los
crear,debersintroducirlodosvecesutilizandola
opcinquevamosaveracontinuacin.
Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los
caracteresmsutilizadosquenopuedenserintroducidosmedianteteclado.
Paraintroduciralgunodeestoscaracteresentustextossloseleccinaloenlalistayapareceren
lavistadeDiseo.
PARA WEB
DW8 Listas dw8
HazclicenelmenInsertaryseleccionalaopcin
HTMLverseldesplegabledelaimagendeladerecha.
43
Si el carcter que buscas no se encontrase all,

hazclicenOtro...yseabrirunaventanadesde
donde podrs seleccionar caracteres entre una
listabastantemsamplia.
ESTILOS CSS EN DW8

Con Dreamweaver 8, las caractersticas que apliquemos a un texto crearn automticamente
estilosCSSqueseincrustarneneldocumentoactualyseaplicarnnicamentesobrel.
Vemoslo:
ParacrearunEstiloCSSpersonalizado:
1.Eneldocumento,seseleccionaeltextoalquesedeseaaplicarcaractersticasconcretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se
establecenlosatributosdelafuenteydelprrafoquequeramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o
Estilo3,...segnlosnombresdelosestilosyacreados.
AparecerelnombreEstilo1enelcuadroEstilodelpanelPropiedades.
HIPERENLACES EN DW8
Referenciaabsoluta:
Conducealsitioenelqueseencuentraeldocumentoutilizandolarutacompletadelarchivo.
LaubicacinesenInternet,porejemplo,http://www.misitio.com/pagina/pagina1.html.
Referenciarelativaaldocumento:
Conduceaundocumentosituadodentrodelmismositioqueeldocumentoactual,peropartiendo
PARA WEB
DW8 Estilos CSS en dw8
Existendiferentesclasesderutasdeaccesoalahoradedefinirlosvnculos.
44
deldirectorioenelqueseencuentraeldocumentoactual.
Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos
deberemosutilizar../
Porejemplo,imaginaqueestamosenlasiguientedireccin
http://www.misitio.com/pagina/informacion/index.html.Enestapginaqueremosmostraruna
imagenqueseencuentraenlacarpetahttp://www.misitio.com/pagina/secciones/seccion1.html,
cmopodemoshacerlo?Fcil.Deberemosllamarlahaciendoreferenciaalnivelsuperior
(http://www.misito.com/pagina/)parapoderirluegoalacarpetasecciones.
Elresultadodelarutaseraelsiguiente:../secciones/seccion1.html.
Deestaforma,mientrasnosencontramosenlacarpetainformacion,subimosunnivelyluegonos
movemosdentrodelacarpetaseccionesparamostrarelarchivoseccion1.html.
Referenciarelativaalsitio:
Conduceaundocumentosituadodentrodelmismositioqueeldocumentoactual.
Enestemtodolosenlacessecreanindicandolarutaapartirdelarazdelsitio.
En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un
enlaceencualquierpginadelsitioahttp://www.misitio.com/pagina/secciones/seccion1.htmlse
crearacomo/pagina/secciones/seccion1.html.
Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define
dependiendodelsitiorazynodelaubicacindondeseencuentra.
Puntosdefijacin:
Conduceaunpuntodentrodeundocumento,yaseadentrodelactualodeotrodiferente.Para
elloelvnvulodebesernombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con
nombre.
Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma:
../secciones/seccion1.html#parte2
Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es
necesarioseleccionareltextooelobjetoquevaaservirdeenlace,yseguidamenteestablecerel
Vnculoenelinspector.
PARA WEB
DW8 Hiperenlaces en dw8
45
Porejemplo,aquhayunenlaceawww.elpais.es,queesdereferenciaabsoluta,poresocontiene
HTTP://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan
comportamientos,etc.ParaelloesnecesarioescribirenVnculonicamenteunaalmohadilla#.
OtraformadecrearunenlaceesatravsdelmenInsertar,opcinHipervnculo.
Eldestinodelenlacedeterminaenquventanavaaserabiertalapginavinculada,puedevariar
dependiendodelosmarcosdequedispongaeldocumentoactual.
PuedeespecificarseenelinspectordepropiedadesatravsdeDest,oenlaventanaqueaparecea
travsdelmenInsertar,opcinHipervnculo.
_blank:Abreeldocumentovinculadoenunaventananuevadelnavegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el
conjuntodemarcospadre.
_self:Eslaopcinpredeterminada.Abreeldocumentovinculadoenelmismomarcooventana
queelvnculo.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de
destino,yaquesevolvernavereneltemadeMarcos.
PARA WEB
DW8 Hiperenlaces en dw8
_top:Abreeldocumentovinculadoenlaventanacompletadelnavegador.
46
IMGENES EN DW8
ParainsertarunaimagenhayquedirigirsealmenInsertar,alaopcinImagen.Despusdeesto,
yaesposibleseleccionarunaimagenatravsdelanuevaventana.
Si por algn motivo se desea insertar un BMP, este no

aparecer a no ser que en Tipo se seleccione Todos los
archivos.
CuandoseleccionamosunaimagenelInspectordepropiedadesmuestraestaapariencia:
Imagen de sustitucin. Rollover
Unrolloveresunaimagenquecambiaporotracuandoelpunterosesitasobreella.Estetipode
imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas
pginas.
Aqutienesunejemploderollover.Sitaelpunterosobrelparaverquesloqueocurre.
DW8 Imgenes en dw8
ParainsertarunrolloverhayquedirigirsealmenInsertar,ObjetosdeImagen,alaopcinImagen
desustitucin.Enlanuevaventanahayqueespecificarlaimagenoriginalyladesustitucin.
PARA WEB
47
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la
imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras
debidasaladescargadelaimagencuandollegaelmomentodequeaparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que
aparecerenlugardelaimagenenelcasodequeporalgnmotivostanopuedasermostradaen
elnavegador.
Eltextoalternativopuedeasignarseatodaslasimgenes,nosloalosrollovers.Puedehacersea
travsdelcampoAltdelinspectordepropiedadesdelaimagenseleccionada.
TABLAS EN DW8
Todoslosobjetossealineanpordefectoalaizquierdadelaspginasweb,perograciasalastablas
esposibledistribuireltextoencolumnas,colocarimgenesalladodeunbloquedetexto,yotra
seriedecosasquesinlastablasseranimposiblesderealizar.
Hoyenda,lamayoradelaspginaswebsebasanentablas,yaqueresultandegranutilidadal
mejorarnotablementelasopcionesdediseo.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A
continuacintienesunejemplodetabla.
ParainsertarunatablahayquedirigirsealmenInsertar,alaopcinTabla.
Atravsdelinspector
depropiedadessepuedenmodificarlosvaloresqueseespecificaronalinsertarlatabla.Almismo
tiempo,puedenindicarseotroscomopuedenserelvalorAlinear(quepermitealinearlatablaala
PARA WEB
DW8 Tablas en dw8
Laspropiedadesdelatablaseespecificanatravsdesuinspectordepropiedades.
48
izquierda,alcentrooaladerecha),elcolordefondo(enCol.Fondo)odebordedelatabla(en
Col.borde),olaimagendefondo(enIm.).
Siloqueseseleccionaesunacelda,ounconjuntodeceldas,elinspectordepropiedadescambia,
parapermitirespecificarotrosvalores.
MARCOS EN DW8
Los marcos o frames sirven para distribuir
mejor los datos de las pginas, ya que
permiten mantener fijas algunas partes,
comopuedenserellogotipoyla barrade
navegacin, mientras que otras s pueden
cambiar. Adems de mejorar la
funcionalidad, pueden mejorar tambin la
apariencia.
Cada uno de los marcos de una pgina,
contiene un documento HTML individual.
Por ejemplo, en la imagen de la derecha
puedes ver una pgina con dos marcos. El
marco izquierdo contiene el documento
menu.htm y el derecho el documento
quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el
navegadoreldocumentomarcos.htm,queeslapginaquecontienelosmarcosagrupados.
Eltrabajarconmarcospuederesultarunatareaalgocomplicada,sobretodoalprincipio,porloque
no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y
ejemplossencillos.
PARA WEB
DW8 Marcos en dw8
Esposibleeditarlosdocumentoscontenidosenlosmarcosdesdelapginaquecontieneelgrupo
demarcos.Estofacilitaeltrabajo,yaqueesmsfcilhacerseunaideadecmoquedarlapgina
al final, cosa que no es posible si se editan individualmente cada uno de los documentos que
contieneelmarco.
49
Crearmarcos
Existen varias formas de crear un marco. Nosotros
vamosaversolamenteunadeellas.
Para crear un marco, primero hay que abrir algn
documento.Puedeserunonuevoounoyaexistente.
Despus, dirigirse al men Insertar, HTML, Marcos. A
travs de esta opcin puede elegirse el tipo de marco
quevaacrearse.
VamosaverelmarcoalaIzquierda.
SipulsamossobreIzquierdasecrearunnuevomarcoa
laizquierdadeldocumentoactual.
Como puedes ver en la imagen, aparece una lnea que divide el
documentoendos.Eldocumentodepartidaeraunonuevo.
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
documentoquetenamosinicialmente,queestenelmarcoconocido
comomarcopadre(MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay
que pulsar sobre la lnea que separa los marcos. Esto solo es posible
mientrasdichodocumentonosehayaguardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la

Derecha,elmarcovacoapareceraladerechadeldocumentooriginal.
Enestaimagenpuedesverunejemplodemarcoaladerecha.
Sobreundocumentoyaexistente,menu.htm,sehainsertadounmarco
aladerecha.
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
estecaso,eldocumentoquetenamosinicialmenteeseldelaizquierda,
mientrasqueanteseraeldeladerecha.Porello,enestecasoelmarco
padresereldelaizquierda.
DW8
El marco padre siempre es el marco en el que se encuentra el

documentoinicial,sobreelquesehaninsertadoelrestodemarcos.
PARA WEB
50
FORMULARIOS EN DW8
Los formularios se utilizan para recoger datos de los
usuarios,nospuedenservirpararealizarunpedidoen
una tienda virtual, crear una encuesta, conocer las
opinionesdelosusuarios,recibirpreguntas,etc.
Una vez el usuario rellena los datos y pulsa el botn
paraenviarelformulariosearrancarunprogramaque
recibir los datos y har el tratamiento
correspondiente.
Aqu vamos a ver cmo crear el formulario, (insertar
campos y botones en el formulario y validarlos), pero
nolapartedetratamientodelosdatos,yaqueparaellosenecesitannocionesdeprogramacin,
ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no entra en los
objetivosdelcurso.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables,ybotones.
Elementos de formulario
LoselementosdeformulariopuedeninsertarseenunapginaatravsdelmenInsertar,opcin
Formulario.
Atravsdeestaopcinsepuedeaccederalalistadetodoslosobjetosdeformularioquepueden
serinsertadosenlapgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un
formulario,ascomoalgunasdesuspropiedades.
Campodetextoyreadetexto
Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades,
marcandolaopcinUnalneaoMultilnearespectivamente.
TambinesposibledefinirlocomoContraseaescomoelcampodetextoperolasletrasqueva
tecleandoelusuariosesustituyenporuncarctercomopodrsverenlaimagensiguiente.
PARA WEB
DW8 Formularios en dw8
Permitenintroducirtexto.ElCampodetextosolopermitealusuarioescribirunalnea,mientras
queelreadetextopermiteescribirvarias.
51
Acontinuacintienesunejemplodecadaunodeestostrestipos.Puedesescribirenellosparaver
sufuncionamiento.
Campo de t
rea de texto
AtravsdelinspectordepropiedadesesposibleasignartambinelAnchodelcuadrodetexto,el
nmeromximodelneasocaracteres,yelvalorinicialdelcuadro.
Botn
Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para
poderasignarleuncomportamientodiferentedelosdosanteriores).
Enviar
Tambinesposiblecambiareltextodelbotn,atravsdelapropiedadEtiquetadelinspectorde
propiedades.
Casilladeverificacin
Esuncuadritoquesepuedeactivarodesactivar.
Deseorecibirinformacin
PuedeasignrseleelEstadoinicialcomoActivadoocomoDesactivado.
Botndeopcin
Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo
formulario,slopuedehaberunoactivado.Cuandoseactivauno,automticamentesedesactivan
losdems.
Superman
Spiderman
Lista/Men
Unalistaomenesunelementodeformularioquellevaasociadaunalistadeopciones.
--- Elige opcin lista --
--- Elige opcin men--Perro

Gato
PARA WEB
52
LoselementosseaadenatravsdelbotnValoresdelista...delinspectordepropiedades.
Cuandosetratadeunmen,soloesposibleelegirunodeloselementos,perosisetratadeuna
lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen
variossimultneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda
saberqudatoshadeintroducirencadaunodeellos.
Puedes crear formularios a travs del men Insertar, opcin
Formulario.
Unavezcreadounformulario,esteaparecerenlaventanade
Dreamweaver como un recuadro formado por lneas rojas
discontinuas,similaraldelaimagendeladerecha.
Dentro de dicho formulario se podrn insertar los elementos
deformulario,quecomoyasabespuedesinsertaratravsdel
menInsertar,opcinFormulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando
tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su
comprensinymejorasuapariencia.
Validar formularios
La validacin de formularios sirve para hacer que Javascript

valideelformularioantesdequeseenveelformulario,paraque
en el caso de que hayan campos del formulario que sean
obligatorios,tenganquerellenarseantesdepoderenviarse.
Enestepanelhayquedesplegarelbotn pulsandosobrel,y
en Mostrar eventos para elegir una versin de las actuales de
entre la lista de navegadores. Por ejemplo, puedes elegir el
navegadorIE6.0.
Despus de esto, hay que volver a desplegar el botn

, y
pulsar sobre la opcin Validar formulario, debers haber
seleccionadoelformulariopreviamente.
PARA WEB
Para validar un formulario hay que abrir el panel de

Comportamientos. Este panel se puede abrir a travs del men
Ventana,opcinComportamientos,opulsandoMays+F3.
53

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
requisitosquehadecumplir.
Puedeestablecersecomocampoarellenarobligatoriamente(ValorObligatorio),ysisucontenido
hadesernumrico(Nmero),unaDireccindecorreoelectrnico,etc.
MULTIMEDIA EN DW8
Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una
animacinFlash,unsonidoyunvdeo
Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la
extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de
presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de
animacin.
Estas pelculas pueden crearse mediante el programa Flash de Macromeda, y necesitan que el
usuariotengainstaladoelpluginparapoderservisualizadas.
Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Media, opcin
Flash,opulsandoCtrl+Alt+F.
FlashqueapareceenlapestaaComn
DW8 Multimedia en dw8
Tambinpuedeninsertarsepulsandosobrelaopcin
PARA WEB
54
del panel Insertar, botn Media. El inspector de propiedades de las pelculas Flash es
prcticamenteigualqueeldelosbotonesyeltextoFlash,peroexistendosopcionesnuevasque
hacenreferenciaalavisualizacindelapelcula.
LaopcinBucleindicaquealfinalizarlapelcula,stavolveracomenzardesdeelprincipio.
LaotraeslaopcinRep.autom.(reproduccinautomtica),quealestarmarcadaindicaquenada
mscargarselapginacomenzarareproducirselapelculaFlash.
Siestaopcinnoestuvieramarcada,semostraranicamenteelprimerfotogramadelapelcula.
Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn
comportamiento.
Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar
escuchandosupropiamsicacuandonaveganenInternet,porloqueelescuchartambinsonido
encadapginaquesevisitapuederesultaralgomolesto.
Apesardeello,elincluirunsonidoagradable,apropiadoalcontenidodelapgina,puedehacerla
ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de
activarloodesactivarlo,paraqueaquellosusuariosquenodeseenescucharelsonidodelapgina
puedandesactivarlo.
LosformatosdesonidomshabitualesenInternetson,fundamentalmente,elMP3,elWAVyen
algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden
utilizarse.Loidealesincluiralgnarchivodeaudioquenoocupemuchoespacio,yquenoporello
seademalacalidad.
Vdeos
Enocasionespuedeinteresarincluiralgnvdeoenunapginaweb,perohayquetenerencuenta
quelosvdeossuelenocuparmuchoespacioendisco,yporlotanto,precisandemuchotiempo
paradescargarse.
PARA WEB
DW8 Multimedia en dw8
ParainsertarunarchivodeaudioenundocumentotienesquedirigirtealmenInsertar,Meda,
opcinPlugin.
55
LosformatosdevdeoquesuelenutilizarseenInternetsonelAVI,el MPEGyelMOV.
ParainsertarunarchivodevdeoenundocumentotienesquedirigirtealmenInsertar,Meda,
opcinPlugin.
Aladerechatienesunejemplodeunarchivodevdeo,paraelquesemuestranloscontrolesde
vdeo.Puedesreproducirlopulsandosobreloscontroles.
Elinspectordepropiedadesparalosarchivosdevdeoinsertadosdeestaformaeselmismoqueel
delosarchivosdeaudio,yaqueambosseinsertancomoPlugin.
LAS PLANTILLAS EN DW8
Lasplantillaspuedencrearsedesdecero,oapartirdeunapginayaexistente.
UnaformadecrearunaplantilladesdeceroesatravsdelpanelArchivos,pestaaActivos.
LapestaaActivossepuedeabriratravsdelmenVentana,opcinActivos.Tambinpulsando
F11.
Unavezabiertoelpanelhayqueseleccionarelbotn
,parapodertrabajarconlasplantillas.
Los botones inferiores del panel Activos
sonsimilaresalosdelpanelEstilosCSS.
El nico botn diferente es el primero, que en este

caso sirve para actualizar la lista, el resto permiten
crear una nueva plantilla, editar una plantilla
seleccionadaenlalista,oeliminarla.
Cuandosepulsaesebotnapareceunnuevodocumentoenlalistadeplantillas,alqueesposible
cambiarleelNombrepulsandopreviamentesobrel.
Paramodificarunaplantillalaseleccionamosdelalistaypulsamoselbotn
Paraeliminarunaplantillalaseleccionamosdelalistaypulsamoselbotn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automticamente.
PARA WEB
DW8 Las plantillas en dw8
Paracrearunanuevaplantillahayquepulsarsobreel
botn (Siestebotnnoestactivado,pulsaconel
botnderechodelratnyeligeNuevaPlantilla).
56
Para crear una plantilla a partir de un archivo

existente es necesario abrir dicho archivo, y
despus guardarlo como plantilla a travs del
menArchivo,opcinGuardarcomoplantilla.
Cuando se pulsa dicha opcin, aparece una
ventanacomoladeladerecha.
En ella es necesario especificar el nombre con
el que va a ser guardada la plantilla, a travs
del campo Guardar como, y elegir, deentre la
listadesitios,elSitio:enelquesevaaguardar.
HTML DESDE DREAMWEAVER
EnestetemavamosaveralgunasdelasfacilidadesqueproporcionaDreamweaverparatrabajar
sobreelpropiocdigoHTML,ynonicamentesobreeleditorgrficodelavistadiseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos
reajustesdirectamenteenelcdigoestandodentrodeDreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada
elementodelapginaWeb.
Lasetiquetasconsistenenponerunmismocomandoentrelossmbolos<y>.Laprimeraetiqueta
indicainicio,ylasegunda,queincluyeelsmbolo/,indicafinalysesueledenominaretiquetade
cierre.
Lasetiquetasdisponendeatributosquepermitendefinircaractersticasdelelementosobreelque
actan,incluyendociertocdigodentrodelaetiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus
caractersticas predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de
introducireltextodelprrafoentrelasetiquetasanteriores,hadeinsertarseentrelasetiquetas<P
align="right">y</P>.
Tambinhayelementosquenoprecisaninsertaretiquetadecierre.Porejemplo,unMay+INTRO
PARA WEB
DW8 HTML desde Dreamweaver
EnelprimertemavimoscomoejemplolasetiquetasquehayqueincluirenelcdigoHTMLdeuna
pginaparadarleunttulo.Consistasimplementeenescribirelttulodeseadoentrelasetiquetas
<TITLE>y</TITLE>.
57
dentrodelcdigoHTMLequivalealaetiqueta<BR>.
Tambinpodrsverlaetiqueta<br/>enlaspginasquesiganelestndarXHTML.steobligaa
quetodaslasetiquetassecierren,inclusoaquellasquenotienenetiquetafinal,porloque<BR>
pasaaser<br/>o<HR>a<hr/>.
Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la
aparienciaycontenidodefinidoseneleditorgrfico,perotambinofreceotrasposibilidadespara
trabajardirectamentesobreelcdigo.
Entidades HTML
HTML tambin dispone de cdigos especiales para representar carceteres especiales como
pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de
puntuacinotipogrficosysmbolosespecialesquepresentenunproblemaenHTMLcomo<>,
quepodranmalinterpretarseporeliniciodeunaetiqueta.
Estoscdigospuedenmostrarsecomouncdigonumricooconunnombredeentidad.Ambos
mtodossonigualmenteaceptables,peroambosdebernirencerradosentrelossmbolos&y;.
Deestemodo,<seescribircomo<o<
Usarestemtodoesmuyaconsejable,deestaformalosnavegadoresqueestnconfiguradospara
visualizar juegos de caracteres que no contengan letras como la o la podrn ver el sitio
correctamente.Encasocontrarioestoscaracteressemostrarandeformaextraa.
Eneltema4vimosquepodamosescribirestoscaracteresutilizandoelmenInsertar.Ahorate
mostraremosotraformaparaescribircaracteresquenoseincluanenellistadodeDreamweavery
quepodrsinsertarescribiendosusentidadesenlavistadeCdigo.
Carcter
Entidad
con
nombre
Entidad
numrica
á
Á
Á
é
é
É
É
í
í
Í
Í
ó
ó
Ó
Ó
Carcter
Entidad
con
nombre
Entidad
numrica
á
PARA WEB
Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de
nombredeentidad:
58
ú
ú
Ú
Ú
ü
ü
Ü
Ü
&ntide;
ñ
Ñ
Ñ
¿
¿
α
α
&iexc;
¡
β
β
–
–
©
©
→
→
®
®
←
←
€
€
<
<
<
espacio

>
>
>
&
&
&
SiescribesmsdeunespacioenDreamweaver,cuandolovisualicesenunNavegadorsloveras
uno. Esto es debido a que en HTML las palabras separadas por ms de un espacio se visualizan
sapradasdeuno.
Parasaltarteestanormapuedesescribirtantasvecescomoquieras ysevisualizarntantos
espacioscomoelementosdeentidadhayasintroducido.
El inspector de cdigo
RecordarsqueDreamweaverofrecelaposibilidaddetrabajarcontresvistas:vistaDiseo,vista
CdigoyvistaDividir(CdigoyDiseo).
Todasestasvistasseaplicandirectamentesobrelaventanadeldocumento.
PARA WEB
59

Peroexisteunpanelquepermitevisualizarelcdigoindependientementedelavistaaplicadaenel
documento. Este panel es el llamado Inspector de cdigo y puede abrirse a travs del men
Ventana.SilaopcinInspectordecdigonoteaparecedirectamenteenestemen,posiblemente
estdentrodelaopcinOtros.TambinpuedesabrirelInspectordecdigopulsandoF10.
ElInspectordecdigomuestraelcdigoHTMLdelamismaformaquelohacenlavistaCdigoyla
vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que
puedesituarseencualquierpartedelapantalla,ynoselimitasloalespaciodeldocumento.
OTROS ELEMENTOS
Vamosaverunaseriedeelementosquesuelenaparecerenlaspginasweb,comopuedenserlas
marquesinas,lasreglashorizontalesylafecha.
Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden
desplazarsedeunladoaotrodelaventanaenformadelnea.
LasmarquesinasnosepuedeninsertaratravsdeleditorgrficodeDreamweaver,esnecesario
hacerloatravsdelcdigo.
Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por

defecto,sedesplazadederechaaizquierdaindefinidamente,perosilodeseaspuedeshacerque
estaspropiedadesvaren.Porejemplo,sipones<marqueebehavior="slide">,lamarquesinahar
eldesplazamientounasolavezysedetendr.
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,talycomoocurreenelejemploanterior,cuyocdigopuedesveracontinuacin:
PARA WEB
DW8 Otros elementos
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre
dichasetiquetashandeintroducirseloselementosquesedeseaqueaparezcanenlamarquesina.
60
<marqueebehavior="alternate">
Bienvenid@saPerrosGatos
<imgsrc="imagenes/logo_animales.gif">
</marquee>
Fecha
Dreamweaverpermiteinsertarfcilmentelafechadeltimamodificacindelaspginas.
Cuando se modifica una pgina en la que se ha insertado este tipo de fecha, se actualizar
automticamenteconlafechadelsistema.
Conviene insertar la fecha de modificacin
cuando la pgina ha de contener informacin
actualizada cada poco tiempo, para que los
usuarios puedan saber cuando fue la ltima vez
queseactualizaronlosdatos.Peroenelcasode
que la pgina no se actualice hasta que pase
ciertotiempo,espreferiblenoincluirlafechade
modificacin.
ParainsertarlafechahayquedirigirsealmenInsertar,alaopcinFecha.
Enlanuevaventanayaesposibleestablecerelformatodelafecha,ysisedeseaqueseactualiceo
noautomticamentealmodificaryguardarlapginadenuevo.
Regla horizontal
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla
horizontal.Unareglahorizontalnoesmsqueunalneahorizontal.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla
horizontal.
DW8 Otros elementos
Elinspectordepropiedadesparalasreglaseselsiguiente
PARA WEB
61
PUBLICAR LAS PGINAS EN INTERNET.
Ahora que tenemos nuestra pgina terminada y registramos el nombre de dominio, lleg el
momentode"subirla"alaRed.Yparaesotenemosdosposibilidades:armarelpropioservidoro
"host",opcinquerequieredeunainversinconsiderable,porloquesloseaplicaengrandes
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 pequeos comercios tienen que recurrir a un

servicio web hosting. En este sentido la decisin pasar por
determinarsivamosaoptarporunserviciogratuitoounopago.
Los usuarios y los pequeos comercios tienen que recurrir a un servicio web hosting. En este
sentidoladecisinpasarpordeterminarsiseoptaporunserviciogratuitoounopago.
Porunacuestinobvia,loswebhostingpagossuelenbrindarunserviciomejorquelosgratuitos.
Aunque como veremos ms adelante se pueden obtener, sin invertir un centavo, lugares para
alojarpginasWebcuyacalidadtienepocoynadaqueenvidiarleaalgunosserviciospagos.
En definitiva, un host gratuito es una opcin muy interesante para quienes desean publicar una
pginadeservicios,desuaficin,clubdefan,hobby,etc.Silapginaperteneceaunaasociacino
empresa de la que se necesita brindar una imagen profesional, seguramente habr que ir
pensandoenunhostpago(empresascomercialesquesededicanalaventadeespaciosenlaRedy
servicios para tal fin). Estas empresas, entre otras cosas, van a brindar la posibilidad de que la
pgina en cuestin tenga el nombre de dominio (la direccin de que deseamos en el formato
elegido),esdecirwww.nombreelegido.com
Estaquizsesladiferenciamsnotoriajuntoconelsoportetcnicoentrelosserviciospagosylos
gratuitos:laposibilidaddequeelnombrededominionosea"ensuciado"poragregadosyaque,en
mayoromenormedida,loshostsgratuitoshacenresaltarsupresenciaenlabarradedirecciones
delnavegador.
Te recomiendo usemos para nuestra prctica un hosting gratuito, visita www.miarroba.es y
generemosuncuenta,lacualaprenderemosaadministrarennuevoartculo.
PARA WEB
DW8 PUBLICAR LAS PGINAS EN INTERNET.
CuandounusuariocontratalosserviciospremiumdeunproveedordeaccesoaInternet,adems
delaconexinrecibecasillasdeemaily,enmuchoscasos,unespacioparahospedarunapgina
personal de prestaciones limitadas. Esto constituye para muchos la primera experiencia para
publicarcontenidosenlaWeb.
62
PASOS PARA CREAR NUESTRO PROPIO SITIO WEB

ByL.I.IrvingSantamaraDomnguez
|www.irvingsd.co.cc|twiiter@irving_sd|cyberving@hotmail.com|
Breve descripcin de los pasos que debemos seguir para crear nuestro sitio web o pgina web,
desdelaideauobjetivohastalapublicacinymantenimiento
Muchas veces tenemos la idea de crear un sitio web, o simplemente queremos hacer nuestra
propia pgina web, y cuando comenzamos nos conseguimos con una gran cantidad de
interrogantes, que al final no sabemos por dnde empezar, con esta gua quiero organizar esos
pasosquedebemosseguirparaconstruirnuestrositioweb.
1. Definir el objetivo del sitio. Es decir, antes de tener el nombre de la pgina, debemos
definirculserelobjetivodemontarnuestrapginaweb,paraellohayquetenermuyen
cuentaloquevamosaofrecer,inclusoeltipodepersonasquevisitarannuestrositioweb
2. NombredelDominio.Cumplidoelpaso1,tienesqueescogerelnombredenuestrositio
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 tcnico de
computacin. villagrosptecnico.com (este nombre adems de ser muy largo, seguro el
usuario no se recordar) serviciotecnicosb.com (es un nombre corto y permite al usuario
recordarelobjetivodelsitioweb)
3. BosquejodelDiseo.Debemoscrearunborradordecmoqueremosnuestrositioweb,all
hay que considerar, opciones del men, colores, tipo de letra, imgenes, entre otras
caractersticas.Alfinalizarestafasesetendrlaideaoborradordenuestrositioweb.
4. ProgramacinyDiseo.Crearelsitioutilizandounlenguajedeprogramacinounsoftware
dediseo,talescomo:Php,Asp,Dreamweaver,entreotros
5. AdquirirunHosting.Normalmentenuestraspginasweb,debenpermanecerguardadasen
unservidorqueestdisponibleenInternet,paraellohacemoslacontratacindeunplan
de Hosting, aqu debemos considerar: espacio en disco que ocupa nuestro sitio web, la
aplicacin que utilizamos (php, html, asp, entre otros), si manejamos bases de datos, la
cantidaddetransferencia,lagarantadequenuestrositiowebestar100%disponible,que
nospermitatenernuestropaneldecontrol
6. Subir,configuraryPublicar.Estepasosencillamenteconsisteencopiartodoslosarchivos
de nuestro sitio web hacia el hosting o servidor que adquirimos, as como configurar la
informacindelosDNSdeldominio.EncuantoaPublicar,noesmsqueinscribirenlos
buscadoresnuestronuevositioweb.
PARA WEB
DW8 Pasos para crear nuestro propio sitio web
Comopasosprincipalesdebemos:
63
7. Mantenimiento. Este ltimo paso, es importante tenerlo en cuenta, ya que muchas

personas cometen el error de tener su sitio web y olvidarse despus que lo suben a
internet, el mantenimiento debe hacerse como mnimo mensualmente, ya que as los
visitantes del sitio sabrn que usted est pendiente de actualizar la informacin que
muestraenlainternet
Estosserianlosprincipalespasosquedebemostenerencuentaparacrearnuestrositioweb,no
quieredecirquenopuedasincluirotrosqueconsideresnecesarios,mientrasmsdetallestengasel
trabajoresultar100%profesional,dandounabuenaimagenatusvisitantes.
DIRECCIONES INTERNET DE
INTERS.
LassiguientesdireccionesInternetcontienen
guasymanualesdondepuedeencontrarms
informacinsobreellenguajeHTML:
DiversosmanualesHTML
http://www.dic.uchile.cl/manual.html
Dpto.InformticayComunicaciones
UniversidaddeChile
WebMaestro
http://www.wmaestro.com/webmaestro/
FranciscoArocena
TutorialHTML
http://dns.uncor.edu/info/tutorial.htm
MercedesDoffimdoffi@com.uncor.edu
UniversidadNacionaldeCrdoba
Argentina
BIBLIOGRAFA.
TejedoresdelWeb
http://www.dic.uchile.cl/~manual/
CarlosCastillo
Dpto.InformticayComunicaciones
UniversidaddeChile
TutorialdeHTML
http://www.um.es/~psibm/tutorial/
JuanJosLpezGarca[jjloga@fcu.um.es]
Dpto.PsicologaBsicayMetodologa
UniversidaddeMurcia
WebMaestro
http://www.wmaestro.com/webmaestro/
FranciscoArocena
Tutorialeswww.Aulaclic.comDreamwaver.
DW8
PARA WEB
64

Manual HTML-Dreamwaver (By IrvingSd) .Desbloqueado

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual HTML-Dreamwaver (By IrvingSd) .Desbloqueado

Cargado por

Copyright:

Formatos disponibles

Compiled by

L.I. Irving Santamara

L.I. Irving Santamara Domnguez DISEO DE

HTML - El LENGUAJE HTML.

En este manual nos introduciremos en la

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML El LENGUAJE HTML.

HTML El LENGUAJE HTML.

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML El LENGUAJE HTML.

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

MI PRIMER DOCUMENTO HTML (PRCTICA # 1).

HTML El LENGUAJE HTML.

CARACTERSTICAS GENERALES DE HTML..

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

HTML CARACTERSTICAS GENERALES DE HTML..

CUATRO NORMAS FUNDAMENTALES

HTML es simplemente texto

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML CUATRO NORMAS FUNDAMENTALES

Igualdad de maysculas y minsculas.

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML CUATRO NORMAS FUNDAMENTALES

ESTRUCTURA DE UN DOCUMENTO HTML.

COMANDOS BSICOS DE HTML

HTML ESTRUCTURA DE UN DOCUMENTO HTML.

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML COMANDOS BSICOS DE HTML

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML COMANDOS BSICOS DE HTML

Colores del texto.

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

HTML COMANDOS BSICOS DE HTML

HTML COMANDOS BSICOS DE HTML

Listas desordenadas: UL.

Listas de definicin: DL.

Texto preformateado: PRE.

HTML COMANDOS BSICOS DE HTML

Comentarios no visibles en la pantalla

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

<BLINK>y a escribir texto parpadeante</BLINK>

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

HTML COMANDOS BSICOS DE HTML

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

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

<H3><A NAME="ocho">Seccin ocho</A></H3>

Enlaces a otras pginas

href="ejemplo1.html">ejemplo nmero 1</A>. Tambin a un archivo

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

<H3>Algunos servicios WWW en Espaa</H3>

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

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

Enlaces a una zona de otra pgina

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

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

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

L.I. Irving Santamara Domnguez DISEO DE SOFTWARE

Uso de imgenes como enlaces.

Imgenes como fondo de un documento.

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

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

Cabeceras de filas y de columnas.