Moduł IV Internet Tworzenie stron www

Wielkość: px

Rozpocząć pokaz od strony:

Download "Moduł IV Internet Tworzenie stron www"

Adam Czajkowski
8 lat temu
Przeglądów:

1 Ze strony internetowej z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy tworzenia stron internetowych z wykorzystaniem poleceń języka HTML. 1. W Notatniku (akcesoria systemu Windows) wpisz poniższą strukturę strony www: <html> tytuł strony treść strony - początek struktury - początek nagłówka - początek tytułu strony - koniec tytułu strony - koniec nagłówka - początek zawartości strony - koniec zawartości strony - koniec struktury Plik zapisz pod nazwą Index1.html do własnego folderu. 2. Uzupełnij treść nagłówka o tytuł tworzonej strony oraz dodatkowe informacje o stronie www dla wyszukiwarki i dane autora strony, wg poniższego wzoru: Strona XX 1 - w miejsce XX wpisz swoje inicjały <meta name="description" content="strona próbna 1"> <meta name="keywords" content="podstawy html, informatyka"> <meta name="author" content="imię i nazwisko"> - wpisz swoje imię i nazwisko - informacje dla wyszukiwarki 3. Otwórz ponownie plik Index1.html w Notatniku. Uzupełnij plik o dalszą zawartość treści strony www poprzez ustawienia koloru tła strony i koloru czcionki oraz tekstów w różnych formatach, wg poniższego wzoru: <body bgcolor="blue" text="white"> - określenie koloru tła strony i koloru tekstu Tekst strony pogrubiony Tekst strony pochylony - tekst w jednym wierszu Tekst strony pogrubiony i pochylony Tekst strony pogrubiony Tekst strony pochylony - tekst w różnych wierszach Tekst strony pogrubiony i pochylony To jest pierwszy akapit To jest drugi akapit - tekst różnych akapitach To jest trzeci akapit 1

Podstawy tworzenia stron internetowych z wykorzystaniem poleceń języka HTML. 1.

2 4. Otwórz ponownie plik Index1.html w Notatniku. Uzupełnij plik o zawartość treści strony www wg poniższego wzoru wykorzystując nowe elementy takie jak style nagłówkowe oraz zmiany formatów tekstu: - zmiana koloru tła i tekstu <body bgcolor=# text=#ffff00> - tło granatowe, tekst żółty... <h1>nagłówek poziomu 1 </h1> - tekst napisany stylem nagłówkowym poziomu 1 <h2>pod-nagłówek poziomu 2 </h2> - tekst napisany stylem nagłówkowym poziomu 2 <h5>pod-nagłówek poziomu 5 </h5> - tekst napisany stylem nagłówkowym poziomu 5 Tekst - czcionka 20 - ustawienie dla akapitu wielkości czcionki na 20 pixeli Tekst - czcionka Courier - ustawienie dla akapitu rodzaju czcionki Tekst napisany kolorem czarnym - ustawienie koloru tekstu tego akapitu Tekst-czcionka 25 Arial czarne na białym Tekst napisany 30 od lewej - ustawienie odległości tekstu od lewej na 60 pikseli (akapit wewnętrzny) Tekst wycentrowany - ustawienie odległości tekstu od lewej Tekst wycentrowany w ramce - tekst wycentrowany w ramce 2 piksele czerwonej linia ciągła 5. Utwórz w Notatniku nową stronę www i zapisz ją do pliku o nazwie Index2.html do własnego folderu. Na nowej stronie umieść nowe elementy takie jak: listy numerowane i listy wypunktowane obrazek na stronie, obrazek jako tło oraz odsyłacze, wg poniższego wzoru: <html> Strona XX 2 - w miejsce XX wpisz swoje inicjały <meta name="description" content="strona próbna 2"> <meta name="keywords" content="podstawy html, informatyka"> <meta name="author" content="imię i nazwisko"> - wpisz swoje imię i nazwisko <ul> - lista wypunktowanych elementów - początek <li> To jest element 1 listy </li> - elementy listy <li> To jest element 2 listy </li> <li> To jest element 3 listy </li> </ul> - lista wypunktowanych elementów - koniec <ol> - lista elementów numerowanych - początek <li> To jest pierwszy element listy </li> - elementy listy <li> To jest drugi element listy </li> 2

text=#ffff00> - tło granatowe, tekst żółty.

3 <li> To jest trzeci element listy </li> </ol> - lista elementów numerowanych - koniec 6. Otwórz ponownie plik Index2.html w Notatniku. Uzupełnij plik o zawartość treści strony www wg poniższego wzoru wykorzystując nowe elementy takie jak obrazek na stronie, obrazek jako tło oraz odsyłacze, wg poniższego wzoru:... <img src="znak_drogowy.png" /> - wstawienie obrazka z folderu, w którym jest plik html strony <img src="znak_drogowy.png" width="100" height="100" /> - wstawienie obrazka o zadanych rozmiarach <img src="znak_drogowy.png" style="position:absolute;top:100px;right:100px;"/> - wstawienie obrazka z podaniem położenia na ekranie ilość pikseli od prawej i od góry <body style="background-image: url('morze.jpg');"> - wstawienie obrazka jako tło strony <a href=" odnośnik do HTML.net</a> - odnośnik do strony internetowej poprzez adres <a href=" "><img src="logo_ecdl.gif" title="oto odnośnik do ECDL" /> </a> - odnośnik do strony internetowej poprzez adres przy użyciu obrazka i z tekstem komentarza <a href="index1.html">kliknij tutaj aby przejść do strony Index1</a> - odnośnik do strony internetowej poprzez nazwę pliku <a href="mailto:nobody@zut.edu.pl">wyślij do nikogo w ZUT</a> - odnośnik do adresu ZADANIE 2 Wykorzystując poznane podstawy języka HTML utwórz stronę internetową o nazwie Strona główna, zapisaną do pliku o nazwie Strona1.html i zawierającą następujące elementy: 1. Tytuł strony: Strona główna 2. Ustawienie koloru tła 3. W prawym górnym rogu obrazek z pliku logobj.png o rozmiarach 200x200 pikseli; z tekstem komentarza: "Logo Budowa jachtów" 4. Pusty wiersz 5. Wyświetlony tekst: BUDOWA JACHTÓW - napisany czcionką Arial; rozmiar 35 pikseli, pogrubiony, wycentrowany 6. Pusty wiersz 7. Wyświetlony tekst: Technologia informacyjna - napisany stylem nagłówkowym h1; wycentrowany; w ramce podwójnej grubości 3 piksele w kolorze purpurowym (purple) 8. Pusty wiersz 3

.. <img src="znak_drogowy.png" /> - wstawienie obrazka z folderu, w którym jest plik html strony <img src="znak_drogowy.

4 9. Wyświetlony tekst: Zakres przedmiotu - napisany czcionką famtasy; rozmiar 20 pikseli; w kolorze żółtym (yellow) 10. Wyświetlony poniższy tekst jako lista wypunktowana: Podstawy techniki informatycznych i komunikacyjnych Użytkowanie komputerów Przetwarzanie tekstów Arkusze kalkulacyjne Bazy danych Grafika menadżerska i prezentacyjna Tworzenie stron internetowych 11. Wyświetlony tekst: Logo Budowa Jachtów - napisany stylem nagłówkowym h2; podkreślony; wyrównany do prawej 12. Dwa puste wiersze 13. Odnośnik do strony z pliku Strona2.html, wyświetlany tekst KONTAKT stylem nagłówkowym h3 ZADANIE 3 Wykorzystując poznane podstawy języka HTML utwórz stronę internetową o nazwie Kontakt, zapisaną do pliku o nazwie Strona2.html i zawierającą następujące elementy: 1. Tytuł strony: Kontakt 2. Ustawienie koloru tła 3. W lewym górnym rogu napis KONTAKT, a w kolejnych wierszach: Imię i nazwisko Adres Telefon 4. W połowie strony linia oddzielająca 5. Napis "Ważne linki": (format tekstu wg własnego pomysłu) 6. Jako lista numerowana ustaw odnośniki do następujących stron: Strona ZUT Strona WTM Ulubiona strona format tekstu wg własnego pomysłu 7. Poniżej linia oddzielająca i odnośnik do strony Strona główna zapisanej do pliku Strona1.html 8. Poniżej linia oddzielająca i odnośnik do własnego adresu . 4

5 Mapa kolorów www:

Podobne dokumenty

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze