2. Projektowanie stron WWW podstawowe informacje



Podobne dokumenty
2. Opracowanie grafiki w dokumencie tekstowym

2. Metody prezentacji informacji

2. Tabele w bazach danych

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

2. Metody adresowania w arkuszu kalkulacyjnym

Wprowadzenie do języka HTML

HTML (HyperText Markup Language)

Funkcje i instrukcje języka JavaScript

HTML (HyperText Markup Language) hipertekstowy język znaczników

2. Rozmowy i dyskusje w Internecie

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA. Scenariusz lekcji. 2.1 Wiadomości: 2.2 Umiejętności: Scenariusz lekcji

Ja i moje zainteresowania tworzenie własnej strony internetowej

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

2. Graficzna prezentacja algorytmów

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

I. Formatowanie tekstu i wygląd strony

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Tematyka i rozwiązania metodyczne kolejnych zajęć lekcyjnych wraz z ćwiczeniami.

2. Konfiguracja programu Outlook Express

Moduł IV Internet Tworzenie stron www

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Edukacja na odległość

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word

I. Dlaczego standardy kodowania mailingów są istotne?

Księgarnia internetowa Lubię to!» Nasza społeczność

Tworzenie stron WWW PROGRAM AUTORSKI. Spis treści ZAJĘCIA POZALEKCYJNE KÓŁKO INFORMATYCZNE

e r T i H M r e n L T n

Tworzenie stron internetowych w oparciu o język HTML

Witryny i aplikacje internetowe

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Pierwsza strona internetowa

1. Zarządzanie informacją w programie Access

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

Podstawy tworzenia stron internetowych

Numer i nazwa obszaru: Temat szkolenia:

Scenariusz lekcji. wymienić i podać adresy internetowe instytucji zajmujących się organizacją rynku pracy (biura pracy, agencje pośrednictwa);

Wzbogacenie formy dokumentu praca z tabelami i rysunkami MS Word

Aplikacje WWW - laboratorium

Tematy lekcji informatyki klasa 4a luty/marzec 2013

Podstawy technologii WWW

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Dział O atrakcyjnym przedstawianiu i prezentowaniu informacji (program PowerPoint oraz język HTML tworzenie stron WWW)


Scenariusz lekcji. program do obsługi poczty elektronicznej np. Microsoft Outlook.

Odsyłacze. Style nagłówkowe

Scenariusz lekcji. opisać strukturę prezentacji i budowę poszczególnych slajdów; opisać etapy projektowania prezentacji multimedialnej.

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Wybrane znaczniki HTML

STRONY INTERNETOWE mgr inż. Adrian Zapała

Konspekt lekcji informatyki/zajęć komputerowych

PROGRAM PRACY KOŁA INFORMATYCZNEGO NA ROK SZKOLNY 2016/2017 DLA UCZNIÓW SZKOŁY PODSTAWOWEJ IM. ADAMA MICKIEWICZA W SUŁKOWICACH

Programowanie WEB PODSTAWY HTML

KURSY PROGRAMOWANIA DLA DZIECI

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

Scenariusz lekcji. Scenariusz lekcji

SCENARIUSZ LEKCJI. Po zajęciach uczeń wie umie zna/rozumie

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Damian Daszkiewicz Tworzenie strony-wizytówki dla firmy XYZ

Laboratorium 1: Szablon strony w HTML5

Scenariusz lekcji. Scenariusz lekcji 1 TEMAT LEKCJI: Tablice w PHP 2 CELE LEKCJI: 2.1 Wiadomości: 2.2 Umiejętności: 3 METODY NAUCZANIA

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

za pomocą: definiujemy:

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

Instrukcja dla ucznia

Proste kody html do szybkiego stosowania.

Tworzenie stron internetowych w kodzie HTML Cz 5

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Wykład 1: HTML (XHTML) Michał Drabik

WYMAGANIA EDUKACYJNE Z ZAJĘĆ KOMPUTEROWYCH DLA KLASY SZÓSTEJ W ZAKRESIE WIADOMOŚCI I UMIEJĘTNOŚCI UCZNIÓW

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Tematy lekcji informatyki klasa 4a styczeń 2013

Scenariusz lekcji. Scenariusz lekcji. opisać rodzaje zmian, jakie można wykonać na komórkach w Excelu; wskazać jak dane i komórki w Excelu

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Scenariusz lekcji. Scenariusz lekcji 1 TEMAT LEKCJI 2 CELE LEKCJI. 2.1 Wiadomości. 2.2 Umiejętności 3 METODY NAUCZANIA 4 ŚRODKI DYDAKTYCZNE

APL_03_scenariusz_lekcji. Rodzaje kontrolek i ich obsługa w programach. Informatyka. Jadwiga Jezierska. Osiedle Stawki 39/27

2 Podstawy tworzenia stron internetowych

HTML jak zrobić prostą stronę www

Temat: Wykorzystywanie zasobów przez ucznia

PLAN METODYCZNY NR 1

1. Marketing i reklama

Scenariusz lekcji. Scenariusz lekcji 1 TEMAT LEKCJI: Tworzenie prostych skryptów w PHP 2 CELE LEKCJI: 2.1 Wiadomości: 2.

APLIKACJA SHAREPOINT

Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie kwalifikacji: E.14 Numer zadania: 01

Scenariusz lekcji. wymienić różne sposoby uruchamiania programów; wyjaśnić pojęcie autouruchamiania; omówić metody tworzenia skrótu;

Scenariusz lekcji: Wycieczka klasowa

Przedmiot: Grafika komputerowa i projektowanie stron WWW

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA 4 ŚRODKI DYDAKTYCZNE. Scenariusz lekcji. Scenariusz lekcji. 2.1 Wiadomości: 2.

REDIVE PRZEWODNIK PO PLATFORMIE LMS

Rozkład materiału nauczania z przedmiotu INFORMATYKA. dla gimnazjum

Scenariusz lekcji. opisać działanie poczty elektronicznej; opisać podobieństwa i różnice między pocztą elektroniczną i tradycyjną;

Instrukcja użytkowania platformy ONLINE. Akademii Doskonalenia Zawodowego NATUROPATA ADZ Naturopata

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

ROZDZIAŁ 2. INTERNET. Lekcja 5. Temat: Przeglądanie stron internetowych

KRYTERIA OCENIANIA II ETAP EDUKACYJNY ZAJĘCIA KOMPUTEROWE KLASA IV KLASA V KLASA VI. DOPUSZCZAJĄCY Uczeń

Transkrypt:

1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od trybu WYSIWYG, wie jak utworzyć prostą stronę WWW korzystając z narzędzi dostępnych w systemie Windows, potrafi utworzyć prostą stronę internetową korzystając z pakietu Microsoft Office. ii. b) Umiejętności potrafi wymienić podstawowe znaczniki języka HTML, umie wyjaśnić zasadę tworzenia stron internetowych w trybie tekstowym od tworzenia stron w trybie WYSIWYG, umie utworzyć prostą stronę internetową korzystając z zaimplementowanego w systemie Windows Notatnika, umie utworzyć prostą stronę internetową korzystając z dostępnych narzędzi dostarczanych z pakietem biurowym Microsoft Office. b. 2. Metoda i forma pracy Dyskusja, ćwiczenie, praca indywidualna. Komputer Internet c. 3. Środki dydaktyczne Przeglądarka internetowa Internet Explorer lub Mozilla Firefox Program Notatnik Pakiet biurowy Microsoft Office Karta pracy

d. 4. Przebieg lekcji i. a) Faza przygotowawcza Nauczyciel zapoznaje uczniów z tematem lekcji i uświadamia im cele zajęć. Prosi o włącznie komputerów. Przed zajęciami nauczyciel przygotowuje kartki z opisem podstawowych znaczników języka HTML (załącznik 1) oraz wycina kartki z zadaniami zawartymi w Karcie Pracy (załącznik 2). Jeżeli istnieje taka możliwość można zainstalować darmowy edytor języka HTML pracujący w trybie WYSIWYG NVU. ii. b) Faza realizacyjna 1. Nauczyciel prosi uczniów o włączenie komputerów, rozdaje kartki z opisem podstawowych znaczników języka HTML (załącznik 1). Prosi również uczniów o uruchomienie przeglądarki internetowej i programu Notatnik. 2. Nauczyciel krótko opisuje historię powstawania stron internetowych oraz podaje tryby tworzenia stron internetowych. 3. Następnie omawia zasadę tworzenia prostej strony internetowej wspomagając się kartkami z opisem podstawowych znaczników języka HTML (załącznik 1). Jednocześnie uczniowie, korzystając z udostępnionych im materiałów i słuchając opisów podawanych przez nauczyciela wykonują krok po kroku przykładową stronę internetową. 4. Następnym krokiem jest rozdanie uczniom Kart Pracy (załącznik 2) zawierających określone zadania do wykonania. 5. Uczniowie, na polecenie nauczyciela, wykonują zadanie nr 1 zawarte w Karcie Pracy. 6. Po wykonaniu zadania nr 1 uczniowie przedstawiają nauczycielowi efekty swojej pracy. 7. Następnie nauczyciel objaśnia zasady tworzenia strony internetowej w trybie WYSIWYG korzystając z dowolnego programu do graficznego tworzenia stron internetowych. 8. Po omówieniu zasad tworzenia stron w trybie graficznym uczniowie wykonują zadanie nr 2 umieszczone na Karcie Pracy. 9. Po wykonaniu zadania nr 2 uczniowie przedstawiają nauczycielowi efekty swojej pracy. 10. Na zakończenie zajęć nauczyciel opisuje sposób umieszczania utworzonej strony na serwerze, korzystając z przeglądarki internetowej. iii. c) Faza podsumowująca 1. Potrafią utworzyć prostą stronę internetową korzystając z ogólnie dostępnych narzędzi. 2. Uczniowie potrafią zaprezentować zdobyte informacje w formie multimedialnej umieszczając własną stronę www w sieci komputerowej Internet. 3. Uwagi dla nauczyciela: Ważne jest aby uczniowie mieli wcześniej utworzone konta na darmowych serwerach www, na których będą mogli umieścić swoje strony. Można to powiązać z tematyką z poprzedniej klasy związaną z zakładaniem skrzynek e-mail. Portalem udostępniającym natychmiastowe uruchomienie usługi www wraz ze skrzynką pocztową jest portal Interia.

Jeżeli nie ma możliwości zainstalowania programu NVU należy tylko podać krótki opis programów trybu graficznego WYSIWYG. Ma to na celu uświadomienie uczniom, że w sieci Internet są dostępne darmowe zamienniki komercyjnego oprogramowania. e. 5. Bibliografia 1. Broda P., Smołucha D., Informatyka, Operon, Gdynia 2006. 2. Pikoń K., Po prostu tworzenie stron WWW, Helion, Gliwice 2002. 3. Romanowicz W., HTML i JavaScript, Helion, Gliwice 1998. 4. Strona główna programu NVU http://www.nvu.pl/ 5. Internetowy kurs dla webmasterów WEBTIPS http://www.webtips.pl/kursy/html/czesc1.php 6. Wirtualny kurs języka HTML http://www.kurshtml.boo.pl/ f. 6. Załączniki i. a) Karta pracy ucznia załącznik 1. Podstawowe znaczniki języka HTML Istnieją dwa rodzaje znaczników a) znacznik otwierający np.: <html> b) znacznik zamykający np.: </html> Wyjątkami od tej reguły są znaczniki <br> oraz <hr>. KAŻDY OTWARTY ZNACZNIK MUSI BYĆ ZAMKNIĘTY!! Inaczej strona nie będzie poprawnie wyświetlana. Opis znaczników: <html> - określa typ dokumentu w tym przypadku będzie to strona internetowa <head> - jest to sekcja nagłówkowa, w której możemy umieścić tytuł strony, znaczniki meta oraz opisać różnego rodzaju skrypty <title> - ten znacznik określa tytuł strony <body> - jest to znacznik określający tzw. Ciało dokumentu, czyli tą część, która będzie wyświetlana w przeglądarce <bgcolor> - określa kolor tła dokumentu, który w razie braku tła w postaci pliku graficznego, znajdzie się pod tekstem, itp. Dopuszczalne wartości to w formie tekstowej, np. "red" lub w formie liczbowej, np. "#1177FF", gdzie dwie pierwsze liczby (hex) to zawartość koloru czerwonego w tle, dwie następne - zielonego, i dwie ostatnie niebieskiego. Przykłady: <body bgcolor="yellow"> lub <body bgcolor="#aa8844">. Odmianą tego znacznika jest komenda <text color>. Określa ona kolor tekstu dokumentu. Przy wyborze koloru tekstu, należy kierować się kolorem tła, aby nie były takie same lub zbliżone. Należy pamiętać, że tekst na stronie ma być czytelny i nie powinien razić czytelnika. Możliwe

wartości, jakie może przyjąć atrybut TEXT, są takie same jak w przypadku atrybutu BGCOLOR. Przykłady: Przykłady: <body text="black"> lub <body text="#001122"> <h1> do <h6> - są to znaczniki opisujące nagłówek naszej strony, czyli inaczej widoczny w oknie przeglądarki tytuł strony <p> - oznacza paragraf inaczej jest to informacja dla przeglądarki, że dalsza część znaków znajdująca się za tym znacznikiem ma być wyświetlana jako tekst. Rozwinięciem tego znacznika może być forma <p align= left > oznaczająca wyrównanie tekstu do lewego marginesu. Zamiast left możemy wstawić right (do prawej), center (tekst wycentrowany) lub justify (wyjustowanie). <a href> jest to znacznik służący do wstawiania linków do innych stron, np. znacznik <a href="http://www.google.pl"> będzie kierował nas na stronę wyszukiwarki internetowej Google. Jeśli chcielibyśmy stworzyć odnośnik do innej naszej podstrony wówczas składnia znacznika będzie wyglądała następująco: <a href="kontakt.html"> lub <a href="galerie.html/spotkanie.html">. Tekst, na który można kliknąć musi zawierać się pomiędzy <a> i </a> np. <a href="http://www.google.pl">google</a>. Znacznik ten też wykorzystywany jest do tworzenia linków do wysyłania poczty elektronicznej. Jego składnia będzie wówczas wyglądała w następujący sposób: <a href="mailto:mój_adres@jakis_serwer.pl">napisz do mnie</a> <table> - definiuje tabelę. Tabelę dzielimy na wiersze <tr> a te z kolei na komórki <td>. Przykładowy schemat tabeli wyglądać będzie następująco: <table> <tr> <td>komórka 1</td> <td>komórka 2</td> </tr> <tr> <td>komórka 3</td> <td>komórka 4</td> </tr> </table> co da nam: Komórka 1 Komórka 2 Komórka 3 Komórka 4 <ol> I <ul> - są to znaczniki stosowania listy. Znacznik listy punktowanej to <ul> a numerowanej to <ol>. Wewnątrz stawiamy znaczniki <li> Przykład: <ol> <li>pozycja pierwsza</li> <li>pozycja druga</li> <li>pozycja trzecia</li> </ol> <hr> - wyświetla linię poziomą <br> - powoduje tzw. przełamanie wiersza, czyli inaczej jedną wolną linię.

<img src> jest to znacznik służący do wstawiania obrazka do dokumentu html. Przykład składni: <img src="file:///f:/scenariusze%20lekcji/amd.gif">. Jeżeli chcesz zobaczyć źródło strony to wystarczy wybrać w oknie przeglądarki polecenie Widok, następnie wybrać komendę Źródło strony. Przykładowa strona w języku html wyglądać będzie następująco: <html> <head> <title>moja pierwsza strona</title> </head> <body bgcolor="#ffffff" text="#000000"> <h1>to moja pierwsza strona</h1> <hr> <p>to jest moja pierwsza strona. Ma ona pokazać w jaki sposób można utworzyć prostą stronę internetową.<br> Oto przykładowa tabelka</p> <table width="99%" border="1"> <tr> <td> Komórka 1 </td> <td>komórka 2</td> <td> Komórka 3</td> </tr> <tr> <td>komórka 4</td> <td>komórka 5</td> <td>komórka 6</td> </tr> </table> <p>tutaj mamy przykład wstawienia listy:</p> <ol> <li> Pozycja pierwsza</li> <li>pozycja druga</li> <li>pozycja trzecia</li> </ol>

<p>w tym miejscu wstawimy obrazek</p> <p><img src="file:///f /Obrazki/amd.gif" ><br> A tutaj wstawimy odnośnik do wyszukiwarki Google. Aby do niej przejść kliknij <a href="http://www.google.pl">tutaj</a><br> Jeżeli chcesz wysłać do mnie list e-mail kliknij na napis NAPISZ DO MNIE<a href="mailto:moj_login@jakis_serwer.pl">napisz do mnie</a><br> </p> </body> </html> Tak napisana strona będzie wyglądała w następujący sposób: załącznik 2. Zadanie nr 1. Utwórz stronę internetową o twoich zainteresowaniach. Strona powinna składającej się z ze strony głównej index.html oraz podstrony zdjecia.html. Na każdej ze stron muszą znajdować się linki pozwalające na swobodną nawigację pomiędzy stronami twojej witryny. Muszą też one zawierać

minimum 2 obrazki a na stronie index.html musi być umieszczony link do twojego maila, lista uporządkowana, linia pozioma oraz tabelka i link do wyszukiwarki Google. Zadanie nr 2. Korzystając z pakietu Microsoft Office lub dowolnego wizualnego edytora HTML rozbuduj swoją witrynę o kolejne podstrony: kontakt.html oraz omnie.html. Zawartość stron musi być zgodna z ich nazwami, czyli Kontakt zawiera numer telefonu, adres e-mail do ciebie i, o ile to możliwe, twoje zdjęcie. Na stronie O mnie muszą znaleźć się krótkie informacje o tobie. ii. b) Notatki dla nauczyciela Okno programu NVU Przykładowa strona internetowa utworzona prze ucznia powinna wyglądać w następujący sposób:

Plik index.html Plik zdjecia.html

Plik omnie.html Plik kontakt.html g. 7. Czas trwania lekcji 2 x 45 minut

h. 8. Uwagi do scenariusza Ważne jest zapewnienie dostępu do Internetu celem ściągnięcia przez młodzież plików graficznych związanych tematycznie z tematyką ich stron. W przeciwnym wypadku należy narzucić temat wykorzystując w tym celu zasoby lokalne komputera, na którym pracuje uczeń. Ewentualnie można zadać określony temat jednocześnie kopiując uczniom pliki graficzne z płyty cd.