Praktyczne repetytorium cz. 2.1 HTML

Po wykonaniu grafik przystępujemy do zakodowania stron witryny zgodnie z wymaganiami. Zadanie to ułatwi edytor Notepad++ i przeglądarka Firefox. Powtórzmy najważniejsze elementy.

Rys historyczny

czyli jak się kształtowały wytyczne CKE we wszystkich odbytych do tej pory sesjach

2014

wiosna

Arkusz E.14-01-14.05

jesień

Arkusz E.14-01-14.08

2015

zima

Arkusz E.14-01-15.01

wiosna

Arkusz E.14-01-15.05 - brak wytycznych w postaci obrazu. Struktura strony składa się z nagłówka i zawartości. W nagłówku tytuł strony. W bloku zawartości galeria.

jesień

Arkusz E.14-01-15.08

2016

zima

Arkusz E.14-01-16.01
Arkusz E.14-02-16.01
Arkusz E.14-03-16.01
Brak arkusza E.14-04-16.01 (z opisów wiadomo że był analogiczny do arkusza E.14-05-16.01 tylko tematyka dotyczyła kantoru wymiany walut)

Arkusz E.14-05-16.01

wiosna

Arkusz E.14-01-16.05
Arkusz E.14-02-16.05
Arkusz E.14-03-16.05

jesień

Arkusz E.14-01-16.08
Arkusz E.14-02-16.08

Brak informacji o arkuszu E.14-03-16.08

Arkusz E.14-04-16.08

2017

zima

Arkusz E.14-01-17.01

Arkusz E.14-02-17.01
Arkusz E.14-03-17.01

Arkusz E.14-04-17.01

wiosna
















Wnioski

Na podstawie powyższych przykładów i analizie kryteriów oceny arkuszy można przygotować uniwersalny wzorzec.

Struktura stron

Plik index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>tytuł dokumentu</title>
  <link rel="stylesheet" href="styl.css">
 </head>
 <body>
  <header>
nagłówek strony
  </header>
  <nav>
menu strony
  </nav>
  <main>
zawartość strony
  </main>
  <aside>
zakładka strony
  </aside>
  <footer>
stopka strony
  </footer>
 </body>
</html>

 Uwagi:
  • Powyższą strukturę można wykonać na elementach <div> tylko będzie trochę więcej pisania (dla ułatwienia atrybuty id mogą mieć wartości zgodne z nazwami elementów sekcji HTML5 np. <div id="header">).
  • Jeśli style CSS mają być zdefiniowane w stronie
    kod:
    <link rel="stylesheet" href="styl.css">
    zastępujemy: 
    <style>
</style>
  • Kod przykładowy należy dostosować (usunąć niepotrzebne elementy, zmienić ich kolejność) i uzupełnić (tytuł dokumentu, zawartość nagłówka, menu, stopki i innych struktur które się powtarzają).
Nagłówek strony
najczęściej zawiera tytuł strony i wymagany jest kod:
<h1></h1>
lub baner, którego kliknięcie otwiera stronę główną:
<a href="index.html"><img src="" alt=""></a>
Menu strony
zawiera nawigację witryny i niejednokrotnie wymagane było umieszczenie hiperłączy w liście (wypunktowanej <ul> lub numerowanej <ol>)
<li><a href=" ">Tytuł strony</a></li>

Pliki witryny

Po wykonaniu i sprawdzeniu poprawności pliku index.html lub index.php (w zależności od wymagań) wykonujemy pozostałe pliki witryny wykorzystując napisany kod. Zawartością podstron może być formularz lub same pola formularza, skrypt, tabela, obraz, hipertekst. Dobrze po zakończeniu przetestować poprawność kodu, działania hiperłączy.

Przykłady tabel
 

<table border="1">
<tr>
<th></th>
...
<th></th>
</tr>
<tr>
<td rowspan=""></td>
...
<td></td>
</tr>
</table>

Przykłady formularzy
 

 
<form>
...

<input type="text|number|button"  value="">
...
</form>

Warto dodatkowo zapoznać się z e-podręcznikiem Tworzenie Stron (Web Editing)
http://edycjastron.blogspot.com/p/podrecznik.html