Wstęp do HTML. Najstarszym i najprostszym pierwowzorem hipertekstu są powszechnie znane odnośniki encyklopedyczne:

Transkrypt

1 Wstęp do HTML Internet - sieć sieci, ogólnoświatowa intersieć, która łączy komputery z innymi komputerami poprzez protokoły z rodziny TCP/IP. Sieć WWW - zbiór serwerów WWW, który stanowi podzbiór całego Internet. Najstarszym i najprostszym pierwowzorem hipertekstu są powszechnie znane odnośniki encyklopedyczne: kartofel [niem.], bot. ziemniak. ziemniak, bylina z rodziny psiankowatych... psiankowate, rodzina roślin obejmująca ok gatunków... HTML (ang. Hypertext Markup Language) - język powszechnie używany do publikacji dokumentów w Internecie. Nie jest to język programowania, tylko język opisu dokumentu, jednakże może zawierać osadzone fragmenty napisane w językach programowania, takich jak na przykład JavaScript, czy WBScript. Najważniejsze cechy HTML: powszechna możliwość przeglądania dokumentów hipertekst obsługa nie tylko tekstu, ale i rysunków, animacji, video, dźwięków możliwość osadzania skryptów fragmentów napisanych w językach programowania Historię HTML można przedstawić następująco: HTML 1.0 powstał w 1990 HTML 2.0 powstał w 1996 jako RFC 1866, opisywał zasadniczą funkcjonalność HTML na podstawie stanu z roku HTML 3.2 pierwsza rekomendacja organizacji W3C (World Wide Web Consortium), dotycząca HTML. Reprezentowała konsensus co do HTML w roku HTML 3.2 dodawał szeroko stosowane możliwości HTML, takie jak tabele, aplety, opływ tekstu wokół rysunków, indeks górny i dolny. Zachowywał przy tym zgodność wsteczną ze standardem HTML 2.0. HTML 4.0 pochodzi z roku Pozwala na oddzielenie informacji formatujących, takich jak wielkość, krój czy kolor czcionki, od treści i struktury dokumentu. Ułatwia to znacznie tworzenie i utrzymywanie większych dokumentów i ich zbiorów witryn. Nowy system przechowywania informacji formatujących nosi nazwę CSS (Cascading Style Sheets). CSS Level 2 pochodzi z roku Jest to rozszerzenie możliwości formatujących CSS. Pozwala, między innymi, na bardzo precyzyjne rozmieszczanie elementów na stronach WWW. XML 1.0 powstaje w 1998 jako uproszczenie SGML. XHTML 1.0 pochsodzi z 2000 roku. Jest to ponowne sformułowanie HTML 4.01 zgodnie z zasadami XML. Łączy uporządkowanie XML z możliwościami HTML. Iwona Dolińska, WSEI Internet i jego usługi 1

2 Uproszczone drzewo genealogiczne HTML: GML 1969 SGML 1974 XML 1998 HTML 1990 XHTML 2000 XML jest podzbiorem SGML, natomiast HTML jest konkretną aplikacją SGML i nie ma jego ogólności. SGML i XML są metajęzykami, przy pomocy których można definiować konkretne języki, nazywane typami dokumentów. W XML można za pomocą znaczników zapisywać dowolne hierarchiczne struktury danych. W HTML konkretne parametry dokumentu opisane explicite w standardzie, takie jak na przykład względna wielkość czcionki, czy akapit. W XML i w HTML przyjęto na stałe, że znaczniki rozpoczynają się od znaku <. Standard HTML 4.01 określa trzy różne wersje języka: podstawową, przejściową i wersję tylko dla dokumentów z ramkami. Wersja podstawowa zabrania użycia tych wszystkich cech HTML, które występowały w poprzednich wersjach standardu HTML, ale w wersji 4.01 zostają wycofane, np. znaczniki dot. prezentacji dokumentu, takie jak rodzaj czy kolor czcionki. Do określania tego rodzaju cech służą dokumenty CSS. Wersja podstawowa jest podstawą niniejszego wykładu z HTML-a. Źródła: Elizabeth Castro, HTML 4, wydanie 3, Wydawnictwo Helion, Jennifer Niederst, Tworzenie stron WWW. Almanach, wydanie 2, Wydawnictwo Helion, Iwona Dolińska, WSEI Internet i jego usługi 2

3 Pierwszy dokument HTML Znaczniki służą one do zaznaczenia w tekście pewnych fragmentów, jako posiadających określone znaczenie, np. <h1> i </h1> to znaczniki otwierający i zamykający, wskazujący na nagłówek. Element - tekst od znacznika rozpoczynającego do odpowiadającego mu znacznika zamykającego włącznie. dodatkowe informacje, rozszerzające lub modyfikujące rolę znacznika, np. <HTML lang= fr > Najprostszy przykład dokumentu HTML: Kod HTML " <HTML> <HEAD> <TITLE>Prosty dokument</title> </HEAD> <BODY> HTML jest łatwy! </BODY> </HTML> HTML jest łatwy! Wynik działania Deklaracja typu dokumentu zawiera identyfikator publiczny typu dokumentu oraz adres internetowy DTD. Nagłówek dokumentu zawiera informacje opisujące dokument: <TITLE> Wymagany. Tytuł dokumentu, wyświetlany w pasku tytułu okna przeglądarki. <BASE> Element ten pozwala określić bazowy adres internetowy, względem którego w dokumencie będą podawane adresy względne. Na przykład umieszczenie w nagłówku: <BASE HREF=" /> oznacza, że następujący element w części właściwej dokumentu: <A HREF="ala/makota.html" /> zostanie zinterpretowany jako: <A HREF=" /> <LINK> Element ten pozwala zapisać w dokumencie odwołanie do innego pliku. Może być używany do określenia zewnętrznego arkusza stylów CSS dla danego dokumentu. Na przykład: <LINK HREF="style.css" TYPE="text/css" REL="stylesheet"> <STYLE> Wewnątrz tego elementu można umieszczać arkusze stylów CSS. <SCRIPT> W ramach tego elementu można umieszczać kod programu w języku JavaScript lub VBScript. <META> Elementy ten służy do podawania różnych informacji o dokumencie. Istnieją dwa typy znaczników <META>, jeden z nich używa atrybutu NAME, a drugi atrybutu HTTP-EQUIV. Informacja z atrybutu HTTP-EQUIV jest traktowana, jakby pochodziła z nagłówka HTTP. W elemencie <META> można podawać: słowa kluczowe dla wyszukiwarek internetowych: <META NAME="keyword" CONTENT="petunie, floksy, bratki, nasturcje" /> krótki opis strony dla wyszukiwarek internetowych: Iwona Dolińska, WSEI Internet i jego usługi 3

4 <META NAME="description" CONTENT="Rodzinny sklep ogrodniczy w Wesołej" /> język dokumentu: <META HTTP-EQUIV="CONTENT-language" CONTENT="pl" /> informacje o autorze i o prawach autorskich do dokumentu: <META NAME="author" CONTENT="Iwona Dolińska" /> <META NAME="copyright" CONTENT="2004, Wyższa Szkoła Ekonomiczno-Informatyczna" /> polecenie regularnej aktualizacji dokumentu: <META HTTP-EQUIV="refresh" CONTENT="20" /> termin ważności dokumentu: <META HTTP-EQUIV="expires" CONTENT="Mon 16 Feb :20:00 EST" /> sposób kodowania polskich liter w dokumencie, np. zgodnie ze standardem Latin-2: <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso " /> Iwona Dolińska, WSEI Internet i jego usługi 4

5 Formatowanie tekstu w dokumencie HTML Znaczniki formatujące można podzielić na cztery grupy: elementy blokowe style wbudowane odstępy i rozmieszczenie listy Elementy blokowe służą przede wszystkim do wyróżnienia w tekście nagłówków i akapitów: Kod HTML " <html> <title>formatowanie tekstu w HTML</title> <body> <h1>formatowanie tekstu w HTML</h1> <h2>przykłady elementów blokowych</h2> <p>elementami blokowymi są znaczniki nagłówków oraz akapit,</p> <div>ale można używać także kilku innych, np. właśnie div</div> <div>elementami formatowania są też znacznik cytatu blokowego i znacznik adresu</div> <blockquote><div>tekst zawarty w tym znaczniku jest cytatem blokowym, czyli długim cytatem, wyświetlanym zwykle z wcięciami po lewej i prawej stronie oraz z dodatkową przestrzenią ponad i pod akapitem.</div></blockquote> <address>iwona Dolinska, WSEI</address> </body> </html> Wynik działania Formatowanie tekstu w HTML Przykłady elementów blokowych Elementami blokowymi są znaczniki nagłówków oraz akapit, ale można używać także kilku innych, np. właśnie div. Elementami formatowania są też znacznik cytatu blokowego i znacznik adresu. Tekst zawarty w tym znaczniku jest cytatem blokowym, czyli długim cytatem, wyświetlanym zwykle z wcięciami po lewej i prawej stronie oraz z dodatkową przestrzenią ponad i pod akapitem. Iwona Dolinska, WSEI Znaczniki elementów blokowych: <address>...</address> Zawiera informację kontaktową autora strony, umieszczaną przeważnie na początku lub na końcu dokumentu. <blockquote>...</blockquote> Tekst zawarty w tym znaczniku jest cytatem blokowym, czyli długim cytatem. cite=url Zawiera informację o źródle, z którego pochodzi cytat. <div>...</div> Oznacza fragment dokumentu jako sekcję tekstu, którą przeglądarka wyświetli od nowego wiersza, jako osobny blok tekstu. class=nazwa Nadaje nazwę elementowi lub grupie elementów. id=nazwa Nadaje elementowi określoną nazwę, która musi być unikalna w całym dokumencie. style=właściwości stylu Zawiera informacje o formatowaniu, które ma być zastosowane do tego fragmentu tekstu. Iwona Dolińska, WSEI Internet i jego usługi 5

6 <hn>...</hn> Oznacza, że zawarty między znacznikami tekst jest nagłówkiem. Istnieje sześć poziomów nagłówków, od <h1> do <h6>. <p>...</p> Tekst zawarty w tym znaczniku jest osobnym akapitem. Przeglądarki wyświetlają go od nowej linii i dodają pustą przestrzeń nad nim i pod nim. Przykład użycia nagłówków oraz atrybutów class i id: Kod HTML " <html> <title>nagłówki</title> <body> <h1>nagłówki w HTML</h1> <h2>działają w ten sposób, </h2> <h3>że każdy kolejny jest wyświetlany</h3> <h4>coraz mniejszą czcionką</h4> <h5>aż stanie się mniejszy</h5> <h6>od otaczającego go tekstu</h6> <p class= uwaga >Każdy nagłówek jest wyświetlany od nowego wiersza, z dodaniem pustej przestrzeni nad nim i pod nim.</p> <p id= dopisek >Oczywiście wszystkie wpisane tu znaki nowej linii są ignorowane przez przeglądarki.</p> </body> </html> Wynik działania Nagłówki w HTML działają w ten sposób, że każdy kolejny jest wyświetlany coraz mniejszą czcionką aż stanie się mniejszy od otaczającego go tekstu Każdy nagłówek jest wyświetlany od nowego wiersza, z dodaniem pustej przestrzeni nad nim i pod nim. Oczywiście wszystkie wpisane tu znaki nowej linii są ignorowane przez przeglądarki Iwona Dolińska, WSEI Internet i jego usługi 6

7 Style wbudowane to grupa znaczników, które mają wpływ na wygląd i znaczenie tekstu. Kod HTML " <html> <title>style wbudowane</title> <body> <h1>style wbudowane przykłady</h1> <p>tekstowi w HTML można nadać <b>pewien domyślny</b> <i>wygląd</i>. Można użyć <big>trochę większej</big> lub <small>trochę mniejszej</small> czcionki. Tekst <em>wyróżniony</em> zwykle wyświetlany jest kursywą, a <strong>wyszczególniony</strong> boldem.</p> <p>inne możliwości to utworzenie <sup>indeksu górnego</sup> lub <sub>indeksu dolnego</sub>. Można specjalnie oznaczyć skrót: <abbr title="iwona Dolinska">I. D.</abbr>, akronim: <acronym title="world Wide Web">WWW</acronym>, fragment <code>kodu źródłowego</code> i <var>nazwę zmiennej.</var></p> <p><span> Jeśli poprawiamy dokument,</span> to można oznaczyć fragment <del>usunięty</del> lub <ins>wstawiony</ins>.<div>w dokumencie mogą się też znaleźć <cite>cytaty z książek</cite>, i inne <q> krótkie cytaty </q>, </div><dfn>definicje</dfn>, <tt>czy tekst dalekopisu.</tt></p> </body> </html> Wynik działania Style wbudowane - przykłady Tekstowi w HTML można nadać pewien domyślny wygląd. Można użyć trochę większej lub trochę mniejszej czcionki. Tekst wyróżniony zwykle wyświetlany jest kursywą a wyszczególniony boldem. Inne możliwości to utworzenie indeksu górnego lub indeksu dolnego. Można specjalnie oznaczyć skrót: I. D., akronim: WWW, fragment kodu źródłowego i nazwę zmiennej. Jeśli poprawiamy dokument, to można oznaczyć fragment usunięty lub wstawiony. W dokumencie mogą się też znaleźć cytaty z książek, i inne "krótkie cytaty", definicje, czy tekst dalekopisu. Style wbudowane można podzielić na dwie kategorie koncepcyjne: style logiczne, wyróżniające rodzaj treści (znaczenie, kontekst, bądź zastosowanie zawartego tekstu) style fizyczne, definiujące wygląd (zawierają określone instrukcje wyświetlania) Znaczniki stylów logicznych: <abbr>...</abbr> Określa zawarty w nim tekst jako skrót. title=tekst Zawiera pełne rozwinięcie skrótu, co może być przydatne w przeglądarkach tekstowych, syntezatorach mowy, systemach tłumaczących i wyszukiwarkach. <acronym>...<acronym/> Oznacza akronim. title=tekst Zawiera pełne rozwinięcie akronimu, co może być przydatne w przeglądarkach tekstowych, syntezatorach mowy, systemach tłumaczących i wyszukiwarkach. <cite>...</cite> Oznacza cytat, zwłaszcza z książki, magazynu, artykułu. <del>...</del> Oznacza tekst usunięty. Niektóre przeglądarki wyświetlają go jako przekreślony. Iwona Dolińska, WSEI Internet i jego usługi 7

8 cite=url Może być ustawiony na fragment dokumentu, wyjaśniający powód modyfikacji. datetime=rrrr-mm-ddgg:mm:sstdz Określa datę i czas dokonania zmiany. Data i czas muszą być zgodne z podanym formatem. <dfn>...</dfn> Oznacza, że zawarty w nim tekst jest definicją, z reguły wyświetlaną czcionką pogrubioną. <em>...</em> Oznacza tekst wyszczególniony, z reguły wyświetlany kursywą. <ins>...</ins> Oznacza tekst, który został dodany do dokumentu. Niektóre przeglądarki wyświetlają go jako podkreślony. cite=url Może być ustawiony na fragment dokumentu, wyjaśniający powód modyfikacji. datetime=rrrr-mm-ddgg:mm:sstdz Określa datę i czas dokonania zmiany. Data i czas muszą być zgodne z podanym formatem. <kbd>...</kbd> Oznacza tekst wprowadzony przez użytkownika z klawiatury, z reguły wyświetlany z użyciem czcionki o stałej szerokości znaku. <q>...</q> Znacznik ten oznacza krótki cytat, który jest wstawiony w tekst. Nie jest, jak <blockquote> umieszczany w osobnym akapicie. cite=url Może być ustawiony na dokument, z którego pochodzi cytat. <samp>...</samp> Znacznik ten umożliwia wskazanie przykładowego wyniku działania programu, skryptu itd. <span>...</span> Pełni podobną rolę, jak <div>, ale nie tworzy z zawartego w nim tekstu osobnego akapitu. class=nazwa Nadaje nazwę elementowi lub grupie elementów. id=nazwa Nadaje elementowi określoną nazwę, która musi być unikalna w całym dokumencie. style=właściwości stylu Zawiera informacje o formatowaniu, które ma być zastosowane do tego fragmentu tekstu. <strong>...</strong> Zawarty w nim tekst jest wyraźnie wyszczególniony. <var>...</var> Oznacza wystąpienie zmiennej lub argumentu programu, z reguły wyświetlane kursywą. Znaczniki stylów fizycznych: <b>...</b> Powoduje pogrubienie zawartego w nim tekstu. Iwona Dolińska, WSEI Internet i jego usługi 8

9 <big>...</big> Określa tekst jako o jeden stopień wielkości większy od tekstu otaczającego. <i>...</i> Zawarty w nim tekst jest wyświetlany kursywą. <small>...</small> Określa tekst jako o jeden stopień wielkości mniejszy od tekstu otaczającego. <sub>...</sub> Zawarty w nim tekst jest wyświetlany jako indeks dolny. <sup>...</sup> Zawarty w nim tekst jest wyświetlany jako indeks górny. <tt>...</tt> Zawarty w nim tekst jest formatowany jako tekst dalekopisu, zwykle wyświetlając go czcionką o stałej szerokości. Odstępy i rozmieszczenie to kolejna grupa znaczników HTML: <br>...</br> Przenosi tekst do nowego wiersza, nie dodając pustej linii. clear=all left right none Przenosi tekst do nowego wiersza, rozpoczynając go od nowego marginesu. <pre>...</pre> Określa tekst preformatowany, co oznacza, że wiersze są wyświetlane dokładnie tak, jak zostały wpisane, z zachowaniem wielokrotnych spacji i znaków nowego wiersza. Tekst jest wyświetlany czcionką o stałej szerokości. " <html> <title>odstępy i rozmieszczenie</title> <body> <h1>odstępy i rozmieszczenie</h1> <p>sam HTML jest dosyć ubogi w znaczniki kontrolujące rozmieszczenie tekstu,<br/> ale można chociaż dodać przeniesienie do nowej linii.</p> <pre> Ten fragment zostanie wyświetlony dokładnie tak jak został wpisany. </pre> </body> </html> Odstępy i rozmieszczenie Sam HTML jest dosyć ubogi w znaczniki kontrolujące rozmieszczenie tekstu, ale można chociaż dodać przeniesienie do nowej linii. Ten fragment zostanie wyświetlony dokładnie tak jak został wpisany. Iwona Dolińska, WSEI Internet i jego usługi 9

10 Listy można tworzyć w jednym z trzech rodzajów wypunktowanej, numerowanej oraz listy definicji: Kod HTML " <html> <title>listy w HTML</title> <body> <h1>listy w HTML</h1> <div><b>wypunktowana</b></div> <ul> <li>pierwszy punkt listy</li> <li>drugi punkt listy</li> <li>trzeci punkt listy</li> <li>czwarty punkt listy</li> </ul> <p><i>numerowana</i></p> <ol> <li>pierwszy punkt listy</li> <li>drugi punkt listy</li> <li>trzeci punkt listy</li> <li>czwarty punkt listy</li> </ol> <h2><b><i>lista definicji</i></b></h2> <dl> <dt><ol></dt> <dd>jest to znacznik określający listę numerowaną.</dd> <dt><ul></dt> <dd>jest to znacznik określający listę wypunktowaną.</dd> <dt><dl></dt> <dd>jest to znacznik określający listę definicji.</dd> </dl> </body> </html> Listy w HTML Wypunktowana Wynik działania pierwszy punkt listy drugi punkt listy trzeci punkt listy czwarty punkt listy Numerowana 1. pierwszy punkt listy 2. drugi punkt listy 3. trzeci punkt listy 4. czwarty punkt listy Lista definicji <ol> <ul> <dl> Jest to znacznik określający listę numerowaną. Jest to znacznik określający listę wypunktowaną. Jest to znacznik określający listę definicji. Znaczniki list: <dl>...</dl> Oznacza listę definicji, zbudowaną z terminów (<dt>) i ich definicji (<dd>). <dd>...<dd/> Oznacza część definicyjną elementu listy definicji. Definicja jest zwykle wyświetlana z wciętym lewym marginesem. <dt>...<dt/> Oznacza część elementu listy definicji zawierającą definiowany termin. <li>...</li> Definiuje element listy wewnątrz znaczników <ol> i <ul>. <ol>...<ol/> Określa początek i koniec listy numerowanej, składającej się z elementów listy <li>. Numery elementów są automatycznie dodawane przez przeglądarkę. Domyślnie są to cyfry arabskie. Można również wyłączyć numerowanie. <ul>...<ul/> Określa początek i koniec listy wypunktowanej, składającej się z elementów listy <li>. Wypunktowanie dla każdego elementu jest automatycznie dodawane przez przeglądarkę. Domyślnym symbolem wypunktowania jest kropka. Iwona Dolińska, WSEI Internet i jego usługi 10

11 Przykład listy zagnieżdżonej: Kod HTML " <html> <title>lista zagnieżdżona</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <body> <ol> <li>pierwszy punkt listy numerowanej</li> <ol> <li>zawierający listę</li> <li>numerowaną zagnieżdżoną</li> </ol> <li>drugi punkt listy numerowanej</li> <ul> <li>zawierający</li> <ul> <li>listę</li> <li>nienumerowaną</li> <ul> <li>trochę</li> <li>bardziej</li> </ul> </ul> <li>zagnieżdżoną</li> </ul> <li>trzeci punkt listy numerowanej</li> </ol> </body> </html> Wynik działania 1. pierwszy punkt listy numerowanej 1. zawierający listę 2. numerowaną zagnieżdżoną 2. drugi punkt listy numerowanej zawierający listę nienumerowaną trochę bardziej zagnieżdżoną 3. trzeci punkt listy numerowanej Iwona Dolińska, WSEI Internet i jego usługi 11

12 Odwołania znakowe służą do wstawienia na stronę znaków nie należących do sposobu kodowania strony oraz znaków spoza zestawu alfanumerycznego. Znaki można podawać poprzez nazwę (&nazwa;), dziesiętnie (&#nnn;) albo szesnastkowo (&#xnnnn;). Najczęściej stosowane odwołania znakowe: Znak Opis Nazwa Wartość Znak twardej spacji & Ampersand & & < Znak mniejszości < < > Znak większości > > Cudzysłów " " Symbol praw autorskich Zarejestrowany znak towarowy Kodowanie polskich liter Deklaracja w pliku zapisanym w stronie kodowej Windows CP 1250: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> Deklaracja w pliku zapisanym w stronie kodowej Latin-2 (ISO ): <meta http-equiv="content-type" content="text/html; charset=iso "> Znaki Latin-2, kodowane inaczej niż w CP 1250: Znak Kod Znak Kod ą 177 Ą 161 ś 182 Ś 166 ź 188 Ź 172 Odwołania znakowe, kodujące polskie znaki diakrytyczne (wielkie i małe litery w kolejności alfabetycznej): <div>ą Ć Ę Ł Ń Ó Ś Ż Ź ą ć ę ł ń ó ś ż ź</div> Ą Ć Ę Ł Ń Ó Ś Ż Ź ą ć ę ł ń ó ś ż ź Iwona Dolińska, WSEI Internet i jego usługi 12

13 Tworzenie łączy Proste przykłady łączy do stron WWW: " <html> <title>tworzenie łączy</title> <body> <h1>łącza pomiędzy dokumentami</h1> <div>proste łącza do przykładów z wykładu:</div> <ol> <li><a href="04-01.html">prosty dokument</a></li> <li><a href="05-01.html">przykłady elementów blokowych</a></li> <li><a href="05-03.html">style wbudowane</a></li> <li><a href="06-02.html">listy</a></li> <ul> <li><a href="06-02.html#numerowana">lista numerowana</a></li> <li><a href="06-02.html#wypunktowana">lista wypunktowana</a></li> <li><a href="06-02.html#definicji">lista definicji</a></li> </ul> </ol> <p><a href=" </body> </html> Łącza pomiędzy dokumentami Proste łącza do przykładów z wykładu: Notatki 1. Prosty dokument 2. Przykłady elementów blokowych 3. Style wbudowane 4. Listy Lista numerowana Lista wypunktowana Lista definicji Definicja zakładki, czyli miejsca w pliku, na które wskazuje odnośnik: <p><i><a name="numerowana">numerowana</a></i></p> <ol> <li>pierwszy punkt listy</li> <li>drugi punkt listy</li> <li>trzeci punkt listy</li> <li>czwarty punkt listy</li> </ol> Iwona Dolińska, WSEI Internet i jego usługi 13

14 Znaczniki do tworzenia łączy: <a>...</a> Definiuje w dokumencie łącze, służące do połączenia z innym zasobem sieciowym. accesskey=znak Określa klawisz dostępu (skrót klawiaturowy) do łącza. Wartością tego atrybutu jest pojedynczy znak. charset=zestaw znaków Określa zestaw znaków wykorzystany w dokumencie docelowym. coords=współrzędne x,y Określa współrzędne x,y aktywnego obszaru mapy odnośników. href=url Określa adres URL docelowego zasobu sieciowego. id=tekst Nadaje łączu unikalną nazwę (podobnie do atrybutu name), tak że możliwy jest dostęp do niego z poziomu innego łącza, skryptu lub arkusza stylów. hreflang=kod języka Określa podstawowy język dokumentu docelowego. name=tekst Umiejscawia w dokumencie HTML identyfikator fragmentu, czyli zakładkę. rel=powiązanie Ustanawia związek pomiędzy dokumentem obecnym a docelowym. Zwykle przyjmuje wartości: stylesheet, next, prev, copyright, index, glossary. rev=powiązanie Określa powiązanie dokumentu docelowego ze źródłowym (przeciwieństwo rel). shape=rect circle poly default Określa kształt aktywnego obszaru mapy odnośników. tabindex=liczba Określa pozycję danego elementu w sekwencji przełączania aktywnych łącz za pomocą klawisza tabulacji. Wartość tego atrybutu musi być w przedziale od 0 do target=tekst Określa nazwę okna lub ramki, w której ma zostać wyświetlony wskazywany dokument. title=tekst Określa tytuł wskazywanego dokumentu. Może być on wyświetlony jako wskazówka. type=typ MIME Określa typ MIME wskazywanego zasobu. <area> Znacznik (bez znacznika zamykającego) ten jest stosowany w znaczniku map, oznaczającym mapę odnośników, interpretowaną po stronie klienta, do określenia aktywnego obszaru. alt=tekst Wymagany. Podaje krótki opis obrazu, co jest przydatne, kiedy plik graficzny jest niedostępny. coords=wartości Zawiera listę oddzielonych przecinkami współrzędnych definiujących aktywny obszar mapy odnośników. Iwona Dolińska, WSEI Internet i jego usługi 14

15 href=url Określa adres URL dokumentu lub pliku, do którego dostęp uzyskuje się po kliknięciu w obrębie definiowanego obszaru. nohref Oznacza aktywny obszar mapy odnośników, którego naciśnięcie przez użytkownika nie pociąga za sobą żadnych skutków. shape=rect circle poly default Określa kształt obszaru aktywnego. <base> Znacznik (bez znacznika zamykającego) określa ścieżkę bazową dla wszystkich względnych adresów URL w dokumencie. Ten element należy umieścić w nagłówku. href=url Wymagany. Określa URL, który ma być adresem bazowym. target Określa domyślne okno docelowe dla wszystkich odnośników w dokumencie. <link> Znacznik (bez znacznika zamykającego) określa związek między dokumentem aktualnym i innym. Ten element należy umieścić w nagłówku. Często jest stosowany do odwołań do zewnętrznego arkusza stylów. href=url Określa wskazywany dokument. media=screen tty tv projection handheld print braille aural all Identyfikuje medium związane z dokumentem wskazywanym przez łącze, dzięki czemu może być zastosowany zastępczy arkusz stylów. rel=powiązanie Ustanawia związek pomiędzy dokumentem obecnym a docelowym. Zwykle przyjmuje wartości: stylesheet, next, prev, copyright, index, glossary. rev=powiązanie Określa powiązanie dokumentu docelowego ze źródłowym (przeciwieństwo rel). title=tekst Zawiera tytuł wskazywanego dokumentu. type=typ MIME Określa typ MIME wskazywanego zasobu. Wartość text/css oznacza, że wskazywany dokument jest zewnętrznym kaskadowym arkuszem stylów. <map>...</map> Zawiera specyfikację mapy odnośników interpretowanej po stronie klienta. name=tekst Wymagany. Nadaje mapie odnośników nazwę, do której później odwołuje się znacznik <img>. Przykłady łączy do zasobów innych protokołów: łącze do dowolnego pliku łącze do poczty elektronicznej <a href= mailto:autor@adrespocztowy.com >Wyślij list</a> łącze do pliku na serwerze FTP <a href= ftp://serwer/sciezkadostepu >...</a> Iwona Dolińska, WSEI Internet i jego usługi 15

16 Przykłady użycia znacznika <link>: odwołanie do zewnętrznego arkusza stylów: <a href= >...</a> <a href= >...</a> <heah> <link href=mystyle.css rel= stylesheet type= text/css > </heah> odwołanie do innej wersji językowej dokumentu: <heah> <link href=translations/english.html rel= alternate type= text/html hreflang= en > </heah> do dołączenia odpowiednich arkuszy stylów: <link rel= stylesheet type= text/css href= browser.css media= screen <link rel= stylesheet type= text/css href= printer.css media= print Iwona Dolińska, WSEI Internet i jego usługi 16

17 Przykłady grafiki na stronie WWW: Osadzanie obiektów na stronie WWW " <html> <title>dołączanie obrazków</title> <body> <h1>dołączanie obrazków do tekstu w HTML</h1> <h2>elementy blokowe</h2> <p>elementami blokowymi są znaczniki nagłówków oraz akapit,</p> <div>ale można używać także kilku innych, np. właśnie div.</div> <h2>grafika na stronie WWW</h2> <p>do jednego z poprzednich przykładów dołączamy zdjęcie: <img src="th-grzesgs.jpg" alt="grześ" /> Oczywiście to jest mój synek.</p> <p>inne możliwości to linia pozioma:</p> <hr/> <p>oraz obiekty multimedialne, np. obrazki, filmy, aplety Javy:</p> <div><object data="url Pliku" type="typ MIME"><b><i>Obiekt Osadzony Na Stronie</i></b></object></div> </body> </html> Dołączanie obrazków do tekstu w HTML Elementy blokowe Elementami blokowymi są znaczniki nagłówków oraz akapit, ale można używać także kilku innych, np. właśnie div. Grafika na stronie WWW Do jednego z poprzednich przykładów dołączamy zdjęcie: mój synek. Inne możliwości to linia pozioma: Oczywiście to jest oraz obiekty multimedialne, np. obrazki, filmy, aplety Javy: Obiekt Osadzony Na Stronie Iwona Dolińska, WSEI Internet i jego usługi 17

18 Przykład grafiki jako łącza: " <html> <title>grafika na stronie WWW</title> <body> <h1>grafika na stronie WWW</h1> <p>zdjęcie może w prosty sposób stać się odnośnikiem:</p> <div><a href="grzesgs.jpg"> <img src="th-grzesgs.jpg" alt="mój synek." /> </a></div> <p>oczywiście to jest mój synek.</p> </body> </html> Grafika na stronie WWW Zdjęcie może w prosty sposób stać się odnośnikiem: Oczywiście to jest mój synek. Znaczniki związane z osadzaniem obiektów na stronie WWW: <hr /> Dodaje linię poziomą do strony. Nie ma znacznika zamykającego. <img /> Umieszcza na stronie plik graficzny. Nie ma znacznika zamykającego. alt=tekst Wymagany. Zapewnia tekst zastępczy, który pojawia się, gdy obraz nie jest wyświetlany. height=liczba Określa wysokość obrazu w pikselach. hspace=liczba Określa (w pikselach) szerokość wolnej przestrzeni, pozostawianej po lewej i prawej stronie obrazu. ismap Oznacza, że grafika jest tłem mapy odnośników, interpretowanej po stronie serwera. longdesc=url Określa łącze do dłuższego opisu grafiki lub zawartości mapy odnośników. name=tekst Nadaje obrazowi nazwę, pod którą jest on dostępny z poziomu skryptów lub arkusza stylów. src=url Wymagany. Określa położenie pliku graficznego. usemap=url Określa odwzorowanie zawierające współrzędne i odnośniki do mapy odnośników interpretowanej po stronie klienta. vspace=liczba Określa (w pikselach) szerokość wolnej przestrzeni, pozostawianej nad i pod obrazem. width=liczba Określa szerokość obrazu w pikselach. Nie jest wymagany, ale jego użycie przyspiesza wyświetlanie strony. Iwona Dolińska, WSEI Internet i jego usługi 18

19 <object>...</object> Znacznik służący do umieszczenia na stronie WWW obiektu (obraz, aplet, plik multimedialny). archive=adresy url Określa listę oddzielonych spacjami adresów URL zasobów związanych z obiektem. classid=url Określa położenie pliku umożliwiającego implementację obiektu. Jest on stosowany z atrybutem data lub zamiast niego. codebase=url Określa bazowy URL, do którego odnoszone są względne adresy w obiekcie. codetype=typ kodu Określa typ kodu. Wymagany jest tylko wtedy, gdy przeglądarka nie jest w stanie określić typu MIME apletu na podstawie atrybutu classid lub gdy serwer nie dostarcza poprawnego typu MIME podczas pobierania obiektu. data=url Określa URL danych wykorzystywanych przez obiekt. Składnia zależy od typu obiektu. height=liczba Określa wysokość obiektu w pikselach. name=tekst Nadaje obiektowi nazwę, pod którą jest on dostępny z poziomu skryptów lub arkusza stylów. type=typ Określa typ mediów związanych z danymi. usemap=url Określa związaną z obiektem mapę odnośników. width=liczba Określa szerokość obiektu w pikselach. <param /> Oznacza parametr w znaczniku <object>. Nie ma znacznika zamykającego. name=tekst Wymagany. Określa nazwę parametru. value=tekst Określa wartość parametru. valuetype=data ref object Określa typ wartości parametru: data oznacza, że wartością są dane (domyślnie), ref że jest to URL, a object że wartość jest adresem URL innego obiektu w dokumencie. Źródła: 1. Elizabeth Castro, HTML 4, wydanie 3, Wydawnictwo Helion, Jennifer Niederst, Tworzenie stron WWW. Almanach, wydanie 2, Wydawnictwo Helion, Iwona Dolińska, WSEI Internet i jego usługi 19