HTML

strona nie wiem o czym

DIV

Kaskadowe arkusze stylów

Przydatne linki

Strona szkoły

Podstawowe pojęcia

HTML od podstaw

Login Form

wstawianie stylów

formularze

Print | Email | Odsłony: 534

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 opcji
  • pole wyboru
  • obszar tekstowy
  • lista wyboru
  • hasło
  • wysyłanie
  • czyszczenie zawartości
  • przycisk

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

Poniżej przykład przycisku obrazkowego.

<form action="*">
<button type="submit"><img src="/sciezka_dostepu_do_obrazka" alt="wyślij" /></button>
</form>
Przykład

multimedia

Print | Email | Odsłony: 515

Jak dodać multimedia do html:

<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 (ang. plug-in), 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 (czyli plug-in) 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 (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.

Należy pamiętać, że pliki multimedialne mają zwykle duże rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed>. W takim przypadku w pierwszej kolejności wczyta się tekst.

Polecenie <embed> sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto należy pamiętać, że pliki multimedialne mają zwykle bardzo duże rozmiary, a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo!

Możliwe jest również bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się powszechnym standardem publikacji elektronicznych. Umożliwia m.in. różnorodne formatowanie tekstu, wstawianie grafiki i inne. Dokumenty PDF można stworzyć np. przy użyciu programu wbudowanego w pakiet biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem Adobe Reader.

Aby można było osadzić na stronie WWW plik PDF, użytkownik oglądający nasz serwis musi mieć zainstalowany program Adobe Reader.

Dodatkowo należy pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..." oraz height="..."), ponieważ jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie "Open".

odsyłacze

Print | Email | Odsłony: 507

Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak  stronę główną). Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo). Umieszczenie wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane (chyba że Twoja strona jest naprawdę krótka)!

Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.

Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca:

<a href="/względna ścieżka dostępu do podstrony">opis odsyłacza</a>
Zasady wpisywania ścieżki dostępu są takie same jak w przypadku obrazków.
Natomiast zamiast: "opis odsyłacza", należy wpisać krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi przejście do podanej podstrony (adres strony jest widoczny tylko w pasku statusu przeglądarki).

tabele

Print | Email | Odsłony: 525

Struktura tabeli

<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.

Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:

<table>
Tabela...
<tr>
	<b><td>...</td></b>	<td>...</td>
</tr>
<br>
<tr>
	<b><td>...</td>	<td>...</td></b>
</tr>
<br>
</table>

czcionka

Print | Email | Odsłony: 690

W pliku HTML lokalnie możemy nadać formatowanie poszczególnym akapitom. W tej lekcji dodamy styl definiujący wielkość, kolor oraz rodzaj czcionki.

WIELKOŚĆ CZCIONKI

Rozmiar czcionki uzyskamy poprzez nadanie akapitowi stylu font-size:

<p style="font-size: small;">Tekst czcionką wielkości small</p>
<p style="font-size: large;">Tekst czcionką wielkości large</p>
<p style="font-size: 2.0em;">Tekst czcionką wielkości 2.0em</p>
Przykład

Tekst czcionką wielkości small

Tekst czcionką wielkości large

Tekst czcionką wielkości 2.0em

KOLOR CZCIONKI

Kolor czcionki uzyskamy poprzez nadanie akapitowi stylu color:

<p style="color: green;">Tekst czcionką koloru zielonego</p>
Przykład

Tekst czcionką koloru zielonego

 

RODZAJ CZCIONKI

Rodzaj czcionki uzyskamy poprzez nadanie akapitowi stylu font-family:

<p style="font-family: arial;">Tekst czcionką Arial</p>
<p style="font-family: verdana;">Tekst czcionką Verdana</p>
<p style="font-family: 'times-new-roman';">Tekst czcionką Times New 
Roman</p>
Przykład

Tekst czcionką Arial

Tekst czcionką Verdana

Tekst czcionką Times New Roman