Section <section> – sekcja

Globalne atrybuty HTML.

Atrybuty globalne mog by uyte z kadym znacznikiem HTML.

Atrybuty nadaj znacznikom HTML znaczenie i okrelaj 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)

Przykadowe znaczniki poniej s znacznikami semantycznymi.

Header <header> – nagówek.

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

</header>

Na stronie moe by wiele nagówków (header).

Kada sekcja, artyku moe mie swój nagówek.

Footer <footer> – stopka.

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

</footer >

Na stronie moe by wiele stopek (footer).

Kada sekcja, artyku moe mie swoj stopk.

Navigation <nav> – nawigacja.

Nawigacja na stronie jest zwykle istotn czci witryny.

Na stronie moe by wiele znaczników nawigacji.

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

<nav>

<ul>

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

<li><a href="#">Warunki uywania</a></li>

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

</ul>

</nav>

</footer>

Section <section> – sekcja.

Podzia na sekcje to podzia logiczny pozwalajcy organizowa stron.

Na stronie moe by wiele znaczników sekcji i artykuu.

……

</section>

Article <article> – artyku

Znacznik artyku okrela podstawow zawarto treci strony.

Podzia na artkuy to podzia logiczny pozwalajcy organizowa stron.

Na stronie moe by wiele znaczników artykuu.

<h2>Jak powinnimy przygotowywa si do egzaminu?</h2>

<p> Wpis Mariana z dnia:

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

</p>

</header>

<p>

Pierwsza regua - kady uczy si sam. Co naley rozumie - nikt za ciebie si

nie nauczy.<br> Druga regua - uczymy si przez wiczenia. Nie naucz si jazdy na

rowerze patrzc jak inni jed. <br> Trzecia regua - uczenie si to rado. Jeli

nauk bd traktowa jako przyjemno - naucz si szybko. Jeli nauka bdzie

udrk - nie naucz si nigdy.

</p>

<p>

Nauka to powtarzanie. Nie naucz si siadajc raz przed egzaminem.

Musz usi przynajmniej siedem razy. Dlaczego siedem, a nie sze lub osiem?

Siedem wzio si z bajki: "za siedmioma górami, za siedmioma lasami". Kilka

razy musz usi. Dlaczego nie powiedziaem 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 moe 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 zostaa „mdro” – cytat.

Kolumna boczna <aside> jest umieszczona (zagniedona) 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 zakoczenie dodanie paska bocznego. Z linkami do wczeniejszych wpisów.

Ten pasek boczny nie jest zwizany z adnym artykuem. 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">wicej</a></li>

</ul>

</nav>

</section>

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

Nie kada 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