Ze strony internetowej www.kaze.zut.edu.pl 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 <b> Tekst strony pogrubiony </b> <i> Tekst strony pochylony </i> - tekst w jednym wierszu <b> <i> Tekst strony pogrubiony i pochylony </i> </b> <b> Tekst strony pogrubiony </b> <i> Tekst strony pochylony </i> - tekst w różnych wierszach <b> <i> Tekst strony pogrubiony i pochylony </i> </b> <p> To jest pierwszy akapit </p> <p> To jest drugi akapit </p> - tekst różnych akapitach <p> To jest trzeci akapit </p> 1
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=#000033 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 <p style="font-size:20px; "> Tekst - czcionka 20 <p> - ustawienie dla akapitu wielkości czcionki na 20 pixeli <p style="font-family:courier; "> Tekst - czcionka Courier <p> - ustawienie dla akapitu rodzaju czcionki <p style="color:black; "> Tekst napisany kolorem czarnym <p> - ustawienie koloru tekstu tego akapitu <p style="font-size:25px; font-family:arial; color:black; background-color:white; "> Tekst-czcionka 25 Arial czarne na białym <p> <p style="padding: 30px; "> Tekst napisany 30 od lewej <p> - ustawienie odległości tekstu od lewej na 60 pikseli (akapit wewnętrzny) <p style="text-align: center; "> Tekst wycentrowany <p> - ustawienie odległości tekstu od lewej <p style="text-align: center; border:2px solid red; "> Tekst wycentrowany w ramce </p> - 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
<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="http://www.html.net/">oto odnośnik do HTML.net</a> - odnośnik do strony internetowej poprzez adres <a href="http://www.ecdl.com/ "><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 e-mail do nikogo w ZUT</a> - odnośnik do adresu e-mail 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
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 E-mail 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 e-mail. 4
--------- Mapa kolorów www: http://pl.html.net/tutorials/html/lesson7.php ----------------------------- 5