Przejdź do zawartości

Szablon:Div

Dodaj linki
Z Wikibooks, biblioteki wolnych podręczników.
 Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Użycie

Szablon znaczników: {{Div}}, oparty na obsłudze tagów: <div>...</div> (jest to element blokowy) - (tagi języka HTML), identyfikatorów: id, styli: style (właściwości i ich zawartości przedstawiający język CSS), klas: class (reguł w kaskadowych arkuszach stylów) i atrybutów (inne niż: id, style i class), elementu HTML. Tekst jest umieszczany wewnątrz tego szablonu pomiędzy znacznikami: <div>...</div>.

Opis parametrów

Wywołanie
{{Div|1=|id=|styl=|klasa=|atrybuty=}}

Szablon {{Div}}, przyjmuje argumenty, którego wartości wraz z odpowiednimi nazwami, oprócz zmiennej 1, w nim, wsadza on do tagu, coś w rodzaju: <tag nazwa="wartość">...</tag>, obsługiwanego przez niego znacznika, przez którego on jest oparty, a oto lista tych zmiennych poniżej.

Parametry
  • 1 - gdy pusty lub nie podany parametr: samozamykający, to zawartość pomiędzy znacznikami - wymagamy,
  • id - unikalny identyfikator znacznika dla jakikolwiek tagu - sugerowany,
  • styl - styl CSS, właściwości i ich wartości, języka CSS - opcjonalny,
  • klasa - klasa kaskadowych arkuszy stylów, języka CSS - opcjonalny,
  • atrybuty - atrybuty znacznika ukrytego pod zmienną tag, inne niż: style, class i id - opcjonalny.

Wikikod, zbudowany za pomocą szablonu znaczników (kombajnu)

Szablon {{Div}} ma kod w zależności od znacznika: {{Znacznik}}, przedstawiający się:

Szablon {{Div}}
{{Znacznik|tag=div|id={{{id|}}}|styl={{{styl|}}}|klasa={{{klasa|}}}|atrybuty={{{atrybuty|}}}|{{{1|}}}}}

Przykłady

Tabelka z przykładami dla szablonu {{Div}}, czyli przy znaczniku: <div>...</div>

Style są w oparciu o kaskadowe arkusze stylów, które są napisane w stylach przykładów: Znacznik/przykłady.css. W poniższych przykładach należy pamiętać o napisaniu: 

<templatestyles src="Szablon:Znacznik/przykłady.css" />

Zatem:

Przykład pierwszy
  {{Div|styl=width:800px;padding:5px;font-size:15px;color:darkslategray;background-color:ivory;border:darkblue 1px solid;
      | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Przykład drugi
  {{Div|styl=width:800px;padding:5px;color:darkslategray;background-color:ivory;border:darkblue 1px solid;|klasa=czcionka
      | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Przykład trzeci
  {{Div|styl=width:800px;padding:5px;color:darkslategray;|klasa=czcionka|id=przykład2
    | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Przykład czwarty
  {{Div|styl=width:800px;padding:5px;|klasa=tło obramowanie|id=przykład1
    | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Przykład piąty
  {{Div|styl=width:800px;padding:5px;|klasa=czcionka kolor tło obramowanie
     | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
Przykład szósty
  {{Div|styl=width:800px;padding:5px;|id=przykład
      | 1 = {{Lorem ipsum}}
  }}
Wynik
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cyfry: 0123456789; polskie znaki diakrytyczne: ąćęłńóśźżĄĆĘŁŃÓŚŹŻ; znaki podobne: l I 1 , O 0 ; przykład transkrypcji IPA: /ɪɡ'zɑːmpəl əv aɪpiː'eɪ tɹɑːn'skɹɪpʃən/. Arabski: العربية; chiński: 这是一些汉字。 Zhè shì yì xiē; cyrylica: Кириллица; grecki: Ελληνικά; khmerski: កខ; litery skandynawskie: ÅÄÆÖØ åäæöø; tajski: ฟหกดึ้.
  • Widzimy, że w sześciu przykładach powyższych różne są przykłady, ale wynik ten sam, ale one obrazują to samo, czyli widzimy, że niezależnie jak rozplanujemy style pomiędzy style style, klasy class i identyfikatory id, wynik zawsze otrzymujemy ten sam.

Błędy

Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.

Parametry szablonu (strukturyzacja Wizualnego Edytora)

Szablon z zawartością w elemencie: <div>...</div>.

Parametry szablonu[Zarządzaj danymi szablonu]

ParametrOpisTypStatus
11

Zawartość elementu.

Ciąg znakówsugerowany
idid

Unikalny identyfikator.

Ciąg znakówsugerowany
stylstyl

Styl CSS - właściwości i ich wartości.

Ciąg znakówopcjonalny
klasaklasa

Reguły do klasy kaskadowych arkuszy stylów CSS.

Ciąg znakówopcjonalny
atrybutyatrybuty

Atrybuty znacznika, inne niż: id, style i class.

Ciąg znakówopcjonalny

Zobacz też

  • Szablony: {{Div start}} (otwierający) i {{Div koniec}} (zamykający) - szablony, w którym tekst również formatowany, np.: względem stylów, jest umieszczany pomiędzy tymi znacznikami, zbudowany w oparciu o znacznik: <div>...</div>, elementu blokowego,
  • {{Znacznik}} - szablon, o który ten szablon, jest zbudowany, w oparciu o znacznik: <div>...</div>, elementu blokowego, gdzie tekst jest umieszczany wewnątrz tego szablonu.
p • d • e • U
Ta tabelka przedstawia wszystkie rodzaje szablonów ramek formułujące kod HTML lub wikikod, lub nimi się posługujące.
 
Szablony oparte o tagi w znacznikach
Szablony generujące kod FlexBox
Szablony znaczników
{{Znacznik}} (kombajn) • {{Znacznik start}} (kombajn otwierający) • {{Znacznik koniec}} (kombajn zamykający) • {{Div}} (oparty o div) • {{Div start}} (oparty o div otwierający) • {{Div koniec}} (oparty o div zamykający) • {{Pre}} • {{PreBody}} • {{PreBody2}} • {{PreLine}} • {{PreLineBody}} • {{Pre start}} • {{Pre koniec}} • {{Code}} • {{Tt}} • {{Sub}} • {{Sup}} • {{Su}} • {{P}} • {{Span}} • {{Bdo}} • {{Small}} • {{Big}} • {{Strong}} • {{Br}} • {{Hr}} • {{Center}}
Szablony kotwice
{{Indeksuj}} • {{Kotwica}} • {{Id}}
Ramki pływające
Opływanie elementów HTML
{{BrClear}} • {{-}} (przekierowanie do {{BrClear}}) • {{Koniec grafiki}} (przekierowanie do {{BrClear}}) • {{SpanClear}} • {{HrClear}} • {{DivClear}}
Ramki ustalone
Ten szablon nawigacyjny pokazuje szablony tworzące kod HTML lub wikikod, jeżeli nie używa do tego języka Lua w Scribunto, albo generujące, jeżeli używa do tego tego języka, bądź szablony posługujące się wikikodem na stronach.


Źródło: „https://pl.wikibooks.org/w/index.php?title=Szablon:Div&oldid=396512”