Witamy w wirtualnym języku HTML ostatni następny
Wyjaśnienie: Określenie "HTML" będzie używane w znaczeniu ogólnego języka opisującego strukturę dokumentów stron WWW. Zapoznając się z tym językiem poznasz zasady projektowania stron WWW zgodnie z najnowszymi technologiami, a jednocześnie działających także w starszych przeglądarkach. poprzedni następny
Edytory: Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu.Dokument (X)HTML, czyli (Extensible) Hypertext Markup Language - (Rozszerzalny) Hipertekstowy Język Oznaczania, jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią pracę. poprzedni następny
Początkowa strona WWW: Cały dokument powinien być objęty parą znaczników <html></html>. Między nimi powinna zaś się znaleźć para znaczników <head> </head>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <body> </body>. Wygląda to następująco: <html> <head> informacje nagłówkowe </head> <body> właściwa treść (ciało) dokumentu </body> </html> poprzedni następny
cd.: Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>. <head> <title>Tytuł strony</title> </head> poprzedni następny
Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu. Zalecamy stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Powinniśmy sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników head i wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> poprzedni następny
c.d. Stosowanie standardu kodowania Windows-1250 nie jest zabronione, ale nie jest również zalecane. Dokument HTML przygotowany standardowym notatnikiem Windows zawiera polskie znaki w formacie windows-1250. W dokumencie takim należy umieścić element: <HEAD> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </HEAD> poprzedni następny
Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) są konieczne! Przed dokumentem, tj. przed otwierającym znacznikiem <html> dodaj jeszcze zalecaną definicję typu dokumentu, czyli tzw. prolog: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> poprzedni następny
Oto jak przykładowo powinien wyglądać dokument w formacie HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Description" content="Tu wpisz opis zawartości strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> poprzedni następny
Tytuły: W dokumentach często wprowadzamy tytuły, zwane też nagłówkami. Służy do tego polecenie <hx> </hx>. Znak h oznacza heading, natomiast x to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. <h1>Tytuł stopnia pierwszego</h1> <h2>Tytuł stopnia drugiego</h2> <h3>Tytuł stopnia trzeciego</h3> <h4>Tytuł stopnia czwartego</h4> <h5>Tytuł stopnia piątego</h5> <h6>Tytuł stopnia szóstego</h6> poprzedni następny
Tytuły (nagłówki) Kilka innych przykładów, z użyciem stylu lokalnego: <h1 style="text-align: right; ">Śródtytuł wyrównany do prawego marginesu</h1> poprzedni następny
cd.: <h1 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h1> <h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1> poprzedni następny
Znacznik akapitu Akapit jest podstawowym elementem zawierającym tekst w dokumentach HTML i służy do wydzielania fragmentów zawierających jakąś zwartą myśl. <p> </p> poprzedni następny
<p style="text-align: right; ">Akapit wyrównany do prawego marginesu </p> <p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p> poprzedni następny
Znacznik końca wiersza Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem. <br> poprzedni następny
Następny akapit: A teraz następny akapit, w którym zastosujemy...<br> ten sam manewr.<br> W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej <br> poezji <br> pisanej <br> często <br> w słupkach <br> poprzedni następny
Pozioma linia Pozioma linia to po prostu kreska ciągnąca się przez całą szerokość okna lub pojemnika, w którym została umieszczona. <hr> poprzedni następny
Linia cd.: 2. Linii możemy nadać dowolną grubość i kolor: <hr style="height: 5px; color: red"> 3. Linia może mieć określoną długość w pikselach lub procentach: <hr style="width: 50%; "> 4. Linia może być dosunięta do prawego marginesu: <hr style="width: 50%; text-align: right; "> poprzedni następny
Blok preformatowany Blok preformatowany jest blokiem tekstu, w którym uwzględniane są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które są pomijane w innych poleceniach, np. w akapicie. <pre> </pre> poprzedni następny
Blok cytowany Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji, zaś tekst powinien się znajdować w jakimś elemencie blokowym, np. w akapicie: <blockquote> </blockquote> poprzedni następny
Adres Polecenie (wyświetlane za pomocą kursywy) jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.: <address> </address> poprzedni następny
Blok dokumentu Polecenie div (blok, sekcja) odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomocą kaskadowych arkuszy stylów oparte są dziś nowoczesne układy stron (ang. layouty). <div> </div> Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd. poprzedni następny
cd.: <div style="text-align:right"> <ul> <li>pierwszy punkt wykazu</li> <li>drugi punkt wykazu</li> <li>trzeci punkt wykazu</li></ul> widoczny tekst,widoczny tekst, widoczny tekst,widoczny tekst, widoczny tekst, <img src="enter.gif" width="80" height="114" alt="[ENTER]" /></div> poprzedni następny
Obramowanie formularza Fieldset tworzy obramowanie dla znajdujących się w jego ramach elementów formularza - każdy element, jak przyciski radiowe, pole tekstowe czy rozwijana lista wyboru, może być objęty taką ramką. <fieldset>definicja elementu formularza</fieldset> Samo obramowanie można oczywiście uzyskać za pomocą stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem <legend>. <fieldset> <legend>Ankieta</legend> <textarea rows="3" cols="30">Wpisz opinię...</textarea> </fieldset> poprzedni następny
Elementy liniowe - Zakres Zakres definiowany jest za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle. <span> </span> <p>W tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="font-style:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p> poprzedni następny
Komentarz Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. <!-- ... --> poprzedni następny
Czcionki Czcionka pogrubiona : Czcionka pochylona : <b> </b> <i> </i> Subskrypt (indeks dolny) : Superskrypt (indeks górny) : <sup> </sup> <sub> </sub> Czcionka o stałej szerokości znaku : <tt> </tt> poprzedni następny
Czcionki cd.: Duża czcionka (+1 punkt) : Mała czcionka (-1 punkt) : <big> </big> Mała czcionka (-1 punkt) : <small> </small> poprzedni następny
Znaczniki logiczne Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale wizualny efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego znacznika logicznego. Odwołanie do źródła : <cite> </cite> Definicja : <dfn> </dfn> Znacznik <dfn>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś fragmentu tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarki interpretują <dfn> jako kursywę. poprzedni następny
cd. znaczniki logiczne: Element usunięty : <del> </del> Element wstawiony : <ins> </ins> Czcionka mocno wyróżniona (strong) : <strong> </strong> poprzedni następny
Kolory czcionki Dowolnemu fragmentowi tekstu można nadać kolor. W starszych wersjach HTML stosowano polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania koloru stosuje się obecnie style. <p style="color: blue; ">Tekst w kolorze niebieskim.</p> poprzedni następny
Znaki specjalne W dokumentach WWW powinniśmy stosować standard kodowania ISO-8859-2, gdyż taka jest przyjęta w naszym kraju norma. Stosując standard ISO-8859-2 możemy też jednak wykorzystać "opisowy" sposób wprowadzania znaków z innych języków, a przede wszystkim różnych znaków specjalnych. Przykładowe znaki specjalne: (funt szterling) £ - £ (euro) &euro - € (znak praw autorskich) © - © (zastrzeżony znak towarowy) ® - ® (ułamek zwykły) ¼ - ¼ (index górny) ³ - ³ (znak akapitu) ¶ - ¶ (kropka) &bull - • (promil) &permil - ‰ poprzedni następny
Wielkość czcionki <p style="font-size: large; ">Tekst o wielkości large</p> poprzedni następny
Krój czcionki W starszych wersjach HTML stosowano polecenie font face="nazwa_kroju". W HTML 4.01 zrezygnowano z niego na rzecz stylów. Na przykład: <p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p> poprzedni następny
Odsyłacze Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) charakterystyczne elementey dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony, a doskonałym przykładem ich roli jest choćby niniejszy dokument, który został opracowany na wielu, powiązanych ze sobą stronach. Gdyby nie było odsyłaczy, cała treść kursu musiałaby zostać przedstawiona na jednej stronie, która byłaby dość uciążliwa w czytaniu. Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. poprzedni następny
Etykieta Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron. Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. <a name="nazwa_etykiety"> </a> poprzedni następny
Odsyłacze do etykiet <a href="strona.htm#nazwa_etykiety">Tekst</a> Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli: <a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a> Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisaną z wielkiej litery. poprzedni następny
Odsyłacze Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. <a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a> Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać: <a href="http://host.domena">tekst odsyłacza</a> poprzedni następny
Odsyłacze absolutne i względne Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne). Pierwsze zawierają pełny adres internetowy strony, natomiast drugie jedynie fragment ścieżki dostępu. Adresem absolutnym jest np. strona Portalu O2: http://www.o2.pl Adresem relatywnym jest np. adres jakiejś wiadomości w Portalu O2: /news/96251.html poprzedni następny
Odsyłacze cd.: Odsyłacz do innej strony HTML (w tym samym katalogu): <a href="nazwa_strony.html">Edytor Pajączek</a> Odsyłacz do innej strony w katalogu podrzędnym : <a href="katalog_podrzędny/nazwa_strony.html">Inna strona</a> Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii: <a href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</a> poprzedni następny
Odsyłacze do poczty elektronicznej i FTP Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco: <a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a> Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym miejscu zastosujemy obrazek email.png, wstawiając definicję przed adresem. poprzedni następny
Odsyłacze cd.: Gdybyśmy sobie zażyczyli, aby w momencie wysyłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak: <a href="mailto:wimmer@helion.pl?subject=Bardzo ważny list:"> W podobny sposób można predefiniować adres odbiorcy, do którego idzie kopia listu: <a href="mailto:wimmer@helion.pl?cc=jan.kowalski@firma.pl"> poprzedni następny
Odsyłacze cd.: Tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca listu nie zobaczy tego adresu): <a href="mailto:wimmer@helion.pl?bcc=jan.kowalski@firma.pl"> Można też zdefiniować fragment ciała listu, a więc już bezpośrednio w oknie edycji: <a href="mailto:wimmer@helion.pl?body=Panie Wimmer, ja w takiej sprawie..."> poprzedni następny
Odsyłacze cd.: Można połączyć wszystkie te elementy i robi się to prosto, stosując jako łącznik ciąg &. <a href="mailto:wyslij@list.pl?cc=jan.kowal@firma.pl& bcc=jozef.kwiatek@firma.pl&subject=Bardzo ważny list& body=Witajcie Panowie">Wyślij pocztę</a> poprzedni następny
cd. odsyłacze: Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się także posłużyć znacznikiem logicznym <address> </address>, który automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez przeglądarki jako kursywa), a całość umieścić w obramowanym bloku div. <div style="border: 3px double olive; width:250px; "> <address> dane adresowe </address> </div> poprzedni następny
Mapy odsyłaczy na obrazkach <img src="odsylacz.gif " usemap="#mapa1"> <map name ="mapa1"> <area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1"> <area shape="rect" coords="51, 1, 100, 50" href="2.html" alt="strona 2"> <area shape="rect" coords="1, 51, 51, 100" href="3.html" alt="strona 3"> <area shape="rect" coords="51, 51, 100, 100" href="4.html" alt="strona 4"></map> poprzedni następny
Wykazy Wykazy, zwane też częściej listami, które służą do sporządzania usystematyzowanych zestawień informacji, prezentowanych w punktach - nieuporządkowanych (punktowanych, nienumerowanych) lub uporządkowanych (numerowanych). Wykazy należą do elementów blokowych. poprzedni następny
Wykaz nieuporządkowany Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. Polecenie <ul> </ul> tworzy ramy wykazu, natomiast polecenia <li> </li> wprowadzają konkretne punkty. <ul> <li>Pierwszy punkt</li> <li>Drugi punkt</li> <li>Trzeci punkt</li> </ul> poprzedni następny
Atrybut type=disc wprowadza kółeczko, type=circle wprowadza puste kółeczko, natomiast type=square wprowadza kwadracik. Obecnie stosowane są style CSS, dające znacznie większe mozliwości formatowania. <ul style="list-style-type: circle"> <ul style="list-style-type: square"> poprzedni następny
Zagnieżdżanie wykazów nieuporządkowanych Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem. <ul>(otwarcie listy na pierwszym poziomie) <li>Punkt 1</li> <li>Punkt 2 (bez znacznika zamykającego) <ul>(otwarcie listy na drugim poziomie) <li>Podpunkt 2.1</li> <li>Podpunkt 2.2 (bez znacznika zamykającego) <ul>(otwarcie listy na trzecim poziomie) <li>Podpunkt 2.2.1</li> <li>Podpunkt 2.2.2</li> </ul>(zamknięcie listy na trzecim poziomie) </li> (zamknięcie podpunktu 2.2) </ul>(zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li>Punkt 3 - kontynuacja punktów pierwszego poziomu</li> <li>Punkt 4 - kontynuacja punktów pierwszego poziomu</li> </ul>(zamknięcie całej listy) poprzedni następny
Wykaz uporządkowany Wykaz uporządkowany służy do sporządzenia wykazu numerowanego, w którym istotna jest dla nas kolejność elementów. Ramy wykazu tworzy polecenie <ol> </ol>, natomiast punkty są wprowadzane, podobnie jak w wykazach nieuporządkowanych, za pomocą polecenia <li> </li>. <ol> <li>Pierwszy punkt</li> <li>Drugi punkt</li> <li>Trzeci punkt</li> </ol> poprzedni następny
cd. numerowanie: Atrybut type, wprowadza numerowanie: Wartość type=A wprowadza numerowanie według wielkich liter łacińskich, type=a numerowanie według małych liter łacińskich, type=I numerowanie według wielkich liczebników rzymskich, type=i numerowanie według małych liczebników rzymskich, wreszcie type=1 numerowanie według liczebników arabskich. W dzisiejszych czasach w ich miejsce stosowane są style CSS. <ol style="list-style-type: decimal”:> <ol style="list-style-type: lower-roman”> <ol style="list-style-type: upper-alpha”> poprzedni następny
Zagnieżdżanie wykazów uporządkowanych Możemy zagnieżdżać kilka poziomów listy uporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem. <ol>(otwarcie listy na pierwszym poziomie) <li>Punkt 1</li> <li>Punkt 2 (bez znacznika zamykającego) <ol>(otwarcie listy na drugim poziomie) <li>Podpunkt 2.1</li> <li>Podpunkt 2.2</li> </ol>(zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li>Punkt 3 (bez znacznika zamykającego) <li>Podpunkt 3.1</li> <li>Podpunkt 3.2</li> </li>(zamknięcie Punktu 3) </ol>(zamknięcie całej listy) poprzedni następny
Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny" alt="nazwa alternatywna"> Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. Efekt zastosowania konstrukcji jest następujący: poprzedni następny
cd. wstawianie grafiki: Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np. <img src=„fon.jpg" width="342" height="353" alt=„Fontanna"> Możemy ręcznie zmienić rozmiary : <img src=„fon.jpg" height="150" width="200" alt=„Fontanna"> poprzedni następny
Obramowania i odstępy <img src=„fon.jpg" width="171" height="177" alt=„Fontanna" style="border: 5px red solid; "> poprzedni następny
Style CSS - margines globalny (margin) lub cząstkowy (margin-top, margin-bottom, margin-left, margin-right). <img src="fon.jpg" width="171" height="176" alt="Fontanna" style="margin-left: 10px; margin-right: 50px; "> Akapit 50 pikseli nad i 50 pod obrazkiem : <img src=„fon.jpg" width="171" height="176" alt=„Fontanna" style="margin-top: 50px; margin-bottom: 50px; "> poprzedni następny
Style CSS cd.: Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ". <img src=„fon.jpg" width="171" height="176" alt=„Fontanna" style="float: right; "> poprzedni następny
Pozycjonowanie pionowe Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align (top, middle, bottom). <img src=„fon.jpg" width="85" height="88" alt=„Fontanna" style="vertical-align: top; "> poprzedni następny
Macromedia Flash Powszechnie stosowany kod: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align=""> <param name="movie" value="movie.swf"> <embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> poprzedni następny
Rozwiązanie McLellana (Flash): <object type="application/x-shockwave-flash" data="film.swf" width="200" height="150"> <param name="movie" value="film.swf"> </object> poprzedni następny
Rozwiązanie Elizabeth Castro: Rozwiązanie Elizabeth Castro (WMV): <object type="video/x-ms-wmv" data="kot.wmv" width="320" height="260"> <param name="src" value="kot.wmv"> <param name="autostart" value="false"> <param name="controller" value="true"> </object> Działa też analogiczne odwołanie do pliku Wav : <object type="video-/x-ms-wmv" data="swist.wav" width="200" height="60"> <param name="src" value="swist.wav"> <param name="autostart" value="true"> <param name="controller" value="true"> </object> poprzedni następny
cd.: Działa odwołanie do pliku ASF (Advanced Streaming Format). <object type="video-/x-ms-wmv" data="pliczek.asf" width="200" height="60"> <param name="src" value="pliczek.asf"> <param name="autostart" value="true"> <param name="controller" value="true"> </object> Real Media <object type="audio/x-pn-realaudio-plugin" data="318.ra" width="200" height="60"> <param name="src" value="318.ra"> <param name="autostart" value="true"> <param name="controller" value="true"> </object> poprzedni następny
Tabele Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. <table border="1" width="50%"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> poprzedni następny
Tabele Szerokość określona w pikselach Wstawienie grafiki jako tło tabeli Wyrównanie do prawej całej tabeli <table border width=„150" style="float:right; " style="background-image: url(pliki/1.jpg)"> <tr> <td> 1</td><td> 2</td><td> 3</td></tr> </table> poprzedni następny
Ogólne ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: <table> </table> Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. poprzedni następny
Wiersz tabeli Wiersze tabeli wprowadzamy za pomocą polecenia: <tr> </tr> Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładu: <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> poprzedni następny
Komórka w wierszu Komórki tabeli wprowadzamy za pomocą polecenia: <td> </td> Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego wiersza, na przykład: <table> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> </table> poprzedni następny
Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <table border> </table> Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: <table border="10"> </table> poprzedni następny
Odległości między komórkami Aby odległości miedzy komórkami w pikselach były inne niż domyślne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi. <table border cellspacing="8"> </table> Odstępy w komórkach : <table border cellspacing="5" cellpadding="15"> </table> poprzedni następny
Szerokość tabeli Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany atrybut jest "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie. <table border width="600"> </table> Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej : <table border width="50%"> </table> poprzedni następny
Szerokość komórki <td style="width: 150px; ">zawartość komórki</td> Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu. <td style="width: 50%; ">zawartość komórki</td> poprzedni następny
Wyrównanie tabeli W efekcie tabela zostanie przesunięta w prawo <table style="float:right; "></table> i oblana z lewej strony tekstem. Tabela przesunięta w lewo : <table style="float:left; "></table> poprzedni następny
Poziome wyrównanie danych w komórkach Atrybut align wykorzystuje się także do poziomego wyrównania zawartości komórki (a nawet całego wiersza tr) - środkowania, justowania do lewej i justowania do prawej, z użyciem wartości center, left i right. <td align="left"> </td> <td align="center"> </td> <td align="right"> </td> poprzedni następny
Wysokość tabeli <table border style="height: 200px; width: 60%; "> Wartość podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysokości. <div style="height: 200px; "> <table border style="height: 50%; width: 60%; "> poprzedni następny
Pionowe wyrównanie danych w komórkach Atrybut valign (vertical align) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji: <td valign="top"> </td> <td valign="middle"> </td> <td valign="bottom"> </td> poprzedni następny
Kolor tła tabeli <table style="background-color: red"> <tr style="background-color: beige"> <td style="background-color: green"> poprzedni następny
cd. tabele: Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka - poprzednio stosowano atrybut background="nazwa_obrazka", ale obecnie jest to polecenie przestarzałe i stosuje się style CSS: <table style="background-image: url(adres_obrazka)"> poprzedni następny
Kolor obramowania tabeli <table border cellspacing="1" cellpadding="5„ style="border: 15px outset #D2691E; "> poprzedni następny
Tytuł tabeli Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólnymi ramami tabeli. <table border style="width: 300px; "> <caption>Tytuł tabeli</caption> Za pomocą stylów CSS możesz zdefiniować położenie tytułu, nad lub pod tabelą: <caption style="caption-side: top; ">Tytuł tabeli</caption> poprzedni następny
Nagłówek wiersza i kolumny Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowane na środku. Nagłówek jest definiowany za pomocą znaczników: <th> </th> poprzedni następny
cd. tabele: Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem. <table border cellpadding="10" width="500"> <caption>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</caption> <tr><td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr style="text-align: center; "><th>Masło</th> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr> <tr style="text-align: center; "><th>Margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr> </table> poprzedni następny
Łączenie komórek Komórki danych i/lub nagłówków można ze sobą łączyć. Przykład : <tr style="text-align: center"> <th>Masło</th><td rowspan="2">1950</td><td rowspan="2">2120</td><td>1380</td><td>1420</td><td>1550</td> </tr> Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x">. W naszej tabeli zostały opatrzone atrybutem rowspan="2" dwie pierwsze komórki z danymi w wierszu Masło (i oczywiście podana łączna produkcja tłuszczów). Jednocześnie usunęto dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło. poprzedni następny
Krawędzie tabeli Atrybut frame="wartość" pozwala wyświetlać w specjalny sposób obramowanie tabeli. Wstawiamy go bezpośrednio do definicji tabeli. Przykłady wartości frame podajemy w połączeniu z wartością rules="none", czyli bez obecności wewnętrznych krawędzi. <table border="1" frame="wartość" rules="none"> Wartość frame="void" pozwala usunąć zewnętrzne obramowanie tabeli. Wartość frame="above" wstawia górną krawędź obramowania, a frame="below" - dolną. poprzedni następny
cd. tabele: Wartość frame="vsides" wyświetla lewą i prawą krawędź obramowania tabeli, a frame="hsides" - górną i dolną. Wartość frame="lhs" wyświetla lewą krawędź obramowania, a frame="rhs" - prawą. Wartość frame="box" wyświetla wszystkie krawędzie obramowania. Seria wartości atrybutu rules="wartość" pozwala manipulować wewnętrznymi krawędziami tabeli (przykłady z użyciem frame="void", czyli bez obecności krawędzi zewnętrznych). <table border="x" rules="wartość" frame="void"> poprzedni następny
cd. tabele: Wartość rules="none" powoduje usunięcie linii wewnętrznych. Wartość rules=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych. Wartość rules="cols" powoduje wyświetlenie tylko pionowych linii wewnętrznych (Opera ma problemy). Wartość rules="all" powoduje wyświetlenie wszystkich linii wewnętrznych. poprzedni następny
Formularze Formularze służą do otrzymywania i wysyłania informacji od gości odwiedzających naszą strone. Elementy formularza są tworzone w pewnych ramach są nimi: <form> </form> Wysyła tekst pod wskazany adres nie jako załącznik, a jako zwykły tekst (enctype="text/plain„). <form enctype="text/plain" action="mailto:autor_strony@jego_domena"method="post"> zawartość formularza </form> poprzedni następny
Imię i nazwisko Ile masz lat? <fieldset> <form action="mailto:wimmer@helion.pl" method="post"> <p><i><b>Wpisz swoje imię i nazwisko:</b></i></p> <div><input name="imie" type="text" size="40" /></div> </form> </fieldset> <fieldset> <form action="mailto:wimmer@helion.pl" method="post"> <p><i><b>Ile masz lat?</b></i></p> <p><i><b>Mniej niż 20 <input name="wiek" type="radio" value="0-20" /> 21-40 <input name="wiek" type="radio" value="21-40" /> 41-60 <input name="wiek" type="radio" value="41-60" /> więcej niż 60 <input name="wiek" type="radio" value=">60" /></b></i></p> </form> </fieldset> poprzedni następny
Jakiej przeglądarki używasz? <fieldset> <form action="mailto:wimmer@helion.pl" method="post"> <p><b><i>Jakiej przegladarki WWW używasz?</i></b></p> <div><select name="Browser" size="3"> <option>Firefox</option> <option>Microsoft Internet Explorer</option> <option>Opera</option> <option>Konqueror</option> <option>Safari</option> </select></div> </form> </fieldset> Select - służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. poprzedni następny
Przykład: <form action="mailto:kowalski@poczta.pl" enctype="text/plain" method="post"> <div> <textarea name="Okno tekstowe" cols="30" rows="4"> </textarea></div> <div> <select name="Lista wyboru" size="3"> <option>Jabłka</option> <option>Gruszki</option> <option>Śliwki</option> <option>Wiśnie</option> <option>Maliny</option> </select></div> </form> poprzedni następny
Pole opcji Pole wyboru <p><input type="radio" name="plec" value="kobieta" checked="checked"> Kobieta</p> <p><input type="radio" name="plec" value="mezczyzna"> Mężczyzna</p> <p><input type="checkbox" name="jezyk" value="angielski"> angielski</p> <p><input type="checkbox" name="jezyk" value="francuski"> francuski</p> poprzedni następny
cd. formularze: Jest to np. obramowane miejsce na wpisanie tekstu. <fieldset> <legend>Ankieta</legend> <textarea rows="3" cols="30">Wpisz opinię...</textarea> </fieldset> poprzedni następny
Wysyłanie danych z formularza Usuwanie danych z formularza <input type="submit" value="Wyślij do nas informacje"> <input type="reset" value="Usuń wszystkie informacje"> Gdy wpiszesz coś do obszaru tekstowego i klikniesz przycisk Wyślij informacje, zostanie uruchomiony program pocztowy (uwaga: adres pod który wysyłane są informacje jest adresem podanym po słowie Action). Gdy klikniesz przycisk Usuń, zawartość obszaru tekstowego zostanie przywrócona do pierwotnej postaci. Przykład: poprzedni następny
Ramki Opisują one technikę budowania witryny poprzez ramki. Najbardziej typowym przykładem użycia ramek jest podział okna przeglądarki na kilka części poziomych lub pionowych. Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodzące w skład całego, wielostronicowego układu, są stronami podrzędnymi. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Edytory HTML</title> </head> <frameset cols="25%,*%"> <frame scrolling="auto" name="lista edytorów" src="spisedyt.htm"> <frame scrolling="yes" name="edytory" src="edyt.htm"> <noframes> <body> Zawartość strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html> poprzedni następny
Ramki cd.: <frameset> </frameset> Stanowią one ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek. <noframes> </noframes> Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki, która nie akceptuje ramek. Jeśli natomiast czytelnik strony posługuje się nowoczesną przeglądarką, wszelkie informacje między tymi znacznikami zostaną zignorowane (rzadko stosowane). poprzedni następny
cd. ramki: <frame> Znacznik ten służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki. <frame src="nazwa_pliku.htm" ...> Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML. Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym - podajemy wtedy nazwę pliku z pełną ścieżką dostępu - może to nawet być dokument w innej witrynie. poprzedni następny
cd. ramki: <frame scrolling="yes" ...> Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć atrybutu scrolling, który wyświetli ramkę razem z suwakami (yes), bez suwaków (no), lub automatyczne suwaki (auto). <frame name="nazwa_ramki" ...> Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę - name. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy. poprzedni następny
cd. ramki: <frame noresize ...> Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji atrybutu <frame noresize ...> zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne <frame frameborder="1" ...> Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. poprzedni następny
cd. ramki: <frameset cols="18%,82%"> Przykład, w którym lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%. <frameset rows="200,*,200"> Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji, w której np. górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny od wielkości okna przeglądarki. poprzedni następny
cd. ramki: Przykład w całości: <frameset cols="25%,75%"> <frame src="ramka1.html" name="spis" scrolling="auto"> <frame src="ramka2.html" name="tresc"scrolling=„no"> </frameset> poprzedni następny
Odsyłacze w ramkach: Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że w podanym na początku kliknięcie na odsyłaczu w spisie treści w lewej ramce powinno załadować dokument do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom. poprzedni następny
Odsyłacze w ramkach: Strona1: Przykład: <frameset cols="25%,*"> <frame scrolling="auto" name="lista edytorów" src="spisedyt.html"> <frame scrolling="auto" name="edytory" src="edyt.html"> <noframes> </noframes> </frameset> Strona1: <body bgcolor="green"> <HR> <H1>To jest strona 1</H1> <A HREF="ramka.html" target="_top">Wróć </A> Przykład: Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lista edytorów, natomiast prawej edytory. poprzedni następny
Etykiety w ramkach: Etykieta - inaczej zakładka lub kotwica (ang. anchor) - to pewne zaznaczone miejsce na stronie. Jeśli zdefiniujemy taką zakładkę, będziemy mogli się później do niej bezpośrednio przenosić. Definiowanie etykiety: <a name="nazwa_etykiety"></a> Odwołanie do etykiety: <a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a> Przykład: Etykieta zdefiniowana na tej samej stronie nie potrzebuje ścieżki dostępu poprzedni następny
Odsyłacze i etykiety w ramkach/ target: Zwróćmy jeszcze uwagę na cztery zastrzeżone wartości w przypadku atrybutu target. target="_blank" - w tym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nowe okno lub instancję przeglądarki. target="_self" - w tym przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku. target="_parent" - w tym przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu. target="_top" - w ostatnim przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę". Przykład ze strony poprzedniej: poprzedni następny
Ramki (pływające): Jest to technika umieszczania na stronach WWW tzw. pływających ramek, czyli specjalnych okienek, do których wczytywane są inne strony. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie do jednego polecenia: <iframe src="adres_dokumentu" width="szerokość_w_pikselach" height="wysokość_w_pikselach"> Twoja przeglądarka nie akceptuje pływających ramek! </iframe> poprzedni następny
Pływające ramki: plywajaca.html Ramka o wymiarach 450x250 pikseli z obramowaniem (w ramce wstawiona strona o nazwie plywajaca.html). <body> <img src="1.jpg" > </body> Przykład: <iframe src= "plywajaca.html" width="450" height="250" frameborder="1">Twoja przeglądarka nie akceptuje pływających ramek!</iframe> poprzedni następny
KONIEC NA POCZĄTEK PREZENTACJI