Professional Documents
Culture Documents
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Posts
MiT!
Info | hace3aos
Comunidades
T!Msica
Megusta
427702
Juegos
Tops
INGRESAR
Seguir
Tutorialparaaprenderausar
codigosHTML[MegaPost]
Compartir
REGISTRARTE
FraanCsp
Buscar
267Seguidores
230Puntos
17Posts
Experto
Twittear
HolaTaringuerosaquilestraigounpost
sobrecomoaprenderausarloscodigos
HTML.
Primero,porqueaprenderausarHTML:
Afavoritos
Ira
comentarios
PorquaprenderelcdigoHTML?
Larespuestaadichapreguntadependedelobjetivoquecadauno
tiene.EscribircdigoHTMLmanualmentetienesusventajasy
desventajasascomoloseditoresWYSIWYG.Parasaberculde
ellosesmejorparati,debersconocersusventajasydesventajasy
sacarunaconclusinbasadaenellasyentusintenciones.
Compartir
vamail
Tiempodeaprendizaje
EstaeslamsgrandeventajadeloseditoresWYSIWYGdebidoaque
construirunsitiowebconellosresultamsfcileintuitivo.Aquellosquehan
escritoalgunavezunacartaenunprocesadordetextoohandibujadouna
imagenenuneditordeimgenescomprendernloqueestosignifica.Para
aquellosquenuncalosusaronescomoabrirunapginawebentunavegador
ytenerlaposibilidadhacercliceneltextoycomenzaraeditarlo,cambiarel
tamao,elcolor,moverimgenes,cambindolas,etc.,todomedianteclicks,
barrasdeherramientasymens.
Porotraparte,escribirHTMLtiendeasermscomplicado,auncuandoesun
lenguajesimple.HTMLesunlenguajedemarcasoetiquetado,ylaraznque
PostsRelacionados
Links
Aprendeausarala
perfeccionHTML
Info
AprenderesalgodeTodala
Vida!
lohacemssimplequeotroslenguajesesquelapginawebresultantees
interpretadaporuncdigo(noposeeciclos,funciones,ovariablesque
Info
cambiensuvalor).Detodosmodos,aprenderHTMLpuedeproducirventajasa
largoplazounavezquehasatravesadolaexperienciadeaprendizaje.
Mtodosparaaprender
ingles.
Tiempodeconstruccin
Info
AprendeHTML
steesunpuntodifuso,dadoquemuchaspersonaspiensanqueelmtodo
queellosutilizanesmejorymsrpido.Laverdadesqueestetiempo
dependemuchodelniveldeexperticiadeldiseador,pero,auncuandola
diferenciapuedeserdespreciable,esmsprobablequeunapginaweb
puedaserterminadamsrpidoconuneditorWYSIWYG.
Conocimiento
Auncuandoelconocimientopuedeseradquiridoencualquierlugar(sisabes
como),enestecasoHTMLofrecemsposibilidadesdeexpandirtumentey
elevartucoeficienteintelectual.Esunbuenpuntosiesqueintentasaprender
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
1/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
msalldelmismo.EscribirHTMLtebrindarprcticamientrasque,siendoun
lenguajesimple,teintroduciralmundodelaprogramacin(tambinpartedel
diseoydesarrolloweb).
Portabilidad
MientrasHTMLpuedeserescritoencualquiereditordetexto,anenelms
bsico,nopuedesconstruirunsitiowebenuneditorWYSIWYGsinotienesel
editor.Estopuedeconvertirseenunproblemadeportabilidadparaaquellos
quenoconocenHTMLdebidoaquenecesitarnqueeleditorestinstaladoen
lacomputadoraquequieranutilizarparaconstruir,modificaroactualizaruna
pginaweb(sinimportarcuangrandeopequealaactualizacinsea).
Correctituddelcdigo
AlusaruneditorWYSIWYG,lapginaesconstruidaporelusuarioenforma
visualqueestraducidaacdigoHTMLporelmotordeleditor.Essignificaque
elresponsabledirectodeescribirelcdigoHTMLeseleditor,auncuandolas
directivassonimpartidasporeldiseador.Estomuchasveceshacequelas
pginastengancdigoincorrecto,malformadoonoestndar,yamenudo
metatagsadicionales(indeseados).
AlusarHTML,lanicapersonaresponsablequedecidequcdigovayqu
cdigono,eseldiseador.Ttieneslalibertadyautoridaddeelegircmoel
cdigoserescritoentudocumentoHTML,sirespetarlosestndares,siser
accesible,ymuchoms.
AhorasinjoderlosmselTutorial
Laetiqueta<span>seutilizaparaasignarunnombreauntrocitodeun
elementodenuestrapginaweb.Comodecaenlapginaanterior,cuandoel
navegadorveaqueesetrozodeelementotieneasignadounnombre,iraver
siexistendefinidosalgunosestilosparalyencasodeencontraralguno,los
aplicar.
Perovemosloconunejemplo,queparecequeseentiendemejor,no?
Imagina,ahoraquesabesescribirtextosenHtml,quetenemosunapgina
webconelsiguienteprrafo:
<p>EstamosaprendiendoautilizarlaetiquetaspandeHtmlenestetutorialtan
majo.</p>
Imaginaquequeremosqueaparezcanlaspalabras"etiquetaspan"ennegrita
ydecolorrojo.Talycomohemosvistohastaahora,debemosevitaraplicar
esetipodedetallesenelcdigoHtml,verdad?Loqueharemosserdarlea
esasdospalabrasunidentificadoronombrey,mstarde,enlahojadeestilo,
definirleaesenombrelaspropiedadesnegritaycolorrojo.
Elnombrequevamosaescogervaaser"resaltado",yparaaplicrseloaesas
dospalabrasusaremoselsiguientecdigo:
<p>Estamosaprendiendoautilizarla<spanclass="resaltado">etiqueta
span</span>deHtmlenestetutorialtanmajo.</p>
Deestemodo,elnavegadoralleerelcdigoHtmlverqueaesasdos
palabrasencerradashadeaplicarleslosestilosquetengaelidentificador
resaltado"enlahojadeestilos.Noparecemuycomplicado,no?Esquenolo
es!jejeje.
Hasdesaberqueseusalaetiqueta<span>cuandoquieresencerrartrocitoso
partedeunelemento.Unprragoenteroesunelemento,peroesasdos
palabrasson"untrocito"deelementoyporlotantohayqueseleccionarlascon
un<span>.Paraseleccionarnopartessinoconjuntosdeelementos(comopor
ejemplovariosprrafos)hayqueusarlaetiquetaqueveremosenlapgina
siguiente,laetiqueta<div>.
Normalmente,yosolouso<span>paraesto,paradarunestilodiferenteauna
partedeunprrafo,comoporejemplounasolapalabraosolounaspocasdel
prrafo.Nolousoparaningunaotracosaqueahoramismorecuerde,demodo
quepuedeslimitarteausarlocomoyo,soloparaeso.Quizsseteocurran
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
2/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
msaplicacionesconeltiempo.
Pensandopensando...quizsotrautilidadpodriaserladeenfatizarlaprimera
letradeunprrafo,talycomohacenalgunosperidicos,esdecir,colocarla
primeraletraennegritaydeuntamaobastantemayorqueelrestodel
prrafo.Estosepodralograraplicandolalaestiqueta<span>tansoloala
primeraletradelprrafo,deestemodo:
<p><spanclass="capital">L</span>aprimeraletradeesteprrafo,la"ele",
tendrunestilodiferente,siesquelodefinoenlahojadeestilos,claro.</p>
Deberaaparecermsomenosas,sidefinoenlahojadeestilosquesea
negrita,decolorazulydeuntamaomayorqueelrestodelprrafo:
Laprimeraletradeesteprrafo,la"ele",tendrunestilodiferente,siesquelo
definoenlahojadeestilos,claro.
.Laformadeusarlaesmuysimilaralcasoanterior.Bastaconcolocarla
etiquetadeaperturaantesdedondeempieceelgrupo,indicandoelnombre
dentrodeesaetiqueta,ycolocarluegolaetiquetadecierrealfinaldelgrupo.
Muysencillo.Paraagrupardosprragospodramosescribirestecdigode
abajo,porejemplo:
<divclass="letragrande">
<p>Esteeselprimerprrafodeestegrupo.</p>
<p>Quelistoeres,si,esteeselsegundo,jejeje.</p>
</div>
PortantoseusalaetiquetaHtml<div>cuandoqueremosdarleunnombreo
identificadornoauntrozodeelemento(unpardepalabrasdeunprrafo,por
ejemplo)sinoaunelementosentero(elprrafocompleto)oms
habitualmente,aungrupodeelementos,variosprrafos,variasimgenes,un
bloqueformadoporvariosprrafoseimgenes,oinclusolapginacompleta.
Deesemodo,podemosdarlelosestilosdefinidosaesenombreenlahojade
estilos,atodosloselementosdeesegrupo.Denuevo,veamosalgunos
ejemplosconcretosparaaclararelconcepto.
Imaginaquequeremosdarleunanchoconcretoatodalaweb.Podramos
crearunestiloenlahojadeestilosllamado"anchura",darleelvalorde800px
deanchoy....aquinseloaplico?Puesporejemplo,atodalaweb,no?Para
esobastaraconcolocarlalnea:
......
</head>
<body>
<divclass="anchura">
......
alprincipiodelcontenidodelaweb,esdecir,justodespusdelaetiqueta
<body>yluego,antesde</body>colocarelcierredeesedivconestaotra
lnea:
......
</div>
</body>
</html>
Oimaginaquetenemosunalistadeelementosconstruidaconlasetiquetas
quevimosatrs,lasetiquetas<ul>y<li>conlasquehemoshechoelmen
lateral.Paradarlelaforma,anchuraycoloresquequeramospodramos
encerrarladentrodeundivydarleelnombrede"menu"deestemodo:
......
<divclass="menu">
<ul>
<li>enlace1</li>
<li>enlace2</li>
<li>enlace3</li>
</ul>
</div>
......
Bueno,parasabercmoseusanestasetiquetastienesmsquesuficiente,
no?Paramejorarlosconocimientosencuantoasuaplicacinprcticate
recomiendoquesigaseltutorialEjemploconDivsenelqueterminarsde
entendertodoestoperfectamente,yalocreoques=)Pasamosahoraaver
unpardepropiedadesrelacionadasconestasdosetiquetastanprometedoras.
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
3/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Mesigues?
Porcierto!Semeolvidabacomentarlo.Cualquierelementooconjuntode
elementosencerradosporlaetiqueta<div>esunacapa.Si,lascapasnoson
msqueeso,agrupacionesdeelementosentreesasetiquetasconelfinde
poderaplicarleestilosaloquetengaenelinterior.Ves?Yasabesloqueson
lasfamosascapas,esatecnologatantanmodernaparahacerwebs
profesionales!!jejeje.PuedesaprendermuchomssobreellasconelEjemplo
conDivsquetenemosenCCTW,dondeaprendersacrearunapginaweb
desdeceroypasitoapasito.
Html5adefinidoetiquetasespecialesparaalgunaspartesdelaspginasweb
enlasqueantessoliamosaplicarcapasoDivs(sesuponequenoshemos
olvidadoyahaceaodelusodelastablasparamaquetarunaweb.....no?).A
partirdeahoratenemosqueesforzarnosporutilizarunadelasnuevas
etiquetasensulugar.Sinovemoscoherenteaplicarleunadelasnuevas
etiquetasaunbloquedetexto,entoncesysoloentonces,usaremosunDiv.
VeamoscualessonesasnuevasetiquetasdelHtml5asporencimaycmose
podrandistribuirdentrodeldiseodeunapginawebparaentenderlasmejor.
Posteriormentelasexplicamospasoapaso.Lasiguientefiguramuestrauna
estructuratpicadediseodepginasweb:
Ves?Unacabeceraarriba,unmendenavegacinalaizquierda,piede
pginaabajoyunbloquelateralaladerechaparacolocarcontenido
secundario,comouncalendario,publicidadoquseyo.Eslotpico.HTML5ha
definidoetiquetasparaalgunasdeesaszonas,noporestarsituadasenesas
zonas,sinoporelcontenidoqueposeendentro(semnticas,recuerda).De
esemodo,hancreadolassiguientesetiquetas:
<header></header>
<hgroup></hgroup>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<figure></figure>
<footer></footer>
<address></address>
Vamosaverlasdetenidamentey,aempezarausarlas,queestoeselfuturo,al
menoshastaquenoslocambiendenuevo!jejeje.
Laetiqueta<section>ysucorrespondienteetiquetadecierre</section>se
utilizanparaencerrarelcdigocorrespondienteaunaseccingenricadentro
deundocumentooaplicacin.Normalmente,unbloquedetextoalque
perfectamentelepodramoscolocarunttulooencabezado.Adems,todoel
contenidoqueenglobahadeguardarciertarelacinentres.
Paraverlomsclaro,unejemplodebloquequepodramosencerrarentre
etiquetassectionpodraserlasltimasnovedadesdelawebodelforo.No
seriaidoneaestaetiquetaportantoparaencerrarunbloquedepublicidad,por
ejemplo,obloquesdecosasdiferentesunasdeotras.
Dicelanormaquesiesalgoquebienpudierasersindicable,tienetodaslas
papeletasdesercandidatoparaperteneceraunsection.
Recuerdaquenosedebeusarparaenglobarunbloquecualquieradecdigo
simplementeporquenecesitasencerrarlodentrodealgoparaaplicarleas
estilosCSSoalgnScript.Sielnicomotivoparaencerrarunbloquede
cdigoeseldepoderaplicarleloanterior,notienesentidoaplicarleunade
estasnuevasetiquetas.EnsulugarsepuedeydebeusarunDIVdetodala
vida.Veremosejemplomsadelantesiteestsliando.Solosigueleyendoylo
irspillandoalterminardevertodaslasetiquetas.
Otrareglaquepodemosusarparasabersiunbloquedecdigoounelemento
deunapginawebdebeencerrarseentreestaetiquetaeselpreguntarse....si
lawebfueraunlibro....estaraeseelementoenelindiceinicialdelmismo?Si
larespuestaesSI,esbuencandidatoparasection.
Dentrodeunapginawebportanto,puedenexistirvariossection,cmono(en
unlibrosuelenexistirvariasseccionesenelndice,no?).Esms,dentrodeun
sectionpuedenhaberotrossectionsecundariosyassucesivamente(oacaso
enunlibronohaysecciones,subsecciones,etc,enelndice?).
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
4/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Siunaseccinesalgoquepodratenerunttulo,eslgicopensarademsque
loprimeroqueencontraremosdentroesunttulo<h1>ydespusunaetiqueta
<p>conelcontenidodelaseccin.
Otraayuditaparadecidirsiunapartedeunapginawebesonounsection,es
tenerencuentaquelossectionsuelensertemticos.Suelenenglobar
contenidoquetratadeunmismotema.Siporejemploenunapginadeuna
webhayunapartadohablandodediversosproductosyotraparteenlaquese
hablatansolodelasformasdepago,esasegundapartepodraenglobarse
dentrodeunsection.Selepodriaasignarelencabezado"FormasdePago",su
contenidotratadeuntemaconcreto,esalgoquepodraestarpresenteenun
ndicedelaweb...decididamenteesunsection.Loves?
Dentrodeunsectiongrandote,puedenexistirotrossectionhijo.Imaginauna
webdeunperidicoquedividelasnoticiasdesuportadaennoticiasde
Europa,deAsia,deEstadosUnidos,etc.Podramospensarquesonsecciones
temticas,alasqueselespuedecolocarunencabezadotipo"Noticias
Europeas",etc,cierto?Porloquesepodrantomarcomosection.Peroan
dentrodecadaunadeesassectionpodramosenglobartodaslasnoticiasde
deportesdentrodeEuropaycolocarlasenunsectionhijodeEuropa,titulado
"NoticiasDeportivasenEuropa".Luegopodemosencontrarnosconvarios
sectiondentrodeunsection.
Conoceslosblogs?Enunblog,todoelconjuntoformadoporunaentradadel
autor,podraencerrarsedentrodeunsection(normalmentetienenuntituloy
luegoalgunosprrafos).Luego,todoelconjuntoconloscomentariosescritos
porlosvisitantes,podraformarotrosectiondistinto,titulado"comentarios"por
ejemplo.Lovamosviendomsclaro?Sigamosconotrasdeestasnuevas
etiquetasdelHtml5.
Silaetiqueta<section>seusabaparabloquesdecontenidocapacesdepoder
perteneceraunindice,agrupandobloquesdecontenidodeciertotema,conla
etiqueta<article>podemossepararcadaunodeesoselementos
independientesquepudierancomponeresesectionconcreto.Unarticlepodra
considerarseportantocomocadaunodeloselementosenquepodemos
dividirunsection.Aligualqueelrestodeestasnuevasetiquetas,posee
etiquetadecierre,<article>
Creoquepodramossabersiunbloquedecdigodeberaperteneceraun
Articlesialpreguntarnossiesebloquetienesentidoalcolocarlosolo,separado
delrestodecontenidoactual,tieneocarecedesentido.Sialsepararloo
independizarlosepierdesusentido,noesunArticle.Siencambioalsepararlo
delrestodecontenidodelapginawebelbloquepierdesusentido(por
ejemploenvindoloaFacebookoTwitter),noescandidatoparapertenecera
unArticle,oki?.
Enunapginawebpuedenexistirvariosarticles,dentrodeunsectionoincluso
independientesdelmismo.Puedenademscontenerensuinteriorttuloscon
h1yprrafos,ademsdeotrosarticlesensuinterior.Quizsseafcil
confundirlosconlossection.Veamossiconelusoaprendemosadistinguirlos
unpoco,noessencilloporahora,verdad?
Unejemplorealdearticlepodraserunmensajedeunforo,elartculodeuna
revistaoperidico,uncomentariodeunusuarioaunaentradadeblogo
inclusounaentradaenunblog.Laestructurapodraserlasiguiente:
<article>
<h1>LaetiquetaArticle</h1>
<p>Laetiqueta<b>article</b>sueleusarseparafragmentosindependientesde
contenido...</p>
...
</article>
Deciamosqueunarticlepodrasertangrandecomoparapodercontener
inclusoheader,footer,etc.Miradunejemplo:
<article>
<header>
<h1>LaetiquetaArticle</h1>
</header>
<p>Laetiqueta<b>Article</b>sueleusarseparafragmentoindependientesde
contenido...</p>
...
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
5/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
<footer>
<p><small>ContenidopublicadoporJuanito</small></p>
</footer>
</article>
PormsqueleamoslasnormasdelHtml5,noterminadequedarmuyclaro
cundousararticleycuandosection..Enelltimoapartadodeestaseccin
tratodeexplicarlasdiferenciasentresectionyarticlequeyocapto,aunque
comodigo,loleaisdondeloleais,veriscomolasinterpretacionesnoson
siemprelasmismas.
Lasetiquetas<header>ysucierre</header>quizsseanmuchomssencillas
deentenderquelasdosanteriores.Seencargandeindicaralosnavegadores
queloquecontieneneslacabeceradelapginayquedentroseguramente
llevarnlotpico,algnlogotipo,elttulodelapgina,quizsunadescripcin
delamismaypocoms.Lanormadefinealacabeceracomoungrupode
ayudasalanavegacin.Endefinitiva,elHTML5nosindicaquetodoloque
antesteniamosenlacabecerahadeirahoraentreesasdosetiquetas,no
ms.
Noesunaetiquetaobligatoria,aunquedebemosusarlasirealmentenuestras
pginastienenalgnbloquedecdigoquesepuedaentendercomo
"cabecera".
Ademsdeloselementoscitados,unheaderpodracontenerunmende
ayudaalanavegacin,unatabladecontenidos,unformulariodebsqueda,
etc.Sucontenidonoestanextricto
Altratarsedeetiquetassemanticas,nosdaiguallaposicinqueocupendentro
denuestrapgina.unheaderserunheaderestdondeest.Quizshayas
diseadounawebenlaqueelttuloyladescripcindelawebjuntocon
algunosenlacesoayudasalanavegacinlostengassituadosenunabarra
lateral.Esebloquecontinuarsiendounencabezadooheader,pues
correspondeconelsignificadosemnticodeheaderylaposicinqueocupaya
osdigoquenonosimportaeneseaspecto.
Porotrolado,elheadernoselimitaaidentificarlacabeceradeunapgina
web,sinoquepuedeusarsetambinpararecogerlacabeceradeunaseccin
ovariasdentrodelcontenido.Siporejemploenunawebconcabecera,hay
dentrounconjuntodeinformacionesalosquecreesquelepuedevenirbien
unttulo,conbrevedescripcinyayudasalanavegacin(unminiheader,no?)
podrasaadirotropardeetiquetas<header>y</header>paraesemini
header.
.......
<header>
<h1>TITULODELAWEB</h1>
<h2>Brevedescripcindelapginaweb.</h2>
<ul>
<li><ahref="inicio.html">Inicio</a></li>
<li><ahref="unaseccion.html">UnaSeccin</a></li>
<li><ahref="otraseccion.html">OtraSeccin</a></li>
</ul>
</header>
.........
Silaetiqueta<header>erasencilladeentender,estaotraetiqueta<footer>lo
esanms.Setratadeunaetiquetaparaencerrartodoaquelcdigotipicode
laspartesinferioresdelaspginasweb.Contendrnportantoenlacesaotras
websrelacionadas,almapadelaweb,aunapginadecomentariossobreel
copyright,unapolticadelportal,quizsalgodepublicidad,etc.Lotpico,no?
Footersignificapieyaunqueestcontruidaparacontenerlodicho,nohade
tenerqueestarenlapartemsbajadeunapginawebparapoderserun
footer.Tenedencuentaquetodasetiquetasintentaninformaralos
navegadoressobreloquepuedenconteneresosbloques,noms.No
olvidemosqueelaspecto,aparienciaeinclusolaposicindentrodelawebson
cosasquelesimportanunweboalosnavegadores.Esascosasyalasleeran
enlahojadeestilo.ElHtml5pretendeconestasetiquetassaberculessu
contenido,informacinsemntica,noms.Portanto,puedescolocarluegoesa
"capa"dondetedelarealganadentrodelaweb.
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
6/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Unfooteropiedepgina,puedecontenertantoselementoscomosea
necesario.Nohadelimitarseacontenerlodichoantes.Existenpginascon
verdaderossuperpiesdepgina,conunaritraenormedeenlaces,con
informacinacercadelregistroenelportalcorrespondiente,conlattpica"letra
pequea"enlaquesedetallancondicionesdetemasexpuestosenel
contenidoprincipal,etc,etc,etc.Unfooterpuedeserrealmenteextenso,no
temas.Puedeportantocontenerinclusosections,articles,yalgunasdelas
etiquetasqueveremosacontinuacin.Cadapginaesunmundoyimagino
quecadaunosercapazdediferencirculesdeetiquetaspuedeaplicar.
Otroelementobastantetpicoycomnenmuchaspginaswebeslazonade
navegacin,formadaporenlacesalaszonasprincipalesdelaweb,oporun
mendenavegacin,desplegabledeenlaces,etc.PorlovistoHtml5interpreta
queesunazonaquedeberamosidentificaryhacreadoparaellolanueva
etiqueta<nav>,consurespectivaetiquetadecierre,claro,</nav>.
Notodoslosenlacesdeunapginawebhandepertenecerobligatoriamentea
unnav.Losenlacesdepolticas,dedatosdecontacto,mapasdelsitio,
copyrights,enlacesaseccionessecundariasetc,queaparecennormalmente
enunpidepginanoesnecesarioquelosrodeemosconlaetiqueta<nav>,
pueslaetiqueta<footer>yarecogeesosaspectos.staetiquetaesmsbien
paraenlacesquefavorezcanlanavegacinporlaweb,quenosdirijanazonas
importantes.
ElporquHTML5aadeestaetiquetaessencillo.Cadavezesmshabitual
quenuestraspginasaparezcannosoloenlosnavegadoresqueusamosenel
ordenador,sinotambinendispositivosmviles,telfonos,iPads,etc,etc.Al
usarestaetiquetaelagentedeusuario(elnavegadorocomoquierallamarse
segneldispositivousado)podradarlaopcinalusuariodeesconderel
mendenavegacinparanomolestar,paratenermsespaciodisponiblepara
verelcontenidoimportante.Tambinpodradarlaopcindehacerloaparecer
cuandoelusuarioquieracambiardeseccin.Estosoloseraposiblesisesabe
dndeempiezaydndeterminaesemendenavegacinyesoes
precisamenteloqueconseguimosconlaetiquetanav.Hoyporhoynoconozco
agentesdeusuario(porejemplonavegadores)quepermitanesto,peroes
necesariotenernuestrawebpreparadaparacuandollegueesemomento.
Ocurrelomismoconelrestodeetiquetasqueestamosviendo.Quizsnoles
veamosutilidadhoy,peroestadsegurosdequelatendrn,ymucha,enun
futuronomuylejano.
EnlanormadondesedictantodaestasreglasdelHTML5noheleidoqueno
puedaexistirmsdeunbloquedeltiponavdentrodeunamismapgina.No
obstanteheleidoenalgunossitiosqueserecomiendaquesoloexistauno.Si
comoyoenComoCrearTuWebtienesunabarradenavegacinhorizontal(la
delaslengetas)yademsunmenlateral(eldelaizquierda)quizsdeberas
escogerculdelosdoshabradeirdentrodelnavydeshecharelotro.O
hacercasoomisodeesosconsejosnooficiales.O,sifueraposible,englobar
ambaszonasdenavegacindentrodelmismonav.Alfinalladecisinestuyay
seguroquenoteequivocasalelegir.
.............
<nav>
<ul>
<li><ahref="cursohtml.html">CursodeHtml5</a></li>
<li><ahref="cursocss.html">CursodeCSS</a></li>
<li><ahref="cursojavascript.html">CursodeJavascript</a></li>
</ul>
</nav>
.............
Enmuchasocasioneseshabitualencontrarnosconelttulodelapginaweb
conunabrevedescripcinodefinicinolemadelapginabajol.Esmuy
tpicoporejemploenlosblogtipoWordPress.Sabesaloquemerefiero?
PuesHTML5haprevistoesecasoyhadecididocrearlaetiqueta<hgroup>con
suetiquetadecierre</hgroup>paraencerrarcasoscomoese,enlosquese
podradefinirelttulodelawebconun<h1>yunadescripcinbajoelmismo
conunaetiqueta<h2>.Cualquieragrupacindetitularesdefinidoscon<h...>
seguidosdeberamosencerrarlosentre<hgroup>y</hgroup>.No,yotampoco
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
7/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
leveomuchofusteaesto,pero...quinmanda?jejeje.
Losttulosparecentenerahoraunsentidomsestricto.Dalaimpresindeser
msobservadosahora.Tienendehechoalgunasparticularidadesalaparecer
juntoconestasnuevasetiquetas.Alfinaldeestasdefinicionesoshablode
esto.Ahoramismonovieneacuento,oki?
<section>
<hgroup>
<h1>CursodeHtml5</h1>
<h2>AprendeconnosotroslasltimasnovedadesdelHtml5.</h2>
</hgroup>
<p>Blablablablablablablablablablablablablabla...</p>
...
<footer>
<p><small>ContenidopublicadoporPepito</small></p>
</footer>
</section>
Existenalgunosdetallesmsquedebesconocersobreestaetiquetahgroup,
peroantesdecomentarlosprefieroquesigasleyendoparaqueloentiendas
mejor.Porelmomentoqudateconestasdefiniciones.
EstaeslaltimaetiquetaquenospresentaHTML5parabloquesconcierto
contenidosemnticodentrodeunapginaweb.Conlasetiquetas<aside>y
</aside>,senosinvitaarodeartodoaquelcontenidoquenoesdirectamente
contenidoprincipaldelqueestamoshablandoodelqueestamostratandoen
esapginaenconcreto.Lanormadicequeseuseparatodoaquelcontenido
tangencialalcontenidoprincipaldelapgina...ahesn!jajaja.
Lousaremosportantoparatodosaquelloselementossecundarios,como
podrianserlosbloquespublicitarios,enlacesexternos,citas,uncalendariode
eventos,etc,siempreclaroquenoencontremosotraetiquetamsacordede
entrelasyacomentadas.
<aside>
<h1>Publicidad<h1>
((cdigodelapublicidad))
</aside>
Yconesta,terminamosdecomentarestasnuevasetiquetasdeHTML5para
representarzonasconciertocaracterosignificadosemntico.Existenotras
nuevasetiquetas,peroyasonpararesaltartextos,etc,noparaagrupar
bloquesdeelementos,etc.
Recuerdaaplicarlascuandotengasclaroqueloselementoscontenidosson
realmenteloqueelnombredelaetiquetarepresenta.Anteladuda,nolas
usessintenerclaroelporqu.Sinosabessiciertobloquedecdigoprecisao
nodeunadeestasetiquetas,simplementenolepongasninguna.Sila
necesitarasparapoderaplicarleestilosoparaejecutarleciertoscript,usa
mejorlascapasoDivsdetodalavida,queparaesoson,oki?
Esperoquepuedasterminardeentenderloconalgunosejemplosprcticosy
muestrasreales.Noolvidesparticiparelelforoparaterminardeaclararestas
nuevasideas,ok?
ElHtml5damuchaimportanciaacmodistribuimosjerrquicamenteel
contenidodenuestraspginasweb,estoes,cmoindicarcualessonlas
seccionesprincipalesycualessonlassecundariasquepertenecenaesas
seccinesprincipales.
AntesconelHtml4podamosdefiniresteordendenivelesconlasetiquetasde
titular<h1>,<h2>,yashastael<h6>.Ahoraencambio,conlasnuevas
etiquetassemnticas<section>,<article>,etc,aparecennuevosmodosde
indicardndeempiezay/oterminaunanuevaseccinosubseccin,unnuevo
niveljerrquico.
Osloexplicounpocomejor.AntesconHtml4podamosestablecesunorden
jerrquicoparaelcontenidodeestemodo:
<h1>Primeraseccindenivel1</h1>
<h1>Segundaseccindenivel1</h1>
<h1>Terceraseccindenivel1</h1>
<h1>Cuartaseccindenivel1</h1>
<h1>Quintaseccindenivel1</h1>
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
8/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Esascincoseccionestienenelmismoordendeimportancia,puestodasson
<h1>,tienenelmismoniveljerrquico.Peropodamoscrearpartesdentrode
algunasdeesassecciones,conunaetiqueta<h2>enelinteriordeunadelas
<h1>mostradas.Elcontenidodeesasubseccinserasecundario,deun
segundoorden,algomenosimportantequelaseccinprincipalalaque
pertenece.Veamosunejemploaadiendounpardesubseccionesaalgunas
deesasseccionesprincipales:
<h1>Primeraseccindenivel1</h1>
<h2>Primerasubseccindenivel2</h2>
<h2>Segundasubseccindenivel2</h2>
<h1>Segundaseccindenivel1</h1>
<h1>Terceraseccindenivel1</h1>
<h2>Primerasubseccindenivel2</h2>
<h1>Cuartaseccindenivel1</h1>
<h1>Quintaseccindenivel1</h1>
Delmismomodo,podemosircreandootrasseccionesdetercernivelcon<h3>
dentrodelasdeniveldos<h3>yassucesivamentehasta<h6>queesel
mximopermitido.Aunquecreoquecasinuncallegaremosadividirtantolos
contenidosdeunapgina,no?
Losnavegadoresentendernqueseestenunniveldeprimerorden<h1>
desdequeempiezastehastaqueaparezcaotraetiquetadeorden.Siel
navegadorencuentraunaetiqueta<h2>,sabrqueaapartirdeahseesten
nivel2.Sidespusencuentraun<h1>,volverapensarqueestenelprimer
nivelnuevamente.Secomprende?Siseestennivel2yseencuentraotra
etiqueta<h2>,tambindenivel2,sabrquehaempezadootrasubseccin,
tambindenivel2perodistinta.
Perocomotequeradecir,ahoraconelnuevoHtml5lacosavacambiandoun
poco.Conlaaparicindelasetiquetassemnticas<section>,tambinse
puedeindicarqueempiezaunanuevaseccin,seaadaonoetiquetascomo
lasanteriores,<h1>,<h3>,etc.Portantoapartirdeahora,paraempezaruna
nuevaseccinosubseccinbastarconcolocaretiquetasdeapertura
<section>aliniciodeunaseccinydecierre</section>paraterminarconese
nivel.
Siqueremoscrearunnivelsecundariodentrodeunaseccin,bastarcon
definirunanuevaseccinconlaetiqueta<section>,peroloharemosantesde
laetiquetadecierredelaseccinalaquequeremosquepertenezcaesa
seccinsecundaria.
Dichoesto,veamoscmoquedaraenejemploanteriorperousandolas
nuevasetiquetasdeHtml5enlugardelasusadasenHtml4:
<section>Primeraseccindenivel1
<section>Primerasubseccindenivel2</section>
<section>Segundasubseccindenivel2</section>
</section>
<section>Segundaseccindenivel1</section>
<section>Terceraseccindenivel1
<section>Primerasubseccindenivel2</section>
</section>
<section>Cuartaseccindenivel1</section>
<section>Quintaseccindenivel1</section>
Estonoestdeltodobien.Nosfaltaracolocarlasetiquetas<h1>dentro,pero
nolaspuseantesparaqueelcdigosevieraalgomsclarito.Ademsquera
explicaralgomssobreelusodeetiquetasdeltipo<h1>dentrodelas
etiquetas<section>.Vamosall.
Enelinteriordecada<section>debeaparecerunaetiquetadettulo,<h1>.
PeroadiferenciadecuandousabamosHtml4,conelqueibamosllevandola
cuentadelnivelenelqueestbamosparasabersicorrespondiacolocarun
<h1>,<h2>,etc,ahoraconelHtml5,comoyadefinimoselordenconlamisma
etiqueta<section>,loqueharemosserempezarlacuentadenuevo,esdecir,
con<h1>.Esdecir,siestamosescribiendoelcdigodeunaseccindetercer
nivel,nohayporqucolocarun<h3>,sinoqueusaremosun<h1>.
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
9/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Elejemploanteriorquedaramejorportantoas:
<section><h1>Primeraseccindenivel1</h1>
<section><h1>Primerasubseccindenivel2</h1></section>
<section><h1>Segundasubseccindenivel2</h1></section>
</section>
<section><h1>Segundaseccindenivel1</h1></section>
<section><h1>Terceraseccindenivel1</h1>
<section><h1>Primerasubseccindenivel2</h1></section>
</section>
<section><h1>Cuartaseccindenivel1</h1></section>
<section><h1>Quintaseccindenivel1</h1></section>
Ves?Porqunohemoscolocadoun<h2>eneltitulardeunaseccinde
segundonivel?Excto,porqueyahemosindicadoelordendeesenivelconla
etiqueta<section>yahorapodemosempezardesde<h1>sinproblemas.
VeamosunoscuantosejemplosdecdigosHtml5reales,enlosquepoderver
muchomejorelsignificadodetodasestasdefinicionestanpesaditas,de
acuerdo?Vamosall.Partimosdelaestructurabsica,unapginaansin
nadamsqueelttulo.
<!DOCTYPEhtml>
<htmllang="es">
<head>
<metacharset="utf8"/>
<title>Titulo</title>
</head>
<body>
((CONTENIDO))
</body>
</html>
Vamosaaadirleelementostpicosdeunapginawebnormalycorrientey
decidimosporelcaminoquetiquetaspodramoscolocarleacadaparte,de
acuerdo?Nosolvidamosdellugarenlasquecolocaremosesaspartes,pues
comosabemos,esoloconseguiremosconlosestilosCSS.Ademasos
recuerdoqueelHtml5defineelsignificadodecadaparte,noelcmose
muestranenelnavegador,vale?
Aestapginawebdeejemplovamosacolocarleparaempezarelttulodela
webseguidodeunabrevedescripcindelamisma.Loacompaaremoscon
unbuenlogotipoyunrecuadritodeaquellosparabuscardentrodelaweb.Si
recordamosloleidoantes,serfcilelegircolocartodoesodentrodeun
<header>,verdad?Dentrodeeseheadercolocaremoselttulodelaweb
dentrodeuntitulartipo<h1>seguidodeladescripcinenun<h2>.
Recordamosentoncesladefinicindehgroupdemodoqueencerramos
ambasetiquetasdentrodeun<hgroup>ylisto.
Ellogotiponotienemuchosignificadosemntico.Essolounadornito
promocional,paraquelosvisitantessequedenconunrecuerdovisualdela
pgina.Careceportantodesignificadosemnticoperonecesitarencerrarlo
dentrodealgoparapoderaplcarleestilosposteriormente.Demodoquepara
ellogotipousarunsimplediv,alqueasignarunnombreparafacilitarla
apliacindeestilosmstarde.Lecolocarportantoun<divid="logotipo">.
Elrecuadritodebsquedapodraconsiderarseunelementodignodeuna
etiqueta<nav>,perocasiprefieroreservarlaparaelmenprincipaldeenlaces,
demodoquealigualquehehechoconellogotipo,leaplicarunsimpledivde
laforma<divid="buscador">.
Tambinpiensocolocarunanunciodecopyright,datosdecontactoconel
webmasteryalgunosenlaceshacialasnormaslegalesyalmapadelaweb.
Tienetodalapintadequererperteneceraunpiedepgina,demodoque
rodeartodoaquelloentre<footer>.Dentrodeesefooter,sepodrandistinguir
laseccindedatosdecontacto,ladelcopyrightylosenlaceshacianormasy
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
10/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
mapadelaweb.Crearportantotresseccionesparaesastrespartes.
Nosquedapordefinirlaparteprincipaldeloscontenidos.Quizsquiera
presentarlaendoscolumnas,quizsentres...peroesonosonaspectos
semnticos,sinovisuales,demodoqueencasodedecidirmeporunaformau
otralotratariadeconseguiraplicandodivs,noetiquetassemnticas,nocrees?
Loquesitengoclaroesqueenesaparteprincipalvoyamostrarporunlado
noticiasactualessobrelatemticademiweb.Ytambinmostrarlostemas
mspopulares,losmsvisitadosomsvotadosporlosvisitantes.Adems
colocarunmenhacialasdistintaspartesdelawebyunanuncioenelque
tratodevenderenpdfunresumendetodalaweb.
Claramentepodemosadivinarunsectionparalasnovedades,otrosectionpara
lostemasmspopularesyunnavparaelmendenavegacin.Sustitulares
podranser<h1>con"ltimasNovedades"y"TemasPopulares".Tambin
podemoscolocarelanunciodelpdfenunaside,puesnollegaaser
directamentecontenidoprincipal,anestandorelacionado(pero
tangencialmente...).
Dentrodelossectiondenovedadesytemaspopulares,encontraremos
diversaspublicaciones.Siporejemploaparecen5novedades,cadaunade
ellasperteneceraunarticle,siesquehemosentendidobiensudefinicin
pginasatrs.Idemparacadaunodelostemasmspopularesdelsegundo
section,no?Cadaunoirdentrodeunarticleindependiente,perodentrodel
sectioncorrespondiente,claro.
Porotrolado,quierodarlealgodeestilosaesaparteprincipal,colocndole
algunosbordessombreados,etc,demodoque,comonohayyaunaetiqueta
queenglobetodaesaparteprincipal,rodeotodoaquellodeundivconel
nombre"contenido"parapoderaplicarleesosestilosmstarde,conCSS,
claro.
Conesolaestructuraquedabienclaraydefinida.Annecesitaracentrartoda
lapginaenelnavegador.ParaellohemosaprendidoenCCTWqueaplicando
ciertosestilosalaetiquetacorrespondiente,podemosconseguiruncentrado
perfectoencualquiernavegador.Elproblemaesquenotenemosninguna
etiquetaenglobandoatodalapgina...demodoque,comonoencuentro
ningunaetiquetasemnticaqueloenglobetodo,colocodenuevounsimplediv
ylecolocoelnombre"centrado"paraconseguireseefecto.Comoves,alser
sufuncinsolamenteladeaplicarestilos,usoundivynounaetiquetacon
significadosemntico.
Elcdigocompletopodraquedarmsomenosas:
<!DOCTYPEhtml>
<htmllang="es">
<head>
<metacharset="utf8"/>
<title>Titulo</title>
</head>
<body>
<divid="centrado">
<header>
<hgroup>
<h1>((TITULO))</h1>
<h2>((DESCRIPCIONDELAWEB))</h2>
</hgroup>
<divid="logotipo">((LOGOTIPO))</div>
</header>
<id="contenido">
<nav>
((MENUDENAVEGACION))
</nav>
<aside>
((ANUNCIODELPDF))
</aside>
<sectionid="izquierda">
<h1>UltimasNovedades<h1>
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
11/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
</article>((NOVEDADUNO))</article>
</article>((NOVEDADDOS))</article>
</article>((NOVEDADTRES))</article>
..........
</section>
<sectionid="centro">
<h1>TemasPopulares<h1>
</article>((POPULARA))</article>
</article>((POPULARB))</article>
</article>((POPULARC))</article>
..........
</section>
</div>
<footer>
<sectionid="copyright">((DatosCopyright))</section>
<sectionid="contacto">((DatosdeContacto))</section>
<sectionid="enlaces">((MapaWeb,Poltica,etc.))</section>
</footer>
</div>
</body>
</html>
Laetiquetainputesunejemplo.Antesseescribaconunabarritaalfinal,como
enesteejemplodeabajo:
<inputtype="text"name="name"/>
peroyanoesnecesarioenHtml5,quedandodeesteotromodo:
<inputtype="text"name="name">
ConlasversionesanterioresalHtml5,cuandonecesitabamosquealgunode
loscamposdelformulariofuerarellenadoporelvisitanteobligatoriamente,
tenamosquerealizarlacomprobacindequenoestuvieravaciodespusde
queelusuariopulsarasobreelbotndeenviodelosdatos.
LaversinHtml5haaadidoestenuevoatributo,requiredquenospermite
comprobarqueelcampohasidorellenadoantesinclusodepulsaresebotn
deenvo,sinnecesidaddemscomplicacionesocdigoextra.
Sielusuariodejaestecampoenblanco,algunosnavegadoresarrojarnun
mensajedeerror,osimplementecolocarnelcursordeescrituraalprimer
campovacio.
Esteatributosecolocadentrodelaetiquetadelinputdeestemodo:
<inputtype="text"id="nombredeusuario"name="usuario"required>
Mi
barraseparadorabiencrota
Buenoesoestodo,sequeestepostnoes
muybuenoyquemuchosmediran
novatoide(queesloquesoy )peroles
pidoquemediganquelefaltaamiposty
quetienemuyexageradoocomo
acomodarlomejor.Estoyabiertoa
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
12/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
cualquiertipodesugerencia..
PD:Sinoentendistemuybienelpostacate
dejolapaginadedondesaquelamayora(
porquealgoloediteconmisconocimientos
)delascosas.
http://www.comocreartuweb.com/
Compartir
Twittear
FuentesdeInformacinTutorialparaaprenderausarcodigos
HTML[MegaPost]
Elcontenidodelpostesdemiautora,y/o,esunrecopilacindedistintasfuentes.
Tags: html | aprender | megapost | a | usar | SENCILLO
Tegustloqueviste?
InscrbeteenelnewsletterdeTaringa!pararecibir
msartculoscomoeste.
Ingresatuemail
5razonespara
aprenderHTML
yCSS
Cursode
guitarra
Suscribirse
Comoaprender
aprogramary
nomorirenel
intento.
Info
Msica
Info
5razonespara
aprenderHTMLy
CSS
Cursodeguitarra
Comoaprendera
programaryno
morirenel
Juegos
Cienciayeducacin
Juegos
TodoSobre
SmashBros
[ComoJugar]
Quelenguajede
programacion
aprender
Comousarun
helicopteroRC
TodoSobre
SmashBros
[ComoJugar]
[Todo]
[Megapost]
Entra!!!
Quelenguaje
de
programacion
aprender
primero??
Comousarun
helicopteroRC
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
13/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
Comoaprender
ausar
photoshopen
minutos!
Nosabesusar
Photoshop?te
enseo
[MegaPost]
Parte1
Aprendera
usarPhotoshop
en10Minutos
Ebooksytutoriales
Info
Hazlotmismo
Comoaprendera
usarphotoshop
enminutos!
Nosabesusar
Photoshop?te
enseo
Aprenderausar
Photoshopen10
Minutos
10comentariosTutorialparaaprenderausarcodigosHTML
[MegaPost]
@ValleOhace3aos+4
Buenpost,porquserquelospostdelosnovatossevenmas
interesantesquelosdelazonadeNFU?allapurospostdemessi,
chichanoseque,yvideosquepuedoverenyoutube
@FraanCsphace3aos
Gracias
!!!
ValleOdijo:Buenpost,porquserquelospostdelos
novatossevenmasinteresantesquelosdelazonadeNFU?
allapurospostdemessi,chichanoseque,yvideosquepuedo
verenyoutube
@leonel3226hace3aos+1
huymeacuerdoqviestamierdaenlaescuela.jaja
buenpostigualcuandotengatiempololeo
@FraanCsphace3aos
ajajjaamienlaescueladepedomeensaanausarwordu.u.Gracias
porcomentar
leonel3226dijo:huymeacuerdoqviestamierdaenla
escuela.jaja
buenpostigualcuandotengatiempololeo
@epacheco9hace1ao
muybueno,peroademaslesrecomiendoatodosesteblogque
sellamaelbloggerdelprogramadoraquienseanmuybien
esplicadotodosobreHTML
http://bloggerdelprogramador.blogspot.com/p/estructurabasica
dehtml.html
@_xevier_hace3aos
TutorialparaaprenderausarcodigosHTML[MegaPost]
@SparKcshace3aos+1
+10masteryreco
@aguscs9hace3aos+1
Muybueno,perohacelosporpasos,osea,merefieroaque
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
14/15
11/5/2015
TutorialparaaprenderausarcodigosHTML[MegaPost]Taringa!
vallaspasoporpasoexplicandoporcadaparte,yaquepara
novatos(meincluyo)esdificildarsecuentayalgoqueresalteno
quedamal.igualvanmis10.
@epacheco9hace1ao
muybueno,peroademaslesrecomiendoatodosesteblogquese
llamaelbloggerdelprogramadoraquienseanmuybienesplicadotodo
sobreHTML
http://bloggerdelprogramador.blogspot.com/p/estructurabasicade
html.html
@DigitalWebnethace5meses
Muybuenpost,grantrabajo
.Tambienosrecomiendoquevisiten
micanaldeYouTube:
https://www.youtube.com/user/MrDigitalwebnetomiperfildetaringa:
http://www.taringa.net/DigitalWebnet
Unsaludo
@chinodfhace3meses
Excelenteelpostsoloquemehubieragustadounpoquitomsque
hubiermsejerciciosprcticos.Lesrecomiendoestecursodehtml
http://www.grupocodesi.com/cursos/cursodehtml.html
Losalimentos
quedeberas
conservar
fueradela
nevera.
Info
Losalimentos
quedeberas
conservarfuera
Queestas
haciendo?
pasayleeo
comenta.
Antidopingy
elResultado
deLaPelea
delSiglo
Offtopic
Deportes
Queestas
haciendo?pasa
yleeocomenta.
Antidopingyel
ResultadodeLa
PeleadelSiglo
ElReyFlix
Hernndez,
primer
venezolano
con2000
ponches
Noticias
ElReyFlix
Hernndez,
primer
juegoshd
livianospte2
(sintarjeta
grfica)
22Chistes
quesololos
amantesde
StarWars
entendern
Juegos
juegoshd
livianospte2
(sintarjeta
Humor
22Chistesque
sololos
amantesdeStar
http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html
15/15