You are on page 1of 15

11/5/2015

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

AnuncieenTaringa! | Ayuda | ReglasdelaComunidad | Desarrolladores | Denuncias | ReportarAbusoDMCA | Trminosycondiciones | Privacidaddedatos | Trabajaconnosotros! |


Reportarbug

http://www.taringa.net/posts/info/13542227/TutorialparaaprenderausarcodigosHTMLMegaPost.html

15/15

You might also like