docZajęcia nr 1
download 
Reklamacja Transkrypt
Zajęcia nr 1
Zajęcia nr 4
Strony internetowe - HTML
Style zewnętrzne.
W swoim folderze utwórz folder o nazwie HTML,
wszystkie dzisiejsze zadania wykonuj w tym folderze.
Przechodzimy do zadań na dziś:
Miłej zabawy i POWODZENIA!!
ABY ŁATWIEJ BYŁO TWORZYĆ DZISIEJSZE STONY STARAJ SIĘ
KAŻDE NOWE ZADANIE ZAPYSYWAĆ W NOWYM FOLDERZE,
W PRZECIWNYM RAZIE BĘDZIESZ MIAŁ PROBLEMY Z NAZWAMI PLIKÓW!!!
STYLE ZEWNĘTRZNE
Dodawane styli do pliku
Stwórz folder style i tam zapisuj pliki z tego zadania
(tzn. style.html, style.css)
1. Otwórz NotH’a i stwórz pustą stronę Ctr+ b i 1.
2. Pod linijką zaczynającą się od <meta ...> dodaj pustą linie
(ENTER).Wstaw kursor myszki w tej nowej pustej linii.
3. Korzystając z okna SZABLONY wejdź na zakładkę XHTML rozwiń rozdział o nazwie STYLE i dwa razy kliknij
w Style zewnętrzne style.css, powinna dokleić Ci się jedna linijka w kodzie strony.
<link rel="stylesheet" type="text/css" href="style.css" />
4. Pomiędzy znacznikami <body> </body> napisz tekst:
<h1> To jest strona ze stylami zewnętrznymi </h1>
<p> Teraz już będę umiał zmieniać efekty wizualne mojej strony. Teraz już będę umiał zmieniać
efekty wizualne mojej strony. Teraz już będę umiał zmieniać efekty wizualne mojej strony.
Teraz już będę umiał zmieniać efekty wizualne mojej strony. Teraz już będę umiał zmieniać
efekty wizualne mojej strony. Teraz już będę umiał zmieniać efekty wizualne mojej strony.
Teraz już będę umiał zmieniać efekty wizualne mojej strony. Teraz już będę umiał zmieniać
efekty wizualne mojej strony. </p>
5. Zapisz plik i spróbuj go otworzyć za pomocą przeglądarki.
UWAGA!!! Jeżeli robią Ci się dziwne znaczki na stronie i chciałbyś to zmienić, to przejdź do kodu w NotH’u znajdź
taką część kodu: charset=utf-8 i zamień na charset=win-1250 (ok. 5 linijki). Zapisz i odśwież stronę.
!! Efekt: nie ma żadnej różnicy, tylko nasz tekst napisany na stronie! Aby to zmienić musimy stworzyć plik o nazwie
style.css, który jest odpowiedzialny za wszelkie zmiany w wyglądzie naszej strony. To właśnie w nim ustawiamy
kolory, czcionki, tła itp. Zatem stwórzmy ten plik ….
Tworzenie pliku style.css
1. Stwórz nowy pusty plik, klikając na białą karteczkę
2. Zapiszmy ten pusty na razie plik pod nazwą style.css w tym samym miejscu co poprzedni plik
3. A teraz zmieńmy tło strony na żółte w czarnej ramce:
a. Korzystając z okna SZABLONY z zakładki CSS znajdźmy rozdział SELEKTORY -
>BODY/HTML wybierzmy selektor body. A teraz wszystko będziemy wpisywać między { i }
i. Na tej samej zakładce znajdźmy dział: TŁA: background-color i wybierzmy pierwszą
opcję a następnie w kodzie między : a ; wpiszmy yellow
ii. Dodajmy ramkę: OBRAMOWANIE: border 1px
iii. Odsuńmy troszkę stronę od marginesów okna: MARGINESY: 100px
iv. Odsuńmy jeszcze tekst od ramki: DOPEŁNIENIE: padding: 100px; i zmieńmy 100
na 20
Postaw kursor na samym końcu strony
b. Korzystając z okna SZABLONY z zakładki CSS znajdźmy rozdział SELEKTORY -
>BODY/HTML wybierzmy selektor html. A teraz wszystko będziemy wpisywać między { i }
i. Na tej samej zakładce znajdźmy dział: TŁA: background-color i wybierzmy pierwszą
opcję a następnie w kodzie między : a ; wpiszmy white
Zapisz plik i odśwież stronę w przeglądarce
4. Zmieńmy jeszcze kolor i rodzaj czcionki naszego nagłówka:
a. Korzystając z okna SZABLONY z zakładki CSS znajdźmy rozdział SELEKTORY - >
NAGŁÓWKI -> Selektor h1 i kliknijmy dwa razy. Teraz przeniśmy kursor między znaczki { }
i. Znajdźmy w zakładce: CZCIONKI i TEKST: font-family: Verdana
ii. Znajdźmy w zakładce: CZCIONKI i TEKST: font-align: center
iii. Znajdźmy w zakładce: KOLORY: color; wybierzmy sobie jakiś kolor: na górze okna
znajduje się taki biały kwadracik
klikając na niego prawym
klawiszem myszki mamy możliwość wybrania sobie koloru, ale samo wybranie nie
zamieszcza nigdzie tego koloru, zmienia się tylko ten kwadracik. Aby zmienić kolor czcionki
musimy:
1. postawić kursor między color: a ; a następnie dwa razy kliknąć w omawiany
przed chwilą kwadracik w wybranym przez nas kolorze.
efekt: color:#ff0000;
5. Zmieńmy jeszcze kolor i rodzaj czcionki naszego tekstu:
a. Korzystając z okna SZABLONY z zakładki CSS znajdźmy rozdział SELEKTORY - > TEKST ->
Selektor p i kliknijmy dwa razy. Teraz przenośmy kursor między znaczki { } i tak jak poprzednio
zmieniamy np. kolor czcionki na zielony
Zapiszmy wszystko i odświeżmy stronę!
Zadanie 1. Stwórz stronę, w której za tło posłuży Ci plik graficzny.
1. Stwórz folder o nazwie tla a następnie skopiuj z poprzedniego zadania pliki style.html i style.css i
wklej do folderu tla, zmień nazwę pliku style.html na tlo.html, a style.css zostaw bez zmian.
2. Znajdź dowolny rysunek, który przeznaczysz na tło strony i również wklej do tego folderu.
3. Spróbuj na podstawie poniższych informacji zmienić tło w stronce, a następnie zmień treść strony tak aby była
związana z tłem które zamieściłeś.
4. Pozmieniaj wygląd stony! – Kolory, czcionki, odstępy, marginesy itp.
Aby w tle zamieścić rysunek a nie kolor wystarczy usunąć w style.css
w części body background-color i na to miejsce „wyklikać”:
TŁA: BACKGROUND-IMAGE i między ‘ ‘ wpisać nazwę pliku z rysunkiem.
!!Pamiętaj aby ten plik z rysunkiem był zapisany w tym samym miejscu
