Poradniki online
Listopad 15, 2010 by admin · Leave a Comment
Poradnik internetowy jest coraz popularniejszą formą zdobywania wiedzy z prawie każdego zakresu. Zastąpił on praktycznie standardowe papierowe leksykony wiedzy, a swoją dostępność i popularność zawdzięcza zawrotnej karierze internetu i coraz sprawniejszym wyszukiwarkom internetowym. Dziś, aby przykładowo przyrządzić kurczaka bez znajomości tajników kulinarnych, wpisujemy w okno wyszukiwarki frazę : kurczak pieczony – i natychmiast mamy do dyspozycji kilkadziesiąt sprawdzonych przepisów na to popularne danie. Ludzie uczą się online języków obcych, remontują mieszkania na podstawie porad internetowych, naprawią komputery zgodnie z zaleceniami serwisów tematycznych – słowem robią to, czego bez internetu nie odważyli by się nawet spróbować. E-PORADNIKI to kolejna odsłona wiedzy dla internautów w formie artykułów – porad, ułatwiających nam wszystkim życie codzienne i realizację wszelakich planów.
Więcej informacji w serwisie poradniki online. Warto zaznaczyć, że strona ma charakter publiczny – każdy może korzystać z porad online, ale również może je tworzyć. Wystarczy się zarejestrować, zalogować , dodać swój unikalny tekst – i gotowe !
ZASADY DODAWANIA ARTYKUŁÓW:
-
napisz unikalny artykuł o charakterze porady
-
pamiętajo ograniczeniach – max 3linki, 3kategorie, 5tagów, foto+, min. 1500znaków
-
napisz mail z prośbą o zatwierdzenie wpisu
Więcej w serwisie e-poradniki.eu
Nagrodzona “siódemka”
Październik 20, 2010 by admin · Leave a Comment
14 października br. był dla naszej szkoły dniem wyjątkowym. Zarówno uczniowie jak i pracownicy zostali wyróżnieni szeregiem nagród.
kliknij by powiększyć
Nic nie wskazywało, że tegoroczne Święto Edukacji Narodowej będzie tak szczególne dla osób związanych z Miejską Szkołą Podstawową nr 7 w Knurowie. Jak co roku, najpierw odbyło się spotkanie uczniów z nauczycielami. Były ciepłe życzenia i miło spędzony czas w klasowym gronie. Następnie, około godziny 10: 00 przedstawiciele klas, Grono Pedagogiczne, Dyrekcja i zaproszeni goście zebrali się na uroczystej akademii przygotowanej przez panie: Ewę Wyrostek, Barbarę Wachowicz i Magdalenę Kalisz.
Akademię rozpoczęła Pani Dyrektor Danuta Hibszer. Z nieukrywanym zadowoleniem i ogromną radością przekazała przedstawicielom Samorządu Uczniowskiego gratulacje i puchar ufundowany przez Prezydenta Miasta – szczególną Nagrodę dla Miejskiej Szkoły Podstawowej nr 7 za osiągnięcie najwyższych wyników dydaktycznych w mieście uzyskanych w roku szkolnym 2009/2010.Dodatkiem do zdobytego wyróżnienia był sprzęt RTV. Read more
Lekcja informatyki Online – rozmieszczenie elementów na stronie WWW
Wrzesień 10, 2010 by admin · 3 Comments
Dziś dowiemy się jak rozmieszczać tekst i grafikę na naszej stronie WWW. Dotychczas zarówno obrazki, jak i tekst domyślnie wyświetlał się po lewej stronie dokumentu. Jak więc zapanować nad jego położeniem? Sprawa jest trochę trudniejsza -ale postaram się przybliżyć Wam najpopularniejsze i najłatwiejsze polecenia HTML umożliwiające umieszczanie prawie dowolne sterowanie położeniem elementów naszej strony internetowej.
Tekst
Położenie tekstu definiuje się następującymi kodami:
<p align=”left”>jestem z lewej strony </p>
<p align=”center”>jestem w środku strony </p>
<p align=”right”>jestem po prawej stronie </p>
<p align=”justify”>zostałem wyjustowany </p>
<li>kod wypunktowanie</li>
Na stronie w przeglądarce wygląda to tak
|
KOD |
WYGLĄD NA STRONIE WWW |
|
jestem z lewej strony |
|
jestem w środku strony
|
|
jestem po prawej stronie
|
|
zostałem wyjustowany
|
|
|
Jak widać polecenia mają standardową budowę (znaczniki + literka p, polecenie align) i są po prostu słowami w j. angielskim
left – lewa
center – środek
right – prawa
justify – justowanie / wyrównanie tekstu, aby pokrywał cały wiersz od lewej do prawej.
Kody te można używać również do obrazków. Jak pamiętacie w miejsce tekstu wklejamy adres obrazka (chcę sobie przypomnieć tą lekcję) . Oto przykład:
|
KOD |
WYGLĄD NA STRONIE WWW |
|
 |
|
|
|
|
|
|
Ćwiczenie
W notatniku stwórz plik HTML, który wyświetli dowolny obrazek z internetu w orientacji
lewa | środek | prawa | wypunktowanie
Rozwiązanie - KOD:
<img src= “http://www.seoposition.eu/seoposition.png” align=”left”/>lub po prostu <img src= “http://www.seoposition.eu/seoposition.png”/>
<p align=”center”><img src= “http://www.seoposition.eu/seoposition.png” /></p> lub <img src= “http://www.seoposition.eu/seoposition.png” align=”center”/>
<p align=”right”><img src= “http://www.seoposition.eu/seoposition.png” /></p>
<li><img src= “http://www.seoposition.eu/seoposition.png” /></li>
No dobrze, ale co robić, jeśli chcę umieścić np. obrazek w konkretnym miejscu mojej strony WWW, a nie jest to a nie lewa strona, ani prawa, ani jej środek ??? Odpowiedź – potrzebujesz umiejętności tworzenia i wstawiania tabel! * Zanim dowiesz się jak wygląda kod HTML tabelek omówmy budowę typowej strony WWW.
Budowa strony WWW*
Typowa strona internetowa składa się z nagłówka (u góry strony – najczęściej z “logiem” – charakterystycznym znakiem graficznym), menu (zbiorem linków do podstron – z lewej lub prawej strony – wg uznania) pola treści (“body” – centralna część strony WWW z jej główną zawartością) i stopki (na samym dole – tam umieszczasz informacje o stronie, autorze itp..)
NAGŁÓWEK
|
||
| MENU
link1 link2 link3 |
BODY – TREŚĆ STRONY
|
|
|
STOPKA – info o stronie
|
||
Jak widzisz całość to poszczególne elementy – tekst, grafika, filmy, skrypty…co tylko chcesz – umieszczone w tabeli. Tylko jak ją zbudować? to sprawa stosunkowo trudna, dlatego też wielu początkujących webmasterów korzysta z programów – edytorów HTML, które automatycznie tworzą / generują dowolne tabele wg upodobania autora. Polecam ci ten sposób. Zauważ również, że jeśli ustawię parametr grubości ramki border na wartość “0″ (nasza kolorowa tabela ma kod <table width=”300″ height=”300″ border=”2″> czyli wysokość i szerokość 300, grubość obramowania 2), oraz usunę kolory tła tabeli, to uzyskam efekt dowolnego ustawienia elementów tekstowych i graficznych naszej strony. Sam zobacz:
NAGŁÓWEK
|
||
| MENU
link1 link2 link3 |
BODY – TREŚĆ STRONY
|
|
|
STOPKA – info o stronie
|
||
TABELA na stronie WWW
Zobaczcie pierwotny kod html poprzedniej pustej tabeli :
| nagłówek | ||
| menu | body | |
| stopka | ||
<table width=”200″ border=”1″> początek kodu tabeli , szerokość tabeli 200, grubosć obramowania 1
<tr>
<td colspan=”3″> nagłówek</td> Colspan -skrót od “column span” (rozciągnięcie kolumny) – określa ile kolumn ma się rozciągnąć komórka
</tr>
<tr>
<td>menu</td>
<td colspan=”2″> body</td>
</tr>
<tr>
<td colspan=”2″>stopka</td>
</tr>
</table> koniec kodu tabeli
Jak widzicie, jest to trudniejsza konstrukcja poleceń, ale zawsze możecie na własne potrzeby skopiować powyższy kod, lub jak już wspomniałem użyć generatora w jakimś edytorze HTML. Jest ich w sieci bardzo dużo, są darmowe i bardzo pomocne (pamiętaj aby po wklejeniu czerwonego kodu usunąć moje czarne komentarze 
) Zauważcie, że komórki to prostokąty, a wielkości tabeli/komórek/wierszy/kolumn definiujemy tak samo jak wielkości obrazków (width=”???” height=”???”) . Podobnie brak zdefiniowania tych wielkości przeglądarka interpretuje jako wartości domyślne (dopasowywując się do zawartości poszczególnych komórek). Jak pamiętacie z lekcji (obraz w komputerze) nowoczesne monitory maja rozdzielczości od 1280x? do 1920x? (fullHD), a te starsze najczęściej 1024×768 (najstarsze 800×600). Tworząc tabelę mającą być szkieletem waszej strony internetowej korzystnie jest wiec uszanować posiadaczy starszych monitorów i definiować parametr tabeli width na nie więcej niż 1024 p. Możesz również zastosować manewr “dopasuj do szerokości automatycznie”, podając w parametrze width=”100%” – cała szerokość danego obszaru (ekranu), width=”90%” – 90 procent ekranu itp…Dzisiejsze popularne serwisy w HTML mają od 760 do 960 p lub stosują wielkości procentowe. Jeśli ciekawi cię ten aspekt poszukaj w internecie informacji o “układach płynnych” – samodopasowujacych się do wielkości monitora. Pamiętaj, że błędem jest uzyskanie paska przewijania poziomego przeglądarki, strony WWW mają określoną szerokość i teoretycznie nieskończona długość (trochę podobnie do rolki papieru toaletowego 
).
Więcej o budowie strony internetowej na lekcji ” Moja pierwsza strona WWW ”
|
mam jedną komórkę, jeden wiersz, jedną kolumnę i szerokość 100%
|
W. Kozaczkiewicz
———————————————————-
* temat trudniejszy, nieobowiązkowy – tylko dla chętnych !
Lekcje informatyki online
Wrzesień 6, 2010 by admin · 2 Comments
Zapraszam do skorzystania z zestawu pomocy dydaktycznych online – lekcji informatyki na stronach WWW przeznaczonych dla uczniów szkół podstawowych ( i nie tylko…) Tematyka pierwszego cyklu to “MOJA PIERWSZA STRONA INTERNETOWA” . Wykłady starają się w jak najbardziej przystępny sposób przekazać młodym “webmasterom” podstawy języka programowania HTML i jego praktycznego wykorzystania w tworzeniu poprawnego kodu stron internetowych.
Kolejność lekcji nie jest przypadkowa, ale można ją modyfikować (wg uznania nauczyciela informatyki). Lekcje online będą sukcesywnie uzupełniane. Pamiętaj, że Możesz wzbogacić swoje zajęcia o WYBRANE zagadnienia z zamieszczonego zestawu ( uwzględniając wszelkie “czynniki zewnętrzne” ). Prezentowany materiał stanowi propozycję do wykorzystania na lekcjach / zajęciach dodatkowych / kółkach informatyki w Szkołach Podstawowych.
Zastrzegam, że nie jest to praca związana z awansem zawodowym!
WYKAZ LEKCJI ONLINE
-
obrazki w internecie
-
wielkość obrazka
-
linki – odnośniki do stron WWW
-
atrybuty linków
-
tekst w HTML
-
kolor
-
rozmieszczenie elementów *
-
moja pierwsza strona WWW /w przygotowaniu /
-
domeny, aliasy, adresy WWW /w przygotowaniu /
-
darmowe skrypty – dodatki do stron WWW /w przygotowaniu /
-
Moja strona w internecie – “hosting” – “upload” plików na “SERWER” /w przygotowaniu /
Witek Kozaczkiewicz
Lekcja informatyki – kolor
Wrzesień 6, 2010 by admin · 3 Comments
Na swojej stronie WWW możesz używać kolorów – zarówno tekstu, jak i tła i tabelek. Osobiście uważam, że najlepsze tło to BIAŁE tło, a kolor tekstu to SZARY lub CZARNY. Takie zestawienie gwarantuje najlepszą czytelność i przejrzystość. Istnieją jednak kody HTML , które potrafią dowolnie definiować kolory i są przydatne w tworzeniu stron internetowych i innych dokumentów. Pamiętajmy jednak, że bez względu na gust webmastera, należy pamiętać o zasadzie: ” jasne tło = ciemny tekst – i odwrotnie – ciemne tło – jasny tekst ” . Spójrzmy na przykłady poniżej. Sam przekonaj się, które zestawienie jest najlepsze i najbardziej czytelne.
Czarny tekst na białym tle |
Biały tekst na czarnym tle |
Zółty tekst na brązowym tle |
Biały tekst na żółtym tle |
Różowy tekst na czerwonym tle |
Nie muszę chyba tłumaczyć, dlaczego nie należy stosować tego samego koloru czcionki i tła 
Kolor tekstu
Język HTML definiuje kolory podstawowe tekstu w następujący sposób:
- Brak kodu oznacza domyślny kolor czarny
- KOD: <font color=”kolor“>twój tekst w kolorze</font>
W miejscu kolor możesz wpisać angielskie odpowiedniki podstawowych kolorów.
Red – czerwony
Green – zielony
Blue – niebieski
Gray – szary
Yelow – żółty
White – biały
Przykładowy kod:
<font color=”red”>To zdanie ma kolor czerwony</font>
<font color=”blue”>Ten tekst jest niebieski</font>
i jego efekt w przeglądarce
=====================
To zdanie ma kolor czerwony
Ten tekst jest niebieski
=====================
Więcej o kolorach możecie się dowiedzieć odwiedzając serwis WIKIPEDIA, gdzie szczegółowo opisano to zagadnienie. Jako ciekawostkę podam tylko fakt, że system popularny internetowy system klasyfikacji kolorów RGB może zdefiniować i zapisać ……. 16,777,216 różnych kolorów. Nam chwilowo aż tyle nie trzeba
KLIKNIJ ABY PRZEJŚĆ do WIKIPEDII >>
Kolor tła
Aby uzyskać inny od domyślnego białego, kolor tła dokumentu zastosujemy polecenie
<body bgcolor=”kolor”>…</body>
Przykładowy kod:
<body bgcolor=”kolor”>cały Twój dokument</body>
W miejscu kolor możesz wpisać omawiane już wyżej angielskie odpowiedniki podstawowych kolorów lub skorzystać np. z wikipedii i określić dowolny kolor. Pamiętaj,że pierwszy człon polecenia <body bgcolor=”?kolor?”> powinien znajdować się na początku twojego kodu HTML strony WWW, a drugi fragment tego kodu </body> na samym końcu naszego dokumentu.
Zadanie
Utwórz w notatniku plik HTML z dowolnym zdaniem białą czcionką na czarnym tle.
Rozwiązanie – kod HTML
<body bgcolor=”black”> początek kodu koloru tła
<font color=”white”>Jestem białym zdaniem na czarnym tle</font> Zdanie z kodem białej czcionki
</body> koniec kodu tła
CIEKAWOSTKA : Już po raz drugi zauważamy, że jeden kod występuje w drugim (poprzednio na lekcji “obrazek jako odnośnik“). To właśnie struktura języka HTML!
Lekcja informatyki – tekst na stronie WWW
Lekcja informatyki dla młodzieży klas 5/6 szkoły podstawowej. Pamiętaj, że aby zrozumieć omawiane zagadnienia, musisz posiadać wiadomości i umiejętności z naszych poprzednich lekcji informatyki online.Tekst – czyli po prostu literki – to podstawowy element strony WWW. W końcu omawiany przez nas język HTML, dzięki któremu możemy cieszyć się na co dzień internetowymi atrakcjami to skrót od HyperText Markup Language, czyli w wolnym tłumaczeniu “język znaczników tekstowych” – zbiór znaków z klawiatury, odpowiednio uformowanych, aby były zrozumiane dla naszego pupila z myszką.
Wielkość tekstu
Z pewnością zauważyłeś, że literki na tej stronie mają różne wielkości w zależności od potrzeby. Powyższy “nagłówek” jest duży, to zadanie, które teraz czytasz już o wiele mniejsze – pisane standardową czcionką. Co prawda istnieje kod na precyzyjne określanie wielkości czcionki (<font size=”liczba“>mój tekst</font> gdzie w polu “liczba” wpisujesz dowolną wartość ) , ale proponowałbym zapamiętać inna zasadę.
Pisząc tekst bez znaczników, przeglądarka wyświetli go jako standardowy.
Możesz stosować kody (css*/html) z wykorzystaniem “nagłówka” (header) – w kolejności od największego – h1, h2, h3, h4, h5, h6 – przykładowy kod
<h1> tekst wielkości h?</h1>
przeglądarka wyświetli to tak:
tekst wielkości h1
tekst wielkości h2
tekst wielkości h3
tekst wielkości h4
tekst wielkości h5
tekst wielkości h6
Pogrubienie, podkreślenie , kursywa i
nowy akapit
Standardowe formatowanie tekstu wymaga znajomości następujących kodów:
pogrubienie : <b> mój tekst</b>
podkreślenie: <u>mój tekst</u>
pochylenie: <i>mój tekst</i>
nowy akapit (piszemy od nowej linijki ) <p>mój tekst</p>
Możemy również stosować polecenia, gdzie znaczniki występują wyłącznie na końcu
nowy wiersz mój tekst <br>
linia odstępu mój tekst<hr>
Przykładowy kod
<h1>Witajcie</h1>
<b>teraz jestem pogrubiony</b>
<p><i>a teraz pochylony i w nowym akapicie<i></p>
<h3>teraz średni</h3>
teraz zrobię kreskę – linię odstępową<hr>
A w przeglądarce wygląda to tak:
===============================
Witajcie
teraz jestem pogrubiony
a teraz pochylony i w nowym akapicie
teraz średni
teraz zrobię kreskę – linię odstępową
===============================
Pamiętaj – formatowanie tekstu to podstawowy sposób przekazu informacji na łamach stron WWW. Postaraj się zapamiętać omawiane polecenia HTML, bo będą one bardzo często stosowane i warto mieć je w “małym palcu”. Jest ich stosunkowo dużo, dlatego też musisz je odpowiednio długo ćwiczyć. Proponuję, byś stworzył sobie małą papierową “ściągę” i miał ją pod ręką w czasie pracy na lekcji i kółku informatyki. Z doświadczenia wiem, że potrzebna ci ona będzie przez najwyżej 2 tygodnie. Potem po prostu ją zapamiętasz I o to Nam Chodzi . Ja osobiście na początku mojej przygody z HTML korzystałem z następującego “POMOCNIKA”
Biorąc pod uwagę, że kod HTML zaczyna się i kończy znacznikami ?<?>kod</?>, możemy chwilowo je pominąć i zastosować skróty wzrokowe typu:
pogruBiony , pochilony, HReska, BRykaj na dół itp
Jestem wzrokowcem, tak więc dzięki takim “knifom” nauczyłem się tego w ciągu jednego dnia! Warto spróbować.
Witek Kozaczkiewicz
———————————————————————————————————————————-
*lekcja style css” – kółko informatyczne
Lekcja informatyki – atrybuty linków
Lekcja informatyki dla młodzieży klas 5/6 szkoły podstawowej. Pamiętaj, że aby zrozumieć omawiane zagadnienia, musisz posiadać wiadomości i umiejętności z naszych poprzednich lekcji informatyki online.Poprzednia lekcja nauczyła nas tworzyć kod HTML linków / odnośników do dowolnych miejsc w internecie. Teraz parę słów o atrybutach – dodatkowych kodach służących nam do informowania o charakterze odnośnika i sterowania sposobem wyświetlania docelowej strony WWW.
Atrybut “ALT”
ALT (opis alternatywny) służy nam do zamieszczania informacji dodatkowych – najczęściej o zamieszczonej grafice – obrazkach, zdjęciach itp. Stosujemy go po poleceniu “wstaw obrazek” w formie alt=”opis obrazka“
Przykład kodu:
<img src="obrazek.jpg" alt="opis obrazka"/>
Przykład kodu dla obrazka z poprzednich zajęć:
<a href=”http://www.msp7.pl”><img src=”http://www.elmot.pl/images/obrazek.jpg” alt=”obrazek dwójki dzieci z kwiatkami”></a>
i obraz kodu na stronie WWW
==========================================
==========================================
Atrybut ALT dostarcza wyszukiwarkom (np. Google) przydatnych informacji o tematyce obrazku. Przykładowo jeśli chcesz wyszukać obrazek z kotkiem rasy PERS , wpisujesz w wyszukiwarkę frazę “kot perski” – wyszukiwarka przemierzając zasoby internetowe szuka SŁÓW OPISÓW obrazków (nikt nie ogląda fizycznie zdjęć i na ich podstawie przekazuje ci rezultaty w postaci zbioru grafiki na stronie z wynikami wyszukiwania.
*Podobnie działa atrybut title – tytuł obrazka – przykład kodu title=”tytuł obrazka”
Atrybut “TARGET”
Definiuje on okno docelowe dla otwieranego dokumentu – określa jak ma się otwierać strona zawarta w adresie linku / odnośnika. Brak tego atrybutu (wartość domyślna_self) powoduje otwarcie strony w tym samym oknie. Jeśli jednak dodamy kod po adresie odnośnika target=”_blank” , nasze kliknięcie na link spowoduje , że strona docelowa otworzy się w nowym oknie! Tak więc uzyskamy efekt otwartej strony macierzystej (z naszym linkiem) i nowej strony docelowej.
Przykładowy kod
<a href=”http://www.msp7.pl”> kliknij na link do strony w nowym oknie target=”_blank”></a>
A działa to tak
=================================
kliknij na link do strony w nowym oknie
=================================
CIEKAWOSTKA – Inne wartości parametru TARGET to
- • _parent okno macierzyste lub okno rodzica
- • _top okno główne, likwidowane są wszelkie inne ramki
- • nazwa okno o nazwie podanej przez użytkownika
Ćwiczenie
W notatniku Stwórz plik HTML, który wyświetli link do dowolnego serwisu WWW, wraz z atrybutami alt i target (nowe okno)
- Rozwiązanie – przykładowy kod:
- <a href=”http://www.msp7.pl” target = “_blank” alt=”obrazek dwójki dzieci z kwiatkami” title=”tajemniczy link”>jestem LINK – KLIKNIJ WE MNIE !></a>
- EFEKT , który powinien wyświetlić TWÓJ PLIK HTML
- ======================================
- jestem LINK – KLIKNIJ WE MNIE !
- ======================================
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”
Lekcja informatyki – obrazki
Sierpień 31, 2010 by admin · 6 Comments
Witam! Dziś o obrazkach w internecie.
Każdy z Was wielokrotnie przeglądając internet zauważył zapewne, że oprócz tekstów najczęstszym elementem stron WWW jest obrazek (grafika). Najpopularniejszą formą grafiki internetowej są ZDJĘCIA, RYSUNKI(motywy) , IKONY, TŁA itp.
 rysunek |
 tło |
|
 zdjęcie |
Te wszędobylskie PLIKI GRAFICZNE mają różne ROZSZERZENIA (lekcja “rodzaje plików”). Do najpopularniejszych rozszerzeń plików , które oglądacie w internecie należą *.jpg, *.gif, *.bmp, *.png
(przypominam, że gwiazdka to umowny znak dowolnej nazwy pliku, a pliki mogą się jak pamiętacie nazywać jak sobie życzycie, ale bez stosowania polskich znaków – przykładowo zdjęcie róży bezpieczniej jest nazwać np. roza.jpg )
Poniżej zamieściłęm dla porównania trzy obrazki – pierwszy to plik bmp (bitmapa) – obrazek.bmp, drugi to format jpg – obrazek.jpg, a trzeci png – obrazek.png
 obrazek.bmp |
 obrazek.jpg
|
obrazek.png
Na pierwszy rzut oka obrazki niczym się nie różnią. Okazuje się jednak, że pierwszy obrazek (bmp) ma 120 KB (lekcja – jednostki informacji), a drugi (jpg) 30 KB. Stąd wniosek, że KOMPRESJA – zmniejszanie wielkości pliku bez widocznej (słyszalnej) utraty jego jakości (lekcja – kompresja plików) z formatu bmp na jpg dała czterokrotne zmniejszenie jego rozmiaru. Zapamiętaj – zdjęcia i inne pliki graficzne przeznaczone do publikacji na łamach internetu powinny być skompresowane – w formacie *.jpg. Powód – mniejsze pliki szybciej się ładują w przeglądarce WWW (lekcja – przeglądarki internetowe ).
Trzeci obrazek – plik png – to w naszym przypadku grafika bez tła – na pierwszy rzut oka nie na naszej białej stronie WWW tego nie widać, ale zobaczcie jak wygląda nasz bohater na kolorowym tle.
|
_ |
|
Zauważcie że w pierwszym rysunku (jpg) tło jest białe, a w drugim (png) tła nie ma. To właśnie wielka zaleta formatu png (ang. Portable Network Graphics) – następcy formatu *.gif -systemu bezstratnej kompresji danych graficznych. Pamiętajmy jednak, że wraz z jakością zwiększa się objętość pliku(obrazek png ma ponad 100KB!) O plikach *.gif powiem tylko tyle, że najpopularniejszą ich formą są “animowane gify” – oto przykład:
animowany gif
_
O tym formacie graficznym porozmawiamy jeszcze na lekcji (lekcja – tworzenie animacji)
Zadanie: stwórz na pulpicie swojego komputera plik, który będzie pokazywał obrazek.
Wszystkie obrazki w internecie są umiejscowione na serwerach (komputerach stale włączonych, które dzięki specjalnemu oprogramowaniu pozwalają innym użytkownikom internetu na korzystanie z ich zasobów – zbiorach różnych plików – w tym naszych obrazków). Każdy taki serwer ma swój adres internetowy. Przykładowo nasza lekcja to artykuł na serwerze elmot.pl. Aby zachować porządek na dysku/serwerze – wskazane jest, aby obrazki/grafikę “trzymać” w jednym konkretnym folderze/katalogu (lekcja – system operacyjny, foldery i podfoldery). Jego nazwa jest jak już wiecie dowolna. W przypadku serwera domeny elmot.pl nasz folder nazywa się “images”. Stąd adres obrazków z tego serwera zaczyna się od http:// (informacja dla komputera, że plik jest z internetu) www.elmot.pl (adres strony internetowej)/images(katalog/folder w którym są obrazki)/obrazek.jpg (nazwa pliku i jego rozszerzenie).
Reasumując – adres naszego obrazka to http://www.elmot.pl/images/obrazek.jpg
Skopiuj ten adres(zaznacz i ctrl+c) i wklej(ctrl+v) (lekcja skróty klawiszowe) w pole adres przeglądarki – sprawdź czy obrazek naprawdę się tam znajduje (powinien wyświetlić się w oknie przeglądarki). Działa ?
W ramach ćwiczenia przejdź na naszą szkolną stronę WWW , i kliknij PKM (skrót od “prawy klawisz myszki”) np. na obrazek EDUGRY (ten z Mario – link do naszego szkolnego serwisu edugry). Ukaże ci się MENU, z którego wybierz “POKAŻ OBRAZEK”. Co widzisz – w oknie przeglądarki nasz mały plik graficzny o adresie http://www.sp7knurow.eu/rysunki/edugry.jpg
Analizując otrzymany adres – obrazek ma nazwę edugry.jpg, znajduje się w folderze rysunki na serwerze szkolnym o adresie http://www.sp7.knurow.eu
Przystąpmy zatem do tworzenia pliku, który będzie pokazywał dowolny obrazek z internetu.
- otwórz program “notatnik” (menu start/akcesoria/notatnik)
- wpisz w nim polecenie : “pokaż mi taki obrazek = http://www.elmot.pl/images/obrazek.jpg”
- zapisz plik na pulpicie jako “lekcja.txt”
- kliknij na ten plik
I co? NIC! Otworzył się nasz “notatnik” ukazując wpisane przed chwilą zdanie ;( Dlaczego nie działa ? Dlatego, że komputerek nie rozumie zwykłego języka – polecenie “pokaż mi obrazek” musimy napisać w języku zrozumiałym dla komputera – języku programowania HTML. Polecenia w HTML-u wyglądają trochę inaczej – stosuje się tu różne znaczniki, symbole itp. Na początku wygląda to trochę przerażająco, ale w końcu znasz już dobrze język polski, nieźle język angielski, to nauczmy się również języka komputerowego . Poprawmy zatem nasz plik “lekcja.txt”
-
kliknij na plik “lekcja.txt”
-
usuń starą zawartość i zastąp ją KODEM HTML
-
kody umieszcza się w “znacznikach <kod>, aby komputerek i przeglądarka internetowa wiedziały, że to ich język
-
polecenie pokaż obrazek to po html-owemu img src
-
wpisz w notatniku <img src=”http://www.elmot.pl/images/obrazek.jpg”/>
-
Zauważ, że w kodzie html panują pewne reguły – adresy WWW są podawane w cudzysłowiach “adres“ , kod zaczyna się znacznikiem < , a kończy /> itp.
-
Kliknij w menu PLIK i wybierz “zapisz jako”, zaznacz w oknie “zapisz jako typ” -”wszystkie pliki” , wpisz nazwę pliku “lekcja.html”
-
Gotowe. Kliknij na utworzony plik. Zauważ, że stworzyłeś plik z rozszerzeniem HTML – czyli taki, który otwierają przeglądarki WWW.
Całe ćwiczenie powinieneś powtórzyć na innym, dowolnym obrazku z internetu (wybierz jakiś, a następnie skopiuj jego adres. Pamiętaj że adres obrazka zaczyna się od http:// a kończy na .jpg lub innym rozszerzeniu.
Na następnej lekcji nauczymy się, jak określać wielkość naszego obrazka i jak tworzyć LINKI do innych stron WWW.
Witek Kozaczkiewicz MSP 7 Knurów
