Instytut Informatyki, Politechnika —lĄska, Gliwice Laboratorium Sieci Rozlegych WWW-HTML opracowaa:mgr inľ. Joanna Otremba, styczeä 1996 poprawki: mgr. inľ. Jarosaw Flak, luty 1997 1. Tworzenie prostych dokument˘w HTML Dokumenty HTML mogĄ by† tworzone przy pomocy prostych edytor˘w tekstu. SĄ to teksty ASCII. Do formatowania tekstu wykorzystywane sĄ tagi w postaci: <nazwa_tagu>tekst</nazwa_tagu> <nazwa_tagu nazwa_atrybutu=argument>tekst</nazwa_tagu> <nazwa_tagu> 1.1 Najprostszy dokument HTML <TITLE>Tytu dokumentu</TITLE> <H1>Pierwszy, duľy nag˘wek</H1> <BODY> Pierwszy paragraf.<P> Kolejne paragrafy oddzielone sĄ wolnĄ liniĄ.<P> </BODY> Uwaga: Tagi moľna pisa† r˘wnieľ maymi literami. 1.2 Tytu dokumentu Tytu dokumentu pojawia si© jako tytu okienka i moľe by† taki sam jak pierwszy nag˘wek. OgraniczajĄ go tagi <TITLE>...</TITLE> 1.3 Nag˘wki HTML dopuszcza 6 poziom˘w nag˘wk˘w. R˘ľniĄ si© one wielkociĄ czcionki (pierwszy najwi©kszy) i mogĄ by† wykorzystywane np.: do przedstawiania tytu˘w rozdzia˘w. <Hx>tekst nag˘wka</Hx>, gdzie x=1..6. 1.4 Akapity We wszystkich edytorach wcini©cie klawisza <ENTER> powoduje przejcie do nowej linii. Natomiast j©zyk HTML ignoruje ten znak. Aby przej† do nast©pnego akapitu, naleľy uľy† tagu <P> (jak w pierwszym przykadzie), kt˘ry zazwyczaj wstawia dodatkowo pusty wiersz. Do oddzielenia akapit˘w moľna r˘wnieľ uľy† tagu <BR>, kt˘ry powoduje przejcie do nast©pnej linii. Tag <HR> powoduje wstawienie poziomej linii. <CENTER> suľy do centrowania tekstu (r˘wnieľ tablic). <BLINK> </BLINK> powoduje migotanie tekstu. 1.5 ťĄczenie dokument˘w PoĄczenia mi©dzy dokumentami sĄ g˘wnĄ zaletĄ HTML. We wasnym dokumencie moľna zamieci† poĄczenie do innego dokumentu. W ten spos˘b przedstawi† moľna np.: duľszy tekst podzieli† na rozdziay. Tekst, kt˘ry prowadzi do innego dokumentu jest podwietlony lub zaznaczony innym kolorem. PoĄczenie ma zazwyczaj nast©pujĄcĄ posta†: <A HREF="nazwa_dokumentu">tekst</A>, przy czym dokument moľe znajdowa† si© w bieľĄcej kartotece: <A HREF="moj_doc.html">tekst</A>, bĄd« w dowolnej innej: <A HREF="/dok-html/moje-dok/moj_doc.html">tekst</A>. W podanym przykadzie uľyte zostao poĄczenie wzgl©dne. Wykorzystuje si© je dla dokument˘w stanowiĄcych logicznĄ cao† (np. rozdziay podr©cznika). W przeciwnym przypadku moľna stosowa† poĄczenia bezwzgl©dne tzn. uwzgl©dniajĄce peny adres dokumentu: <A HREF="http://www.polsl.gliwice.pl/html/programy/pr-msdos.html"> tekst</A>. 1.6 URL - Uniform Resource Locator URL wykorzystywane sĄ w WWW do okrelania adresu r˘ľnego typu dokument˘w. Struktura URL: typ_«r˘da://host.domena[:port]/cieľka/nazwa_zbioru, gdzie «r˘do: http - zbi˘r na serwerze WWW gopher - zbi˘r na serwerze gopher'owym WAIS - zbi˘r na serwerze WAIS news - grupa dyskusyjna telnet - poĄczenie telnetowe ftp - poĄczenie ftp 1.7 Odnoniki Odnoniki pozwalajĄ na poĄczenie z konkretnym miejscem dokumentu i majĄ posta†: <A NAME="nazwa_odnonika">tekst1</A> - miejsce, do kt˘rego b©dziemy si© odwoywa†, <A HREF="#nazwa_odnonika">tekst2</A> lub <A HREF="URL#nazwa_odnonika">tekst2</A> - poĄczenie do odnonika. Po "klikni©ciu" na "tekst2" przeniesiemy si© do "tekstu1". 2. Listy 2.1 Listy nienumerowane HTML: <UL> <LI>Europa <LI>Azja </UL> WyglĄd: ţ Europa ţ Azja 2.2 Listy numerowane HTML: <OL> <LI>Europa <LI>Azja </OL> WyglĄd: 1. Europa 2. Azja 2.3 Definicje HTML: <DL> <DT>WWW <DD>World Wide Web <DT>HTML <DD>HyperText Markup Language </DL> WyglĄd: WWW World Wide Web HTML HyperText Markup Language 3. Formatowanie dokumentu Nie zawsze poľĄdane jest, aby przeglĄdarka formatowaa dokument, czy jego cz©†. Tak jest w przypadku tekst˘w program˘w, czy innych tego typu tekst˘w. <PRE>tekst</PRE> - "tekst" zosta juľ sformatowany i ma by† wywietlony bez zmian. Dozwolone jest uľycie niekt˘rych tag˘w. <XMP>tekst</XMP> - podobnie jak PRE, z tym, ľe nie sĄ rozpoznawane ľadne tagi. <BLOCKQUOTE>tekst</BLOCKQUOTE> - wskazuje, ľe "tekst" zosta zaczerpni©ty z innego «r˘da 3.1. Wprowadzenie kolor˘w i ta BACKGROUND=rysunek, jako to pojawi sie dany rysunek BGCOLOR="#rrggbb" kolor ta hex.(duľe litery) TEXT="#rrggbb" kolor tekstu LINK="#rrggbb" kolor linku, w ktorym si© nie byo VLINK="#rrggbb" kolor linku, w ktorym si© byo ALINK="#rrggbb"> kolor linku do kt˘rego si© wchodzi 4. Formatowanie znak˘w Formatowanie to pozwala na wyr˘ľnienie fragment˘w tekstu. Dopuszczalne jest stosowanie styl˘w logicznych, bĄd« fizycznych. Te pierwsze sĄ definiowane przez przeglĄdark© uľytkownika, drugie sĄ z g˘ry okrelone. Natomiat ich wyglĄd moľe by† ten sam, np.: <STRONG>tekst</STRONG> i <B>tekst</B> spowodujĄ zwykle wywietlenie tekstu wytuszczonego. Wynik jest ten sam. Jeli jednak uľytkownik zechce mie† ten tekst wywietlany na czerwono, przy stylu logicznym <STRONG> ma takĄ moľliwo†. Poza tym atwiej jest opisa† tag jednym sowem niľ podawa† jak fizycznie wyglĄda† ma tekst (np. courier 12cpi). Dlatego teľ zalecane jest uľywanie styl˘w logicznych. 4.1 Style logiczne <DFN> - definiowane sowo, zazwyczaj wywietlane w formie 'italic' <EM> - podkrelenie, zazwyczaj wywietlane w formie 'italics' <CITE> - cytaty, zazwyczaj wywietlane w formie 'italics' <CODE> - kod komputerowy lub zlecenie HTML, zazwyczaj wywietlane fontami o staej szerokoci <KBD> - klawisz, zazwyczaj wywietlane fontami o staej szerokoci, czasem wytuszczonymi <SAMP> - komunikaty komputerowe, zazwyczaj wywietlane fontami o staej szerokoci <STRONG> - mocniejsze podkrelenie, zazwyczaj wywietlane wytuszczone <VAR> - zmienna, zazwyczaj wywietlane italics 4.2 Style fizyczne <B> - bold <I> - italics <U> - podkrelenie <TT> - fonty o staej szerokoci 5. Entities Poniewaľ znaki takie jak '&' i '<' sĄ zarezerwowane, aby je wstawi† do tekstu, naleľy posuľy† si© specjalnym zestawem znak˘w. SĄ to np: < dla < > dla > & dla & 6. Wstawianie rysunk˘w Wi©kszo† przeglĄdarek potrafi wywietla† rysunki w formacie .xbm lub .gif. Moľna jednak zamieci† w dokumencie rysunki w dowolnym formacie. Zobaczy† je jednak b©dzie m˘g tylko ten uľytkownik, kt˘ry posiada przeglĄdark© do danego typu rysunk˘w. 6.1 Rysunki wewn©trzne Rysunki wewn©trzne to te, kt˘re towarzyszĄ przedstawianemu tekstowi. Naleľy pami©ta†, ľe ich przesanie wymaga sporo czasu, wi©c nie naleľy ich w tekcie umieszcza† zbyt duľo. Aby wstawi† wewn©trzny rysunek naleľy zapisa†: <IMG SRC="URL_rysunku"> ,gdzie URL_rysunku - to cieľka do niego. Z zaoľenia tekst oblewa rysunek od dou. Moľliwe jest ustawienie tekstu w rodku, bĄd« w g˘rze rysunku: <IMG SRC="URL_rysunku" ALIGN=pooľenie>, gdzie: pooľenie : TOP, MIDDLE, BOTTOM - rysunek pooľony centralnie, tekst opywa go zgodnie z atrybutem; pooľenie : LEFT, RIGHT - rysunek dosuni©ty do odpowiedniej strony, tekst opywa go dookoa Poniewaľ niekt˘re przeglĄdarki nie potrafiĄ wywietla† rysunk˘w, dobrze jest umieci† przy nich tekst zast©pczy: <IMG SRC="URL_rysunku" ALT="tekst_zast©pczy">. Rysunek moľna r˘wnieľ otoczy† ramkĄ: BORDER = n, gdzie n jest liczbĄ pikseli w ramce. Do zmiany wymiar˘w rysunku suľĄ atrybuty HEIGHT i WIDTH podane procentowo, bĄd« konkretnymi liczbami. 6.2 Rysunki,animacje, nagrania Rysunki moľna r˘wnieľ wywietla† jako osobne dokumenty: <A HREF="URL_rysunku">tekst</A> W ten spos˘b moľna przedstawia† rysunki, animacje, nagrania. 7. Mapy Opr˘cz zwykych rysunk˘w, w j©zyku HTML moľna zaprojektowa† mapy, na kt˘rych znajdujĄ si© wydzielone obszary. Obszary te sĄ linkami do innych dokument˘w. Spos˘b tworzenia: W zbiorze .html <A HREF="opis obszar˘w"> <IMG SRC="rysunek (mapa)" ISMAP> </A> Opis obszar˘w: default p1.html rectangle (25, 50) (100, 150) p2.html circle (200, 40) p3.html ... Mapy takie moľna r˘wnieľ wykonywa† przy pomocy specjalnch program˘w takich jak np. mapedit. Wystarczy wtedy na naszej stronie umieci† rysunek, wczyta† t© stron© do programu i zaznaczy† obszry. 8. Fonty HTML pozwala na dobranie wielkoci font˘w (od 1 do 7). Warto† domylna: 3. Wielko† font˘w moľna okresla† przy pomocy liczb od 1 do 7 lub odnonie do poprzedniej wielkoci (+ lub -). <FONT SIZE=+2>tekst</FONT> <FONT SIZE=5>tekst</FONT> Fonty bazowe - odnoszĄ si© do caego dokumentu i stanowiĄ podstaw© do relatywnego okrelania wielkoci font˘w. <BASEFONT=n> 9. Tablice HTML pozwala na tworzenie r˘ľnego rodzaju tablic. PoczĄtek opisu tablicy zaznaczony jest tagiem <table>. 9.1 Podstawe atrybuty CELLPADDING - odlego† (w pikselach) tekstu od ramki CELLSPACING - szeroko† ramki wewnĄtrz tablicy BORDER - szeroko† ramki na zewnĄtrz tablicy WIDTH - szeroko† tablicy 9.2 Element TR i jego atrybuty TR definiuje pojedynczy wie...
Tofol