Drodzy Uczniowie!
Kontynuujemy tworzenie i edytowanie stron WWW w HTML 5. Pamiętajcie, że jeżeli macie pytania lub wątpliwości przy rozwiązywaniu zadań, zawsze mailowo możecie mnie zapytać.
Dzisiaj otrzymacie materiał na kolejne 2 lekcje. Po tym czasie należy przesłać do mnie plik o dzikich zwierzętach z uzupełnionymi poleceniami.
TEMAT: Poprawianie wyglądu strony WWW. Wstawianie hiperłączy w HTML 5.
Hiperłącza to nic innego jak linki czy odnośniki na stronie, a dokładniej tekst, który po kliknięciu go, otwiera nam stronę internetową, czy dokument. ZOBACZ FILMIK
Aby wstawić linka należy napisać polecenie:
<a href=”adres_strony” target=”_blank”>Tekst, w który klikamy</a>
gdzie adres_strony to np. http://sp12.piotrkow.pl
target=”_blank” oznacza, że strona wyświetli się w nowym oknie.
PRZYKŁAD:
<a href=”
http://sp12.piotrkow.pl” target=”_blank”>Strona SP12</a>
Na naszej stronie możemy umieścić także link do filmu na YouTube.
Należy włączyć taki film i poniżej okna wybrać opcję UDOSTĘPNIJ.
Następnie kopiujemy cały kod i wklejamy na stronie w sekcji BODY:
ZADANIE: Uzupełnij stronę o dzikich zwierzętach o hiperłącze do źródła informacji np.: pl.wikipedia.org na dole strony przed zamknięciem </body>.
Następnie wyszukaj na YouTube filmików o opisanych przez Was 3 zwierzętach i pod zdjęciami staw te 3 linki. Po tej lekcji nie trzeba pliku przesyłać, prześlesz po następnej!
TEMAT: Kolory RGB i style w HTML 5.
Na dzisiejszej lekcji ożywimy naszą stronę kolorami. ZOBACZCIE FILMIK
Nazewnictwo kolorów jest ograniczone.
Dlatego, jeżeli chcemy wskazać kolor, który nam się podoba, możemy korzystać z palety kolorów RGB.
Zaszyfrowane kody z boku koloru to jego nazwa w systemie szesnastkowym np.: #FF0000,
#008000, #000000, #FFFFFF.
Takie kolory nazywamy kolorami RGB.
To nic innego jak skrót od 3 kolorów w języku angielskim: Red Green Blue
W zależności od tego, które kolory będą dominowały, powstają różne odcienie.
Na przykład kolor:
#FF0000
to czerwony, ponieważ zielony i niebieski wynosi 00.
Kolory RGB możemy ustawić jako tło strony, ale także jako kolory tytułów czy akapitów.
Aby ułatwić sobie pracę na stronie, ustawiamy w części <head> style, czyli wygląd poszczególnych elementów strony. ZOBACZ FILMIK
<head>
<meta charset="utf-8">
<style>
W tym miejscu określamy style strony
</style>
</head>
Oczywiście jest bardzo wiele stylów. My poznamy w tym roku tylko te najistotniejsze. Dzięki stylom ustawimy raz np. kolor i wielkość tytułu H3 i za każdym razem, jak użyjemy tego tytułu, będzie wyglądał tak samo.
<style>
h3 {
W tym miejscu określamy wygląd tytułu h3 np.
color:#333366;
}
</style>
Przykładowe atrybuty tytułów czy akapitów:
color:#333366; Kolor czcionki
font-family:Arial; Rodzina (nazwa) czcionki
font-size:14px; Rozmiar czcionki (w pikselach) text-align:center; Wyrównanie tekstu (inne: right, left,
justify)
Jeżeli chodzi o ustawienia całej strony, możemy np. wstawić tło strony lub obrazek jako tło strony.
TŁO STRONY:
body {
background-color:#0033cc;
}
OBRAZEK JAKO TŁO STRONY:
body {
background-image:url("tapeta.jpg");
}
ZADANIE: Uzupełnij stronę o dzikich zwierzętach o style tytułów oraz akapitu.
Ustaw także tło strony.
Wysyłacie mi plik html z uzupełnionymi kodami. Czekam do 19 maja.
Pozdrawiam. Karolina Majchrzak
