<ul> <ul> </ul> </ul>

Wielkość: px

Rozpocząć pokaz od strony:

Download "<ul> <ul> </ul> </ul>"

Edward Szymczak
5 lat temu
Przeglądów:

1 Tworzenie list z CSS <ul> <li> namiot <li> materac <li> latarka <li> mapa <ul> <li> koc <li> namiot <li> materac <li> latarka <li> mapa <li> koc

2 Lista (wykaz) umożliwia tworzenia uszeregowanych grup informacji w postaci : punktów uporządkowanych (lista numerowana) nieuporządkowanych (lista punktowa, nienumerowana). Ten element konstrukcyjny, bardzo często stosuje się przy projektowaniu stron internetowych ( np. do budowy menu) Do wykonania listy nienumerowanej wykorzystujemy dwa rodzaje znaczników: Pierwszy znacznik <ul> tworzy zewnętrzną ramę listy. Za pojedynczy element listy odpowiada znacznik <li> W liście może wystąpić dowolna liczba elementów. Domyślnym punktatorem jest wypełnione koło. Możemy zmienić grafikę porzez wprowadzenie dla znacznika ul atrybutu type, który przyjmuje jeden z trzech wariantów: disc (domyślny) wypełnione koło, o circle okrąg, square wypełniony kwadrat. Przykładowa lista nienumerowana

3 Lista numerowana (uporządkowana) jest używana do wykonywania wykazów o ustalonej kolejności. Znacznik <ol> </ol> odpowiada za tworzenie ram listy, a znacznik <li> za pojedynczy element listy. Domyślnym numerowaniem dla listy uporządkowanej są cyfry arabskie. Można zmienić rodzaj znaczników wykazu porzez wprowadzenie dla znacznika ol atrybutu type, który przyjmuje jeden z pięciu wariantów: 1 (domyślny) numeracja według liczb arabskich, I według liczb rzymskich, i według małych liczb rzymskich zapisanych małymi literami, a według małych liter, A według wielkich liter. Przykładowa lista numerowana

4 Znacznik ol może przyjmować jeszcze jeden atrybut, jakim jest start. Atrybut ten umożliwia rozpoczęcie numerowania w zależności od podanej wartości n: <ol> start= n > </ol> Zmianę numeracji można również wprowadzić dla dowolnego elementu listy. Umożliwia to atrybut value przypisany do znacznika Ii. Wartość n ustawiona dla atrybutu value spowoduje zmianę kolejności numerowania również dla kolejnych elementów listy: <li> value= n > Nowy atrybut nie działa we wszystkich przeglądarkach <ol reversed> - tworzenie listy z odwróconą numeracją <li>coffee <li>tea <li>milk </ol>

5 Typ stylu list-style-type Style list podzielono na typy w zależności od rodzaju stosowanych wyróżników. Podstawowe wartości list-style-type: disc - koło; circle - okrąg; square - kwadrat; decimal - liczby arabskie; lower-alpha - małe litery; upper-alpha - duże litery; upper-roman - duże liczby rzymskie; lower-roman - małe liczby rzymskie; none - brak wyróżnika (markera). Możemy definiować tak całą listę, jak i poszczególne jej punkty.

6 Przykład: Ustawianie różnych typów stylów listy. HTML ze stylami <body> <p> Lista wypunktowana: </p> <ul style="list-style-type:disc;"> <li>list-style-type:disc <li>list-style-type:disc <li style="list-style-type:circle;">list-style-type:circle <li style="list-style-type:square;">list-style-type:square <li style="list-style-type:none;">list-style-type:none <p> Lista numerowana: </p> <ol style="list-style-type:decimal;"> <li>list-style-type:decimal <li>list-style-type:decimal <li style="list-style-type:lower-alpha;">list-style-type:lower-alpha <li style="list-style-type:upper-alpha;">list-style-type:upper-alpha <li style="list-style-type:lower-roman;">list-style-type:lower-roman <li style="list-style-type:upper-roman;">list-style-type:upper-roman <li style="list-style-type:none;">list-style-type:none </ol> </body>

7 Pozycja markera względem zawijanego tekstu list-style-position Podstawowe wartości list-style-type: outside - wyróżniki na zewnątrz listy (domyślnie); inside - wyróżniki wewnątrz listy. Selektorami mogą być znaczniki dotyczące list ul, ol oraz li - pojedyncze punkty listy. <body style="font-family:arial,sans-serif;font-size:16px;line-height:30px;"> <ul> <li> W tym punkcie mamy domyślny sposób sytuowania markera <i>list-style-position:outside</i> - znajduje się on na zewnątrz bloku tekstu, tworzonego przez zawijane wiersze. Ten tekst jest długi, ponieważ musimy pokazać zawijanie wierszy. <li style="list-style-position:inside;"> W tym punkcie mamy sposób sytuowania markera <i>list-style-position:inside</i> - znajduje się on wewnątrz bloku tekstu, tworzonego przez zawijane wiersze. Ten tekst jest długi, ponieważ musimy pokazać zawijanie wierszy. </body>

8 Wyróżnik obrazkowy list-style-image Selektorami mogą być znaczniki dotyczące list ul, ol oraz li - pojedyncze punkty listy. Przykład: Wyróżnik obrazkowy <body style="font-family:arial,sans-serif;font-size:16px;line-height:30px;"> <ul style="list-style-image:url(punkt.png)"> <li> Możemy również podać <i>list-style-type</i>, wtedy w przypadku braku dostępu do obrazka będzie wzięty ten typ; <li> To jest drugi punkt tej listy. </body>

9 Przykład: <span>...</span> - w połączeniu ze stylami CSS, umożliwia formatowanie tekstu objętego tym znacznikiem. <ul style="list-style-type: disc;"> <li><span style="color: #003366; font-size: 18pt;">Województwo Podkarpackie</span> <ol style="list-style-type: upper-alpha;"> <li><span style="color: #0000ff; font-size: 18pt;">powiat przemyski</span> <ol style="list-style-type: lower-alpha;"> <li><span style="color: #008080; font-size: 24px;">Gmina Przemyśl</span> <ul style="list-style-type: square;"> <li><span style="color: #00ffff; font-size: 24px;">Żurawica</span> <li><span style="color: #008080; font-size: 24px;">Gmina Jasło</span> </ol> <li><span style="color: #0000ff; font-size: 18pt;">powiat rzeszowski</span> </ol>

10 Przypomnienie: osadzanie plików wideo Do publikacji plików wideo służą formaty :mp4, ogv lub webm. Znacznik ma następującą konstrukcję: <video src="ścieżka do pliku wideo"> Twoja przeglądarka nie obsługuje znacznika video </video> Powyższy kod nie zawsze jest poprawnie wyświetlany przez przeglądarki dlatego zaleca się przekonwertować plik na różne formaty i zastosować konstrukcję: <video controls="controls"> <source src="film.mp4" type="video/mp4" /> <source src="film.ogv" type="video/ogg" /> <source src="film.webm" type="video/webm" /> Twoja przeglądarka nie obsługuje znacznika video </video>

Atrybuty znacznika: width="" oraz height="" - rozmiary okienka w którym będzie pokazywany film, możemy pominąć te atrybuty zdając się na automatyczne działanie przeglądarki controls="controls" -

11 Atrybuty znacznika: width="" oraz height="" - rozmiary okienka w którym będzie pokazywany film, możemy pominąć te atrybuty zdając się na automatyczne działanie przeglądarki controls="controls" - powoduje wyświetlenie paska postępu, przycisku odtwarzania oraz zmiany głośności, autoplay="autoplay" preload="preload loop="loop - automatyczne uruchomienie odtwarzania po wejściu na stronę, - odtwarzanie rozpocznie się dopiero po pobraniu całego pliku na komputer odwiedzającego stronę, dzięki temu można uniknąć problemów związanych z płynnością odtwarzania - odtwarzanie w pętli - po zakończeniu ponowy start i tak "w kółko" Aby ustalić wielkość wyświetlanego obrazu można wzorować się na poniższym kodzie: <!DOCTYPE HTML> <html> <body> <video width="300" height="200" controls autoplay> <source src="/html5/foo.ogg" type="video/ogg" /> <source src="/html5/foo.mp4" type="video/mp4" /> Your browser does not support the video element. </video> </body> </html>

niezrównoważona siła, to porusza się ono ruchem zmiennym z przyspieszeniem

12 ZADANIE: Wykonaj poniższą stronę internetową( do wypisania definicji użyj znacznika dfn): Treść drugiej zasady dynamiki Newtona: Jeżeli na ciało działa niezrównoważona siła, to porusza się ono ruchem zmiennym z przyspieszeniem wprost proporcjonalnym do działającej siły, a odwrotnie proporcjonalnym do masy ciała.

13 Bibliografia: Witryny internetowe - Małgorzata Łokińska 3.

Podobne dokumenty

Znaczniki języka HTML

Znaczniki języka HTML www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline