Está en la página 1de 20

mailxmailCursosparacompartirloquesabes

ManualHTML
Autor:SilvestreGoxconBlas
1

mailxmailCursosparacompartirloquesabes

Presentacindelcurso
HTMLesunlenguajemuysencilloquepermitedescribirhipertexto,esdecir,texto
presentadodeformaestructuradayagradable,conenlaces(hyperlinks)queconducen
aotrosdocumentosofuentesdeinformacinrelacionadas,yconinserciones
multimedia(grficos,sonido...).
Ladescripcinsebasaenespecificareneltextolaestructuralgicadelcontenido
(ttulos,prrafosdetextonormal,enumeraciones,definiciones,citas,etc)ascomolos
diferentesefectosquesequierendar(cursiva,negrita,oungrficodeterminado).

mailxmailCursosparacompartirloquesabes

1.Introduccin
Enprincipio,empecemosdiciendoqueHTMLsonlassiglasdeHyperTextMarkup
Language(oLenguajedemarcadodehipervnculosohipertexto).UnapginaWeb
abundaenmarcasdehipervnculos(enlaces).Generalmente,cuandomovemosel
Mousesobreunalneadetexto,encontramospalabrasoexpresionessubrayadas,con
colorazul(aunquepuedentenerotroscolores).Cuandohacemosclicsobrealguna
palabraoexpresindehipervnculo,elexploradordeInternetnosremiteaotrositioo
pginaWeb.
CuandohablamosdepginasWeb,nosreferimosalaspginasqueseutilizanenlos
exploradoresdeInternet,que,aprimeravista,tienelasmismaspropiedades.Cabe
aclararqueactualmentesepuedencrearpginasWebenmuchosprogramas,en
procesadoresdetextocomoMicrosoftWord,Excel,PowerPoint,Access,CorelDraw,
Publisher,etc.Sinembargo,cuandosedisealaestructuradeunapginaWeben
estosprogramas,elcdigoquepermitedarformaalapginaWebparaseraccedida
desdecualquierexplorador,quedaocultoalosojosdeldiseadordelapgina.
HTMLesunlenguajequeutilizaloscdigosestandarizadosparalacreacinde
pginasWeb.Sinembargo,desdeestepuntonoseutilizanobjetosparacolocaren
pantalla,todoloquesedeseehaceryrepresentar,debeserpensadoyprevistoantes
decodificar.
ProcedimientosinicialesparacrearunapginaWebAntesdeentrarendetalleacerca
delacreacindepginasWeb,esnecesarioentendercmoseescribeelcdigoyen
quprograma.Elcdigosepuedeescribirencualquierprocesadordetextos,aunque
esrecomendablehacerloenunprogramaquenomanejeestilosdetextoquepueden
noserreconocidosporelexploradordeInternetpuedeserunprogramacomo
WordPad,elBlocdenotasoMicrosoftWord.

mailxmailCursosparacompartirloquesabes

2.EstructuradeunapginaWeb
EstructuradeunapginaWeb
TodapginaWebtieneunaestructuraquepermitealprogramadorsaberdeantemano
qutipodeinformacinnecesitaintroducir.Estoayudaaquelapginaquediseasea
claramentelegibleysepuedamodificarmsfcilmente.SiunapginaWebes
complicadaensudiseo,habrmuypocosquesepandarelmantenimientoadecuado.
AbajosemuestralaestructuralgicadeunapginaWeb.
<HTML><HEAD><TITLE>Primerapgina</TITLE></HEAD><BODY>.........
</BODY></HTML>
EstaslneassonpermanentesenunapginaWeb.Siemprevanaestarpresentesno
importandoqutancortaotanlargasealapginayelcontenido.
Laprimerainstruccin<HTML>indicaalexploradordeInternetqueahcomienzauna
pginaWeb.Lasiguienteinstruccin<HEAD>indicaelencabezadodelapgina,es
decirelreadelabarradettulo.<TITLE>indicaelttulodelapginapropiamente
dicho.<BODY>esunainstruccinqueindicaalexploradordeInternetqueahempieza
elreadecontenidodelapgina(esdecirelcuerpodelapgina).
EnellenguajeHTML,muchasinstruccionessecierranconelsigno/(diagonal)para
indicaralprogramaquelaspropiedadesaplicadasconesainstruccinseterminanah
dondeseponeelsignodiagonal.Sielsignodecierre(/)noseaplica
convenientemente,elprogramaseguiraplicandolaspropiedadesdelainstruccin
anterioratodaslaslneasinferiores,hastaqueseencuentreotrainstruccinque
modifiquelaspropiedadesactuales.

3.GuardadodelarchivocomopginaWeb
GuardadodelarchivocomopginaWeb
CuandosehayaescritoelcdigodelapginaWeb,esnecesarioguardarelarchivo
comounapginaWeb.UnapginaWebtienelaextensinHTM,lacualsedebe
especificarenelmomentodeguardarlapgina.Unavezguardadoelarchivoconla
extensinHTM,sepuedecrearunaccesodirectoparaestearchivoosepuedeabrir
directamentedesdeelsitioenelqueseguard.
Ejercicio
AbreelBlocdenotasycopiaelsiguientecdigoquesemuestra.Cuandohayas
terminadodecapturarelcdigo,gurdalocomoPrimera.htm(siexisteypide
reemplazarelarchivo,respondeafirmativamente).
Elresultadosemuestraacontinuacin.

mailxmailCursosparacompartirloquesabes
5

mailxmailCursosparacompartirloquesabes

4.ModificacindeunapginaWeb
UnavezcreadanuestrapginaWeb,sernecesariomodificarla.Paraello,
necesitamosabrirelcdigodelapgina.Siseabrelapginaenunprocesadorde
textoscomoMicrosoftWord,sloveremoseltexto,peroelcdigonoesaccesiblepara
elusuario.
Sideseamosobtenerelcdigo,sernecesarioabrirelblocdenotasyabrirlapgina
desdeah,utilizandolaopcinAbrir,yenelcuadrodedilogoAbrir,seeligeTodoslos
archivos,enlalistaTipo(estoporquelapginatieneunaextensindiferentealfiltro
mostrado).Sinembargo,unamaneramscmodayrpida,esaccederalcdigo
desdelapginaWebabierta.Paraello,sehacelosiguiente:
1.Sehaceclicconelbotnsecundarioenunreaquenoseaunobjeto(comouna
imagen,unhipervnculo,etc.)
2.Enelmencontextual,seeligelaopcinVercdigofuente.

5.Estilosdettulo
HTMLmanejaseisestilosdettuloaplicablesaltexto.Cuandoseaplicaunestilo,el
programainterpretaelestiloyloaplicamientrasnoencuentreunsignodecierre.
LosestilosdettuloseenumerandeH1aH6,siendoH1elmsgrandeyH6elms
pequeo.Aunqueelprogramadortienelaopcindeutilizaruntamaodiferente
mediantelainstruccinFontSize.
Acontinuacinsemuestraelcdigoyelresultadodelautilizacindettulosenuna
pginaWeb.
Elresultadodeestecdigosemuestraacontinuacin.
Deaquenadelante,slosemostrarlaventanaderesultadosenlosejercicios.El
alumnotienelaobligacindeusarlasinstruccionesquesevanexplicandopara
obtenerlosresultadosrequeridosenlosejercicios.

mailxmailCursosparacompartirloquesabes
7

6.Comandosbsicosdeformateodetexto
Negrita,Cursiva,Subrayado
Aligualqueotrosprogramas,enHTMLpuedeaplicarelefectoNegrita,Cursivao
Subrayadoaltexto.Paraelefectonegritause<B>,paracursivause<I>,para
subrayadouse<U>consurespectivosignodecierre.
Ejemplo:
<B>EstilosNegrita</B><BR>
<I>EstiloCursiva</I><BR>
<U>Estilosubrayado</U><BR>
Lainstruccin<BR>delaslneasdearribaseutilizaparainsertarunretornodecarro.
Sinoseincluyeestainstruccinencadalneadetexto,lapginaWebjuntarlastres
lneasdetextoenunasolalnea.Estosignificaquecadavezquedeseemosinsertarun
saltodelnea,debemosincluirestainstruccinenellugardondesedeseegeneraruna
nuevalnea.
Elresultadosemuestraacontinuacin.
Existeunainstruccinquepermiteremarcarpartesdeunprrafo,estainstruccinesla
instruccinSTRONG.Porejemplo,estecdigo:
Esteesunejemplode<strong>instruccionesdeformateodetexto</strong>
Produceesteresultado:

mailxmailCursosparacompartirloquesabes
8


Lainstruccin<EM>funcionadeformasimilara<I>.Cuandoseaplica<EM>,eltexto

afectadoaparecesiempreenestilocursiva.Porejemplo,elsiguientecdigo:
Esteesunejemplodeinstruccionesde<em>formateodetexto</em>
Produceelsiguienteresultado:
Ejercicio
Usandolasinstruccionesconocidashastaestemomento,debesdisearlapginaque
semuestraacontinuacin.
SeusaelestiloH1paraelttuloprincipal,<B>o<STRONG>paraelremarcadonegrita
y<U>paraelsubrayado.Doblesaltodelnea<BR>paralaseparacindeunprrafo
conotro.

mailxmailCursosparacompartirloquesabes
9

7.Marcadordeprrafo
CuandosedeseeindicaraHTMLuniniciodeprrafoyutilizarunaalineacinjuntocon
lainstruccin,sedebeutilizar<P>.Estecomandoseusajuntoconlasinstruccionesde
alineacin<Left>,<Center>o<Right>paramodificarlaposicindeltextoenpantalla.
Porejemplo,lasiguientelneadecdigo,centraeltextoenlapantalla.
<palign=center>Textocentradoenlapantalla</p>
Elsiguientecdigo:
Produjoelresultadoquesemuestraacontinuacin.
Sisedeseaalineartextoaladerecha,debeintroducirunaexpresincomosta:
<palign=right>Textojustificadoaladerecha</p>
Paratrazarunalneadeseparacinutiliceelcomando<HR>.Estainstruccinsin
modificadores,trazaunalneahorizontalpredeterminada.Siseincluyenmodificadores,
sepodrpersonalizarlaaparienciadelalnea.
Ejemplo:
<HR>
Trazaunalneahorizontal.
Paramodificarlaaparienciapredeterminada,hagaesto:
<HRWidth=200>
Trazaunalneadeanchodepantalla(enpxeles)de200pxeles.Estalneadecdigo
produciraunalneacomosta:

mailxmailCursosparacompartirloquesabes
10