plik index.html
Transkrypt
plik index.html
Dokumenty HTML 1 Ćw.1 – tworzenie podstawowego dokumentu w HTML (plik index.html) 1. Utworzyć folder roboczy HTML do przechowywania dokumentów html i podfolder IMAGE (na pliki graficzne). Utworzyć dokument index.html o postaci widocznej na rysunku 1 (moŜna wykorzystać edytor Ked i utworzyć szablon dokumentu html – Plik/Nowy z szablonu). a) W części body umieścić trzy znaczniki <div> zawierające kolejno: <div> <h2>Element tytułowy strony ... </h2></div> <div > <p>Element zawartości strony ... </p></div> <div> <hr/>Stopka strony ... </div> b) Zawartość strony wstawić jako listę numerowaną z zagnieŜdŜonymi odpowiednio listami wypunktowanymi (nie wstawiać plików graficznych) c) Dodać linki kolejno do stron html.html (jak na rys.2), css.html (rys.3), http://java.sun.com, http://www.php.net, ankieta.html (rys.4). d) Obrazki graficzne Javy i PHP pobrać ze wskazanych wyŜej stron, skopiować je do katalogu HTML/IMAGE i umieścić je tak jak na rys.1 (równieŜ jako linki) Rys.1. Plik index.html 2. Utworzyć pozostałe dokumenty: html.html, css.css i ankieta.html tak jak pokazano na rysunkach 2-4. W tym celu naleŜy wykorzystac kd dokumentu index.html oraz: • w sekcji <head> zmienić tytuł strony w elemencie <title> • w sekcji <body> wymienić element <div> z zawartością strony. Do elementu zawartości dodać obrazek strzałki będący linkiem powrotnym do strony głównej index.html i odpowiednią treść • element tytułowy i stopki pozostawić bez zmian. Dokumenty HTML Rys.2. Dokument html.html . 2 Dokumenty HTML Rys.3. Dokument css.html 3 Rys.4. Dokument ankieta.html Ćw.2. Tabelaryczny układ strony Wykorzystując odpowiednie elementy stron z ćw.1 utworzyć dokument tabela.html zawierający tabelę postaci jak na rys.5. a) Tabela ma mieć szerokość i wysokość okna przeglądarki. b) Pierwsza kolumna (menu) ma mieć 20% szerokości całej tabeli. c) Pierwszy wiersz (tytuł) ma mieć 15% wysokości tabeli a ostatni (stopka) – 10%. d) Dodać stosowne linki do stron jak w ćw.1. Z obrazka W3C dodać link do strony http://www.w3.org TECHNOLOGIE INTERNETOWE • • • • • HTML/XHTML CSS Java PHP Ankieta BP Rys.5. Struktura tabeli Dokumenty HTML 4 Zmodyfikować pliki (z ćw.1): html.html, css.html, ankieta.html tak aby (po kliknięciu na odpowiedni link) ich zawartość ukazywała się w komórce z obrazkiem W3C. Wykorzystać w tym celu taką samą strukturę dokumentu z tabelą – wymienić jedynie zawartość komórki z obrazkiem W3C. Efekt w przeglądarce demonstrują rysunki 6 i 7. Rys.6. Strona podstawowa Rys.7. Strona po odwołaniu do linku z ankietą