Lekcja 43

Temat:Składanie podań do szkoły.

Lekcja 42

Temat:Składanie podań do szkoły.

Lekcja 41

Temat;Nauka w programie Scratch.

Scratch – co to jest?

17 października 2010

  

Oto Kot. Kot stoi na środku sceny i czeka, gotowy do działania. Właściwie w każdej chwili gotów jest ruszyć przed siebie.
Co zrobi Kot? Dokąd pójdzie?
A to już zależy wyłącznie od Ciebie, drogi czytelniku. Masz nieograniczone możliwości sterowania Kotem.
Bowiem Kot jest aktorem, a Ty jesteś reżyserem, któy decyduje o każdym jego ruchu.
Kot może tańczyć, śpiewać a nawet znikać i pojawiać się w zupełnie nieoczekiwanych miejscach i momntach. Może występować sam albo w towarzystwie innych aktorów. Może też powielić się sporą liczbę Kotów albo wręcz zamienić się w kogoś lub coś zupełnie innego.
Brzmi to magicznie? Tak właśnie jest, a wszystko to zależy tylko od Ciebie.

No dobrze, ale od czego masz zacząć, jeśli chcesz mieć takiego magicznego i posłusznego Kota?
Zacznij od wizyty na stronie: 
http://scratch.mit.edu/ ,
ściągnij program Scratch, wypełniając prosty formularz: 
http://scratch.mit.edu/download,
a następnie zainstaluj go na swoim kompuerze.
Gotowe ?
Teraz uruchom Scratch klikając na ikonę na pulpicie:

Oto przed Tobą otworzył się świat, w którym mieszka Kot.

Tylko ten świat jest cały po angielsku! Na szczęście łatwo można temu zaradzić.
W pasku menu, tuż obok logo Scratch po lewej stronie, odszuka ikonę kuli ziemskiej.

Kliknij na nią i z listy, która się pojawi, wybierz ‚Polish’. Dzięki

Lekcja 40

Temat:Tworzenie tabel HTML.

Tabela HTML

<table>

Kolejnym sposobem prezentowania i grupowania danych w języku Html jest tabela. Sposób prezentowania danych w tabeli html jest taki sam jak w każdej innej tabeli, którą znamy z życia codziennego.Tabele tworzymy przy użyciu elementu <table>.

<table>
 
</table>

Lekcja 39

Temat:Tworzenie przycisków button generation.

Przyciski

<button type="rodzaj">Treść przycisku</button>

gdzie "rodzaj" określa typ przycisku i można tutaj podać:

• "submit" - przycisk wysłania formularza
• "reset" - przycisk wyczyszczenia danych
• "button" - zwykły przycisk (domyślnie)

Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis" />. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić dodatkowe znaczniki pomiędzy <button> a </button> (w miejsce treści przycisku). Można również dowolnie formatować tekst, np. wprowadzając pogrubienie, pochylenie i inne.

W przypadku zastosowania type="button" na ekranie pojawi się przycisk, po kliknięciu którego, nie nastąpi żadna akcja. Aby to zmienić, należy przechwycić wygenerowane zdarzenie onclick. Natomiast Netscape 7 oraz Opera 6, 7 traktują <button>...</button> jak przycisk wysłania formularza.

Niestety starsze wersje przeglądarki Internet Explorer zachowują się błędnie w przypadku <button type="submit" name="..." value="...">...</button>

Jeśli przycisk posiada atrybut name="...", jego wartość powinna zostać wysłana razem z formularzem. W przypadku wstawienia kilku takich przycisków, oprócz standardowych pól z formularzem powinna być wysłana wartość tylko tego przycisku, który został kliknięty. MSIE 6.0 wysyła wartość wszystkich znajdujących się w formularzu przycisków, które mają nadaną nazwę. Natomiast MSIE do wersji 7.0 włącznie w ogóle nie obsługuje atrybutu value="..." dla przycisków, tylko jako wartość zawsze wysyła zawartość znacznika BUTTON w postaci kodu HTML. W MSIE 8.0 wszystko jest już w porządku, ale tylko w trybie Standards Compliance. Również dopiero w tym trybie domyślną wartością typu przycisku jest submit, a nie button. Wszystko to sprawia, że często jedynym sposobem uzyskania kompatybilności ze starszymi wersjami Internet Explorera jest rezygnacja z używania tego znacznika na rzecz <input type="submit" />, chyba że nie nadajemy mu nazwy (atrybut name="...") - wtedy nie ma się czego obawiać, jeśli jednocześnie podamy typ przycisku (atrybut type="...").

UWAGA! Element BUTTON nie może zawierać znaczników: A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET.

PRZYKŁAD:

Przykład z obrazkiem:

Lekcja 38

Temat:Hiperłącza HTML.

Hiperłącze w html

<a>

Do wstawienia hiperłącza na stronę internetową służy znacznik <a>.

Znacznik <a> zawsze powinien zostać zamknięty. Musi zawierać minimum 1 atrybut: href. Wartość tego atrybutu to link, do którego ma prowadzić nasze hiperłącze.

Podstawowa konstrukcja wygląda następująco:

<a href="adres do którego ma prowadzić hiperłącze">Tekst widoczny na stronie</a>

Na przykład tak zapisana linijka kodu:

<a href="http://www.17gim.pl/pokaz_artykul.php?id_artykulu=24">Ten link poprowadzi Cię do strony Gimnazjum nr 17 w Łodzi</a>

Na stronie internetowej wyświetli się i będzie działać następująco: Ten link poprowadzi Cię do strony Gimnazjum nr 17 w Łodzi

Przećwicz i sprawdź, jak tworzy się znacznik </a>

---

Domyślnie wszystkie hiperłącza w przeglądarkach wyświetlają się podobnie:

• nieodwiedzony (niekliknięty) link jest niebieski i podkreślony,
• odwiedzony (kliknięty) link jest purpurowy i podkreślony
• aktywny (właśnie klikany) link jest czerwony i podkreślony

---

Najczęściej używane atrybuty znacznika <a>

• href

  musi być obecny. W jego wartości podajemy link, do którego ma prowadzić hiperłącze

• target

  Nie jest niezbędny. W jego wartości możemy zdefiniować, czy link ma się otworzyć np. w nowym oknie. Jako wartość można podać:
  • blank - najczęściej używany - link otworzy się w nowej karcie lub oknie
  • parent
  • safe
  • top
  Podstawowa konstrukcja: <a href="dokładny adres internetowy" target="blank">link poprowadzi Cię do podanego linku</a>
  Sprawdź jak działa atrybut target

• download

  Atrybut, który sprawi, że nie zostaniesz przekierowany do pod adres podany w hiperłączu. Zamiast tego, kliknięcie spowoduje ściągnięcie na dysk pliku umieszczonego pod adresem z hiperłącza.
  Atrybut nie jest obsługiwany przez niektóre przeglądarki: Internet Explorer, Opera (wersje przed 12), Safari.
  Podstawowa konstrukcja:<a href="adres pod którym umieszczony jest np. obrazek" download>klikając link ściągniesz obrazek</a>
  Opcjonalnie można podać wartość atrybutu download. Określi ona nazwę, pod jaką ma się zapisać plik
  Sprawdź jak działa atrybut download

---

Linkowanie obrazów

Hiperłączem może być fragment tekstu, może nim być także obrazek. Wystarczy zagnieździć znacznik <img> w znaczniku <a>:

<a href="http://www.w3schools.com">

<img src="smiley.gif" alt="Go to W3Schools!">

</a>

Lekcja 38

Temat:Wstawianie grafiki HTML.

Wstawianie grafik na stronę html

 

<img>

Do wstawienia obrazka na stronę internetową służy znacznik <img>.

Nie trzeba go zamykać. Musi zawierać minimum te 2 atrybuty: src oraz alt.

Podstawowa konstrukcja wygląda następująco:

<img src="link do pliku graficznego" alt="nazwa grafiki">

Zobacz jak to działa

Tak naprawdę grafika nie jest umieszczona na Twojej stronie. Znacznik img tworzy na niej miejsce, w którym grafika ma być wyświetlona. Atrybut src zawiera informację o lokalizacji obrazka - stamtąd jest pobierany i wyświetlany na stronie.

---

Najczęściej używane atrybuty znacznika <img>

• src
Musi wystąpić. Zawiera informację o lokalizacji pliku graficznego.
Przykład: <img src="grafika/szkola.jpg">
• alt
Musi wystąpić (choć znacznik <img> może zadziałać bez niego). Zawiera informację, jaka będzie wyświetlona w przypadku, gdy link do obrazka będzie nieprawidłowy.
Atrybut alt jest także bardzo ważny dla czytników treści - używanych np. przez osoby niepełnosprawne. Taki czytnik przeczyta np. osobie niewidomej tekst zawarty w wartości atrybutu alt. Dzięki temu będzie ona mogła skorzystać ze zbudowanej przez Ciebie strony
Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły">
• height
Za jego pomocą możemy dokładnie określić wysokość obrazka (w pikselach). (Lepiej jest używać atrybutu style)
Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły" height="50">
• width
Za jego pomocą możemy dokładnie określić szerokość obrazka (w pikselach). (Lepiej jest używać atrybutu style)
Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły" height="50" width="50">

---

Wstawianie obrazów z różnych lokalizacji

Grafiki, jakie chcesz umieścić na swojej stronie, mogą być zapisane w folderze na dysku bądź serwerze - tam, gdzie Twoja strona, lub gdzieś na innej stronie internetowej. W zależności od tego, skąd pobierasz obrazek do wyświetlenia, inaczej opiszesz wartość atrybutu src.

• grafiki z danego folderu
Podajemy (w wartości atrybutu src) ścieżkę dostępu - od miejsca, w którym jest umieszczony plik html
Przykład: <img src="grafika/szkola.jpg" alt="logo szkoły">
• grafiki z lokalizacji internetowej.
Podajemy (w wartości atrybutu src) dokładny adres internetowy (najlepiej skopiowany z przeglądarki) do lokalizacji, w którym jest umieszczony plik z grafiką.
Przykład: <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="logo szkoły">

Sprawdź jak to działa

TUTAJ znajdziesz więcej informacji o podawaniu adresu względnego i bezwzględnego. Naprawdę warto kliknąć!

Lekcja 37

Temat:Wprowadzenie do html II

Co to jest html?

Skrót html oznacza Hypertext Markup Language - czyli hipertekstowy język znaczników. A bardziej "po polsku" - chodzi o język oparty o hiperłącza, zbudowany ze znaczników.

Język html stosuje się do tworzenia stron internetowych. Przeglądarki internetowe odczytują składnię html i interpretują ją, wyświetlając stronę.

Co to jest znacznik?

• Znacznik (inaczej tag) to konkretny znak lub słowo kluczowe, otoczony nawiasami ostrymi.
• Znaczniki prawie zawsze wystepują parami:
• Znacznik zamykający zawsze poprzedzony jest ukośnikiem.
• Przeglądarka internetowa nie wyświetla znaczników, ale używa ich do prawidłow

  Często używane znaczniki

  Oto niektóre z częściej używanych znaczników:
  • <p> - znacznik, w którym powinien zawierać się tekst wpisywany na stronie internetowej.
    • musi być zamknięty
    • tekst zawarty w znaczniku <p> będzie wyświetlany od nowej linijki
    • jeśli wpisując tekst w znaczniku <p> użyjesz więcej niż jednego odstępu (spacji) między wyrazami, przeglądarka nie wyświetli ich (będzie widoczna tylko jedna spacja).
    • jeśli wpisując tekst w znaczniku <p> użyjesz klawisza enter by przejść do nowej linii, przeglądarka jej nie wyświetli (tekst będzie widoczny jako jeden akapit). By pisać od nowej linii tekst zawarty w jednym znaczniku <p>, można użyć znacznika <br>.
    • Większość przeglądarek wyświetli poprawnie znacznik <p> nawet, jeśli zapomnisz go zamknąć ☺
  • <h1> - <h6> - nagłówki tekstu
    • muszą być zamknięte
    • zawsze będą wyświetlone od nowej linii
    • są hierarchiczne - <h1> jest najważniejszy, <h6> najmniej ważny
    • w dokumencie html najczęściej występuje tylko jeden nagłówek <h1>
    • jeśli nie zmienimy tego stylami CSS, będą wyglądały następująco:
      
      TUTAJ znajdziesz więcej informacji o nagłówkach.
  • <img> - z jego pomocą umieszczamy na stronie obrazki.
    • jako jeden z nielicznych nie musi być zamknięty.
    •