doc6. Hiperłącza i obrazki
download 
Reklamacja Transkrypt
6. Hiperłącza i obrazki
Zajęcia nr 6
Strony internetowe - HTML
Hiperłącza i obrazki
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!!
Hiperłącza
Zad 1. Hiperłącza do stron
1. Utwórz folder o nazwie HIPERLACZA.
2. W folderze HIPERLACZA stwórz kolejny folder o nazwie LINKI.
3. Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
4. W części <body> zapisz poniższy kod: (staraj się robić podobne wcięcia)
<h1>Hiperłącza do stron internetowych</h1>
<ul>
<li> <a href="http://www.google.pl/">google.pl</a> </li>
<li> <a href="http://www.interia.pl/">interia.pl</a> </li>
<li> <a href="http://www.pomyslowyklik.republika.pl/">pomyslowy klik</a> </li>
</ul>
<hr />
<h1>Hiperłącza do podstron </h1>
<ul>
<li> <a href="2.html">druga strona</a> </li>
</ul>
5.
Zapisz plik pod nazwą linki.html i otwórz w przeglądarce, sprawdź czy wszystkie hiperłącza działają.
UWAGA!! Ostatnie hiperłącze nie ma prawa działać ponieważ nie mamy strony o nazwie 2.html
Tworzymy nową stonę:
Biała karteczka i stwórz pustą stronę ctr+ B i 1
W części <body> zapisz poniższy kod:
<h1>To jest jakaś druga strona</h1>
Zapisujemy tą stronę w ty samym miejscu co poprzednią pod nazwą 2.html
6.
7.
8.
9.
Zad 2. Hiperłącza na stronach
1. W folderze HIPERLACZA stwórz kolejny folder o nazwie STRONY.
2. Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
3. W części <body> zapisz poniższy kod: (staraj się robić podobne wcięcia)
<h1>Spis treści:</h1>
<ol>
<li><a href="#rozdzial1"> Rozdział 1</a></li>
<li><a href="#rozdzial2"> Rozdział 2</a></li>
<li><a href="#rozdzial3"> Rozdział 3</a></li>
<li><a href="#rozdzial4"> Rozdział 4</a></li>
<li><a href="#rozdzial5"> Rozdział 5</a></li>
</ol>
<hr />
<a name="rozdzial1"><h2>Rozdział 1</h2>
<p> Lorem ipsum dolor ... </p> - aby wpisać ten tekst w środku wystarczy wcisnąć Ctrl +Q i 2
<a name="rozdzial2"><h2>Rozdział 2</h2>
<p> Lorem ipsum dolor ... </p>
!!! I tak z pięcioma rozdziałami
4.
Zapisz plik pod nazwą hiperłącza.html
Rysunki na stronie
Zad 1. Zamieszczanie zdjęć
1.
2.
3.
4.
Utwórz folder o nazwie GRAFIKA.
Tworzymy nową stonę: Biała karteczka i stwórz pustą stronę ctr+ B i 1
Wstaw kursor w części <body>, w oknie SZABLONY znajdź rozdział MULTIMEDIA - > ELEMENT img
Pomiędzy „” wpisz nazwę pliku wraz z rozszerzeniem np.: rys.jpg – pamiętaj że rysunek musi być zapisany w
tym samym miejscu co strona.
5. Zapisz stronę pod nazwą grafika.html
Zad 2. Ustawienia grafiki
Otwórz za pomocą NotH stronę grafika.html i zapisz ją jako grafika_zmiany.html
Dodaj style zewnętrzne style.css po linijce zaczynającej się od <meta …>
Otwórz nowy pusty plik i zmień opcje wstawionej grafiki:
W zakładce CSS - > SELEKTORY -> MULTIMEDIA -> selektor img: pomiędzy {} wstawiamy kursor i
zmieniamy:
i. Rozmiar:
1. CSS - >PUDEŁKA-> WIDTH : width: 100px; - ustawia szerokość obrazka
2. CSS - >PUDEŁKA-> HIGHT : width: 100px; - ustawia wysokość obrazka
ii. Ramka:
1. CSS - >OBRAMOWANIE-> border 1px; - ramka do obrazka zmieńmy 1px na 4 px
1.
2.
3.
Zad 3. Zamiana rysunków
a. Stwórz nowy folder o nazwie ZAMIANA
b. Zapisz w nowym folderze dwa pliki o tych samych rozmiarach ( w miarę możliwości małe) jeden zapisz pod
nazwą rys.jpg, rys2.jpg
c. Tworzymy nową stonę: Biała karteczka i stwórz pustą stronę ctr+ B i 1
W części <body>, wpisz poniższy tekst:
<img src="rys2.jpg" onmouseover="src='rys.jpg'" onmouseout="src='rys2.jpg'" alt="">
<img src="rys2.jpg" onmouseover="src='rys.jpg'" onmouseout="src='rys2.jpg'" alt="">
<img src="rys2.jpg" onmouseover="src='rys.jpg'" onmouseout="src='rys2.jpg'" alt="">
… skopiuj tą samą linijkę kilka razy
a. Zapisz plik pod nazwą zamiana.html i otwórz za pomocą przeglądarki
Zad 4. Własna galeria
b.
c.
d.
e.
f.
Stwórz stronę na której umieścisz przynajmniej 8 zdjęć
Ustal jeden rozmiar dla wszystkich zdjęć
Białą ramkę o grubości 2 px
Zmień tło strony na czarne
Zapisz za pomocą nagłówka h1 tytuł dla swojej strony (w kolorze białym)
