70-480 – Tworzenie struktury dokumentu

70-480

Tworzenie struktury interfejsu użytkownika przy użyciu znaczników semantycznych, w tym dla aparatów wyszukiwania i czytników ekranu (elementy Section, Article, Nav, Header, Footer i Aside); tworzenie kontenera układu w języku HTML.



Jest to krótki opis pierwszego podrozdziału sekcji “Wdrażanie i edycja struktur i obiektów dokumentu“, która stanowi około 24% materiału do opanowania. Możemy z tego wyciągnąć przed nawias w zasadzie dwa elementy: tagi wprowadzone w HTML5 oraz tworzenie szablonów HTML.

Tagi wprowadzone HTML5 (HTML5 Tag Reference)

  • <section> – definiuje po prostu sekcję w strukturze HTML, która obejmuje pewną logiczną całość (np. rozdział, treść, nagłówek, stopka)
    <section>
      <h1>70-480</h1>
      <p>Tworzenie struktury dokumentu</p>
    </section>
  • <article> – definiuje niezależną sekcję i różni się od tagu <section> w zasadzie tym, że stworzoną w ten sposób strukturę powinniśmy móc łatwo przenosić w inne miejsca
    <article>
      <h1>70-480</h1>
      <p>Tworzenie struktury dokumentu</p>
    </article>
  • <aside> – stanowi w pewien sposób dopełnienie do treści, której dotyczy
    <p>Tworzenie struktury dokumentu</p>
    
    <aside>
      <h4>HTML5</h4>
      <p>Wprowadził szereg nowych znaczników, które opisują strukturę dokumentu.</p>
    </aside>
  • <footer> – stanowi stopkę dla danej struktury dokumentu, może to być stopka całej strony i / lub jej części
    <footer>
      <p>Copyright © mrzepinski.pl</p>
    </footer>
  • <header> – podobnie jak tag <footer>, ale w tym przypadku tworzymy nagłówek danej sekcji i / lub całej strony
    <article>
      <header>
        <h1>70-480 - Tworzenie struktury dokumentu</h1>
        <p><time pubdate datetime="2014-10-20"></time></p>
      </header>
      <p>...</p>
    </article>
  • <nav> – zbiór linków nawigacyjnych, które stanowić mogą menu danej strony lub sekcji
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a>
    </nav>

Tagów wprowadzonych w specyfikacji HTML5 jest oczywiście więcej, ale powyższe stanowią solidny trzon większości dokumentów HTML. Dzięki nim jesteśmy w stanie tworzyć, tak zwany semantyczny HTML, który poprzez użycie odpowiednich tagów “opisuje się sam”. Odpowiednia struktura, to także łatwa nawigacja i prostsze wyszukiwanie informacji, a także poprawne działanie na wielu urządzeniach.

Pełna lista tagów wprowadzonych w HMLT5.

Tworzenie szablonów HTML (HTML Layouts)

[caption id="attachment_5540" align="aligncenter" width="219"]http://www.w3schools.com/ http://www.w3schools.com[/caption]

Jak widać na powyższym obrazku, dzięki nowym tagom HTML5 możemy tworzyć różne części naszej strony w sposób bardzo opisowy. Z pewnością również każdy, kto kiedykolwiek spotkał się ze strukturą dokumentu HTML, mógł w niej dostrzec tagi <div>, które służą do grupowania innych elementów strony. Posłużę się w tym momencie przykładem ze strony: w3schools.com

<body>
  <div id="header">
    <h1>City Gallery</h1>
  </div>

  <div id="nav">
    London<br>
    Paris<br>
    Tokyo<br>
  </div>

  <div id="section">
    <h1>London</h1>
    <p>
      London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
      Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
    </p>
  </div>

  <div id="footer">
    Copyright © W3Schools.com
  </div>
</body>

Zdefiniowana została w ten sposób struktura dokumentu, w oparciu o tag <div>. Poza definicją samej struktury możemy ją także ostylować, wykorzystując do tego arkusz CSS.

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px; 
}

#section {
  width:350px;
  float:left;
  padding:10px; 
}

#footer {
  background-color:black;
  color:white;
  clear:both;
  text-align:center;
  padding:5px; 
}

w3school przedstawia także jeszcze trzeci sposób definiowania układu dokumentu, wykorzystując w tym celu element <table>. Układy tego typu nie są już jednak stosowane, a uważane są wręcz za antywzorzec.