: Home / HTML / CSS / kurs HTML / Listy

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/16-listy.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Listy
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:38

Listy są dosyć często spotykanym, elementem w życiu codziennym - lista przebojów, zakupów, transferowa.
Jest to jakaś struktura, w której prezentuje się dane. Widaomo, że są one ze soą jakoś powiązane. Listę łatwo odczytać (sprawdzanie obecności), jest czytelna (wszelkie wyniki egzaminów są publikowane na listach).

Jak więc stworzyć listę na stronie www?

Służy do tego zestaw znaczników:

<ul>

    <li>Pierwsza pozycja na liście</li>

    <li>Druga pozycja na liście</li>

</ul>


Całą listę obiejmujemy między znaczniki ul (istnieje też znacznik ol dla list numerowanych. Jednak nie będę się nimi tu zajmował). Każda pozycja na liście występuje między znacznikami li.

Gdzie na naszej stronie możemy użyć listy? Nadal nie mamy menu. Zróbmy je:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Moja pierwsza strona</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>


<body>

    <h1>Witam na mojej pierwszej stronie</h1>

    <ul>

        <li><a href="/index.htm" title="Przejdź do strony głównej">home</a></li>

        <li><a href="/kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>

    </ul>

    <p>Tu umieść jakiś krótki wstęp.</p>

    <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="/kontakt.htm">kontaktu</a>.</p>

</body>

</html>


Póki co wygląda to jakoś dziwnie i niezgrabnie. Póki co uczysz się tworzenia struktury dokumentu. Wygląd pozostawiamy sobie na deser :). Ale i nim się zajmiemy.

Zadanie dla ciebie wstaw taką samą listę menu na stronę kontaktu. Podpowiedź: po prostu skopiuj kod i wklej go w odpowiednie miejsce.

Zapraszam dalej.
 

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież