docLekcja 3: Nawigacja na stronie
download 
Reklamacja Transkrypt
Lekcja 3: Nawigacja na stronie
Lekcja 3: Nawigacja na stronie Listy Aby wypunktować na stronie jakieś elementy musimy użyć list. Konstruujemy je używając do tego celu zawsze dwóch różnych znaczników. Jeden znacznik służy do oznaczenia całej listy (otwarcie następuje na początku - przed pierwszym elementem, a zamknięcie, na końcu - po ostatnim elemencie. Drugi znacznik służy do określenia poszczególnych elementów listy (nie wymaga zamknięcia). • ul - lista nienumerowana • li - element listy • ol - lista numerowana Parametry list: type = określa jak będą numerowane elementy listy (dla nienumerowanych: square, circle, disc; dla numerowanych: 1, A, I) start = określa od od jakiej wartości elementy listy będą numerowane Przykład 12: lista wypunktowana <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <ul> <li> element pierwszy</li> <li> element drugi</li> <li> element trzeci</li> </ul> </body> </html> Otrzymany efekt: Przykład 13: lista numerowana <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol> </body> </html> Otrzymany efekt: Przykład 14: zagnieżdżanie list <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <ul> <li>Punkt pierwszy <ul> <li>Punkt 1.1 <ul> <li>Punkt 1.1.1</li> <li>Punkt 1.1.2</li> </ul> </li> <li>Punkt 1.2</li> </ul> </li> <li>Punkt drugi</li> </ul> </body> </html> Otrzymany efekt: Listy wykorzystamy na naszej stronie do wypunktowania zadań i interesujących odnośników do innych stron lub zadań. Zadanie 7 Wpisz do tabeli z zadania zaliczeniowego nr 2 w komórce ZADANIA przykładowe propozycje zadań dla uczniów, a w komórce LINKI przykładowe linki do ważnych stron. Rozwiązanie powinno wyglądać tak: Odnośniki Odniesienia mogą dotyczyć tej samej strony, strony na tym samym serwerze lub w dowolnym miejscu sieci. Odniesieniem może być dowolny element dokumentu. Do podstrony <a href="ścieżka dostępu">opis</a> Do adresu internetowego <a href="http://adres strony">opis</a> Odsyłacz pocztowy <a href="mailto:adres e-mail">opis</a> Porada: Aby otworzyć odnośnik w nowym oknie należy użyć znacznika target <a target="_blank" href="adres">opis</a> Przykład 15: odnośniki do stron w internecie <html> <head> <meta http-equiv="Content-Type" content="text/html; windows-1250" /> <meta name="Description" content="Tu wpisz opis zawartość strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table cellspacing=0 cellpadding=2 width=100% height=100% border=�1�> <tr height=20px> <td >Logo wysokość 100px</td> <td >Baner</td> </tr> <tr> <td valign=top> Linki<br> <a target="_blank" href="http://www.wp.pl">Wirtualna Polska</a><br> <a target="_blank" href="http://www.men.gov.pl">Ministerstwo Edukacji Narodowej</a><br> <a target="_blank" href="http://www.interia.pl">Interia</a><br> <a target="_blank" href="http://www.kurnik.pl">Kurnik-rozrywka</a><br> <a target="_blank" href="http://www.styl24.pl/twojstyl.php">Twój Styl</a><br> </td> <td rowspan="2" bgcolor=#fff9e5 valign=top width=80% >Panel wyświetlania podstron o szerokości 80%</td> </tr> <tr> <td valign=top> Zadania <ul type="none"> <li> zadanie 1</li> <li> zadanie 2</li> <li> zadanie 3</li> <li> zadanie 4</li> </ul> </td> </tr> <tr> <td colspan="2" height=20px valign=middle align=center >Adres pocztowy autora strony</td> </tr> </table> </body> </html> Zadanie 8 Skopiuj przykład 16 i zobacz działanie odnośników. Zamiast listy zastosowany został znacznik przejścia do nowej linii <br>. Otrzymany efekt: Zadanie zaliczeniowe nr 3 Do strony z tabelą dodaj swój adres pocztowy, linki do interesujących stron oraz sformatuj tekst kolorystycznie według uznania. Otrzymaj podobny efekt.
