HTML I Css. Część 1.

Licencja do uzytku indywidualnego dla studenta Natalia Motyli?ska (nr albumu: 20333) do celow nauki w czasie trwania kursu.
Pobrano: 2018-01-27 18:00:34
Programowanie Dokumentów Dynamicznych

mgr inż. Artur Karczmarczyk
11.12.2017 1
Licencja do uzytku indywidualnego dla studenta Natalia Motyli?ska (nr albumu: 20333) do celow nauki w czasie trwania kursu. Pobrano: 2018-01-27 18:00:34
 Podstawy.
 Obrazki.
 Hiper łącza.
 Listy.
 Tabele.
 Formularze.
11.12.2017 2
 Wykład w znacznej
mierze oparty o:
▪ Introduction to Web
Development using
HTML 5
▪ Kris Jahmsa, Ph. D.
▪ Jones & Bartlett
Learning
▪ 2014
▪ ISBN: 9781449686543
11.12.2017 3
11.12.2017 4
 Notepad++
 Sublime Text
 Brackets
 Atom
 WebStorm
 PhpStorm
11.12.2017 5
 Firefox:
▪ Menu -> Narzędzia -> Przełącz narzędzia
▪ Ctrl + Shift + I
▪ F12
 Chrome:
▪ Menu -> Więcej narzędzi -> Narzędzia dla programistów.
▪ Ctrl + Shift + I
▪ F12
 Internet Explorer
▪ Narzędzia -> Narzędzia deweloperskie
▪ F12
 Edge
▪ Więcej -> Narzędzia programistyczne
▪ F12
11.12.2017 6
11.12.2017 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
Hello World!
</body>
</html>
11.12.2017 8
 <! DOCTYPE html>

 Określa typ dokumentu na HTML 5.
 Wcześniej typy bardziej skompilowane:
▪ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
▪ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
11.12.2017 9
 <html> określa początek dokumentu.

 </html> na końcu dokumentu zamyka dokument.
 Większość treści w HTML jest zamknięta pomiędzy
tagiem otwierającym a zamykającym.
 Wybrane tagi nie mają zamknięcia:
▪ img, input, br
▪ w XHTML konieczność domknięcia:
▪ <img …. />
▪ <input …. />
▪ <br />
▪ w HTML 5 domknięcie wspierane, ale nie wskazana
▪ <img … >
▪ <input … >
▪ <br>
11.12.2017 10
 Opcjonalny tag nagłówka.

 Możliwość umieszczenia:
▪ metadanych,
▪ tytułu wyświetlanego w zakładce / pasku tytułu,
▪ dołączenie styli CSS,
▪ dołączenie skryptów JS.
11.12.2017 11
 Tag zawierający całą widoczną treść strony.

 Wymagany, ale przeglądarki radzą sobie i bez
niego.
11.12.2017 12
 Wszystkie odstępy
traktowane jako jeden
biały znak.
 Znaki końca linii nie
tworzą nowej linii.
 Znacznik <br> do <body>
łamania linii. Line 1
Line 2
Line 3
<br>
Line break 1<br>
Line break 2<br>
Line break 3
</body>
11.12.2017 13
 Znacznik <br> jedynie dzieli linię.

 Tworzenie akapitów poprzez znaczniki
<p></p>.
 Zawartość <p> może mieścić się w jednej lub
wielu liniach – renderowany tylko jeden
akapit.
11.12.2017 14
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraphs</title>
</head>
<body>
<p>
This is a paragraph stored in a single line.
</p>
<p>
This is a paragraph
stored over two lines.
</p>
<p>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse
a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula
molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermen
dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames
turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Q
lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci l
non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor
suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vita
dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, por
eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Qui
cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in
vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
</body>
</html>
11.12.2017 15
 Pogrubienie
▪ <b></b>
 Wytłuszczenie
▪ <strong></strong>
 Kursywa
▪ <i></i>
 Wyróżnienie
▪ <em></em>
11.12.2017 16
<body>
<b>Bold</b><br>
<strong>Strong</strong><br>
<i>Italic</i><br>
<em>Emphasised</em><br>
<b><i>Bold Italic</i></b><br>
<strong><em>Strong Em</em></strong>
</body>
11.12.2017 17
 Sześć poziomów:
▪ h1, h2, h3, h4, h5, h6
 <h1> największy i najważniejszy
 <h6> najmniej ważny
 Tylko jedno wystąpienie <h1> na stronie
11.12.2017 18
<body>
<h1>H1 level</h1>
<h2>H2 level</h2>
<h3>H3 level</h3>
<h4>H4 level</h4>
<h5>H5 level</h5>
<h6>H6 level</h6>
</body>
11.12.2017 19
 Dawniej poprzez tag <u></u>.

 Od lat 80-tych różne tagi HTML zastępowane
przez inne.
 Tag <u> zastąpiony przez atrybut style i CSS:
▪ style=„text-decoration: underline;”
11.12.2017 20
& &
> >
< <
© ©
÷ ÷
× ×
Odstęp (zakaz łamania linii)
™ ™
€ €
£ £
11.12.2017 21
<body>
& > <
© ÷ ×
™ € £
</body>
11.12.2017 22
 Do opisywania funkcjonalności.
 Do podpisywania znaczników zamykających.
 Do tymczasowego (!) wyłączania części kodu.
 Widoczne w źródle strony!
 Rozciągają się na wybrany fragment linii lub
wielu linii.
 
11.12.2017 23
 Dostępny dla większości tagów HTML.

 Umożliwia określenie stylu CSS dla tego
znacznika.
 Najwyższy priorytet reguł w atrybucie style.
 Przykłady użycia:
▪ podkreślenie
▪ text-decoration: underline;
▪ wyrównanie:
▪ text-align: center;
11.12.2017 24
 W sekcji <head>.
 Zawartość wyświetla się:
▪ w nazwie zakładki,
▪ w historii,
▪ w nazwie okna,
▪ w wynikach wyszukiwania.
 Z przyczyn SEO <title> i <h1> powinny się
pokrywać.
11.12.2017 25
 Strona HTML o tytule „PDD”.

 Zawartość:
▪ Przedmiot: Programowanie Dokumentów
Dynamicznych
▪ Skrót: PDD
▪ Forma: wykład
▪ ©2017 Studenci WIZUT
11.12.2017 26
11.12.2017 27
<body>
<img src="../resources/stones.jpg">
</body>
11.12.2017 28
<body>
<img src="../resources/stones.jpg"
width="250">
</body>
11.12.2017 29
<body>
height="250">
</body>
11.12.2017 30
<body>
<img src="../resources/stones.jpg" width=„100%">
</body>
11.12.2017 31
<body>
<img src="../resources/stones.jpg" width="150">
<img src="../resources/circles.jpg" width="150">
<img src="../resources/rail.jpg" width="150">
</body>
11.12.2017 32
<body>
width="150"><br>
<img src="../resources/circles.jpg"
width="150"><br>
<img src="../resources/rail.jpg"
width="150">
</body>
11.12.2017 33
 W atrybucie src wskazana ścieżka do pliku.

 Możliwe wartości:
▪ https://www.test.pl/img/obrazek.png
▪ ścieżka bezwzględna
▪ /img/obrazek.png
▪ ścieżka bezwzględna
▪ obrazek.png
▪ ścieżka względna, bieżący katalog
▪ img/obrazek.png
▪ ścieżka względna, podrzędny katalog
▪ ../img/obrazek.png
▪ ścieżka względna, sąsiadujący katalog
11.12.2017 34
 Czasami brak możliwości wczytania obrazka:

▪ zła ścieżka,
▪ problem z połączeniem z serwerem,
▪ konfiguracja przeglądarki.
 Tekst alternatywny w atrybucie alt.
 Wyświetlany przez część przeglądarek w
przypadku problemów z załadowaniem obrazka.
 Część przeglądarek nie wyświetla nic.
 Wykorzystywany przez wyszukiwarki do
indeksowania obrazków.
11.12.2017 35
<body>
<center>
<img src="../resources/rail.jpg" >
</center>
</body>
11.12.2017 36
<body>
<img
src="../resources/rail.jpg"
width="50%"
style="
display: block;
margin-left: auto;
margin-right: auto;">
</body>
11.12.2017 37
 Przed umieszczeniem obrazka na stronie

należy zweryfikować warunki licencji.
 Część obrazków dostępnych za darmo w
serwisach:
▪ http://www.freeimages.com/
▪ https://www.pexels.com/
 Część obrazów dostępnych za darmo tylko do
celów niekomercyjnych.
 Czasem niezbędna informacja o autorze wraz
ze zdjęciem.
11.12.2017 38
11.12.2017 39
PNG JPG GIF

Kompresja Bezstratna Kompresja stratna, Kompresja stratna
kompresja ZIP wybór jakości
Przezroczystość Zmienna Brak Jeden poziom
przezroczystość przezroczystości. przezroczystości.
Kolory 8, 24 lub 48 bitów 24 bity do 256 kolorów
Wyświetlanie Przeplot 2- Wczytywanie Jedno-wymiarowy
progresywne wymiarowy progresywne przeplot
11.12.2017 40
 Przed wyświetleniem grafiki

konieczne jej pobranie.
 Im większy rozmiar obrazka,
tym dłuższe pobieranie i
większe zużycie transferu
danych.
 Dla obrazów dla WWW
wystarczy 72 dpi
▪ dots per inch
 Aparaty rozdzielczość 300 dpi.
 Rozmiary obrazka powinny
odpowiadać tym w atrybutach
width i height.
 Konwersja obrazków:
▪ IrfanView
▪ PhotoShop
▪ Affinity Photo
▪ https://tinypng.com/
11.12.2017 41
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Tiles</title>
<style type="text/css">
body {
background-image:
url("../resources/tile.jpg");
background-repeat: repeat;
}
</style>
</head>
<body></body>
</html>
11.12.2017 42
 Właściwość border:
▪ border: 1px solid black;
▪ border: 5px dashed #FFAA33;
▪ border: 10px dotted rgb(255,0,0);
 Style obramowania:
▪ none, initial, inherit,
▪ dotted, dashed, solid, double,
▪ groove, ridge, inset, outset.
 Zaokrąglone brzegi:
▪ border-radius: NWpx NEpx SEpx SWpx;
▪ border-radius: NWpx NE-SWpx SEpx;
▪ border-radius: NW-SEpx NE-SWpx;
▪ border-radius: 15px;
11.12.2017 43
11.12.2017 44
 Właściwość padding:
▪ padding-top
▪ padding-right
▪ padding-bottom
▪ padding-left
▪ padding
 Przykład:
▪ <img
src="../resources/limes.jpg"
width="40%" style="padding:
10px;">
11.12.2017 45
 Miara ilości światła,

które może przejść przez
obiekt.
 Właściwość opacity.
 Wartości od 0 do 1.
 Przykład:
<body>
width="95%" style="opacity: 0.25">
width="95%" style="opacity: 1">
</body>
11.12.2017 46
 Domyślnie tekst
wyrównany do prawej
dolnej krawędzi
obrazka.
 Właściwość float do
zmiany domyślnego
zachowania.
 Możliwości:
▪ float: left;
▪ float: right;
11.12.2017 47
 Możliwość dowolnego
umieszczenia
obrazków.
 Nie koniecznie równo z
tekstem.
 Właściwości:
▪ position: absolute;
▪ position: relative;
▪ left, right, top, bottom,
▪ 50%, 15px, …
▪ z-index: 20;
11.12.2017 48
 Domyślnie obrazek wyświetlany zgodnie z

oryginalną orientacją.
 Dawniej w celu obrócenia obrazka
wykorzystywane „rotation style”.
▪ obecnie nie wspierane przez żadną przeglądarkę
 Przeglądarki akceptują różne właściwości do
obrotu obrazków, ignorują nieznane.
 Konieczność podania właściwości dla
wszystkich obsługiwanych przeglądarek.
11.12.2017 49
<img src="../resources/circles.jpg"
width="80%" style="
display: block;
margin: 10% auto;
-ms-transform: rotate(9deg);
/* IE 9 */
-webkit-transform: rotate(9deg);
/* Chrome, Safari, Opera */
transform: rotate(9deg);
">
11.12.2017 50
11.12.2017 51
11.12.2017 52
 Standardowo hiperłącze oznaczone przez niebieski kolor i

podkreślenie.
 Możliwość dowolnego stylowania hiperłączy.
 Łącze tworzone z wykorzystaniem tagów <a></a>.
 Atrybut href wskazuje na adres docelowy.
 Treść pomiędzy znacznikami <a></a> to etykieta linku.
<a href=„www.google.pl”>Google Search Engine</a>
cel łącza etykieta łącza
11.12.2017 53
 Możliwość wymuszenia otwarcia łącza w

nowym oknie / zakładce:
▪ <a href=„…” target=„_blank”>…</a>
 Możliwość umieszczenia pomiędzy
znacznikami <a></a> dowolnych innych
znaczników:
▪ <a href=„…”><h2>Why us?</h2></a>
▪ <a href=„…”><img src=„…”></a>
 Możliwość wskazania ścieżek względnych i
bezwzględnych.
11.12.2017 54
 Możliwość oznaczenia fragmentów strony za

pomocą kotwic:
▪ <a name=„abc”></a>
 Odwołanie do kotwicy:
▪ <a href=„#abc”>…</a>
▪ <a href=„page.html#abc”>…</a>
11.12.2017 55
 Możliwość utworzenia linku do wysyłki maila.

 Link otwiera klienta pocztowego użytkownika.
 <a href=„mailto:abc@def.com”>Contact</a>
 Opcjonalne parametry:
▪ subject
▪ Domyślny temat wiadomości.
▪ body
▪ Domyślna treść wiadomości.
▪ <a href=„mailto:abc@def.com?subject=…&body=…
11.12.2017 56
11.12.2017 57
 Ordered List
▪ <ol></ol>
 List Item
▪ <li></li>
<body>
<p>This is an ordered list:</p>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
11.12.2017 58
 Unordered List
▪ <ul></ul>
 List Item
▪ <li></li>
<body>
<p>This is an unordered list:</p>
<ul>
<li>First Item</li>
<li>Third Item</li>
</ul>
</body>
11.12.2017 59
 Właściwość list-style-
type:
 none, initial, inherit,
 disc, circle, square
 lower-alpha, upper-
alpha,
 lower-greek, upper-
greek,
 lower-roman, upper-
roman,
 decimal, decimal-
leading-zero
11.12.2017 60
image.
<body>
<ul style="list-style-image:
url('../resources/ladybird.png');
">
<li>Square list style type</li>
<li>Third Item</li>
</ul>
</body>
11.12.2017 61
position.
 Możliwe wartości:
▪ inside,
▪ outside,
▪ initial,
▪ inherit.
11.12.2017 62
 Definition List
▪ <dl></dl>
 Definition Term
▪ <dt></dt>
 Definition Description
▪ <dd></dd>
<body>
<dl>
<dt>warp</dt>
<dd>
A speed unit invented by Gene Rodenberry for the
explanation of extra-speed travel in Star Trek series.
The speed of warp one is equal to the light speed. After
warp one, the actual speed increases non-linearly.
</dd>
<dt>Klingon</dt>
<dd>A species in Star Trek series characterised by
violence and great fighting skills.</dd>
<dt>James T. Kirk</dt>
<dd>The captain of USS Enterprise in the original series
of Star Trek. Starred by William Shatner.</dd>
</dl>
</body>
11.12.2017 63
<body>
<ol>
<li>
First Item
<ol>
<li>First Sub-Item</li>
<li>Second Sub-Item</li>
<li>Third Sub-Item</li>
</ol>
</li>
<li>
Second Item
<ul>
<li>First Sub-Item</li>
<li>Second Sub-Item</li>
<li>Third Sub-Item</li>
</ul>
</li>
<li>Third Item</li>
</ol>
</body>
11.12.2017 64
11.12.2017 65
 Elementy tabeli: <body>

▪ <table> <table>
<tr>
▪ Tabela.
<th>Name</th>
▪ <tr> <th>Species</th>
▪ Wiersz tabeli. </tr>
▪ <th> <tr>
▪ Komórka nagłówka tabeli. <td>Worf</td>
▪ <td> <td>Klingon</td>
▪ Komórka tabeli. </tr>
<tr>
 Możliwość stylowania każdego elementu
<td>James T. Kirk</td>
tabeli. <td>Human</td>
</tr>
<tr>
<td>Dr Phlox</td>
<td>Denobulan</td>
</tr>
<tr>
<td>Spock</td>
<td>Volcan</td>
</tr>
</table>
</body>
11.12.2017 66
 Tabela jak mała strona HTML.

 Możliwość dowolnego formatowania treści
tabeli:
▪ b, strong
▪ i, em,
▪ style=….
▪ a
 Ze względu na formatowanie tabel, dawniej
tabele wykorzystywane były do zarządzania
układem strony.
11.12.2017 67
 W przypadku braku określenia

szerokości, tabela dopasowuje się
do rozmiaru zawartości.
<body>
<table style="width: 100%;">
<tr>
<td>
<img src="../resources/stones.jpg" style="width:
70%">
</td>
<td>Stones</td>
</tr>
<tr>
<td>
<img src="../resources/circles.jpg" style="width:
70%">
</td>
<td>Circles</td>
</tr>
<tr>
<td>
<img src="../resources/rail.jpg" style="width:
70%">
</td>
<td>Rail</td>
</tr>
</table>
</body>
11.12.2017 68
<body>
<table>
<tr>
<th>Product</th>
<th>Ingredients</th>
</tr>
<tr>
<td>Orange Juice</td>
<td>
<table>
<tr>
<td>Water</td>
<td>50%</td>
</tr>
<tr>
<td>Sugar</td>
<td>30%</td>
</tr>
<tr>
<td>Orange</td>
<td>5%</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
11.12.2017 69
 Właściwość text-align nie przynosi

oczekiwanych rezultatów.
 Tag <center> działa, ale jest oznaczony
jako przestarzały.
 Rozwiązaniem właściwość margin-
left/margin-right ustawiona na auto.
<body>
<table style="margin: 0 auto;">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
</body>
11.12.2017 70
 Wyrównanie treści
tabel tak samo jak
wyrównanie treści
akapitu.
 Właściwość text-align:
▪ center
▪ justify
▪ left
▪ right
▪ inherit
▪ initial
11.12.2017 71
 Właściwość vertical-
align:
▪ top
▪ bottom
▪ middle
 Domyślna wartość to
middle.
 Ustawienie w <td> lub
<tr>.
11.12.2017 72
 Domyślnie brak obramowań.

 Atrybut border.
 Atrybut frame:
▪ void
▪ above
▪ below
▪ hsides
▪ vsides
▪ lhs
▪ rhs
▪ box
▪ border
 Atrybut rules:
▪ none
▪ groups
▪ rows
▪ cols
▪ all
 Powyższe nie wspierane przez HTML5!
Style CSS.
11.12.2017 73
<body>
<table style="width: 80%"
border="1">
<caption>Fig. 1: Example
Table</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
11.12.2017 74
<table>
 Wiersze nagłówka, <thead>
treści i stopka tabeli <tr>
<td>Header</td>
często różnią się </tr>
</thead>
stylem. <tbody>
<tr>
 Tagi grupujące wiersze <td>Body</td>
tabeli w nagłówek, </tr>
</tbody>
główną treść i stopkę: <tfoot>
<tr>
▪ thead <td>Footer</td>
</tr>
▪ tbody </tfoot>
</table>
▪ tfoot
11.12.2017 75
 W przypadku stylowania całego

wiersza styl przypisany do <tr>.
 W przypadku kolumn
konieczność przypisania stylu do
każdej komórki!
 Rozwiązanie: <colgroup> i <col>
<body>
<table border="1">
<colgroup>
<col>
<col style="background-color: yellow;">
</colgroup>
<tr>
<td>AAAA</td>
<td>BBBB</td>
</tr>
<tr>
<td>CCCC</td>
<td>DDDD</td>
</tr>
</table>
</body>
11.12.2017 76
<body>
<table border="1">
<tr>
<td colspan="2">wide</td>

<td>normal 1</td>
</tr>
<tr>
<td>normal 2</td>
<td>normal 3</td>
<td>normal 4</td>
</tr>
<tr>
<td rowspan="2">high</td>
<td>normal 5</td>
<td>normal 6</td>
</tr>
<tr>

<td>normal 7</td>
<td>normal 8</td>
</tr>
</table>
</body>
11.12.2017 77
 Dawniej z wykorzystaniem atrybutów height i

width:
▪ <table width=„100” height=„100”>…</table>
 Obecnie z wykorzystaniem styli:
▪ <table style=„width: 100px; height:
100px;></table>
 Konieczność stylowania poszczególnych
wierszy/kolumn.
11.12.2017 78
11.12.2017 79
11.12.2017 80
 Formularze służą do pobierania danych użytkownika.

 Po wysyłce, formularz przetwarzany przez skrypt
serwerowy: PHP, Perl, Python, CGI itp.
 Wstawianie formularza:
▪ <form action=„script.php” method=„post”>…</form>
 Atrybut action wskazuje na skrypt, do którego
przesłane mają zostać dane formularza.
 Atrybut method wskazuje metodę wysyłki danych:
▪ POST
▪ GET
 Wysyłka za pomocą przycisku Submit:
▪ <input type=„submit” value=„Send!”>
11.12.2017 81
 Zwykłe pola tekstowe:

▪ <input type=„text” name=„username”>
 Domyślna wartość w atrybucie „value”.
 Pola tekstowe typu hasło:
▪ <input type=„password” name=„userpass”>
<form>
Username:
<input type="text" name="username"><br>
Password:
<input type="password" name="userpass">
</form>
11.12.2017 82
 Atrybut maxlength wskazuje maksymalną

liczbę znaków wprowadzonych do pola
tekstowego.
 <input type=„text” name=„username”
maxlength=„10”>
11.12.2017 83
 Duże ilości tekstu

wprowadzane za
pomocą kontrolki
<textarea></textarea>
 Tag otwierający i
zamykający.
 Treść domyślna
pomiędzy tagami.
 Możliwość ustalenia
szerokości i wysokości
kontrolki:
▪ rows=„10”
▪ cols=„50”
11.12.2017 84
 Kontrolki typu radio.

<form>
 Jedna kontrolka dla <input type="radio" name="phoneOs"
value="android" checked>Android<br>
każdego wyboru. <input type="radio" name="phoneOs"
value="ios">iOS<br>
 Wszystkie kontrolki dla <input type="radio" name="phoneOs"

value="windows">Windows<br>
</form>
danego pola mają tę
samą nazwę.
 Zaznaczenie wyboru
domyślnego poprzez
dodania atrybutu
checked.
11.12.2017 85
 Kontrolki typu
checkbox. <form>
 Jedna kontrolka dla <input type="checkbox" name="phoneOs"
każdego wyboru. value="android" checked>Android<br>
<input type="checkbox" name="phoneOs"
 Wszystkie kontrolki dla value="ios">iOS<br>
<input type="checkbox" name="phoneOs"
danego pola mają tę value="windows" checked>Windows<br>
</form>
samą nazwę.
 Zaznaczenie wyboru
domyślnego poprzez
dodania atrybutu
checked.
 Możliwość zaznaczenia
więcej niż jednej
kontrolki.
11.12.2017 86
 Lista zamknięta w kontrolce

typu select.
 Poszczególne wybory w <form>
<select name="phoneOs">
znacznikach option. <option value="android"
 Nazwa umieszczona w atrybucie selected>Android</option>
<option value="ios">iOS</option>
name znacznika select. <option value="windows">Windows</option>
 Wartości umieszczone w </select>
</form>
atrybutach value znaczników
option.
 Etykiety umieszczone między
znacznikami
<option></option>.
 Listy wielokrotnego wyboru
poprzez dodanie atrybutu
multiple.
 Wartość domyślna zaznaczona
poprzez atrybut selected.
11.12.2017 87
 Przywrócenie stanu domyślnego formularza za

pomocą kontrolki reset.
 <input type=„reset” value=„Clear form”>
 Uwaga!
▪ powrót do stanu formularza z momentu wczytania
strony;
▪ jeśli strona po wczytaniu zawierała domyślne wartości
w polach, te pola nie zostaną wyczyszczone;
▪ w celu wyczyszczenia wszystkich pól należy napisać
skrypt JS lub odpowiednią akcję backendową.
11.12.2017 88
 Kontrolka button
umożliwia tworzenie <form>
<button>
własnych przycisków. <img src="../resources/ladybird.png">
Send!
 W przypadku braku </button>
</form>
kontrolki submit w
formularzu, jej funkcję
pełni pierwsza
kontrolka button.
11.12.2017 89
 W pobliżu kontrolek na ogół tekst z etykietą.

 Proces etykietowania i stylowania etykiet ułatwiony przez
tag <label></label>.
 Dwa sposoby powiązania etykiety z kontrolką:
▪ <label for=„username”>Username:</label>
▪ <label>Username: <input type=„text”….></label>
<form>
<label><input type="radio" name="phoneOs"
value="android" checked>Android</label><br>
value="ios">iOS</label><br>
value="windows">Windows</label><br>
</form>
11.12.2017 90
 W przypadku braku dostępu do

przetwarzania danych po stronie serwera
możliwość wysyłki formularza mailem.
 Wysyłka odbywa się poprzez klienta
pocztowego użytkownika.
 Bardzo złe rozwiązanie.
 <form action=„mailto:user@example.com”
method=„post”>
11.12.2017 91
 Kontrolki typu hidden służą do przesyłania

dodatkowych danych w formularzu.
 Niewidoczne na formularzu.
 Widoczne z narzędzi deweloperskich!
 Zastosowania:
▪ dostarczanie dodatkowych danych dla skryptu na
serwerze
▪ dostarczanie dodatkowych danych dla JS
▪ przesyłanie tokenów CSRF
▪ przesyłanie danych z niestandardowych kontrolek
generowanych przez biblioteki JS
 <input type=„hidden” name=„myField” value=„42”>
11.12.2017 92
 Przesyłanie plików za pomocą kontrolki typu file.

 Wygląd kontrolki zależny od przeglądarki – brak większych
możliwości stylowania.
 Konieczność zmiany typu kodowania formularza (atrybut
enctype) na multipart/form-data.
 Alternatywnie można wykorzystać JS i zawartość pliku
przesyłać w polu hidden w postaci zakodowanej base64.
<form enctype="multipart/form-data">
<input type="file" name="avatar">
</form>
11.12.2017 93
<form>
 Grupowanie pól <fieldset>

<legend>User</legend>
<input type="text" name="firstName"><br>
formularza za pomocą <input type="text" name="lastName">
</fieldset>
<fieldset>
znaczników <legend>Details</legend>
<input type="text" name="dateOfBirth">
</fieldset>
<fieldset></fieldset>. </form>
 Poprawa wyglądu i
organizacji formularzy.
 Etykieta grupy w
znacznikach
<legend></legend>.
11.12.2017 94
 Podstawy.
 Obrazki.
 Hiper łącza.
 Listy.
 Tabele.
 Formularze.
11.12.2017 95
Powered by TCPDF (www.tcpdf.org)

HTML I Css. Część 1.

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML I Css. Część 1.

Uploaded by

Copyright:

Available Formats

Licencja do uzytku indywidualnego dla studenta Natalia Motyli?ska (nr albumu: 20333) do celow nauki w czasie trwania kursu.

Pobrano: 2018-01-27 18:00:34

Programowanie Dokumentów Dynamicznych

 <! DOCTYPE html>

 <html> określa początek dokumentu.

 Opcjonalny tag nagłówka.

 Tag zawierający całą widoczną treść strony.

 Znacznik <br> jedynie dzieli linię.

 Dawniej poprzez tag <u></u>.

 Dostępny dla większości tagów HTML.

 Strona HTML o tytule „PDD”.

 W atrybucie src wskazana ścieżka do pliku.

 Czasami brak możliwości wczytania obrazka:

 Przed umieszczeniem obrazka na stronie

PNG JPG GIF

 Przed wyświetleniem grafiki

 Miara ilości światła,

 Domyślnie obrazek wyświetlany zgodnie z

 Standardowo hiperłącze oznaczone przez niebieski kolor i

<a href=„www.google.pl”>Google Search Engine</a>

cel łącza etykieta łącza

 Możliwość wymuszenia otwarcia łącza w

 Możliwość oznaczenia fragmentów strony za

 Możliwość utworzenia linku do wysyłki maila.

 Elementy tabeli: <body>

 Tabela jak mała strona HTML.

 W przypadku braku określenia

 Właściwość text-align nie przynosi

 Domyślnie brak obramowań.

 W przypadku stylowania całego

 Dawniej z wykorzystaniem atrybutów height i

 Formularze służą do pobierania danych użytkownika.

 Zwykłe pola tekstowe:

 Atrybut maxlength wskazuje maksymalną

 Duże ilości tekstu

 Kontrolki typu radio.

 Wszystkie kontrolki dla <input type="radio" name="phoneOs"

 Lista zamknięta w kontrolce

 Przywrócenie stanu domyślnego formularza za

 W pobliżu kontrolek na ogół tekst z etykietą.

 W przypadku braku dostępu do

 Kontrolki typu hidden służą do przesyłania

 Przesyłanie plików za pomocą kontrolki typu file.

 Grupowanie pól <fieldset>

You might also like