Section <section>

Globalne atrybuty HTML.

Atrybuty globalne mogą być użyte z każdym znacznikiem HTML.

Atrybuty nadają znacznikom HTML znaczenie i określają kontekst.

	Attribute	Description
	accesskey	Specifies a shortcut key to activate/focus an element
	class	Specifies one or more classnames for an element (refers to a class in a style sheet)
	contenteditable	Specifies whether the content of an element is editable or not
	contextmenu	Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
	data-*	Used to store custom data private to the page or application
	dir	Specifies the text direction for the content in an element
	draggable	Specifies whether an element is draggable or not
	dropzone	Specifies whether the dragged data is copied, moved, or linked, when dropped
	hidden	Specifies that an element is not yet, or is no longer, relevant
	id	Specifies a unique id for an element
	lang	Specifies the language of the element's content
	spellcheck	Specifies whether the element is to have its spelling and grammar checked or not
	style	Specifies an inline CSS style for an element
	tabindex	Specifies the tabbing order of an element
	title	Specifies extra information about an element
	translate	Specifies whether the content of an element should be translated or not

(http://www.w3schools.com/tags/ref_standardattributes.asp)

Przykładowe znaczniki poniżej są znacznikami semantycznymi.

Header <header> – nagłówek.

<h1> Różne wpisy Uczelniane</h1>

</header>

Na stronie może być wiele nagłówków (header).

Każda sekcja, artykuł może mieć swój nagłówek.

Footer <footer> – stopka.

<p>Copyright @ 2015 Uczelnia.</p>

</footer >

Na stronie może być wiele stopek (footer).

Każda sekcja, artykuł może mieć swoją stopkę.

Navigation <nav> – nawigacja.

Nawigacja na stronie jest zwykle istotną częścią witryny.

Na stronie może być wiele znaczników nawigacji.

<p>Copyright @ 2015 Uczelnia.</p>

<nav>

<ul>

<li><a href="#">Strona główna</a></li>

<li><a href="#">Warunki używania</a></li>

<li><a href="#">Prywatność</a></li>

</ul>

</nav>

</footer>

Section <section> – sekcja.

Podział na sekcje to podział logiczny pozwalający organizować stronę.

Na stronie może być wiele znaczników sekcji i artykułu.

……

</section>

Article <article> – artykuł

Znacznik artykuł określa podstawową zawartość treści strony.

Podział na artkuły to podział logiczny pozwalający organizować stronę.

Na stronie może być wiele znaczników artykułu.

<h2>Jak powinniśmy przygotowywać się do egzaminu?</h2>

<p> Wpis Mariana z dnia:

<time datetime="2015-10-01T13:21">1 października 2015 godzina 13:21</time>

</p>

</header>

<p>

Pierwsza reguła - każdy uczy się sam. Co należy rozumieć - nikt za ciebie się

nie nauczy.<br> Druga reguła - uczymy się przez ćwiczenia. Nie nauczę się jazdy na

rowerze patrząc jak inni jeżdżą. <br> Trzecia reguła - uczenie się to radość. Jeśli

naukę będę traktował jako przyjemność - nauczę się szybko. Jeśli nauka będzie

udręką - nie nauczę się nigdy.

</p>

<p>

Nauka to powtarzanie. Nie nauczę się siadając raz przed egzaminem.

Muszę usiąść przynajmniej siedem razy. Dlaczego siedem, a nie sześć lub osiem?

Siedem wzięło się z bajki: "za siedmioma górami, za siedmioma lasami". Kilka

razy muszę usiąść. Dlaczego nie powiedziałem od razu "kilka"? Bo Word poprawiał

mi na "klika".

</p>

<p><a href="comments"><i>13 Komentarzy </i></a>...</p>

</footer>

</article>

W artykule <article> mogą być nagłówki <header>, stopki <footer>.

Artykuł może być podzielony na wiele sekcji <section>.

Aside <aside> – bok, kolumna boczna.

<aside>

<p>

“ Nigdy nie mów, że to zbyt trudne! ”

</p>

<p>

“ Zawsze ciesz się tym co cię czeka! ”

</p>

</aside>

W znaczniku <aside> umieszczony została „mądrość” – cytat.

Kolumna boczna <aside> jest umieszczona (zagnieżdżona) w artykule <article>, artykuł zaś umieszczony jest w sekcji <section>.

………

</header>

<aside>

<p>

“ Nigdy nie mów, że to zbyt trudne! ”

</p>

<p>

“ Zawsze ciesz się tym co cię czeka! ”

</p></aside>

<p>

……

</p>

<p>

……

</p>

……

</footer>

</article>

</section>

Na zakończenie dodanie paska bocznego. Z linkami do wcześniejszych wpisów.

Ten pasek boczny nie jest związany z żadnym artykułem. Dodamy go jako element nawigacji <nav> w osobnej sekcji <section>.

<nav>

<h3>Archiwa</h3>

<ul>

<li><a href="2015/09">wrzesień 2015</a></li>

<li><a href="2015/08">sierpień 2015</a></li>

<li><a href="2015/07">lipiec 2015</a></li>

<li><a href="2015/06">czerwiec 2015</a></li>

<li><a href="2015/04">kwiecień 2015</a></li>

<li><a href="2015/03">marzec 2015</a></li>

<li><a href="2015/01">styczeń 2015</a></li>

<li><a href="all">więcej</a></li>

</ul>

</nav>

</section>

Element nawigacji – znacznik <nav> to oznaczenie specjalnego obszaru nawigacji, to sposób ustrukturyzowania naszej strony.

Nie każda grupa linków musi być zawarta w obszarze nawigacji.

Dodajemy arkusz stylów „style.css”

body{

margin: 15px auto;

font-family: Arial, "MS Trebuchet", sans-serif;

width: 960px;

}

p{ margin: 0 0 20px 0;}

p, li{ line-height: 20px; }

#page_header{ width: 100%; }

#page_header > nav > ul, #page_footer > nav > ul{

list-style: none;

margin: 0;

padding: 0;

}

#page_header > nav > ul > li, #page_footer nav > ul > li{

margin: 0 20px 0 0;

padding: 0;

display: inline;

}

#posts{

float: left;

width: 74%;

}

#posts aside{

float: right;

font-size: 20px;

line-height: 40px;

margin-left: 5%;

width: 35%;

}

#sidebar{

float: left;

width: 25%;

}

#page_footer{

clear: both;

display: block;

text-align: center;

width: 100%;

}

Wpis w sekcji <head>

Literatura:

1) http://www.w3schools.com/

2) wikipedia

3) HTML5 & CSS3 Brian P. Hogan