Connect with us

Cześć, czego szukasz?

Internet Maker

Wypunktować tekst w HTML-u

Co zrobić, by w tekście wypunktować jakieś informacje? Możemy napisać:
– 1 kg mąki
– szklana cukru

ale nie zawsze to dobrze wygląda.

W niektórych przeglądarkach internetowych jest problem z takim wyświetlaniem listy, by napis zawsze zaczynał się dokładnie w tym samym miejscu po znaku myślnika. Skorzystanie z czcionki o stałej szerokości znaku ({html}{/html}) na ogół wygląda nieestetycznie. W HTML-u dostępne są specjalne znaczniki służące do tworzenia wypunktowanych, numerowanych, definicji oraz zagnieżdżonych list.

Listy wypunktowane

Najczęściej używane są listy wypunktowane. Przed podaniem treści, która ma znajdować się w liście, należy poinformować przeglądarkę, jakiego typu listę chcemy utworzyć. W przypadku list wypunktowanych służy do tego tag {html}

    {/html}...{html}

{/html}. Poszczególne elementy listy musimy umieścić w tagach {html}

  • {/html}. Bardzo ważne jest poprawne zamknięcie każdego z tagów:

    Podzespoły komputera:


    • procesor,

    • pamięć operacyjna,

    • ...
    • myszka.

    Listy numerowane

    Listy numerowane tworzymy podobnie do list wypunktowanych, z tą różnicą, że tag {html}

      {/html} zastępujemy tagiem {html}

        {/html}. Informujemy w ten sposób przeglądarkę internetową, że nie chcemy, aby poszczególnym elementom listy zostały przyporządkowane kolejne cyfry. Same elementy listy umieszczamy tak jak poprzednio w tagach {html}

      1. {/html}:

        Uruchomienie strony w przeglądarce:


        1. uruchom przeglądarkę internetową,

        2. w pasku adresu wpisz http://www.mi.com.pl,
        3. Wciśnij Enter.

        Tagi {html}

      2. {/html} nie mogą występować samodzielnie. Możemy je umieszczać jedynie wewnątrz tagów {html}
          {/html} (listy wypunktowane) lub {html}

            {/html} (listy numerowane).

            Listy definicji

            Listy tego typu rzadko kojarzą się z listami, gdyż nie widać tu wyraźnie wypunktowania. Wypunktowaniem w tym rodzaju listy ma być nazwa pojęcia, dla którego dalej podajemy definicję wyjaśniania. Lista ta zawiera się w tagu {html}

            {/html}, a jej elementy składają się z dwóch części. Pierwsza umieszczona w tagu {html}

            {/html} jest nazwą pojęcia, druga, zawarta w tagu {html}

            {/html}, jest definicją.:

            Procesor
            układ cyfrowy zdolny do wykonywania operacji cyfrowych zgodnie z zadanymi mu instrukcjami

            Dysk twardy

            rodzaj pamięci masowej, wykorzystujący nośniki magnetyczne do przechowywania danych.

            Zagnieżdżanie list

            Listy w HTML-u możemy swobodnie zagnieżdżać, wystarczy wewnątrz jednej z nich umieścić drugą:

            1. lista numerowana 1
            2. lista numerowana 2
            3. lista numerowana 3
              • lista wypunktowana 1
              • lista wypunktowana 2
              • lista wypunktowana 3
            4. lista numerowana 4

            Można zagnieżdżać również listy tego samego rodzaju, co w połączeniu ze stylami staje się bardzo przydatne.

            Zaawansowane modyfikowanie zachowania się list

            Standardowe zachowanie się list jest w dużej mierze zależne od przeglądarki. Na przykład nie możemy być pewni, czy elementy na liście wypunktowanej zostaną wyświetlone jako pokolorowane kółka, czy może kwadraciki. Jednak wygląd listy można z góry narzucić oraz w dużym stopniu modyfikować. Aby to osiągnąć, należy posłużyć się stylami.

            Style umieścimy w atrybucie style tagu - {html}{/html}. W odniesieniu do jednego tagu można zastosować wiele stylów jednocześnie, oddzielając je od siebie średnikiem (;). Parametry przekazywane do danego stylu umieszcza po dwukropku (:):

            {html}{/html}

            na przykład:

            {html}

              {/html}

              Można podać kilka parametrów, oddzielając je od siebie przecinkami:

              {html}{/html}

              Do modyfikowania list służą trzy style: list-style-position, list-style-type oraz list-style-image:

              1) list-style-position (rys. 1) pozwala na określenie miejsca położenia znaku wypunktowania w elementach listy. Standardowo znak ten znajduje się poza blokiem treści elementu, możemy być jednak umieszczony na równi z nim.

              Styl ten przyjmuje dwa parametry: inside oraz outside. Inside ustawia znacznik na równi z treścią elementu, outside - poza nią.

              2) list-style-type (rys. 2) pozwala na modyfikację wyglądu znaku wypunktowania elementów. Przyjmuje on jeden z następujących parametrów:

              • disc - użycie jako znaku wypunktowania dysku (wypełnionego koła),
              • circle - użycie jako znaku wypunktowania koła (pustego),
              • square - użycie jako znaku wypunktowania kwadratu (pustego lub wypełnionego - zależnie od przeglądarki),
              • decimal - użycie jako znaków wypunktowania kolejnych liczb całkowitych (1, 2, 3, 4 ...),
              • upper-alpha - użycie jako znaków wypunktowania kolejnych dużych liter alfabetu (A, B, C, D ...),
              • lower-alpha - użycie jako znaków wypunktowania kolejnych małych liter alfabetu (a, b, c, d ...),
              • upper-roman - użycie jako znaków wypunktowania dużych cyfr rzymskich (I, II, III, IV, V ...),
              • lower-roman - użycie jako znaków wypunktowania małych cyfr rzymskich (i, ii, iii, iv, v ...),
              • none - nie używanie znaku wypunktowania.

              Za pomocą tego stylu można z listy wypunktowanej zrobić listę numerowaną:

              {html}

                {/html}

                a z listy numerowanej listę wypunktowaną:

                {html}

                  {/html}

                  3) list-style-image (rys. 3) pozwala na ustalenie własnego znaku wypunktowanian. Wystarczy w tym celu przygotować mały obrazek, który ma pełnić rolę tego znaku.

                  Styl ten przyjmuje jeden parametr będący adresem do pliku z obrazkiem mającym pełnić funkcję nowego znaku wypunktowania. Adres ten podaje się pomiędzy url( a ):

                  {html}

                    {/html}
                    - obrazek znajduje się w tym samym miejscu co plik HTML zawierający listę,

                    {html}

                      {/html}
                      - pobieramy obrazek z katalogu obrazki,

                      {html}

                        {/html}
                        - obrazek pobierany jest z innego serwera.

                        Za pomocą stylów możemy wpływać na wygląd całych list (definiując style w tagu ul lub ol) bądź poszczególnych elementów (definiując styl dla konkretnych elementów li).

                        ezHTML

                        Edytor znaczników HTML pomaga w tworzeniu list, jednak gdy korzystamy z jego udogodnień, musimy nieco poprawić kod przez niego wygenerowany.

                        ezHTML nie zamyka znaczników {html}

                      • {/html} w przypadku korzystania z paska narzędzi (za to automatycznie zamyka ten znacznik, gdy wpiszemy go z klawiatury) oraz w przypadku zastosowania automatycznego wstawiania tego znacznika (wpisuje go wielkimi literami, co, jak pamiętamy, jest niepoprawnym zachowaniem w przypadku XHTML-a).

                        Jak wykorzystać udogodnienia ezHTML-a przedstawia rys. 4.

                        Nieco więcej na temat stylów

                        Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) pozwalają w dużym stopniu wpływać na wygląd strony oraz na zachowanie się poszczególnych znaczników. Style można osadzić w kodzie HTML na dwa sposoby:

                        • umieszczając je w parametrze {stala}style=\"\"{/stala} tagu, który chcemy zmodyfikować,
                        • umieszczając je w jednym pliku, oznaczając na jakie tagi mają mieć wpływ.

                        Drugi ze sposobów jest bardzo złożony. Zainteresowanych odsyłam do kursów, które można znaleźć w internecie (np. http://www.kurshtml.boo.pl/index.php), bądź do książek.

  • Może cię też zainteresować