Ayo!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia dapibus sapien, sit amet fermentum libero mollis sagittis. Nulla vel lobortis leo, eget porta ipsum. In malesuada est eu quam congue euismod. In eu ultrices dolor, vel venenatis turpis. Curabitur sem mauris, sagittis sit amet consectetur sit amet, fringilla nec elit. Cras quis sem ultrices, egestas nisi quis, facilisis sem. Maecenas tristique sed dui eu maximus.

Vestibulum urna orci, gravida sit amet purus id, eleifend feugiat velit. Sed facilisis nisi hendrerit lectus egestas semper. Sed porttitor imperdiet accumsan. Cras tincidunt mi sit amet accumsan bibendum. Fusce interdum risus sed massa finibus rhoncus. Curabitur tristique dui pellentesque, placerat justo eget, venenatis tortor. Morbi convallis lacinia suscipit. Mauris vitae dui lacinia arcu vulputate viverra sit amet sit amet ipsum. Phasellus laoreet scelerisque augue, vitae tristique nisl lobortis id. Suspendisse lacinia condimentum sapien lobortis viverra. Vivamus eu tincidunt nulla. Morbi accumsan non ipsum et volutpat. In tempus et quam quis faucibus. Nam scelerisque sem tincidunt arcu laoreet malesuada. Nam ligula lacus, viverra vel enim sed, vulputate aliquam mauris. Etiam congue venenatis sapien, et maximus ipsum malesuada sed.

Znaczniki w HTML
Znacznik Funkcja Wymagane atrybuty

Znaczniki liniowe

h1

 Nagłówek 1

h2

 Nagłówek 2

h3

 Nagłówek 3

h4

 Nagłówek 4
h5
 Nagłówek 5
h6
 Nagłówek 6
em Nowe przechylenie
i Stare przechylenie
strong Nowe pogrubienie
b Stare pogrubienie
ins Nowe podkreślenie
u Stare podkreślenie
del Nowe przekreślenie
s Stare przekreślenie
small Mały tekst
large Duży tekst
cite Krótki cytat
q Dłuższy cytat (cudzysłowie dodawane automatycznie)
code Czcionka o stałej szerokości znaków
sup Indeks górny
sub Indeks dolny
span Wtrącenie, samo nic nie zmienia ale pozwana na ręczne dodanie stylu, wstawienie tekstu przez JS itp.
a Link href (URL)
figcaption
 Podpis do tagu figure

br 		Złamanie linii (niezamykany)
hr 		Pozioma linia (niezamykany)
img Obraz src (ścieżka), alt (tekst alternatywny)

Znaczniki blokowe
blockquote
 Cytat blokowy cite (podanie źródła) 
pre
 Czcionka o stałej szerokości znaków + nieigonoranie spacji, znaków końca linii itp.
figure
 Grupowanie elementów w spójną całość
div
 Grupowanie elementów (niekoniecznie w spólną całość)

Znaczniki semantyczne
header Nagłówek strony, atyukułu itp.
nav Element nawigacji
article Artykuł
main Główna zawartość strony
section Sekcja strony
aside Poboczna część strony
footer Stopka

Wykorzystanie znaczników
przechylony tekst oraz pogrubiony tekst pozytywnie wpływają na przejrzystość czytelność tekstu.
Znaczniki pozwalają także na zmniejszenie, powiększenie znaków, dodanie indeksu górnego i dolnego, a nawet zmiana czcionki na monospacową.

Mądre cytaty

Nie wierz ze wszystko, co zobaczysz w internecie - Albert Einstein
Jakiś mądry cytat - ktoś
			kiedys
			      znalazlem
			                    bardzo
			              dziwną
			       stronę
			   uzywającą
			                 tagów
			                          pre.
			                          
			                          
			           trauma.

Pierwszy blok tekstu.

Drugi blok tekstu.

Ala ma kota

Kot ma myszkę

Nagłówek stopnia pierwszego

Ala ma psa który szczeka.
Listy
<ul>
	<li>Lista nieuporządkowana</li>
	<li>Element</li>
	<li>Elelelelement</li>
</ul>

<ol>
	<li>Lista uporządkowana</li>
	<li>Element</li>
	<li>Elelelelement</li>
</ol>

<dl>
	<dt>Słowo definiowane</dt>
	<dd>Opis</dd>
	<dt>Queueueue</dt>
	<dd>Rererere</dd>
</dl>
  1. Lista uporządkowana
  2. Element
  3. Elelelelement
Słowo definiowane
Opis
Queueueue
Rererere
<ul style="list-style-type:x;">
x = disc / circle / square / none - styl "kropkowania"

<ol style="list-style-type:x;" start="y" reversed>
x = 1 / A / a / I / i / decimal-leading-zero - styl numerowania
y = 2 - liczba startowa
reversed - numerowanie odwrócone
Listy zagnieżdżone
  1. Poniedziałek
    • Wstaję o 8 rano
    • Idę umyć zęby
  2. Wtorek
    • Nie idę do szkoły
    • Dziziaj mam lenia
Tabele
<table border="1">
	<caption>Podpis tabeli</caption>
	<tr>
		<th>Hehe</th>
		<th>fajna</th>
		<th colspan="2">tabelelka</th>
	</tr>
	<tr>
		<td>element</td>
		<td>element 2</td>
		<td>element trzy</td>
		<td>element zaskoczenia</td>
	</tr>
	<tr>
		<td>linia druga</td>
		<td colspan="2">z colspanem 2</td>
		<td rowspan="2">element z rowspanem 2</td>
	</tr>
	<tr>
		<td colspan="2">queueueue</td>
		<td>tssi</td>
	</tr>
</table>
Podpis tabeli
Hehe fajna tabelelka
element element 2 element trzy element zaskoczenia
linia druga z colspanem 2 element z rowspanem 2
queueueue tssi

<table border="1">
border="1" - NIEPOPRAWNY ale szybki sposób na czarną ramkę wokół tabeli i jej komórek

<td colspan="x" rowspan="y">
x = 2 - Szerokość komórki w kolumnach
y = 2 - Wysokość komórki w wierszach

Tabelka z CSS
HTML

<table class="tabelelka" border="1">
	<caption>Tabelka z CSSem</caption>
	<tr>
		<th>0</th><th>1</th><th>2</th>
		<th>3</th><th>4</th><th>5</th>
	</tr>
	<tr>
		<th>0</th><td>1</td><td>2</td>
		<td>3</td><td>4</td><td>5</td>
	</tr>
	<tr>
		<th>2</th><td>2</td><th>4</th>
		<th>6</th><th>8</th><td rowspan="3">99</td>
	</tr>
	<tr>
		<th>3</th><td>3</td><th>6</th>
		<td>9</td><th>12</th>
	</tr>
	<tr>
		<th>4</th><td>4</td><th>8</th>
		<th>12</th><th>16</th>
	</tr>
	<tr>
		<th>5</th><td>5</td><td>10</td>
		<td colspan="3">eueueueu</td>
	</tr>
</table>
CSS

.tabelelka * th {
	background-color: gray;
}
			
.tabelelka * {
	text-align: center;
	padding: 5px;
}
			
.tabelelka * td[colspan],
.tabelelka * td[rowspan]
{
	background-color: skyblue;
}
WYNIK

Tabelka z CSSem
012 345
012 345
224 6899
336 912
448 1216
5510 eueueueu

1 2 3
4
5 6 7
8 9
10 11 12
Tabele zagnieżdżone
HTML

<table border="3">
	<tr>
		<td>
			<table border="1">
				<tr>
					<td>1</td>
					<td>2</td>
				</tr>
				<tr>
					<td colspan="2">
						3
					</td>
				</tr>
			</table>
		</td>
		<td>
			haha
		</td>
	</tr>
	<tr>
		<td colspan="2">
			tabelelka
		</td>
	</tr>
</table>

WYNIK

1 2
3
haha
tabelelka
komórka 1-1 komórka 1-3
komórka 2-1 ...
komórka 3-1
komórka 4-1 komórka 4-2 komórka 4-3

komórka 1-1 komórka 1-3
komórka 2-1
lp. Państwo Stolica
1. Niemcy Berlin
2. Bonn do 1989 stolica RFN
3. Luksemburg
komórka 3-1
komórka 4-1 komórka 4-2 komórka 4-3
Crazy tabelka B)
HTML
<table style="border: brown 2px solid">
	<caption style="color: brown; border: brown solid 2px; padding: 5px">
		Moja crazy tabela B)
	</caption>
	<tr>
		<td style="font-size: 10px; border: cornflowerblue solid 4px;">
			AxB
		</td>
		<td colspan="2">
			A
		</td>
		<td style="font-size: 10px; border: cornflowerblue solid 4px;">
			AxB
		</td>
	</tr>
	<tr style="background-color: greenyellow; font-size: 25px;">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
	</tr>
	<tr>
		<td style="border-top: 1px solid black; border-bottom: 1px solid black;">
			11
		</td>
		<td>12</td>
		<td>13</td>
		<td>14</td>
	</tr>
</table>
Zastosowano bordery definowane stylami (tak, jak się powinno)

WYNIK
Moja crazy tabela B)
AxB A AxB
01 02 03 04
11 12 13 14
Obrazy
HTML

<img width="300" src="img/obraz01.jpg" alt="tatry wieczorem">

src="img/obraz01.jpg" - Ścieżka obrazu
alt="tatry wieczorem" - Tekst alternatywny
width="400" - Szerokość w pixelach
height="200" - Wysokość w pixelach

WYNIK

tatry wieczorem

W przypadku, gdyby obrazu nie udało się odnaleźć:
tatry wieczorem
Definiowanie rozmiaru obrazu CSSem
HTML

<img id="obrazek" src="obraz01.jpg" alt="tatry wieczorem">

CSS

#obrazek
{
	width: 20%;
	height: 200px;
}

WYNIK

tatry wieczorem

Margin vs Padding
HTML

<div style="padding: 10px; width: 80px; border: 2px solid blue;">
	<div style="background-color: yellow">haha</div>
</div>
	
<div style="margin: 10px; width: 80px; border: 2px solid blue;">
	<div style="background-color: yellow">haha</div>
</div>
WYNIK

haha
haha
Float 🤮
HTML

<header style="background-color: lightblue;">
	<img src="logo.png" alt="logo">
	<h2>Witamy na serwerze korporacji Eden Log</h2>
	<h3>Co dzisiaj możemy dla Ciebie zrobić?</h3>
	<nav>Nawigacja</nav>
</header>
WYNIK

logo

Witamy na serwerze korporacji Eden Log

Co dzisiaj możemy dla Ciebie zrobić?

HTML Z FLOAT

<header style="background-color: lightblue;">
	<img src="logo.png" alt="logo" style="float: left;">
	<h2>Witamy na serwerze korporacji Eden Log</h2>
	<h3>Co dzisiaj możemy dla Ciebie zrobić?</h3>
	<nav style="clear: both;">Nawigacja</nav>
</header>

WYNIK Z FLOAT

logo

Witamy na serwerze korporacji Eden Log

Co dzisiaj możemy dla Ciebie zrobić?

HTML Z FLOAT I STYLAMI

<header style="background-color: lightblue;">
	<img src="logo.png" alt="logo" style="float: left;">
	<h2 style="text-align: center; padding-top: 70px;">Witamy na serwerze korporacji Eden Log</h2>
	<h3 style="text-align: center;">Co dzisiaj możemy dla Ciebie zrobić?</h3>
	<nav style="clear: both; text-align: center; border-top: solid 1px black; border-bottom: solid 1px black;">Nawigacja</nav>
</header>

WYNIK Z FLOAT I STYLAMI

logo

Witamy na serwerze korporacji Eden Log

Co dzisiaj możemy dla Ciebie zrobić?

Odsyłacze
HTML

<a href="http://tl.krakow.pl/">[strona szkoły]</a><br>
<a href="mailto:masuo@maseuko.pl">[mail]</a>

WYNIK

[strona szkoły]
[mail]
Anchory
  1. Ayo!
  2. Znaczniki w HTML
  3. Wykorzystanie znaczników
  4. Listy
  5. Listy zagnieżdżone
  6. Tabele
  7. Tabelka z CSS
  8. Tabele zagnieżdżone
  9. Crazy tabelka B)
  10. Obrazy
  11. Definiowanie rozmiaru obrazu CSSem
  12. Margin vs Padding
  13. Float
  14. Odsyłacze
  15. Anchory
  16. Formularze
  17. Typy inputów
  18. Button
  19. Pola select
  20. Style CSS
  21. Formatowanie tła
  22. Formatowany tekst
  23. Margin, Border, Padding, Content
  24. Menu
  25. RWD
[ powrót do txt/tssi/ ] [ anchory ]
Formularze
HTML

<form action="action.php" enctype="text/plain" autocomplete="off" method="post">
	<fieldset style="width:300px">
		<legend>Formularz</legend>
		<label for="Text1">Tekst</label>
		<input type="text" id="Text1" name="Text1" placeholder="Wpisz tekst..." size=30><br>
		<br>
		<input type="checkbox" name="Check1" checked> wow<br>
		<input type="checkbox" name="Check2"> lol<br>
		<input type="checkbox" name="Check3" disabled> fajnie<br>
		<br>
		<input type="range" name="Range1" id="Range1" max=20 min=10 step=2>10-20 parzyste<br>
		<br>
		<input type="submit" value="Ok!">
	</fieldset>
</form>
WYNIK

Formularz

wow
lol
fajnie

10-20 parzyste



HTML

<form action="dane.php" method="GET">
	Podaj swoje nazwisko i imię:<br>
	<input type="text" name="username" size="40" required>
	<fieldset style="width:300px">
		<legend><b>Wykształcenie:</b></legend>
		<input type="radio" name="wyksztalcenie" id="wyksz1" value="Podstawowe" checked>
		<label for="wyksz1">Podstawowe</label><br>
		<input type="radio" name="wyksztalcenie" id="wyksz2" value="Srednie">
		<label for="wyksz2">Średnie</label><br>
		<input type="radio" name="wyksztalcenie" id="wyksz3" value="Wyzsze">
		<label for="wyksz3">Wyższe</label><br>
	</fieldset>
	<label for="pracuje">Pracuję:</label>
	<input type="checkbox" name="pracuje" id="pracuje">
	<input type="submit" value="Wyślij">
	<input type="reset" value="Wyczyść">
</form>
WYNIK

Podaj swoje nazwisko i imię:
Wykształcenie:




HTML
<form>
	<label for="hyhy">Lista hyhy:</label>
	<input type="text" list="List1" name="hyhy" id="hyhy"><br>
	<datalist id="List1">
		<option value="Wow"></option>
		<option value="Ale"></option>
		<option value="Wspaniale"></option>
	</datalist>

	<label for="kod">Kod pocztowy:</label>
	<input type="text" name="kod" id="kod" pattern="[0-9]{2}-[0-9]{3}" placeholder="XX-XXX><br>

	<input type="submit">
</form>
list="List1" - Datalist, do którego ma się odwoływać pole
pattern="[0-9]{2}-[0-9]{3}" - Wymagany format wprowadzanego tekstu

WYNIK




Typy inputów
button


checkbox
check1
check2
check3

color


date


datetime-local


email


file


hidden


month


number


password


radio
wszystkie mają takie same names, róznią sie values
radio1
radio2
radio3
accesskey="P" - Skrót klawiszowy Alt+Ctrl(tylko na macu)+wybrany

range


reset


search


submit


text

placeholder="Wpisz tekst" - Tekst wyświetlający się przed wpisaniem tekstu
size=10 - Szerokość pola
maxlength=15 - Max. ilość znaków w polu
autofocus - Od razu po załadowaniu strony zaznacza pole
required - Pole jest wymagane
autocomplete="off" - Autouzupełnianie
disabled - Wyłączony, szary
readonly - Tylko do odczytu
list="List1" - Datalist, do którego ma się odwoływać pole
pattern="[0-9]{2}-[0-9]{3}" - Wymagany format wprowadzanego tekstu

tel


time


url


week


Button
<button> różni się od <input type="button">. Ten pierwszy lepiej poddaje się formatowaniu CSS oraz można w nim umieszczać inne elementy.

HTML

<form>
	<input type="submit" name="bezobr">
	<button type="submit" name="obrazek"><img height=64 src="favicon.png"></button>
</form>
WYNIK


Pola select
HTML

<select multiple>
	<optgroup label="Programming languages">
		<option value="c">C</option>
		<option value="cpp">C++</option>
		<option value="java">Java</option>
	</optgroup>
	<optgroup label="Scripting languages" disabled>
		<option value="js">JavaScript</option>
		<option value="php">PHP</option>
		<option value="sh">Shell</option>
	</optgroup>
</select>
multiple - Wielokrotny wybór
disabled - Sekcja wyłączona
label="Programming languages" - Podpis grupy opcji

WYNIK



Style CSS
Jednostki:
1cm!

100px!

1in!

5vw!

Selektory:
Formatowanie tła
HTML

<div class="najs"></div>
<div class="najs zatrzymaned"></div>

CSS

.najs 
{
	background-color: #ffe; 
	background-image: url('favicon.png'); 
	background-size: 32px; 
	background-repeat: repeat-x; 
	border: black 2px solid; 
	width: 70vw; 
	height: 64px;
}

.zatrzymaned
{
	margin-top: 2px;
	background-repeat: repeat;
	background-attachment: fixed;
}

WYNIK


Formatowany tekst
HTML

<a id="linkszkoly" href="https://tl.krakow.pl">szkoła</a>

CSS

#linkszkoly
{
	text-decoration: none;
	color: orange;
	font-variant: small-caps;
	font-size: 4vw;
}

#linkszkoly:hover
{
	font-weight: bold;
}

WYNIK

szkoła
[tutaj mnie 2 tygodnie nie było w szkole niestety ;c]
Margin, Border, Padding, Content
Każdy element w HTMLu składa się z contentu (zawartości elementu),
paddingu (odstępu między contentem a borderem), bordera (ramki) oraz
marginu, czyli odstępu między borderem a innymi elementami.

Legenda:
margin (30px)
border (5px)
padding (10px)
content

Lorem ipsum.
XD fajnie
Lorem ipsummm.
Margin left
od -30px do 30px;

Menu
Listy uporządkowane i nieuporządkowane mają bardzo duży potencjał do stylowania ich i często są wykorzystywane do tworzenia menu.
Pomocne są w tym szczególnie style display: block; (menu pionowe) i display: inline-block; (menu poziome).
Poniżej przykład menu poziomego :)

HTML

<ul id="menu">
    <li><a href="#menu-star">Start</a></li>
    <li><a href="#menu-aktu">Aktualności</a></li>
    <li><a href="#menu-szko">Szkolenia</a></li>
    <li><a href="#menu-uslu">Usługi</a></li>
</ul>

BEZ CSS

CSS

#menu
{
    list-style-type: none; /* aby nie wyświetlały się kółeczka */
    margin: 0;
    padding: 0; 
}
    
#menu li
{
    display: inline-block; /* przy wartości block, menu byłoby pionowe */
    width: fit-content;
    border: black 2px solid;
}
			    
#menu li a
{
    text-decoration: none;
    color: black;
    display: block; /* te dwie linijki musimy dodać, aby cały   */
    padding: 4px;   /* przycisk był klikalny, a nie tylko tekst */
}
			    
menu li a:hover
{
    background-color: #ddd;
}

WYNIK Z CSS


LEKKA ZMIANA CSS

...

#menu li
{
    display: inline-block block; /* menu pionowe */
    margin: 4px 0; /* odstępy między przyciskami */
    ...
}

...

WYNIK Z CSS


LEKKA ZMIANA CSS

...

#menu li
{
    display: inline-block block; /* menu pionowe */
    width: fit-content 20em; /* stała szer. przycisków */
    margin: 4px 0; /* odstępy między przyciskami */
    text-align: center; /* text na środku */
    ...
}

...

WYNIK Z CSSem

RWD
CSS umożliwia ładowanie różnych styli w zależności od np. szerokości okna. Pozwala to na łatwe tworzenie mobilnych wersji naszych stron:)
W tym przykładzie menu po prawej i tekst po lewej przy wielkości okna mniejszej lub równej 900px zmieni się na menu u góry i tekst na dole. Polecam pobawić się szerokością okna

HTML

<div>
    <div class="rwd rwd-menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
	        <li><a href="#">Menu 4</a></li>
        </ul>
    </div>
    <div class="rwd rwd-content">
        Lorem ipsum dolor sit amet ...
    </div>
</div>

CSS

.rwd
{
    float: left;
    width: 10em;
    height: 200px;
    border: 1px solid black;
    padding: 15px;
}
			    
.rwd-content
{
    width: 30em;
    overflow-y: auto;
}
			    
@media only screen and (max-width:900px)
{
    .rwd
    {
        float: none;
        width: 30em;
    }
			        
    .rwd-menu
    {
	    height: 7em;
    }
}

Style umieszczone w @media only screen and (max-width:900px) będą stosowane tylko wtedy, gdy szerokość okna nie jest większa niż 900px.

WYNIK

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a semper nisi. Aliquam erat volutpat. Quisque ut placerat velit, nec efficitur augue. Morbi efficitur nibh tristique lacus sollicitudin vestibulum. Sed faucibus tincidunt mauris, id ultricies purus consequat vitae. Ut dictum urna quis pharetra iaculis. Etiam tempor risus et lectus porta iaculis. Cras tristique sodales velit et venenatis. Cras luctus facilisis lectus in posuere. Sed ullamcorper massa sed ex iaculis sagittis. Donec venenatis feugiat nulla, non accumsan odio sagittis quis. Curabitur sapien sem, suscipit sed feugiat at, semper tristique velit. Aliquam pellentesque ante et velit consectetur, a mollis mauris semper. Nam gravida efficitur mauris sed condimentum. Donec fermentum pretium dolor, eu egestas tortor elementum ut. Ut ut varius turpis. Etiam vestibulum elit nec eros convallis iaculis. In fringilla felis ut dolor fringilla, non tincidunt erat aliquam. Nullam euismod accumsan bibendum. Etiam nisi lorem, vehicula eget dictum vel, varius et urna. Morbi eget tortor mattis, consequat risus sit amet, sodales leo.