Mapa Serwisu

KOD HTML

Kurs HTML

Preludium
Czasy bez świata wirtualnego
Witaj w świecie wirtualnym
Okno świata wirtualnego
Język świata wirtualnego
Progres I
Wprowadzenie do Kursu HTML
Elementy HTML
Zawartość, a treść elementu HTML
Białe znaki
Komentarz języka HTML
Znaki specjalne
Element rodzic
Element dziecko
Element przodek
Element potomek
Element brat
Wymagane elementy dzieci
Podstawowa struktura dokumentu HTML
Progres II
Budowa elementu HTML
Pominięcie tagu elementu HTML
Atrybuty HTML
Atrybut lokalny
Nieidentyczna nazwa, lecz identyczne przeznaczenie atrybutu HTML
Atrybut globalny
Atrybut wymagany
Atrybut wymagany pod warunkiem
Atrybut mający sens
Atrybut logiczny
Atrybut niewymagany
Urządzenie końcowe oraz zasób internetowy
Adres zasobu internetowego
Adres względny zasobu internetowego
Ustalona wartość atrybutu HTML
Dowolna wartość atrybutu HTML
Skrócony zapis wartości atrybutu HTML
Wartość domyślna atrybutu HTML
Dziedziczona wartość atrybutu HTML
Brakujące elementy HTML podstawowej struktury HTML
Progres III
Kategorie HTML
Kategorie główne
Korzeń dokumentu
Metadata dokumentu
Sekcje
Grupowanie zawartości
Semantyka tekstu
Edycja
Zawartość osadzona
Tabela
Formularz
Skrypt
Kategorie ogólne
Zawartość opływająca
Zawartość frazowana
Zawartość namacalna
Zawartość metadata
Zawartość interaktywna
Zawartość wbudowana
Zawartość skryptowa
Korzeń sekcji
Sekcja zawartości
Nagłówek zawartości
Elementy media
Zawartość tekstowa
Warunkowa przynależność do kategorii HTML
Progres IV
Konteksty HTML
Kontekst wewnętrzny
Kontekst wewnętrzny - prosty
Kontekst wewnętrzny - złożony
Kontekst wewnętrzny - brak
Kontekst wewnętrzny - wyjątki
Kontekst wewnętrzny elementu rodzica
Kontekst zewnętrzny
Elementy HTML tworzące kontekst wewnętrzny
Elementy HTML tworzące wewnętrzny kontekst opływający
Elementy HTML tworzące wewnętrzny kontekst frazowany
Elementy HTML tworzące wewnętrzny kontekst metadata
Elementy HTML tworzące wewnętrzny kontekst wbudowany
Elementy HTML tworzące wewnętrzny kontekst skryptowy
Kontekst zewnętrzny - wyjątki
Kontekst logiczny
Progres V
Zarys dokumentu HTML ze względu na sekcje zawartości
Elementy HTML posiadające swoją rangę
Sekcja zawartości nieokreślonego typu
Sekcja zawartości określonego typu
Korzeń sekcji dla sekcji zawartości
Granica sekcji zawartości nieokreślonego typu
Granica sekcji zawartości określonego typu
Granica korzenia sekcji
Tytuł sekcji zawartości nieokreślonego typu
Tytuł sekcji zawartości określonego typu
Tytuł korzenia sekcji
Podział na części sekcji zawartości określonego typu
Podział na części korzenia sekcji
Podsekcja sekcji zawartości nieokreślonego typu
Podsekcja sekcji zawartości określonego typu
Podsekcja korzenia sekcji
Zarys korzenia sekcji
Progres VI
Akapit treści
Nagłówek treści
Sekcja zawartości typu "article"
Sekcja zawartości typu "section"
Sekcja zawartości typu "nav"
Sekcja zawartości typu "aside"
Korzeń sekcji typu "body"
Korzeń sekcji typu "blockquote"
Korzeń sekcji typu "figure"
Korzeń sekcji typu "td"
Korzeń sekcji typu "fieldset"
Obszar nagłówka
Obszar stopki
Dane kontaktowe
Treść główna dokumentu HTML
Ranga wartości treści
Progres VII
Semantyka na poziomie tekstu
Semantyka tekstu - element "a"
Semantyka tekstu - element "dfn"
Semantyka tekstu - element "abbr"
Semantyka tekstu - element "small"
Semantyka tekstu - element "cite"
Semantyka tekstu - element "q"
Semantyka tekstu - element "data"
Semantyka tekstu - element "time"
Semantyka tekstu - element "code"
Semantyka tekstu - element "var"
Semantyka tekstu - element "samp"
Semantyka tekstu - element "kbd"
Semantyka tekstu - element "sub"
Semantyka tekstu - element "sup"
Semantyka tekstu - element "i"
Semantyka tekstu - element "s"
Semantyka tekstu - element "u"
Semantyka tekstu - element "em"
Semantyka tekstu - element "strong"
Semantyka tekstu - element "mark"
Semantyka tekstu - element "b"
Semantyka tekstu - element "bdi"
Semantyka tekstu - element "bdo"
Semantyka tekstu - element "span"
Semantyka tekstu - element "br"
Semantyka tekstu - element "wbr"
Progres VIII
Budowa oraz występowanie akapitu treści
Treść w postaci obrazka
Treść w postaci mapy klikalnych obszarów
Obszar na mapie klikalnych obszarów
Obszar w kształcie prostokąta
Obszar w kształcie koła
Obszar w kształcie wielokąta
Obszar w kształcie całego obrazka
Obszar martwy
Treść pochodząca z innej technologii
Zagnieżdżony kontekst przeglądarki internetowej
Treść reprezentowana przez element "object"
Atrybut "typemustmatch" elementu "object"
Zdolność "fallback"
Progres IX
Treść w postaci zasobu multimedialnego
Element media - atrybut "controls"
Element media - atrybut "autoplay"
Element media - atrybut "muted"
Element media - atrybut "loop"
Element media - atrybut "preload"
Element media - atrybut "poster"
Element media - alternatywny zasób internetowy
Element media - dodatkowy zasób internetowy
Progres X
Struktury HTML
Lista uporządkowana
Lista nieuporządkowana
Lista zagadnień
Progres XI
Tabela HTML
Wiersz tabeli HTML
Komórka tabeli HTML
Pusta komórka tabeli HTML
Wiersz, a kolumna tabeli HTML
Komórka tabeli HTML pełniąca rolę nagłówka
Zasięg elementu "th"
Nagłówek tabeli HTML
Część THEAD tabeli HTML
Część TBODY tabeli HTML
Część TFOOT tabeli HTML
Scalanie komórek tabeli HTML kilku kolumn
Scalanie komórek tabeli HTML kilku wierszy
Powiązanie komórki tabeli HTML z elementem "th"
Progres XII
Formularz HTML
Formularz HTML - elementy HTML mogące posiadać daną
Formularz HTML - nazwa posiadana przez daną
Formularz HTML - wartość posiadana przez daną
Formularz HTML - wartość domyślna posiadana przez daną
Formularz HTML - przycisk resetujący wartość posiadaną przez daną
Powiązanie elementu HTML z elementem "label"
Powiązanie elementu HTML z formularzem HTML
Formularz HTML - przycisk zatwierdzający
Formularz HTML - adres zasobu internetowego obsługującego dane formularza HTML
Formularz HTML - metoda przekazania danych
Formularz HTML - dana reprezentująca plik
Formularz HTML - dana mogąca posiadać kilka wartości naraz
Formularz HTML - element "datalist"
Formularz HTML - atrybut "autocomplete"
Formularz HTML - atrybut "autofocus"
Formularz HTML - atrybut "required"
Formularz HTML - atrybut "maxlength"
Formularz HTML - atrybut "minlength"
Formularz HTML - atrybut "pattern"
Formularz HTML - atrybut "novalidate"
Formularz HTML - atrybut "placeholder"
Formularz HTML - atrybut "disabled"
Formularz HTML - atrybut "readonly"
Formularz HTML - atrybut "dirname"
Formularz HTML - atrybut "wrap"
Formularz HTML - atrybuty z grupy "form"
Formularz HTML - elementy HTML budujące grupę opcji wyboru
Formularz HTML - element "input" typu "radio"
Formularz HTML - element "input" typu "checkbox"
Formularz HTML - element "input" typu "password"
Formularz HTML - element "input" typu "hidden"
Formularz HTML - grupowanie zawartości
Kategorie HTML związane z formularzem HTML
Zawartość powiązana z formularzem HTML
Zawartość reprezentująca daną formularza HTML
Zawartość, której wartość posiadana przez daną może zostać zresetowana
Zawartość powiązana z formularzem HTML za pomocą atrybutu "form"
Zawartość powiązana z elementem "label"
Formularz HTML - znajomość dodatkowych technologii
Epilog
Podsumowanie kursu HTML krok po kroku

Elementy HTML

Korzeń Dokumentu
html
Metadata Dokumentu
head
title
base
link
meta
style
Sekcje
body
article
section
nav
aside
h1
h2
h3
h4
h5
h6
header
footer
address
Grupowanie Zawartości
p
hr
pre
blockquote
ol
ul
li
dl
dt
dd
figure
figcaption
div
main
Semantyka Tekstu
a
dfn
abbr
small
cite
q
data
time
code
var
samp
kbd
sub
sup
i
s
u
em
strong
mark
b
ruby
rb
rt
rtc
rp
bdi
bdo
span
br
wbr
Edycja
del
ins
Zawartość Osadzona
img
iframe
embed
object
param
audio
video
source
track
map
area
Tabela
table
caption
colgroup
col
thead
tbody
tfoot
tr
td
th
Formularz
form
label
input
button
select
datalist
optgroup
option
textarea
keygen
output
progress
meter
fieldset
legend
Skrypt
script
noscript
template
canvas

Atrybuty HTML

Lokalne
abbr
accept
accept-charset
action
alt
async
autocomplete
autofocus
autoplay
border
challenge
charset
checked
cite
cols
colspan
content
controls
coords
crossorigin
data
datetime
default
defer
dirname
disabled
download
enctype
for
form
formaction
formenctype
formmethod
formnovalidate
formtarget
headers
height
high
href
hreflang
http-equiv
ismap
keytype
kind
label
list
loop
low
manifest
max
maxlength
media
mediagroup
method
min
minlength
multiple
muted
name
novalidate
optimum
pattern
placeholder
poster
preload
readonly
rel
required
reversed
rows
rowspan
sandbox
scope
selected
shape
size
sizes
span
src
srcdoc
srclang
start
step
target
type
typemustmatch
usemap
value
width
wrap
Globalne
accesskey
class
contenteditable
data
dir
hidden
id
lang
spellcheck
style
tabindex
title
translate

Kategorie HTML

Główne
korzeń dokumentu
metadata dokumentu
sekcje
grupowanie zawartości
semantyka tekstu
edycja
zawartość osadzona
tabela
formularz
skrypt
Ogólne
zawartość opływająca
zawartość frazowana
zawartość namacalna
zawartość metadata
zawartość interaktywna
zawartość wbudowana
zawartość skryptowa
korzeń sekcji
sekcja zawartości
nagłówek zawartości
elementy media
zawartość tekstowa
zawartość powiązana z formularzem HTML
zawartość reprezentująca daną formularza HTML
zawartość, której wartość posiadana przez daną może zostać zresetowana
zawartość powiązana z formularzem HTML za pomocą atrybutu "form"
zawartość powiązana z elementem "label"
Kontekst
element HTML, który tworzy wewnętrzny kontekst opływający
element HTML, który tworzy wewnętrzny kontekst frazowany
element HTML, który tworzy wewnętrzny kontekst metadata
element HTML, który tworzy wewnętrzny kontekst wbudowany
element HTML, który tworzy wewnętrzny kontekst skryptowy

KOD CSS

Kurs CSS

Dział I - Zagadnienia CSS
CSS, co to takiego?
Przygotowanie do kursu CSS
Minimum informacji, które musimy wiedzieć o dokumencie HTML
Elementy HTML w części "body" dokumentu HTML
Kontrolowanie wyglądu elementu HTML za pomocą atrybutu "style"
Idea stylów CSS
Style CSS w części "head" dokumentu HTML
Poznajemy selektory CSS
Dołączanie zewnętrznego kaskadowego arkusza stylów do dokumentu HTML
Poznajemy właściwości CSS
Właściwości CSS z przedrostkami
Właściwości CSS zmieniające rozmiar elementu HTML
Wartość domyślna
Dziedziczenie właściwości CSS
Wartość "inherit"
Typy selektorów CSS
Łączenie selektorów CSS
Kolejność otrzymywania właściwości CSS przez element HTML
Łączenie się ze sobą reguł CSS
Stopień ważności selektorów CSS
Poznajemy do czego służy deklaracja !important
Osobne reguły CSS dla przeglądarki Internet Explorer
Wartości i jednostki CSS
Kolory CSS
Funkcja jako wartość właściwości CSS
Jednostki relatywne
Wartości wyrażone w procentach
Elementy wyświetlane w linii lub w bloku
Manipulacja właściwością "display"
Unoszący się element HTML
Dodatkowy element HTML
Kilka blokowych elementów HTML obok siebie
Technika clearfix, floatfix
Inne sposoby na wyświetlenie kilku elementów HTML obok siebie
CSS3 - Elastyczny układ elementów HTML
Przeznaczenie danej właściwości CSS
Pozycja statyczna, relatywna, absolutna oraz ustalona
Indeks elementu HTML
CSS3 - Cień tekstu oraz cień elementu HTML
CSS3 - Gradienty liniowe oraz promieniste
Poznajemy właściwości efektu przejścia - transition CSS3
Selektory czasu animacji
Poznajemy właściwości animacji - animation CSS3
Oś X, oś Y, punkt zero oraz pozycja początkowa elementu HTML
Przekształcenie elementu HTML w przestrzeni 2D - transform CSS3
Manipulacja punktem zero w przestrzeni 2D
Kolejność wykonywania się funkcji transform CSS3 w przestrzeni 2D
Wewnętrzny kierunek elementu HTML w przestrzeni 2D
Funkcje transform CSS3 w przestrzeni 3D
CSS3 - Idea przekształcenia elementu HTML w przestrzeni 3D
CSS3 - Perspektywa elementu HTML
CSS3 - Wspólna perspektywa elementów HTML w praktyce
CSS3 - Manipulacja punktem środka perspektywy
CSS3 - Tworzenie animacji w przestrzeni 3D
CSS3 - Tworzenie sfery w przestrzeni 3D
CSS3 - Konflikt punktu zero oraz punktu środka perspektywy
CSS3 - Pozycja niestatyczna elementu HTML w kontekście przekształceń w przestrzeni
Wpływ pozycji początkowej elementu HTML na jego wygląd po przekształceniu
CSS3 - Wektory w przekształceniach w przestrzeni
CSS3 - Idea działania funkcji rotate3d()
Dodatkowy element HTML z właściwościami CSS3
Specyficzne reguły CSS
CSS3 - @media queries
CSS3 - Reguła @supports
Funkcja calc()
Kilka wskazówek oraz porad - Właściwości CSS
Kilka wskazówek oraz ciekawostek - Selektory CSS
Podsumowanie pierwszego działu kursu CSS
Dział II - Pionowe Menu CSS
Wprowadzenie do drugiego działu kursu CSS
Poznajemy element "ul" i usuwamy z niego domyślne właściwości wyglądu
Formatujemy wygląd elementu "ul"
Formatujemy wygląd elementów "li"
Poznajemy element "a" i wykorzystujemy go w menu
Poznajemy domyślne cechy elementu "a" i poznajemy sposób ich zmiany
Element "a" wyświetlany w bloku
Dodajemy nowe właściwości wyglądu do elementów "a"
Wygląd elementów "a" po użyciu pseudoklasy :hover
Dodajemy nowe właściwości CSS3 do naszego menu CSS
Dział III - Poziome Menu CSS
Wprowadzenie do trzeciego działu kursu CSS
Przypomnienie informacji o pionowym menu CSS
Elementy poziomego menu CSS wyświetlone obok siebie
Problemy poziomego menu CSS
Poziome Menu CSS
Rozwijana część poziomego menu CSS
Kontrolowanie rozwijanej części poziomego menu CSS
Animowanie rozwijanej części poziomego menu CSS
Dział IV - Freestyle CSS
Wprowadzenie do czwartego działu kursu CSS
Wykorzystujemy właściwości CSS do utworzenia ramki ze zdjęciem
Cienie po bokach elementu HTML
Sposób na wyśrodkowanie tekstu w pionie
Element HTML z pionowym tekstem
CSS - Layout HTML dla każdej rozdzielczości
Przeznaczenie jednostki "em"
Responsywny układ elementów HTML
Reset CSS
Tworzymy rozwijane poziome menu CSS
Dwupoziomowe rozwijane menu CSS
Duszki CSS
CSS3 - Tworzymy ruchome tło w elemencie HTML
Element HTML umieszczony poza oknem przeglądarki
Animowane elementy HTML - CSS3
Poruszający się, animowany tekst - CSS3
CSS3 - Animowany efekt wprowadzanego tekstu
CSS3 - Animowany obrazek klatka po klatce
Tooltip CSS
CSS3 - Animowany Tooltip
CSS3 - Animowana karta w przestrzeni 3D
CSS3 - Animowany sześcian 3D
CSS3 - Animowana karuzela 3D

Selektory CSS

Selektory Elementów
Selektor uniwersalny - *
Selektor typu elementu - E
Selektor identyfikatora - #ID
Selektor klasy - .CLASS
Selektor potomka - S S
Selektor dziecka - S > S
Selektor sąsiadującego brata - S + S
Selektor braci - S ~ S
Selektory Atrybutów
Selektor typu atrybutu - [A]
Selektor atrybutu o danej wartości - [A="V"]
Selektor atrybutu, którego wartość posiada dany wyraz - [A~="V"]
Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków - [A^="V"]
Selektor atrybutu, którego wartość kończy się danym ciągiem znaków - [A$="V"]
Selektor atrybutu, którego wartość posiada dany ciąg znaków - [A*="V"]
Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącznikiem - [A|="V"]
Selektory Pseudoklas
Selektor - :link
Selektor - :visited
Selektor - :focus
Selektor - :hover
Selektor - :active
Selektor - :target
Selektor - :empty
Selektor - :root
Selektor - :first-child
Selektor - :last-child
Selektor - :only-child
Selektor - :first-of-type
Selektor - :last-of-type
Selektor - :only-of-type
Selektor - :nth-child()
Selektor - :nth-last-child()
Selektor - :nth-of-type()
Selektor - :nth-last-of-type()
Selektor - :lang()
Selektor - :not()
Selektor - :enabled
Selektor - :disabled
Selektor - :checked
Selektor - :indeterminate
Selektor - :required
Selektor - :optional
Selektor - :in-range
Selektor - :out-of-range
Selektor - :read-only
Selektor - :read-write
Selektor - :default
Selektor - :placeholder-shown
Selektory Pseudoelementów
Selektor - ::first-line
Selektor - ::first-letter
Selektor - ::before
Selektor - ::after
Selektor - ::selection
Selektor - ::placeholder

Właściwości CSS

Tekst
text-indent
letter-spacing
word-spacing
text-transform
white-space
text-align
text-align-last
tab-size
hyphens
word-wrap
word-break
Dekoracja Tekstu
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration
text-emphasis-style
text-emphasis-color
text-emphasis
text-emphasis-position
text-shadow
Kontur Tekstu
text-fill-color
text-stroke-width
text-stroke-color
text-stroke
Tryby Zapisu
direction
unicode-bidi
writing-mode
text-orientation
Czcionka
font-style
font-variant
font-weight
font-size
font-family
font
Rozmiary
width
min-width
max-width
height
min-height
max-height
line-height
box-sizing
Marginesy
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
padding
Przepełnienie
overflow-x
overflow-y
overflow
text-overflow
Obramowanie
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top
border-right
border-bottom
border-left
border
Obramowanie Obrazkowe
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image
Zaokrąglenia
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius
Kolory
color
opacity
filter
Tło
background-color
background-image
background-repeat
background-attachment
background-position-x
background-position-y
background-position
background-origin
background-size
background-clip
background
box-shadow
box-reflect
clip
clip-path
Maska
mask-image
mask-mode
mask-repeat
mask-position
mask-origin
mask-size
mask-clip
mask-composite
mask
Kompozycja
mix-blend-mode
isolation
background-blend-mode
Układanie
display
vertical-align
visibility
Pływanie
float
clear
Pozycjonowanie
position
top
right
bottom
left
z-index
Wyróżnik Listy
list-style-type
list-style-position
list-style-image
list-style
Dodatkowa Treść
content
quotes
Licznik
counter-reset
counter-increment
Tabela
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Kolumny
column-width
column-count
columns
column-gap
column-rule-width
column-rule-style
column-rule-color
column-rule
column-fill
column-span
Animacja
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
animation
Przejście
transition-property
transition-duration
transition-timing-function
transition-delay
transition
Przekształcenie
transform
transform-origin
transform-style
backface-visibility
perspective
perspective-origin
Układ Elastyczny
flex-direction
flex-wrap
flex-flow
flex-grow
flex-shrink
flex-basis
flex
order
justify-content
align-items
align-self
align-content
Kształty
shape-outside
shape-image-threshold
shape-margin
Interfejs
cursor
resize
user-select
appearance
pointer-events
scrollbar-base-color
scrollbar-arrow-color
scrollbar-shadow-color
scrollbar-face-color
scrollbar-track-color
Obrys
outline-width
outline-style
outline-color
outline
outline-offset
Przełamanie Strony
page-break-before
page-break-after
page-break-inside
orphans
widows
Różne
zoom
object-fit
object-position
box-decoration-break
will-change
all

Wartości CSS

Podstawowe
liczby
rozmiary
długość relatywna
długość absolutna
notacja naukowa
ciąg znaków
wartość lokalna
wartość własna
procenty
Globalne
initial
inherit
unset
Pozycjonujące
top
right
bottom
left
center
pozycja złożona
Rozmiar Linii
thin
medium
thick
Styl Linii
solid
double
dotted
dashed
groove
ridge
inset
outset
hidden
none
Kolory
paleta podstawowa
paleta rozszerzona
sześciocyfrowy zapis heksadecymalny
trzycyfrowy zapis heksadecymalny
rgb()
rgba()
hsl()
hsla()
transparent
currentColor
Obrazek
url()
linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()
Funkcje
calc()
grayscale()
sepia()
saturate()
hue-rotate()
invert()
brightness()
contrast()
blur()
opacity()
drop-shadow()
perspective()
translateX()
translateY()
translate()
translateZ()
translate3d()
scaleX()
scaleY()
scale()
scaleZ()
scale3d()
skewX()
skewY()
skew()
rotate()
rotateX()
rotateY()
rotateZ()
rotate3d()
matrix()
matrix3d()
inset()
circle()
ellipse()
polygon()
cubic-bezier()
steps()
counter()
counters()
attr()
rect()
Złożone
formuła czterech wartości
grupa wartości
wzorzec wartości
kombinacja wartości
sekwencja wartości

Jednostki CSS

Absolutne
cm
mm
q
in
pt
pc
px
Relatywne
em
rem
ex
ch
vw
vh
vmin
vmax
Czas
ms
s
Kąty
deg
turn
grad
rad