Tworzymy listę punktowaną w formacie HTML na żywym przykładzie. Listy w HTML - lista punktowana - lista numerowana - lista definicji - listy zagnieżdżone w HTML
Listy punktowane umożliwiają podział duży tekst na osobne bloki, z których każdy zaczyna się od znacznika – zwykle małą kropką pełni rolę znacznika. Przyciąga to uwagę czytelnika do tekstu i zwiększa jego czytelność.
Z elementem
- Związane są następujące funkcje:
- w miejscu, w którym to następuje
- , przeglądarka automatycznie dodaje podział wiersza;
- lista ma wcięcia na górze i na dole;
- Domyślnie znaczniki są wyświetlane jako wypełnione kółko;
- Każdy element listy jest przesunięty w prawo w stosunku do tekstu głównego.
- dysk - znaczniki w formie wypełnionego koła;
- okrąg - znaczniki w formie otwartego koła;
- kwadrat - kwadratowe znaczniki.
- Sepulki
- Sepulkaria
- Sepulacja
- To nie zadziała, więc będziesz musiał to obejść. Aby to zrobić, ukryj znaczniki listy za pomocą właściwości w stylu listy z wartością none i w tekście przed treścią
- dodaj swoje własny charakter używając pseudoelementu ::before. W przykładzie 2 takim znacznikiem jest trójkąt.
Przykład 2: Użycie::przed
Listy - Sepulki
- Sepulkaria
- Sepulacja
Wynik ten przykład pokazany na ryc. 2. Ponieważ użycie właściwości list-style o wartości none w ogóle nie usuwa znaczników, a jedynie ukrywa je, lista wydaje się przesunięta w prawo. Aby pozbyć się tej funkcji, w przykładzie dodano właściwość wcięcia tekstu o wartości ujemnej. Jego zadaniem jest przesunięcie tekstu o jeden znak w lewo.
Ryż. 2. Dowolne znaczniki na liście
Znak nie musi być w formacie szesnastkowym, można go wstawić bezpośrednio do tekstu. Najważniejsze jest, aby zapisać dokument w kodowaniu UTF-8 i aby edytor to obsługiwał. Same znaki i ich kody można pobrać np. z LibreOffice Writer (ryc. 3).
Ryż. 3. Wybór symbolu w LibreOffice
Lista z ręcznie rysowanymi znacznikami
Style umożliwiają ustawienie dowolnego odpowiedniego obrazu jako znacznika za pomocą właściwości list-style-image. Wartość jest względna lub absolutna ścieżka Do plik graficzny, jak pokazano w przykładzie 3.
Przykład 3: Używanie obrazu jako znacznika
Listy - Sepulki
- Sepulkaria
- Sepulacja
Najlepiej wybrać mały rysunek, aby nie zamienić elementów listy w podpisy. Na ryc. Rysunek 4 pokazuje wynik przykładowego wykorzystania małych obrazków jako znaczników.
Ryż. 4. Rysunek jako marker
Używanie obrazu w stylu listy ma pewne wady:
- wzoru nie można przesuwać w górę ani w dół;
- V różne przeglądarki Położenie obrazu względem tekstu może się różnić.
Tych niedociągnięć można uniknąć, korzystając z właściwości tła zdjęcie w tle. Dla każdego elementu listy
- usuwamy oryginalne markery i ustawiamy obraz tła bez powtórzeń. Aby tekst nie pojawił się na górze obrazka, przesuwamy go w prawo za pomocą dopełnienia w lewo (przykład 4).
Przykład 4: Używanie tła
Ul ( lewy margines: -1em; ) li ( styl listy: brak; tło: url(images/bullet.png) bez powtórzeń 0 2px; dopełnienie po lewej stronie: 20px; )
Położenie tekstu i punktora
Znacznik względem tekstu można umieścić na dwa sposoby: znacznik zostaje przesunięty poza granicę elementów listy lub owinięty wokół tekstu (rys. 5).
wewnątrz poza Ryż. 5. Rozmieszczenie znaczników względem tekstu
Aby kontrolować położenie znaczników, użyj właściwości list-style-position. Ma ono dwa znaczenia: na zewnątrz – punktory umieszczane są na zewnątrz bloku tekstu (jest to wartość domyślna) oraz wewnątrz – punktory są częścią bloku tekstu i są wyświetlane w elemencie listy (przykład 5).
Przykład 5: Zmiana położenia znaczników
Listy - Zanim zaczniesz, sprawdź, czy wyposażenie zawarte w zestawie 3BM jest dołączone.
- W przypadku braku jednego lub więcej urządzenia peryferyjne Należy natychmiast skontaktować się z personelem technicznym VT.
- Po kontroli metody wizualne Ze swojego miejsca pracy możesz ostrożnie włączyć zasilanie 3BM.
Wynik tego przykładu pokazano na ryc. 6.
Listę punktowaną definiuje się poprzez dodanie małego punktora, zwykle w postaci wypełnionego okręgu, przed każdym elementem listy. Sama lista jest tworzona przy użyciu kontenera
- , a każdy element listy zaczyna się od tagu
- jak pokazano niżej.
- Pierwszy punkt
- Drugi punkt
- Trzeci punkt
Lista musi zawierać znacznik zamykający
Chociaż nie jest to wymagane, zawsze zalecamy dodanie go do wyraźnie oddzielonych elementów listy.
- Czeburaszka
- Krokodyl Gena
- Szapoklak
- Szczur Larisa
- Pierwszy
- Drugi
- Trzeci
- Pierwszy
- Drugi
- Trzeci
- Pierwszy
- Drugi
- Trzeci
- zmiana wiary religijnej (opcjonalnie: buddyzm, konfucjanizm, hinduizm). Oferta specjalna- Judaizm i islam razem;
- zmiana wiary w nieomylność ulubionej partii;
- wiara w istnienie kosmitów;
- preferowanie ustroju politycznego jako najlepszego w swoim rodzaju (do wyboru: feudalizm, socjalizm, komunizm, kapitalizm).
- Pierwszy element listy
- Drugi element listy
- Trzecia pozycja na liście
- , a następnie automatycznie stawia przed nim .
- 1 - cyfry arabskie;
- A - wielkie litery;
- a - małe litery łacińskie;
- I - wielkie cyfry rzymskie;
- i - małe cyfry rzymskie.
- (LI - element listy, element listy). Etykietka
- nie wymaga odpowiedniej zawieszki zamykającej, chociaż jej obecność w zasadzie nie jest zabroniona. Przeglądarki zwykle uruchamiają się za każdym razem, gdy wyświetlają dokument. nowy element lista z nowej linii.
Podane informacje są wystarczające do skonstruowania podstawowej listy punktowanej. Podajmy przykład dokumentu HTML wykorzystującego listę punktowaną, której wyświetlanie przez przeglądarkę pokazano na ryc. 2.1.
Przykład listy punktowanej Znaki zodiaku:
- Baran
- Byk
- Bliźnięta
- Panna
- Waga
- Skorpion
- Strzelec
- Koziorożec
- Wodnik
- Ryba
Ryż. 2.1. Wyświetlanie w przeglądarce listy punktowanej
Należy pamiętać, że oprócz elementów listy oznaczonych tagiem
- , mogą występować inne elementy HTML. W powyższym przykładzie jednym z tych elementów jest zwykły tekst, który nie jest pozycją listy, ale pełni funkcję jej tytułu.
Notatka
Niektóre podręczniki dotyczące języka HTML wskazują, że do ustawienia tytułu listy należy użyć znacznika kontenera
(LH - nagłówek listy, nagłówek listy). Ten tag nie jest obecnie rozpoznawany przez żadną popularną przeglądarkę i nie jest częścią specyfikacji HTML. Tym samym jego użycie staje się bezcelowe, choć nie spowoduje żadnych błędów. W tagu
- można określić dwa parametry: COMPACT i TYPE.
- .
Przykładowy wpis:
- .
Notatka
Przeglądarki różnie interpretują specyfikację typu punktora dla pojedynczego elementu listy. Przeglądarka Netscape zmienia wygląd znacznika dla tego i wszystkich kolejnych, aż do momentu napotkania kolejnej redefinicji wyglądu znacznika. Przeglądarka internetowa Explorer zmienia wygląd znacznika tylko dla tego elementu.
Graficzne znaczniki listy
Możesz używać obrazów graficznych jako punktorów list, co jest powszechnie stosowane do tworzenia atrakcyjnych, dobrze zaprojektowanych dokumentów HTML. W rzeczywistości taka możliwość nie jest zapewniona bezpośrednio Język HTML, ale jest realizowany nieco sztucznie. Nie oznacza to, że nie jest to zalecane czy naganne, a jedynie, że nie będą tu stosowane żadne specjalne konstrukcje języka HTML.
Aby zrozumieć ideę, należy zrozumieć mechanizm implementacji list na stronach HTML. Okazuje się, że tag list
- (podobnie jak zresztą tagi list innych typów, omówione poniżej) wykonuje jedno zadanie - informuje przeglądarkę, że wszystkie informacje znajdujące się za tym tagiem powinny zostać wyświetlone przesunięte w prawo (wcięte) o określoną wartość. Tagi
- , wskazując poszczególne elementy list, podaj wynik standardowych znaczników elementów listy.
Jeśli potrzebujemy zbudować listę ze znacznikami graficznymi, możemy w ogóle obejść się bez tagów
- . Wystarczy wstawić to, co chcesz, przed każdym elementem listy obraz graficzny. Jedynym problemem do rozwiązania jest oddzielenie elementów listy od siebie. Możesz w tym celu użyć znaczników akapitu
Lub wymuś przesunięcie wiersza
. Przykład realizacji listy ze znacznikami graficznymi, której wyświetlanie pokazano na rys. 2.2 pokazano poniżej:który zostanie przesłany tylko raz. Rozmiary pliku zawierającego mały obraz, są również wyjątkowo nieznaczne.
Notatka
Metody tworzenia list z punktorami graficznymi zostały omówione kolejno w rozdziale 8.
Lista punktowana.
Lista punktowana - przy każdym elemencie listy znajduje się Nowa linia, natomiast pewne wcięcia są tworzone po lewej stronie, u góry i u dołu. Każdy element listy zaczyna się od znacznika; znacznikiem może być wypełnione kółko (domyślnie używane), kółko lub kwadrat.
Listy numerowane.
Listy numerowane to listy, w których każdy element ma numer seryjny; tworzone są listy numerowane. Domyślnie numeracja odbywa się za pomocą cyfr arabskich.
W programie Word możesz automatycznie tworzyć listy punktowane i numerowane podczas pisania lub szybko dodawać punktory lub numerowanie do istniejących wierszy tekstu.
Wprowadzanie listy punktowanej lub numerowanej
Wpisz znak * (gwiazdka), aby rozpocząć listę punktowaną, lub 1. , aby rozpocząć listę numerowaną, a następnie naciśnij klawisz Spacja lub Tab.
Wprowadź tekst.
Naciśnij ENTER, aby dodać kolejny element listy.
Program Word automatycznie wstawi następny punktor lub numer.
Aby zakończyć wpisywanie listy należy dwukrotnie nacisnąć ENTER. Aby usunąć ostatni znacznik lub numer na liście, naciśnij klawisz BACKSPACE.
Co zrobić, gdy punktory lub numery nie są dodawane automatycznie
Otwórz zakładkę Plik i naciśnij przycisk Opcje.
Naciśnij przycisk Opcje Autokorekty i otwórz zakładkę Automatyczne formatowanie podczas pisania.
W rozdziale Zastosuj podczas pisania Sprawdź pudełka style list punktowanych I style list numerowanych.
Dodaj punktory i numerację do listy
Wybierz elementy, do których chcesz dodać punktory lub numerację.
Na karcie Strona główna w grupie Ustęp Wybierz drużynę Lista punktowana Lub Lista numerowana.
Numeracja
Notatki
Klikając strzałkę obok pól, można znaleźć różne style punktorów i formaty numeracji Markery Lub Numeracja na karcie dom w grupie Ustęp.
Konwersja listy jednopoziomowej na listę wielopoziomową
Aby przekonwertować istniejącą listę na listę wielopoziomową, należy zmienić poziom hierarchii znajdujących się na niej pozycji.
Kliknij dowolny element, który chcesz przenieść na inny poziom.
Na karcie Strona główna w grupie Ustęp kliknij strzałkę obok polecenia Lista punktowana Lub Lista numerowana a następnie wybierz polecenie Zmień poziom listy i ustaw wymagany poziom.
7. Opcje formatowania listy.
Aby poprawić wygląd dokumentu i ułatwić zrozumienie jego znaczenia, Word posiada specjalne narzędzia przeznaczone do pracy z listami. Istnieją dwa główne typy list, których możesz używać:
wykazy z numeracją;
listy z notatkami.
Liczby na liście są automatycznie dostosowywane po dodaniu nowej pozycji. Istnieją opcje sortowania list. Specjalne pole Zastosuj do pozwala zastosować dekorację do bieżącego akapitu lub tylko do fragmentu tekstu, jeśli tekst został zaznaczony.
Aby utworzyć listę, musisz zaznaczyć akapity, z których chcesz utworzyć elementy listy, lub umieścić kursor wejściowy w akapicie, od którego rozpocznie się lista. Następnie uruchom polecenie Lista z menu Format .
W zależności od tego, jakiego rodzaju listy potrzebujesz, aktywuj stronę Oznaczone dla listy z notatkami, Numerowane - dla listy z numeracją lub Wielopoziomowy - dla listy ze złożoną numeracją.
- , wskazując poszczególne elementy list, podaj wynik standardowych znaczników elementów listy.
Parametr COMPACT jest zapisywany bez wartości i służy do wskazania tego przeglądarce ta lista należy przedstawić w zwartej formie. Na przykład czcionka lub odległość między wierszami listy itp. może zostać zmniejszona.
Notatka
Obecnie obecność parametru COMPACT w tagu
- nie wpływa w żaden sposób na wyświetlanie list w wiodących przeglądarkach. Dlatego aplikacja ten parametr jest bez znaczenia, zwłaszcza, że jego użycie nie jest zalecane przez specyfikację HTML 4.0.
Parametr TYPE może przyjmować wartości: krążek, okrąg i kwadrat. Ten parametr służy do wymuszania wyglądu punktorów listy. Dokładny typ znacznika będzie zależał od przeglądarki, z której korzystasz. Typowe opcje wyświetlacze są następujące:
TYPE = dysk - znaczniki wyświetlane są w postaci wypełnionych okręgów; TYP = okrąg - znaczniki wyświetlane są jako otwarte okręgi; TYP = kwadrat - znaczniki wyświetlane są jako wypełnione kwadraty. Przykładowy wpis:
- .
Wartość domyślna to TYP = płyta. W przypadku zagnieżdżonych list punktowanych wartością domyślną jest krążek na pierwszym poziomie, okrąg na drugim poziomie, kwadrat na trzecim poziomie i dalej. To jest dokładnie to, co się robi najnowsze wersje Przeglądarki Netscape i Internet Explorer. Należy pamiętać, że inne przeglądarki mogą wyświetlać znaczniki inaczej. Na przykład w Specyfikacje HTML 4.0 dla typu znacznika wyświetlanego z wartością TYP = kwadrat, oznaczany jest niewypełniony kwadrat (obrys kwadratu).
Parametr TYPE o tych samych wartościach może służyć do określenia typu znaczników dla poszczególnych elementów listy. W tym celu w znaczniku elementu listy można podać parametr TYPE z odpowiednią wartością
- .
Rysunek 1 przedstawia wynik przykładu ilustrującego powyższe cechy listy punktowanej.
Ryż. 1. Widok listy punktowanej
Typ znacznika
Tokeny mogą akceptować jeden z trzy typy: wypełniony okrąg (domyślnie), otwarty okrąg i kwadrat. Aby wybrać typ znacznika, użyj właściwość typu listy lub uniwersalny styl listy (przykład 1). Obowiązują następujące wartości:
Przykład 1: Zmiana wyglądu znacznika
Przykład pokazuje, jak utworzyć listę punktowaną, używając małego kwadratu w jednolitym kolorze jako ikony punktora. Choć liczba wartości jest ograniczona do trzech, nie oznacza to, że do dyspozycji mamy tylko trzy rodzaje znaczników. Istnieje wiele znaków specjalnych, które z powodzeniem mogą pełnić funkcję ikony znacznika. Przykręć je bezpośrednio do
Przykład 11.1 pokazuje kod HTML służący do dodawania listy punktowanej do strony internetowej.
Przykład 11.1. Utwórz listę punktowaną
Wynik tego przykładu pokazano na ryc. 11.1.
Ryż. 11.1. Widok listy punktowanej
Zwróć uwagę na dopełnienie u góry, u dołu i po lewej stronie listy. Takie wcięcia są dodawane automatycznie.
Znaczniki mogą przyjmować jedną z trzech form: okrąg (domyślnie), okrąg i kwadrat. Aby wybrać styl znacznika, użyj atrybutu type znacznika
-
. Prawidłowe wartości podano w tabeli. 11.1
| Typ listy | Kod HTML | Przykład |
|---|---|---|
| Lista ze znacznikami w kształcie okręgu | ||
| Lista z okrągłymi punktorami | ||
| Lista z kwadratowymi punktorami |
Wygląd znaczników może się nieznacznie różnić w różnych przeglądarkach, a także przy zmianie czcionki i rozmiaru tekstu.
Tworzenie listy z punktorami kwadratowymi pokazano w przykładzie 11.2.
Przykład 11.2. Rodzaj znaczników
Zmiana przekonań
Wynik tego przykładu pokazano na ryc. 11.2.
Istnieją dwa typy list w HTML: numerowane i nienumerowane. Ich tworzenie jest prawie takie samo. Nawet tagi różnią się jednym znakiem. Możesz także utworzyć, który może zawierać zarówno numerowane, jak i znaczniki.
Listy te można dowolnie przekształcać. Wszystko zależy od Twojej wyobraźni. Najpierw przyjrzymy się standardowe listy, tak samo jak w Edytor słów, a następnie ulepszymy je i zaprojektujemy nie do poznania.
Lista numerowana HTML
Zwykły numerowany można utworzyć za pomocą następujących tagów:
Proste listy wyglądają tak
Zgodnie ze standardami każdy element listy musi znajdować się wewnątrz otwierającego i zamykającego znacznika li. Ale jeśli nie umieścisz znacznika zamykającego, wynik będzie dokładnie taki sam. Procesor jest dość inteligentny. Podczas konwersji listy analizuje tagi otwierające. Jeśli zobaczy nowy
W ten sposób można tworzyć listy w sposób pokazany poniżej.
Ale z punktu widzenia profesjonalistów jest to błędne.
Listy nienumerowane (lub wypunktowane) tworzy się dokładnie w ten sam sposób, tyle że zamiast znacznika ol zapisuje się ul.
Nie ma tam cyfr ani liter – jedynie różne symbole zwane znacznikami.
Wielopoziomowa lista numerowana HTML
Wielu użytkowników jest zainteresowanych tą możliwością. Dlatego należy zauważyć, że dowolne numerowane Lista HTML można wykonać wielopoziomowo. Dodatkowe poziomy mogą być takie same lub oznaczone.
Aby utworzyć listę pokazaną w powyższym przykładzie, należy napisać co następuje.
Należy pamiętać, że w tym kodzie, w przeciwieństwie do pierwszych przykładów, dodano atrybut type. Dzięki niemu możesz określić rodzaj sortowania zarówno dla list numerowanych, jak i wypunktowanych.
W przypadku numerowanych wskazujemy alfabet lub rodzaj cyfr, a w pozostałych przypadkach rodzaj znacznika.
Jeśli użyjesz specjalnego znacznika HTML, lista numerowana może mieć dowolną postać.
Możesz określić atrybut type z dowolną wartością z tabeli. Lub w klasie stylu css określ typ stylu listy z żądanym typem sortowania.
Tłumaczenie wartości jest dość proste. Wystarczająco podstawowa wiedza po angielsku. Ale nawet jeśli nie możesz przetłumaczyć słów „okrąg”, „kwadrat” itp., Możesz wizualnie zrozumieć, jaki będzie wynik, określając te wartości w atrybucie typu.
W przypadku list numerowanych użyj następujących opcji:
Wartość domyślna to zawsze lista z To znaczy, jeśli nic nie określisz, będzie to samo co type="1".
Ponadto listy numerowane mogą zaczynać się od dowolnej pozycji. Domyślnie wynik zaczyna się od 1. Ale jeśli chcesz, możesz zacząć przynajmniej od stu. Aby to zrobić, musisz podać atrybut start o dowolnej wartości.
Ponadto można stwierdzić, że Odwrotna kolejność. Aby to zrobić, musisz napisać odwrotnie.
Projektowanie list
Listę numerowaną w formacie HTML można zaprojektować tak pięknie, że nie można od razu zgadnąć, co to jest zwykła lista, a nie zdjęcie wykonane w Photoshopie.
Oto przykłady pięknych list.
Jak widać na przykładzie, można to zmienić wygląd numeracja i same elementy.
Możesz utworzyć taką zwykłą listę.
W style CSS musisz określić projekt tagów ol. Należy pamiętać, że w tym przypadku ustawienia zostaną zastosowane do wszystkich list w witrynie, w których używany jest ten plik stylu.
Rozważmy najpierw opcję z okrągłym projektem listy. Wróć do kodu listy. Wskazana jest tam zaokrąglona lista klas. To klasa, przy której trzeba majstrować, żeby stworzyć takie piękno. Możesz nazwać klasę jak chcesz.
Przyjrzyjmy się teraz kwadratowemu projektowi.
Style są dość podobne. Różnica polega na tym, że w pierwszym przypadku element jest zaokrąglany przy użyciu możliwości CSS.
Profesjonalny projektant układu musi przewidzieć i zrozumieć, że nie wszyscy użytkownicy z niego korzystają nowoczesne komputery. Nie każdy ma zainstalowany system Windows 7, 8, 10. Istnieje odsetek użytkowników, którzy nadal korzystają z systemu Windows XP i korzystają ze starszych wersji przeglądarki Internet Explorera.
Z reguły prawie wszystkie nowoczesne ulepszenia elementów konstrukcyjnych nie są przez nie obsługiwane. Użytkownikowi będzie się wydawać, że przy projektowaniu witryny w ogóle nie wykonano żadnej pracy. Że wszystko się oddaliło. Elementy zderzają się ze sobą. Aby tego uniknąć, należy rozważyć wszystkie opcje.
Niektórzy webmasterzy przymykają na nie oko, ponieważ taki jest ich udział nowoczesny rynek jest coraz mniejszy. Ale dla profesjonalisty każdy odwiedzający jest ważny, zwłaszcza jeśli jest to witryna komercyjna.
Stwórz coś odpowiedniego dla każdego lub uwzględnij wszystkie odmiany przeglądarek.
Jednym z typów list zaimplementowanych w HTML jest lista punktowana. W przeciwnym razie listy tego typu nazywane są nienumerowanymi lub nieuporządkowanymi. Nazwisko jest często używane jako formalne tłumaczenie nazwy odpowiedniego znacznika
- , za pomocą których listy tego typu są organizowane w dokumentach HTML (UL - Unordered List, unordered list).
Używana jest lista punktowana Specjalne symbole, zwane punktorami listowymi (często nazywane punktorami, jak to jest w formalnej wymowie Termin angielski kula - kula). O wyglądzie znaczników list decyduje przeglądarka, a podczas tworzenia list zagnieżdżonych przeglądarki automatycznie różnicują wygląd znaczników różne poziomy zagnieżdżanie.
Tagi I
Aby utworzyć listę punktowaną, należy użyć znacznika kontenera, w którym znajdują się wszystkie elementy listy. Tagi listy otwierającej i zamykającej zapewniają podział wiersza przed i po liście, oddzielając w ten sposób listę od głównej treści dokumentu, więc nie ma potrzeby używania tutaj znaczników akapitu
.
Każdy element listy musi zaczynać się od znacznika