Znaczniki j¦zyka HTML

Znaczniki języka HTML
mgr Radosław Matusik
www.math.uni.lodz.pl/˜radmat
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
<sup> ... </sup>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
<sup> ... </sup>
<del> ... </del>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
<sup> ... </sup>
<del> ... </del>
<cite> ... </cite>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
<sup> ... </sup>
<del> ... </del>
<cite> ... </cite>
<dfn> ... </dfn>
mgr Radosław Matusik
Znaczniki języka HTML
Elementy inline
<strong> ... </strong>
<em> ... </em>
<sub> ... </sub>
<sup> ... </sup>
<del> ... </del>
<cite> ... </cite>
<dfn> ... </dfn>
<code> ... </code>
mgr Radosław Matusik
Znaczniki języka HTML
Wielkości
Jednostka
%
in
cm
mm
em
ex
pt
pc
px
Wielkość
procent
cal
centymetr
milimetr
1em odpowiada aktualnej wielkości czcionki
wysokość litery X
punkt (1pt=1/72 cala)
1pc=12pt
piksel
mgr Radosław Matusik
Znaczniki języka HTML
Walidacja strony
https://validator.w3.org/
mgr Radosław Matusik
Znaczniki języka HTML
CSS (Cascading Style Sheets) - kaskadowe arkusze stylów
Ogólna postać:
selektor {cecha: wartość;},
mgr Radosław Matusik
Znaczniki języka HTML
CSS (Cascading Style Sheets) - kaskadowe arkusze stylów
Ogólna postać:
selektor {cecha: wartość;},
np. p{color: green;}
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
font-weight: bold, bolder, lighter;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
font-weight: bold, bolder, lighter;
font-size: 12pt, 200%, larger;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
font-weight: bold, bolder, lighter;
font-size: 12pt, 200%, larger;
font-style: italic, oblique;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
font-weight: bold, bolder, lighter;
font-size: 12pt, 200%, larger;
font-style: italic, oblique;
text-align: left, right, center, justify;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - czcionka
color: green, red, blue, ...;
font-family: ”Times New Roman”, Georgia, Serif;
font-weight: bold, bolder, lighter;
font-size: 12pt, 200%, larger;
font-style: italic, oblique;
text-align: left, right, center, justify;
text-decoration: underline, overline;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - tło
background-color: red, green, blue, ...;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - tło
background-color: red, green, blue, ...;
background-image: url(’obrazek.jpg’);
mgr Radosław Matusik
Znaczniki języka HTML
CSS - tło
background-color: red, green, blue, ...;
background-image: url(’obrazek.jpg’);
background-repeat: repeat-x, repeat-y, no-repeat;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - tło
background-color: red, green, blue, ...;
background-image: url(’obrazek.jpg’);
background-repeat: repeat-x, repeat-y, no-repeat;
background-position: center, left, right, top, bottom;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - tło
background-color: red, green, blue, ...;
background-image: url(’obrazek.jpg’);
background-repeat: repeat-x, repeat-y, no-repeat;
background-position: center, left, right, top, bottom;
background-size: 640px 100px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - obramowania
border-width: 5px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - obramowania
border-width: 5px;
border-style: solid;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - obramowania
border-width: 5px;
border-style: solid;
border-color: blue;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - obramowania
border-width: 5px;
border-style: solid;
border-color: blue;
border: 5px solid blue;
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
double
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
double
groove
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
double
groove
ridge
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
double
groove
ridge
inset
mgr Radosław Matusik
Znaczniki języka HTML
Styl obramowania
border-top-style, border-right-style, border-bottom-style,
border-left-style.
dashed
dotted
solid
double
groove
ridge
inset
outset
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
margin-top: 20px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
margin-top: 20px;
margin-left: 50px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
Uwaga! Jeśli określamy wszystkie wartości, to możemy wykorzystać
następujący zapis (np. dla znacznika p):
p{margin: wielkość góra wielkość prawo wielkość dół
wielkość lewo;}
mgr Radosław Matusik
Znaczniki języka HTML
CSS - marginesy
margin-bottom: 10px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
Uwaga! Jeśli określamy wszystkie wartości, to możemy wykorzystać
następujący zapis (np. dla znacznika p):
p{margin: wielkość góra wielkość prawo wielkość dół
wielkość lewo;}
p{20px 50px 10px 50px;}
mgr Radosław Matusik
Znaczniki języka HTML
CSS - odległości czcionki od innych elementów
padding-bottom: 10px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - odległości czcionki od innych elementów
padding-bottom: 10px;
padding-top: 20px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - odległości czcionki od innych elementów
padding-bottom: 10px;
padding-top: 20px;
padding-left: 50px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - odległości czcionki od innych elementów
padding-bottom: 10px;
padding-top: 20px;
padding-left: 50px;
padding-right: 50px;
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista nieuporządkowana
list-style-type - styl numerowania listy
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista nieuporządkowana
list-style-type - styl numerowania listy
square - kwadrat
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista nieuporządkowana
list-style-type - styl numerowania listy
square - kwadrat
disc - koło
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista nieuporządkowana
list-style-type - styl numerowania listy
square - kwadrat
disc - koło
circle - okrąg
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
lower-alpha - małe litery alfabetu łacińskiego
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
lower-alpha - małe litery alfabetu łacińskiego
upper-alpha - duże litery alfabetu łacińskiego
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
lower-alpha - małe litery alfabetu łacińskiego
upper-alpha - duże litery alfabetu łacińskiego
lower-roman - małe liczby rzymskie
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
lower-alpha - małe litery alfabetu łacińskiego
upper-alpha - duże litery alfabetu łacińskiego
lower-roman - małe liczby rzymskie
upper-roman - duże liczby rzymskie
mgr Radosław Matusik
Znaczniki języka HTML
CSS - lista uporządkowana
list-style-type - styl numerowania listy
lower-alpha - małe litery alfabetu łacińskiego
upper-alpha - duże litery alfabetu łacińskiego
lower-roman - małe liczby rzymskie
upper-roman - duże liczby rzymskie
Dla znacznika li w obu rodzajach list można ustawić kolor czcionki,
jej rozmiar, grubość, styl, czy też dekorację tekstu.
mgr Radosław Matusik
Znaczniki języka HTML
Ćwiczenie
1
2
Jeden
Dwa
podpunkt 1
podpunkt 2
podpunkt 3
3
Trzy
mgr Radosław Matusik
Znaczniki języka HTML
Wyróżnik obrazkowy w liście
W liście nieuporządkowanej kolejne jej pozycje mogą być
wypunktowane za pomocą grafiki, np.:
ul
{
list-style-image: url(’strzalka.jpg’);
}
mgr Radosław Matusik
Znaczniki języka HTML
Ćwiczenie
Proszę stworzyć następującą tabelkę:
mgr Radosław Matusik
Znaczniki języka HTML
Ćwiczenie
Proszę stworzyć następującą tabelkę:
Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i
wyśrodkowany, kolor biały, kolor tła niebieski.
mgr Radosław Matusik
Znaczniki języka HTML
Ćwiczenie
Proszę stworzyć następującą tabelkę:
Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i
wyśrodkowany, kolor biały, kolor tła niebieski.
Dla pozostałych wierszy: czcionka Times New Roman, 14pt,
tekst pochylony, podkreślony i wyrównany do prawej, kolor
czerwony, kolor tła zielony.
mgr Radosław Matusik
Znaczniki języka HTML
Ćwiczenie
Proszę stworzyć następującą tabelkę:
Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i
wyśrodkowany, kolor biały, kolor tła niebieski.
Dla pozostałych wierszy: czcionka Times New Roman, 14pt,
tekst pochylony, podkreślony i wyrównany do prawej, kolor
czerwony, kolor tła zielony.
mgr Radosław Matusik
Znaczniki języka HTML