Tytuł

Podtytuł

LINKI

link do otwarcia w nowej karcie link learningapps
< a href="https://learningapps.org/" target="_blank" rel="noopener noreferrer">link learningapps< /a>
link zwykły link learningapps
< a href="https://learningapps.org/">link learningapps< /a>

FORMATOWANIE TEKSTU

LISTA

< ul class="punktatory" >
< li>Point one< /li>
< li>Point two< /li>
< /ul >

efekt:

Point one
Point two

Jak wycentrować ramkę Content - dodać Margin do opisu w css:

.content {
flex: 1;
min-width: 0;
max-width: 900px;
margin: 0 auto;
padding: 50px 50px;
box-sizing: border-box;
text-align: justify;
}

WCIĘCIE TEKSTU

wcięcie akapitu

< p class="akapit">
To jest akapit... < /p>

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

wcięcie całego bloku

< div class="wciecie">
To jest tekst.
Druga linia.
Trzecia linia.
< /div>

To jest tekst.
Druga linia.
Trzecia linia.

KOLORY

< span class="orange">orange< /span> - w tekście ciągłym
orange - w tekście ciągłym

< p class="orange">orange - p to element blokowy, zaczyna nową linijkę< /p>

orange - p to element blokowy, zaczyna nową linijkę

LISTA KLAS (wpisywać bez kropki):

KOLORY .orange { color: #C7631E; }
.green { color: #086E3E; }
.grey { color: #9CA194; }
.pink { color: #C94989; }
.red { color: #9C2D2D; }
.yellow { color: #E0BC16; }
.purple { color: #633578; }
.blue { color: #2D518A; }

MNIEJSZE SZARE
.small
.smallgrey
.smallgreyit
.podpisright bądź .podpiscenter

SYMBOLE

→ ← ↓ ↑

WSTAWIANIE OBRAZÓW

< img src="nazwa pliku" class="img-border img-center" alt="TEKST ALTERNATYWNY" >

RAMKI

TIP

< div class="tip">
< p>Tip:< /p>
< p>Waszaj. Waszaj. Waszaj. waszaj.< /p>
< /div>

Tip:

Waszaj. Waszaj. Waszaj. waszaj.

UWAGA

< div class="uwaga">
< p>Uwaga!< /p>
< p>Waszaj. Waszaj. Waszaj. waszaj.< /p>
< /div>

Uwaga!

Waszaj. Waszaj. Waszaj. waszaj.

DYGRESJA

< details class="dygresja"> ALBO class="rozwijane" (bez ramek)
< summary>Digression: NAGŁÓWEK DYGRESJI ...< /summary>
< p>
tekst dygresji
< /p>

Digression: NAGŁÓWEK DYGRESJI ...

tekst dygresji

Pamiętać o wpisaniu # w samym menu!

< div class="menu"> < b>Jump to:< /b>< br>
< a href="#TYTUŁ ROZDZIAŁU">Tenses< /a> · < a href="#TYTUŁ ROZDZIAŁU 2">Aspect< /a> · < a href="#TYTUŁ ROZDZIAŁU 3">Past< /a> · < a href="#TYTUŁ ROZDZIAŁU 4">Future< /a> < /div>
Co dodać w opisie nagłówka:
< h2 id="TYTUŁ ROZDZIAŁU"> Tytuł rozdziału < /h2>

TABELKI

niesformatowna domyślna tabela

< table>
< tr>
< td>Column 1< /td>
< td>Column 2< /td>
< /tr>
< tr>
< td>Example< /td>
< td>Example< /td>
< /tr>
< /table>

Column 1	Column 2
Example	Example

nowa tabela (tabelastandard):

< table class="tabelastandard"> - na początku
< th> - nagłówek, podświetlony na szaro < td> - normalne rzędy

kolumna1	kolumna2	kolumna3
kolumna1	kolumna2	kolumna3

nowa tabela wyśrodkowana (tabelamiddle):

< table class="tabelamiddle" >

żeby nie było nagłówka - opisać jako td zamiast th

kolumna1	kolumna2	kolumna3
kolumna1	kolumna2	kolumna3

JAK WYRÓWNAĆ KOLUMNY TABELI

< table>
< colgroup>
< col width="50%">
< col width="50%">
< /colgroup>

< tr>
< th>Kolumna 1
< th>Kolumna 2
< /tr>

JAK ZMIENIĆ TŁO I KOLOR WYBRANEJ KOMÓRKI TABELI

< td style="background-color: #FFD6BA; color: #C7631E;">
tekst
< /td>

JAK ZMIENIĆ SZEROKOŚĆ WYBRANEJ KOMÓRKI(?)

< tr>
< th colspan="2"> albo: < td colspan="2">
tekst
< /th> albo: < td colspan="2">

kolumna1	kolumna2	kolumna3
kolumna1 i 2		kolumna3
kolumna1	kolumna2	kolumna3

JAK WSTAWIĆ DWA LEARNINGAPPS w jednej linii

w html:

< div class="apps-row">
< iframe src="LINK1">< /iframe>
< iframe src="LINK2">< /iframe>
< /div>

w css wsrawić:

.apps-row {
display: flex;
gap: 20px;
flex-wrap: wrap; /* ważne na mobile */
}

.apps-row iframe {
flex: 1;
min-width: 300px;
}

ewentualnie dodać:

.apps-row iframe {
width: 50%;
}