1 HTML
2 Podstawowa struktura dokumentu
3 Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznich znaczników meta. Polecenie informuje przeglądarkę o obsłudze znaków. Dzieki kodowaniu iso 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. Ten znacznik pozwoli przeglądarkom łatwiejsze odnalezienie jej. W miejscu - "wyrazy" wpisz wyrazy opisujące twoją stronę np. Wpisany w miejscu "opis" tekst będzie wyświetlony po znalezieniu twojej strony przez wyszukiwarkę. Opis może zawierać maksymalnie 250 znaków. Wisany w miejsce "dene osoby" tekst będzie informował o autorze strony. Znacznik informuje o używanym edytorze do tworzenia stron Polecenie informuje o języku strony Znacznik powoduje, że strona będzie przeładowywana co czas podany w miejscu "x". Czas wyrażany jest w milisekundach
4 Nagłówki Nagłówki (Heading) służą w HTML'a do tworzenia... nagłówków!!! Nagłówek otwieramy komendą
5 Znacznik FONT Każdy tekst, który będzie miał mieć określony kolor, krój wielkość czcionki musimy objąć znacznikami np. wpisanie kodu: tekst1 tekst2 spowoduje wyświetlenie w przeglądarce: tekst1 tekst2 Wielkość czcionki Wielkość czcionki reguluje parametr - SIZE="x". "X" może przyjmować wartości od
6 Kolory
7 Pomocne dodatkowe znaczniki - obięty tymi znacznikami tekst jest pogrubiony - obięty tymi znacznikami tekst jest przekreślony - obięty tymi znacznikami tekst jest pochylony - obięty tymi znacznikami tekst jest podkreślonu - obięty tymi znacznikami tekst jest ułożony przy lewej krawędzi
- wstawienie tego tagu spowoduje wyświetlenie na stronie poziomej lini. Dodatkowo możemy zadeklarować szerokość lini
, oraz kolor
. Dodanie słówka "NOSHADE" spowodyje, że linia nie będzie trójwymiarowa -
8 Listy i
- lista nieuporządkowana i
- lista uporządkowana Następnie pomiędzy tymi flagami wstawiamy poszczególne pozycje (/
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 parametr TYPE np..
. Wartości tego parametru to:
9 Grafika Przy wstawianiu grafiki będziemy zawsze wstawiać znacznik . 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".
10 Hiperłącza Zajrzyj Muzyka
11 Tabele Tabele ograniczają znaczniki 12 Tabele cd. Definiując dodatkowe właściwośći tagu 13 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ę: 14 Ramki cd Załóżmy, że stworzyliśmy plik index.html który posiada strukturę ramkową: 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: Kilka linków 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: 15 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. 16 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ść; ... } 17 Style CSS cd. Przykładowa definicja stylu dla akapitu przedstawiona jest poniżej P { font-size:10pt; font-family:verdana; color:green; } 18 Sposoby deklaracji styluWewnątrz znacznika - wpisane jakiś tekst W bierzącym pliku - osadzone Witaj na mojej stronie! W osobnym pliku w ramach znaczników – zewnętrzne 19 . Wewnątrz wstawia się tagi
, a w nich .Przykładowa tabela wygląda następująco:
Kolumna1A Kolumna1B Kolumna2A Kolumna2B możemy regulować wygląd całej tabeli. Parametr BACKGROUND dediniuje obrazek który ma zostać wykorzystany na tło tabeli np.
Możemy także podać kolor tła:
Właścowość BORDER ustala grubość ramki w okół tabeli, zaś BORDERCOLOR jej kolor.
Parametr CELLPADDING zdefiniować odstęp pomiędzy tekstem, a ramką kratki, która zostaje zdefiniowana poprzez parametr CELLSPACING=grubość.
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).
i Wstawione znaczniki pomiędzy tagi zostają ustawione w jednej lini. Ich ilość jest praktycznie nie ograniczona. Znacznik posiada dodatkowe parametry takie jak: BGCOLOR, który ustala kolor tła kratki: lub WIDTH - parametr używany w przypadku jeżeli chcemy wymusić na kratce określoną szerokość: