Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

Transkrypt

1 HTML

2 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śd HTML pozwala na zbudowanie prostej strony, oraz kontrolę nad stworzoną stroną, jednak aby tworzyd prawdziwie profesjonalne witryny konieczna jest znajomośd co najmniej jeszcze czterech języków: CSS JS PHP SQL

3 Witryna internetowa Każda witryna internetowa składa się z szeregu plików. W przypadku witryn opartych na kodzie html, musi byd 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 unikad w nazwach plików używania polskich znaków.

4 Znaczniki (tagi)! Podstawowymi elementami dokumentu HTML są znaczniki. Większośd znaczników ma początek i koniec, chociaż występują również tzw, znaczniki puste, czyli nie posiadające kooca. <znacznik początkowy> </znacznik końcowy> Np.: <HTML>.</HTML> Wielkośd liter nie ma znaczenia(chociaż dla zgodności z XHTML powinniśmy je pisad małymi literami), jak również nie muszą byd w tej samej linii. Uwaga: Jeżeli nie mamy do czynienia ze znacznikiem pustym to znacznik musi byd zamknięty!!!!

5 Znaczniki (tagi) cd. Znaczniki można zagnieżdżad, co oznacza że w ramach jednego elementu można wstawiad kolejny. Przykładowo możemy w znaczniku akapitu wstawid znacznik kursywy. Np. <p> <i> jakiś tekst </i> </p>! Uwaga: Musi byd zachowana kolejnośd znaczników, czyli jak używamy jednego znacznika w innym to oznacza że muszą się tam znajdowad zarówno znacznik otwierający jak i zamykający!!!

6 Atrubuty W ramach znaczników mogą byd 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>

7 Podstawowa struktura dokumentu <HTML> <HEAD> <TITLE> Tytuł strony </TITLE> <META http-equiv="content-type" content="text/html; charset=iso "> </HEAD> <BODY> Treść strony </BODY> </HTML>

8 Znaczniki META Poniżej opisuję podstawowe opisy najbardziej użytecznych znaczników meta. <META http-equiv="content-type" content="text/html; charset=iso "> - Polecenie informuje przeglądarkę o obsłudze znaków. Dzięki kodowaniu iso i przekonwertowaniu jej za pomocą specjalnych programów twoja strona będzie prawidłowo interpretowad 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 zawierad maksymalnie 250 znaków.

9 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

10 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śd flag i ta wymaga zamknięcia </H#>.

11 Znacznik FONT Każdy tekst, który będzie miał mied określony kolor, krój wielkośd czcionki musimy objąd 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śd czcionki Wielkośd czcionki reguluje parametr - SIZE="x". "X" może przyjmowad wartości od 1-7.

12 Kolory Kolory możemy podawad 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>

13 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

14 Pomocne dodatkowe znaczniki cd. <HR> - wstawienie tego tagu spowoduje wyświetlenie na stronie poziomej lini. Dodatkowo możemy zadeklarowad szerokośd 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 zakooczenia) 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)

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

16 Grafika Przy wstawianiu grafiki będziemy zawsze wstawiad znacznik <IMG>. Samo wstawienie tego tagu nie spowoduje nic (tak na prawdę to może spowodowad tylko błąd). Wewnątrz tego znacznika będziemy wstawiad kolejne parametry takie jak: SRC="nazwa_obrazka.gif" - dzieki tej właściwości przeglądarka wie jaki plik ma wyświetlid. Należy pamiętad, że przeglądarki interpretują tylko dwa typy grafiki - gif, jpg. Jeżeli obrazek znajduje się w tym samym katalogu co dokument HTML nie trzeba podawad ścieżki, w przeciwnym wypadku tak. WIDTH="30" Height="50" - polecenia określają szerokośd obrazka (Width), oraz wysokośd (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

17 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 zmienid, i aby tekst otaczał grafikę należy zastosowad właściwośd - ALIGN. Może ona przyjmowad właściwości "left", "center", "right", "justify", "top", "middle", "bottom", "absmiddle", "absbottom", "texttop", "baseline".

18 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 <a <a href="muzyka.wav">muzyka</a>

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

20 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 "> </HEAD> <FRAMESET cols="100, *"> <FRAME SRC="menu.html" NAME="menu" SCROLLING="no" NORESIZE> <FRAME SRC="zawartosc.html" NAME="Ramka2" SCROLLING="auto"> </FRAMESET> </HTML>

21 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ócid pamięcią do tworzenia odsyłaczy i właściwości TARGET. Przykładowy link mógłby wyglądad 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śd "_self" działa tak jakby właściwośd 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".

22 Style CSS Głównym zadaniem HTML-a 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ślid niemal wszystko, zaczynając od wyboru koloru i rodzaju czcionki a koocząc na obramowaniu tabelek! Jedną z ważniejszych funkcji CSS jest to, że wraz z JavaScriptem tworzy DHTML.

23 Budowa CSS opiera się na zasadzie że każdy element HTML-a ma w CSS przypisane mu cechy, a one mogą przyjmowad rózne wartości Selektor { } właściwośd:wartość; właściwośd: wartość;...

24 Budowa cd. Przykładowa definicja stylu dla akapitu przedstawiona jest poniżej P { } font-size:10pt; font-family:verdana; color:green;

25 Sposoby deklaracji stylu 1. Wewnątrz znacznika - wpisane <B STYLE="font-size:10pt; background-color:yellow;">jakiś tekst</b> 2. W bierzącym pliku - osadzone <HTML> <HEAD> <STYLE TYPE="text/css"> </STYLE> </HEAD> <BODY> <SPAN class="klasa">witaj na mojej stronie!</span> </BODY> </HTML> 3. W osobnym pliku w ramach znaczników <HEAD></HEAD> zewnętrzne <LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

26 Klasy Celem stosowania klas jest zróżnicowanie formatowania znaczników html. Możemy je stosowad na dwa sposoby: 1. Jako klasę ogólną, do stosowania ze wszystkimi znacznikami.nazwaklasy {.} 2. Jako klasę przypisaną dla danego znacznika h1.nazwaklasy {.} W kodzie strony używamy zaś w następujący sposób: <h1 class= nazwaklasy > tekst</h1>

27 Identyfikatory Wykorzystujemy do definiowania stylów dla konkretnych elementów i tworzenia odsyłaczy wewnętrznych Deklarujemy w stylach w następujący sposób: #nazwa{ } W kodzie strony używamy zaś w następujący sposób: <h1 id= nazwa > tekst</h1>! Uwaga: Nie wolno w kodzie strony dwa razy użyd tego samego identyfikatora