Technologie prezentacji medialnych, © 2006 Igor Garnik 2017-03-24 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 SGML Structuralized Markup Language Istnieje wiele rozszerzeń XHTML, DHTML, PHP, ASP, Perl, Java, JavaScript, … następcą jest XML eXtended 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. <BR> Domykane domykane, np. <B> … </B> 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 <B> … </B> bold Tekst <I> … </I> italic Tekst <U> … </U> underline Tekst <STRIKE> … </STRIKE> strike through Tekst
Znaczniki pojedyncze Działają w danym miejscu <BR> break nowa linia <HR> horizontal resolution pozioma linia
Zagnieżdżanie <B> Ala <B> Ala <I> ma <I> ma Znaczniki mogą być zagnieżdżane - ale nie wolno ich przeplatać Jeżeli znaczniki są od siebie oddalone, to dobrze jest robić wcięcia <B> Ala <I> ma </I> dwa </B> koty <B> Ala <I> ma </B> dwa </I> 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 <FONT COLOR= ’’nazwa’’> tekst </FONT> <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 http://www.zie.pg.gda.pl/~jwach/jacek.wachowicz.php ./../ulica/siodme_pietro/laboratorium.html Specjalne katalogi: . .. ~
Przydatne znaczniki Indeksy Znaki specjalne Przydatne znaki: Indeks dolny: <SUB> … </SUB> Indeks górny: <SUP> … </SUP> Przykład: H2O H<SUB>2</SUB>O 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 * 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 <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ę