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ą