Curso-de-HTML by Priale PDF

Manual del alumno
Versin1.1
Profesor:CdricSimon
SolucionJava.com
<HTML>
www.solucionjava.com
Ing.CedricSimonTel:22680974Cel:88882387Email: c e d r i c @ s o l u c i o n j a v a . c o m Web:
Curso de HTML
CursodeHTML
Pagina2de36
ndice
ndice....................................................................................................................................................................................2
1 Introduccin al curso.........................................................................................................................................................4
1.1 Objetivo de este curso................................................................................................................................................4
1.2 Manual del alumno.....................................................................................................................................................4
1.3 Ejercicios prcticos....................................................................................................................................................4
1.4 Requisitos para atender a este curso........................................................................................................................4
2 Versiones del HTML..........................................................................................................................................................5
2.1 HTML..........................................................................................................................................................................5
2.2 Navegadores web........................................................................................................................................................5
2.2.1 Internet Explorer...................................................................................................................................................5
2.2.2 Netscape................................................................................................................................................................6
2.2.3 Firefox...................................................................................................................................................................6
2.2.4 Enlaces..................................................................................................................................................................6
3 Primera pgina...................................................................................................................................................................7
3.1 El cdigo .....................................................................................................................................................................7
3.2 La explicacin ............................................................................................................................................................7
3.3 El cuerpo del documento ..........................................................................................................................................8
4 Formateo bsico ................................................................................................................................................................9
4.1 Formato del prrafo ..................................................................................................................................................9
4.2 Las 6 cabeceras ..........................................................................................................................................................9
4.3 Cambiando el tipo de letra .....................................................................................................................................10
4.4 Formato de frase ......................................................................................................................................................10
4.5 Otros elementos .......................................................................................................................................................11
5 Caracteres especiales ......................................................................................................................................................12
5.1 Caracteres extendidos en HTML ...........................................................................................................................12
5.2 Caracteres de control ..............................................................................................................................................12
6 Enlaces ............................................................................................................................................................................13
6.1 La etiqueta <A> .......................................................................................................................................................13
6.2 Las URLs ..................................................................................................................................................................13
6.2.1 http ......................................................................................................................................................................13
6.2.2 https ....................................................................................................................................................................13
6.2.3 ftp .......................................................................................................................................................................13
6.2.4 mailto ..................................................................................................................................................................13
6.2.5 ruta_relativa/fichero............................................................................................................................................14
6.3 Anclas .......................................................................................................................................................................14
7 Listas ................................................................................................................................................................................15
7.1 Listas desordenadas ................................................................................................................................................15
7.2 Listas ordenadas ......................................................................................................................................................15
7.3 Listas de definiciones ..............................................................................................................................................16
Versin1.1
Reproduccinprohibida
CursodeHTML
Pagina3de36
8 Imgenes .........................................................................................................................................................................17
8.1 Imgenes y enlaces ..................................................................................................................................................17
8.2 Alineacin respecto al texto ....................................................................................................................................17
9 Formateo fino ..................................................................................................................................................................18
9.1 Cambio de color .......................................................................................................................................................18
9.2 Tamaos del texto ....................................................................................................................................................18
9.3 Tipo de letra .............................................................................................................................................................18
10 Estructura del documento .............................................................................................................................................19
10.1 La cabecera ............................................................................................................................................................19
10.2 El cuerpo ................................................................................................................................................................20
11 Tablas ............................................................................................................................................................................21
11.1 Definir las filas .......................................................................................................................................................21
11.2 Definir las celdas ....................................................................................................................................................22
11.3 Ttulo de la tabla ....................................................................................................................................................22
12 Formularios ...................................................................................................................................................................23
12.1 Cajas de texto .........................................................................................................................................................23
12.2 Otros elementos .....................................................................................................................................................25
13 Controles avanzados para formularios ........................................................................................................................26
13.1 Botones ...................................................................................................................................................................26
13.2 Etiquetas .................................................................................................................................................................26
13.3 Agrupacin de elementos ......................................................................................................................................27
13.4 Desactivacin de elementos ..................................................................................................................................27
14 Marcos ...........................................................................................................................................................................28
14.1 Etiqueta <FRAMESET> ......................................................................................................................................28
14.2 Etiqueta <FRAME> ..............................................................................................................................................29
14.3 Acceso a otros marcos ...........................................................................................................................................29
14.3.1 _top ...................................................................................................................................................................30
14.3.2 _blank ...............................................................................................................................................................30
14.3.3 _self ..................................................................................................................................................................30
14.3.4 _parent ..............................................................................................................................................................30
15 Hojas de estilo ...............................................................................................................................................................31
15.1 Clases ......................................................................................................................................................................31
15.2 Etiquetas <SPAN> y <DIV> .................................................................................................................................32
16 Hojas de estilo: referencia ............................................................................................................................................33
16.1 Propiedades de bloque ..........................................................................................................................................33
16.2 Propiedades de tipo de letra .................................................................................................................................33
16.3 Propiedades de formato del texto ........................................................................................................................34
16.4 Propiedades de color y fondo ...............................................................................................................................34
16.5 Propiedades de clasificacin .................................................................................................................................34
17 Tabla completa de caracteres del HTML 2.0................................................................................................................35
Versin1.1
CursodeHTML
Pagina4de36
1 Introduccinalcurso
1.1 Objetivodeestecurso
EnestecursovamosadescubrirellenguajeHTML.
1.2 Manualdelalumno
Estemanualdelalumnoesunaayudaparaelalumno,paratengaunrecuerdodelcurso.Estemanual
contieneunresumendelasmateriasquesevanaestudiarduranteelcurso,peroelalumnodeberade
tomarnotaspersonalesparacompletasestemanual.
1.3 Ejerciciosprcticos
Paracaptarmejorlateora,seharnmuchosejerciciosconlosalumnos,paraprobarlateorayverificar
laintegracindelamateria.
Tambin,elalumnopodrcopiarsuscdigosenundisquetealfindelcursoparallevarse,confinde
seguirlaprcticaensuhogar.
1.4 Requisitosparaatenderaestecurso
Nohayrequisitosparaestecurso,afueradelmanejobsicodeunacomputadora.
Sielalumnotienedificultadesenunuotrocapitulo,eldebesentirselibredepedirexplicaciones
adicionalesalprofesor.
Versin1.1
CursodeHTML
Pagina5de36
2 VersionesdelHTML
2.1 HTML
LassiglasHTMLsignificanHyperTextMarkupLanguage,loqueparanosotrosquieredecirqueesun
lenguajeparahipertexto.Existenmltiplesformatosdehipertexto(porejemplo,losficherosdeayudade
Windows)yloquetienenencomnesquetodosposeenenlaces.
CuandoseprodujolaexplosindeInternetelestndardeHTMLquecirculabaerael2.0(establecidoen
noviembredel95),demodoquecualquiernavegadorqueencontremossercapazdeinterpretarlo.
Prcticamentetodoloqueveamosenlosprximosseiscaptulosestcontempladoporesteestndar.
Aunquelaversin2.0cumplabienelobjetivoparaelquesecre,carecadeherramientasparatenerun
controlmnimalmentecomplejodelosdocumentos.Noseconsidernecesarioquelotuviera,yaquepor
aquelentoncesInterneteraunfenmenomsbiencircunscritoalaactividadacadmicayelcontenido
primabasobreeldiseo.
Debidoaello,Netscape(lderdelmercadodenavegadoresporaquelentonces)empezaincluiretiquetas
nuevasnoincluidasenningnestndar.
Porestosproblemas,elIETF(elcomitquesueledecidirtodoslosestndaresdentrodeInternet)
comenzaelaborarelborradordelHTML3.0,queresultserdemasiadograndeparalapoca,loque
dificultsuaceptacinenelmercado.
Estollevaunaseriedecompaas(entreellasNetscape,Microsoft,IBM,Sun,etc...)acrearunnuevo
comitllamadoW3C,queeselqueactualmenteelaboralasnuevasversionesdelHTML.Suprimer
trabajoconsistiencrearelborradordelHTML3.2,queincluamuchasdelasmejorasquelos
principalesnavegadores(NetscapeyExplorer)habanintroducidoenInternet,comosonlastablas,los
applets,etc..
Esteborradorfueaprobadoenenerode1997einmediatamenteelW3Csepusoatrabajarenla
elaboracindelsiguienteestndar:el4.0.Enjuliode1997sepresentaelborradordeesteestndar.Por
finseestandarizanlosmarcos(frames),lashojasdeestiloylosscripts(entreotrascosas).El17de
diciembrede1997dichoborradorfuefinalmenteaprobado.
ElHTMLnoesunlenguajemuyestricto.AlcontrariodeotrolenguajecomoXML,elHTMLsoportabien
erroresmenoresdeprogramacin.Ciertosnavegadoressonmssensiblesqueotrosaerroresenelcdigo
HTML.InternetExplorerporejemploesmuytolerantealaserrores.
2.2 Navegadoresweb
SilosnavegadorespruebantodosdepoderaplicaralmximolasrecomendacionesdelHTML4.0existen
ciertasopcionesqueslociertosnavegadoressoportan.Tambin,unmismocdigonoaparecersiempre
igualenunnavegadoreenotro.
2.2.1
InternetExplorer
InternetExplorereselnavegadorpordefectodelossistemasdeMicrosoft.Existenvariasversiones,de
lascualeslaltimaeslaversin6.1.Laversin7estllegando.
Versin1.1
CursodeHTML
Pagina6de36
ComoInternetExplorervienepegadoalWindows,yquelamayoradelosclienteswebutilizanun
sistemaWindows,podemossalirdelprincipioquelamayoradelosclientes,sinoloutilizan,porlo
menostienenInternetExplorerinstaladoensuequipo.
InternetExplorersoportavariasopcionesdeformatoqueotrosnavegadoresnosoportan.Tambin,estas
opcionesnosonsoportadasportodaslasversionesdeInternetExplore.Porfin,InternetExplorertiene
variosproblemasdeseguridad,aseltienequeserpuestoaldaregularmente.
InternetExplorernoesunprogramagratis,elfuncionaconlalicenciadeWindows,ynoesdisponible
bajootrosistemaoperativo.
ExisteunaversindeInternetExplorerenespaol.
2.2.2
Netscape
Netscapeesotronavegadorquetienesusaficionados.ltimamenteperdiunpocodesusaficionados
porloqueFirefoxestcreciendomucho.HayqueanotarqueNetscapeestbasadosobreFirefox.
CmoInternetExplorer,Netscapesoportavariasopcionesdeformatoqueotrosnavegadoresno
soportan.Tambin,estasopcionesnosonsoportadasportodaslasversionesdeNetscape.
ParacontestaralnuevoFirefox,Netscapehabrindadounanuevaversin,numero8.0.
Netscapeesgratisyexisteparadiferentetiposdesistemasoperativos,comoWindowsyLinux.
Netscapesloexisteenversininglesa.
2.2.3
Firefox
Esunnavegadorgratuitoylibre,esdecirquesuscdigofuentesestndisponibleparaelquelosquiere
investigarohacersupropiaversindenavegador(comoNetscapehizo).Firefoxpertenecealafundacin
Mozilla.
En2004llegolaprimeraversingranpblicodeFirefox.Cmoproductogratisylibre,elFirefoxha
sidorecomendadoporlaUnionEuropea,yestmuypopularenEuropa.
ExisteunaversindeFirefoxenespaol.
2.2.4
Enlaces
InternetExplorer:http://www.microsoft.com/ie
Netscape:http://www.netscape.com
Firefox:http://www.firefox.com
Mozilla:http://ww.mozilla.org
Versin1.1
CursodeHTML
Pagina7de36
3 Primerapgina
3.1 Elcdigo
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pagina (chispas). Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.</P>
</BODY>
</HTML>
Elresultadodeesteejemplo.
3.2 Laexplicacin
EllenguajeHTMLsebasaenlasintaxisSGML(tomasiglas).Estoquieredecirquecualquiercosaque
hagamosenHTMLestarencerradaentredosetiquetasdeestamanera:<ETIQUETA parmetros> ...
</ETIQUETA>
Porejemplo:
<HTML> ... </HTML>
UndocumentoHTMLtieneunaestructuraqueloseparaendospartes:cabeceraycuerpo.Enelcuerpo
estarlapginaens,mientrasqueenlacabeceraincluiremosalgunascosasquenosevenalprincipio
peroquepuedenllegarasermuyimportantes.
Loprimeroquehayqueincluirenelcdigoeslacabecera.Laescribimos:
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
Versin1.1
CursodeHTML
Pagina8de36
3.3 Elcuerpodeldocumento
Ahoravamosaindicarelcontenido.Loprimeroserindicarqueestamosenelcuerpodeldocumento:
<BODY> ... </BODY>
Luegopondremoselttuloalgorecalcado:<CENTER><H1>
... </H1></CENTER>
Conestocolocaremoseltextocentrado(<CENTER>)yenformato<H1>(cabecera1)quenosaseguraque
aumentareltamaodeltipodeletralosuficientecomoparaqueseveabastanteresaltado.Luego
separamosesettuloquelehemospuestoalapginadeltextopormediodeunalneahorizontal:<HR>
Lalneahorizontalcarecedeetiquetadecierre.
Yporfinnuestrotexto:
<P>Esta es mi primera pagina (chispas). Por el
momento no s que tendr, pero dentro de
poco pondr aqu muchas cosas interesantes.</P>
Versin1.1
CursodeHTML
Pagina9de36
4 Formateobsico
Sepuedenestablecervariascategorasdentrodelasetiquetasusadasparaformateareltexto.Nosotros
lasdividiremosentreaquellasquesirvenparacambiarprrafosenterosylasquesoncapacesde
formateartirasdecaracteresdentrodelprrafo.
4.1 Formatodelprrafo
Estassonlasetiquetasmsimportantes(excluyendoalgunasqueveremosmsadelante):
Etiqueta
Utilidad
Resultado
<P></P>
Sirve para delimitar un prrafo. Inserta una lnea en

blanco antes del texto.
Soy un prrafo
<CENTER> ...
</CENTER>
Permite centrar todo el texto del prrafo.
Yo soy normal
Yo estoy centrado
<PRE WIDTH=x>
</PRE>
Representa el texto encerrado en ella con un tipo

de letra de paso fijo. Muy til a la hora de
Estoy en paso fijo
representar cdigo fuente. El parmetro WIDTH
especifica el nmero mximo de caracteres en una
lnea.
<DIV ALIGN=x>
... </DIV>
Yo estoy a la izquierda
Yo al centro
Permite justificar el texto del prrafo a la izquierda
Y yo a la derecha (recuerda a la poltica
(ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a
esto, oye)
ambos mrgenes (JUSTIFY)
Yo soy el ms chulo, porque estoy en
todos los lados.
<ADDRESS> ...
</ADDRESS>
Para escribir direcciones (de esas donde vive la

gente, no electrnicas).
Daniel Rodrguez Herrera

C/Ecuador 9, 1B 28220
Majadahonda
<BLOCKQUOTE> ...
</BLOCKQUOTE>
Para citar un texto ajeno. Se suele implementar

dejando mrgenes tanto a izquierda como a
derecha, razn por la que se usa habitualmente.
Me gustara
reencarnarme en las
yemas de los dedos de
Warren Beatty (Woody
Allen)
4.2 Las6cabeceras
ElHTMLnosofreceseisetiquetasdistintasparamostrarcabeceras.Sonstas:
Etiqueta
Resultado
<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2>
Cabecera de nivel 2
<H3> ... </H3>
Cabecera de nivel 3
<H4> ... </H4> Cabecera
de nivel 4
Versin1.1
CursodeHTML
Pagina10de36
<H5> ... </H5> Cabecera
de nivel 5
<H6> ... </H6> Cabecera de nivel 6
4.3 Cambiandoeltipodeletra
Todasestasetiquetasnospermitencambiardeunamanerauotraelaspectodeltipodeletraque
estemosutilizandoysepuedenutilizarcontirasdecaracteresdentrodeunprrafo.
Etiqueta
Utilidad
Resultado
<B> ... </B>
Poneeltextoennegrita.
Soy un texto negro como el tizn
<I> ... </I>
Representaeltextoencursiva.
Estoy ladeado
<U> ... </U>
Parasubrayaralgo.
Como soy muy importante estoy

subrayado
<S> ... </S>
Paratachar.
A m, en cambio, nadie me quiere
<TT> ... </TT>
Permiterepresentareltextoenuntipodeletra
depasofijo.
No soy variable
<SUP> ... </SUP>
Letrasuperndice.
E=mc2
<SUB> ... </SUB>
Letrasubndice.
ai,j=bi,j+1
<BIG> ... </BIG>
Incrementaeltamaodeltipodeletra.
Soy GRANDE
<SMALL> ...
</SMALL>
Disminuyeeltamaodeltipodeletra.
Cre ver un lindo gatito
<BLINK> ...
</BLINK>
Haceparpadeareltexto.Resultaalgoirritante.
Molesto?
4.4 Formatodefrase
Enestoselementosindicaseltipodeinformacinqueencierranlasetiquetas,peronocomose
representan:
Etiqueta
Utilidad
Resultado
<CITE> ... </CITE>
Paracitaruntextoajeno.
Esta frase no es ma
<CODE> ... </CODE>
Paraescribircdigofuente.
int x=0;
<STRONG> ...
</STRONG>
Lacosaesimportante.
Hay cosas importantes.
<EM> ... </EM>
Paradarnfasis.
Hay que poner nfasis en algunas

cosas.
<KBD> ... </KBD>
Textotecleadoporelusuario.
El usuario debe teclear Multivac es el

mejor.
<VAR> ... </VAR>
Representarvariablesdeuncdigo.
La variable x, definida anteriormente...
<SAMP> ... </SAMP>
Pararepresentarunaseriedecaracteres
literalmente.
Estoy en un literal
<ABBR> ... </ABBR>
Abreviaturas.
La WWW usa el protocolo http
Versin1.1
CursodeHTML
Pagina11de36
4.5 Otroselementos
Etiqueta
Utilidad
Resultado
<HR>
Inserta una barra horizontal.
<BR>
Salto de lnea.
Hayunantesyun
despusdesaltaraotralnea

Comentarios.
Estoseescribey<!estono>
Versin1.1
CursodeHTML
Pagina12de36
5 Caracteresespeciales
5.1 CaracteresextendidosenHTML
Lamaneradeincluirloscaracteresextendidos(cuyonmeroestmsalldel127)consisteenencerrar
elcdigoentreloscaracteres&#y;.Aspues,losiguiente:½
nosdeberadarunmedio().Tambinexisteunaseriedesinnimosparapoderrecordarconms
facilidadestoscaracteres.As,porejemplo,½tambinsepuedeescribircomo½.Vamosa
veralgunosdeestoscdigos,losmstilesalahoradeescribirenespaol:
Cdigo
Resultado
á, Á, é, É,...
, , , , , , , , y
ñ y Ñ
¿
¡
º
ª
™ o
©
®

(espacio en blanco que no puede ser usado para saltar de lnea)
5.2 Caracteresdecontrol
EnelHTMLexistencuatrocaracteresdecontrol,queseusanparaformaretiquetas,establecer
parmetros,etc..Parapoderemplearlossinriesgodeberemosescribirlossiguientecdigos:
Cdig
Resultado
o
<
<
>
>
&
&
"
"
LatablacompletadecaracteresdelHTML2.0estaenanexadeestemanual.
Versin1.1
CursodeHTML
Pagina13de36
6 Enlaces
Unenlaceesunazonadetextoogrficosquesisonseleccionadosnostrasladanaotrodocumentode
hipertextooaotraposicindentrodeldocumentoactual.SiendoHTMLellenguajedeInternet,la
diferenciaqueposeeconrespectoaotrostiposdehipertextoesqueeseotrodocumentopuedeestar
fsicamenteenlaotrapuntadelplaneta.SonlosenlacesloquehacendelatelaraaoWorldWideWeb
loquees.
6.1 Laetiqueta<A>
Paraincorporarunenlacehayqueutilizarestaetiqueta.Todoloqueencerremosentre<A>y</A>,ya
seatextooimgenes,serconsideradocomoenlaceysufrirdosmodificaciones:
Sevisualizardemaneradistintaenelnavegador.Eltextoaparecersubrayadoydeuncolordistintoal
habitual,ylasimgenesestarnrodeadasporunbordedelmismocolorqueeldeltextodelenlace.
Alpulsarsobreelenlace,seremosenviadosaldocumentoqueapuntabaelenlace.
Paraqueelenlacesirvaparaalgodebemosespecificarleunadireccin.Loharemosdelasiguiente
manera:<A HREF="direccion">Pulsame</A>
LadireccinestarenformatoURL(UniformResourceLocator).
6.2 LasURLs
UnaURLnosindicatantounadireccindeInternetcomoelservicioqueesperamosnosofrezcael
servidoralquecorrespondeladireccin.Tieneelsiguienteformato:
servicio://mquina:puerto/ruta/fichero@usuariodondeelserviciopodrserunodelossiguientes:
6.2.1
http
Eselservicioinvocadoparatransmitirpginaswebyelqueusaremosnormalmenteenlosenlaces.
6.2.2
https
Esunainnovacinsobreelanterior,quenospermiteaccederaservidores(generalmentecomerciales)
quenosofrecenelusodetcnicasdeencriptacinparaprotegerlosdatosqueintercambiemosconlde
terceraspersonas.
6.2.3
ftp
Permitetrasmitirficherosdesdeservidoresdeftpannimo.Sinolepedimosunficherosinoun
directorio,engeneralelnavegadorseencargardemostrarnoselcontenidodelmismoparaque
podamosescogerlocmodamente.Utilizandola@podremosaccederaservidoresprivados.
6.2.4
mailto
Parapodermandarunmensaje.Porejemplo,laURLmailto:multivac@idecnet.commemandaraun
mensajeam.
Versin1.1
CursodeHTML
6.2.5
Pagina14de36
ruta_relativa/fichero
Enlarutarelativapodremosutilizarlosdospuntos(..)paraaccederaldirectoriopadreocomenzarcon
labarradiagonal(/)paraaccederaunarutaabsolutadentrodenuestroordenador.
6.3 Anclas
Comodijimos,esposibleaccederaunaposicindeldocumentoHTML.Parahacerlo,primerodebemos
especificarellugardeldocumentoalquequeremosacceder:
<A NAME="ancla">
Parapoderverbiencomofunciona,hecolocadounancladeejemploenelttulodelaseccin6.2.Para
poderaccederaeselugarincluimoselenlacedeestamanera:
<A HREF="#ancla">Vamos a donde antes</A>
Tambinpodemosaccederaanclassituadasendocumentosremotos.Paraelloaadiremoselnombredel
anclaalURLas:
<A HREF="enlaces.html#ancla">Otra vez</A>
Versin1.1
CursodeHTML
Pagina15de36
7 Listas
ExistenvariostiposdelistasenHTML.Todasellassepuedenmeterunasdentrodeotrasformando
rbolesmuybonitosypreciosos.Todoslostipossiguenelsiguienteformato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_listapuedeserunadelassiguientes:DIR,
DL, MENU, OL y UL.
7.1 Listasdesordenadas
Laetiqueta<UL>nospermitepresentarlistasdeelementossinordenalguno.Cadaelementodelalista
irnormalmenteprecedidoporuncrculo.
Porejemplo:
<UL>
<LI>Primer elemento
</UL>
severcomo
Primer elemento
Segundo elemento
Laetiqueta<UL>admiteestosparmetros:
Parmetro
COMPACT
TYPE="disc",
"circle", "square"
Utilidad
Resultado
Indica al navegador que debe representar la lista de la manera

ms compacta posible.
Indica al navegador el dibujo que preceder a cada elemento de

la lista. Para mayor flexibilidad se admite tambin como
parmetro de <LI>.
Primer
elemento
Segundo
elemento
Tipo disc
Tipo circle
Tipo square
Tambinsonlistasdesordenadasaquellasqueutilizanlasetiquetas<DIR>y<MENU>.
Enprincipiotenancomopropsitorepresentarunalistaestilodirectorio(multicolumna)otipomen
(unasolacolumna).Enlaprcticalosnavegadoreslohanimplementadocomosinonimosde<UL>,porlo
quenolosestudiaremosaqu.
7.2 Listasordenadas
Laetiqueta<OL>nospermitepresentarlistasdeelementosordenadosdemenoramayor.Normalmente
cadaelementodelalistairprecedidoporsunmeroenelorden.
Versin1.1
CursodeHTML
Pagina16de36
Porejemplo:
<OL>
<LI>Primer elemento
</OL>
severcomo
1. Primerelemento
2. Segundoelemento
Laetiqueta<OL>admiteestosparmetros:
Parmetro
COMPACT
Utilidad
Resultado
1. Primer
elemento
Indicaalnavegadorquedeberepresentarlalistadelamanera
mscompactaposible.
2. Segundo
elemento
1. Tipo 1
a.Tipo a
TYPE="1", "a",
"A", "i", "I"
Indicaalnavegadoreltipodenumeracinqueprecederacada
elementodelalista.Paramayorflexibilidadseadmitetambin
comoparmetrode<LI>.
A.Tipo A
i.Tipo i
I.Tipo I
START="num"
Indicaalnavegadorelnmeroporelqueseempezaracontarlos
elementosdelalista.
3. Primer
elemento
4. Segundo
elemento
1. Primer
elemento
VALUE="num"
Atributode<LI>,actacomoSTARTperoapartirdeunelemento
predeterminado.
4. Segundo
elemento
5. Tercer
elemento
7.3 Listasdedefiniciones
Esteeselnicotipodelistaquenoutilizalaetiqueta<LI>.Altenercomoobjetivopresentarunalistade
definiciones,demodoquetienequerepresentardemaneradistintaelobjetodefinidoyladefinicin.
Estosehacepormediodelasetiquetas<DT>y<DD>:
<DL>
<DT>Primer elemento<DD>Es un elemento muy bonito.
<DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>
severcomo
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.
Versin1.1
CursodeHTML
Pagina17de36
8 Imgenes
Paraincluirgrficoseimgenesennuestraspginasutilizaremoslaetiqueta<IMG>deestamanera:
<IMG SRC="fichero_grafico" ALT="descripcion">
ElparmetroSRCespecificaelnombredelficheroquecontieneelgrfico.Losformatosestndarenla
redsonelGIFyelJPG.LaltimasversionesdenavegadoresaceptantambinelformatoPNG.
ElparmetroALTespecificaeltextoquesemostrarenlugardelgrficoenaquellosnavegadoresque
noseancapacesdemostrarlos(comoelLynx)yenelsupuestodequeelusuarioloshayadesactivado.
Algunosnavegadoreslomuestrancuandopasamoselratnporencimadelaimagen.Esporesoque,
aunquealgunosusuariosnololleguenavernunca,convieneponerlosiempre.Dehecho,elestndar
HTML4.0obligaahacerlo.
Existendosatributosque,aunqueopcionales,convieneindicarsiempre:laalturaylaanchuradel
grficoenpixels.Deestemodo,elnavegadorpuedemostrarunrecuadrodeltamaodelaimagen
mientraslavaleyendodelaredyaspodermostrarelrestodelapginacorrectamentemientrastanto.
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH="88" HEIGHT="31">
Paralosmenosavezadoseningls,decirqueWIDTHeslaanchurayHEIGHTlaaltura.
8.1 Imgenesyenlaces
Suelesercomnincluirenlacesdentrodeungrfico.Enesecaso,pordefecto,losnavegadoresle
pondrnunbordealgrficoparaindicarqueefectivamenteesunenlace.Prctico,perolamayoradelas
vecesbastantepocoesttico.PormediodelparmetroBORDERpodremosalterarelgrosordeeseborde
oinclusoeliminarloponindoloacero.
<A HREF="http://www.netscape.com">
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH="88" HEIGHT="31"
BORDER="0"></A>
sevesinbordo.
8.2 Alineacinrespectoaltexto
Parapodermaquetarconjuntamentetextoygrficos,elHTMLproporciona,pormediodelparmetro
ALIGN,lassiguientesmanerasdealinearunaimagenrespectodeltextoquelaacompaa:
Valorde
ALIGN
Utilidad
Resultado
TOP
Coloca el punto ms alto de la imagen coincidiendo con ms

alto de la lnea de texto actual.
MIDDLE
Alinea el punto medio (en altura) de la imagen con la base del

texto.
BOTTOM Por
defecto
Alinea el punto ms bajo de la imagen con la base del texto.
LEFT
Coloca la imagen a la izquierda del texto.
Este es el texto
RIGHT
Coloca la imagen a la derecha del texto.
Este es el texto
Versin1.1
Este es el texto
Este es el texto
Este es el texto
CursodeHTML
Pagina18de36
9 Formateofino
Loidealcuandotrabajascontextoserapodercambiarloaltamaoqueteviniesebien,ponerlode
coloresycambiareltipodeletra.Todoestopuedeshacerlograciasalaetiqueta<FONT>.
9.1 Cambiodecolor
ParahacerlovamosautilizarelparmetroCOLOR.Lamaneradeespecificarleelcolorescomnatodas
lasetiquetasHTML:obienindicandoelnombre,siesuncolornormal,obienespecificandoelporcentaje
derojo,verdeyazul(cdigoRGB)delmismo.Loscoloresreconocidossonlossiguientes:Black, Silver,
Gray, White, Maroon, Red, Purple, Fuchsia
Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.
<FONT color="red">Estoy en rojo</FONT>
ElmododeindicarelcolorRGBeselsiguiente:
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
COLOR="#FF0000">D</FONT>
COLOR="#EF0000">E</FONT>
COLOR="#DF0000">G</FONT>
COLOR="#CF0000">R</FONT>
COLOR="#BF0000">A</FONT>
COLOR="#AF0000">D</FONT>
COLOR="#9F0000">A</FONT>
COLOR="#8F0000">D</FONT>
COLOR="#7F0000">O</FONT>
Loquenosmostraralosiguiente:DEGRADADO
Laprimeracomponenteenhexadecimaleselrojo,lasegundaelverdeylaterceraelazul(RedGreen
Blue,RGB).
9.2 Tamaosdeltexto
ElparmetroutilizadoparaindicareltamaoesSIZE.Puedeutilizarseparaindicartamaosabsolutos:
SIZE=1
SIZE=2 SIZE=3 SIZE=4
SIZE=5 SIZE=6
SIZE=7
Eltamaopordefectoes3.Tambinsepuedeutilizarlosmodificadores+yparaindicarunincremento
(odecremento)relativodeltamaodeltipodeletra.As,porejemplo,siindicamosquequeremosun
tamaode2estaremospidiendoalnavegadorquenosmuestreeltipodeletradosvecesmspequeo.
<FONT SIZE=2>Tamao 2<FONT SIZE="+3">Tamao 6</FONT></FONT>
9.3 Tipodeletra
Porltimo,podemosespecificarelnombredeltipodeletraquequeremosutilizargraciasalparmetro
FACE.Comoenprincipionotenemosmaneradesaberquetipodeletratieneinstaladoelordenadordel
usuarioqueestviendonuestraspginas,podemosindicarmsdeunoseparadoporcomas.Siel
navegadornoencuentraningunoseguirutilizandoelquetienepordefecto:
<FONT FACE="Helvetica,Arial,Times">No s como voy a salir exactamente</FONT>
DetodosmodosesrecomendablenoutilizarconfeciegaesteatributoenInternet,yaqueimpideque
todospuedanvernuestraspginascomonosotros.
Versin1.1
CursodeHTML
Pagina19de36
10 Estructuradeldocumento
LaestructuradeundocumentoHTMLsepuederesumiras:
tipodedocumento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
EneltipodedocumentodeberemosespecificaraqueestndardelHTMLrespondenuestrapginaentre
unadelassiguientesopciones:
CumpleelestndarHTML4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">
10.1 Lacabecera
Sueleserellugarmsindicadoparacolocaraquelloselementosdelapginaquenoalterenelcontenido
delamisma,aunquesilaformadepresentarloysucomportamiento.Esporesoqueesellugarms
recomendableparacolocarlosscriptsylashojasdeestilo,comoveremosenloscaptulos
correspondientes.
Ademsdelttulodelapgina,unodeloselementosquesepuedenincluiraqusonlosMETA.Entre
otrascosas,sirvenparaindicarpropiedadesdelapginacomopuedaserelnombredesuautor.Por
ejemplo:<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]"> nosindicarala
herramientaconquehemoscreadolapgina(enestecasolaversin4.03enespaolparaWindows95
delComposerdeNetscape).Estassonlaspropiedadesmscomunes:
Propiedad
Utilidad
AUTHOR
Autor de la pgina.
GENERATOR
Herramienta utilizada para hacer la pgina.
CLASSIFICATION
Palabras que permite clasificar la pgina dentro de un buscador jerrquico (como Yahoo).
KEYWORDS
Palabras clave por las que encontrarn la pgina en los buscadores.
DESCRIPTION
Descripcin del contenido de la pgina.
Haytambinotroelementointeresantequepodremosincluirennuestrascabeceras.Cuando
especificamosunaURLrelativaenunenlace,enprincipioesparaaccederaunapginasituadaen
nuestromismoservidor.Sinembargo,siespecificamos:<BASE HREF="http://www.hornet.org/music">
AhoratodasnuestrasURLsrelativassereferirnaldirectorio/musicdentrodelservidor
http://www.hornet.org.
Versin1.1
CursodeHTML
Pagina20de36
10.2 Elcuerpo
Obviamentenovoyaexplicarloqueentradentrodelcuerpo(prcticamentetodosloscaptulosdelcurso
intentanhacerlo)sinolosparmetrosqueadmitelaetiqueta<BODY>:
Parmetro
Utilidad
BACKGROUND
Permite definir un grfico de fondo para la pgina.
BGCOLOR
Permite definir el color de fondo de la pgina.
BGPROPERTIES
Cuando es igual a FIXED el grfico definido como fondo de la pgina permanecer

inmvil aunque utilicemos las barras de desplazamiento.
TEXT
Cambia el color del texto.
LINK
Cambia el color de un enlace no visitado (por defecto azul).
VLINK
Cambia el color de un enlace ya visitado (por defecto prpura).
ALINK
Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
LEFTMARGIN y
TOPMARGIN
Especifican el nmero de pixels que dejar de margen entre el borde de la ventana y el

contenido de la pgina. Se suelen utilizar para dejarlos a cero.
MARGINWIDTH y
MARGINHEIGHT
Ms o menos equivalentes a los anteriores, pero stos funcionan en Netscape.
Versin1.1
CursodeHTML
Pagina21de36
11 Tablas
Lastablassonposiblementelamaneramsclaradeorganizarlainformacin.Tambineselmodoms
adecuadodemaquetartextoygrficosdeunamaneraalgomscontroladaqueconlosparmetrosALIGN.
Lastablassedefinendelasiguientemanera.Primero,lascaractersticasdelatabla,luegolasdecada
filaydentrodesta,cadacelda.Aspues,unatablacon2filasy3columnassedeclararas:
Cdigo
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Resultado
1,1 1,2 1,3

2,1 2,2 2,3
LosatributosdeTABLE:
Parmetro
Utilidad
BORDER
Especifica el grosor del borde que se dibujar alrededor de las celdas. Por defecto es cero, lo que
significa que no dibujar borde alguno.
CELLSPACING
Define el nmero de pixels que separarn las celdas.
CELLPADDING
Especifica el nmero de pixels que habr entre el borde de una celda y su contenido.
WIDTH
Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura
total disponible para l (pondremos "100%" si queremos que ocupe todo el ancho de la ventana
del navegador).
ALIGN
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Siahora,porejemplodefinimosahoralatablaanteriorcomo<TABLE
veremoslosiguiente:
1,1
1,2
1,3
2,1
2,2
2,3
BORDER=1 WIDTH="50%" ALIGN=CENTER>
11.1 Definirlasfilas
Ahoraquehemosdefinidolatablanostocahacerlomismoconlasfilas.Cadafilasedefineconuna
etiquetaTR,quetienelossiguientesatributos:
Parmetr
o
Utilidad
ALIGN
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o
centro (CENTER).
VALIGN
Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro
(MIDDLE).
Versin1.1
CursodeHTML
Pagina22de36
11.2 Definirlasceldas
Porltimo,nosquedadefinircadaceldagraciasalaetiquetasTDyTH.Estasetiquetasson
equivalentes,perolaltimaseutilizaparaencabezados,demodoquesuinteriorseescribirpordefecto
ennegritaycentrado.Estossonlosatributosdeambas:
Parmetro Utilidad
ALIGN
Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro

(CENTER).
VALIGN
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
WIDTH
Especifica la anchura de la celda. Tambin se puede especificar tanto en pixels como en

porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al ancho
total de la tabla (no de la ventana del navegador).
NOWRAP
Impide que, en el interior de la celda, se rompa la lnea en un espacio.
COLSPAN
Especifica el nmero de celdas de la fila situadas a la derecha de la actual que se unen a sta
(incluyendo la celda en que se declara este parmetro). Es por defecto uno. Si se pone igual a
cero, se unirn todas las celdas que queden a la derecha.
ROWSPAN
Especifica el nmero de celdas de la columna situadas debajo de la actual que se unen a sta.
Posiblementelosdosltimosparmetrosnopuedanquedarclarossinejemplos.Dehecho,an
entendiendoperfectamentesufuncineshabitualqueconfundamosaunoconotro.Perobueno,vamosa
verunatablade3x3conunaceldaqueseuneaunadeladerechayotraqueseuneaotradedebajo:
Cdigo
Resultado
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
1,1y1,2
2,1y3,1
1,3
2,2 2,3
3,2 3,3
Comopodemosver,cuandodeclaramosunceldaconROWSPAN oCOLSPAN,nodeberemosdeclararlasceldas
"absorbidas"olacreacindelatablasenoscomplicardehorriblemanera.
11.3 Ttulodelatabla
Porltimo,vamosavercomodefinirunttuloalatabla.EstosehacepormediodelaetiquetaCAPTION.
Paravercmofunciona,vamosaincluirloenladeclaracindelatablaanterior:
Cdigo
Resultado
<TABLE BORDER=1>
<CAPTION>
Ejemplo de tablas
</CAPTION>
...
</TABLE>
Ejemplodetablas
1,1y1,2
2,1y3,1
Versin1.1
1,3
2,2 2,3
3,2 3,3
CursodeHTML
Pagina23de36
12 Formularios
Unadelasmayoresventajasdelawebesqueresultatremendamenteinteractivo.Losusuariosdeuna
pginanotienenmsqueescribiralautordelamismaparacomentarlecualquiercosadelamisma.Sin
embargo,sideseamosquenosdiganslounascosasconcretas(responderaalgunapregunta,seleccionar
entrevariasopciones,etc..)deberemosutilizarformularios.Porejemplo,
<FORM ACTION="" METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>Cuantos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>
severas:
Nombre:
Cuantos son dos y dos?
3
4
5
Comprobar
Elbotnnohacenadaporquenohemosdefinidoqudebehacer,asquesedbuenosynolopulsis.
Todosloselementosdeunformulariodebenestarencerradosentre<FORM>y</FORM>.Como
parmetroscabedestacartres.ACTIONdefineelURLquedebergestionarelformulario.Puedeser
unadireccindecorreo(precedidadelinevitablemailto:,encuyocasodeberemosaadirelparmetro
ENCTYPE="text/plain"paraqueloquerecibamosresultelegible.
Porotrolado,tenemoselparmetroMETHODdefinelamaneraenquesemandarelformulario.Es
recomendableutilizarPOST.
12.1 Cajasdetexto
Existentresmanerasdeconseguirqueelusuariointroduzcatextoennuestroformulario.Lasdos
primerasseobtienenpormediodelaetiqueta<INPUT>:
<INPUT TYPE="TEXT">
<INPUT TYPE="PASSWORD">
Estossonlosatributosparamodificarlos:
Parmetr
o
Utilidad
SIZE
Tamao de la caja de texto.
MAXLENGTH
Nmero mximo de caracteres que puede introducir el usuario.
Versin1.1
CursodeHTML
Pagina24de36
VALUE
Texto por defecto que contendr la caja.
Porotrolado,puedequenecesitemosqueelusuariopuedaintroducirmsdeunalnea.Enesecasose
utilizarlasiguienteetiqueta:
<TEXTAREA>
Por defecto
</TEXTAREA>
Loqueincluyamosentrelasdosetiquetasserloquesemuestrepordefectodentrodelacaja.Admite
estosparmetros:
Parmetr
o
Utilidad
ROWS
Filas que ocupar la caja de texto.
COLS
Columnas que ocupar la caja de texto.
Opciones
Siloquedeseamosesqueelusuariodecidaentrevariasopcionespodremoshacerlodedosmodos.El
primeroeselquevimosenelejemploinicial:
3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR>
5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
ParaasociarvariosbotonesderadioaunamismavariablelespondremosatodoselloselmismoNAME.
Apartedeestoaceptalossiguientesparmetros:
Parmetr
o
Utilidad
VALUE
Este es el valor que asignar a la variable.
CHECKED
Si lo indicamos en una de las opciones esta ser la que est activada por defecto.
Perotambintenemosunaposibilidadqueocupabastantemenos:laslistasdesplegables.Para
emplearlasdeberemosutilizardosetiquetas,SELECTyOPTION:
<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Opera
<OPTION>Lynx
<OPTION>Otros
</SELECT>
LosparmetrosqueadmiteSELECTsonlassiguientes:
Parmetr
o
Utilidad
SIZE
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de seleccin y, si
no, veremos una lista desplegable.
MULTIPLE
Si lo indicamos podremos elegir ms de una opcin.
Versin1.1
CursodeHTML
Pagina25de36
YOPTIONestos:
Parmetro
Utilidad
VALUE
Este es el valor que asignar a la variable.
SELECTED
Si lo indicamos en una de las opciones esta ser la seleccionada por defecto.
Botonesdelformulario
Existendos:unoqueseutilizaparamandarelformularioyotroquesirveparalimpiartodoloquehaya
rellenadoelusuario:
<INPUT TYPE="SUBMIT"><BR>
<INPUT TYPE="RESET">
Podemoscambiareltextoqueelnavegadorponepordefectoenesosbotonesutilizandoelparmetro
VALUE.
12.2 Otroselementos
Puedequenecesitasqueelusuariosencillamentenosconfirmeonieguealgo.Lopodremosconseguirpor
mediodecontrolesdeconfirmacin:
<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a
SiqueremosqueelcontrolestactivadopordefectoleaadiremoselparmetroCHECKED.Elformulario
asignaralavariableNAMEelvaloronuoff.
Porltimo,existelaposibilidaddequenecesitemosque,enelformulario,tengamosalgunavariablecon
unvalorpreviamenteasignado.Porejemplo,entodosloscursosquetengoelformularioeselmismo.Y
dealgunamaneratendrquedistinguirloscuandomelleguen,digoyo.Asqueincluyoalgocomoesto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="HTML 4.0">
Versin1.1
CursodeHTML
Pagina26de36
13 Controlesavanzadospara
formularios
ElestndarHTML4.0hatradovariasmejorasalosformularios,queacercanlosmismosalas
caractersticasquetienenenlenguajescomoJavaoVisualBasic.
13.1 Botones
Unadelascosasquemshanmejoradosonlosbotones.Ahoradisponendeunaetiquetapropia,demodo
quesepuedaencerrarconellatodotipodeelementosHTML,comogrficoso,incluso,tablasenteras.
Comonopodaserdeotramanera,laetiquetaencuestinsellamaBUTTON:
<BUTTON TYPE="button">
<table border="1">
<tr>
<th>Soy una</th>
<th>tabla</th>
</tr>
<tr>
<td>que est</td>
<td>en un botn</td>
</tr>
</table>
</BUTTON>
Losparmetrosdedichaetiquetasonlosnormales,TYPE,quepodrtomarlosvaloresSUBMIT(por
defecto),RESETyBUTTON,NAMEyVALUE.
Porotrolado,ahorapodemosdeclararungrficocomounelementomsdeentrada.comounnuevotipo
dentrodelelementoINPUT:
<INPUT TYPE="image" SRC="graficos/nav.gif" alt="Elije navegador">
EsteelementosecomportardemismomodoqueunbotndetipoSUBMIT,peroaadircomo
informacinenelformulariolascoordenadasxeydondeelusuariolopuls.
13.2 Etiquetas
Hastahora,eltextoqueacompaabaaloscamposdeentradanoestabaasociadoalosmismosde
ningunamanera.As,porejemplo,sipulsbamoseneltextoqueacompaabaauncontrolde
confirmacin,nosucedanada.Ahora,encambio,siutilizamoslaetiquetaLABEL,elcontrolcambiar
deestado(slodisponibleenNetscape5):
<LABEL>
<INPUT NAME="Belleza" TYPE="CHECKBOX">
Me considero guapo/a
</LABEL>
Lobuenoquetieneesquesepuedeusarsinpeligro,yaquenoafectaralosusuariosdenavegadores
antiguos.
Versin1.1
CursodeHTML
Pagina27de36
13.3 Agrupacindeelementos
Hastaahora,nodisponamosdeningunamaneradeagruparvisualmentevarioscontroles,sino
echbamosmanodeelementosquenosondelformulario,comotablasoimgenes.
Ahora,siencerramosunapartedeunformulariodentrodelaetiquetaFIELDSETsemostrarun
rectnguloalrededordelosmismos.Siadems,leindicamosunttulopormediodelaetiquetaLEGEND
nuestrosformulariosquedarnhechosunverdaderoprimor:
<FIELDSET>
<LEGEND>Mi hermoso formulario</LEGEND>
<LABEL>
Mi texto:
<INPUT TYPE="text">
</LABEL>
</FIELDSET>
LEGENDadmitecomoparmetroALIGN,queindicarenqulugarsecolocaelttulo.Pordefectoes
TOP(arriba),pudiendoestartambinabajo(BOTTOM),alaizquierda(LEFT)oaladerecha(RIGHT).
13.4 Desactivacindeelementos
Todosloscontrolesdeunformulariosepuedendesactivar,impidiendoasalusuarioquelosutilice.Se
seguirnmostrandoenpantalla,aunqueconunaspectodistintoparaindicarsutristeestado.Paraello
slotenemosqueindicarleelparmetroDISABLED:
<LABEL DISABLED>Texto:
<INPUT TYPE=TEXT DISABLED>
</LABEL>
Esto,enprincipio,noparecededemasiadautilidad.Paraququeremostenercontrolesdesactivados?
Paraesonolosponemos,no?Lobuenoquetieneesqueelestadodeactivacindeuncontroles
accesibledesdeJavaScript.Esonospermitiractivarodesactivarunapartedenuestroformulario
dependiendodeloqueelusuariohayaintroducidopreviamenteenotroscontrolesdelmismo.
Versin1.1
CursodeHTML
Pagina28de36
14 Marcos
Unmarco(oframe)esunaventanaindependientedentrodelaventanageneraldelnavegador.Cada
marcotendrsusbordesysuspropiasbarrasdedesplazamiento.Ascadapginasedividirenla
prcticaenvariaspginasindependientes.
ParacrearlosnecesitaremosundocumentoHTMLespecfico,quellamaremosdocumentodedefinicin
demarcos.EnlespecificaremoseltamaoyposicindecadamarcoyeldocumentoHTMLque
contendr.Vamosaverunejemplodeestetipodedocumento:
<HTML>
<HEAD>
<TITLE>Mi primera pgina con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero slo podrs ver esta pgina
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Vamosaexplicardetalladamenteesteejemploantesdeinvestigaralgomsafondocadaunadelas
etiquetas.Vemosquelacabeceradelapginaessimilaraundocumentonormal,peroelhabitualBODYes
sustituidoporunFRAMESET.EncadaFRAMESETsedividelaventanaactual(sealageneralounmarco)en
variasventanasdefinidasoporelparmetroCOLSoporROWS.Enste,separadoporcomas,sedefineel
nmerodemarcosyeltamaodecadauno.
Dentrodel<FRAMESET>sehacendoscosas.Primero,definircadaunodelosmarcosponiendolesun
nombreyespecificandoquficheroHTMLlecorrespondemediantelaetiqueta<FRAME>.Porltimo,
especificamosloqueverelusuarioenelsupuesto(cadavezmsraro)dequesunavegadornosoporte
framesdentrodelaetiqueta<NOFRAMES>.Ahoraveremostodosestoselementosenmayordetalle.
14.1 Etiqueta<FRAMESET>
Engeneral,losnavegadoresdibujanunbordedeseparacinentrelosmarcos.Sideseaseliminarlo
puedeshacerlodedosmaneras:enlasetiquetas<FRAME>decadaunadelosmarcoscontiguosalbordea
eliminaroincluyendoelparmetroFRAMEBORDER=0enel<FRAMESET>.
Cuandoeliminaseseborde,podrsvercmoelnavegadordejaanunhuecoentremarcos.Estese
eliminaaadiendolosparmetrosFRAMESPACING=0 BORDER=0.
VamosaexaminarporltimolosparmetrosCOLSyROWS.Deberemosasignarlesunalistadetamaos
separadaporcomas.Seadmitenlossiguientesformatosdetamao:
Conporcentajes:Aligualqueconlastablas,podemosdefinireltamaodeunmarcocomoun
porcentajedelespaciototaldisponible.
Absolutos:Siponemosunnmeroasecas,elmarcocorrespondientetendreltamao
especificadoenpixels.
Sobreelespaciosobrante:Sicolocamosunasterisco(*)estaremosindicandoquequeremos
todoelespaciosobranteparaesemarco.Podemosponerestesmboloenvariosmarcos,quese
repartirnelespacioequitativamentecomobuenoshermanos.Siqueremosqueunotengams
deberemosponerlealasteriscounnmerodelante.As,unmarcoconunespaciode3*sertres
vecesmsgrandequesucompaero,quetieneunasteriscoslo,elpobre.
Porejemplo,elsiguientecdigoesunamuestradecmocombinarlostresmtodos:
Versin1.1
CursodeHTML
Pagina29de36
<FRAMESET COLS="10%,*,200,2*">
Supongamosqueelanchototaldelaventanason640pixels.Elprimermarcoocuparel10%,esdecir,
64pixels.Elterceronecesita200,luegonosquedan476paralosotrosdos.Comoelcuartodebetenerel
dobledeespacioqueelsegundo,tenemosaproximadamente158pixelsparaesteltimoy316parael
cuartomarco.
Hayquetenercuidadocuandousamosvaloresabsolutosenladefinicindemarcos;debemos
asegurarnosdeteneralmenosunmarcoconuntamaorelativosiqueremosestarsegurosdelaspecto
finaldelapgina.
Porltimo,indicarquelasetiquetas<FRAMESET>sepuedenanidar.Estosehaceponiendootro<FRAMESET>
dondenormalmentecolocamoslasetiquetas<FRAME>talqueas:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>
14.2 Etiqueta<FRAME>
Estaetiquetadefinetanslolascaractersticasdeunmarcodeterminado,nodeunconjuntodeellos.
Estossonlosparmetrosqueadmite:
Parmetro
Utilidad
NAME
Asigna un nombre a un marco para que despus podamos referirnos a l.
SRC
Indica la direccin del documento HTML que ocupar el marco.
SCROLLING
Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por
su contenido. Su valor es por defecto AUTO, que deja al navegador la decisin. Las otras
opciones que tenemos son YES y NO.
NORESIZE
Si lo especificamos el usuario no podr cambiar de tamao el marco.
FRAMEBORDER
Al igual que su homnimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminar el borde

con todos los marcos contiguos que tengan tambin este valor a cero.
MARGINWIDTH
Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT
Igual al anterior pero con mrgenes verticales.
14.3 Accesoaotrosmarcos
Pordefecto,cuandopulsamossobreunenlacesituadodentrodeunmarco,lanuevapginaalaque
queremosaccederlaveremosencerradaenesemismomarco.Esposiblequedeseemosqueestono
ocurra.Porejemplo,sitenemosunmarcoquenosirvedendiceyotrodondemostramosloscontenidos
seradeseablequelosenlacesdelmarcondiceseabrieranenelotromarco.Estoesposiblehacerlo
graciasalparmetroTARGET.
Esteparmetrosepuedecolocarentresetiquetas:<A>, <AREA>y<BASE>.Enlasdosprimerassirvepara
indicarelmarcoenelqueabriremoseseenlaceenparticularyelltimomodificaremoselmarcoenel
quepordefectosenosmuestrantodoslosenlaces.
Versin1.1
CursodeHTML
Pagina30de36
Peroparaqueunparmetrofuncione,eshabitualqueleasignemosunvalor,yTARGETnoesuna
excepcin.Paraindicarleelmarcoquedeseamosleasignaremoselnombredelmismo.As,enlos
ejemplosanteriores,sienelmarcollamadoindicetenemosunenlacequequeremosseabraenelmarco
principalpondremos:<A HREF="pagina.html" TARGET="principal">
TambinexistencuatronombresreservadosquepodremosutilizarenelparmetroTARGET:
14.3.1
_top
Eliminatodoslosmarcosexistenteymuestralanuevapginaenlaventanaoriginalsinmarcos.
14.3.2
_blank
Muestralanuevapginaenunaventananuevaysinnombredelnavegador.
14.3.3
_self
Muestralanuevapginaenelmarcodondeestdeclaradoelenlace.
14.3.4
_parent
Muestralanuevapginaenel<FRAMESET>quecontienealmarcodondesedeclaraelenlace.Enelejemplo
quepusimosde<FRAMESET>anidados,unaenlacesituadoenelmarcoejemplocuyoparmetroTARGETfuese
iguala_parenteliminaralaseparacinentrelosmarcosejemployprincipalymostraraenesenuevo
marcolanuevapgina.
Versin1.1
CursodeHTML
Pagina31de36
15 Hojasdeestilo
Lashojasdeestilointentansepararelcontenidodeunpginadelaformadepresentarloenpantalla.
EstolohacenpersonificandoloscambiosquelasetiquetasdeformatoHTMLrealizanennuestrotexto.
Porejemplo,sabemosqueusando<P>tendremosunaprrafonuevoconunaseparacindelanterior
determinada,etc..Conlashojasdeestilotambinpodremosdecirleaunprrafoquetodosutextosea
verdeyqueademsvaatenerunmargenizquierdode30pixels.Porejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Vamosadetenernosentodosloselementos.Paraempezar,laetiquetaHTMLconlaquedeberemos
englobarlashojasdeestiloser<STYLE>,queslopodrestarsituadaenlacabeceradelapgina.Su
parmetroTYPEindicalasintaxisqueutilizaremosparadefinirlas.Enelcasodelashojasencascada
debersertext/css.
Ahoraexaminemoslahojadeestilopropiamentedicha.Indicaremosprimerolaetiquetaquedeseamos
personalizar.Ser<P>.Despus,entrellaves,pondremosunalistadelascosasquequeremosmodificar.
Ennuestrocasosondos,elcolor(enelformatohabitual)yelmargen,quesedefineenpixels.
Hayquedestacarque,aunquemuchasveceslosnavegadorestenganunaciertamangaancha,lasintaxis
CSS(CascadingStyleSheet)essensiblealadiferenciaentremaysculasyminsculas.Convienetener
cuidado.
ElHTML4.0permitedeclararfueradelapginalashojasdeestilo,llevandodeestemodoalextremos
sufilosofadesepararformaycontenido.Sicolocamosnuestrashojasdeestiloenunficherollamado
estilos.css(sololashojas,nolaetiqueta<STYLE>)notendremosmsqueincluirlasiguientelneaenla
cabeceradenuestrodocumentoHTMLparaincluirlasennuestraspginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Vamosavercmoquedaraunprrafoquesiguieselahojadeestiloanterior
Si la cosa va bien, este prrafo estar escrito en verde y con un margen izquierdo de 30 pixels.
Precioso, no? embargo, estoy convencido de que los ms avispados se habrn dado cuenta de que les
estoy ocultando algo. Por lo que he dicho hasta ahora la personalizacin de una etiqueta debera ser
general y en esta pgina slo este prrafo est modificado. No os preocupis demasiado, ahora os
cuento como se hace.
15.1 Clases
Hastaahorahabamosdefinidoestilosparaunaetiquetadeterminada.Perotambinpodemoshacerlo
paraunaclasedeterminada.Estoquesignifica?Puesquesi,porejemplo,definimoslahojadeestilode
laclaseverdedelasiguientemanera:
P.verde {color: green; margin-left: 30px;}
sloestarnverdesyconunmargenizquierdode30pixelsaquellosprrafosdefinidoscon<P
CLASS="verde">.Asdesencillo.
Ampliandounpocomslasposibilidadesdelasclases,sepuedenrealizarexcepciones.Supongamosque
tenemosunosprrafosquequeremosquetenganunosmrgenesdeterminadosycolorverde.Ydeseamos
Versin1.1
CursodeHTML
Pagina32de36
queunosolodeesosprrafos,conlosmismomrgenes,seaazul.Podramosdefinirdosclasesdistintas,
perohayunmtodomejor:usarelparmetroID.Porejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahoratodoslosprrafosdeclaseverdeseran,obviamente,verdesyconunmargende10pixels.Sin
embargoelprrafodefinidopor<P CLASS="verde" ID="ej1">serazul:
Esteprrafoesmuyverde.
Yandaqueeste...
Sinembargo,esteno,fjatequecurioso.
15.2 Etiquetas<SPAN>y<DIV>
Puedeque,aveces,noqueramosmodificarelcomportamientodeunelementosinoquecreemosunestilo
quequeremosacteslo,unestilocompletocreadodelanada.Unaetiquetanuevaypropia.Entonces,
quhacemos?Utilizarlasetiqueta<SPAN> y <DIV>.
Elmtodoessimple.Definimosunaclaserojoquesimplementemodifiqueelcolor(queserrojo).Ahora,
siqueremosqueunaseccindetextoestenrojoloencerraremosentrelasetiquetas<SPAN CLASS="rojo">
y</SPAN>oentre<DIV CLASS="rojo"> y </DIV>.
Ladiferenciaentreambasesque,mientrasSPANrealmentenohacenadaporsmisma,DIVconviertea
todoloqueencierraenunbloqueaparte(poniendounsaltodelneatantoalcomienzocomoalfinal).
Veremosenelsiguientecaptuloquealasetiquetasquesecomportancomobloques(<P>,<H1>,lasque
dijimosmodificanunprrafoentero)selespuedendefiniratributospropiosdesdelashojasdeestilo.Por
ejemplo,sidefinimoslassiguienteshojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
cuyosatributosexplicaremosenlareferenciadelashojasdeestilo,yponemoselsiguientecdigoHTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremosestebelloefecto:
El maravilloso curso de HTML

Enelsiguientecaptulotenisunaguadereferenciacontodos(ocasitodos)losatributosquesepueden
modificarconCSS.
Versin1.1
CursodeHTML
Pagina33de36
16 Hojasdeestilo:referencia
16.1 Propiedadesdebloque
Vamosaempezarconlaspropiedadesdebloque,quedefinencosascomolosmrgenesolacolocacinde
bloquesdecontenidoHTML:
Propiedad
Descripcin
margin-top, margin-right,
margin-bottom, margin-left,
margin: top right bottom left
Posiblesvalores
Distanciamnimaentreunbloqueylosdems
tamao,porcentajeo
elementos.Tantomargincomomargins()seutilizanauto.Pordefectoes
paracambiartodosestosatributosalavez.
cero.
padding-top, padding-right,
Distanciaentreelbordeyelcontenidodeun
padding-bottom, padding-left,
padding: top right bottom left bloque.
tamao,porcentajeo
auto.Pordefectoes
cero.
border-top-width, borderright-width, border-bottomwidth, border-left-width,

Anchuradelbordedeunbloque.
border-width: top right bottom
left
numrico
none, solid o 3D,por
border-style
Estilodelbordedeunbloque.
border-color
Colordelbordedeunbloque.
cualquiercolor
width, height
Tamaodeunbloque.Sumayorutilidadesten
suaplicacinaunelementogrfico.
tamao,porcentajeo
auto,automticopor
defecto.
float
Justificacindelcontenidodeunbloque.
clear
Permisoparaqueotroelementosepuedacolocaranone,pordefecto
suizquierdaoderecha.
ninguno.
defectoninguno(none).
left, right o none,por
defectoninguna.
left, right, both o
16.2 Propiedadesdetipodeletra
Ahoravamosaexaminarlaspropiedadesdeltipodeletraqueelusuariovaaver.Sonlassiguientes:
Propieda
d
Descripcin
Posiblesvalores
font-family
Tipo de letra (que puede ser

genrico) que vamos a usar.
lista de tipos, ya sean genricos o no, separados por comas.
font-size
Tamao del tipo de letra.
xx-small, x-small, small, medium, large, x-large, xx-large,

tamao relativo o tamao absoluto. Por defecto medium.
font-weight Grosor
font-style
del tipo de letra (negrita).
Estilo del tipo de letra (cursiva).
o 100-900 (donde 900 es la

negrita ms gruesa). Por defecto normal.
normal, bold, bolder, lighter
normal, italic, italic small-caps, oblique, oblique smallcaps o small-caps. Por defecto normal.
Caberecordarquelostiposgenricossonserif, sans-serif, cursive, fantasy y monospace.Cadaunode

estostipossernequivalentesaalgunoquepuedatenerinstaladoelordenadordelusuario.As,por
Versin1.1
CursodeHTML
Pagina34de36
ejemplo,enunPCconWindowsinstaladoserifpuedeequivaleraTimesNewRomanymonospacea
Courier.
16.3 Propiedadesdeformatodeltexto
Nuestrosiguienteobjetivovanaserlaspropiedadesdeformatodeltextoquecualquierprocesadorde
textosnospermitecambiar.
Propiedad
Descripcin
Posiblesvalores
line-height
Interlineado.
nmero o porcentaje.
textdecoration
Efectos variados sobre el

texto.
verticalalign
Posicin vertical del texto.
texttransform
Transforma el texto a
maysculas o minsculas.
capitalize
text-align
Justificacin del texto.
left, right, center o justify
text-indent
Tabulacin con que aparece

tamao o porcentaje, por defecto cero.
la primera lnea del texto.
none, underline (subrayado), overline (como subrayado, pero por

encima), line-through (tachado) o blink (parpadeante); por defecto
ninguno.
baseline (normal), sub (subndice), super (superndice), top, texttop, middle, bottom, text-bottom o un %. Por defecto baseline
(pone la primera letra en maysculas), uppercase

(convierte todo a maysculas), lowecase (a minsculas) o none, por
defecto no hace nada.
16.4 Propiedadesdecoloryfondo
Tambinesposiblecambiarloscoloresyelgrficodefondodeunelemento.
Propieda
d
Descripcin
Posiblesvalores
color
Color del texto.
background
Modifica tanto el grfico el color de fondo. direccin del fichero que contiene la imagen o un color.
un color (en el formato habitual).
Hayquedecirque,enlasintaxisencascada,lasdireccionesseexpresandelsiguientemodo:
background: url(fondobonito.gif);
16.5 Propiedadesdeclasificacin
Hastaahorahabamosdistinguidoalahoradeverlaspropiedadesdeunelementoensiestoseran
tratadoscomobloquesono.Peroelserbloquesono...noesacasootrapropiedad?Estasyotrasformas
declasificarloselementossepuedencambiarusandolassiguientespropiedades:
Propieda
d
Descripcin
Posiblesvalores
display
Decide si un elemento es interior (como <I>), inline, block,

un bloque (<P>) o un elemento de una lista
elemento)
(<LI>).
list-style
Estilo de un elemento de una lista, pudiendo

incluir un grfico al comienzo del mismo.
Decide como se manejan los espacios, si de
normal o como sucede dentro de la
etiqueta <PRE>.
white-space manera
list y none
(que 'apaga' el
disc, circle, square, decimal, lower-roman,

upper-roman, lower-alpha, upper-alpha, none
o la
direccin de un grfico
normal y pre
Versin1.1
CursodeHTML
Pagina35de36
17 Tablacompletadecaracteresdel
HTML2.0
LassiguientesdefinicionesdeentidadesSGMLhansidoextraidas
delRFCoriginalquedefineelHTML2.0:
<!ENTITYnbspCDATA" "nobreakspace>
<!ENTITYiexclCDATA"¡"exclamacioninvertida>
<!ENTITYcentCDATA"¢"centsign>
<!ENTITYpoundCDATA"£"simbolodelalibraesterlina>
<!ENTITYcurrenCDATA"¤"generalcurrencysign>
<!ENTITYyenCDATA"¥"simbolodelsign>
<!ENTITYbrvbarCDATA"¦"barravertical(partida)>
<!ENTITYsectCDATA"§"sectionsign>
<!ENTITYumlCDATA"¨"umlaut(dieresis)>
<!ENTITYcopyCDATA"©"simbolodecopyright>
<!ENTITYordfCDATA"ª"ordinalindicator,feminine>
<!ENTITYlaquoCDATA"«"anglequotationmark,left>
<!ENTITYnotCDATA"¬"notsign>
<!ENTITYshyCDATA""softhyphen>
<!ENTITYregCDATA"®"registeredsign>
<!ENTITYmacrCDATA"¯"macron>
<!ENTITYdegCDATA"°"degreesign>
<!ENTITYplusmnCDATA"±"plusorminussign>
<!ENTITYsup2CDATA"²"superscripttwo>
<!ENTITYsup3CDATA"³"superscriptthree>
<!ENTITYacuteCDATA"´"acuteaccent>
<!ENTITYmicroCDATA"µ"microsign>
<!ENTITYparaCDATA"¶"pilcrow(paragraphsign)>
<!ENTITYmiddotCDATA"·"middledot>
<!ENTITYcedilCDATA"¸"cedilla>
<!ENTITYsup1CDATA"¹"superscriptone>
<!ENTITYordmCDATA"º"ordinalindicator,masculine>
<!ENTITYraquoCDATA"»"anglequotationmark,right>
<!ENTITYfrac14CDATA"¼"fractiononequarter>
<!ENTITYfrac12CDATA"½"fractiononehalf>
<!ENTITYfrac34CDATA"¾"fractionthreequarters>
<!ENTITYiquestCDATA"¿"invertedquestionmark>
<!ENTITYAgraveCDATA"À"capitalA,graveaccent>
<!ENTITYAacuteCDATA"Á"capitalA,acuteaccent>
<!ENTITYAcircCDATA"Â"capitalA,circumflexaccent>
<!ENTITYAtildeCDATA"Ã"capitalA,tilde>
<!ENTITYAumlCDATA"Ä"capitalA,dieresisorumlautmark>
<!ENTITYAringCDATA"Å"capitalA,ring>
<!ENTITYAEligCDATA"Æ"capitalAEdiphthong(ligature)>
<!ENTITYCcedilCDATA"Ç"capitalC,cedilla>
<!ENTITYEgraveCDATA"È"capitalE,graveaccent>
<!ENTITYEacuteCDATA"É"capitalE,acuteaccent>
<!ENTITYEcircCDATA"Ê"capitalE,circumflexaccent>
<!ENTITYEumlCDATA"Ë"capitalE,dieresisorumlautmark>
<!ENTITYIgraveCDATA"Ì"capitalI,graveaccent>
<!ENTITYIacuteCDATA"Í"capitalI,acuteaccent>
<!ENTITYIcircCDATA"Î"capitalI,circumflexaccent>
Versin1.1
CursodeHTML
Pagina36de36
<!ENTITYIumlCDATA"Ï"capitalI,dieresisorumlautmark>
<!ENTITYETHCDATA"Ð"capitalEth,Icelandic>
<!ENTITYNtildeCDATA"Ñ"capitalN,tilde>
<!ENTITYOgraveCDATA"Ò"capitalO,graveaccent>
<!ENTITYOacuteCDATA"Ó"capitalO,acuteaccent>
<!ENTITYOcircCDATA"Ô"capitalO,circumflexaccent>
<!ENTITYOtildeCDATA"Õ"capitalO,tilde>
<!ENTITYOumlCDATA"Ö"capitalO,dieresisorumlautmark>
<!ENTITYtimesCDATA"×"multiplysign>
<!ENTITYOslashCDATA"Ø"capitalO,slash>
<!ENTITYUgraveCDATA"Ù"capitalU,graveaccent>
<!ENTITYUacuteCDATA"Ú"capitalU,acuteaccent>
<!ENTITYUcircCDATA"Û"capitalU,circumflexaccent>
<!ENTITYUumlCDATA"Ü"capitalU,dieresisorumlautmark>
<!ENTITYYacuteCDATA"Ý"capitalY,acuteaccent>
<!ENTITYTHORNCDATA"Þ"capitalTHORN,Icelandic>
<!ENTITYszligCDATA"ß"smallsharps,German(szligature)>
<!ENTITYagraveCDATA"à"smalla,graveaccent>
<!ENTITYaacuteCDATA"á"smalla,acuteaccent>
<!ENTITYacircCDATA"â"smalla,circumflexaccent>
<!ENTITYatildeCDATA"ã"smalla,tilde>
<!ENTITYaumlCDATA"ä"smalla,dieresisorumlautmark>
<!ENTITYaringCDATA"å"smalla,ring>
<!ENTITYaeligCDATA"æ"smallaediphthong(ligature)>
<!ENTITYccedilCDATA"ç"smallc,cedilla>
<!ENTITYegraveCDATA"è"smalle,graveaccent>
<!ENTITYeacuteCDATA"é"smalle,acuteaccent>
<!ENTITYecircCDATA"ê"smalle,circumflexaccent>
<!ENTITYeumlCDATA"ë"smalle,dieresisorumlautmark>
<!ENTITYigraveCDATA"ì"smalli,graveaccent>
<!ENTITYiacuteCDATA"í"smalli,acuteaccent>
<!ENTITYicircCDATA"î"smalli,circumflexaccent>
<!ENTITYiumlCDATA"ï"smalli,dieresisorumlautmark>
<!ENTITYethCDATA"ð"smalleth,Icelandic>
<!ENTITYntildeCDATA"ñ"smalln,tilde>
<!ENTITYograveCDATA"ò"smallo,graveaccent>
<!ENTITYoacuteCDATA"ó"smallo,acuteaccent>
<!ENTITYocircCDATA"ô"smallo,circumflexaccent>
<!ENTITYotildeCDATA"õ"smallo,tilde>
<!ENTITYoumlCDATA"ö"smallo,dieresisorumlautmark>
<!ENTITYdivideCDATA"÷"dividesign>
<!ENTITYoslashCDATA"ø"smallo,slash>
<!ENTITYugraveCDATA"ù"smallu,graveaccent>
<!ENTITYuacuteCDATA"ú"smallu,acuteaccent>
<!ENTITYucircCDATA"û"smallu,circumflexaccent>
<!ENTITYuumlCDATA"ü"smallu,dieresisorumlautmark>
<!ENTITYyacuteCDATA"ý"smally,acuteaccent>
<!ENTITYthornCDATA"þ"smallthorn,Icelandic>
<!ENTITYyumlCDATA"ÿ"smally,dieresisorumlautmark>
Versin1.1

Curso-de-HTML by Priale PDF

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

Curso-de-HTML by Priale PDF

Cargado por

Copyright:

Formatos disponibles

Manual del alumno

<HTML> ... </HTML>

Sirve para delimitar un prrafo. Inserta una lnea en

Permite centrar todo el texto del prrafo.

Representa el texto encerrado en ella con un tipo

Para escribir direcciones (de esas donde vive la

Daniel Rodrguez Herrera

Para citar un texto ajeno. Se suele implementar

<H1> ... </H1>

<H2> ... </H2>

<H3> ... </H3>

<H4> ... </H4> Cabecera

<H5> ... </H5> Cabecera

<H6> ... </H6> Cabecera de nivel 6

<B> ... </B>

Soy un texto negro como el tizn

<I> ... </I>

<U> ... </U>

Como soy muy importante estoy

<S> ... </S>

A m, en cambio, nadie me quiere

<TT> ... </TT>

<SUP> ... </SUP>

<SUB> ... </SUB>

<BIG> ... </BIG>

Cre ver un lindo gatito

<CITE> ... </CITE>

<CODE> ... </CODE>

Hay cosas importantes.

<EM> ... </EM>

Hay que poner nfasis en algunas

<KBD> ... </KBD>

El usuario debe teclear Multivac es el

<VAR> ... </VAR>

La variable x, definida anteriormente...

<SAMP> ... </SAMP>

<ABBR> ... </ABBR>

La WWW usa el protocolo http

Inserta una barra horizontal.

&aacute;, &Aacute;, &eacute;, &Eacute;,...

(espacio en blanco que no puede ser usado para saltar de lnea)

DL, MENU, OL y UL.

Indica al navegador que debe representar la lista de la manera

Indica al navegador el dibujo que preceder a cada elemento de

Coloca el punto ms alto de la imagen coincidiendo con ms

Alinea el punto medio (en altura) de la imagen con la base del

Alinea el punto ms bajo de la imagen con la base del texto.

Coloca la imagen a la izquierda del texto.

Coloca la imagen a la derecha del texto.

SIZE=2 SIZE=3 SIZE=4

Herramienta utilizada para hacer la pgina.

Palabras clave por las que encontrarn la pgina en los buscadores.

Descripcin del contenido de la pgina.

Permite definir un grfico de fondo para la pgina.

Permite definir el color de fondo de la pgina.

Cuando es igual a FIXED el grfico definido como fondo de la pgina permanecer

Cambia el color del texto.

Cambia el color de un enlace no visitado (por defecto azul).

Cambia el color de un enlace ya visitado (por defecto prpura).

Especifican el nmero de pixels que dejar de margen entre el borde de la ventana y el

Ms o menos equivalentes a los anteriores, pero stos funcionan en Netscape.

1,1 1,2 1,3

á, Á, é, É,...