Strona Mateusza Dutkiewicza - Kurs HTML

Logo ! kliknij

KURS HTML

Jak tu trafiłeś drogi internauto znaczy, że interesuje cię stworzenie strony WWW nie używając żadnego (często drogiego) programu, który te wszystkie robaczki wpisze za ciebie. Na tych stronach postaram się przekazać ci podstawy języka na którym opierają się współczesne strony WWW. Stron o podobnej treści znajdziesz dużo w sieci, ale ja postaram się przekazać ci tę wiedzę w łatwy i zrozumiały sposób. Cały kurs podzieliłem na kategorie, które będą dotyczyć innego zagadnienia, a więc po co jeszcze to czytasz zapraszam.

WSTĘP DO HTML STRUKTURA DOKUMENTU TEKST WYKAZY ŁĄCZA

GRAFIKA I MULTIMEDIA TABELE RAMKI FORMULARZE KOLORY ZNAKI SPECJALNE HTML W SKRÓCIE

Copyright © 2000 by Mateusz Dutkiewicz. All rights reserved.


Strona Mateusza Dutkiewicza - Wstęp do języka HTML

WSTĘP DO JĘZYKA HTML

Na początek postaram się przybliżyć wam trochę z czym się je ten język . HTML 4.0 jest to język opisu stron WWW używanym w internecie. Pozwala opisać, jak mają być przedstawione strony w oknie przeglądarki. Jego cechą szczególną są odnośniki, zwane również hiperłączami. Klikając na nie, możemy się przenosić na inne strony w sieci. Numer na końcu oznacza kolejną, czwartą wersję tego języka i jest ona obecnie standardem. Każdy kto śledził treść strony zapisanej w tym języku od razu pewnie zauważył, że polecenia mają bardzo dużo wspólnego z językiem angielskim bo tak w rzeczywistości jest i dla osoby znającej ten język nauka będzie trochę łatwiejsza. Jako przykład można tu podać polecenie nadania koloru tła bgcolor="#jakiś kolor", bg to skót od słowa background czyli tło, a color to kolor. W dalszym toku nauki pewnie zauważycie wiele takich przykładów. Kurs napisałem z myślą o początkujących webmasterach, bo każdy chce mieć swoją stronę, każdy chce coś przekazać, zaistnieć wśród milionów. Przepraszam z góry za błędy które mogą wystąpić gdyż języka HTML uczyłem się sam. Metodą prób i błędów dochodziłem do wszystkiego co tu przeczytacie. Kurs będzie stale rozwijany i jeżeli ktoś znajdzie błąd poprawiany. Dla ułatwienia zastosowałem dwa kolory: żółty to informacje dotyczące jakiegoś znacznika zapamiętajcie, że tego co na żółto nie wpisujemy. Kolor zielony to polecenia HTML, które należy umiescić na stronie, aby wszystko poprawnie działało. To tyle słowem wstępu zapraszam dalej .

[WSTĘP DO HTML] [STRUKTURA DOKUMENTU] [TEKST] [WYKAZY] [ŁĄCZA] [GRAFIKA I MULTIMEDIA] [TABELE] [RAMKI] [FORMULARZE] [KOLORY] [ZNAKI SPECJALNE] [HTML W SKRÓCIE]


Strona Mateusza Dutkiewicza - Struktura dokumentu

Struktura dokumentu

Nasz dokument można zobrazować tym prostym rysunkiem. Dokument HTML podzielony jest na dwie sekcje <HEAD> i <BODY> . Sekcja <HEAD> jest czymś w rodzaju głowy naszego dokumentu w niej umieszczamy informacje dotyczące naszej strony czyli: autora, nazwę strony, słowa kluczowe dzięki którym wyszukiwarka będzie mogła odnaleźć naszą stronę w sieci, kodowanie naszej strony i inne. Sekcja <BODY> to "ciało" naszego dokumentu czyli to co ma wyświetlać przeglądarka są to różnego rodzaju obiekty graficzne, skrypty no i oczywiście informacje w postaci tekstowej, które chcemy przekazać innym użytkownikom sieci. Na początku nasz dokument powinien wyglądać tak :

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Polecenia </HEAD> i </BODY> kończą obydwie sekcje naszego dokumentu. Teraz do sekcji HEAD wpiszemy podstawowe informacje dotyczące naszej strony. Do tego posłuży nam znacznik META. Wyróżniamy kilka podstawowych znaczników META
http-equiv=" "
name

         =
         "keywords"
"description"
"autor"
"generator"

Znacznik <meta http-equiv="Content-Type" content="text/html; charset=tu należy wpisać typ kodowania strony np. iso-8859-2"> określi zawartość naszej strony i typ jej kodowania. Znacznik <meta name="keywords"content="tu, wpisujemy, słowa, które, kojarzą, się, z, zawartością, naszej, strony, mogą, być, oddzielone, przecinkami, lub, spacjami, liczba, znaków, użytych, w, tym, znaczniku, nie, może, przekroczyć, 1000 "> czyli jeżeli dla przykładu nasza strona zawiera kurs HTML to powinna zawierać np. takie kluczowe słowa jak: HTML, kurs ,nauka, opis, strony, i inne słowa które piszącemu się skojarzą. Kolejnym znacznikiem jest <meta name="description" content="opis zawartości strony czyli np. Ta strona zawiera kurs HTML"> . Następny to <meta name="GENERATOR" content="tu powinna znajdować się nazwa programu w jakim została napisana strona może być to np. NOTEPAD"> . <meta name="autor" content="tu wpisujemy swoje imię i nazwisko np. Mateusz Dutkiewicz" >. Ostatnim krokiem jest nadanie naszej stronie tytułu. Tytuł ten będzie wyświetlany w pasku tytułu przeglądarki. Do umieszczenia tytułu służy polecenie <title> . Do sekcji HEAD wpisujemy <title>nazwa naszej strony np. Kurs HTML</title> . To by były najważniejsze elementy które powinniśmy umieścić w sekcji HEAD. Zajmijmy się teraz sekcją BODY. Tu umieszczamy zawartość naszego dokumentu. Pierwsza czynnością jest określenie tła , koloru tekstu naszej strony, koloru aktywnego łącza, i koloru użytego łącza. Polecenie background="plik .gif lub .jpg" ustawia jako tło plik w formacie gif albo jpg. Polecenie bgcolor="#kod koloru RGB" określi nam kolor tła. Następnym poleceniem jest text="#kod koloru RGB" określi nam kolor tekstu na stronie. Dalej mamy dwa polecenia określające kolor łącz pierwsze do aktywnego łącza link="#kod koloru RGB" i drugi do łącza użytego vlink="#kod koloru RGB" . Aby każdy wiedział jaki kod ma kolor umieściłem pomocniczą tabelkę . Wszystkie te informacje umieszczamy w następujący sposób <BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#008000" > . Ta linijka spowoduje wyświetlenie czarnego tła, białego tekstu, link aktywny będzie żółty, a link użyty będzie zielony.

Do struktury dokumentu możemy wstawić komentarz który nie będzie wyświetlany przez przeglądarkę służy do tego nasępująca kolejność znaków: rozpoczyna go <!-- a kończy --> .

To wszystkie informacje dotyczące struktury dokumentu. Nasza strona po wpisaniu przykładowych danych powinna wyglądać tak:

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset= iso-8859-2">
<meta name="keywords"content="HTML, kurs ,nauka, opis, strony ">
<meta name="description" content="Ta strona zawiera kurs HTML">
<meta name="GENERATOR" content="NOTEPAD">
<meta name="autor" content=" Mateusz Dutkiewicz" >
<title>Kurs HTML</title>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#008000" >
<!-- Poniżej znajduje się kurs HTML -->
</BODY>
</HTML>


Strona Mateusza Dutkiewicza - Tekst

TEKST

Podstawową zawartość każdej strony WWW stanowi tekst. W tym miejscu dowiecie się jak właśnie o tekst wzbogacić waszą stronę.

Nasza strona jeżeli ma być w języku polskim powinna być w standardzie kodowania polskich znaków ISO-8859-2. Tworząc dokument HTML w miejsce litery z ogonkiem wstawiamy jej odpowiednią numerację, zapisywaną w postaci &#xxx i tak dla przykładu wyraz gżegżółka wpiszemy tak:<p>g&#380eg&#380&#243&#322ka</p>. Może sprawiać problemy zapamiętywanie jaki numer ma litera z ogonkiem w tym celu stworzono kilka programów które konwertują polskie znaki do wybranej przez nas strony kodowej. Większość jednak edytorów HTML automatycznie je konwertuje, ale jeżeli tworzymy stronę w zwykłym NOTATNIKU to musimy tak wpisywać te litery:
&#260 - Ą
&#261 - ą
&#262 - Ć
&#263 - ć
&#280 - Ę
&#281 - ę
&#321 - Ł
&#322 - ł
&#323 - Ń
&#324 - ń
&#211 - Ó
&#243 - ó
&#346 - Ś
&#347 - ś
&#377 - Ź
&#378 - ź
&#379 - Ź
&#380 - ż
Ta sama zasada dotyczy wpisywania niektórych znaków tu umieściłem tabelkę ze znakami specjalnymi .

Na początku tworzymy nagłówek <H1></H1> jest to nagłówek 1 stopnia, możemy tworzyć nagłówki od 1 do 6 stopnia. 6 stopień tworzy najmniejszy nagłówek. Do tego znacznika możemy dodać atrybut TITLE:<H1 TITLE="Opis nagłówka, który jest interpretowany przez IE i powoduje wyświetlenie dymka">Nagłówek</H1>.

Przykład:

Nagłówek

Tworzymy akapit

W celu utworzenia akapitu wstawiamy parę znaczników <p></p>. <p> rozpoczyna akapit, a </p> kończy. Pomiędzy nimi umieszczamy tekst. Znacznik ten może mieć kilka atrybutów formatujących tekst:

Określamy do której strony ma być wyrównywany tekst:

<p align="left">

<p align="center">

<p align="right">

Potem określamy wielkość czcionki <font size="od 1 do 7"> jej rodzaj <face="np. Arial"> i jej kolor jeżeli ma być inny niż ten który ustaliliśmy na początku w sekcji BODY < color="RGB"> wszystko to składamy w następujący sposób <p align="center"><font size="5" face="Arial" color="#00FF00">Tu wisujemy nasz tekst który ma być wyświetlony na naszej stronie Kończymy go wisując :</font></p>. Efektem jest wyświetlenie na stronie wyśrodkowanego tekstu koloru żółtego i wielkości 5 czcionką Arial. Na naszej stronie niestety możemy używać tylko kilku rodzajów czcionek bo jeżeli użyjemy takiej której nie ma nasz czytelnik wtedy nic on nie przeczyta. Do podstawowych należą Arial, Helvetica i Times New Roman. Dla przykładu napiszę słowo "czcionka" w czcionce MandarinD , której akurat możecie nie mieć i zobaczycie efekt na ekranie" czcionka. " Powinna wyglądać mniej więcej tak:

Nasz tekst możemy odpowiednio formatować. Możemy sprawić by był on pogrubiony, pochylony lub podkreślony. Do tego celu służą następujące polecenia <b>TEKST POGRUBIONY</b>, <i>TEXT POCHYLONY</i>, <u>TEKST PODKREŚLONY</u>. By np. stworzyć tekst podkreślony i pochylony łączymy te polecenia <i><u>TEKST</u></i>.

Znacznik końca wiersza <BR> kończy linijkę tekstu i zaczyna nową:

Ten kurs jest przeznaczony dla poczatkujacych
(nastąpiło przeniesienie) webmasterów.

Język HTML umożliwia nam oddzielanie fragmentów tekstu liniami aby to zrobić wpisujemy <hr width="50%" size="5" color="#FF0000"> otrzymujemy wtedy taką linię:

Parametr width określa jej długość size szerokość, a color kolor w RGB .

Na koniec wszystko dla moich przykładów powinno wyglądać tak:

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset= iso-8859-2">
<meta name="keywords"content="HTML, kurs ,nauka, opis, strony ">
<meta name="description" content="Ta strona zawiera kurs HTML">
<meta name="GENERATOR" content="NOTEPAD">
<meta name="autor" content=" Mateusz Dutkiewicz" >
<title>Kurs HTML</title>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#008000" >
<!-- Poniżej znajduje się kurs HTML -->
<H1 TITLE="KURS HTML">KURS HTML</H1>
<p align="center"><font size="5" face="Arial" color="#00FF00"><i><u>Tu wisujemy nasz tekst kt&#243ry ma by&#263 wy&#347wietlony na naszej stronie b&#281dzie on pochylony i podkre&#347lony</u></i></font></p>
<hr width="50%" size="5" color="#FF0000">
</BODY>
</HTML>


Strona Mateusza Dutkiewicza - Wykazy

WYKAZY

Do tworzenia wykazów nie uporządkowanych służy znacznik <UL></UL>. <LI> to znacznik punktujący nasze dane. Wypunktowanie może mieć różny kształt <UL type="disc lub circle lub square">.

Przykład:

<UL type="circle">

<LI>Ala

<LI>Ola

<LI>Ula

</UL>

W po wpisaniu otrzymamy:

  • Ala
  • Ola
  • Ula

Do tworzenia wykazów numerowanych służy znacznik <OL></OL>. Może on mieć różne parametry START=x , który zaczyna numerowanie od dowolnej cyfry, TYPE=x określający typ numerowania listy: <OL TYPE=A> numerowanie według wielkich liter, <OL TYPE=a> numerowanie według małych liter, <OL TYPE=I> numerowanie według wielkich liczebników rzymskich, <OL TYPE=i> numerowanie według małych liczebników rzymskich, <OL TYPE=1> numerowanie według liczebników arabskich.

Przykład:

<OL START=20 TYPE=I>

<LI>Ala

<LI>Ola

<LI>Ula

</OL>

 W po wpisaniu otrzymamy:

  20. Ala
  21. Ola
  22. Ula

Aby wykazy miały rozbudowaną strukturę tworzymy coś w rodzaju drzewa np:

<OL TYPE=I>

 W po wpisaniu otrzymamy:

  1. Ala
    1. koleżanka Oli
    2. koleżanka Uli
      1. koleżanka Baby
      2. koleżanka Jagi
  2. Ola
    1. koleżanka Ali
    2. koleżanka Uli
  3. Ula
    1. koleżanka Ali
    2. koleżanka Oli

<LI>Ala

<OL>

<LI> koleżanka Oli

<LI> koleżanka Uli

<OL TYPE=a>

<LI> koleżanka Baby

<LI> koleżanka Jagi

</OL>

</OL>

<LI>Ola

<OL>

<LI> koleżanka Ali

<LI> koleżanka Uli

</OL>

<LI>Ula

<OL>

<LI> koleżanka Ali

<LI> koleżanka Oli
</OL>


Strona Mateusza Dutkiewicza - Łącza

Tworzymy łącza

Kolejnym naszym krokiem jest stworzenie łączy do innych podstron naszej strony. W tekście chcieli byśmy mieć różnego rodzaju odnośniki, a po kliknięciu na nasz adres otwierał się program pocztowy z nowym listem zaadresowanym do nas. Wszystkiego tego zaraz postaram się was nauczyć.

Aby stworzyć aktywne łącze którym ma być fragment tekstu w miejsce pomiędzy poleceniem określającym położenie tekstu, a kolorem, rodzajem i wielkością czcionki wpisujemy: <a href="jakiśplik.htm lub jakiśplik.html" target=" np.nazwa ramki"> . Polecenie href określa łącze tu do jakiego pliku ma być aktywne łącze, a polecenie target określa miejsce wyświetlenia strony może być ona wyświetlona w nowym oknie przeglądarki, albo w dowolnie wybranej ramce, albo w tym samym miejscu co obecna strona. Każde łącze kończymy znacznikiem </a> np:<p><a href="jakiśplik.htm">Łącze</a></p> . Na naszej stronie możemy tworzyć także odnośniki np. do dowolnie przez nas wybranego wersu. Tworzymy je podobnie. Działa to w następujący sposób: " do początku strony " . Po kliknięciu (jeżeli ta strona jest w małej rozdzielczości lub oknie) przeskakujemy na górę strony. Tworzy się to tak, że w miejscu do którego mamy przeskoczyć wstawiamy <a name="tu nazwę odnośnika">. Następnie tworzymy łącze do tego odnośnika <a href="#nazwa naszego odnośnika">. Łączem nie musi być koniecznie tekst, ale także dowolny obrazek wstawiony na naszą stronę. Na koniec pozostało nam stworzenie łącza, które powodowałoby otwarcie nowego listu zaadresowanego do nas w tym celu wstawiamy następujący znacznik: <a href="mailto:nasz e-mail np.mateusz@dudzio.prv.pl">. To już chyba wszystko na temat tworzenia łączy nasza strona po dodaniu łacza powinna wyglądać na przykład tak:

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset= iso-8859-2">
<meta name="keywords"content="HTML, kurs ,nauka, opis, strony ">
<meta name="description" content="Ta strona zawiera kurs HTML">
<meta name="GENERATOR" content="NOTEPAD">
<meta name="autor" content=" Mateusz Dutkiewicz" >
<title>Kurs HTML</title>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" vlink="#008000" >
<!-- Poniżej znajduje się kurs HTML -->
<p align="center"><font size="5" face="Arial" color="#00FF00"><i><u>Tu wisujemy nasz tekst który ma być wyświetlony na naszej stronie będzie on pochylony i podkreślony</u></i></font></p>
<hr width="50%" size="5" color="#FF0000">
<p align="center"><font size="5" face="Arial" color="#FFFFFF">Ten fragment jest o tworzeniu łączy tu wstawiłem łącze pocztowe<a href="mailto:mateusz@dudzio.prv.pl">Poczta</font></a></p>
</BODY>
</HTML>


Strona Mateusza Dutkiewicza - Grafika i multimedia

Grafika i multimedia

Nasza strona oczywiście powinna posiadać jakąś grafikę. Na stronę możemy wstawić ilustracje w takich formatach jakie obsługują przeglądarki do najpopularniejszych należą jednak dwa .gif i .jpg . Nasza strona może także zawierać muzykę w formacie .mid, .wav , .ra lub .mp3 . Możemy na naszą stronę wstawić także filmy. Niestety jednak za duża ilość grafiki, zbędne efekty dźwiękowe i kilkunasto megowe filmy są niewskazane gdyż taka strona mogłaby się nam wgrywać pół dnia. Jeżeli chcemy muzykę to najlepiej w tle i w formacie .mid bo plik taki zajmuje mało i bardzo nie opóźnia ładowania strony. Grafika na naszej stronie taż nie powinna opóźniać ładowania. Obrazek wielkości 800 KB nie nadaje się np. na tło naszej strony. Jeżeli chcemy umieścić nasze zdjęcia to powinny być one w formacie .jpg ,a elementy graficzne takie jak np. przyciski w formacie .gif , a to dlatego, że zdjęcia zapisane w formacie .gif stracą bardzo na jakości. Dobrze jest zaopatrzyć się w program, który zmniejsza wielkość pliku .jpg i .gif może być to np. Ulead Smart Saver. Tyle słowem wprowadzenia teraz pokażę wam jak umieścić to wszystko na naszej stronie.

Wstawiamy grafikę do dokumentu konstrukcją <IMG SRC="plik_graficzny">Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka. <IMG SRC="tucows.gif" HEIGHT=150 WIDTH=200> to polecenie spowoduje, że nasz obrazek będzie miał wysokość (HEIGHT) równą 150 i długość (WIDTH) równą 200.Parametrem BORDER=x wyświetlimy ramkę o grubości równej x pikseli:<IMG SRC="jakiś_obrazek.gif" WIDTH=120 HEIGHT=160 BORDER=10>.<IMG SRC="obrazek" ALIGN=left lubright lubtop lubbottom lubmiddle> sprawi, że nasz obrazek zostanie oblany tekstem z lewej lub prawej lub tekst będzie zaczynany od góry lub dołu lub środka obrazka. Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron np:<IMG SRC="jakiś_obrazek.gif" ALT="Kurs HTML" WIDTH=148 HEIGHT=84 BORDER=10>(patrz przykład) .Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER>(patrz przykład)</CENTER>.

PRZYKŁAD:

Z dźwiękim na naszej stronie będzie mały problem bo są dwa typy odsyłaczy jeden obsługiwany przez Internet Explorera, a drugi przez Netscape'a. I tak:

Plik dźwiękowy WAV (styl Netscape) - <embed src="muzyczka.wav" border=0 width=x height=y>

Plik dźwiękowy WAV (styl Microsoft) <bgsound src="muzyczka.wav" loop=infinite>

Plik dźwiękowy MIDI (styl Netscape) - <embed src="muzyczka.mid" border=0>

Plik dźwiękowy MID (styl Microsoft) <bgsound src="muzyczka.mid" loop=infinite>

loop=xoznacza liczbę powtórzeń. Loop=infinitenakazuje powtarzać dźwięk bez końca.
balance=x(x=-10000;10000) określa równowagę między głośnikami w przypadku dźwięku stereofonicznego
volume=x(x=-10000;0) wyznacza głośność.

Jest jeszcze jedno rozwiązanie:

<EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150">
<NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to usłyszeć</NOEMBED>
</EMBED>

Polecenie EMBED sprawi, że dzwięk będzie słyszany w Navigatorze i Internet Explorera, ale tylko w tych dwóch przeglądarkach. Znacznik NOEMBED wyswietli komunikat dla innych nie obsługujących tego znacznika przeglądarek.

Pliki RealAudio

Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra></a>

Pliki MP3

Pliki MP3 możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np.

<embed src="plik.mp3" autostart=true>

Teraz możemy na naszą stronę wstawić jakiś plik video:

Plik wideo AVI (styl Netscape) -<embed src="kursHTML.AVI" border=0>

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=urlpodaje adres pliku AVI
loop=xokreśla liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca
loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami
start=fileopen lubmouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza
controlswyświetla panel kontrolny odtwarzacza AVI

Pliki MPEG

Pliki MPEG możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np.

<embed src="plik.mpg" autostart=true>


Strona Mateusza Dutkiewicza - Tabele

TABELE

Podstawowe informacje

Zawartość tabeli umieszczamy między dwoma znacznikami <TABELE></TABELE>. Pomiędzy tymi dwoma znacznikami umieszczamy definicje rzędów, definicje komórek w rzędach, dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. Wiersze określamy znacznikami <TR> </TR> , a komórki <TD> </TD> w nich umieszczamy nasze dane czyli tekst i obrazki.

Przykład tabeli z powyższymi znacznikami:

<TABLE>

<TR> <TD> </TD></TR>

</TABLE>

Naszej tabelce możemy też nadać obramowanie dodając polecenie BORDER, które może mieć różną wartość : <TABLE BORDER=10> </TABLE>. Jeżeli chcemy zwiększyć odległość między komórkami musimy posłużyć się poleceniem CELLSPACING. Tak jak BORDER może mieć określoną wartość: <TABLE BORDER=10 CELLSPACING=10 > </TABLE>. Kolejnym parametrem, który kształtuje naszą tabelę jest CELLPADDING które określi odległość zawartych w tabeli danych od obramowania komórki. Parametrami WIDTH i HEIGHT mamy możliwość zdefiniowania szerokości i wysokości ( w pikselach lub procentach) naszej tabeli i komórki.

Przykład tabeli = <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=40 WIDTH=400 HEIGHT="50%"> <TR> <TD> </TD> <TD width="300"> <p><b>Kurs HTML.</b></p> </TD></TR></TABLE>

Kurs HTML.

Naszą tabelę możemy (tak jak grafikę) oblewać tekstem w tym celu dodajemy parametr ALIGN. Może on mieć wartość left (z lewej strony) lub right (z prawej strony) np: <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=40 width=400 ALIGN=right> </TABLE>. Jeżeli tego samego parametru użyjemy w komórce to określimy położenie jej zawartości:

<TD ALIGN=center></TD> ( na środku )
<TD ALIGN=left> </TD> ( z lewej )
<TD ALIGN=right> </TD> ( z prawej )

Wyrównanie danych w komórkach tworzymy dodając parametr VALIGN , który może mieć trzy wartości top (wyrównanie do góry), middle (wyrównani do środka), bottom (wyrównanie do dołu):

<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>

Kolorowanie tabeli

Naszą tabelę możemy wzbogacić kolorami, możemy określić tło komórki(<BGCOLOR=kolor>) i pokolorować obramowanie tabeli(<BORDERCOLOR=kolor>), możemy nawet określić kolor cienia obramowania(<BORDERCOLORDARK=kolor BORDERCOLORLIGHT=kolor>) co sprawi wrażenie przestrzenności naszej tabeli. W miejscu "kolor" wpisujemy nazwę koloru np. red, blue lub w RGB. Tu znajdziecie tabelkę z nazwami dostępnych kolorów.

Przykład z danymi:

<CENTER>

<table border="10" width="155" height="90" cellspacing="0" cellpadding="0" bordercolor="#FF0000" bordercolorlight="#0000FF" bordercolordark="#000080" bgcolor="#0000FF">
<tr>
<td align="left" width="74" height="38" bordercolor="#00FF00" bgcolor="#FFFF00" valign="bottom"><b><font color="#000000">KURS HTML</font></b></td>
<td width="65" height="38" bgcolor="#008000" bordercolor="#FFFF00" valign="middle"><font color="#000000"><b>KURS HTML</b></font></td>
</tr>
<tr>
<td align="left" width="74" height="38" bgcolor="#FF0000" bordercolor="#0000FF" valign="top"><font color="#000000"><b>KURS HTML</b></font></td>
<td width="65" height="38" bgcolor="#0000FF" bordercolor="#FF0000"><font color="#000000"><b>KURS HTML</b></font></td>
</tr>
</table>

</CENTER>

KURS HTML | KURS HTML
KURS HTML | KURS HTML


Strona Mateusza Dutkiewicza - Ramki

RAMKI

Jak każdy zauważył większość stron w sieci zawiera ramki strony są pokrojone na różne części. Najczęściej jednak spotykamy strony z dwiema czy z trzema ramkami. Jedna wąska na górze, z lewej lub prawej strony przeznaczana jest na menu, a ramka usytuowana w głównej części naszej strony przeznaczona jest na wyświetlanie kolejnych podstron naszej strony. W tej części kursu postaram się was nauczyć jak tworzyć strony z ramkami.

Na początku musimy stworzyć stronę, na której zdefiniujemy nasze ramki na tej stronie nie wstawiamy żadnych obrazków, żadnego tekstu. Ta strona nie będzie wyświetlana przez przeglądarkę podaje ona tylko informacje jak mają być wyświetlone ramki i jaka strona ma być wyświetlona w ramce.

Oto przykładowa strona która zawiera informacje o ramkach:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Kurs HTML</title>
<meta name="GENERATOR" content="NOTATNIK">
<meta name="description" content="Kurs HTML">
<meta name="keywords" content="kursHTML,HTML,kurs">
</head>

<frameset framespacing="0" border="0" rows="124,*" frameborder="0">
<frame name="banner" scrolling="no" target="contents" src="jakasstronka.htm">
<frameset cols="138,*">
<frame name="contents" target="main" src="jakasstronka.htm" scrolling="auto" noresize>
<frame name="main" src="jakasstronka.htm" target="_self" scrolling="auto">
</frameset>
<noframes>
<body>

<p>Ta strona zawiera ramki, a twoja przeglądarka niestety ich nie obsługuje, więc z przykrością zawiadamiam, że nie obejrzysz mojej strony.</p>

</body>
</noframes>
</frameset>

</html>

Po użyciu tego przykładu otrzymamy stronę z 3 ramkami górną, i dwiema bocznymi. Na początku pokażę wam jak się zatroszczyć o osoby, które mają przeglądarki które nie obsługują ramek. W tym celu posługujemy się znacznikiem <noframes></noframes> umieszczamy go tak jak na powyższym przykładzie zaczynamy wstawiając go przed sekcją BODY a kończymy za tą sekcją. W sekcji BODY umieszczamy tekst który zostanie wyświetlony na ekranie osoby której przeglądarka nie obsługuje ramek (patrz przykład).

Tworzymy ramki

Kluczem do ramek jest para znaczników <FRAMESET> </FRAMESET>. Ramki określamy odpowiednimi parametrami, które definiują liczbę ramek ich wielkość i podział naszej strony. <FRAMESET COLS="30%,70%"> i <FRAMESET ROWS="125,*"> służy do podzielenia naszej strony na kolumny i wiersze. Wartości możemy podać w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika *. BORDER=x to parametr który określa w pikselach szerokość obramowania rozdzielającego ramki. Parametr FRAMEBORDER="0" lub "1" wyświetla lub ukrywa obramowanie rozdzielające ramki. Gdy użyjemy parametru FRAMESPACING=0 to pozbędziemy się obramowania także w Internet Explorerze bo on wymaga tego parametru. Na końcu otrzymujemy np. <FRAMESET FRAMESPACING="0" BORDER="0" ROWS="124,*" FRAMEBORDER="0">.

Teraz zajmiemy się parametrem FRAME, który wyświetli odpowiedni plik HTML w wybranej przez nas ramce. Parametr SRC="jakisplik.htm" wyświetli plik HTML w wybranej ramce. Parametr NAME="nazwa" nadaje ramce nazwę. Jeżeli chcemy by jakiś plik ładował się w wybranej ramce wystarczy, że podamy jej nazwę np.<A HREF="jakisplik.htm" TARGET="nazwa ramki"></A>. SCROLLING="yes" , "no" lub "auto" to parametr który określa czy mają się pojawiać suwaki w ramce. auto sprawi, że suwaki pojawią się w momencie gdy będą one potrzebne. Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru <FRAME NORESIZE> zabezpieczymy ramkę przed zmianą rozmiaru. Po zastosowaniu powyższych parametrów nasza ramka może mieć np. taką postać:<FRAME SCROLLING="auto" NAME="nazwa" SRC="jakisplik.htm">.

Teraz proponuje stworzenie strony która zobrazuje to wszystko co przedstawiłem powyżej. Strona będzie miała trzy kolumny. W pierwszej dwie ramki, drugiej trzy, a w trzeciej jedną :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Kurs HTML</title>
<meta name="GENERATOR" content="NOTATNIK">
<meta name="description" content="Kurs HTML">
<meta name="keywords" content="kursHTML,HTML,kurs">
</head>

<FRAMESET COLS=33%,*,33%>

<FRAMESET ROWS=50%,50%>

<FRAME SRC=jakasstrona.htm>

<FRAME SRC=jakasstrona.htm>

</FRAMESET>

<FRAMESET ROWS=33%,*,33%>

<FRAME SRC=jakasstrona.htm>

<FRAME SRC=jakasstrona.htm>

<FRAME SRC=jakasstrona.htm>

</FRAMESET>

<FRAME SRC=jakasstrona.htm>

</FRAMESET>

</FRAMESET>
<noframes>
<body>

<p>Ta strona zawiera ramki, a twoja przeglądarka niestety ich nie obsługuje, więc z przykrością zawiadamiam, że nie obejrzysz mojej strony.</p>

</body>
</noframes>
</frameset>

</html>


Strona Mateusza Dutkiewicza - Formularze

FORMULARZE

Nasz formularz mieści się pomiędzy parą znaczników <FORM></FORM>. Pomiędzy nie wstawiamy treść naszego formularza. W tym kursie pokażę wam jak stworzyć najprostszy formularz który zostanie wysłany na nasz e-mail. Do znacznika <FORM> dodajemy polecenia ACTION i METHOD :<FORM ACTION="mailto:n@sz_e-mail" METHOD="Post"></FORM>. ACTION określa akcję jaką musi wykonać przeglądarka, u nas jest to wysłanie na podany adres metodą (METHOD) pocztową . Jeżeli użyjemy takiej konstrukcji jak powyżej to nasz formularz nie będzie miał tematu możemy go nadać dodająć po adresie e-mail ze znakiem zapytania polecenie subject czyli temat:<FORM ACTION="mailto:n@sz_e-mail?subject=jakiś_temat" METHOD="Post"></FORM>. Jeżeli nie chcemy otrzymywać odpowiedzi na ankietę w postaci zaszyfrowanej, ale w postaci zwykłego listu powinniśmy zastosować parametr enctype="text/plain" np: <FORM enctype="text/plain" action="mailto:n@sz_e-mail?subject=jakiś_temat" METHOD="Post"></FORM>
.
Do naszego formularzu możemy wstawić kilka różnych pól są to: pola do wpisania informacji np. Imię i Nazwisko lub e-mail i pola z możliwością wybrania jednej z kilku opcji. I tak mamy znaczniki: 1. INPUT, z dodatkowymi parametrami TYPE, NAME i VALUE, służy do tworzenia pól, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję 2. SELECT służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. 3. TEXTAREA pozwala stworzyć pole tekstowe do którego nasz ankietowany może wpisać jakiś swój komentarz.

1. INPUT

Parametr TYPE tego znacznika określa typ pola. TYPE="checkbox" powoduje wyświetlenie kwadratowego pola do zaznaczenia . TYPE="radio" wstawia przełącznik który sprawia, że nasz czytelnik ma do wyboru tylko jedną opcję . TYPE="submit" wstawia przycisk które powoduje wysłanie naszej ankiety. TYPE="reset" kasuje wpisane przez nas dane i przywraca pierwotne. Jeżeli nie wpiszemy parametru TYPE to zostanie wyświetlone domyślne pole tekstowe. Parametr NAME służy do nadania nazwy polu które je identyfikuje. VALUE to parametr który nadaje wartość polu. Gdy nie wpiszemy tego parametru nie nadamy wartości stosujemy tę opcję np. w momencie gdy do pola ma zostać wpisany czyjś e-mail. Teraz zaprezentuję wam kilka przykładów do powyższego fragmentu.

TYPE="checkbox"

<INPUT
                TYPE="checkbox" NAME="przeglądarka" VALUE="Internet
                Explorer">Internet Explorer
<INPUT TYPE="checkbox" NAME="przeglądarka"
                VALUE="Netscape Navigator">Netscape Navigator
<INPUT TYPE="checkbox" NAME="przeglądarka"
                VALUE="Opera">Opera
<INPUT TYPE="checkbox" NAME="przeglądarka"
                VALUE="Inna">Inna

Otrzymamy w efekcie

Internet Explorer
Netscape Navigator
Opera
Inna

TYPE="radio"

<INPUT TYPE="radio" NAME="wiek" VALUE="do 18 lat" checked> do 18 lat
<INPUT TYPE="radio" NAME="wiek" VALUE="18- 21 lat">18- 21 lat
<INPUT TYPE="radio" NAME="wiek" VALUE="21- 40 lat">21- 40 lat
<INPUT TYPE="radio" NAME="wiek" VALUE="ponad 40 lat">ponad 40 lat

Otrzymamy w efekcie

do 18 lat
18- 21 lat
21- 40 lat
ponad 40 lat

TYPE="submit"

<INPUT TYPE="submit" VALUE="Wyślij informacje">

Otrzymamy w efekcie

TYPE="reset"

<INPUT TYPE="reset" VALUE="Usuń informacje">

Otrzymamy w efekcie

Bez TYPE

Podaj swój e-mail<INPUT NAME="e-mail">

Otrzymamy w efekcie

Podaj swój e-mail

2. SELECT

Jak już wspomniałem znacznik <SELECT></SELECT> służy do tworzenia rozwijanej listy. Parametrem NAME nadamy nazwę naszej rozwijanej liście. Znacznikiem <OPTION> podajemy opcje naszej listy wyboru. Aby w naszej liście było zaznaczony jedno pole dodajemy do tego znacznika polecenie SELECTED: <OPTION SELECTED>jakaś opcja. Po dodaniu polecenia MULTIPLE będzie nasz ankietowany mógł przytrzymując przycisk Ctrl wybrać z listy kilka opcji: <SELECT NAME="nasza_lista" MULTIPLE>. Możemy także definiować wielkość okna w którym wyświetlana jest nasza lista w tym celu stosujemy polecenie SIZE: <SELECT SIZE=15>.

Przykład z powyższymi poleceniami:

<SELECT SIZE=5 NAME="samochody" MULTIPLE>
<OPTION SELECTED> BMW
<OPTION> Mercedes
<OPTION> Volvo
<OPTION> Audi
<OPTION> Citroen
<OPTION> Renault
<OPTION> Peugot
<OPTION> Fiat
<OPTION> Skoda
</SELECT>

Otrzymamy w efekcie

3. TEXTAREA

TEXTAREA służy do wstawienia pola w które nasz ankietowany może wpisać coś od siebie: <TEXTAREA NAME="nazwapola"> </TEXTAREA> . Gdy użyjemy takiej definicji otrzymamy pole o domyślnych rozmiarach możemy jednak zmieniać wielkość naszego pola tekstowego w tym celu służą parametry ROWS i COLS . ROWS=x określa wysokość pola, a COLS=x określa jego długość. Do pola tekstowego możemy także wpisać sugerowany tekst robimy to wpisując go pomiędzy znacznikiem TEXTAREA: <TEXTAREA NAME=nazwapola> Sugerowany tekst który zostanie wyświetlony</TEXTAREA>.

Przykład TEXTAREA

<TEXTAREA NAME="przykład" ROWS=5 COLS=20> Sugerowany tekst który zostanie wyświetlony</TEXTAREA>

Na koniec proponuje moją ankietę która dotyczy tego kursu

ANKIETA KURSU HTML


Strona Mateusza Dutkiewicza - Kolory

TABELA KOLORÓW

Barwa: | Nazwa: | RGB: | Czerwony | Zielony | Niebieski
 | aliceblue | F0F8FF | 240 | 248 | 255
 | antiquewhite | FAEBD7 | 250 | 235 | 215
 | agua | 00FFFF | 0 | 255 | 255
 | aquamarine | 7FFFD4 | 126 | 255 | 212
 | azure | F0FFFF | 240 | 255 | 255
 | beige | F5F5DC | 245 | 245 | 220
 | bisque | FFE4DC | 255 | 228 | 220
 | black | 000000 | 0 | 0 | 0
 | blanchedalmond | FFEBCD | 255 | 235 | 205
 | blue | 0000FF | 0 | 0 | 255
 | blueviolet | 8A2BE2 | 138 | 43 | 226
 | brown | A52A2A | 165 | 42 | 42
 | burlywood | DEB887 | 222 | 184 | 135
 | cadetblue | 5F9EA0 | 95 | 158 | 160
 | chartreuse | 7FFF00 | 127 | 255 | 0
 | chocolate | D2691E | 210 | 105 | 30
 | coral | FF7F50 | 255 | 127 | 80
 | cornflowerblue | 6495ED | 40 | 149 | 237
 | cornsilk | FFF8DC | 255 | 248 | 220
 | crimson | DC143C | 220 | 20 | 60
 | cyan | 00FFFF | 0 | 255 | 255
 | darkblue | 00008B | 0 | 0 | 139
 | darkcyan | 008B8B | 0 | 139 | 139
 | darkgoldenrod | B8860B | 184 | 134 | 11
 | darkgray | A9A9A9 | 169 | 169 | 169
 | darkgreen | 006400 | 0 | 100 | 0
 | darkkhaki | BDB76B | 189 | 183 | 107
 | darkmagenta | 8B008B | 139 | 0 | 139
 | darkolivegreen | 556B2F | 85 | 107 | 47
 | darkorange | FF8C00 | 255 | 140 | 0
 | darkorchid | 9932CC | 153 | 50 | 204
 | darkred | 8B0000 | 139 | 0 | 0
 | darksalmon | E9967A | 233 | 150 | 122
 | darkseagreen | 8FBC8F | 143 | 188 | 143
 | darkslateblue | 483D8B | 72 | 61 | 139
 | darkslategray | 2F4F4F | 47 | 79 | 79
 | darkturquoise | 00BFFF | 0 | 191 | 255
 | darkviolet | 9400D3 | 148 | 0 | 211
 | deeppink | FF1493 | 255 | 20 | 147
 | deepskyblue | 00BFFF | 0 | 191 | 255
 | dimgray | 696969 | 105 | 105 | 105
 | dodgerblue | 1E90FF | 30 | 144 | 255
 | firebrick | B22222 | 178 | 34 | 34
 | floralwhite | FFFAF0 | 255 | 250 | 240
 | forestgreen | 228B22 | 34 | 139 | 34
 | fuchsia | FF00FF | 255 | 0 | 255
 | gainsboro | DCDCDC | 220 | 220 | 220
 | ghostwithe | F8F8FF | 248 | 248 | 255
 | gold | FFD700 | 255 | 215 | 0
 | goldenrod | DAA520 | 218 | 165 | 32
 | gray | 808080 | 128 | 128 | 128
 | green | 008000 | 0 | 128 | 0
 | greenyellow | ADFF2F | 173 | 255 | 47
 | honeydew | F0FFF0 | 240 | 255 | 240
 | hotpink | FF69B4 | 255 | 105 | 180
 | indianred | CD5C5C | 205 | 92 | 92
 | indigo | 4B0082 | 75 | 0 | 130
 | ivory | FFFFF0 | 255 | 255 | 240
 | khaki | F0E68C | 240 | 230 | 140
 | levender | E6E6FA | 230 | 230 | 250
 | levenderblush | FFF0F5 | 255 | 240 | 245
 | lawngreen | 7CFC00 | 124 | 252 | 0
 | lemonchiffon | FFFACD | 255 | 250 | 205
 | lightblue | ADD8E6 | 173 | 216 | 230
 | lightcoral | F08080 | 240 | 128 | 128
 | lightcyan | E0FFFF | 224 | 255 | 255
 | lightgoldenrodyellow | FAFAD2 | 250 | 250 | 210
 | lightgreen | 90EE90 | 144 | 238 | 144
 | lightgrey | D3D3D3 | 211 | 211 | 211
 | lightpink | FFB6C1 | 255 | 182 | 193
 | lightsalmon | FFA07A | 255 | 160 | 122
 | lightseagreen | 20B2AA | 170 | 178 | 32
 | lightskyblue | 87CEFA | 135 | 206 | 250
 | lightslategray | 778899 | 119 | 136 | 153
 | lightsteelblue | B0C4DE | 176 | 196 | 222
 | lightyellow | FFFFE0 | 255 | 255 | 224
 | lime | 00FF00 | 0 | 255 | 0
 | limegreen | 32CD32 | 50 | 205 | 50
 | linen | FAF0E6 | 250 | 240 | 230
 | magenta | FF00FF | 255 | 0 | 255
 | maroon | 800000 | 128 | 0 | 0
 | mediummaquamarine | 66CDAA | 102 | 205 | 170
 | mediumblue | 0000CD | 0 | 0 | 205
 | mediumorchid | BA55D3 | 186 | 85 | 211
 | mediumpurple | 9370DB | 147 | 112 | 219
 | mediumseagreen | 3CB371 | 60 | 179 | 113
 | mediumslateblue | 7B68EE | 123 | 104 | 238
 | mediumspringgreen | 00FA9A | 0 | 250 | 154
 | mediumturquoise | 48D1CC | 72 | 209 | 204
 | mediumvioletred | CD1585 | 205 | 21 | 133
 | midnightblue | 191970 | 25 | 25 | 112
 | mintcream | F5FFFA | 245 | 255 | 250
 | mistyrose | FFE4E1 | 255 | 228 | 225
 | moccasin | FFE4B5 | 255 | 228 | 181
 | navajowhite | FFDEAD | 255 | 222 | 173
 | navy | 000080 | 0 | 0 | 128
 | oldlace | FDF5E6 | 253 | 245 | 230
 | olive | 808000 | 128 | 128 | 0
 | olivedrab | 6B8E23 | 107 | 142 | 35
 | orange | FFA500 | 255 | 165 | 0
 | orangered | FF4500 | 255 | 69 | 0
 | orchid | DA70D6 | 218 | 112 | 214
 | palegoldenrod | EEE8AA | 238 | 232 | 170
 | palegreen | 98FB98 | 152 | 251 | 152
 | palaturquoise | AFEEEE | 175 | 238 | 238
 | palevioletred | DB7093 | 219 | 112 | 147
 | papayawhip | FFEFD5 | 255 | 239 | 213
 | peachpuff | FFDAB9 | 255 | 218 | 185
 | peru | CD853F | 205 | 133 | 63
 | pink | FFC0CB | 255 | 192 | 203
 | plum | DDA0DD | 221 | 160 | 221
 | powderblue | B0E0E6 | 176 | 224 | 230
 | purple | 800080 | 128 | 0 | 128
 | red | FF0000 | 255 | 0 | 0
 | rosybrown | BC8F8F | 188 | 143 | 143
 | royalblue | 4169E1 | 29 | 105 | 225
 | saddlebrown | 8B4513 | 139 | 69 | 19
 | salmon | FA8072 | 250 | 128 | 114
 | sandybrown | F4A460 | 244 | 164 | 96
 | seagreen | 2E8B57 | 46 | 139 | 87
 | seashell | FFF5EE | 255 | 245 | 238
 | sienna | A0522D | 160 | 82 | 45
 | silver | C0C0C0 | 192 | 192 | 192
 | skyblue | 87CEEB | 135 | 206 | 235
 | slateblue | 6A5ACD | 205 | 90 | 205
 | slategray | 708090 | 112 | 128 | 144
 | snow | FFFAFA | 255 | 250 | 250
 | springgreen | 00FF7F | 0 | 255 | 127
 | steelblue | 4682B4 | 70 | 130 | 180
 | tan | D2B48C | 210 | 180 | 140
 | teal | 008080 | 0 | 128 | 128
 | thistle | D8BFD8 | 216 | 191 | 216
 | tomato | FF6347 | 255 | 99 | 71
 | turquoise | 40E0D0 | 64 | 224 | 208
 | violet | EE82EE | 238 | 130 | 238
 | wheat | F5DEB3 | 245 | 222 | 179
 | white | FFFFFF | 255 | 255 | 255
 | whitesmoke | F5F5F5 | 245 | 245 | 245
 | yellow | FFFF00 | 255 | 255 | 0
 | yellowgreen | 9ACD32 | 154 | 205 | 50


Strona Mateusza Dutkiewicza - Znaki specjalne

ZNAKI SPECJALNE

Numer | Nazwa | Opis | Prezentacja w przeglądarce
&#38; | &amp; | Ampersand | &
&#60; | &lt; | Less than | <
&#62; | &gt; | Greater than | >
&#160; | &nbsp; | Non-breaking space |
&#161; | &iexcl; | Inverted exclamation | ¡
&#162; | &cent; | Cent sign | ¢
&#163; | &pound; | Pound sterling sign | £
&#164; | &curren; | General currency sign | ¤
&#165; | &yen; | Yen sign | ¥
&#166; | &brvbar; | Broken vertical bar | ¦
&#167; | &sect; | Section sign | §
&#168; | &uml; | Umlaut (dierisis) | ¨
&#169; | &copy; | Copyright | ©
&#170; | &ordf; | Feminine ordinal | ª
&#171; | &laquo; | Left angle quote, guillemot left | «
&#172; | &not; | Not sign | ¬
&#173; | &shy; | Soft hyphen |
&#174; | &reg; | Registered trademark | ®
&#175; | &macr; | Macron accent | ¯
&#176; | &deg; | Degree sign | °
&#177; | &plusmn; | Plus or minus | ±
&#178; | &sup2; | Superscript two | ²
&#179; | &sup3; | Superscript three | ³
&#180; | &acute; | Acute accent | ´
&#181; | &micro; | Micro sign | µ
&#182; | &para; | Paragraph sign | ¶
&#183; | &middot; | Middle dot | ·
&#184; | &cedil; | Cedilla | ¸
&#185; | &sup1; | Superscript one | ¹
&#186; | &ordm; | Masculine ordinal | º
&#187; | &raquo; | Right angle quote, guillemot right | »
&#188; | &frac14; | Fraction (one quarter) | ¼
&#189; | &frac12; | Fraction (one half) | ½
&#190; | &frac34; | Fraction (three quarters) | ¾
&#191; | &iquest; | Inverted question mark | ¿
&#192; | &Agrave; | Capital A, grave accent | À
&#193; | &Aacute; | Capital A, acute accent | Á
&#194; | &Acirc; | Capital A, circumflex accent | Â
&#195; | &Atilde; | Capital A, tilde | Ã
&#196; | &Auml; | Capital A, umlaut (dierisis) | Ä
&#197; | &Aring; | Capital A, ring | Å
&#198; | &AElig; | Capital AE dipthong (ligature) | Æ
&#199; | &Ccedil; | Capital C, cedilla | Ç
&#200; | &Egrave; | Capital E, grave accent | È
&#201; | &Eacute; | Capita E, acute accent | É
&#202; | &Eirc; | Capital E, circumflex accent | Ê
&#203; | &Euml; | Capital E, umlaut (dierisis) | Ë
&#204; | &Igrave; | Capital I, grave accent | Ì
&#205; | &Iacute; | Capital I, acute accent | Í
&#206; | &Icirc; | Capital I, circumflex accent | Î
&#207; | &Iuml; | Capital I, umlaut (dierisis) | Ï
&#208; | &ETH; | Capital Eth, Icelandic | Ð
&#209; | &Ntilde; | Capital N, tilde | Ñ
&#210; | &Ograve; | Capital O, grave accent | Ò
&#211; | &Oacute | Capital O, acute accent | Ó
&#212; | &Ocirc; | Capital O, circumflex accent | Ô
&#213; | &Otilde; | Capital O, tilde | Õ
&#214; | &Ouml; | Capital O, umlaut (dierisis) | Ö
&#215; | &times; | Multiply sign | ×
&#216; | &Oslash; | Capital O, slash | Ø
&#217; | &Ugrave | Capital U, grave accent | Ù
&#218; | &Uacute; | Capital U, acute accent | Ú
&#219; | &Ucirc; | Capital U, circumflex accent | Û
&#220; | &Uuml; | Capital U, umlaut (dierisis) | Ü
&#221; | &Yacute; | Capital Y, acute accent | Ý
&#222; | &THORN; | Capital Thorn, Icelandic | Þ
&#223; | &szlig; | Small sharp s, German (sz ligature) | ß
&#224; | &agrave; | Small a, grave accent | à
&#225; | &aacute; | Small a, acute accent | á
&#226; | &acirc; | Small a, circumflex accent | â
&#227; | &atilde; | Small a, tilde | ã
&#228; | &auml | Small a, umlaut (dierisis) | ä
&#229; | &aring; | Small a, ring | å
&#230; | &aelig; | Small ae dipthong (ligature) | æ
&#231; | &ccedil; | Small c, cedilla | ç
&#232; | &egrave; | Small e, grave accent | è
&#233; | &eacute; | Small e, acute accent | é
&#234; | &ecirc; | Small e, circumflex accent | ê
&#235; | &euml; | Small e, umlaut (dierisis) | ë
&#236; | &igrave; | Small i, grave accent | ì
&#237; | &iacute; | Small i, acute accent | í
&#238; | &icirc; | Small i, circumflex accent | î
&#239; | &iuml; | Small i, umlaut (dierisis) | ï
&#240; | &eth; | Small eth, Icelandic | ð
&#241; | &ntilde; | Small n, tilde | ñ
&#242; | &ograve; | Small o, grave accent | ò
&#243; | &oacute; | Small o, acute accent | ó
&#244; | &ocirc; | Small o, circumflex accent | ô
&#245; | &otilde; | Small o, tilde | õ
&#246; | &ouml; | Small o, umlaut (dierisis) | ö
&#247; | &divide; | Division sign | ÷
&#248; | &oslash; | Small o, slash | ø
&#249; | &ugrave; | Small u, grave accent | ù
&#250; | &uacute; | Small u, acute accent | ú
&#251; | &ucirc; | Small u, circumflex accent | û
&#252; | &uuml; | Small u, umlaut (dierisis) | ü
&#253; | &yacute; | Small y, acute accent | ý
&#254; | &thorn; | Small thorn, Icelandic | þ
&#255; | &yuml; | Small y, umlaut (dierisis) | ÿ
&#338; | &OElig; | Latin Capital OE (ligature) | Œ
&#339; | &oelig; | Latin Small OE (ligature) | œ
&#352; | &Scaron; | Capital S with caron | Š
&#353; | &scaron; | Small s with caron | š
&#376; | &Yuml; | Capital Y with dierisis | Ÿ
&#710; | &circ; | Circumflex accent | ˆ
&#732; | &tilde; | Small tilde | ˜
&#8211; | &ndash; | En dash | –
&#8212; | &mdash; | Em dash | —
&#8216; | &lsquo; | Left single quotation mark | ‘
&#8217; | &rsquo; | Right single quotation mark | ’
&#8218; | &sbquo; | Single low-9 quotation mark | ‚
&#8220; | &ldquo; | Left double quotation mark | “
&#8221; | &rdquo; | Right double quotation mark | ”
&#8222; | &bdquo; | Double low-9 quotation mark | „
&#8224; | &dagger; | Dagger | †
&#8225; | &Dagger; | Double Dagger | ‡
&#8240; | &permil; | Per mille (thousand) sign | ‰
&#8249; | &lsaquo; | Single left-pointing angle quotation mark | ‹
&#8250; | &rsaquo; | Single right-pointing angle quotation mark | ›
&#8364; | &euro; | Euro sign* | €


Strona Mateusza Dutkiewicza - Kurs w skrócie

Kurs HTML w skrócie

Struktura dokumentu
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Dokument HTML | <html> |  |  |  | </html>
Zawartość nagłówka | <head> |  |  |  | </head>
Nagłówek | <title> |  |  |  | </title>
Komentarz | <!-- |  |  |  | -->
Zawartość dokumentu | <body> | background bgcolor text link vlink | = = = = = | "gif.jpg" "#rgbrgb" "#rgbrgb" "#rgbrgb" "#rgbrgb" | </body>

Formatowanie tekstu
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Koniec wiersza | <br> | clear | = | "left" "right" "all" |
Nowy akapit | <p> | align | = | "center" "right" "justify" | </p>
Wytłuszczenie | <b> |  |  |  | </b>
Pochylenie kursywa | <i> |  |  |  | </i>
Tekst monotypiczny | <tt> |  |  |  | </tt>
Wielkość fonta | <h1-6> | align | = | "center" "right" | </h1-6>
Rodzaj fonta | <font> | face size color | = = = | "arial,helvetica" "+n" "-n" "#rgbrgb" | </font>
Linia | <hr> | size width align noshade | = = = | "n" "n" "n%" "left" "center" "right" |
Blok | <blockquote> |  |  |  | </blockquote>
Przesunięcie | <div> | align | = | "left" "center" "right" | </div>

Lista
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Lista | <ul> | type | = | "disc" "circle" "square" | </ul>
Numerowanie | <ol> | start type | = = | "n" "I" "A" "1" "a" "i" | </ol>
Wykaz | <li> | type | = | "all" "ul" "ol" "options" |
Definiowanie | <dl> |  |  |  | </dl>
Wyjaśnienie | <dt> |  |  |  |
Kolejne wyjaśnienie | <dd> |  |  |  |

Połączenia wewnątrz dokumentu
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Połączenie | <a> | href target | = = | "#nazwa" "okno.html" | </a>
Rezultat | <a> | name | = | "nazwa" |

Ilustracja
Funkcja | Polecenie | Atrybut |  | Parametr
Ilustracja | <img> | src align align width height hspace vspace border alt ismap usmap | = = = = = = = = = = | "gif.jpg" "left" "right" "top" "middle" "bottom" "n" "n" "n" "n" "n" "objaśnienie" "#nazwa"

Mapa
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Mapa | <map> | name | = | "nazwa" | </map>
Definicja pola | <area> | shape coords href | = = = | "rect" "circle" "poly" "point" "współrzędne" "plik.html" |

Tabela
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Tabela | <table> | width cellspacing cellpadding bgcolor background | = = = = = | "n" "n%" "n" "n" "#rgbrgb" "gif.jpg" | </table>
Wiersz | <tr> | align valign bgcolor | = = = | "left" "center" "right" "top" "middle" "bottom" "#rgbrgb" | </tr>
Cela | <td> | align valign width nowrap colspan rowspan bgcolor background | = = = = = = = | "left" "center" "right" "top" "middle" "bottom" "n" "n%" "n" "n" "#rgbrgb" "gif.jpg" | </td>
Cela wycentrowany i pogrubiony tekst | <th> | align valign width nowrap colspan rowspan bgcolor background | = = = = = = = | "left" "center" "right" "top" "middle" "bottom" "n" "n" "n" "#rgbrgb" "gif.jpg" | </th>
Tytuł lub podpis | <caption> | align valign | = = | "left" "center" "right" "top" "bottom" | </caption>

Ramki
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Ramka | <frameset> | cols rows | = = | "n" "n%" ",*" "n" "n%" ",*" | </frameset>
Definicja | <frame> | src name noresize scroll marginwidth marginheight | = = = = = | "plik.html" "nazwa" "auto" "yes" "no" "n" "n" |
Parametr | <base> | target | = = = = = | "nazwa" "_blank" "_parent" "_self" "_top" |
Bez ramek | <noframes> |  |  |  | </noframes>

Formularz
Funkcja | Polecenie | Atrybut |  | Parametr | Zakończenie
Formularz | <form> | method action | = = | "get" "post" "program" | </form>
Typ pola | <input type="text"> | name size maxlength value | = = = = | "nazwa" "n" "n" "nazwa" | max 512B
 | <input type="passwod"> | name size maxlength value | = = = = | "nazwa" "n" "n" "nazwa" |
 | <input type="checkbox"> | type name value checked | = = = = | "nazwa" "nazwa" "nazwa" "nazwa" |
 | <input type="radio"> | type name value checked | = = = = | "nazwa" "nazwa" "nazwa" "nazwa" |
 | <input type="hidden"> | type name value | = = = | "nazwa" "nazwa" "nazwa" |
 | <input type="image"> | name src align | = = = | "nazwa" "gif.jpg" "top" "middle" "bottom" "left" "right" |
 | <input type="submit"> | name value | = = | "nazwa" "nazwa" |
 | <input type="reset"> | name value | = = | "nazwa" "nazwa" |
 | <input type="file"> | name value | = = | "nazwa" "nazwa" |
Lista | <select> | name size multiple | = = | "nazwa" "n" | </select>
Opcja | <option> | value selected | = | "string" | [</option>]
Pole tekstu | <textarea> | name rows cols | = = = | "nazwa" "n" "n" | </textarea>

Meta
Funkcja | Polecenie |  | Atrybut
META serwer | http-equiv content URL | = = = | "refresh" "sekundy; "adres.html"
META robot | name | = | keywords "description" "autor" "generator" "abstract" "expiration" "informacja" <META NAME="robots" CONTENT="noindex"> <META HTTP-EQUIV="pragma" CONTENT="no-cache">

Znaczniki
Nazwa | Symbol | Znacznik
ampersand | & | &amp;
copyright | © | &copy
zarejestrowana marka | ® | &reg;
stopień | ° | &deg;
mniej od | > | &gt;
więcej od | < | &lt;
spacja |  | &nbsp;


Strona Mateusza Dutkiewicza - Ankieta

ANKIETA KURSU HTML

Twoje imię i nazwisko lub xywa
Twój e-mail
Jeżeli posiadasz to adres twojej strony WWW
Jak chcesz to możesz podać swoją miejscowość

Twój wiek:
do 18 lat
18- 21 lat
21- 40 lat
40- 60 lat
ponad 60 lat

Twoja przeglądarka internetowa:
Internet Explorer
Netscape Navigator
Opera
Lynx
Inna

Twoja ocena tego kursu:
na 5
na 4
na 3
na 2
na 1

Twój system operacyjny:
Windows 3.x
Windows 95
Windows 98
Windows NT
Linux
Unix
MacOS
inny

W jakiej pracujesz rozdzielczości ?
640 na 480 pikseli
800 na 600 pikseli
1024 na 768 pikseli
1280 na 1024 pikseli
1600 na 1200 pikseli
inna

Ocena całej strony Mateusza Dutkiewicza:
na 5
na 4
na 3
na 2
na 1

Jak masz coś do dodania wpisz

Podane przez ciebie dane nie będą przetwarzane ani udostępniani innym osobom. Ankieta ma na celu uzyskanie podstawowych informacji o odwiedzających stronę.