12-345-678

E-mail

Suport

HTML

Selektory

Super User
Kategoria: Bez kategorii

Selektor typu

selektor { cecha: wartość }
gdzie wyrazem selektor może być praktycznie dowolny znacznik, np. p, h1, td i inne. To właśnie elementom znajdującym się pomiędzy tymi znacznikami, nadajemy atrybuty formatowania.
Wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Tutaj będą przedstawione jedynie selektory.

Selektor typu jest podstawowym rodzajem selektora. Pozwala on wybrać pojedynczy zwykły element dokumentu HTML podanego typu, czyli o określonej nazwie, a następnie nadać mu atrybuty. Można powiedzieć, że selektor ten to inaczej element, występujący w kodzie źródłowym strony.

Wstawianie stylów

Super User
Kategoria: Bez kategorii

Zewnętrzny arkusz stylów

<head>
	(...)
	<link rel="Stylesheet" href="/style.css">
	(...)
</head>
gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej.

Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu.

Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony. Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów.

W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="Stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko jeden arkusz stylów, a na podstronach kategorii tematycznych - po dwa.

A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Jest on po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css

Multimedia

Super User
Kategoria: Bez kategorii

Obrazek

<img src="/ścieżka dostępu" alt="Tekst alternatywny">
gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Ponadto w MSIE może zostać wyświetlona po wskazaniu obrazka myszką.
Osadzanie pliku
<embed src="/ścieżka dostępu do pliku" width="x" height="y">
gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację na dysku, gdzie znajduje się żądany plik multimedialny.
Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki, czyli okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy rozmiarów obrazu wtyczki, może on przyjąć wielkość, która nie pasuje do wymiarów pliku! Rozmiary zależą również od posiadanej przez użytkownika wtyczki.

Polecenie <embed> jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:

  • *.wav - plik dźwiękowy typu "wav"
  • *.mid - plik dźwiękowy typu "midi"
  • *.avi - plik typu "avi"
  • *.ra - plik Real Audio Player
  • *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
  • *.mpeg - plik typu "mpeg"
  • *.mov - plik typu "mov"
  • *.asf - plik typu "asf"
  • i inne

Polecenie to współpracuje z różnymi wtyczkami, dzięki którym teoretycznie może odtwarzać nowe formaty plików multimedialnych. Wtyczka to specjalny niewielki program, który można doinstalować do przeglądarki, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno, w którym będzie odtwarzany wskazany plik.

Formularze

Super User
Kategoria: Bez kategorii

Stosowanie formularzy na stronie umożliwia zebranie informacji oraz ułatwia komunikację z użytkownikami.

STRUKTURA FORMULARZA

<form action="*">
Pola formularza
</form>

* - adres e-mail, ścieżka dostępu do skryptu

WYSYŁANIE POCZTY

Aby wysłać wiadomość ze strony w poleceniu action należy podać adres e-mail oraz określić metodę:

  • method="post" (wysyłamy)
  • method="get" (pobieramy)
Przykład 
<form action="mailto:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript." method="post">
Pola formularza
</form>

RODZAJE PÓL FORMULARZA

POLE TEKSTOWE

Pole tekstowe określamy za pomocą input.

<form action="*">
<label>Nazwisko</label> <input type="text" name="nazwisko" />
</form>
Przykład 
  • type - typ pola
  • name - nazwa powinna być inna dla każdego pola

Formatowanie pola tekstowego.

<form action="*">
<label>Nazwisko</label> <input type="text" name="nazwisko" size="50" maxlength"30" />
</form>
  • size - rozmiar pola
  • maxlength - maksymalna ilość znaków
Przykład 

POLE OPCJI

Pole opcji ustalamy za pomocą typu radio.

<form action="*">
<input type="radio" name="radio" value="wartość" />
</form>
  • type - typ pola
  • name - nazwa powinna być inna dla każdego pola
  • value - wartość inna dla każdej odpowiedzi

Przycisk typu radio umożliwia zaznaczenie jednej opcji.

Przykład A  B  C

POLE WYBORU

Pole wyboru ustalamy za pomocą typu checkbox.

<form action="*">
<input type="checkbox" name="checkbox" value="wartość" />
</form>
  • type - typ pola
  • name - nazwa powinna być inna dla każdego pola
  • value - wartość inna dla każdej odpowiedzi

Przycisk typu checkbox umożliwia zaznaczenie wielu opcji.

Przykład A  B  C

OBSZAR TEKSTOWY

Obszar tekstowy ustalamy za pomocą text-area.

<form action="*">
<textarea name="texarea"></textarea>
</form>
Przykład

LISTA WYBORU

Listę wyboru ustalamy za pomocą select.

  • Lista rozwijana
<form action="*">
<select name="select">
<option>Opcja</option>
</select>
</form>
Przykład
  • Lista z możliwością zaznaczenia kilku opcji
<form action="*">
<select name="multiple" multiple="multiple">
<option>Opcja</option>
</select>
</form>
Przykład

HASŁO

Hasło ustalamy za pomocą typu password.

<form action="*">
<label>Hasło</label> <input type="password" name="haslo" />
</form>
Przykład 

WYSYŁANIE

Wysyłanie ustalamy za pomocą typu submit.

<form action="*">
<input type="submit" value="Wyślij" />
</form>
Przykład

CZYSZCZENIE ZAWARTOŚCI

Czyszczenie zawartości ustalamy za pomocą typu reset.

<form action="*">
<input type="reset" value="Wyczyść formularz" />
</form>
Przykład
Nazwisko 

 A
 B
 C

PRZYCISK

Przycisk ustalamy za pomocą button. W odróżnieniu od dwóch powyższych sposobów daje więcej możliwości sformatowania jego wyglądu.

<form action="*">
<button type="typ"></button>
</form>

Typy przycisku:

  • button - domyślny
  • submit - wysyłanie
  • reset - kasowanie
<form action="*">
<button type="submit">Wyślij formularz</button>
</form>
Przykład

Tabele

Super User
Kategoria: Bez kategorii 
<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.