Lekcje informatyki – linki
Wrzesień 5, 2010 by admin · 4 Comments
Linki – odnośniki
Poprzednie lekcje informatyki online nauczyły Nas podstaw języka HTML – tworzenia “kodu” zrozumiałego dla komputera, dzięki któremu możesz już wyświetlać tekst i obrazki, oraz sterować ich wielkością i proporcjami. Dziś bardzo popularny kod który po kliknięciu w dany obiekt przenosi nas w dowolne miejsce sieci WWW. Magiczny zwrot brzmi ” a href “, a łącząc go z omawianymi już uprzednio zasadami tworzenia języka HTML – otrzymujemy:
<a href=”adres strony na którą chcemy się przenieść“>słowo, fraza lub adres obrazka, który będzie widoczny na naszej stronie WWW</a>
przykładowy kod
<a href="http://www.msp7.pl">kliknij by przejść do serwisu MSP7 Knurów</a>
na stronie WWW wygląda tak:
kliknij by przejść do serwisu MSP 7 Knurów
Zamiast słów, zdań, lub znaków możemy w ich miejsce wstawić obrazek
<a href="http://www.msp7.pl"><img src=”http://www.elmot.pl/images/obrazek.jpg”></a>
który to kod na stronie WWW wygląda tak:
=====================================
====================================
z tą różnicą, że po kliknięciu w obrazek przeniesiemy się na naszą stronę docelową (msp7.pl 
Ćwiczenie:
W notatniku stwórz plik będący zbiorem linków do Twoich 5 ulubionych stron WWW
Rozwiązanie – kod:
<a href=”http://www.msp7.pl”>Moja Szkoła</a>
<a href=”http://www.nk.pl”>Nasza Klasa</a>
<a href=”http://www.wp.pl”>Wirtualna Polska</a>
<a href=”http://www.elmot.pl/katalog”>Lekcje informatyki online</a>
<a href=”http://www.gry.pl”>Gry internetowe</a>
A twój plik html wyświetli to tak:
===================================
Moja Szkoła
Gry internetowe
===================================
WSKAZÓWKA
Pewnie zauważyłeś już, że aby jak najszybciej osiągnąć nasz cel, wystarczy skopiować / wkleić kody zmieniając tylko adresy WWW i tekst linka – ale TY staraj się wpisywać kod samodzielnie – w ten sposób uczysz się jego budowy, twoje ewentualne błędy popraw porównując swój kod z wzorcem na tej stronie – pamiętaj - ucząc się na własnych błędach – uczysz się na zawsze !… A w końcu jesteś na tej stronie, bo sam tego chesz . Metodę ctrl+c ctrl+v będziesz stosował od momentu kiedy dobrze zapamiętasz omawiane polecenie.
Witek Kozaczkiewicz
Lekcja informatyki – wielkość obrazków
Sierpień 31, 2010 by admin · 3 Comments
Wielkość Obrazków
Na poprzedniej lekcji poznaliśmy kod HTML “wstaw obrazek“. Dziś o sterowani jego wielkością.
Jak wiecie grafika internetowa to najczęściej prostokąty, które mają określoną szerokość i wysokość. Nawet poniższy obrazek typu png nie wyglądający na prostokąt , jest nim w rzeczywistości. Myli nas tylko brak tła.
 |
= |
jestem prostokątem |
Standardowy prostokąt ma 2 wymiary bazowe – SZEROKOŚĆ I WYSOKOŚĆ
Aby określać wielkość obrazka w kodzie HTML, musimy użyć tych wielkości w języku HTML
Szczególnie parametr ” width ” – czyli szerokość jest dla nas istotny, tak więc zapamiętajmy to nowe słowo! Podając w kodzie wyłącznie szerokość obrazka (width) , jego wysokość (height) będzie się proporcjonalnie dopasowywać – zobaczmy z resztą sami.
parametr width
w kodzie html ma on postać
width=”liczba”
gdzie liczba to wielkość w pikselach (lekcja – obraz w komputerze)
EXPERYMENT
- Otwórzmy/ edytujmy plik “lekcja.html” (z poprzednich zajęć)
- W naszym kodzie <img src=”http://www.elmot.pl/images/obrazek.jpg”/> wstawmy na końcu (po znaku cudzysłowia) parametr width, określmy jego wielkość na 400 (rozmiar oryginalny obrazka)
- Otrzymaliśmy <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ />
- Zapisujemy i uruchamiamy nasz plik “lekcja.html”
- Następnie ponownie edytujemy plik, wpisując w miejsce rozmiaru wielkość np………..”1″
- Otrzymaliśmy <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”1″ /> – nasz ledwo widoczny obraz ma wielkość…………..1 piksela
- Następnie ponownie edytujemy plik, wpisując w miejsce rozmiaru wielkości “10″,oglądamy efekt, następnie zmieniamy parametr na “100″, i no może…”1000″
Kilka prób i już umiesz sterować wielkością obrazka !
parametr height
w kodzie html ma on postać
height=”liczba”
najczęściej występuje obok parametru width=”liczba”
przykład: <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”300″/>
czyli = pokaż obrazek o adresie http://www.elmot.pl/images/obrazek.jpg , szerokości 400 pikseli, wysokości 300 pikseli
EXPERYMENT
- edytujmy nasz plik “lekcja.html”
- wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”300″/> sprawdźmy efekt
- wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”600″/> sprawdźmy efekt
- wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”400″ height=”100″/> sprawdźmy efekt
- wklejmy kod <img src=”http://www.elmot.pl/images/obrazek.jpg” width=”dowolna liczba” height=”dowolna liczba”/> sprawdźmy efekt
Wniosek – umiesz już sterować wielkością obrazka, możesz również nieproporcjonalnie zmieniać jego wymiary.
Następna lekcja będzie poświęcona linkowaniu – poleceniu “wejdź na stronę WWW”
