Zastosowanie technologii medialnych i internetowych Wykład Podstawy języka HTML dr inż. Jacek Wachowicz [email protected] www.zie.pg.gda.pl/~jwach

Co to jest HTML?

•

H yper T ext M arkup L anguage

•

Został zdefiniowany w 1981 r przez Tima Berners-Lee w szwajcarskim laboratorium CERN

•

Jest językiem programowania

• •

Opartym na języku angielskim Definiującym co i jak ma zostać wyświetlone

HTML

• • •

został wygenerowany w SGML S tructuralized M arkup L anguage Istnieje wiele rozszerzeń XHTML, DHTML, PHP, ASP, Perl, Java, JavaScript, … następcą jest XML e X tended M arkup L anguage

• •

Podstawową ideą jest hipertekst realizowany jako linki Zbiegiem czasu stał się multimedialny

Polecenia - znaczniki

•

Polecenia (tzw. Znaczniki)

• • •

są zaznaczane wewnątrz nawiasów trójkątnych < > Oznaczają co ma być zrobione, np.

---

(wstaw poziomą linię rozdzielającą) Istnieją

•

znaczniki pojedyncze, np.

•

Domykane domykane, np. …

•

Zwyczajowo są pisane wielkimi literami

Pierwsza strona

Opowieść o Ali Ala ma kota.

Kot też ma swoją Alę.

Znaczniki domykane

• •

Działają na określonej przestrzeni (od…do) Znacznik domykający jest taki jak otwierający ale z ukośnikiem

• • • •

…

bold

… …

italic underline

…

strike through

Tekst

Tekst

Tekst Tekst

Znaczniki pojedyncze

•

Działają w danym miejscu

• •

---

break horizontal resolution nowa linia pozioma linia

Zagnieżdżanie

•

Znaczniki mogą być zagnieżdżane ale nie wolno ich przeplatać Ala Ala ma ma dwa dwa koty koty

•

Jeżeli znaczniki są od siebie oddalone, to dobrze jest robić wcięcia

Poprawność i standardy

•

Pamiętaj, że przeglądarki zawsze starają się wyświetlić stronę poprawnie – nawet gdy ma ona błędy.

•

Jeżeli jednak są błędy – wówczas różne przeglądarki różnie się zachowują

•

Dlatego to, że u Ciebie coś dobrze wygląda nie musi oznaczać, że u innych też będzie dobrze wyglądać!

•

Dlatego ważne jest, by być uważnym i stosować się do standardów!

Kolory

• • •

tekst … Kolory podstawowe mają swoje zdefiniowane nazwy

•

Zamiast predefiniowanych nazw można użyć koloru zdefiniowanego szesnastkowo: # RR GG BB

•

Przykłady: #000000 czarny #FFFFFF biały #999999 szary #FF0000 czerwony (najjaśniejszy) #990000 czerwony (ciemniejszy) #00FF00 zielony #3F299A ???

Linki

•

tekst

• •

Adres bezwzględny pok. 716, gm. B ul. G. Narutowicza 11/12 80 952 Gdańsk Adres względny

•

Wyjdź z budynku

• • • •

Przejdź przez ulicę Wejdź do gmachu B Pojedź na 7. piętro Wejdź do pokoju 716

•

Adres bezwzględny http://www.zie.pg.gda.pl/~jwach/jacek.wachowicz.php

•

Adres względny

•

./../ulica/siodme_pietro/laboratorium.html

•

Specjalne katalogi: . .. ~

Przydatne znaczniki

•

Indeksy

•

Indeks dolny: _…

•

Indeks górny: ^…

•

Przykład: H 2 O H₂O

•

Znaki specjalne < < > "   > ”

twarda spacja

•

Przydatne znaki:

Listy

• • • • • •

Lista uporządkowana

…

Lista nieuporządkowana

…

Element listy

…

Listy mogą być zagnieżdżane Można zmieniać typy list dodając wewnątrz znacznika otwierającego atrybut TYPE=‘’typ’’, który może przyjmować wartości

• •

Dla list uporządkowanych: 1 [1,2,3…] a [a,b,c…] A [A,B,C…] I Dla list nieuporządkowanych: circle , round , square [I,II,III…] Przykład:

1. śniadanie
2. obiad
• I danie
• II danie
• deser
3. kolacja

a. śniadanie b. obiad * I danie * II danie * deser c. kolacja

Polskie znaki

• •

wewnątrz sekcji HEAD należy umieścić deklarację używanego zestawu liter Standardem oficjalnie przyjętym w Polsce jest ISO-8859-2

•

Wprowadzanie: lewy klawisz alt i kod znaku na klawiaturze numerycznej

•

Rozwiązanie niezgodne ze standardem:

Dziękuję za uwagę