Szukaj na tym blogu

Edycja stron

Po wykonaniu grafik przystępujemy do zakodowania stron witryny zgodnie z wymaganiami. Zadanie to ułatwi edytor kodu (np. Notepad++) i przeglądarka (np. 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
















2019

zima




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 lub class mogą mieć wartości zgodne z nazwami elementów sekcji HTML5 np. <div id="header">,  <div class="footer">).
  • 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 (pamiętać o tekście alternatywnym), 
  • hipertekst (w tym listy). 
Dobrze po zakończeniu przetestować poprawność kodu i działanie hiperłączy.

Przykładowa tabela
 

<table border="1">
<tr>
<th></th>
...
<th></th>
</tr>
<tr>
<td rowspan|colspan="liczba scalonych komórek"></td>
...
<td></td>
</tr>
</table>

Przykładowy formularz
 

<form>
...

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

Przykładowy obraz

<img src="adres i nazwa pliku" alt="tekst alternatywny">

Zadania (w arkuszach):

Kurs:

Więcej:

Aktualizacja
Etykiety: , , , ,