ArmadobsicodeunsitioenHtml5

9julio,2013

Ferchu

Html5/Css3

Sincomentarios

Aprenderadesarrollarenhtmlesunatareafcil,sinembargohayalgoque
noestanfcilyqueamuchosnosllevaacometermuchoserrores:utilizar
correctamenteloselementosdehtml.Cadaetiquetaenhtmltieneun
propsito,porejemplounh1seutilizaparadefinirelttuloprincipaldeuna
pgina.Estoqueenteoraparecesencilloenlaprcticasetornaunatarea
complejaquemuchasvecesnosllevaautilizarlasetiquetasdeforma
errnea.
Porejemplo,supongamosquetuvisemosquemostrarunalistaconitems:
Item1
Item2
Item3
Estopodramoshacerlodelasiguientemanera:
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>

Aunqueestonosdevolvervisualmenteunalistaestamoscometiendounerror,yesquelaetiquetapse
hacreadoparaprrafosynosotrosnoestamosescribiendotresprrafos,sinotrestemdeunalista,por
tantoparaellodebemosusarlaetiquetacorrespondiente,laetiquetaulparadefinirqueserunalista,y
cadatemconunaetiquetali:
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

Unpocodehistoria:TablasyDivs
Elarmadodeunsitiowebesalgoquemantieneunalgica,peroquemuchasvecesnoserespeta.Enlos
primerosaoslossitiosweberanbsicamenteaplicacionesestticas,conestomerefieroaqueel
contenidodeunapginanosealimentabadeunabasededatos,sinoqueelclientepedaalgo,el
desarrolladorabraelarchivo.html,editaba,loguardabaylosubadenuevoalservidor.Ademsenlos
primerosaosconlaausenciadecss,todolorelacionadocondiseo,yaseacolores,tiposdeletras,
tamaos,etcdebadefinirsedesdeelmismohtml.
Tablas,laetiquetatable,aunquehayatenidoundobleusoalgunavez,stastieneunpropsito:crear

tablas.Aqumerefieroconesto?Muysimple,atablas,porejemplounfixturedeuncampeonatode
ftbolparamostrarlospuntos,goles,partidosganados,empatados,perdidos,etc.Tambinunbanco
podramostrarunresumendecuentadeunclientemedianteunatabla.Peroamediadosdelos90,y
principiosdel2000lastablastenanunusoqueibamsall.Conlaausenciadehojasdeestilos,los
desarrolladoresdebanmantenerunaestructura,ylaetiquetamscercanaalograresoerala
etiquetatable.Lossitiossearmabancontablas,unaparadefinirelesqueletodelaweb,tablasparadefinir
barraslaterales,tablasdentrodetablas,unaensaladadetablas,loqueterminabahaciendoelcdigomuy
pocolegible.
Conlallegadadecss,lacosaempezacambiar,comenzeldesprecioporlaetiquetatable.Sulugarfue
reemplazadoporotra:div.Estaltimatambintieneunpropsito:definirunareaennuestrositio.
Ademsconlahojadeestilosestaetiquetaadquieremuchoprotagonismo,ahoratodoeldiseosedefine
desdeelcssynodesdeelhtml.Sipusiramosunedificioencomparacinconunsitioweb,podramos
decirquehtmlsonlasvigas,lasparedes,elpiso,eltecho,lasventanas,laspuertas,etc.Mientrasquecss
eslapintura,elcolordelasventanas,eltipodemaderaqueusaelpiso,etc.
Sitiowebbsico

Loazulseralacabeceradenuestrositio,dondeestelttulo,tambinpodratenerunsubtituloyellogo
delaempresa.
Lonaranjaseralabarradenavegacin,dondeestnlosenlacesquepermitennavegaralaspginas
principalesdenuestrositio.
Elcontenedordecolorverdeseralapartecentraldenuestrapgina,osealoimportantedelapgina.Por
ejemploalentraralindexdeestebloglalistadeposteosquevoyrealizando,yenelcasodeesteposteo

elposteoenformaindividual.
Labarraamarilladeladerechanosmuestrainformacinsecundariadenuestrositio,oseanoesloms
importante,esunainformacinadicional.
Yfinalmentederojonuestropiedepgina.Dondeseencuentrainformacinvisibleparaelvisitantesobre
laautoradelsitio.
Elcdigoresumido(dentrodelbody)seraalgocomoesto:
<divid="contenedor">
<divid="header">
<h1>Ttulodenuestrapgina</h1>
</div>
<divid="nav">
<ul>
<li>Boton1</li>
<li>Boton2</li>
<li>Boton3</li>
<li>Boton4</li>
<li>Boton5</li>
</ul>
</div>
<divclass="section">
<divclass="article">
<h2>Artculo1</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</div>
<divclass="article">
<h2>Artculo2</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</div>
<divclass="article">
<h2>Artculo3</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</div>
<divclass="article">
<h2>Artculo4</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</div>
</div>
<divclass="aside">
<divclass="article">
<h2>ltimasnoticias</h2>
<ul>

<li>Artculo1</li>
<li>Artculo2</li>
<li>Artculo3</li>
<li>Artculo4</li>
<li>Artculo5</li>
<li>Artculo6</li>
</ul>
</div>
<divclass="article">
<h2>Categoras</h2>
<ul>
<li>Categora1</li>
<li>Categora2</li>
<li>Categora3</li>
<li>Categora4</li>
<li>Categora5</li>
<li>Categora6</li>
<li>Categora7</li>
<li>Categora8</li>
<li>Categora9</li>
</ul>
</div>
</div>
<divid="footer">
<p>Desarrolladoporautor</p>
</div>
</div>

Hastaacnadanuevo,sinembargohayuntema.Enprimerlugarhemosdefinidocadapartedenuestro
sitiocondivs,lacabecera,elpiedepgina,labarradenavegacin,etc.Estonoestmal,porquehasta
ahoranosotrostenemosunasolaformadedefiniruncontenedor:conunaetiquetadiv.Perocmo
sabenlosnavegadorescomoGoogledequformaestarmadonuestrositio,laestructuradelmismo?
Ademsnosotrosalolargodelahistoriahemospasadodesdeelmalusodelastablasalabusodelos
divs.Todoesundiv,todoestdefinidopordivs.Escribimosestaetiquetatantasvecesqueluegoesdifcil
distinguirfcilmentecadaporcindenuestrohtml,independientementedesitieneunid,unaclasso
comentarios.
Html5traeconsigonuevasetiquetasparadefinirlasdistintaspartesdenuestrapgina:
headerSerelcontenedordelacabeceradenuestrositio.Dentrodeberahaberunh1conelttulo
denuestrapginaytodotipodeinformacinrelacionadaconlainformacindepresentacinde
nuestrapgina.
navLamayoradelossitioswebpresentanunabarradenavegacinprincipalconlosenlacesalas
pginasprincipales,estaetiquetacontendresabarra.

sectionLaetiquetasectiondefinirlaspartesprincipalesdenuestrositio.Podramostener
unsectionparamostrarlalistadeposteosdeunblog,paramostrarunposteoindividualmente,los
comentariosdeunblog,uncatlogodeproductos,etc.
asideAdiferenciadesectionestasetiquetascontendrnaquellainformacinqueestensegundo
planoennuestrapgina.Porejemplo,sipensamosenunsitiocomoYoutube,sectionserael
contenedordelvideo,lapartecentral,mientrasqueasideserelcontenedordelosvideos
relacionados,loopcional.
articleDijimosquesectionpodraserutilizadoporejemploparadefiniruncontenedordeposteoso
comentarios,entoncesenelcasodelosposteos,cadaarticleserunposteoyeneldecomentarios,
cadaarticleseruncomentario.Tambinpuedenutilizarsedentrodelosasidedelamismaforma,
definirlosdistintosbloquesdeunbloquepadre.
footerEstaetiquetaservirdecontenedorparaelpiedenuestrapgina,dondeseencuentratodala
informacindelaautora.
Asuvezlasetiquetasheaderyfooternoslosirvenparadefinirlacabeceraypiedepginadelsitioen
s,sinotambinpuedenutilizarsedentrodeotrasetiquetas.Porejemploenuncatlogodeproductos,
paralacabeceraypiedecadaproducto:
<sectionid="catalogo">
<article>
<header>
<h1>1300C0</h1>
</header>
<p>Cuchillodecermicadecolorblanco.Largodehoja:12cm.</p>
<footer>
<p>Categora:<strong>Chef</strong></p>
</footer>
</article>
</section>

Entoncesvolviendoanuestromodelodesitiopodramosdefinirelmismoconlasnuevasetiquetasde
html5deestaforma:
<divid="contenedor">
<header>
<h1>Ttulodenuestrapgina</h1>
</header>
<nav>
<ul>
<li>Boton1</li>
<li>Boton2</li>
<li>Boton3</li>
<li>Boton4</li>

<li>Boton5</li>
</ul>
</nav>
<section>
<article>
<h2>Artculo1</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</article>
<article>
<h2>Artculo2</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</article>
<article>
<h2>Artculo3</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</article>
<article>
<h2>Artculo4</h2>

<p>Loremipsumadhisscriptablanditpartiendo,eumfastidiiaccumsaneuripidi
</article>
</section>
<aside>
<article>
<h2>ltimasnoticias</h2>
<ul>
<li>Artculo1</li>
<li>Artculo2</li>
<li>Artculo3</li>
<li>Artculo4</li>
<li>Artculo5</li>
<li>Artculo6</li>
</ul>
</article>
<article>
<h2>Categoras</h2>
<ul>
<li>Categora1</li>
<li>Categora2</li>
<li>Categora3</li>
<li>Categora4</li>
<li>Categora5</li>
<li>Categora6</li>
<li>Categora7</li>

<li>Categora8</li>
<li>Categora9</li>
</ul>
</article>
</aside>
<footer>
<p>Desarrolladoporautor</p>
</footer>
</div>

Comovernelcdigoesmuchomslegibleyahoralosbuscadoressabrnquescadaparteennuestra
pgina.