Własna strona internetowa. Do zrobienia strony internetowej wystarczy nam zwykły edytor tekstu,...

Post on 21-Dec-2015

221 views 2 download

Transcript of Własna strona internetowa. Do zrobienia strony internetowej wystarczy nam zwykły edytor tekstu,...

Własna strona Własna strona internetowainternetowa

Do zrobienia strony internetowej Do zrobienia strony internetowej wystarczy nam zwykły edytor tekstu, np.: wystarczy nam zwykły edytor tekstu, np.: Notatnik oraz znajomość kilku komend.Notatnik oraz znajomość kilku komend.

<html>

</html>

1. Pisanie strony rozpoczynamy od znacznika <html>, podobnie kończymy: </html>2. Następnie powinny się tam znaleźć informacjenagłówkowe, które oznaczamy <head>…</head> <head

>

</head>

(a)Tytuł strony wpisujemy między znacznikami<title>…</title>

<title> </title>

3. Treść strony znajduje się w sekcji body, Oznaczmy ją: <body>…</body>. Ponadtow sekcji body możemy wstawiać:(a)Hiperłącza, np.:<a href=„www.google.pl">Google</a>

(b) Obrazki, np.:<img src=„obrazek.jpg" alt=„Tytuł obrazka">

(c) Formatowanie tekstu <font size="48" color="blue" face="Arial"> Formatowany tekst </font>

<body>

</body>

Przykładowa stronaPrzykładowa strona

<html><html><head><head><meta http-equiv="content-type" content="text/html; charset=windows-<meta http-equiv="content-type" content="text/html; charset=windows-

1250"><title>Stronka</title>1250"><title>Stronka</title></head></head><body><body><body bgcolor="black"><body bgcolor="black"><font size="48" color="blue" face="Arial"> Tak spędziłem wakacje</font></br><font size="48" color="blue" face="Arial"> Tak spędziłem wakacje</font></br><img src=http://bdu.bzwbk.pl/_items/bdu/img/przebojowe_wakacje_1.jpg <img src=http://bdu.bzwbk.pl/_items/bdu/img/przebojowe_wakacje_1.jpg

alt=„MoJe wAkAcJe"> alt=„MoJe wAkAcJe"> <font color="red" size="5" face="Arial"><font color="red" size="5" face="Arial">Morze Bałtyckie, Bałtyk – płytkie morze śródlądowe na szelfie kontynentalnym w Morze Bałtyckie, Bałtyk – płytkie morze śródlądowe na szelfie kontynentalnym w

Europie północnej. Połączone z Morzem Północnym przez Cieśniny Duńskie Europie północnej. Połączone z Morzem Północnym przez Cieśniny Duńskie (Sund, Mały i Wielki Bełt) oraz Kattegat i Skagerrak. Za zachodnią granicę (Sund, Mały i Wielki Bełt) oraz Kattegat i Skagerrak. Za zachodnią granicę Bałtyku przyjmuje się cieśninę Sund i próg podwodny ciągnący się na Bałtyku przyjmuje się cieśninę Sund i próg podwodny ciągnący się na głębokości 18–20 m od przylądka Gedser (wyspa Falster) do przylądka Darßer głębokości 18–20 m od przylądka Gedser (wyspa Falster) do przylądka Darßer Ort (Darß).</br>Ort (Darß).</br>

Źródło:</font> </br> <a href="http://pl.wikipedia.org/wiki/Morze_BaŹródło:</font> </br> <a href="http://pl.wikipedia.org/wiki/Morze_Ba%C5%82tyckie"> %C5%82tyckie">

<font size="5">Wikipedia </font><font size="5">Wikipedia </font></body></body></html></html>

Oto kod źródłowy tej Oto kod źródłowy tej stronystrony

<- obsługa polskich <- obsługa polskich znakówznaków

<-kolor tła<-kolor tła<-formatowanie tekstu<-formatowanie tekstu<- wstawianie obrazka<- wstawianie obrazka

Inny przykład stronyInny przykład strony

<html><head><meta http-equiv="content-type" content="text/html; charset=windows-1250"><title>Stronka</title></head><body><h1>Plan lekcji</h1><table border="3"><tr><td>Lp</td><td>Poniedziałek</td><td>Wtorek</td><td>Środa</td><td>Czwartek</td><td>Piątek</td></tr><tr><td>1</td><td>Historia</td><td>Matematyka</td> <td>Polski</td> <td>Plastyka</td> <td>Polski</td></tr><tr><td>2</td> <td>Przyroda</td> <td>Przyroda</td> <td>Matematyka</td> <td>Angielski</td> <td>W.F</td></tr><tr><td>3</td><td>Religia</td><td>Polski</td><td>W.F</td> <td>Muzyka</td> <td>Angielski</td></tr><tr><td>4</td> <td>Matematyka</td> <td>Godz.Wych</td> <td>W.F</td> <td>Muzyka</td> <td>Angielski</td></tr><tr><td>5</td> <td>Plastyka</td> <td>Matematyka</td> <td>Matematyka</td> <td>Informatyka</td> <td>Przyroda</td></tr><tr><td>6</td> <td>Religia</td> <td>Angielski</td> <td>Angielski</td> <td> </td> <td>Polski</td></tr></table><h1>Dodatkowe zajęcia</h1>Matematyka</br>Piłka nożna</br>Przyroda</br>Basen</br><h1>LINKI</h1><a href="http://www.matematyka.pl">Strona matematyka.pl</a></br><a href="http://spstepnica.republika.pl/basen2.JPG">Zdjęcie z zajęć na basenie</a></br></br></br>Wyróżniamy 6 rzędów tytułów. Można ich używać do tytułowania rozdziałów, podrozdziałów, itp. Oznaczamy je odpowiednio:<h1>Pierwszy tytuł </h1> <h2>Drugi tytuł</h2> <h3>Trzeci tytuł</h3> <h4>Czwarty tytuł</h4> <h5>Piąty tytuł</h5> <h6>Szósty tytuł</h6></body></html>

Oto kod źródłowy tej Oto kod źródłowy tej stronystrony

<-Początek tabeli<-Początek tabeli

<-Początek nowego <-Początek nowego wierszawiersza

<-Początek nowej kolumny<-Początek nowej kolumny

W dalszej części prezentacji poznamy W dalszej części prezentacji poznamy ciekawe i łatwe narzędzie do tworzenia ciekawe i łatwe narzędzie do tworzenia stron internetowych w trybie WYSIWYG stron internetowych w trybie WYSIWYG (What You See Is What You Get - to (What You See Is What You Get - to skrótowiec stosowany w informatyce dla skrótowiec stosowany w informatyce dla określenia metod, które pozwalają uzyskać określenia metod, które pozwalają uzyskać wynik w publikacji identyczny lub bardzo wynik w publikacji identyczny lub bardzo zbliżony do obrazu na ekranie) o nazwie zbliżony do obrazu na ekranie) o nazwie Google Sites.Google Sites.

Początki projektuPoczątki projektu

Pod koniec 2006 roku poinformowano o Pod koniec 2006 roku poinformowano o przejęciu przez Google niewielkiej firmy przejęciu przez Google niewielkiej firmy JotSpot, a wraz z nią wygodnego w JotSpot, a wraz z nią wygodnego w obsłudze zestawu narzędzi internetowych, obsłudze zestawu narzędzi internetowych, opartych na mechanizmie wiki, do pracy opartych na mechanizmie wiki, do pracy grupowej online. Po wielomiesięcznym grupowej online. Po wielomiesięcznym procesie integracji narzędzi JotSpot z procesie integracji narzędzi JotSpot z Google Apps gigant z Kalifornii udostępnił Google Apps gigant z Kalifornii udostępnił je 27 lutego br. internautom pod nazwą je 27 lutego br. internautom pod nazwą Google Sites. Google Sites.

Zanim przejdziemy do Zanim przejdziemy do zakładania strony…zakładania strony…

Powinniśmy założyć konto w Powinniśmy założyć konto w serwisie Google, np.: E-mail na serwisie Google, np.: E-mail na stronie stronie www.mail.google.comwww.mail.google.com

Przejść na adresPrzejść na adres www.sites.google.comwww.sites.google.com

Zalogować sięZalogować się

W dalszej części pokazu obejrzymy W dalszej części pokazu obejrzymy prezentację wideo, pokazującą jak prezentację wideo, pokazującą jak założyć własną stronę oraz jak dodać założyć własną stronę oraz jak dodać do niej różne ciekawe rzeczy.do niej różne ciekawe rzeczy.

Zakładanie stronyZakładanie strony

Edycja strony głównejEdycja strony głównej

Dodawanie stron, podstron Dodawanie stron, podstron i hiperłączyi hiperłączy

Dodawanie obrazkówDodawanie obrazków

Dodawanie klipów z Dodawanie klipów z YouTubeYouTube

Strona z ogłoszeniamiStrona z ogłoszeniami

Edycja paska bocznegoEdycja paska bocznego

Gotowa stronaGotowa strona

Na koniec pokażemy jak dodać stronę Na koniec pokażemy jak dodać stronę do zasobów Google, tj. żeby do zasobów Google, tj. żeby wyszukiwarka google.pl znajdowała wyszukiwarka google.pl znajdowała ją po wpisaniu odpowiednich słów.ją po wpisaniu odpowiednich słów.

Dodanie strony do zasobów Dodanie strony do zasobów GoogleGoogle

Oczywiście to tylko niektóre z Oczywiście to tylko niektóre z elementów, dzięki którym można elementów, dzięki którym można sprawić, że nasza strona będzie sprawić, że nasza strona będzie ciekawsza i ładniejsza. Można jeszcze ciekawsza i ładniejsza. Można jeszcze dodawać logo strony, zmieniać kolor dodawać logo strony, zmieniać kolor tła stron i podstron, itp.tła stron i podstron, itp.