Professional Documents
Culture Documents
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
PARA WEB
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.
PARA WEB
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:
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.
<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
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
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!.
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:
<marcaatrib1=valor1atrib2=valor2..............>
Elvalordelosatributosseexpresanencerradosentrecomillas.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
<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:
<MARCA1><MARCA2>Texto</MARCA2></MARCA1>
<MARCA1><MARCA2>Texto</MARCA1></MARCA2>
<MARCA2><MARCA1>Texto</MARCA1></MARCA2>
<MARCA2><MARCA2>Texto</MARCA2></MARCA1>
PARA WEB
Apesardequesonexpresionescompletamenteidnticas,esrecomendableseguirelorden
lgicodelaconcatenacin,yaqueestofacilitadeformasustanciallaedicindedocumentos
HTML.Delascuatroopcionesanteriores,lascorrectasseranlaprimeraylatercera.
Carcterespecial
Losacentos
TranscripcinHTML
&<vocalaacentuar>acute;
Comentario
Enlaactualidadlamayoradelos
browserslossoportan
Smbolomenorque(<) <:
Smbolomayorque(>) >
Laee
ñ
Enlaactualidadlamayoradelos
browserslasoportan
Espaciosenblanco
(nonbreakingspace) HTMLsloreconoceunespacioen
blancoentrepalabras
Demaneramsgeneral,pararepresentarsmbolosreservadososmbolosparticulares,sepuede
utilizarelcdigoASCIIdelsmbolomediantelasintaxissiguiente:
&#cdigo_ASCII;
PARA WEB
Seaporlosmotivosquefuere,elcasoesqueexistenciertossmbolosquenopuedenescribirse
directamente, sino que deben sustituirse por una cadena de caracteres que el navegador
interpretardeformacorrecta.Estascadenasdecaracterescomienzansiempreporelsmbolo
(&)seguidodeunacombinacindecaracteresalfabticosquetienenunsignificadoespecialen
HTML.Enlasiguientetablasemuestracmoescribiralgunosdeestoscaracteres:
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.
PARA WEB
<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>
<H2>Niveldeencabezado2</H2>
<H3>Niveldeencabezado3</H3>
<H4>Niveldeencabezado4</H4>
<H5>Niveldeencabezado5</H5>
<H6>Niveldeencabezado6</H6>
Losttulosdeencabezadorequierenlamarcadefin,ysiempreprovocanunsaltodelnea,
aunquenoseleindique.
Dando estilo al texto
Lasmarcasdeestilodetextoespecificaneltipodeletra(negrita,cursiva,..),tamao,colorque
sedeseaqueaparezcaeltexto.
Tipos de letras
Algunasdelasmarcasquepermitenespecificarlatipografadeloscaracteressonlassiguientes:
PARA WEB
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.
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
13
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.
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
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,...).
Esto se consigue encerrando dichos comentarios entre estos dos smbolos: <!-- y -->
Ejemplo:
<!-- Esto es un comentario al cdigo que no se ver en pantalla -->
PARA WEB
15
Ejemploprcticon2.FormatoenHTML
En el editor de textos copiamos:
<BODY>
<CENTER><H1>Comandos básicos</H1></CENTER>
<!-- Este documento contiene todo lo que he aprendido hasta ahora sobre HTMl ->
<H2>Párrafos</H2>
<P>Este es mi primer párrafo del ejemplo 2</P>
<P>Este es mi segundo parráfo. Aqu hay una ruptura de lnea<BR>de
texto</P>
<HR>
<H2>Listas</H2>
<H3>Ordenadas</H3>
<P>La <FONT SIZE="+1"><I>musica</I></FONT> que mas me gusta es <I> (en orden
de preferencia): </I></P>
<OL>
<LI>El rock</LI>
<LI>El jazz <!-- la marca LI no necesita de la etiqueta de cierre -->
<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>
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>
<P>Esta es la sección 2 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="tres">Seccin tres</A></H3>
<P>Esta es la sección 3 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="cuatro">Seccin cuatro</A></H3>
<P>Esta es la sección 4 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="cinco">Seccin cinco</A></H3>
<P>Esta es la sección 5 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="seis">Seccin seis</A></H3>
<P>Esta es la sección 6 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
<H3><A NAME="siete">Seccin siete</A></H3>
<P>Esta es la sección 7 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al ndice</A>
</BODY>
</HTML>
PARA WEB
HTML ENLACES: A.
18
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.
<H2>Referencias absolutas</H2>
PARA WEB
19
</BODY>
</HTML>
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
23
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
24
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
HTML TABLAS
Eltextoincluidodentrodecadaceldapuedeserformateadoconcualquieradelasetiquetavistas
anteriormente
25
Ejemplodetabla
Aqusemuestraunatablamuysimple:
<TABLE>
<TR><TD>CeldaA1</TD><TD>CeldaB1</TD><TD>CeldaC1</TD></TR>
<TR><TD>CeldaA2</TD><TD>CeldaB2</TD><TD>CeldaC2</TD></TR>
<TR><TD>CeldaA3</TD><TD>CeldaB3</TD><TD>CeldaC3</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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
HTML TABLAS
ElmodificadorBORDERcolocabordesexternoseinternosenlatabla,perolaanchuraquese
especificasoloafectaalosbordesexternos.
26
CELLPADDING:estableceladistanciamnimaenpixelsentrelosbordesdecadacelday
eltextoquevaencerradoenellas.Suvalorpordefectoes1.
CELLSPACING:establecelaanchuraenpixelsdelosbordesdecadacelda.
PARA WEB
HTML TABLAS
Esposiblequequeramosquenuestrotextonoquedeapretadodentrodelasceldas,sinoque
existamsespacioentrelostextosdelasceldascontiguasdeformaquepuedaleersemejor.Esto
puedehacersemediantelosdossiguientesmodificadores:
27
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>
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
29
</TR>
</TABLE>
</BODY>
</HTML>
EDITORES Y CONVERSORES
Enelpresenteapartadoseproveedealgunoscomentariosyreflexionesacercadelusode
herramientasautomatizadasparalageneracindepginasWeb:editoresyconversores.
Editores
Seguramenteustedhavistooconoceprogramasquepuedenasistiraunapersonaenlacreacin
depginasWeb,yquizssehapreguntado:usouneditoroaprendoHTML?
Larespuestaqueyoledaraeslamismaquesiustedmepreguntarasiesmejorsaberaritmtica
oocuparunacalculadora:ambascosasnosecontraponenentres.
Esrecomendablecomenzarporlobsico,procurandoaprenderHTMLbien,creandodocumentos
con editores de texto plano. Despus si se desea se puede ocupar una combinacin editor de
textoplanomseditorHTMLparacreardocumentos,afindeexplotaralmximolascapacidades
deambossistemas.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
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
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
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.
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
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.
CambiaelTtuloporMiprimerapgina.
EnColordeFondoescribe#CCCCFF,deestemodoelfondodeldocumentopasaraserdecolor
azul.
SeguidamentepulsasobreelbotnAceptar.
PARA WEB
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:
PARA WEB
34
SeleccionalaprimeralneadetextoycambiaelFormatoporEncabezado1yelcolorpor#000066,
talycomosemuestraenlasiguienteimagen.
Despusdeesto,laaparienciadelaprimeralneahabrcambiado.Seleccionalaimagenylasdos
timaslneasdetexto.Pulsasobreelbotn
paracentrarlos.
Unavezhayascentradolaimagenylasotrasdoslneassiguientes,seleccionalasegundalneade
texto,queannohasidomodificada.CambiaelFormatoporEncabezado3,pulsaunavezsobreel
botn
ypulsatresvecessobreelbotn
PARA WEB
35
Al
La barra de ttulo
La barra de mens
La barra de herramientas estndar
PARA WEB
36
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
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
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.
PARA WEB
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
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.
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):
Perro
Gato
Aves
Canario
Loro
Hamster
lista
con
vietas
o
o
Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los
caracteresmsutilizadosquenopuedenserintroducidosmedianteteclado.
Paraintroduciralgunodeestoscaracteresentustextossloseleccinaloenlalistayapareceren
lavistadeDiseo.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
HazclicenelmenInsertaryseleccionalaopcin
HTMLverseldesplegabledelaimagendeladerecha.
43
HIPERENLACES EN DW8
Referenciaabsoluta:
Conducealsitioenelqueseencuentraeldocumentoutilizandolarutacompletadelarchivo.
LaubicacinesenInternet,porejemplo,http://www.misitio.com/pagina/pagina1.html.
Referenciarelativaaldocumento:
Conduceaundocumentosituadodentrodelmismositioqueeldocumentoactual,peropartiendo
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
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
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
_top:Abreeldocumentovinculadoenlaventanacompletadelnavegador.
46
IMGENES EN DW8
ParainsertarunaimagenhayquedirigirsealmenInsertar,alaopcinImagen.Despusdeesto,
yaesposibleseleccionarunaimagenatravsdelanuevaventana.
CuandoseleccionamosunaimagenelInspectordepropiedadesmuestraestaapariencia:
Unrolloveresunaimagenquecambiaporotracuandoelpunterosesitasobreella.Estetipode
imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas
pginas.
Aqutienesunejemploderollover.Sitaelpunterosobrelparaverquesloqueocurre.
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
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
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
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.
DW8
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
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
DW8 Formularios en dw8
Spiderman
Lista/Men
Unalistaomenesunelementodeformularioquellevaasociadaunalistadeopciones.
--- Elige opcin lista --
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
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.
PARA WEB
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
ParainsertarunarchivodeaudioenundocumentotienesquedirigirtealmenInsertar,Meda,
opcinPlugin.
55
LosformatosdevdeoquesuelenutilizarseenInternetsonelAVI,el MPEGyelMOV.
ParainsertarunarchivodevdeoenundocumentotienesquedirigirtealmenInsertar,Meda,
opcinPlugin.
Aladerechatienesunejemplodeunarchivodevdeo,paraelquesemuestranloscontrolesde
vdeo.Puedesreproducirlopulsandosobreloscontroles.
Elinspectordepropiedadesparalosarchivosdevdeoinsertadosdeestaformaeselmismoqueel
delosarchivosdeaudio,yaqueambosseinsertancomoPlugin.
Lasplantillaspuedencrearsedesdecero,oapartirdeunapginayaexistente.
UnaformadecrearunaplantilladesdeceroesatravsdelpanelArchivos,pestaaActivos.
LapestaaActivossepuedeabriratravsdelmenVentana,opcinActivos.Tambinpulsando
F11.
Unavezabiertoelpanelhayqueseleccionarelbotn
,parapodertrabajarconlasplantillas.
Los botones inferiores del panel Activos
sonsimilaresalosdelpanelEstilosCSS.
Cuandosepulsaesebotnapareceunnuevodocumentoenlalistadeplantillas,alqueesposible
cambiarleelNombrepulsandopreviamentesobrel.
Paramodificarunaplantillalaseleccionamosdelalistaypulsamoselbotn
Paraeliminarunaplantillalaseleccionamosdelalistaypulsamoselbotn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automticamente.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
Paracrearunanuevaplantillahayquepulsarsobreel
botn (Siestebotnnoestactivado,pulsaconel
botnderechodelratnyeligeNuevaPlantilla).
56
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
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
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.
PARA WEB
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.
Elinspectordepropiedadesparalasreglaseselsiguiente
PARA WEB
61
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
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
CuandounusuariocontratalosserviciospremiumdeunproveedordeaccesoaInternet,adems
delaconexinrecibecasillasdeemaily,enmuchoscasos,unespacioparahospedarunapgina
personal de prestaciones limitadas. Esto constituye para muchos la primera experiencia para
publicarcontenidosenlaWeb.
62
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.
L.I. Irving Santamara Domnguez DISEO DE SOFTWARE
PARA WEB
Comopasosprincipalesdebemos:
63
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