Tekst pod tytułem głównym
W Petersburgu, drugiej co do wielkości metropolii Rosji, gdzie liczba chorych w piątek przekroczyła 1500, władze rozważają wprowadzenie przepustek na poruszanie się po mieście samochodem i transportem publicznym, podobnie jak jest to w Moskwie.
W sąsiadującym obwodzie leningradzkim jedną trzecią przypadków koronawirusa wykryto - według mediów - w hostelu, gdzie mieszkają imigranci pracujący na budowie.
Tekst pogrubiony
Tekst pochylony
Tekst podkreślony
Tekst przekreślony
Pogrubiony, podkreślony, przekreślony i kursywą
To czcionka 15
To czcionka biała
To czcionka georgia lub arial, jeśli mój komputer nie obsługuje georgia
Strong - podkreślenie semantyczne
Em - emphasis - podkreślenie, nacisk semantyczny, z pochyleniem
To jest tekst pod podtytułem
to jest cytatto jest cytat wydzielony graficznie, najlepiej wydzielony tagiem akapitu
to jest cytat wydzielony graficznie, ze źródłem
dfn - definicja - to jest definicja, która jest wyróżniona graficznie
prof.
Horizontal row - hr - poniżej
Horizontal row - hr - z atrybutem "width", niepoprawnym "color", "align" poniżej
| info 1 | info 2 | info 3 | info 4 |
| bla 1 | bla 2 | bla 3 | bla 4 |
"border" - szerokość obramowania, "cellpadding" - margines w komórce, "cellspacing" - szerokość odstępu między komórkami
| info 1 | info 2 | info 3 | info 4 |
| bla 1 | bla 2 | bla 3 | bla 4 |
można również dodać inne atrybuty jak "align" "height", zasadniczo do stosowania w css, "width" oraz dla "tr" nadaje się atrybut "valign" czyli wyśrodkowanie w pionie o wartościach "top", "bottom" i "middle"
| info 1 | info 2 | info 3 | info 4 |
|---|---|---|---|
| bla 1 | bla 2 | bla 3 | bla 4 |
| sra 1 | sra 2 | sra 3 | sra 4 |
dodajemy nagłówek semantyczny do tabelki z pomocą tagu "caption" . Kolejność w kodzie - "thead", "tfoot" i "tbody" choć w przeglądarce będzie kolejność "head - body - foot"
| info 1 | info 2 | info 3 | info 4 |
| sra 1 | sra 2 | sra 3 | sra 4 |
| bla 1 | bla 2 | bla 3 | bla 4 |
Aby scalić komórki stosujemy tag "th" i "td" z atrybutem "colspan"
| info 1 | info 2 | info 3 | info 4 |
|---|---|---|---|
| bla 1 | bla 2 | bla 3 | bla 4 |
| Scalone 3 komórki | |||
Można stosować "colspan" do scalania komórek w rzędach i "rowspan" w kolumnach. Występuje tu pozorna sprzeczność semantyczna
| info 1 | info 2 | info 3 | info 4 |
|---|---|---|---|
| bla 1 | bla 2 | bla 3 | bla 4 |
| Scalone 4 komórki wyglądają lepiej | |||
Jak stosować "colspan" do scalania komórek w rzędach i "rowspan" do scalania komórek w kolumnach
| info 1 | info 2 | info 3 | info 4 |
|---|---|---|---|
| bla 1 | bla 2 | bla 3 | |
| Scalone 4 komórki wyglądają lepiej | |||
Tak można zrobić stronę z "headerem", "siderem" i "body" z treścią, ale lepiej to robić "div-ami".
| Baner | |
|---|---|
| Menu | Treść |
Obrazki wstawia się za pomocą tagu "img" czyli image i "src" czysli source
"a href"czyli "a - anchor i href - hypertext reference". Referencja, tag "a"służy do zakotwiczania odsyłaczy do plików lub innych stron, np. do tej strony, lub do tego zdjęcia. Do referencji "a - anchor"można też dodać atrybuty tekie jak "title", wtedy w churce pojawi się dodatkowa informacja o odnośniku. Można też dodać atrybut "target"", który ma wartość ""_blank" które powoduje, że odnośnik otworzy się w nowej karcie przeglądarki. Bez nadania tego atrybutu odnośnik otworzy się w tym samym oknie. W atrybucie a href wpisać też można wartość "mailto:adres mailowy", a wygląda to tak: napisz do Agi
Zapomocą zakotwiczenia etykiety można odesłać użytkownika do oznaczonego miejsca na stronie. Etykietę opisuje się atrybutem "a" i "name", w którym nadaje się etykiecie nazwę, a kotwiczy z pomocą referencji "a href" która odsyła do etykiety. W adresie odnośnika etykietę poprzedza się "#". Etykiety mogą odsyłać ze spisu treści do poszczególnych rozdziałów, etc. Przykład poniżej.
Formularz tworzy się z referencją "form", której nadaje się atrybuty, takie jak: "action", w którym podaje się adresata takiego formularza zwykłą wartością "mailto". Po adresie, z pytajnikiem możemy dodać "?subject=wartość". Kolejny atrybut to "method" której można nadać wartość "get" lub "post". Do przesyłanie mailem służy "post". Możemy dodać typ kodowania atrybutem"enctype" czyli "encryption type". Dla prostego tekstu dajemy wartość "text/plain". Warto dodać atryburt "accept-charset" dając taką wartość jak kodowanie strony, w wypadku tej strony "utf-8".
Rubryki, pola formularza tworzymy tagiem "input! do którego dodajemy atrybuty "Type" o wartościach "text, tel, email" etc.. Kolejny atrybut "name", w którym nadajemy nazwę zawartości rubryki i "value" z jej wartością domyślną. Można dodać rozmiar "size", długość maksymalną "maxlength" i jej wartością jest ilość znaków. Atrybut "readonly" określa co możemy robić w rubrykach, np. tylko czytać - wartość "readonly". Atrybut "disabled" wyłącza możliwość edycji, kopiowania etc. Można wprowadzić pudełeczko do zaznaczania: "checkbox"". Dodanie atrybutu "id" z nazwą i rozszerza klikalność checkboxa na jego nazwę przy pomocy tagu "label for", tagi "label" i "value służą do określenia opisów w mailu.
Dodamy jeszcze obramowanie za pomocą "fieldset" i "legend", ale zamiast "checkbox" użyjemy "radio"
Dodajemy pole tekstowe z "textarea" i oznaczeniem ilości kolumn "cols" i wierszy "rows"
Dodajemy pole tekstowe z nieedytowalne z arybutem "disabled" o tej samej wartości "disabled"
Teraz tzw combi, tworzone tagiem "select" z opcjami z tagiem "option". Żeby można wybierać wiele opcji dodajemy atrybyt "multiple"
Możemy dodać plik do wysłania z tagiem "input" i wysła plik. Trzeba też w atrybutach formularza zmienić w "enctype" wartość na "multiform/form-data".