Document i estructura del lloc web

This translation is incomplete. Please help translate this article from English.

Així com definim les parts individuals de la pàgina (per exemple, "un paràgraf" o "una imatge"), HTML també compta amb una sèrie d'elements a nivell de bloc que s'utilitzen per definir les àrees del lloc web (tals com "la capçalera", "el menú de navegació", "el principal contingut de la columna"). En aquest article es reflexiona sobre com planificar una estructura bàsica d'un lloc web, i escriure el codi HTML per representar aquesta estructura.

Requisits previs: Familiaritat bàsica en HTML, s'explica en Inici en HTML. format del text en HTML, s'explica en fonaments de text HTML. Com funcionan els hipervincles, s'explica en Crear hipervincles.
Objectiu: Aprendre a com estructurar el document usant les etiquetes semàntiques, i com elaborar l'estructura d'un lloc web senzill.

Seccions bàsiques d'un document

Les pàgines web poden i tenen un aparença molt diferent les unes de les altres, però totes elles tendeixen a compartir components estàndard similars, llevat que la pàgina es mostri un vídeo o un joc de pantalla completa, és part d'alguna classe de projecte d'art, o simplement està mal estructurada:

encapçalament (header)
Sol ser una gran franja a la part superior amb una gran capçalera i/o logotip. Aquí és on la informació principal sobre un lloc web, en general, es manté comú d'una pàgina web a una altra.
barra de navegació (navigation bar)
Els enllaços a les seccions principals del lloc; en general representats pels botons del menú, enllaços o pestanyes. Igual que la capçalera, aquest contingut roman generalment consistent d'una pàgina web a una altra - tindra una navegació inconsistent en el lloc web només ens portarà a usuaris frustrats, confosos. Molts dissenyadors web consideren que la barra de navegació ha de ser part de la capçalera en lloc d'un component individual, però això no és un requisit; de fet, alguns sostenen també que el tenir els dos separats és millor per a l'accesibilitat, com a lectors de pantalla poden llegir les dues característiques millor si estan separades.
contingut principal (main content)
Una àrea gran en el centre que conté la major part del contingut únic d'una pàgina web determinada, per exemple el vídeo que voleu veure, o la història principal que esteu llegint, o el mapa que desitjeu veure, o els titulars de les notícies, etc. . Aquesta és l'única part de la pàgina web que sens dubte pot variar d'una pàgina a una altra!
barra lateral (sidebar)
Alguns perifèrics d'informació, enllaços, cites, anuncis, etc. En general, això és contextual per al que està contingut en el contingut principal (per exemple, en un article de la pàgina de notícies, la barra lateral podria contenir la biografia de l'autor, o enllaços a articles relacionats) però hi ha també casos on trobareu alguns elements recurrents com un sistema de navegació secundària.
peu de pàgina (footer)
Una franja a la part inferior de la pàgina que generalment conté lletra petita, els avisos de copyright, o informació de contacte. És un lloc per posar informació comuna (com la capçalera) però en general, aquesta informació no és crítica o secundària a la pròpia pàgina web. El peu de pàgina també s'utilitza de vegades per SEO, proporcionant enllaços per a un accés ràpid al contingut popular.

Un "lloc web típic" podria ser exposat a alguna cosa com això:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

HTML per estructurar el contingut

L'exemple simple que es mostra a sobre no és prou, però és perfectament acceptable per il·lustrar un exemple típic de disseny d'una pàgina web. Alguns llocs web tenen més columnes, alguns són molt més complexes, però s'entén la idea. Amb el CSS correcte, es pot usar pràcticament qualsevol element per embolicar-lo al voltant de les diferents seccions i aconseguir veure-ho com el volem, però com s'ha discutit abans, hem de respectar la semàntica, i utilitzar l'element adequat per al treball correcte.

Això és perquè els visuals no expliquen tota la història. Utilitzem el color i grandària de font per cridar l'atenció dels usuaris a les parts més útils del contingut, com el menú de navegació i enllaços relacionats, però què passa amb les persones amb discapacitat visual, per exemple, que no poden trobar conceptes com a "rosa" i "font gran" molt útil?

Nota: Les persones daltòniques representen al voltant del 8% de la població mundial. Les persones cegues i amb discapacitats visuals representen aproximadament entre el 4-5% de la població mundial (el 2012 hi havia 285 milions d'aquest tipus de persones al món, mentre que la població total va ser de prop de 7.000 milions.)

En el codi HTML, es podem marcar seccions de contingut en base a la seva funcionalitat - es poden utilitzar elements que representin les seccions de contingut que s'han descrit anteriorment de forma inequívoca, i tecnologies de suport, com els lectors de pantalla que poden reconèixer aquells elements i ajudar amb tasques com "trobar la navegació principal ", o" trobar el contingut principal ". Com hem esmentat anteriorment en el curs, hi ha una sèrie de conseqüències de no utilitzar l'estructura de l'element correctament i la semàntica per un treball adequat.

Per dur a terme aquest marcat semàntic de dalt, HTML proporciona etiquetes específiques que es poden utilitzar per a representar aquestes seccions, per exemple:

  • encapçalament (header): <header>.
  • barra de navegació (navigation bar): <nav>.
  • contingut principal (main content): <main>, amb diverses subseccions de contingut representats per <article>, <section> i elements <div>.
  • barra lateral (sidebar): <aside>; sovint col·locat a l'interior <main>.
  • peu de pàgina (footer): <footer>.

Aprenentatge actiu: explorar el codi per al nostre exemple

El exemple vist anteriorment està representat pel codi següent (també es pot trobar l'exemple en el repositori de Github). Ens agradaria que miréssiu l'exemple de dalt, i després miréssiu per sobre la llista de sota per veure les parts del marcat amb la secció visual.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used accross all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- A Search form is another commmon non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Another subsection</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

Preneu-vos el temps per mirar per sobre el codi i entendre-ho-- els comentaris dins del codi també hauria d'ajudar-vos a entendre-ho. No estem demanant fer molt més en aquest article, ja que la clau per entendre el disseny del document està en escriure una sòlida estructura HTML, i a continuació posar-ho amb CSS. Esperarem per això fins que comenceu a estudiar disseny CSS com a part del tema de CSS.

Elements de disseny HTML amb més detall

És bo entendre el significat global de tots els elements de seccionament HTML en detall - això és una cosa que treballarem de forma gradual a mesura que començen a aconseguir més experiència en el desenvolupament web. Poden trobar una gran quantitat de detalls mitjançant la lectura de la nostra referència elements HTML. De moment, aquestes són les principals definicions que hem de tractar de comprendre:

  • <main> és el contingut exclusiu d'aquesta pàgina. L'Ús de <main> només és una vegada per pàgina, i es posar directament a l'interior de <body>. Per anar bé, això no hauria d'estar niat dins d'altres elements.
  • <article> tanca un bloc de contingut relacionat que té sentit per si sol, sense la resta de la pàgina (per exemple, una sola entrada al bloc.)
  • <section> és similar a <article>, però és més per agrupar en una sola part de la pàgina, constituint una peça única de funcionalitat (per exemple, un mini mapa, o un conjunt de titulars d'articles i resums). Es considera la millor pràctica per començar cada secció amb una capçalera; també tinguem en compte que poden fragmentar <article>s en diferents <section>, o <section>s en diferents <article>s, depenent del context.
  • <aside> conté contingut que no està directament relacionat amb el contingut principal, però pot proporcionar informació addicional indirectament relacionat amb ell (entrades del glossari, biografia de l'autor, enllaços relacionats, etc.)
  • <header> representa un grup de contingut introductori. Si es tracta d'un fill de <body> defineix la capçalera global d'una pàgina web, però si es tracta d'un fill d'un <article> o <section> defineix una capçalera específica per a aquesta secció (tractar de no confondre això amb títols i capçaleres.)
  • <nav> conté la funcionalitat de navegació principal de la pàgina. Enllaços secundaris, etc., no anirien a la navegació.
  • <footer> representa un grup de contingut al final d'una pàgina.

Embolcalls no semàntics

A vegades ens trobem amb una situació en la qual no es troba un element semàntic ideal per agrupar alguns elements junts o embolicar algun contingut. A vegades és possible que vulguem simplement agrupar un conjunt d'elements junts per afectar a tots com una sola entitat amb una mica de CSS o JavaScript. Per a casos com aquests, HTML proporciona els elements <div> i <span>. S'han d'utilitzar preferiblement amb un atribut adequat class, per proporcionar algun tipus d'etiqueta per a ells perquè puguin ser dirigits fàcilment.

<span> és un element en línia no semàntic, que només s'ha d'utilitzar si no es pot pensar en un millor element de text semàntic per embolicar el seu contingut, o no es vol afegir cap significat específic . Per exemple:

<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>

En aquest cas, la nota de l'editor se suposa que simplement proporciona una adreça addicional per al director de l'obra; no se suposa que tingui un significat semàntic addicional. Per als usuaris amb visió, CSS potser seria utilitzat per distanciar lleugerament la nota del text principal.

<div> és un element de bloc no semàntic, que només s'ha d'utilitzar si no es pot pensar en fer servir un element de bloc semàntic millor , o no volem afegir cap significat específic. Per exemple, imaginem un carret de la compra que es pot optar per tirar en qualsevol moment durant un temps en un lloc de comerç electrònic:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

Això no és realment un <aside>, ja que no s'identifica necessàriament amb el contingut principal de la pàgina (si ho desitjeu ho podeu veure des de qualsevol lloc.) Ni tan sols és particularment necessari utilitzar un <section>, ja que no és part del contingut principal de la pàgina. Pel que un <div> està molt bé en aquest cas. Hem inclòs una capçalera com un pal indicador per ajudar els usuaris lectors de pantalla a trobar-ho.

Atenció: Els Divs són tan còmodes d'usar que és fàcil d'utilitzar-los en massa. Ja que no aporten cap valor semàntic, només desordre en el codi HTML. Aneu amb compte a utilitzar-lo, només quan no hi ha millor solució semàntica i tractar de reduir el seu ús al mínim, en cas contrari tindrem dificultats en l'actualització i manteniment dels documents.

Salts de línia i regles horitzontals

Dos elements que utilitzarem de tant en tant i voldreu saber sobre ells, són <br> i <hr>

<br> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida, en una situació en la qual es desitja un seguit de línies curtes fixes, com en una adreça postal o un poema. Per exemple:

<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>

Sense els elements <br>, el paràgraf només es mostrarà en una línia llarga (com hem dit abans en el curs, HTML ignora la major part de l'espai en blanc); amb ells en el codi, el marcatge es mostre com aquest:

There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.

Els elements <hr> crean una línia horitzontal en el document que indica un canvi de temàtica en el text (com ara un canvi de tema o escena). Visualment s'acaba de veure com una línia horitzontal. A tall d'exemple:

<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>

Seria com això:

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.


Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

Planificar un lloc web senzill

Una vegada planificat el contingut d'una pàgina web simple, el següent pas lògic és tractar d'esbrinar quin contingut volem posar en tota la pàgina web, les pàgines que es necessitan, i la forma en què s'han d'arreglar i enllaçar a l'altra per a una millor experiència d'usuari possible. Això es diu Arquitectura de la informació. En un lloc web gran i complexa, una gran quantitat de planificació pot entrar en aquest procés, però per a un lloc web senzill d'unes poques pàgines això pot ser força simple i divertit!

  1. Recordeu que tindreu alguns elements comuns a la majoria (si no totes) de pàgines - tal com el menú de navegació, i el contingut de peu de pàgina. Si el lloc és per una empresa, per exemple, és una bona idea tenir la seva informació de contacte disponible al peu de pàgina a cada pàgina. Recordeu que és el que voleu tenir comú a totes les pàgines.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. A continuació, és dibuixar un esbós del que és possible que es vulgui en l'estructura de cada pàgina que se sembli (pot ser que se sembli la nostra pàgina web senzilla d'amunt.) Recordeu el que cada bloc serà. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. Ara, una pluja d'idees dels altres (no és comú a totes les pàgines) del contingut que desitjem tenir al lloc web - escriure una llista gran cap avall. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. A continuació, tractar d'ordenar tots aquests elements de contingut en grups, per tenir una idea de que les parts puguin viure juntes en diferents pàgines. Això és molt similar a una tècnica anomenada Targeta de classificació. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. Ara tractar de dibuixar un mapa del lloc en brut - tenir una bombolla per a cada pàgina del lloc, i dibuixar línies per mostrar el flux de treball típic entre pàgines. La pàgina d'inici probablement estarà al centre, i enllaçar a la majoria, si no tots els altres; la major part de les pàgines d'un lloc petit han d'estar disponibles a la navegació principal, encara que hi ha excepcions. També pot ser que es vulgui incloure notes sobre com podrien ser presentades les coses.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

Aprenentatge actiu: crear el vostre propi mapa del lloc

Intenteu dur a terme l'exercici anterior per a un lloc web de la vostra pròpia creació. Ùs agradaria fer una pàgina web sobre?

Nota: Deseu el seu treball en algun lloc; que deu estar més endavant.

Sumari

En aquest punt, heu de tenir idea més clara sobre com estructurar una pàgina/lloc web. En l'últim article d'aquest mòdul, estudiarem com depurar HTML.

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,