Podstawy języka HTML

Wykład Podstawy języka HTML dr inż. Jacek Wachowicz jacek.wachowicz@zie.pg.gda.pl www.zie.pg.gda.pl/~jwach

Co to jest HTML? • HyperText Markup Language • 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 SGMLStructuralized Markup Language • Istnieje wiele rozszerzeń XHTML, DHTML, PHP, ASP, Perl, Java, JavaScript, … • następcą jest XMLeXtended Markup Language • 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. <HR>(wstaw poziomą linię rozdzielającą) • Istnieją • znaczniki pojedyncze, np. • Domykane domykane, np. … • Zwyczajowo są pisane wielkimi literami

Pierwsza strona <HTML> <HEAD> <TILTE> Opowieść o Ali </TITLE> </HEAD> <BODY> Ala ma kota. Kot też ma swoją Alę. </BODY> </HTML>

Znaczniki domykane • Działają na określonej przestrzeni (od…do) • Znacznik domykający jest taki jak otwierający ale z ukośnikiem • … bold Tekst • … italicTekst • … underlineTekst • <STRIKE> … </STRIKE>strike throughTekst

Znaczniki pojedyncze • Działają w danym miejscu • break nowa linia • <HR>horizontal resolution pozioma linia

Zagnieżdżanie • Znaczniki mogą być zagnieżdżane - ale nie wolno ich przeplatać • Jeżeli znaczniki są od siebie oddalone, to dobrze jest robić wcięcia Ala ma dwa koty Ala ma dwa koty

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 • <BODY BGCOLOR=‘’nazwa’’> …</BODY> • Kolory podstawowe mają swoje zdefiniowane nazwy • Zamiast predefiniowanych nazw można użyć koloru zdefiniowanego szesnastkowo: #RRGGBB • Przykłady: #000000 czarny #FFFFFF biały #999999 szary #FF0000 czerwony (najjaśniejszy) #990000 czerwony (ciemniejszy) #00FF00 zielony #3F299A ???

Linki • <A HREF=‘’adres strony’’> tekst </A> • 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: H2O H2O • Znaki specjalne < < > > " ” twarda spacja • Przydatne znaki:

Listy • Lista uporządkowana <OL> … </OL> • Lista nieuporządkowana <UL> … </UL> • Element listy <LI> … </LI> • 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 [I,II,III…] • Dla list nieuporządkowanych: circle, round, square • Przykład: • <OL TYPE=’’a’’><LI> śniadanie </LI> <LI> obiad </LI> <UL> <LI> I danie </LI> <LI> II danie </LI> <LI> deser </LI></UL> <LI> kolacja </LI></OL> • a. śniadanie b. obiad * I danie * II danie * deserc. 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 <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2"> • Wprowadzanie: lewy klawisz alt i kod znaku na klawiaturze numerycznej • Rozwiązanie niezgodne ze standardem:<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1250">

Dziękuję za uwagę

Podstawy języka HTML