CursoHTML de Goxcon Blas

mailxmailCursosparacompartirloquesabes
ManualHTML
Autor:SilvestreGoxconBlas
1
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).
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.
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.
5
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.
7
6.Comandosbsicosdeformateodetexto
Negrita,Cursiva,Subrayado
Aligualqueotrosprogramas,enHTMLpuedeaplicarelefectoNegrita,Cursivao
Subrayadoaltexto.Paraelefectonegritause,paracursivause,para
subrayadouseconsurespectivosignodecierre.
Ejemplo:
EstilosNegrita 
EstiloCursiva 
Estilosubrayado 
Lainstruccin delaslneasdearribaseutilizaparainsertarunretornodecarro.
Sinoseincluyeestainstruccinencadalneadetexto,lapginaWebjuntarlastres
lneasdetextoenunasolalnea.Estosignificaquecadavezquedeseemosinsertarun
saltodelnea,debemosincluirestainstruccinenellugardondesedeseegeneraruna
nuevalnea.
Elresultadosemuestraacontinuacin.
Existeunainstruccinquepermiteremarcarpartesdeunprrafo,estainstruccinesla
instruccinSTRONG.Porejemplo,estecdigo:
Esteesunejemplodeinstruccionesdeformateodetexto
Produceesteresultado:
8

Lainstruccinfuncionadeformasimilara.Cuandoseaplica,eltexto
afectadoaparecesiempreenestilocursiva.Porejemplo,elsiguientecdigo:
Esteesunejemplodeinstruccionesdeformateodetexto
Produceelsiguienteresultado:
Ejercicio
Usandolasinstruccionesconocidashastaestemomento,debesdisearlapginaque
semuestraacontinuacin.
SeusaelestiloH1paraelttuloprincipal,oparaelremarcadonegrita
yparaelsubrayado.Doblesaltodelnea paralaseparacindeunprrafo
conotro.
9
7.Marcadordeprrafo
CuandosedeseeindicaraHTMLuniniciodeprrafoyutilizarunaalineacinjuntocon
lainstruccin,sedebeutilizar.Estecomandoseusajuntoconlasinstruccionesde
alineacin<Left>,<Center>o<Right>paramodificarlaposicindeltextoenpantalla.
Porejemplo,lasiguientelneadecdigo,centraeltextoenlapantalla.
<palign=center>Textocentradoenlapantalla
Elsiguientecdigo:
Produjoelresultadoquesemuestraacontinuacin.
Sisedeseaalineartextoaladerecha,debeintroducirunaexpresincomosta:
<palign=right>Textojustificadoaladerecha
Paratrazarunalneadeseparacinutiliceelcomando<HR>.Estainstruccinsin
modificadores,trazaunalneahorizontalpredeterminada.Siseincluyenmodificadores,
sepodrpersonalizarlaaparienciadelalnea.
Ejemplo:
<HR>
Trazaunalneahorizontal.
Paramodificarlaaparienciapredeterminada,hagaesto:
<HRWidth=200>
Trazaunalneadeanchodepantalla(enpxeles)de200pxeles.Estalneadecdigo
produciraunalneacomosta:
10

CursoHTML de Goxcon Blas

Cargado por

Información del documento

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

CursoHTML de Goxcon Blas

Cargado por

Copyright:

Formatos disponibles

mailxmailCursosparacompartirloquesabes

También podría gustarte