HTML
Podstawowa struktura dokumentu <HTML> <HEAD> <TITLE> </TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> </BODY> </HTML>
Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta. <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> Polecenie informuje przeglądarkę o obsłudze znaków. Dzieki kodowaniu iso-8859-2 i przekonwertowaniu jej za pomocą specjalnych programów twoja strona będzie prawidłowo interpretować polską czcionkę. Istnieją także kodowania windows-1250, jednak jego używanie nie jest zalecane. <META NAME="Keywords" CONTENT="wyrazy"> Ten znacznik pozwoli przeglądarkom łatwiejsze odnalezienie jej. W miejscu - "wyrazy" wpisz wyrazy opisujące twoją stronę np. <META NAME="Keywords" CONTENT="delphi, html, kursy"> <META NAME="Description" CONTENT="opis"> Wpisany w miejscu "opis" tekst będzie wyświetlony po znalezieniu twojej strony przez wyszukiwarkę. Opis może zawierać maksymalnie 250 znaków. <META NAME="Author" CONTENT="dane osoby"> Wisany w miejsce "dene osoby" tekst będzie informował o autorze strony. <META NAME="Generator" CONTENT="edytor"> Znacznik informuje o używanym edytorze do tworzenia stron <META NAME="Language" CONTENT="pl"> Polecenie informuje o języku strony <META http-equiv="Refresh" CONTENT="x"> Znacznik powoduje, że strona będzie przeładowywana co czas podany w miejscu "x". Czas wyrażany jest w milisekundach
Nagłówki Nagłówki (Heading) służą w HTML'a do tworzenia... nagłówków!!! Nagłówek otwieramy komendą <H#>, gdzie zamiast # wstawiamy liczbę od 1 do 6. Jak większość flag i ta wymaga zamknięcia </H#>.
Znacznik FONT Każdy tekst, który będzie miał mieć określony kolor, krój wielkość czcionki musimy objąć znacznikami <Font> np. wpisanie kodu: <Font FACE="Arial" SIZE="5" COLOR="maroon">tekst1 </FONT> <Font FACE="Arial" SIZE="2" COLOR="navy">tekst2</FONT> spowoduje wyświetlenie w przeglądarce: tekst1 tekst2 Wielkość czcionki Wielkość czcionki reguluje parametr - SIZE="x". "X" może przyjmować wartości od 1 - 7.
Kolory
Pomocne dodatkowe znaczniki <B></B> - obięty tymi znacznikami tekst jest pogrubiony <S></S> - obięty tymi znacznikami tekst jest przekreślony <I></I> - obięty tymi znacznikami tekst jest pochylony <U></U> - obięty tymi znacznikami tekst jest podkreślonu <DIV align=left></DIV> - obięty tymi znacznikami tekst jest ułożony przy lewej krawędzi <Center></Center> - obięty tymi znacznikami tekst jest wyśrodkowany <DIV align=right></DIV> - obięty tymi znacznikami tekst jest ułożony przy prawej krawędzi <HR> - wstawienie tego tagu spowoduje wyświetlenie na stronie poziomej lini. Dodatkowo możemy zadeklarować szerokość lini <HR Width=50%>, oraz kolor <HR Color="maroon">. Dodanie słówka "NOSHADE" spowodyje, że linia nie będzie trójwymiarowa - <HR NOSHADE> <DD> - ta komenda (bez zakończenia) tworzy wcięcia przed tekstem (akapit) - podobne działanie jak TAB w edytorach tekstowych. <SUB> i </SUB> - indeks dolny. Umieszczenie tekstu niżej niż zwykle (np. wzory chemiczne) <SUP> i </SUP> - indeks górny. Umieszczenie tekstu wyżej niż zwykle (np. potęgowanie)
Listy <UL> i </UL> - lista nieuporządkowana <OL> i </OL> - lista uporządkowana Następnie pomiędzy tymi flagami wstawiamy poszczególne pozycje (<LI> - List Item) Aby określić symbol/ sposób wyliczania w listach należy dodać do komendy <UL>/ <OL> parametr TYPE np..<OL TYPE="I"> . Wartości tego parametru to: Nieuporządkowane: disk - kropka square - kwadrat circle - puste koło Uporządkowane: 1 - cyfry arabskie (domyślne) A - litery łacińskie małe a - litery łacińskie duże I - cyfry rzymskie małe i - cyfry rzymskie duże
Grafika Przy wstawianiu grafiki będziemy zawsze wstawiać znacznik <IMG>. Samo wstawienie tego tagu nie spowoduje nic (tak na prawdę to może spowodować tylko błąd). Wewnątrz tego znacznika będziemy wstawiać kolejne parametry takie jak: SRC="nazwa_obrazka.gif" - dzieki tej właściwości przeglądarka wie jaki plik ma wyświetlić. Należy pamiętać, że przeglądarki interpretują tylko dwa typy grafiki - gif, jpg. Jeżeli obrazek znajduje się w tym samym katalogu co dokument HTML nie trzeba podawać ścieżki, w przeciwnym wypadku tak. WIDTH="30" Height="50" - polecenia określają szerokość obrazka (Width), oraz wysokość (Height). W przypadku jeżeli nie zostaną zadeklarowane obrazek przyjmie naturalne wielkości. ALT="opis" - parametr spowoduje, że po najechaniu myszą na obrazek pokarze się się tekst VSPACE="5" HSPACE="10" - właściwości ustawiają odstęp od tekstu w poziomie (HSPACE), oraz w pionie (VSPACE). BORDER="5" - znaczniki powodują wyświetlenie ramki wokół obrazka. ALIGN="left" - jak już możliwie zauważyłeś wstawiony w powyższy sposób obrazek rozdziela tekst. Aby to zmienić, i aby tekst otaczał grafikę należy zastosować właściwość - ALIGN. Może ona przyjmować właściwości "left", "center", "right", "justify", "top", "middle", "bottom", "absmiddle", "absbottom", "texttop", "baseline".
Hiperłącza <A HREF="strona.html">Zajrzyj</A> <A HREF="strona.html" TARGET="_blank"></A> <A HREF=mailto:adres@e_mail>Napisz<A> <A Href=mailto:adres@e_mail><IMG SRC="poczta.gif"></A> <A Href="muzyka.wav">Muzyka</A>
Tabele Tabele ograniczają znaczniki <TABLE></ TABLE >. Wewnątrz wstawia się tagi <TR></TR>, a w nich <TD></TD>.Przykładowa tabela wygląda następująco: <TABLE> <tr> <td>Kolumna1A</td> <td>Kolumna1B</td> </tr> <tr> <td>Kolumna2A</td> <td>Kolumna2B</td> </tr> </table>
Tabele cd. Definiując dodatkowe właściwośći tagu <table> możemy regulować wygląd całej tabeli. Parametr BACKGROUND dediniuje obrazek który ma zostać wykorzystany na tło tabeli np. <TABLE BACKGROUND="tlo.gif"> Możemy także podać kolor tła: <TABLE BGCOLOR="lime"> Właścowość BORDER ustala grubość ramki w okół tabeli, zaś BORDERCOLOR jej kolor. <TABLE BORDER=2 BORDERCOLOR="maroon"> Parametr CELLPADDING zdefiniować odstęp pomiędzy tekstem, a ramką kratki, która zostaje zdefiniowana poprzez parametr CELLSPACING=grubość. <TABLE CELLPADDING="5" CELLSPACING="2"> Jeżeli nam zależy na stałej szerokości tabeli możemy ją ustalić poprzez opcję WIDTH. Może ona przyjmować wartość wyrarzoną w procentach (WIDTH=90%), lub pixelach (WIDTH=500). <TABLE WIDTH=500> <TR> i <TD> Wstawione znaczniki <TD> pomiędzy tagi <TR> zostają ustawione w jednej lini. Ich ilość jest praktycznie nie ograniczona. Znacznik <TD> posiada dodatkowe parametry takie jak: BGCOLOR, który ustala kolor tła kratki: <TD BGCOLOR="red"> lub WIDTH - parametr używany w przypadku jeżeli chcemy wymusić na kratce określoną szerokość: <TD WIDTH="30">
Ramki Ramkową strukturą dokumentu nazywamy dokument, który posiada wydzielone poszczególne elementy strony tzn. strona składa się z kilku dokumentów gdzie jeden np. jest wyświetlany stale. Podstawowy dokument z ramkami ma strukturę: <HTML> <HEAD> <TITLE> </TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <FRAMESET cols="100, *"> <FRAME SRC="menu.html" NAME="menu" SCROLLING="no" NORESIZE> <FRAME SRC="zawartosc.html" NAME="Ramka2" SCROLLING="auto"> </FRAMESET> </HTML>
Ramki cd Załóżmy, że stworzyliśmy plik index.html który posiada strukturę ramkową: <FRAMESET cols="100, *"> <FRAME SRC="menu.html" NAME="menu" SCROLLING="no" NORESIZE> <FRAME SRC="zawartosc.html" NAME="Ramka2" SCROLLING="auto"> </FRAMESET> Chcielibyśmy teraz, aby po kliknięciu na link z dokumentu menu.html nowa strona została wyświetlona w ramce - Ramka2. I tu trzeba wrócić pamięcią do tworzenia odsyłaczy i właściwości TARGET. Przykładowy link mógłby wyglądać następująco: <A HREF="linki" TARGET="Ramka2">Kilka linków</A> Spowoduje to wspomniany wcześniej efekt. Obiecywałem, że powrócę do właściwości TARGET więc powracam. Nadanie temu parametrowi opcji "_blank" spowoduje, że strona zostanie wyświetlona w nowym oknie. Właściwość "_self" działa tak jakby właściwość target nie została zastosowana, czyli powoduje, że strona zosanie wyświetlona w tej samej ramce. Zastosowanie kodu: <Target="nazwa"> spowoduje że link zostanie wyświetlony w ramce podanej w miejsce "nazwa".
Style CSS Głównym zadaniem HTMLa jest opis struktury strony, natomiast CSS odpowiada za określenie jej wyglądu. Stosując style zyskujemy bardzo duże możliwości wpływania na wygląd strony. Możemy określić niemal wszystko, zaczynając od wyboru koloru i rodzaju czcionki a kończąc na obramowaniu tabelek ! Jedną z ważniejszych funkcji CSS jest to, że wraz z JavaScriptem tworzy DHTML.
Style CSS cd. CSS opiera się na zasadzie że każdy element HTML-a ma w CSS przypisane mu cechy, a one mogą przyjmować rózne wartości Selektor { właściwość:wartość; właściwość: wartość; ... }
Style CSS cd. Przykładowa definicja stylu dla akapitu przedstawiona jest poniżej P { font-size:10pt; font-family:verdana; color:green; }
Sposoby deklaracji stylu Wewnątrz znacznika - wpisane <B STYLE="font-size:10pt; background-color:yellow;">jakiś tekst</B> W bierzącym pliku - osadzone <HTML> <HEAD> <STYLE TYPE="text/css"> </STYLE> </HEAD> <BODY> <SPAN class="klasa">Witaj na mojej stronie!</SPAN> </BODY> </HTML> W osobnym pliku w ramach znaczników <HEAD></HEAD> – zewnętrzne <LINK REL="stylesheet" HREF="style.css" TYPE="text/css">