PROJEKTOWANIE STRON WWW

Wielkość: px
Rozpocząć pokaz od strony:

Download "PROJEKTOWANIE STRON WWW"

Transkrypt

1 PROJEKTOWANIE STRON WWW Pierwszy protokół umożliwiający połączenie się komputerów w WWW (World Wide Web) wg określonego adresu IP karty sieciowej komputera był protokół TCP/IP. W dzisiejszych czasach jest dostępnych wiele narzędzi, technologii i języków skryptowych do projektowania stron WWW wykorzystujące protokół HTTP (Hypertext Transfer Protocol) umożliwiający komunikację między serwerami WWW i przeglądarkami WWW, tj.: HTML (Hypertext Markup Language) XHTML (jako jeden z wielu języków znaczników z rodziny XMLa) style: Strict (ścisły) i Transitional (przejściowy) DHTML (Dynamic HTML: połączenie XHTMLa z arkuszami stylów pozwalający tworzyć strony o bardziej interaktywnych charakterze) PHP Java Script, Java Silniki bazodanowe: MySQL, PostgreSQL, MS SQL,... Style kaskadowe: CCS Skrypty umożliwiające przetwarzanie formularzy: CGI Perl Flash XML (extensible Markup Language) model wyjściowy dla wielu innych języków znaczników Oprócz tego istnieją również protokoły zaprojektowane do transferu plików FTP (File Transfer Protocol), do przesyłania wiadomości poczty elektronicznej Post Office Protocol, Simple Mail Transfer Protocol itd. Witryny oferujące funkcję automatycznych tłumaczeń: Edytory języka HTML i innych języków skryptowych mogą być 2-jakiego charakteru: WYSIWYG (What you see is what you get) to co widzisz, jest tym, co otrzymujesz umożliwiają edycję strony w trybie graficznym Edytory kodu źródłowego Umieszczanie plików na serwerze WWW za pomocą klientów FTP: WinSCP3 Total Commander 1

2 PLAN WYKŁADU 1: 1. Wprowadzenie 2. Sposób budowy skryptu HTML 3. Znaczniki HTML 4. Łącza hipertekstowe, adresy bezwzględne i względne URL, odsyłacze (linki) do stron, do adresu poczty elektronicznej, do serwera ftp Tabele i rozmieszczenie elementów na stronie 6. Ramki i otwieranie stron w nowych (_blank) oknach (target) lub innych oknach dokumentu opartego o ramki 7. Menu 8. Elementy graficzne i multimedialne 9. Formularze 10. Pozycjonowanie stron w Internecie 1. Projektowanie stron z wykorzystaniem HTMLa Literatura uzupełniająca: 1. Todd Stauffer, Kurs tworzenia stron internetowych, Helion, Gliwice, 2002, 2. David Crowder, Rhonda Crowder, Tworzenie stron WWW, Helion, Gliwice, Kursy dostępne w Internecie: Google: kurs HTML World Wide Web Consortium odpowiedzialne za tworzenie specyfikacji i standardów HTML był pierwszym ogólnodostępnym zbiorem standardowych kodów i zasad zaprojektowanych do tworzenia stron i formatowania tekstu wyświetlanego w przeglądarkach WWW. Za pomocą HTMLa można utworzyć najprostsze (nieinteraktywne i niedynamiczne) strony WWW, które będą zawierały sformatowany tekst i polecenia wskazujące przeglądarce, że powinna załadować i w określony sposób przedstawić umieszczone na tej stronie elementy multimedialne (filmy, dźwięki i animacje). Jedną z najważniejszych zalet stosowania HTML (i innych języków skryptowych) jest obsługa połączeń hipertekstowych umożliwiających łatwą nawigację po interesujących treściach stron WWW poprzez kliknięcie myszką na takim odsyłaczu (odnośniku, łączu, linku) określanych za pomocą adresów sieci WWW zwanych URLami (Uniform Resource Locator), które pozwalają jednoznacznie zidentyfikować i załadować przez przeglądarkę WWW każdą widoczną (opublikowaną, dostępną za pośrednictwem jakiego serwera) w sieci stronę WWW. W URLu mogą być zdefiniowane różne rodzaje protokołów: Serwerów WWW https://... Bezpiecznych serwerów WWW przez protokół szyfrujący SSL file://... Dokumentów umieszczonych lokalnie na dysku twardym komputera ftp://... Plików i serwerów FTP gopher://... Menu i dokumentów Gopher 2

3 news://... Serwera grupy dyskusyjnej Usenetu news: Określonej grupy dyskusyjnej Usenetu mailto: Stworzenia wiadomości poczty elektronicznej zaadresowanej do konkretnego odbiorcy telnet: zdalnego serwera Telnet Edytor HTML Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając tzw. znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń, w szczególności: Pajączek, Zajączek, Teger, HotDog, HomeSite, WebEdit, WebDesign, EdHTML... Osnowa dokumentu Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</h1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami. Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń: 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>. Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>. Zaleca się stosowanie strony kodowej ISO (czyli ISO Latin 2), gdyż jest to międzynarodowy standard, a "przy okazji" także polska norma umożliwiająca prawidłowe wyświetlanie polskich znaków. Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. <meta http-equiv="content-type" content="text/html; charset=iso "> Standardowa szablon dokumentu w HTMLa: <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> 3

4 Kolor tła dokumentu: Jeśli nie zdefiniujemy koloru tła, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary): <BODY BGCOLOR="kolor"> przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Najlepiej stosować wartości heksadecymalne, jako bardziej uniwersalne. Tytuły W dokumentach często wprowadzamy różnego rodzaju tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n 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>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik otwierający. Akapit i wiersz Zwykły tekst możemy rozdzielić na akapity stosując polecenie <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Należy konsekwentnie stosować znacznik zamykający </P>. Przykład: <P>To jest treść pierwszego akapitu</p> <P>To jest treść drugiego akapitu</p> Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR> (BR break), które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. To jest pierwszy wiersz<br> To jest drugi wiersz<br> To jest trzeci wiersz<br> To jest czwarty wiersz<br> Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami. Pozioma linia Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Listy numerowane i wypunktowane Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI> <P>Dlaczego zajmuję się UFO?</P> <UL> <LI>Uważam, że UFO istnieje</li> <LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> 4

5 <LI>Uważam, że należy się przygotować na spotkanie</li> </UL> W efekcie uzyskamy: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie Gdy chcemy utworzyć wykaz numerowany, wówczas stosujemy <OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania). 1. Uważam, że UFO istnieje 2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc 3. Uważam, że należy się przygotować na spotkanie Atrybuty czcionki Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - pogrubienie (Bold), pochylenie (Italic) i podkreślenie (Underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia: To jest tekst normalny <B>To jest tekst pogrubiony (bold)</b> <I>To jest tekst pochylony (italic, kursywa)</i> <U>To jest tekst podkreślony (underlined)</u> Efekt działania tych poleceń: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony To jest tekst podkreślony Odsyłacze Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji. 1. Odsyłacz do innej strony jest tworzony za pomocą polecenia: <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</a> Przykładowy adres mógłby wyglądać następująco: <A HREF="http://www.pckurier.pl">PCkurier</A> czyli, 5

6 PCkurier Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW). Uwaga: zaleca się nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="... "> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony. Adres internetowy jest podawany w cudzysłowie. Pobieranie pliku za pomocą protokołu HTML: <A HREF="http://adres/nazwa_programu.zip">Ściągnij plik</a> 2. Odsyłacz do serwera FTP umożliwiającego kopiowanie wielu plików: <A HREF="ftp://ftp.adres">Serwer FTP</A> 3. Odsyłacz do adresu poczty elektronicznej umożliwia czytelnikowi np. łatwy kontakt z autorem strony. Stosujemy tutaj na przykład następujące polecenie: <A i nazwisko</a> Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. 4. Odsyłacz do serwerów Telnet umożliwiają łatwe zalogowanie się użytkownikowi bezpośrednio na zdalnym komputerze: <A HREF="telnet:// adres">zaloguj się na serwerze naszej firmy</a> Automatyczne ładowanie stron WWW (client-pull) Umożliwia załadowanie strony po określonym czasie w sekundach bez jakiejkolwiek czynności ze strony użytkownika: <meta http-eqiv= refresh content= secundy ; url= nowy_url /> Wielkość czcionki Podstawowa czcionka ma wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka 10- lub 12-punktowa. Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce. Uwaga: Wielkości czcionki w przeglądarce WWW nie należy utożsamiać z wielkością czcionki, za pomocą której redagujemy tekst w edytorze HTML! Czcionka w edytorze nie ma żadnego znaczenia dla postaci strony WWW. Możemy na przykład posługiwać się czcionką System, a i tak w przeglądarce pojawią się czcionki, które definiuje sam dokument lub przeglądarka. Polecenie, które określa wielkość czcionki, ma następującą postać: <FONT SIZE="x">Tekst objęty definicją</font> gdzie x = Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej wartość absolutną. Możemy jednak także nadać wartość relatywną, czyli względną, podając wielkość zmiany. Skoro czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 6

7 jednostki lub odjąć co najwyżej 2. Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać 6, ale już niczego nie moglibyśmy odejmować. <FONT SIZE="+x">Tekst objęty definicją </FONT> <FONT SIZE="-x">Tekst objęty definicją </FONT> gdzie x = Gdy jakiś fragment tekstu obejmiemy definicją <FONT SIZE=+2> </FONT>, będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia <FONT SIZE=-1> </FONT>, tekst będzie miał wielkość 2. W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś fragmenty. Jest to wygodne, gdyż możemy zmienić wielkość czcionki wewnątrz akapitu, do czego nie nadaje się definicja tytułu. Kolor czcionki Kolor czcionki możemy zmienić poleceniem: <FONT COLOR="kolor">Tekst objęty poleceniem</font> Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą ich nazw. Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML. Oto lista szesnastu podstawowych 16 barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Grafika na stronie Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści. Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG (JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej. Grafikę możemy wprowadzić za pomocą polecenia: <IMG SRC="nazwa_pliku"> W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład: <IMG SRC="../gambler/gambler.gif"> Umieszczenie strony na serwerze WWW Następnie można wystawić swoją stronę w Internecie. W tym celu trzeba sobie zapewnić miejsce na jakimś serwerze. Można wykupić kilka megabajtów miejsca u dowolnego dostawcy usług internetowych, ale to oczywiście kosztuje nieco grosza. Można także 7

8 skorzystać z jakiejś darmowej oferty. Jeśli nie zapewnia Ci miejsca na serwerze Twój pracodawca, szkoła czy uczelnia, można skorzystać z bezpłatnej oferty różnych firm, np. Polbox, KKI, Friko: Polecenie definiuje bazowy adres dokumentu. <BASE HREF="http://www.firma.com/dokument.html"> Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu. Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność, gdyż przeglądarka będzie je odnosić do nowego położenia dokumentu. Oczywiście poprawność wymagałaby w takiej sytuacji albo przeniesienia wszystkich dokumentów, do których odsyłacze znajdują się na danej stronie, albo ręcznego poprawienia adresów. Jedno i drugie może być bardzo kłopotliwe, a przeniesienie nawet z jakichś powodów niemożliwe. W takiej sytuacji wygodnym rozwiązaniem jest podanie <BASE> w nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę. Parametry BODY Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony: <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu, co strona HTML). <BODY BGCOLOR="kolor"> Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy: Uwaga: należy deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony. <BODY TEXT="kolor"> Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła. Możemy również określić kolory odsyłaczy: <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza. Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, 8

9 zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. Możemy przykładowo użyć kolorów: <BODY LINK="blue" VLINK="red" ALINK="yellow"> Margines lewy strony: <BODY LEFTMARGIN="xx"> Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo. Margines górny strony: <BODY TOPMARGIN="xx"> Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół. Oba polecenia nie wchodzą w zakres standardu HTML 4.0. Czcionka pogrubiona <B> </B> Przykład: To jest czcionka pogrubiona (bold) Czcionka pochylona <I> </I> Przykład: To jest czcionka pochylona (italic) Czcionka migająca <BLINK> </BLINK> Czcionka podkreślona <U> </U> Przykład: To jest czcionka podkreślona (underline) Czcionka o stałej szerokości znaku <TT> </TT> Przykład: To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype) Czcionka przekreślona <STRIKE> </STRIKE> Przykład: Czcionka przekreślona Alternatywnie jest używane równoważne polecenie <S></S>:. Oba polecenia istnieją w specyfikacji HTML 4 i są w dalszym ciągu interpretowane przez przeglądarki, ale autorzy specyfikacji zalecają ich stopniowe zastępowanie przez nowsze konstrukcje języka. Superskrypt (indeks górny) <SUP> </SUP> Przykład: 9

10 Czcionka z superskryptem Subskrypt (indeks dolny) <SUB> </SUB> Przykład: Czcionka z subskryptem Duża czcionka (+1 punkt) <BIG> </BIG> Przykład: Duża czcionka Mała czcionka (-1 punkt) <SMALL> </SMALL> Przykład: Mała czcionka Znaczniki logiczne - style Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu. Cytat blokowy <CITE> </CITE> Przykład: To jest cytat (citation) Definicja <DFN> </DFN> <DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Element usunięty Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <DEL>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.: <del>dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.</del> Element wstawiony Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS. <ins>to jest nowe opracowanie tematu.</ins> To jest nowe opracowanie tematu Skrót i akronim Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów. <ABBR lang="pl">prof.</abbr> <ACRONYM lang="en">www</acronym> 10

11 Czcionka mocno wyróżniona <STRONG> </STRONG> Przykład: To jest czcionka mocno wyróżniona (strong) Czcionka wyróżniona (emfaza) <EM> </EM> Przykład: To jest czcionka wyróżniona (emphasis) Kod (tekst programu) <CODE> </CODE> Przykład: To jest kod (code) Czcionka wprowadzana z klawiatury <KBD> </KBD> Przykład: Czcionka z klawiatury Przykład <SAMP> </SAMP> Przykład: Przykład (sample) Zmienna (słowo kluczowe języka) <VAR> </VAR> Przykład: Zmienna (variable) Kolory czcionki Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru: <FONT COLOR="nazwa_koloru"> </FONT> Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników: <FONT SIZE="xx"> </FONT>. Czcionka bazowa Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia: <BASEFONT SIZE="x"> Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, <SMALL> - o wielkości 4, <FONT SIZE=-3> zmniejszy czcionkę do 2 punktów itd. 11

12 Uwaga: polecenie BASEFONT jest uznane za niepożądane i zalecane jest rezygnowanie z niego w dokumentach. Zmiana kroju czcionki Zmianę kroju czcionki dokonujemy za pomocą: <FONT FACE="nazwa_kroju"> </FONT> Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym), np. <FONT FACE="Arial CE", Arial, Helvetica> Uwaga: polecenie FONT FACE nie jest zalecanym poleceniem HTML i sugeruje się rezygnowanie z niego na rzecz stylów. GRAFIKA I MULTIMEDIA Uwagi ogólne Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do Sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (źródło). Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka. Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: <IMG SRC="tucows.gif" HEIGHT=150> <IMG SRC="tucows.gif" WIDTH=200> Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka: <IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50> Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki. 12

13 Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli: <IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5> Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu: <IMG SRC="tucows.gif" HSPACE=50> <IMG SRC="tucows.gif" VSPACE=50> Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu: <IMG SRC="obrazek" ALIGN=abc> gdzie ALIGN=left ALIGN=right ALIGN=top ALIGN=bottom ALIGN=middle Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym lub osoby niewidome wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony (przeczytany) na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron. Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER> Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD>. Animacja Marquee Uwaga: Animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0. Odradza się jej stosowanie na stronach WWW, choć może ona bardzo dobrze spełniać swoją rolę w archiwach elektronicznych HTML Help, które są oparte właśnie na Internet Explorerze, czy też w firmowych intranetach, w których standardową przeglądarką jest produkt Microsoftu. Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions. Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</marquee>. Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>: Tekst może się poruszać na trzy sposoby: BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua. Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu. Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy. 13

14 Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu. Tekst pod animacją Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>. Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE. Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej. Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy. Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami = 1 sekunda. Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją: Przykładowe programy do tworzenia animacji: Unlead GIF Animator Animagic GIF Animator GifBuilder VSE Animation Maker Flash CoffeCup Firestarter Utworzyć film w formacie QuickTime lub Windows Media, Windows Movie Maker Publikacje elektroniczne w formacie Adobe PDF W ostatnich latach ostatecznie wykrystalizował się niekwestionowany standard w kategorii publikacji elektronicznych - jest nim Adobe Portable Document Format (lub Portable Digital Format), znany pod popularnym skrótem PDF. Dokumentacja w formacie PDF jest bardzo rozpowszechniona na świecie i jest ogólnie przyjętym standardem w firmach, biurach czy na uczelniach. PDF współpracuje bezpośrednio z dokumentami w formacie HTML i możliwe jest użycie dość skomplikowanych sposobów wbudowania PDF, łącznie z zastosowaniem skryptów (zainteresowanym Czytelnikom polecamy tutaj dostępną w Polsce książkę Thomasa Merza, "Web Publishing with Acrobat PDF"). Na codzienne potrzeby można się jednak ograniczyć do trzech bardzo prostych metod. Należy jednak pamiętać, że czytelnik naszej strony musi dysponować Acrobat Readerem - jest to akurat jedyny składnik rozbudowanego oprogramowania PDF, który Adobe dostarcza za darmo (jeszcze kilka lat temu nawet za Readera trzeba było płacić). Pierwszy sposób polega na bezpośrednim odwołaniu się do dokumentu PDF w dokumencie HTML, np. <a href= licence.pdf >kliknij tutaj</a> Dokument PDF ukazuje się bezpośrednio w przeglądarce i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Dźwięk, wideo, VRML 14

15 Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 właściwie milczy na temat dźwięku! Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady: Plik dźwiękowy WAV (styl Netscape): <embed src="../wav/complete.wav" border=0 width=x height=y> Plik dźwiękowy WAV (styl Microsoft: <bgsound src="../wav/complete.wav" loop=infinite> Plik dźwiękowy MIDI (styl Netscape): <embed src="../midi/airwolf.mid" border=0> gdzie: loop=x określa liczbę powtórzeń dźwięku width=x height=y określa rozmiary wyświetlanego obrazka autostart=true false nakazuje lub zakazuje automatycznego startu odtwarzania hidden=true false nakazuje schować wyświetlić obrazek wtyczki palette=foreground background pozwala uniknąć ewentualnego migotania palety kolorów, gdy przeglądarka pracuje w trybie 256 kolorów pluginspace="url" wskazuje miejsce, gdzie znajduje się wtyczka, jeśli użytkownik jej jeszcze nie zainstalował. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki. Użycie hidden=true pozwala symulować dźwięk w tle (podobnie jak w przypadku BGSOUND dla IE). Jest to rozwiązanie uniwersalne dla obu czołowych przeglądarek Zaleca się wtedy umieszczenie polecenia EMBED na samym końcu dokumentu, gdyż wtedy wcześniej wczyta się tekstowa zawartość strony. Starsze przeglądarki, które nie akceptują polecenia EMBED, mogą zobaczyć polecenie NOEMBED: <EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150"> <NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to usłyszeć</noembed> </EMBED> Polecenie EMBED sprawia trochę kłopotów, jeśli chodzi o wielkość wyświetlanego panelu. Każda z wtyczek jest wyświetlana najlepiej w sobie tylko należnych wymiarach, więc podanie 145x60, co miałoby honorować LiveAudio, spowoduje, że wtyczka Crescendo albo Windows Media Player będą wyświetlane "kulawo". Problem polega na tym, że nie wiemy, jakim programem dysponuje czytelnik naszej strony, choć możemy założyć z dużą dozą pewności, że posiadacze Internet Explorera (jakieś trzy czwarte internetowej populacji w Polsce) korzystają głównie z Windows Media Playera, a właściciele Navigatora, zwykle z LiveAudio. Oczywiście może się zdarzyć, że jakiś popularny odtwarzacz dźwiękowy, np. WinAmp, przejmuje domyślnie obsługę plików MIDI, zabierając je LiveAudio i Media Playerowi. Gdybyśmy zrezygnowali z podawania wymiarów, jedynie Windows Media Player poprawnie wyświetli podstawową wersję panelu, natomiast inne wtyczki przyjmą rozmiary nie bardzo zgodne z właściwymi. Wszystko to powoduje, że webmaster staje przed problemem czysto estetycznym, choć takie brzydko wyglądające panele także jakoś tam spełniają swoje zadanie, zwłaszcza że pod lewym lub prawym klawiszem myszki widnieją polecenia wtyczki. Plik dźwiękowy MIDI (styl Microsoft): <bgsound src="../midi/antartic.mid" loop=1> loop=x oznacza liczbę powtórzeń. Loop=infinite nakazuje powtarzać dźwięk bez końca. balance=x (x=-10000;10000) określa równowagę między głośnikami w przypadku 15

16 dźwięku stereofonicznego volume=x (x=-10000;0) wyznacza głośność. Wartość tę należy samodzielnie wypraktykować. Jedynie Internet Explorer obsługuje konstrukcję BGSOUND. Navigator ignoruje ją i "milczy". Z kolei polecenie EMBED jest obsługiwane przez obie przeglądarki - Navigator obsługuje zagnieżdżony w ten sposób plik dźwiękowy przez wtyczkę (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przeglądarką Windows Media Playera. Obie przeglądarki mogą także korzystać z innych wtyczek - dość popularny jest program Cresendo, istniejący w wersjach ActiveX dla IE i wtyczki dla Navigatora (http://www.liveupdate.com), ale istnieją też inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obsługuje pliki MIDI, ale w pierwszym rzędzie swój własny format WTX. Interesującym rozwiązaniem jest wtyczka Beatnik, firmy Headspace, która obsługuje format RMF, czyli Rich Music Format (proszę zauważyć podobieństwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalająca uzyskać bardzo bogate brzemienie, przy niewielkiej objętości pliku. Jest to ciągle jednak mało popularna technika. Przykładowe polecenie zagnieżdżające plik RMF może wyglądać następująco: <EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100> Plik wideo AVI (styl Netscape) - <embed src="../dragdrop.avi" border=0> Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../dragdrop.avi" loop=infinite start=fileopen> dynsrc=url podaje adres pliku AVI loop=x określa liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami start=fileopen mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza controls wyświetla panel kontrolny odtwarzacza AVI Uwaga: styl Microsoftu nie jest zalecany. Plik VRML (styl Netscape) <EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150"> Pliki VRML jest obsługiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera. Plik RealAudio Na stronie możemy też umieścić plik RealAudio. Pliki takie można sporządzić za pomocą popularnego programu do obróbki dźwięku, CoolEdit, albo za pomocą oryginalnego RealAudio Encoder, dostępnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV. Do tworzenia plików RA najlepszy jest darmowy RealProducer G2, dostępny na stronie RealNetworks. Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a> Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest użycie polecenia EMBED, np.: <embed src="plik.ra" height=105 width=275 autostart=true type=audio/x-pnrealaudio-plugin> 16

17 Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika. Do odtwarzania dźwięku RealAudio w środowisku Windows najlepiej się nadaje darmowy RealPlayer G2. Pliki VQF W pewnym momencie popularnością cieszył się format VQF (TwinVQ Technology) japońskiej firmy Yamaha, aczkolwiek ostatnio jakoś mniej o niej słychać (formaty Microsoftu, Real Networks czy QuickTime, nie mówiąc już o MP3, zdecydowanie zawładnęły Internetem). Pliki w tym formacie charakteryzują się wysokością jakością przy dużym stopniu kompresji. Do odtwarzania używany jest darmowy YAMAHA SoundVQ Player, który jednocześnie stanowi wtyczkę dla przeglądarek internetowych. Do tworzenia dźwięku w tym formacie można wykorzystać również darmowy enkoder firmy Yamaha. Webmaster chcący wstawić plik VQF na swoją stronę, musi sporządzić nie tylko ten plik, ale i specjalny, tekstowy plik "wprowadzający".vqe, który podaje adres internetowy pliku VQF. Co istotne, konieczne jest w nim podanie adresu bezwzględnego, czyli (takiego pliku nie da się odtworzyć lokalnie, natomiast podanie adresu względnego spowoduje, że nie będzie on odtwarzany w Sieci, choć na dysku będzie działać). Jest to tylko i wyłącznie adres pliku VQF, nic więcej. Przykładowa składnia wywołująca panel odtwarzacza na stronie wygląda następująco: <EMBED SRC="welcome.vqe" AUTOSTART="true" REPEAT="FALSE" VOLUME="100" WIDTH="150" HEIGHT="40" TYPE="audio/x-twinvq-plugin" PLUGINSPAGE="http://www.yamaha.co.jp/xg/SoundVQ/"> Plik MPEG i MP3 Pliki MPEG czy MP3 możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np. <embed src="plik.mp3" autostart=true> Plik MOV (QuickTime) <embed src="charriot.mov" border=0 width=200 height=17> Plik ASF (Advanced Streaming Format, Microsoft) i WMA (Windows Media Audio) Można także zagnieździć Windows Media Player na stronie. Na przykład: <Embed type="application/x-mplayer2" src="pliczek.asf" Name=MMPlayer1 Autostart=1 ShowControls=1 ShowDisplay=1 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=300> Nawiasem mówiąc, możemy wymusić użycie Windows Media Playera, stosując zagnieżdżenie jego kontrolki na stronie, za pomocą polecenia <object>: <OBJECT ID="mediaPlayer" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" TYPE="application/x-oleobject"> <PARAM NAME="fileName" VALUE="jazzball.mid"> <PARAM NAME="autoStart" VALUE="false"> <PARAM NAME="showControls" VALUE="true"> </OBJECT> 17

18 Plik Flash (Macromedia) Shockwave Flash oferuje znacznie udoskonalone możliwości budowania efektownych, a zarazem zajmujących stosunkowo niewiele miejsca, interaktywnych animacji. Dobrym przykładem zastosowania tego formatu jest strona firmy Polbox, którą można oglądać zarówno w wersji tradycyjnej (HTML), jak i multimedialnej (Flash). A oto mały przykład zaczerpnięty z serwisu Webdesign. Oto przykład zagnieżdżenia animacji. Proszę w nim zwrócić uwagę na wymiary, kolor tła, typ MIME. <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase="http://www.ceti.com.pl/~flash/swflash.cab#version=3,0,0,0" ID=film WIDTH=100 HEIGHT=120> <PARAM NAME=movie VALUE="film.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED SRC="film.swf" NAME=film swliveconnect=true WIDTH=100 HEIGHT=120 LOOP=false QUALITY=high SCALE=exactfit BGCOLOR=#FFFFFF TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.ceti.com.pl/~flash"> </EMBED> </OBJECT> Tabele Ogólne ramy tabeli <TABLE> </TABLE> Definicja 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. Wiersz tabeli <TR> </TR> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu: <TABLE> <TH> </TH> <TR> </TR> <TR> </TR> <TR> </TR> </TABLE> Nagłówek kolumny <TH> </TH> służy do przechowywania nagłówka kolumny. Jest elementem OPCJONALNYM tabeli! Nagłówek tabeli jest zazwyczaj wyświetlany czcionką pogrubioną. 18

19 Komórka w wierszu <TD> </TD> Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, 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> Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Przykład: a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <TABLE BORDER> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: <TABLE BORDER=10> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 19

20 c1 c2 c3 c4 c5 Obramowanie komórek Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami). <TABLE BORDER CELLSPACING=8> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Marginesy dla komórek Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). <TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną. a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Szerokość tabeli 20

Osadzenie pliku dźwiękowego na stronie www

Osadzenie pliku dźwiękowego na stronie www Osadzenie pliku dźwiękowego na stronie www gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW

PROJEKTOWANIE STRON WWW PROJEKTOWANIE STRON WWW Pierwszy protokół umożliwiający połączenie się komputerów w WWW (World Wide Web) wg określonego adresu IP karty sieciowej komputera był protokół TCP/IP. W dzisiejszych czasach jest

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Ćwiczenie 5 Multimedia

Ćwiczenie 5 Multimedia Ćwiczenie 5 Multimedia W ćwiczeniu tym zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiemy pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie.

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Ćwiczenie 4 - Tabele

Ćwiczenie 4 - Tabele Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć

Bardziej szczegółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

2. Projektowanie stron WWW podstawowe informacje

2. Projektowanie stron WWW podstawowe informacje 1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Akademia Techniczno-Humanistyczna w Bielsku-Białej Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl O HTML R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl HTML! HTML jest skrótem od Hyper Text Markup Language. Jest to kolejny język opisu strony dotyczący

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i

Bardziej szczegółowo

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika. Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

World Wide Web? rkijanka

World Wide Web? rkijanka World Wide Web? rkijanka World Wide Web? globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy - system informacyjny, działający na bazie Internetu. 1.Sieć WWW jest

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Podstawy edycji tekstu

Podstawy edycji tekstu Podstawy edycji tekstu Edytor tekstu (ang. word processor) to program umożliwiający wprowadzanie, redagowanie, formatowanie oraz drukowanie dokumentów tekstowych. Wyliczmy możliwości dzisiejszych aplikacji

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Edytory tekstu oferują wiele możliwości dostosowania układu (kompozycji) strony w celu uwypuklenia

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Pokaz slajdów na stronie internetowej

Pokaz slajdów na stronie internetowej Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów

Bardziej szczegółowo

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word) Dostosowywanie paska zadań Ćwiczenia nr 2 Edycja tekstu (Microsoft Word) Domyślnie program Word proponuje paski narzędzi Standardowy oraz Formatowanie z zestawem opcji widocznym poniżej: Można jednak zmodyfikować

Bardziej szczegółowo

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania

Bardziej szczegółowo

WORDPRESS INSTRUKCJA OBSŁUGI

WORDPRESS INSTRUKCJA OBSŁUGI WORDPRESS INSTRUKCJA OBSŁUGI Zapraszamy do zapoznania się z Instrukcją obsługi panelu CMS Wordpress, która w krótkim czasie i bez większego kłopotu pozwoli na edycję treści i zawartości strony, w tym:

Bardziej szczegółowo

Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej.

Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej. Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej. Dział Zagadnienia Wymagania podstawowe Wymagania ponadpodstawowe Arkusz kalkulacyjny (Microsoft Excel i OpenOffice) Uruchomienie

Bardziej szczegółowo

Ćwiczenie 8 Kolory i znaki specjalne

Ćwiczenie 8 Kolory i znaki specjalne Ćwiczenie 8 Kolory i znaki specjalne W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi. Barwę moŝna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 1. Tworzenie slajdów MS PowerPoint 2010 to najnowsza wersja popularnego programu do tworzenia prezentacji multimedialnych. Wygląd programu w

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Klikasz Wpisy, a następnie Dodaj nowy i otwiera się taki ekran: 1 W tym miejscu tworzysz

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

[

]
Materiały dydaktyczne 1/5

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5 PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do

Bardziej szczegółowo

Tematy lekcji informatyki klasa 4a luty/marzec 2013

Tematy lekcji informatyki klasa 4a luty/marzec 2013 Tematy lekcji informatyki klasa 4a luty/marzec 2013 temat 11. z podręcznika (str. 116-120) Jak uruchomić edytor tekstu MS Word 2007? ćwiczenia 2-5 (str. 117-120); Co to jest przycisk Office? W jaki sposób

Bardziej szczegółowo

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe Zestawienie wydatków rok 2015 1 Wstaw numerację stron. Aby to zrobić przejdź na zakładkę Wstawianie i w grupie Nagłówek i stopka wybierz Numer strony. Następnie określ pozycję numeru na stronie (na przykład

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

Zajęcia e-kompetencje

Zajęcia e-kompetencje Zajęcia e-kompetencje Podstawy obsługi pakietu biurowego. Word i Writer cz.2 Projekt pt:. E-dzi@dek, e-b@bcia i nauczyciel wnuczek 1 Plan dzisiejszych zajęć: 1. Podstawy obsługi pakietu biurowego. Word

Bardziej szczegółowo

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

Bardziej szczegółowo

Co to jest html? I.Struktura strony:

Co to jest html? I.Struktura strony: Co to jest html? Jak tworzyć strony internetowe? Jest ich przecież w Internecie tysiące, a może nawet miliony. Jednak jedne strony bardziej nam się podobają, inne mniej. Z czego to wynika? Atrakcyjność

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Uruchamianie edytora OpenOffice.ux.pl Writer 9 Dostosowywanie środowiska pracy 11 Menu Widok 14 Ustawienia dokumentu 16 Rozdział 2. OpenOffice

Bardziej szczegółowo

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista HTML kurs podstawowy Wykład: język znaczników, atrybuty, XML, XHTML, rodzaje znaczników, wybór edytora, struktura dokumentu, head, title, body, kodowanie, utf-8, iso-8859-2, meta, link, akapit, font, color,

Bardziej szczegółowo

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Klub Seniora - Podstawy obsługi komputera oraz korzystania z Internetu Str. 1 Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Część 3 Opis programu MS Office

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ W celu wprowadzenia, modyfikacji lub usunięcia informacji w Biuletynie Informacji Publicznej należy wpisać w przeglądarce adres strony: http:/bip.moriw.pl/admin.php

Bardziej szczegółowo

HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8

HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8 HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8 WSTĘP Ten kurs dedykuje zarówno dla osób zupełnie "zielonych, jeśli chodzi, o html'a które chcą tą wiedze zdobyć jak i

Bardziej szczegółowo

Jak posługiwać się edytorem treści

Jak posługiwać się edytorem treści Jak posługiwać się edytorem treści Edytor CKE jest bardzo prostym narzędziem pomagającym osobom niezaznajomionym z językiem HTML w tworzeniu interaktywnych treści stron internetowych. Razem z praktyka

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo