4-05-2020
Temat: Strony internetowe – rozdzielanie wyglądu od treści.
Celem lekcji jest poznanie sposobów uatrakcyjniania wyglądu tworzonych stron internetowych.
- Zapoznaj się z dokumentem Kaskadowe arkusze stylów
- Wykonaj poniższe polecenia:
Zdanie do wykonania.
Skopiuj do swojego komputera cały folder CSS z udostępnionego dysku https://drive.google.com/drive/folders/1HnYlTyIzpOoyWU9p60eqrlaMfZQ5KhxH?usp=sharing Zapoznaj się z jego zawartością. Otwórz pliki mickiewicz.html, slowacki.html i norwid.html.
Zwróć szczególną uwagę na wygląd stron.
W katalogu CSS utwórz teraz plik tekstowy o nazwie arkusz.css (możesz do tego użyć systemowego Notatnika).
Następnie edytuj plik slowacki.html i w pierwszej linii dopisz
<link rel=”Stylesheet” type=”text/css” href=”arkusz.css” />
Postąp analogicznie z dokumentami mickiewicz.html i norwid.html.
W pliku arkusz.css wprowadź poniższą składnię, następnie zapisz zmiany i odśwież slowacki.html.
h1
{
font-size: 28px;
font-family: Arial;
font-weight: bold;
color: red;
letter-spacing: 2px;
text-align: center;
}
W ten sposób dokonaliśmy formatowania wszystkich elementów zapisanych stylem nagłówkowym pierwszego poziomu (h1).
Następnie dopisz w arkuszu następujący kod:
h2
{
font-size: 24px;
font-family: Arial;
font-weight: bold;
color: red;
letter-spacing: 2px;
text-align: center;
font-style: italic;
}
Dzięki powyższemu będą formatowane elementy zapisane stylem nagłówkowym drugiego poziomu (h2).
Następnie zmieńmy położenie zdjęć pisarzy. Dopiszmy więc do arkusza kod:
img
{
float: left;
width: 200px
margin: 30px
}
Ustalmy teraz cechy tła strony. Dopiszmy do arkusza kod:
body
{
background-image: url (tlo.gif);
margin-left: 100px;
margin-right: 100px;
}
Kod ten spowoduje ustalenie marginesów (lewego i prawego) na 100 pikseli w całym dokumencie oraz umieszczenie pliku tlo.gif jako tła strony.
Obejrzyj wyniki swojej pracy w każdym z plików pisarzy.
Opublikował Leszek Koczkodaj