Utwórz katalog szablon1 a w nim dokument index.html zawierający obowiązkowy kod:
<!DOCTYPE html> <html> <head> <title>Strona ...</title> <meta charset="utf-8"> </head> <body> </body> </html>
W elemencie head dodaj kod.
<link rel="stylesheet" href="style.css">
W elemencie body dodaj kod:
<header> </header> <nav> </nav> <main> </main> <aside> </aside> <footer> </footer>
Zapisz zmiany i otwórz w przeglądarce plik.
W elemencie header dodaj kod:
<h1>Strona ...</h1>
Zapisz zmiany i otwórz w przeglądarce plik.
W elemencie nav dodaj kod:
<h2>Menu</h2> <a href="index.html">Strona główna</a> <a href="strona1.html">Strona 1.</a> <a href="strona2.html">Strona 2.</a>
Zapisz zmiany i otwórz w przeglądarce plik.
W elemencie main dodaj kod:
<h2>Strona główna</h2>
Zapisz zmiany i otwórz w przeglądarce plik.
W elemencie aside dodaj kod:
<h2>Ulubione</h2> <a href="https://www.w3.org/" target="_blank"> Strona W3C </a>
Zapisz zmiany i otwórz w przeglądarce plik.
W elemencie footer dodaj kod:
<p>Stronę wykonał ...</p>
Zapisz zmiany i otwórz w przeglądarce plik.
Skopiuj dwa razy plik index.html po sprawdzeniu poprawności kodu. Nazwij otrzymane pliki strona1.html i strona2.html.
Zmień odpowiednio zawartość elementu main.
Zapisz zmiany i otwórz w przeglądarce pliki witryny, sprawdź poprawność nawigacji.
Utwórz pusty plik o nazwie style.css w swoim folderze szablon1 (kodowanie UTF-8).
W pliku style.css z folderu szablon1 dodaj kod:
body {
width: 987px;
margin: 5px auto;
}
Zapisz zmiany i otwórz w przeglądarce plik index.html. Zmień przykładowe reguły CSS.
W pliku style.css z folderu szblon1 dodaj kod:
header, footer {
border: 1px solid silver;
}
nav, main, aside {
float: left;
}
nav, aside {
width: 20%;
height: 200px;
background: gray;
color: white;
}
main {
width: 60%;
}
footer {
clear: both;
}
Zapisz zmiany i otwórz w przeglądarce pliki witryny. Zmień przykładowe reguły CSS.
W pliku style.css dodaj kod.
a {
font: 13px Georgia;
text-decoration: none;
display: block;
}
a:link {
color: rgb(51,51,51);
}
a:visited {
color: rgb(104,104,104);
}
a:hover {
color: rgb(0,0,0);
text-decoration: underline;
}
a:active {
color: rgb(153,153,153);
}
Zapisz zmiany i otwórz w przeglądarce pliki witryny. Zmień przykładowe reguły CSS.
W pliku style.css dodaj kod.
h1, h2, p, a {
margin: 10px;
}
h1 {
font: 34px Georgia;
text-align: center;
}
h2 {
font: 21px Georgia;
}
p {
font: 13px Georgia;
text-align: right;
}
Zapisz zmiany i otwórz w przeglądarce pliki witryny. Zmień przykładowe reguły CSS.
W folderze szablon1div wykonaj szablon tej witryny na znacznikach div.
Umieść pliki i foldery na serwerze po sprawdzeniu poprawności.