HTML

Znacznik div jest tot element HTML ogólnego przeznaczenia, grupujący inne elementy w tzw. sekcje. Ma on kształt prostokąta. Znacznika tego używa się najczęściej do utworzenia szkieletu strony. Na stronach internetowej, jak zapewne widzieliście, są bloki treści. Możemy najczęściej rozróżnić bloki o zawartości: banner strony internetowej, kolumna lewa, kolumna prawa, główna treść strony, stopka. Najczęściej te właśnie fragmenty strony umieszcza się w kontenerach (pojemnikach) <div>.

W tych kontenerach można określić parametry tekstu i nie tylko tekstu: dosunięcie do lewej, do prawej, do środka, wyjustować, zmienić kolor itd. itd..

Przykład:

<div>
     <p>ten akapit jest w znaczniku div</p>
</div>

Znaczniki div można również zagnieżdżać :

<div>
    <div>
        <p>ten akapit jest w znaczniku div</p>
    </div>
</div>

14. Znacznik div (materiały dodatkowe)

Przed przystąpieniem do omawiania hiperłączy i kotwic zajmiemy się najpierw adresowaniem, czyli „pokazywaniem” przeglądarce w jakim miejscu w drzewie katalogów strony internetowej znajduje się dany element, czy to plik plik HTML, plik graficzny, plik dźwiękowy, wideo.

Adresowanie względne jest to adresowanie względem pliku, w którym dzieje się akcja. Jeżeli będziemy linkować względem pliku HTML to ścieżki dostępu będziemy generować względem tego pliku. W tym adresowaniu nie interesuje nas gdzie dokładnie znajduje się plik w drzewie katalogów plik do którego linkujemy, ale musimy wiedzieć gdzie względem naszego pliku leży.

Adresowanie bezwzględne: jest to adresowanie od samego początku drzewa katalogów.

15 tree

Częstym elementem stron internetowych są odsyłacze (hiperłącza, linki) prowadzące do innych stron internetowych, dokumentów, grafik.

Umieszczanie linka w dokumencie HTML.

<a href="http://rafalorzelek.pl">Link do strony rafalorzelek.pl</a>

Opis atrybutów, które mogą występować w odnośnikach.

Atrybut

Wartość

Opis

href

url

Określa adres url do zasobu

hreflang

language_code

Określa język do linkowanego zasobu

download

nazwa_pliku

Określa plik do pobrania.

media

media_query

Określa dla jakich urządzeń jest zoptymalizowany linkowany zasób.

name

Nazwa sekcji

Określa nazwę kotwicy w aktualnym dokumencie HTML do którego linkuje odnośnik. W HTML5 należy używać id.

rel

alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag

Określa jakie powiązanie występuje pomiędzy dokumentem, a linkowanym zasobem

shape

default
rect
circle
poly

Określa kształt odnośnika.

coords

coordinates

Określa koordynaty w kształcie odnośnika.

target

_blank
_parent
_self
_top
framename

Określa w jaki sposób lub w jakiej ramce ma się otworzyć linkowany zasób.

W linkach można również używać globalnych atrybutów jakie są w HTML np.: id, class itd.

Atrybuty zaznaczone na czerwono są przestarzałe w HTML5, zaznaczone na zielone nowe w HTML 5

Czasem trzeba przeskoczyć w inne miejsce w tym samym dokumencie HTML. Wcześniej się to robiło poprzez umieszczenie w treści dokumentu HTML tzw. kotwic:

<a name="kotwica">Przykład kotwicy w tekście.</a>

Żeby do takiej kotwicy przeskoczyć należało napisać link w postaci:

<a href="#kotwica">przeskocz do przykładowej kotwicy</a>

W HTML5 robi się to trochę inaczej. Już nie trzeba umieszczać w dokumencie HTML dodatkowych wpisów, a linkujemy do odpowiedniego identyfikatora umieszczonego w dokumencie.

Z pakietu linków można utworzyć proste menu.

Obecnie chyba nie ma strony internetowej na której nie byłoby ani jednej grafiki. Grafikami są banery, guziki do naciskania, piktogramy ułatwiające użytkownikom odnaleźć się na stronie. Czasem są to całe galerie obrazów.

Umieszczanie grafiki na stronie. Do umieszczenia grafiki na stronie stosuje się znacznik <img src="/lokalizacja_obrazu" alt="obraz"/>. Oczywiście znacznik img posiada oczywiście dużo więcej atrybutów (patrz tabelka).

Atrybut

Wartości

Opis

src

src="kwiat.jpg"

Określa lokalizację obrazu. Można używać adresowania względnego jak i bezwzględnego.

alt

alt="kwiatek"

Określa alternatywny tekst, jeżeli wyświetlanie obrazów użytkownik ma wyłączone, lub grafika nie została znaleziona. Pomocny jest również dla użytkowników używających czytnika ekranu.

width

width="100"

Szerokość obrazka w pikselach.

height

height="100"

Wysokość obrazka w pikselach.

border

border="3"

Grubość obramowania.

hspace

hspace="10"

Odsunięcie poziome od innej zawartości strony.

vspace

vspace="10"

Odsunięcie pionowe od innej zawartości strony.

align

left

right

texttop

top

middle

baseline

Umieszczanie grafiki względem tekstu.

niebieskie atrybuty są wymagane
czerwone atrybuty są przestarzałe i należy je zamienić odpowiednimi wpisami w CSS

Tabela w HTML służy do prezentacji danych w formie właśnie tabeli. Dawniej tabel używano również do projektowania układu strony internetowej. Było to dosyć męczące jeżeli należało przenieść dane np. z prawej strony na lewą.

Do tworzenia tabel używa się znaczników:

Znacznik

Opis

<table>

Określa rozpoczęcie tabeli.

<thead>

Określa głowę tabeli.

<tbody>

Określa ciało tabeli.

<tfooter>

Określa stopkę tabeli.

<tr>

Określa wiersz tabeli

<th>

Określa komórkę nagłówkową.

<td>

Określa komórkę „zwykłą” komórkę.

<caption>

Określa podpis tabeli.

<colgroup>

Określa grupę jednej lub kilku kolumn.

<col>

Określa kolumnę w <colgroup>.

Podstawowa składnia tabeli:

<table>
    <tr>
        <td>komórka 1
        <td>komórka 2
        <td>komórka 3
</table>

Tabela z przykładu powyżej posiada 1 wiersz i 3 kolumny. W HTML 5 zamykanie znaczników <tr>, <td>, <th> nie jest wymagane.

Przykład opisu tabeli:

<table>
    <caption>Przykładowa tabela</caption>
    <thead>
        <tr>
            <th>komórka 1
            <th>komórka 2
            <th>komórka 3
    </thead>
    <tbody>
        <tr>
            <td>komórka 1
            <td>komórka 2
            <td>komórka 3
    </tbody>
    <tfoot>
        <tr>
            <td>komórka 1
            <td>komórka 2
            <td>komórka 3
    </tfoot>
</table>

Znaczniki <thead>, <tbody>, <tfoot> nie są wymagane. Przeglądarki mogą te elementy wyświetlać w specjalny sposób np. nie pozwolą nagłówkowi tabeli „schować się” poza stronę.

Atrybuty tabeli

Atrybut

Wartość

Opis

align

left | center | right

Określa pozycję tabeli względem innych elementów na stronie

bgcolor

rgb(x,x,x) |#xxxxxx | colorname

Określa kolor tła tabeli

border

0 | 1

Określa czy tabela będzie posiadała obramowanie

cellpadding

pixele

Określa odstęp między zawartością komórki, a jej brzegiem

cellspacing

pixele

Określa odstępy pomiędzy komórkami

frame

void | above | below | hsides | lhs | rhs | vsides | box | border

Określa która część zewnętrznej ramki będzie widoczna

rules

none | groups | rows | cols | all

Określa która część wewnętrznej ramki będzie widoczna

summary

tekst

Określa podsumowanie zawartości tabeli

width

pixele | %

Określa szerokość tabeli w pikselach lub procentach szerokości strony

Wszystkie atrybuty tabeli są przestarzałe w HTML 5. Należy używać CSS.

Wcześniej tworzyliśmy tabeli o takiej samej liczbie komórek w wierszu. Ale komórki można łączyć ze sobą. Robi się to za pomocą atrybutu colspan i rowspan. Colspan – łączy komórki poziomo, Rowspan – łączy komórki pionowo. Przykład tabeli gdzie komórki zostały połączone poziomo:

<table>
	<tr>
		<td colspan="3">3 komórki połączone
	<tr>
		<td>Jedna komórka
		<td>Jedna komórka
		<td>Jedna komórka
</table>
Przykład tabelki gdzie komórki zostały połączone pionowo
<table>
	<tr>
		<td>Kolumna 1
		<td colspan="3">Kolumna 2
		<td>Kolumna 3
	<tr>
		<td>Kolumna 1
		<td>Kolumna 3
	<tr>
		<td>Kolumna 1
		<td>Kolumna 3
</table>

Oczywiście tabelki mogą być bardziej skomplikowane np.:

 

 

 

 

 

 

 

 

 

 

 

Kod HTML do utworzenia powyższej tabelki

<table>
    <tr>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
        <td colspan="2">Komórka</td>
    </tr>
    <tr>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
        <td>Komórka</td>
    </tr>
    <tr>
        <td>Komórka</td>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
    </tr>
    <tr>
        <td>Komórka</td>
        <td>Komórka</td>
        <td>Komórka</td>
    </tr>
</table>

Formularze służą do pobierania informacji od użytkownika strony internetowej. Dzięki formularzom można stworzy filtry treści na stronie internetowej. Takie formularze możemy znaleźć chociażby w sklepach internetowych.

Formularz w HTML rozpoczyna znacznik <form>, a zamyka </form>. Pomiędzy tymi dwoma znacznikami umieszczamy elementy, które będzie wyświetlała przeglądarka. Tymi elementami mogą być: pola tekstowe, obszar tekstowy, przełączniki opcji, pola wyboru, listy rozwijane. Można te elementy ładnie pokazać i rozszerzyć ich możliwości dzięki na przykład jQuery.

Atrybuty znacznika <form>

atrybut

wartości

 

action

ścieżka | mailto:adres_email?subject=temat

Ścieżka do skryptu wykonywanego po stronie serwera, który obsłuży dane wysłane przez formularz. Może się tam również znaleźć adres email i tytuł maila. Jeżeli to nastąpi to przeglądarka. otworzy domyślnego klienta poczty i napisze maila.

method

post | get

Metoda wysyłania danych. Domyślną wartością jest get, ale jest ona mniej bezpieczna. Metodą get nie należy wysyłać formularzy do logowania się na stronę, ponieważ informacje o naszym loginie i haśle będą widoczne w pasku adresu przeglądarki.

enctype

application/x-www-form-urlencoded

multipart/form-data

Ustala sposób kodowania przesyłanych danych domyślną wartością dla get i post jest application/x-www-form-urlencoded. Jeżeli będziemy chcieli wysyłać pliki na serwer to należy wpisać wartość multipart/form-data. Jesli jednak nie będziemy przesyłać plików to ten atrybut możemy pominąć.

accept-charset

charset

Określa jakie kodowanie znaków będzie używane podczas wysyłania formularza. Domyślnie jest to kodowanie strony.

autocomplete

on | off

Określa czy przeglądarka może samouzupełnić formularz. Wartość domyślna to on

name

 

Określa nazwę formularza to identyfikacji

novalidate

 

Informuje przeglądarkę, żeby nie sprawdzała formularza pod kątem ewentualnie wpisanych błędów, np.: tam gdzie ma być wpisana liczba jest wpisany znak.

target

 

Określa w jaki sposób ma się zachować przeglądarka po wysłaniu formularza (domyślna wartość _self)

Wcześniej powiedzieliśmy sobie do czego służą formularze w HTML. Teraz zajmiemy się kontrolkami, czyli różnymi rodzajami pól w formularzu.

Kontrolka input: jest to kontrolka, która ma wiele wyglądów i sposobów działania. Wszystko opiera się na jej typie. My będziemy się zajmować na tej lekcji typem text i password. O innych typach powiemy sobie na późniejszych lekcjach.

Input o typie text pozwala nam na wpisanie znaków w pole. Pole to jest jednolinijkowe.

Kod który pokaże nam to pole wygląda następująco:

<input type="text" >

Nie trzeba zamykać znacznika.

Drugim typem który pozwala nam na wpisanie tekstu jest typ password. Wykorzystuje się ten tym wszędzie tam, gdzie trzeba pobrać najczęściej hasło od użytkownika, a nie chcemy, aby ktoś postronny podejrzał to hasło.

Wywołanie pola password:

<input type="password" >

Atrybuty znacznika input

atrybut

wartości

opis

type

text | radio | checkbox | password | hidden | submit | reset | button | image | file

Typ pola

type

color | date | datetime-local |email | month | number | range |search | tel | time | url | week

 

Dodatkowe typy, które są nowe w HTML5. Typy te nie są wspierane w starszych przeglądarkach – będzie się wyświetlać tekst.

name

<input type="tekst" name="imie" >

Określa nazwę pola. Wykorzystuje się ten atrybut do określenia w skrypcie obrabiającym dane co dane pole zawiera

readonly

<input type="tekst" name="imie" readonly>

Określa czy pole jest tylko do odczytu

disabled

<input type="tekst" name="imie" disabled>

Określa pole wyłączone

size

<input type="tekst" name="imie" size="40">

Określa ile znaków będzie widocznych w kontrolce

maxlength

<input type="tekst" name="imie" maxlength="40">

Określa ile znaków może użytkownik wpisać.

value

<input type="tekst" name="imie" value="Janek">

Określa startową wartość pola

 

Nowe atrybuty w HTML 5

autocomplete ( on | off )

<input type="tekst" name="imie" autocomplete="on">

Określa czy przeglądarka może uzupełnić formularz danymi, które użytkownik wpisał wcześniej. Działa z kontrolkami: text, search, url, tel, email, password, datepickers, range i color oraz form

novalidate

<form action="/action_page.php" novalidate>

</form>

Określa czy przeglądarka może sprawdzić dane wpisane przez użytkownika przed wysłaniem formularza

autofocus

<input type="tekst" name="imie" autofocus>

Określa, w którym polu będzie pierwsze aktywne (będzie się znajdował kursor) po załadowaniu strony

form

<form action="/action_page.php" id="form1">

</form>

<input type="tekst" name="imie" form="form1">

 

Określa, że dane pole poza formularzem jest częścią tego formularza

formaction

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

 

Atrybut nadpisuje atrybut action znacznika form. Czasem jest potrzeba aby dwa różne guziki wysyłania formularza, wysyłały formularz w do dwóch różnych skryptów.

Używany tylko z type=”submit” i type=”image”

formenctype

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

 

Atrybut nadpisuje atrybut enctype znacznika form.

Używany tylko z type=”submit” i type=”image”

formmethod

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

 

Atrybut nadpisuje atrybut method znacznika form.

Używany tylko z type=”submit” i type=”image”

formnovalidate

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate
value="Submit without validation">
</form>

Atrybut nadpisuje atrybut novalidate znacznika form.

Używany tylko z type=”submit”.

formtarget

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"  value="Submit to a new window">
</form>

 

Atrybut nadpisuje atrybut target znacznika form.

Używany tylko z type=”submit” i type=”image”.

height oraz width

<input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">

 

Określa wysokość i szerokość grafiki. Należy zawsze określić wielkość grafiki. W innym przypadku strona będzie nam skakać, pływać.

min oraz max

 Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Określa minimalną i maksymalną wartość jaką może przyjąć wartość w input.

Działa z number, range, date, datetime-local, month, time oraz week.

multiple

 Select images: <input type="file" name="img" multiple>

Określa czy użytkownik może podać więcej niż jedną wartość. Działa z email oraz file.

pattern

 Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">

Określa w jaki sposób sprawdzić czy dane, króre wpisał użytkownik są prawidłowe. Używa się do tego wyrażeń regularnych.

Działa z text, search, url, tel, email oraz password

placeholder

 <input type="text" name="fname" placeholder="First name">

Określa tekst, który będzie się wyświetlał przed tym co użytkownik wpisze. Działa z text, search, url, tel, email oraz password.

required

 Username: <input type="text" name="usrname" required>

Określa czy dane pole musi być wypełnione przed wysłaniem formularza. Działa z text, search, url, tel, email, password, date pickers, number, checkbox, radio oraz file.

step

 <input type="number" name="points" step="3">

Określa skok o jaki należy zwiększyć zmienną w kontrolce

Wiele nowości wprowadzonych w HTML5 nie jest jeszcze w pełni obsługiwana przez przeglądarki, więc czasem zamiast określonej kontrolki otrzymamy pole do wpisania tekstu.

Drugą omawianą kontrolką jest textarea. Różni się od kontrolki <input type="text"> <input type="password"> tym, że tutaj dostajemy dużo większe pole do wpisywania tekstu.

Atrybuty textarea.

Attribute

Value

Description

autofocus

autofocus

Określa czy kontrolka ma być aktywna po wczytaniu strony

cols

number

Określa ilość kolumn znaków

dirname

textareaname.dir

Określa kierunek tekstu podczas wysyłania formularza

disabled

disabled

Określa czy pole jest wyłączone

form

form_id

Określa do jakiego formularza należy to pole

maxlength

number

Określa ile znaków może wpisać użytkownik w pole

name

text

Określa nazwę pola

placeholder

text

Określa podpowiedź na temat tego pola

readonly

readonly

Określa czy pole jest tylko do odczytu

required

required

Określa czy pole musi być wypełnione

rows

number

Określa widoczną liczbę wierszy

wrap

hard
soft

Określa czy automatycznie powstające znaki przejścia do nowej linii będą automatycznie dołączane do wysyłanego formularza.

Atrybuty zaznaczone na zielono wprowadza HTML5.

21. Formularze - input, textarea (przykłady)

Kolejnymi kontrolkami jakie poznacie to będzie radio i checkbox.

Kontrolka radio to taki przełącznik. W danej grupie (o tym samym atrybucie name) może być zaznaczona tylko jedna opcja. Zazwyczaj przeglądarki wyświetlają te opcje jako kółeczka.

Przykład kontrolki radio:

<input type="radio" name="plec" value="m" /> Mężczyzna
<input type="radio" name="plec" value="k" /> Kobieta

Atrybuty kontrolki radio.

atrybut

opis

autofocus

określa aktywną kontrolkę po wczytaniu strony

checked

określa wartość stanu kontrolki, czy jest zaznaczona

defaultChecked

określa wartość atrybutu checked

defaultValue

określa domyślną wartość kontrolki

disabled

określa czy kontrolka jest aktywna

form – form="formularz"

informuje przeglądarkę, że dana kontrolka jest częścią formularza

name

określa nazwę, grupę kontrolek radio

required

określa czy grupa kontrolek musi zwracać wartość. Czy coś musi być wybrane.

type

określa typ atrybutu input. W tym przypadku jest to radio

value

określa jakie dane zostaną przesłane poprzez formularz po wybraniu tej kontrolki.

Atrybuty zaznaczone na zielono wprowadza HTML5.

Kontrolka checkbox to opcja. W formularzu można zaznaczyć „ptaszkiem” wszystkie tego typu kontrolki w przeciwieństwie do kontrolki radio.

Atrybuty kontrolki checkbox

atrybut

opis

autofocus

określa aktywną kontrolkę po wczytaniu strony

checked

określa wartość stanu kontrolki, czy jest zaznaczona

defaultChecked

określa wartość atrybutu checked

defaultValue

określa domyślną wartość kontrolki

disabled

określa czy kontrolka jest aktywna

form – form="formularz"

informuje przeglądarkę, że dana kontrolka jest częścią formularza

indeterminate

określa czy kontrolka jest kontrolką grupującą inne kontrolki checkbox.

name

określa nazwę, grupę kontrolek radio

required

określa czy grupa kontrolek musi zwracać wartość. Czy coś musi być wybrane.

type

określa typ atrybutu input. W tym przypadku jest to radio

value

określa jakie dane zostaną przesłane poprzez formularz po wybraniu tej kontrolki.

Atrybuty zaznaczone na zielono wprowadza HTML5.

Następną kontrolką, którą poznacie to select – lista rozwijana. Wygląda trochę inaczej od strony html od kontrolki input.

Podstawowe wywołanie select:

<select name="wybor">
    <option value="opcja1">Opcja 1</option>
    <option value="opcja2">Opcja 2</option>
    <option value="opcja3">Opcja 3</option>
</select>

Atrybut kontrolki select:

atrybut

opis

autofocus

ustawia kontrolkę jako aktywną po załadowaniu strony

disabled

określa czy kontrolka jest aktywna

form
form="form_id"

określa, że dana kontrolka należy do formularza podanego w atrybucie

multiple

określa czy można wybrać z listy więcej niż jedną opcję

name

określa nazwę kontrolki

required

określa czy na kontrolce musi być wybrana jakaś opcja

size

określa ilość widocznych wierszy w liście

Zaznaczone na zielone atrybuty są nowe w html5