HTML
Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów nazywanych znacznikami, określającymi poszczególne elementy na stronie( tekst, grafikę, odnośniki, itp.). Znajomość HTML pozwala na zbudowanie prostej strony, oraz kontrolę nad stworzoną stroną, jednak aby tworzyć prawdziwie profesjonalne witryny konieczna jest znajomość co najmniej jeszcze czterech języków: CSS JS PHP SQL
Witryna internetowa Każda witryna internetowa składa się z szeregu plików. W przypadku witryn opartych na kodzie html, musi być przynajmniej jeden plik o nazwie index.htm, lub index.html. Jest to pierwszy plik otwierany przez przeglądarkę, oczywiście bardziej skomplikowane strony mają więcej plików z rozszerzeniem html.! Uwaga: Należy unikać w nazwach plików używania polskich znaków.
Znaczniki (tagi) Podstawowymi elementami dokumentu HTML są znaczniki. Większość znaczników ma początek i koniec, chociaż występują również tzw, znaczniki puste, czyli nie posiadające końca. <znacznik początkowy> </znacznik końcowy> Np.: <HTML>.</HTML> Wielkość liter nie ma znaczenia(chociaż dla zgodności z XHTML powinniśmy je pisać małymi literami), jak również nie muszą być w tej samej linii.! Uwaga: Jeżeli nie mamy do czynienia ze znacznikiem pustym to znacznik musi być zamknięty!!!!
Znaczniki (tagi) cd. Znaczniki można zagnieżdżać, co oznacza że w ramach jednego elementu można wstawiać kolejny. Przykładowo możemy w znaczniku akapitu wstawić znacznik kursywy. Np. <p> <i> jakiś tekst </i> </p>! otwierający Uwaga: Musi być zachowana kolejność znaczników, czyli jak używamy jednego znacznika w innym to oznacza że muszą się tam znajdować zarówno znacznik jak i zamykający!!!
Atrubuty W ramach znaczników mogą być potrzebne dodatkowe ustawienia ich działania. Wykonuje się to za pomocą tzw. atrybutów, które podajemy po nazwie znacznika początkowego oddzielone spacją. <znacznik początkowy atrybut1 atrybut2 > </znacznik końcowy> np. <p align= center >..</p>
Podstawowa struktura dokumentu <HTML> <HEAD> <TITLE> Tytuł strony </TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> Treść strony </BODY> </HTML>
Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznych znaczników meta. <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> - Polecenie informuje przeglądarkę o obsłudze znaków. Dzięki 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.
Znaczniki META <META NAME="Author" CONTENT="dane osoby"> - Wpisany 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 Kolory możemy podawać na dwa sposoby: 1. Używając ich nazw 2. Używając kodów podanych szesnastkowo Np. <p color= red >.</p> <p color= #CC3300 >.</p>
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> - obję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> - objęty tymi znacznikami tekst jest ułożony przy prawej krawędzi
Pomocne dodatkowe znaczniki cd. <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 znacznikami wstawiamy poszczególne pozycje <LI> - List Item np. <ul> <li>aaaaa</li> <li>bbbb</li> </ul>
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
Grafika cd. 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 Rolą hiperłączy jest jak sama nazwa wskazuje przeniesienie na do konkretnego miejsca. Znacznik odpowiadający za to to <a>..</a> Np.. <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><imgsrc="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>
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".
Formularze Formularze składają się z odpowiednich pól zamkniętych w znacznikach <form>.</form> <form action="mailto:adres e-mail?subject=temat" method="post"> (Tutaj umieszcza się pola formularza) </form>
Formularze pole tekstowe <form action="..."> </form> <input type="text" name="nazwa" />
Formularze pole hasło <form action="..."> </form> <input type="password" name="nazwa" />
Formularze pole wyboru <form action="..."> <input type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola </form>
Formularze pole opcji <form action="..."> <input type="radio" name="nazwa" value="wartość" />Tu wpisz opis pola </form>
Formularze lista rozwijana <form action="..."> <select name="nazwa"> <option>tu wpisz pierwszą możliwość</option> <option>tu wpisz drugą możliwość</option> </form> (...) </select>
Formularze obszar tekstowy <form action="..."> <textarea name="nazwa" cols="x" rows="y">tu wpisz tekst który pojawi się domyślnie</textarea> </form>
Formularze przycisk <form action="..."> <button type="rodzaj">treść przycisku</button> </form> "submit" - przycisk wysłania formularza "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk (domyślnie)