Skocz do zawartości
KrainaMc.pl

ƃoןq ʎʍoı̣zpǝqɐꓶ

  • wpisów
    9
  • komentarzy
    54
  • wyświetleń
    269

Listy numerowane i punktowane + zagnieżdzanie list


_blackswan

117 wyświetleń

Witam Was ponownie. Tym razem powrócimy do podstaw HTML.Tym razem zajmiemy się dość przydatnymi rzeczami, jeśli ktoś udostępnia jakieś listy, lub punkty na stronie, dla przykładu może tworzyć regulamin serwisu. Bądźmy szczerzy, listy numerowane i punktowane to nic innego jak opcje takie jak w Wordzie, czy tutaj na forum.

 

Zdjęcie dla przykładu:

image.png.e125835448abbbf3df73f042c5862cdd.png image.png.7ab7817bbf1be939ed95d93e1af539c5.png

Pierwsze zdjęcie to opcja z forum. Drugie - opcja z MS Word. 

 

 

LISTY NUMEROWANE - nie mam pojęcia jak Wam to dokładnie wyjaśnić z definicji. Po prostu pokażę przykład:

Spoiler

1. Rozdział 1

  1.1. Jeden

                1.1.1. Paragraf pierwszy

                1.1.2. Paragraf drugi

  1.2. Dwa

2. Rozdział 2

  2.1.Trzy

                2.1.1. Paragraf 1

                2.1.2. Paragraf 2

  2.2. Cztery

3. Rozdział 3

 

LISTY PUNKTOWANE

Spoiler

Liczba pojedyncza:

  • Ja
  • Ty
  • On
  • Ona
  • Ono

Liczba Mnoga:

  • My
  • Wy
  • Oni
  • One
     

 

No i przeróżne kombinacje.

 

W HTML’u za pomocą niniejszych znaczników mamy możliwość utworzenia takiej listy.

 

Dla listy numerowanej:

<ol></ol> - Rozpoczęcie listy numerowanej

<li></li> - Punkty

Przykład:

Spoiler

image.png.f60dac2a757802d6042132ff34c939d5.png

Jakby ktoś pytał, zielony tekst - oznacza komentarz. Może on pomóc posegregować sekcje strony. Jest on widoczny tylko w pliku, w którym go zastosowaliśmy. Na stronie go nie znajdziemy.

.

Listę numerowaną można modyfikować za pomocą atrybutów:

Spoiler

value – zmiana kolejności elementów listy.

np.

Spoiler

<ol value="n">

<li>Punkt pierwszy</li>

<li>Punkt drugi</li>

<li>Punkt trzeci</li>

</ol>

Pod "n" dajemy jakąś liczbę, od której ma się rozpocząć numerowanie.

start – zmiana punktu listy, np.: 2,4,6,8

np. 

Spoiler

<ol start="n">

<li>Punkt pierwszy</li>

<li>Punkt drugi</li>

<li>Punkt trzeci</li>

</ol>

Pod "n" dajemy jakąś liczbę, od której ma się rozpocząć numerowanie.

type - typ/rodzaj punktora.

Jakie są rodzaje?

Spoiler

1 – liczby arabskie, no takie jak używamy do tej pory. Warto wiedzieć, że jest to opcja automatyczna.

np. 1., 2., 3., 4., …

I – Duże liczby rzymskie.

np. I., II., III., IV., …

i – Małe liczby rzymskie.

np. i., ii., iii., iv., …

A – Duże litery alfabetu.

np. A., B., C., D., …

a – małe litery alfabetu.

np. a., b., c., d., …

 

 

Dla listy punktowanej:

<ul></ul> - Rozpoczęcie listy punktowanej

<li></li> - Punkty

Przykład:

Spoiler

image.png.4f724eb6d4cb2e6d794b1ab976a1f3fb.png

 

 

Listę punktowaną można modyfikować za pomocą atrybutu:

 

Spoiler

 

type - typ/rodzaj punktora.

Jakie mogą być rodzaje?

Spoiler

square – kwadrat

cirkle – okrąg (pusty w środku)

disc – opcja domyślna. Jest nią zapełnione koło. 

Przykład:

image.png.acceb9d6f47fbd51ed92260bfc3b7365.png

 

 

 

LISTY ZAGNIEŻDŻONE - Czyli to takie listy, które mają dużo podpunktów, poustawianych w różnych miejscach, tak np. jak przedstawiłam to na początku wpisu (patrz: listy numerowane).

 

Możemy taką listę podzielić na trzy rodzaje:

  • Punktowana
  1. Numerowana
  • Mieszana – połączenie obu powyższych



Pokażę Wam przykład listy punktowanej zagnieżdżonej. Numerowana może wyglądać podobnie, tylko zamiast <ul> podstawimy sobie <ol>.

Spoiler

image.png.0b068c1fe94ddd56d94805b0487ef8aa.png

Uwaga! Może się gdzieś znaleźć literówka. Robiłam ten wpis w nocy i wklejałam ss-y do Worda, więc nie bić!
 

Przykład listy mieszanej:

Spoiler

image.png.94dcd70ed6f76fce09de78762f91d9c5.png

 

ZADANIE nieobowiązkowe xD Stwórz listę, która będzie wyglądała w następujący sposób:

image.png.ac1534fe72756a7b161bddbb012d3f91.png

Tytuł „Labedziowy blog” jest w rozmiarze 6 z czcionką Impact, wykonany za pomocą <font>...</font>.

2 komentarze


Rekomendowane komentarze

_imvelv

Napisano (edytowane)

generalnie to trochę nic nie rozumiem pomimo że to są jakieś listy

a i ta spacja przed kropka boli w oczy xDD

Edytowane przez _imvelv
Odnośnik do komentarza
16 godzin temu, _imvelv napisał:

a i ta spacja przed kropka boli w oczy xDD

Zwykle przypadkowe kliknięcie spacji. Poprawię 😇

.

.

Ważne!

We wpisie zapomniałam dopisać, że możemy zmieniać kolor punktora za pomocą CSS - taka ciekawostka póki co dla Was.  Jak będę robić robić wpisy o CSS to wspomnę na ten temat i wyjaśnię co nieco.

Edytowane przez _blackswan
Odnośnik do komentarza
Gość
Dodaj komentarz...

×   Wklejono zawartość z formatowaniem.   Usuń formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

  • Inne wpisy

    • Przez PLkubiacyPL w Kostkomania Kubiacego :3 2
      Witajcie! W końcu zgarnąłęm blogera i jestem w stanie kolejne osoby wciągać do świata kostek. Więc nie przedłużając zabieramy się do roboty!

      Na początek TROCHĘ teorii. Uwaga mogą zdarzyć się powtórzenia z podania!  A więc:
      Kostka Rubika ma 43 252 003 274 489 856 000 kombinacji czyli nie możliwym jest zapamiętanie każdej kombinacji i ułożenie jej.
      Istnieją zaś znane z matematyki algorytmy (i od razu informuje, że nie musisz wiedzieć ile to 4839x334+23456).
      Algorytmy pozwalają ułożyć to cudo w 12 sekund, więc warto się ich uczyć
      (algorytmy na 12 sekund są dość zaawansowane więc na początek polecam metode LBL lub Roux, ta druga bardziej skomplikowana)
      Algorytmy (wiem, że się powtarzam XD) są opisane notacją, oto zdjęcie

      źródło: Google Grafika
      Taki mały TIP ode mnie, polecam trzymać kostkę ścianką F (z ang. Front) do przodu. 
      Dodatkowo przypomnę o narożnikach i krawędziach... wszystko macie na fotce :3

      źródło: Google Grafika
       Lecimy z poradnikiem!

      Na początek mamy pomieszaną kostkę (zdjęcia kostki są wykonane przeze mnie).

      Wygląda to tak. Etapem pierwszym będzie stokrotka. 
      Wykonujemy go intuicyjnie więc nie mogę wam pomóc. 
      Tu macie fotke jak to powinno wyglądać

      Kolejnym etapem jest sprowadzenie naszej ,,Stokrotki" do poprawnego krzyża 
      obracamy górną ściankę U i szukamy, aż (w tym przypadku) biało-niebieska krawędź
      nie połączy się z niebieskim centrem (środkiem).  Robimy tak z każdą ścianką. Po ułożeniu tego kostka powinna wyglądać tak

      WAŻNE!!! Kolory na waszej kostce mogą się różnić od moich a zdjęcia są schematyczne (dla ułatwienia).
      Teraz przechodzimy do kolejnego poziomu w którym ułożymy pierwszą warstwę.
      Tu także wejdzie pierwszy i najłatwiejszy algorytm- R U R' U'
      teraz obracamy kostkę białym kolorem do dołu i szukamy narożników. Jeśli biało-niebiesko-pomarańczowy narożnik
      będzie się znajdować pomiędzy niebieskim a pomarańczowym centrem (a biały będzie na dole) wykonujemy algorytm R U R' U' 
      PÓKI SIĘ NIE WSTAWI!  W zależności od położenia narożnika mogą to być 3 razy, 2 albo i 1. Po prostu powtarzamy ten algorytm i tak z każdym narożnikiem.
      kostka powinna wyglądać tak (dla ułatwienia widoku obróciłem ją białym do góry, wy miejcie go na dole)

      Czas na drugą warstwę! tu czeka nas kolejny algorytm, tym razem dłuższy.
      Obracamy pierwszą warstwę do dołu, i szukamy krawędzi. 
      Jeśli chcemy wstawić krawędź pomiędzy niebieski i czerwony center to szukamy na ściance U tej krawędzi
      i ustawiamy nad centrem przed nami tak jak poniżej.
        <---- po tej stronie jest pomarańczowy center xd 
      i teraz wykonujemy ruch U i wykonujemy następujący algorytm.
      R U R' U'  y  L' U' L U 
      Może się zdarzyć sytuacja, że krawędź będzie obrócona czyli pomarańczowy będzie na dole a zielony na górze.
      Wówczas wstawiamy ją tak jak poprzednio, i uwaga bo tu nie będzie pasować. wykonujemy jeszcze raz ten algorytm wstawiając inną losową krawędź i na koniec
      wstawiamy ją poprawnie. Myślę, że niezbyt skomplikowane. Po ułożeniu kostka powinna wyglądać tak

      Etap Kolejny!!!1!
      Krzyż u góry
      Mamy tu 3 możliwości. (zwracamy uwagę tylko  na krawędzie, narożniki nie mają znaczenia)
      1- Kropka
      2- L
      3-pasek
      4- gotowy krzyż (ale nie licze tego jako możliwość)
      jeśli mamy kropkę ot sytuacja  najdłuższa. Musimy wykonać algorytm poniżej:
      F R U R' U' F'
      Wtedy dostaniemy sytuację nr. 2 - L
      wygląda ona tak
       sorka za mój błąd, ale trzymamy pomarańczowym do przodu kc<3
      wygląda to jak odbite w lustrze L , i dlatego tak sie to nazywa. powtarzamy algorytm. dostajemy kombinacje 3!
      nie muszę chyba mówić dlaczego się tak nazywa... 

      stawiamy go poziomo (czyli znowu pomorańczowym do nas) i powtarzamy algorytm. Otrzymaliśmy taki wzór
       

      teraz obracamy ścianką U aż się nie połączy z resztą kostki.
      jeśli łączą się tylko 2 krawędzie obok siebie to:
      ustawiamy je tak aby jedna była z tyłu kostki a druga po naszej prawej stronie i wykonujemy algorytm
      R U R' U R U U R'
      Dlaczego nie zamieniłem U U na U2? żeby się nikomu nie myliło, w większych kościach będę stosował bardziej zaawansowany zapis.
      Jeśli mamy 2 poprawne krawędzie na przeciwko siebie to:
      ustawiamy je jak ,,pasek" z poprzedniego etapu i wykonujemy algorytm o którym wspomniałem powyżej.
      Wtedy utworzy nam się kombinacja nr1 i dalej już wiadomo co robić...
      kostka powinna wyglądać tak:

      a z drugiej strony tak:

      ostatnim etapem gdzie wprowadzę nowy algorytm jest etap wprowadzenia krawędzi na swoje miejsca.
      wybieramy jedną krawędź która jest na swoim miejscu UWAGA! nie musi być dobrze obrócona!
      jeśli takowej nie ma to wykonujemy algorytm
      U R U' L' U R' U' L
      po wykonaniu tego algorytmu powinna już się pasująca krawędź znaleźć. Wtedy ustawiamy ją z przodu po naszej prawej i wykonujemy ten algorytm raz bądź dwa 
      w zależności po ilu się ułoży. kostka powinna wyglądać tak:

      UWAGA! nie na każdej kostce będą obrócone tylko 2 krawędzie! bywa, że są 3 lub 4 albo kostka już jest ułożona!
      ostatnim etapem który ułoży kostkę jest obrócenie tych narożników.
      obracamy kostkę do góry nogami tak aby nasza źle ustawiona krawędź była po prawej stronie z przodu. 
      wykonujemy algorytm do póki nam się krawędź dobrze nie obróci. Wykonując go 6 razy kostka wróci do pierwotnego stanu 
      (czyli jeśli obydwie krawędzie obrócimy 3 razami to kostka nie będzie pomieszana a krawędzie się ułożą  )
      R U R' U'
      UWAGAAA!!!!1!1!!!!
      OBRACAMY TYLKO DOLNĄ ŚCIANKĘ BO POMIESZACIE KOSTKĘ!!!!!!
      ustawiamy ją w miejsce gdzie była krawędź którą przed chwilą obracaliśmy i wykonujemy algorytm powyżej.
      i teraz kostka jest ułożona! jeśli ci coś nie poszło zgłoś się do mnie w komentarzach a na pewno pomogę! (w przypadku dłuższych powikłań przeniesiemy rozmowę na pv)
      Tyle by było z mojej strony, poradnik trochę udoskonaliłem bo ponoć tamten miał za dużo kolorów. W następnym blogu poradnik do kostki 2x2x2 a teraz mówię wam papa! ❤️❤️❤️ 
    • Przez matya w about the languages of the world 3
      cześć!
      a więc dzisiaj przyszedł czas na ten obiecany post na temat tego, co się działo u mnie, kiedy na blogu nie działo się nic. na początek ostrzegam, że nie będzie super ciekawie, przynajmniej wg mnie  
      jeśli chodzi o listopad, to czas spędzałem na grze w „genshin impact” (swoją drogą polecam, ale od ponad 3 tygodni nie grałem). zrobiłem w tym czasie wiele rzeczy, których żałuję, związanych z relacjami, ale nie chcę o tym się rozpisywać. co do lekcji online, to zacząłem się rozleniwiać. pod koniec miesiąca przyszedł czas na black friday  jako że moja kursantka, kasia, wypuściła 3. część kursu, a 2. nie miałem wtedy nawet wykupionej, to skorzystałem z okazji i w ramach prezentu od siebie dla siebie obie nabyłem. ale nie od razu zacząłem je przerabiać - poczekałem z tym do świąt. 
      początek grudnia niczym się nie wyróżniał, zamówiłem sobie nowe książki: „miasto niedźwiedzia” i „my przeciwko wam” fredrika backmana, jest to szwedzka seria. tłumaczyła ją ania kicka, polecam jej ig osobom chcącym uczyć się szwedzkiego. niedługo wyjdzie część 3. wczoraj zakończyłem 1. z nich i mogę rzec - wow!  porusza temat gwałtu i funkcjonowania małych społeczności. w okolicach jakoś 10. grudnia moja babcia zachorowała na covid, wtedy też rozleniwiłem się już zupełnie na lekcjach online. na początku była w domu, potem czuła się coraz gorzej i pojechała do szpitala. pod koniec miesiąca wróciła cała i zdrowa. po kilku dniach mój ojciec zaczął czuć się źle, przez 3 dni czuł się tragicznie, prawdopodobnie miał covid. zaczęło mu się poprawiać, zaczął jednak wychodzić na dwór i znów się pogorszyło. ostatecznie minęło to w okolicach nowego roku. dość późno ubrałem choinkę, chociaż może tylko mi się wydaje. w każdym razie nie czułem za bardzo klimatu świąt...  wieczór przed wigilią, drodzy państwo, co się stało? no ofc zaczęła boleć mnie głowa, mięśnie, nie mogłem się ruszać, kichałem, kaszlałem; tak naprawdę mój stan uległ takiemu pogorszeniu w kilkadziesiąt minut. czułem się jakbym umierał - trochę hiperbolizowałem, ale no...  w samą wigilię nie miałem apetytu, zapachu, do teraz mam z nimi problem. nie zjadłem wiele, rozpakowałem prezenty, obejrzałem samotnie kevina. a co dostałem? ubrania, m. in. przytulną piżamę i urocze skarpety, słodycze, perfum oraz książki „made in sweden. 60 słów, które stworzyły naród” elisabeth åsbrink - świetna, od wczoraj przeczytałem 14 rozdziałów, tytuł mówi, o czym jest i „pozdrawiam i przepraszam” wcześniej wspomnianego już fredrika backmana, na razie nie czytałem, opowiada o 7-letniej elsie, której babcia umiera i pozostawia po sobie listy dla osób, które zraniła, wtedy zaczyna się największa przygoda dziewczynki. jakoś przed sylwestrem rozpocząłem kurs, w samo święto zakończyłem pewną toksyczną relację, ogólnie spędziłem je z rodzicami oglądając polsat. 
      styczeń rozpoczął się przyjazdem bratowej i brata, byli u nas kilka dni, ja w tym czasie zaniedbałem swój szwedzki, jednakże często wychodziłem na śnieg, który nas szalenie zaskoczył, u mnie utrzymuje się do dziś. 9. dnia stycznia moja babcia, ta po covid, obchodziła 80. urodziny, bardzo sympatycznie one minęły  w ostatni dzień ferii byłem na moim pierwszym kuligu w życiu - miałem taki fun, że omg  na początku zeszłego tygodnia zamówiłem sobie „muminki” tove jansson, od dawna marzyłem o nich, a jakoś naszła mnie ochota na zobaczenie ofert z nimi związanych i trafiłem na piękne wydanie, podzielone na 2 tomy, w których mieszczą się wszystkie części tej serii, natomiast oba niestety trzeba kupić osobno, na szczęście jest teraz promocja - warto skorzystać. doszły mi w piątek. nie mogę się doczekać, aż zacznę je czytać! taka ciekawostka: „muminki” były napisane po szwedzku, gdyż ich autorka była szwedofinką. w zeszłym tygodniu zakończyłem również 2. część kursu szwedzkiego i 3. rozpocząłem. ten tydzień zacząłem w bardzo przyjemny sposób, a mianowicie telefon mi się włączyć nie chce. jutro najprawdopodobniej zostanie naprawiony. w laptopie mam za to zepsuty mikrofon, zresztą całe to urządzenie jest warte wyrzucenie na śmietnik, tak że na lekcjach online jestem bardzo quiet  
      no i to chyba wszystko, z tego jakże fascynującego wpisu. napiszcie, czy mam zrobić recenzje książek, które aktualnie czytam i czy macie ochotę na wpis o szwedofinach.  miłego dnia/miłej nocy!
    • Przez ModziQ w · • ● Świat ModziQ'a ● • · 1
      Witam po bardzo długiej przerwie.
      Po kilku miesiącach nareszcie pojawia się wpis na tym blogu. Przerwa była spowodowana głównie nauką - nauczyciele zadają więcej podczas zdalnej nauki (nie wiem czemu 😑), sprawami prywatnymi i wielu, wielu innymi rzeczami.
      Na pierwszy ogień idzie recenzja niedawno dodanego serialu na platformę Netflix pt. Przeznaczenie: Saga Winx (oryginalny tytuł: Fate: The Winx Saga)
      UWAGA! W RECENZJI MOGĄ ZNALEŹĆ SIĘ SPOJLERY!
      Opowiada on o paczce przyjaciółek - wróżek różnych żywiołów, które uczą się w nietypowej szkole w innym wymiarze.

      Serial już na samym początku wzbudził kontrowersje i zaczął zbierać hejt (czego totalnie nie rozumiem) ze względu na kilka aspektów:
      - jedna z aktorek miała nadwagę i nie przypominała jednej z wróżek (były komentarze typu "mogli lepiej dobrać aktorki" czego totalnie nie rozumiem
      - kolejna z aktorek miała ciemny kolor skóry i znowu nie przypominała wróżki (no ale cóż, nikomu nie dogodzisz)
      - niektórzy widzowie mieli pretensje o to, że w serialu nie ma transformacji (ale po premierze zdziwili się heh)
      Nie jest to serial na podstawie bajki a serial inspirowany bajką, czyli w sumie mogli nawet dodać tylko skrzydełka i moce i nic innego xD
      ___________________
      Moja recenzja:
      Serial wyparł na mnie bardzo dobre wrażenie. Miał swój klimat i pomimo ogromnego hejtu aktualnie jest na 1 miejscu w top 10 na netflix. Ja obejrzałem go w 2 dni i szczerze - będę czekał na kolejny sezon ^^. Nie rozumiem tylko jak można oceniać serialu przed jego oficjalną premierą xD
      Podsumując: Polecam serial, oceniam go na 10/10
×
×
  • Dodaj nową pozycję...