INFORMATYKA – KLASA VIII
Proszę tylko do zeszytu wpisać temat lekcji.
24.04.2020r.
Lekcja Temat: Tworzymy prostą stronę internetową.
Dziś stworzymy sobie pierwszą stronę internetową, poświęconą stolicom Państw europejskich.
Najpierw proszę aby każdy utworzył sobie na pulpicie, lub w innym miejscu na dysku folder o nazwie Strony, tam będziemy zapisywać wszystko co będzie dotyczyło naszej strony.
Otwieramy notatnik lub inny edytor tekstowy. Wprowadzamy znaczniki, które tworzą podstawową strukturę strony:
W nagłówku wpisujemy tytuł Podróże:
W zawartości strony wpisujemy:
Podróże po stolicach Europy oraz cztery zdania o tym co znajdzie się na stronie, każde w osobnym wierszu:
Zapiszcie to co macie stworzone w notatniku jako plik o nazwie: Strona.html, w okienku Zapisz jako typ, należy wybrać Wszystkie pliki:
Teraz zobaczymy, jak nasz strona będzie wyglądała w Internecie. W tym celu proszę otworzyć przeglądarkę internetową, wybrać z górnego menu (w przeglądarce) Plik i Otwórz, a następnie wybieramy ostatnio utworzony plik Strona. Na razie wyświetli nam się wszystko po kolei w jednym akapicie, nie w osobnych, tak jak pisaliśmy to w notatniku:
Aby ułożyć tekst tak jak chcemy, musimy poznać kilka znaczników HTML, formatujących tekst na stronie.
Akapity tworzymy otaczając tekst znacznikami: <p> … </p>.
Na przykład: <p> tekst akapitu 1</p>
<p> tekst akapitu 2</p>
Aby przejść do nowej linii, nawet w tym samym akapicie, użyjemy znacznika, który wstawiamy tylko na końcu słowa lub zdania: <br>.
Na przykład: <p> tekst <br>
akapitu 1</p>
Znaczniki ,mogą występować z atrybutami, określającymi działanie danego znacznika. Np. aby wyśrodkować tekst „Warszawa jest stolicą Polski” należy ustawić atrybut align znacznika <p>
na wartość center:
<p align = „center”>Warszawa jest stolicą Polski</p>
Do formatowania tekstu można stosować m. in. znaczniki:
<h1> … </h1> - nagłówek pierwszego poziomu,
<h2> … </h2> - nagłówek drugiego poziomu,
…,
<h6> … </h6> - nagłówek szóstego poziomu.
<b> … </b> - tekst pogrubiony.
<i> … </i> - tekst pochylony.
<u> … </u> - tekst podkreślony.
<s> … </s> - tekst przekreślony.
<sup> … </sup> - indeks górny.
<sub> … </sub> - indeks dolny.
Znaczniki można umieszczać wewnątrz innych znaczników. Ważne jest, aby przez zamknięciem danego znacznika zamknąć wszystkie znaczniki otwarte wewnątrz niego.
Na przykład:
<p><b>tekst</b></p>
Teraz w kodzie naszej strony sformatujemy tekst Podróże po stolicach Europy jako nagłówek pierwszego poziomu, czyli musimy zastosować znaczniki: <h1> … </h1>:
Zapiszmy plik po zmianach i obejrzyjmy stronę w przeglądarce. Teraz nasz strona powinna wyglądać tak:
W tekście strony można stosować numerowania i wypunktowania. Aby dokonać numerowania (w HTML oznacza to listę uporządkowaną) stosujemy znaczniki: <ol> … </ol>. Aby dokonać
wyliczenia (w HTML oznacza to listę nieuporządkowaną), stosujemy znaczniki: <ul> … </ul>.
Kolejne elementy listy umieszczamy pomiędzy znacznikami: <li> … </li>.
Teraz do naszej strony dodamy wypunktowanie do trzech akapitów, znajdujących się poniżej:
Pamiętajcie o znacznikach otwierających i zamykających <li> … </li>.
Zapiszmy plik i sprawdźmy jak wygląda nasza strona w przeglądarce. Po zapisaniu pliku nie trzeba za każdym razem od nowa otwierać strony w przeglądarce, wystarczy ją odświeżyć przy pomocy klawisza F5:
Teraz stworzymy tabelę. Tabele tworzymy za pomocą znacznika: <tabele>. Poszczególne wiersze tabeli oznacza się znacznikiem <tr>, a komórki znacznikiem <td>. Każdy z tych znaczników występuje w parze ze znacznikiem zamykającym: </tr> i <</td>.
Na przykład:
<tabele>
<tr>
<td>wiersz1, komórka1</td><td>wiersz1, komórka2</td>
</tr>
</tabele>
Aby było widać obramowanie tabeli, należy w znaczniku <table> zastosować atrybut border=1: <table border=1>.
Teraz utworzymy tabelę z wykazem państwa i ich stolic na naszej stronie. Przejdźmy więc do naszego pliku z kodem źródłowym w notatniku i wpiszmy:
Zapiszmy nasz plik i sprawdźmy jak to wygląda w przeglądarce:
Istota poruszania się po stronach WWW polega na tym, że w każdej z nich można w łatwy sposób przenieść się na inną. Służą do tego hiperłącza, inaczej odsyłacze lub linki. Hiperłącze to adres strony lub pliku ukryty pod wyróżnionym elementem, np. tekstem. Hiperłącze
tworzymy stosując znaczniki: <a> … </a> z atrybutem href. Hiperłącze może mieć postać:
<a href=”adres strony”>tekst</a>.
W naszym kodzie strony dodamy teraz hiperłącze do strony o stolicy Polski:
Zapisujemy plik ponownie i oglądamy efekt w przeglądarce:
Strony WWW wzbogaca się zazwyczaj rysunkami i zdjęciami. Odpowiednio dobrana grafika sprawia, że strona jest bardziej atrakcyjna. Aby zapewnić szybkie ładowanie strony, należy stosować odpowiednie formaty plików graficznych, np. JPG, PNG. Nie należy korzystać z plików w formacie BMP. W nazwach plików nie powinno używać się polskich liter, by uniknąć problemów z umieszczaniem strony w Internecie. Aby wstawić obraz na stronę, należy zastosować znacznik <img> z atrybutem src. Ogólna postać znacznika jest
następująca: <img src=”plik graficzny”>, gdzie słowo plik graficzny określa nazwę pliku z grafiką (wraz z rozszerzeniem nazwy pliku) lub adres internetowy pliku z grafiką.
Na przykład, gdy wprowadzimy w dokumencie HTML znacznik: <img src=”rysunek.jpg”>, na stronie WWW wyświetli się obrazek zapisany w pliku rysunek.jpg. Każdy rysunek, czy
obraz umieszczony na stronie WWW musi być zapisany w tym samym folderze, w którym zapisany jest nasz plik z kodem źródłowym strony. Dlatego na początku stworzyliśmy folder o nazwie Strona, że tam wszystko umieszczać. Rysunek pojawi się w miejscu, gdzie
umieściliśmy znacznik. Jeśli chcemy umieścić rysunek pod tekstem, trzeba pamiętać o znaczniku <br> na końcu tekstu.
Teraz moi drodzy każdy z Was niech znajdzie w Internecie zdjęcie wieży Eifla i zapisze go w założonym na początku folderze o nazwie Strona.
Kiedy już mamy zapisany plik zmieńmy jego nazwę na prostszy, czyli np. na: Wieża.
Chcemy nasz obraz z wieżą Eifla umieścić po prawej stronie tekstu. Aby umieścić obraz po prawej stronie tekstu należy do znacznika <img> dodać atrybut align z wartością right. A zapis będzie następujący:
Zapiszmy plik i sprawdźmy stronę w przeglądarce. Powinna wyglądać następująco:
Bardzo proszę aby każdy z Was stworzył taką stronę i przesłał mi dwa zdjęcia, jedno zdjęcie – kod źródłowy napisany w notatniku i drugie zdjęcie – strona otworzona w przeglądarce. Zdjęcia proszę przesyłać na Messengera (od poniedziałku do piątku, do godziny 16:00) lub na mejla (jblyskun@poczta.fm) do dnia 30.04.2020r.
