Przewodnik początkującego w HTML'u

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

Download "Przewodnik początkującego w HTML'u"

Transkrypt

1 Przewodnik początkującego w HTML'u Objaśnienie znaczników Element jest fundamentalnym komponentem struktury tekstu dokumentu. Niektóre przykłady elementów to nagłówki, tablice, paragrafy i listy. Myśl o nich w ten sposób: używamy znaczników HTML do zaznaczenia elementów pliku dla twojej przeglądarki. Elementy mogą zawierać tekst otwarty, inne elementy, lub oba. Oznaczamy różne elementy w dokumencie HTML używając znaczników. Znaczniki HTML składają się z lewego ostrego nawiasu (<), nazwy znacznika, i prawego ostrego nawiasu (>).Znaczniki zazwyczaj wystepują w parach (np <h1> i </h1>) zaczynając i kończąc instrukcję znacznika. Znacznik końcowy jest podobny do znacznika początkowego z tym,że slash (/) poprzedza tekst wewnątrz nawiasów. Niektóre elementy mogą zawierać atrybut, który jest dodatkową informacją, która jest zawarta wewnątrz znacznika początkowego. Na przykład możesz określić wyrównanie obrazka (góra, środek lub dół) przez dołączenie właściwego atrybutu z obrazkiem w kodzie źródłowym HTML. NOTKA: HTML nie jest czuły na wielkość liter. <title> jest równoważny <TITLE> lub <TiTlE>. Nie wszystkie znaczniki są obsługiwane przez przeglądarki World Wide Web. Jeśli przeglądarka nie obsługuje znacznika, zazwyczaj jest on ignorowany. Minimalny dokument HTML Każdy dokument HTML powinien zawierać pewne stanardowe znaczniki HTML. Każdy dokument składa się z head i tekstu w body. Head zawiera tytuł, a body zawiera aktualny tekst, który może zawierać paragrafy, listy lub inne elementy. Przeglądarki oczekują określonych informacji ponieważ są zaprogramowane wedle specyfikacji HTML i SGML. Elementy wymagane są pokazane w poniższym przykładzie: <html> <head> <TITLE>Prosty Przykład HTML </TITLE> </head> <body> <H1>HTML jest łatwy do nauczenia</h1> <P>Witam w świecie HTML. To jest pierwszy paragraf. </P> <P>A to jest drugi paragraf.</p> </body > </html > Wymaganymi elementami są znacznik <html>, <head>, <title>, i <body> (i odpowiadające im znaczniki zamykające). Ponieważ powinieneś zawrzeć te znaczniki w każdym pliku, możesz chcieć stworzyć szablon pliku z nimi. (Niektóre przeglądarki formatują twój plik HTML poprawnie nawet jeśli te znaczniki nie są zawarte. Ale niektóre przeglądarki nie! Więc upewnij się,że je zawarłeś.) Narzędzie lekcyjne Aby zobaczyć kopię tego pliku jaką odczytuje przeglądarka dla wygenerowania informacji w bieżącym oknie, wybierz Pokaż Źródło (lub odpowiednik) z menu przeglądarki. Zawartość pliku ze wszystkimi znacznikami HTML jest wyświetlana w nowym oknie. Jest to doskonały sposób aby zobaczyć jak używany jest HTML. Oczywiście HTML może nie być technicznie poprawny. Kiedy dobrze poznasz HTML i sprawdzisz wiele kodów, nauczysz się rozróżniać pomiędzy "dobrym" a "złym" HTML'em.

2 Pamiętaj,że możesz zapisać plik źródłowy z kodami HTML i użyć go jako szablonu dla jednej ze stron WWW lub zmodyfikować format do swoich własnych celów.

3 Znaczniki wbudowane HTML Ten element mówi przeglądarce,że plik zawiera informacje kodowane w HTML'u. Rozszerzenie pliku. html również wskazuje ten dokument HTML i musi być użyty. (Jeśli jesteś ograniczony do nazwy pliku 8.3 (np. LeeHome. htm, użyj tylko rozszerzenia. htm.) HEAD Element head identyfikuje pierwszą część dokumentu HTML, który zawiera tytuł. Tytuł jest pokazany jako część okna przeglądarki. TITLE Element title zawiera tytuł dokumentu i identyfikuje jego zawartość w globalnym kontekście. Tytuł jest wyświetlany jest zazwyczaj na górze okna przeglądarki, ale nie wewnątrz obszaru tekstu. Tytuł jest również tym co jest wyświetlane na jakiejś hotliście lub liście zakładek, więc wybierz coś opisowego, unikalnego i względnie krótkiego. Tytuł jest również używany podczas wyszukiwania WAiS serwera. Na przykład możesz dołączyć, skrócony tytuł książki wraz z zawartością rozdziału: NCSA Mosaic Guide (Windows): Installation. Podaje to nazwę oprogramowania, platformę i zawartość rozdziału, co jest bardziej użyteczne niż uproszczone nazwanie dokumentu Installation. Generalnie powinieneś mieć tytuły do 64 znaków lub mniejsze. BODY Druga i największa część dokumentu HTML to body, która zawiera treść dokumentu (wyświetlaną wewnątrz obszaru tekstu okna przeglądarki). Znaczniki objaśniane poniżej używane są wewnątrz dokumentu HTML. Nagłówki HTML ma sześć poziomów nagłówków, ponumerowanych od 1 do 6, z czego 1 jest najbardziej wyróżniający się. Nagłówki są wyświetlane jako duże i/lub pogrubione czcionki w tekście body. Pierwszy nagłówek w każdym dokumencie powinien być oznaczony jako <H1>. Składnia elementu nagłówka to: < Hy > Tekst nagłówka </Hy> gdzie y jest liczbą pomiędzy 1 a 6 określającą poziom nagłówka. Nie przeskakuj poziomów nagłówków w dokumencie. Na przykład nie zaczynaj od nagłówka (<H1>) a potem używaj nagłówka (<H3>). Paragrafy W przeciwieństwie do większości procesorów tekstu, powrót karetki w plikach HTML nie jest znaczący. Więc nie musisz martwić się o to jak długa jest linia tekstu (lepiej jest mieć krótszą niż 72 znaki). Zawiajnie słowa może pojawić się w dowolnym punkcie pliku źródłowego, a wiele spacji jest zwijanych do pojedynczej spacji przez przeglądarkę. W standardowym przykładzie pokazanym w sekcji Minimalny dokument HTML, pierwszy paragraf jest kodowany jak <P>Witamy w świecie HTML. To jest pierwszy paragraf</p> W pliku źródłowym jest linia przerwy między zdaniami. Przeglądarka ignoruje tą linię i zaczyna nowy paragraf tylko kiedy natknie się na inny znacznik <P>.

4 Ważne: Musisz wskazać paragrafy elementem <P>. Przeglądarka ignoruje wcięcia lub puste linie w tekście źródłowym. Bez elementu <P> dokument stałby się jednym dużym paragrafem. (Jedynym wyjątkiem jest tekst oznaczony jako "przeformatowany," objaśniony poniżej.) Na przykład, poniżej stworzymy identyczne dane wyjściowe jak w pierwszym przykładzie: <H1>Nagłówek pierwszego poziomu</h1> <P> Witamy w świecie HTML. To jest pierwszy paragraf </P> <P>A to jest drugi paragraf. </P> Aby zabezpieczyć czytelność plików HTML, wstawiaj nagłówki w oddzielnych liniach, używając pustych linii co pomoże zidentyfikować początek nowej sekcji, i oddzielić paragrafy pustymi liniami (dodatkowo do znaczników <P>). Te dodatkowe spacje będą pomocne kiedy wyedytujesz pliki (ale przeglądarka zignoruje te spacje ponieważ ma ona swój własny zbiór zasad co do wstawiania spacji, niezależny od spacji wstawionych przez ciebie do pliku). NOTKA: Znacznik zamykający </P> może być pominięty. Jest tak ponieważ przeglądarki rozumieją,że kiedy napotkają znacznik <P>, oznacza to,że nastąpił koniec poprzedniego paragrafu. Użycie <P> i </P> jako kontenery na paragraf oznacza,że możesz wyśrodkować paragraf przez wprowadzenie atrybutu ALIGN=wyrównanie w pliku źródłowym. <P ALIGN=CENTER> To jest wyśrodkowany paragraf. [Zobacz sformatowaną wersję poniŝej.] </P> Listy To jest wyśrodkowany pragraf. HTML obsługuje listy nienumerowane, numerowane i definiowane. Możesz również zagnieżdżać listy, ale używaj tej cechy oszczędnie ponieważ zbyt wiele zagnieżdżonych list może powodować trudności w ich odczytywaniu. Listy nienumerowane Aby stworzyć nienumerowaną, wypunktowaną listę, 1. zacznij od znacznika listy <UL> (dla listy nienumerowanej 2. wpisz znacznik <LI> (pozycja listy po którym następuje pojedyncza pozycja; nie jest konieczny znacznik zamykający </LI> 3. zakończ całą listę znacznikiem zamykającym </UL> Poniżej mamy listę z trzema pozycjami: wyjściowe: <UL> <LI> jabłka <LI> banany <LI> grejpfruty </UL> Dane jabłka banany grejpfruty Element <LI> może zawierać wiele paragrafów. Wskazujemy paragrafy znacznikiem <P>. Listy numerowane Lista numerowana (zwana również listą porządkową, z której wywodzi się nazwa znacznika) jest identyczna jak lista nienumerowana, z wyjątkiem użycia <OL> zamiast <UL>. Elementy są zaznaczane przy

5 użyciu tego samego znacznika <n>.poniższy kod HTML: <OL> <LI> pomarańcze <LI> śliwki <LI> winogrona </OL> tworzy sformatowane dane wyjściowe: 1. pomarańcze 2. śliwki 3. winogrona Listy definiowane Lista definiowana (kodowana przez <DL>) zazwyczaj składa się z alternatywnych zdefiniowanych terminów (kodowanych przez <DT>) i zdefiniowanych definicji (kodowanych przez <DD>). Przeglądarki sieciowe generalnie formatują definicje w nowej linii. Poniżej mamy przykład linii zdefiniowanej: <DL> <DT> UIUC <DD> University of Illinois at Urbana-Champaign is one of three campuses of the University of Illinois system <DT> UIC <DD> University of Illinois at Chicago is another campus <DT> UIS <DD> University of Illinois at springfield is the newest campus in the system </DL> Dane wyjściowe wyglądają następująco: UIUC UIC UIS University of Illinois at Urbana-Champaign is one of three campuses of the University of Illinois system University of Illinois at Chicago is another campus University of Illinois at Springfield is the newest campus in the system Wejścia <DT> i <DD> mogą zawierać wiele paragrafów (wskazywanych przez znacznik <P>), listy, lub inne zdefiniowane informacje. Atrybut COMPACT może być używana rutynowo w przypadku kiedy zdefiniowane terminy są bardzo krótkie. <DL COMPACT> <DT> -i <DD>invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path <DT> -k <DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode </DL> Dane wyjściowe: -i invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path, -k invokes NCSA Mosaic for Microsoft Windows in kiosk mode. Listy zagnieżdżone Listy mogą być zagnieżdżone. Możesz również mieć kilka paragrafów, każdy zawierający listę zagnieżdżoną pojedynczym elemencie listy.

6 Tu mamy przykład listy zagnieżdżonej: <UL> <LI> A few New England states: <UL> <LI> Vermont <LI> New Hampshire <LI> Maine </UL> <LI> Two Midwestern states: <UL> <LI> Michigan <LI> Indiana </UL> </UL> Lista zagnieżdżona jest wyświetlana jako A few New England states: o Vermont o New Hampshire o Maine Two Midwestern states: o Michigan o Indiana Tekst przeformatowany Używaj znacznika <PRE> (który określa "przeformatowany") do wygenerowania tekstu o stałej szerokości czcionce. Ten znacznik również tworzy spacje, nowe linie i znaczące tabulatory. Jest to użyteczne dla listingu programu, wraz z innymi rzeczami. Na przykład poniższe linie: <PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE> wyświetlają: #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * Znacznik <PRE> może być użyty z opcjonalnym atrybutem WIDTH który określa maksymalną liczbę znaków dla linii. WIDTH sygnalizuje również przeglądarce aby wybrała właściwą czcionkę i wcięcia dla tekstu. Wewnątrz sekcji <PRE> mogą być użyte hiperlinki. Powinieneś unikać używania innych znaczników wewnątrz sekcji <PRE>. Zauważ,że ponieważ <, >, i & mają specjalne znaczenie w HTML, musisz użyć sekwencji znaków (odpowiednio&lt &gt.,i &amp.) aby wpisać te znaki.

7 Rozszerzone cytowanie Użyj znacznika <BLOCKQUOTE> do ujęcia długich cytatów w oddzielne bloki na ekranie. Większość przeglądarek zmienia marginesy dla cytatów oddzielając je od otaczanego tekstu. W przykładzie: <BLOCKQUOTE> <P>Omit needless words.</p> <P>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. </P> William Strunk, Jr., 1918 </BLOCKQUOTE> wynikiem jest: Adresy omit needless words. Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. --William Strunk, Jr., 1918 Znacznik <ADDRESS> jest generalnie używany do określania autora dokumentu, sposobu kontaktu z autorem (np. adres ), i poprawiania daty. Jest to zazwyczaj ostatni element w pliku Na przykład ostatnia linia wersji online tego przewodnika to: <ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96 </ADDRESS> Daje w efekcie: A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96 NOTKA: <ADDRESS> nie jest używany dla adresów pocztowych. Wymuszenie przełamania linii/adresy pocztowe Znacznik <BR> wymusza przełamanie linii bez dodatkowej spacji między liniami. Używając elementów <P> dla krótkich linii tekstu takich jak adresy pocztowe wynikiem jest niepożądana spacja. Na przykład,z <BR>: National Center for Supercomputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois <BR> Dane wyjściowe to: National Center for Supercomputing Applications

8 605 East Springfield Avenue Champaign, Illinois Linia pozioma Znacznik <HR> tworzy linię poziomą na szerokość okna przeglądarki. Linia pozioma jest użyteczna do oddzielenia sekcji dokumentu. Na przykład, wielu ludzi dodaje linię na końcu swojego tekstu a przed informacją <address>. Możesz rozróżniać rozmiar linii (cienkość) i szerokość (procent okna pokryty przez linię). Eksperymentuj z ustawieniami dopóki nie trafisz na właściwy Na przykład: <HR SIZE=4 WIDTH="50%"> Formatowanie znaku HTML ma dwa typy styli dla pojedynczego słowa lub zdania: logiczny i fizyczny. Style logiczne zaznaczają tekst zgodnie z jego znaczeniem, podczas gdy style fizyczne wskazują określony wygląd sekcji. Na przykład, w poprzednim zdaniu słowa "style logiczne"były oznaczone jako "definicja." Ten sam efekt (formatowanie tych słów kursywą) mógł zostać osiągnięty poprzez różne znaczniki mówiące przeglądarce "wstaw te słowa kursywą." NOTKA: Niektóre przeglądarki nie łączą żadnego stylu ze znacznikiem <DFN>, więc możesz nie widzieć wskazywanych zdań w poprzednim paragrafie kursywą. Styl logiczny kontra fizyczny Jeśli style fizyczny i logiczny dają taki sam wynik na ekranie, dlaczego są dwa? W idealnym świecie SGML, zawartość jest dzielona na prezentacje. Zatem znaczniki SGML są nagłówkami pierwszego poziomu, ale nie określają czy nagłówek pierwszego poziomu powinien być na przykład wyśrodkowanym, pogrubionym 24-punktowym Times'em. Zaletą tego podejścia (jest podobne do szablonu stylów w wielu procesorach tekstów) jest to,że jeśli zdecydujesz się zmienić nagłówki pierwszego poziomu na 20 punktową,wyjustowaną w lewo Helvetic'ę, wszystko co musisz zrobić to zmienić definicję nagłówka pierwszego poziomu w przeglądarce. W rzeczywistości wiele przeglądarek pozwala definiować jak chcesz, różne znaczniki HTML przetwarzane na ekranie. Inną zaletą znaczników logicznych jest to,że pomagają wyegzekwować logiczność twojego dokumentu Łatwiej jest zaznaczyć coś jako <H1> niż pamiętać, że nagłówek pierwszego poziomu to 24 punktowy pogrubiony, wyśrodkowany Times lub cokolwiek innego. Na przykład, rozważmy znacznik <STRONG>. Większość przeglądarek przetworzy go na tekst pogrubiony. Jednak, jest możliwe,że czytelnik chce aby ta sekcja była wyświetlana na czerwono. Style logiczne oferują taką elastyczność. Oczywiście, jeśli chcesz aby coś było wyświetlane kursywą (na przykład) a nie chcesz aby ustawienia przeglądarki wyświetlały je inaczej, użyj stylów fizycznych. Style fizyczne oferują logiczność w ten sposób, że coś co oznaczasz w pewien sposób zawsze będzie wyświetlone tak aby było jasne dla czytającego dokument. Wypróbuj oba style. Jeśli zaznaczasz stylem fizycznym, zrób to w całym dokumencie. Jeśli stylem logicznym korzystaj z niego wewnątrz dokumentu. Pomyśl czy przyszłe wydania HTML będą mogły obsługiwać style fizyczne, co może oznaczać, że przeglądarki nie będą wyświetlać poprawnie stylu fizycznego. Style logiczne

9 <DFN> dla słowa zdefiniowanego. Zazwyczaj wyświetlane kursywą. (NCSA Mosaic jest przeglądarką World Wide Web.) <EM> dla zaznaczenia. Zazwyczaj wyświetlane kursywą. <CITE> dla tytuł książek, filmów itp. Zazwyczaj wyświetlane kursywą <CODE> dla kodu komputerowego. Wyświetlany czcionką o stałej szerokości. <KBD> dla wejścia klawiatury użytkownika. Zazwyczaj wyświetlany prostą czcionka o stałej szerokości. <SAMP> dla sekwencji znaków literałów. Wyświetlany czcionką o stałej szerokości <STRONG> dla mocnego zaznaczenia. Zazwyczaj wyświetlany z pogrubieniem <VAR> dla zmiennej, gdzie zastępujesz zmienną określoną informacją. Zazwyczaj wyświetlany kursywą Style fizyczne <B> tekst pogrubiony < I > kursywa <TT> tekst maszyny do pisania. Znaki kontrolne (znane również jako Encje) Encje mają dwie funkcje: sekwencje znaków specjalnych wyświetlanie pozostałych znaków nie dostępnych w zbiorze znaków ASCII (przede wszystkim znaków ze znakami diakrytycznymi) Trzy znaki ASCII - lewy ostry nawias (<), prawy ostry nawias (>), i ampersand (&)- mają specjalne znaczenie w HTML i dlatego nie mogą być użyte w tekście. (Nawiasy ostre są używane do wskazywania początku i końca znaczników HTML, a ampersand jest używany do wskazywania początku sekwencji esc.) Podwójny znak cudzysłowu może być używany taki jaki jest, ale również może być użyta encja ("). Aby użyć jednego z trzech znaków w dokumencie HTML, musisz wpisać znaki kontrolne: < znak kontrolny dla < > znak kontrolny dla > & znak kontrolny dla & Dodatkowe znaki kontrolne obsługują znaki akcentowane, takie jak: ö znak kontrolny dla małej litery umlaut: o ñ znak specjalny dla małej litery z tyldą: n È znak kontrolny dla dużej litery E ze znakiem ': E Możesz zastąpić litery o, n, i E pokazane powyżej innymi. NOTKA: W przeciwieństwie do reszty HTML, znaki kontrolne są czułe na wielkość liter. Nie możesz na przykład użyć &LT ; zamiast &lt ;. Łączenie Główna siła HTML pochodzi od jego możliwości do łączenia tekstu i /lub obrazka z innym dokumentem lub sekcją dokumentu. Przeglądarka podświetla zidentyfikowany tekst lub obrazek kolorem i/lub podkreśleniem wskazując,że jest to link hipertekstowy (często skrótowo nazywany hiperlinkiem lub linkiem). Znacznikiem związanym z hipertekstem w HTML'u jest znacznik <A>, który oznacza kotwicę. Aby umieścić anchor w dokumencie: 1.zacznij od <A (spacja po A) 2.określ dokument jaki łączysz przez wpisanie parametru HREF= "nazwapliku" po którym następuje ostry nawias kończący (>) 3. wpisz tekst służący za hipertekstowy link w bieżącym dokumencie 4. wpisz końcowy znacznik: </A> (bez spacji koniecznej po znaczniku kotwicy)

10 Tu mamy przykład odnośnika hipertekstu w pliku nazwanym US. html: <A HREF="MaineStats.html">Maine</A> Tu tworzymy słowo Maine jako hiperlink do dokumentu MaineStats.html, który jest w tym samym katalogu co pierwszy dokument. Względne ścieżki dostępu kontra absolutne ścieżki dostępu Możesz łączyć dokumenty w innych katalogach przez określenie względnej ścieżki dostępu z bieżącego dokumentu do łączonego dokumentu. Na przykład, link do pliku NYStats.html umieszczony w podkatalogu AtlanticStates: <A HREF="AtlanticStates/NYStats.html">New York</A> S ą one nazywane linkami względnymi ponieważ określasz ścieżkę dostępu do linkowanego pliku względem lokacji pliku bieżącego. Możesz również użyć absolutnej ścieżki dostępu (kompletny URL) do pliku, ale linki względne są bardziej wydajne w dostępie do serwera. Ścieżki dostępu używają standardowej składni UNIX'a. Składnia UNIX dla katalogu rodzicielskiego (katalogu zawierający bieżący katalog ) to Jeśli masz plik NYStats.html i odnosisz się do oryginalnego dokumentu US. html, twój link powinien być podobny do tego : <A HREF="../US.html">United States</A> Generalnie, powinieneś używać linków względnych ponieważ: 1.łatwiej jest przesuwać grupy dokumentów do innej lokacji 2.jest bardziej efektywne połączenie z serwerem 3.jest mniej wpisywania Używaj absolutnych ścieżek dostępu kiedy łączysz dokumenty, które nie są bezpośrednio powiązane. Na przykład, rozważmy grump dokumentów, które stanowią podręcznik użytkownika. Łączenia wewnątrz tej grupy powinny być łączeniami względnymi. Łącza do innych dokumentów (być może odnoszące się do powiązanego oprogramowania) powinny używać pełnej ścieżki dostępu. W ten sposób jeśli przesuniesz podręcznik użytkownika do innego katalogu,żaden z linków nie będzie zaktualizowany. URL'e World Wide Web używa Uniform Resource Locators (URL'i) do określania położenia plików na serwerach. URL obejmuje typ zasobu do którego chcemy mieć dostęp (np. Web, gopher, WAiS), adres serwera,i położnie tego pliku. Składnia: scheme : //host.domain [ port] /path/ filename gdzie scheme to jedno z nich: file plik w twoim systemie ftp plik na anonimowym serwerze FTP http plik na serwerze World Wide Web gopher plik na serwerze Gopher'a WAIS plik na serwerze WAIS news grupa dyskusyjna Usenet Numer portu może być generalnie pominięty. Na przykład, wstawiając łącze do primer w swoim

11 dokumencie wpisz: <A HREF=" NCSA's Beginner's Guide to HTML</A> To wejście stworzy tekst NCSA's Beginner's Guide to HTML,a hiperłącze to tego dokumentu. Łącza do określonych sekcji Kotwice mogą być również użyte do przeniesienia czytelnika do określonej sekcji w dokumencie (albo tym samym albo innym ) zamiast do głównego, który jest domyślny. Ten typ kotwic jest powszechnie nazywany nazwaną kotwicą ponieważ tworzy łącze, wstawiasz nazwę wewnątrz dokumentu. Możesz łączyć określone sekcje w innym dokumencie Taka informacja jest przedstawiana najpierw ponieważ jets to pomocne przy zrozumieniu łączenia wewnątrz jednego dokumentu. Łącza pomiędzy sekcjami różnych dokumentów Przypuśćmy, że chcesz ustawić łącze z dokumentu A (dokumenta. html) do określonej sekcji w innym dokumencie (MaineStats.html). Wpisz kod HTML dla łącza do nazwanej kotwicy: documenta.html: In addition to the many state parks, Maine is also home to <a href="mainestats.html#anp">acadia National Park</a>. Myśl o znakach po hash'u (#) jako tabulatorach wewnątrz pliku MaineStats.html. Ten tabulator mówi przeglądarce co powinna wyświetlić na górze okna kiedy link jest aktywowany. Innymi słowy, pierwsza linia w oknie przeglądarki to powinien być nagłówek Acadia National Park. Następnie tworzymy nazwaną kotwicę (w tym przykładzie "ANP") w MaineStats.html: <H2><A NAME="ANP">Acadia National Park</a></H2> Z tymi dwoma elementami, możesz przenieść czytelnika bezpośrednio do odnośnika Acadia w MaineStats.html. NOTKA: Nie możesz tworzyć łączy do określonych sekcji wewnątrz różnych dokumentów chyba,że albo masz prawo dostępu do kodu źródłowego tego dokumentu lub dokument już zawiera nazwane kotwice w sobie. Ale jeśli dokument nie ma nazwanych kotwic, nie możesz stworzyć linku do określonej sekcji ponieważ nie możesz edytować oryginalnego pliku na serwerze NCSA. Łącza do określonych sekcji wewnątrz bieżącego dokumentu Technika jets taka sama, z wyjątkiem tego,że pomijana jest nazwa pliku. Na przykład, łącze do kotwicy ANP z wewnątrz MaineStats:...More information about <A HREF="#ANP">Acadia National Park</a> is available elsewhere in this document.

12 Upewnij się,że wstawiłeś znacznik <A NAME=> w odpowiednim miejscu dokumentu, tam gdzie chcesz aby łącze skoczyło

13 (<H2><A NAME="ANP">Acadia National Park</a></H2>). Nazwane kotwice są szczególnie użyteczne kiedy sądzisz,że czytelnicy będą drukować dokument w całości lub kiedy masz mało informacji jakie chcesz umieścić online w pliku Mailto Możesz łatwo stworzyć czytelnikowi możliwość wysyłania poczty elektronicznej do określonej osoby przez wstawienie atrybutu mailto w hiperlinku. Jego postać: <A HREF="mailto: </a> Na przykład wpisz, : <A HREF="mailto:pubs@ncsa.uiuc.edu" > NCSA Publications Group</a> aby stworzyć okno pocztowe, już skonfigurowane do otwarcia okna pocztowego dla aliasu NCSA Publications Group Obrazki wstawki Większość przeglądarek może wyświetlić obrazki wstawki (to znaczy odsyłacze do tekstu), które są w formacie X Bitmap (XBM), GIF, lub JPEG. Inne formaty obrazków nie są raczej obsługiwane w przeglądarkach sieciowych [np.format Portable Network Graphic (PNG)].Każdy obrazek zajmuje czas na jego przetworzenie i spowalnia wyświetlanie całego dokumentu. Ostrożnie więc z wyborem i liczbą obrazków w dokumencie. Aby zawrzeć obrazek wstawkę wpisz: <IMG SRC=ImageName> gdzie ImageName jest to URL pliku obrazka. Składnia <IMG SRC> URL'i jest identyczna do tej używanej w HREF. Jeśli plik obrazka to plik GIF, wtedy część nazwy ImageName musi kończyć się.gif. Nazwy plików obrazków X Bitmap muszą kończyć się.xbm;plik obrazków JPEG kończą się.jpg lub.jpeg; a pliki Portable Network Graphic muszą kończyć się.png. Atrybuty rozmiaru obrazka Powinieneś dołączyć dwa inne atrybuty znacznika <IMG> mówiące przeglądarce o rozmiarze obrazka ściąganego razem z tekstem. Atrybuty HEIGHT i WIDTH pozwolą przeglądarce zarezerwować właściwą przestrzeń (w pikselach) dla obrazków. (Pobierasz rozmiar w pikselach z odpowiedniego oprogramowania, takiego jak Adobe Photoshop.) Na przykład, aby wstawić obrazek Selfportrait razem z rozmiarem wpisz: <IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65> NOTKA: Niektóre przeglądarki używają atrybutów HEIGHT i WIDTH do rozciągnięcia lub skracania obrazka aby mieścił się w wyznaczonej przestrzeni kiedy obrazek dokładnie nie pasuje do liczb atrybutów. Nie wszyscy producenci przeglądarek nie podzielają pomysłu na rozciąganie / skracanie. Tak więc nie planuj,że twoi czytelnicy mają dostęp do tej cechy.. Wyrónywanie obrazków Masz pewne możliwości kiedy wyświetlasz obrazki. Możesz mieć obrazki oddzielone od tekstu i

14 wyrównane do lewej, prawej lub wyśrodkowane. Lub możesz mieć obrazek otoczony tekstem. Spróbuj kilku możliwości aby zobaczyć jak informacja wygląda najlepiej.. Otaczanie obrazka tekstem ^^^^^^ Domyślnie dół obrazka jest wyrównany z poniższym tekstem, jak pokazano w tym paragrafie. Możesz wyrównać obrazki na górze lub wyśrodkowanym paragrafie używając ALIGN= atrybuty TOP i CENTER. Ten tekst jest wyrównany do góry obrazka (< IMG SRC = "BarHotlist.gif" ALIGN=TOP>). Zauważ ^^^^^J jak przeglądarki wyrównują tylko jedną linię a potem skaczą na dół obrazka dla reszty tekstu. A ten tekst jest wyśrodkowany przy obrazku (<IMG SRC = "BarHotlist.gif" ALIGN=CENTER>). Ponownie, tylko jedna linia tekstu jest wyśrodkowana; reszta jest poniżej obrazka. Obrazki bez tekstu Aby wyświetlić obrazek bez żadnego powiązanego tekstu (np. logo organizacji),stwórz oddzielny paragraf.użyj paragrafu ALIGN= atrybut do wyśrodkowania obrazka lub adjustowania go do prawej strony okna jak pokazano poniżej: <p ALIGN=CENTER> <IMG SRC = "BarHotlist.gif"> </p> co daje w wyniku : Obrazek jest wyśrodkowany;ten paragraf zaczyna się poniżej i jest wyjustowany w lewo. Alternatywny tekst dla obrazka Niektóre przeglądarki World Wide Web przede wszystkim te uruchamiane na terminalach VT100 nie mogą wyświetlać obrazków. Niektórzy użytkownicy wyłączają ładowanie obrazków nawet jeśli ich oprogramowanie może wyświetlać obrazki (zwłaszcza jeśli używają modemu lub mają wolne łącza). HTML dostarcza mechanizmu pozwalającego czytelnikom na sprawdzenie to co stracili z twojej strony. Atrybut ALT pozwala ci określić tekst wyświetlany zamiast obrazka. Na przykład: <IMG SRC="UpArrow.gif" ALT="Up"> gdzie UpArrow.gif jest obrazkiem strzałki skierowanej w górę. Przy przeglądarkach grafiki, które mają włączone ładowanie obrazków, zobaczysz grafikę strzałki. Przy przeglądarce VT100 lub jeśli ładowanie obrazków jest wyłączone, w oknie pojawi się słowo Up.

15 Powinieneś spróbować dołączyć tekst alternatywny dla każdego obrazka jakiego używasz w dokumencie, co jest uprzejmością dla twoich czytelników. Grafiki tła Nowsze wersje przeglądarek mogą ładować obrazki i używać ich jako tła, kiedy wyświetlana jest strona. Niektórzy ludzie lubią obrazki jako tło a niektórzy nie. Generalnie, jeśli chcesz dołączyć tło, upewnij się,że tekst może być łatwo odczytany kiedy wyświetlany jest u góry obrazka. obrazki tła mogą być teksturami lub obrazem obiektu (logo). Tworzysz obrazek tła podobnie jak robisz dowolny obrazek. Jednak możesz stworzyć mały fragment obrazka. Używając funkcji nazwanej mozaikowaniem, przeglądarka pobiera obrazek i powtarza go tak długo aby wypełnić okno przeglądarki. W sumie możesz wygenerować jeden obrazek. Znacznik do dołączenia obrazka tła jets zawarty w instrukcji <BODY> jako atrybut: Kolor tła <BODY BACKGROUND=" filename.gif"> Domyślnie przeglądarki wyświetlają czarny tekst na szarym tle. Jednak możesz zmienić oba te elementy jeśli chcesz. Zawsze podejrzyj zmiany jakich dokonałeś aby upewnić się,że strona jest czytelna. (Na przykład, wielu ludzi traktuje czerwony tekst na czarnym tle jako trudny do odczytania!) Możesz zmienić kolor tekstu, linki, linki odwiedzone i linki aktywne używając atrybutów znacznika <BODY>. Na przykład wpisz: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> To tworzy okno z czarnym tłem (BGCOLOR), białym tekstem (TEXT), i posrebrzanymi hiperlinkami (LINK). Sześciocyfrowa kombinacja liczb i liter przedstawia kolory poprzez podanie ich wartości RGB (red, green, blue). Sześć cyfr to w rzeczywistości sekwencja trzech dwucyfrowych liczb reprezentujących te trzy kolory jako wartości heksadecymalne w zakresie 00-FF. Na przykład, to kolor czarny, FF0000 to jasno czerwony, a FFFFFF to kolor biały. To połączenie liczb i liter jest tajemnicze. Na szczęście są dostępne zasoby online pomocne przy rozwiązaniu tej zagadki jak i pozwalające na dobór odpowiednich kolorów: ColorPro Web server (http :// edu/cgi-bin/col orpro/) WebColor -( bin/software.pl/telecominternet/software.767.html) Zewnętrzne obrazki, dźwięki i animacje Możesz chcieć otworzyć obrazek jako oddzielny dokument, kiedy użytkownik aktywuje link, wersja wstawki obrazka zostanie dołączona do twojego dokumentu. Nazywa się to obrazkiem zewnętrznym i jest użyteczne jeśli nie życzysz sobie aby dokument główny ładował się wolno wraz dużymi obrazkami. Aby dołączyć odnośnik do zewnętrznego obrazka wpisz: <A HREF= "Mylmage. gif" >l ink anchor</a> Możesz również użyć mniejszego obrazka jako linku do dużego obrazka. Wpisz: <A HREF="LargerImage.gif"><IMG SRC= "SmallImage.gif"></A> Czytelnik zobaczy obrazek SmallImage.gif a klikając go otworzy plik Larger Image.gif. Użyj tej samej składni dla linków do zewnętrznych animacji i dźwięków. Jedyna różnica jest w rozszerzeniu pliku

16 dołączanego. Na przykład, <A HREF="AdamsRib.mov">a wonderful Hepburn/Tracy movie</a> określa link do filmu QuickTime. Tu mamy kilka popularnych rozszerzeń plików: TVD Dliku czysty tekst dokument HTML obrazek GIF obrazek TIFF obrazek X Bitmap obrazek JPEG plik PostScript plik dźwiękowy AIFF plik dźwiękowy AU plik dźwiękowy WAV film QuickTime film MPEG Rozszerzenie.txt.html.gif.tiff.xbm j pg or j peg. p s.aiff.au. wav.mov.mpeg lub mpg Tabele Tabele są bardzo użyteczne dla prezentacji informacji ztabelaryzowanych. Pomyśl o stabelaryzowanych informacjach w świetle poniższego kodowania. Tabela ma nagłówki w których wyjaśnione jest co zawierają kolumny/wiersze, wiersze dla informacji, komórki dla każdej pozycji.z W poniższych tabelach, pierwsza kolumna zawiera nagłówek informacji, każdy wiersz wyjaśnia znaczniki tabel HTML, a każda komórka zawiera parę znaczników lub objaśnienie funkcji znacznika

17 Tabela Element <TABLE>... </TABLE> <CAPTION>... </CAPTION> <TR>... </TR> <TH>... </TH> <TD>... </TD> Opis Definiuje tabelę w HTML.Jeśli jest obecny atrybut BORDER, przeglądarka wyświetli tabele z obramowaniem. Definiuje napis dla tytułu tabeli. Domyślnie tytuł jest wyśrodkowany na górze tabeli.atrybut ALIGN=BOTTOM może być użyty do umieszczenia napisu poniżej tabeli. NOTKA: Może być użyty dowolny rodzaj znacznika w napisie. Określa wiersze tabeli wewnątrz tabeli.możesz zdefiniować domyślne atrybuty dla całego wiersza: ALIGN (LEFT, CENTER, RIGHT) i/lub VALIGN (TOP, MIDDLE, BOTTOM). Definiuje nagłówek komórki tabeli.domyślnie tekst w tej komórce jest pogrubiony i wyśrodkowany.nagłówek komórki tabeli może zawierać inne atrybuty określające chrakterystykę tej komórki i/lub jej zawartość. Definiuje dane komórki tabeli.domyślnie tekst w tej komórce jest wyrównany do lewej i wyśrodkowany poziomo. Dane komórki tabeli mogą zawierać inne atrybuty określające chrakterystykę tej komórki i/lub jej zawartość. Atrybuty Tabeli NOTKA: Atrybuty zdefiniowane wewnątrz <TH>...</TH> LUB <TD>...</TD> Anulują domyślne ustawienia wyrównania w <TR>...</TR> Atrybut Opis ALIGN (LEFT, CENTER, RIGHT) VALIGN (TOP, MIDDLE, BOTTOM) COLSPAN=n ROWSPAN=n NOWRAP Poziome wyrównanie komórki Pionowe wyrównanie komórki. Liczba (n) kolumn rozpiętości komórki. Liczba (n) wierszy rozpiętości komórki. Wyłączone zawijanie wewnątrz komórki.

18 <TH> zawartość komórki </TH> pierwsza komórka w wierszu 1 <TH> zawartość komórki </TH> </TR> <TR> <TD> zawartość komórki </TD> <TD> zawartość komórki </TD> </TR> ostatnia komórka w wierszu 1 i koniec pierwszej definicji wiersza początek drugiej definicji wiersza pierwsza komórka w wierszu 2 ostatnia komórka w wierszu 2 koniec drugiej definicji wiersza <TR> <TD> zawartość komórki </TD> <TD> zawartość komórki </TD> </TR> </TABLE> początek ostatniej definicji wiersza pierwsza komórka w ostatnim wierszu ostatnia komórka w ostanim wierszu koniec ostatniej definicji wiersza koniec definicji tabeli Znaczniki <TABLE> i </TABLE> muszą otaczać całą definicję tabeli. Pierwsza pozycja wewnątrz tabeli to CAPTION, która jest opcjonalna. Potem możesz mieć dowolną liczbę wierszy zdefiniowanych znacznikami <TR> i </TR>. Wewnątrz wiersza możesz mieć dowolną liczbę komórek zdefiniowanych znacznikami <TD>... </TD> lub <TH>... </TH>. Każdy wiersz tabeli jest, w gruncie rzeczy, formatowany niezależnie od wierszy powyżej i poniżej. Pozwala to łatwo wyświetlać tabele z pojedynczą komórką. Tabele dla nietabelarycznych informacji Niektórzy używają tabel do przdstawiania nietabelarycznych informacji. Na przykład, ponieważ linki mogą być dołączane w komórkach tabeli, niektórzy używają tabeli bez obramowania do stworzenia "jednego" obrazu dla oddzielnych obrazów. Przeglądarki, które mogą wyświetlać tabele właściwie pokażą różne obrazy jednolicie, tworząc obraz podobny do obrazu mapy. Wypełnianie formularzy Formularze sieciowe pozwalają czytającym zwrócić informację do serwera w tym samym działaniu. Na przykład przypuśćmy, że zbierasz nazwy i adresy aby wysyłać maile do ludzi,którzy sobie tego życzą. Dla każdej osoby, która wpisze swoje imię i adres, potrzebujesz pewnych informacji aby je wysłać a odpowiadającego dodać do swojej bazy danych. Takie przetwarzanie nadchodzących danych jest zazwyczaj obsługiwane przez skrypt lub program napisany w Perlu lub innym języku, który manipuluje tekstem, plikami i informacją. Jeśli nie umiesz napisać skryptu lub programu dla nadchodzących danych, znajdź kogoś kto to zrobić potrafi. Formularze nie są trudne do zakodowania. Posiadają taką samą konstrukcję jak inne znaczniki HTML. Z powodu konieczności posiadania wyspecjalizowanego programu lub skryptu do obsługi nadchodzących informacji, wypełnianie formularzy nie będzie tu omawiane. Usuwanie problemów Unikanie nakładających się znaczników Rozważmy taki przypadek: <B>To jest przykład <DFN>nakładania się</b> znaczników HTML.</DFN>

19 Słowo nakładania się zawarte jest wewnątrz znaczników <B> i <DFN>. Przeglądarka może nie rozpoznać takiego kodowania i może nie wyświetlać tego w sposób jaki zamierzałeś. Jedynym sposobem jest przetestowanie każdej dostępnej przeglądarki pod tym kątem (co jest czasochłonne i niepraktyczne). Generalnie unikaj nakładania znaczników. Przyjrzyj się znacznikom i spróbuj porobić z nich pary. Znaczniki (z oczywistymi wyjątkami elementów których znaczniki końcowe mogą być pominięte, takie jak paragrafy) powinny być sparowane bez znaczników pomiędzy nimi. Spójrz ponownie na powyższy przykład. Nie możesz utworzyć pary znacznika pogrubienia bez innego znacznika w środku (pierwszy zdefiniowany znacznik).. Osadź tylko kotwice i znak znacznika Protokół HTML pozwala ci osadzać linki wewnątrz innych znaczników HTML : <H1><A HREF= "Destination.html">My heading</a></h1> NIE osadzaj znaczników HTML wewnątrz kotwicy: <A HREF="Destination.html"> <H1>My heading</h1> </A> chociaż większość przeglądarek aktualnie obsługuje ten drugi przykład, oficjalna specyfikacja HTML nie obsługuje takiej konstrukcji a twoje pliki nie działałyby z przyszłymi przeglądarkami. Pamiętaj,że przeglądarki mogą by wyrozumiałe kiedy wyświetlasz niepoprawnie zakodowane pliki. Ale ta wyrozumiałość może nie wystarczyć w kolejnych wersjach oprogramowania! Kiedy wątpisz, koduj pliki zgodnie ze specyfikacją HTML. Znak znacznika modyfikuje wygląd tekstu wewnątrz innych elementów: <UL> <LI><B>A bold list item</b> <LI><I>An italic list item</i> </UL> unikaj osadzania innych typów znaczników elementów HTML.Na przykład możesz mieć ochotę osadzić nagłówek wewnątrz listy aby stworzyć większą czcionkę: <UL> <LI><H1>A large heading</h1> <LI><H2>Something slightly smaller</h2> </UL> chociaż niektóre przeglądarki obsługują coś takiego, formatowanie takiego kodowania jest nieprzewidywalne (ponieważ nie jest zdefiniowane).dla kompatybilności ze wszystkimi przeglądarkami, unikaj tego rodzaju konstrukcji. (Znacznik <FONT> Netscape, który pozwala ci określić wielkość pojedynczych znaków wyświetlony w oknie, nie jest częścią oficjalnej specyfikacji HTML.) Jaka jest różnica pomiędzy osadzaniem znacznika <B> wewnątrz <LI> w przeciwieństwie do osadzania <H1> wewnątrz <LI>? W HTML semantyczne znaczenie <H1> jest takie,że jest to główny nagłówek dokumentu a po nim powinna nastąpić zawartość dokumentu.dlatego też nie ma sensu umieszczanie <H1> wewnątrz listy. Znaczniki formatowania znaku również nie są generalnie addytywne. Na przykład możesz oczekiwać,że: <B><I>some text</i></b> stworzy pogrubiony tekst kursywą. Niektóre przeglądarki tak zrobią; inne zinterpretują tylko znacznik wewnętrzny.

20 Końcowe kroki walidacji twojego kodu Kiedy wstawisz dokument na serwer, upewnij się,że sprawdziłeś formatowanie i każdy link (wliczając w to nazwane kotwice). Idealnie byłoby gdyby ktoś przeczytał i skomentował twoje pliki przed zakończeniem dokumentu. Możesz uruchomić swój kod na serwerze walidacyjnym HTML,który powie ci czy twój kod jest odpowiedni. Serwis pozwoli ci zaznaczyć poziom zgodności jaki chcesz dla swoich plików. Jeśli chcesz użyć kodu nie będącego oficjalną częścią specyfikacji HTML takie rozwiązanie jest pomocne. Formalne obrazki Kiedy znacznik <IMG SRC> wskazuje obrazek, który nie istnieje, przeglądarka pokaże obrazek formalny.kiedy wykonujesz ostateczny przegląd plików, upewnij się,że odnośniki odnoszą się do istniejących obrazków, że hiperlink ma poprawną informację w URL'u, i,że dostęp do pliku jets ustawiony właściwie! Aktualizacja plików Jeśli zawartość plików jets statyczna (takie jak biografia Józefa Piłsudskiego), aktualizacja raczej nie będzie potrzebna. Ale dla dokumentów, które zmieniają się w czasie pamiętaj o aktualizacji dokumentu! Aktualizacja jest szczególnie ważna kiedy pliki zawierają informacje takie zadania tygodniowe. Różnice w przeglądarkach Przeglądarki wyświetlają elementy HTML różnie. Pamiętaj,że nie cały kod używany w plikach HTML jest interpretowany przez wszystkie przeglądarki. Kod nie rozumiany przez przeglądarkę jest ignorowany. Możesz spędzać godziny na tworzeniu "perfekcyjnego" pliku używając aktualnej przeglądarki. Jeśli sprawdzisz plik na innej może się okazać,że wygląda on nieco inaczej.. Komentowanie plików Możesz chcieć komentować swoje pliki. Komentarze w HTML są podobne do komentarzy w programie komputerowym wpisany tekst nie jest użyty przez przeglądarkę przy formatowaniu i nie jest bezpośrednio widziany przez czytającego tak jak i komentarze w programie komputerowym. Komentarze są dostępne jeśli czytelnik podejrzy kod źródłowy. Komentarze takie jak nazwa osoby uaktualniającej plik, wersja oprogramowania, lub data są teraz normą. Aby zawrzeć kometarz wpisz: <! your comments here >

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

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

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 2 Podstawy HTML mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie podstawowych elementów HTML stworzenie strony ćwiczenie zadanie domowe Konstrukcja

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

Test z przedmiotu. Witryny i aplikacje internetowe

Test z przedmiotu. Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

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

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

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

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

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

I. Wstawianie rysunków

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

Bardziej szczegółowo

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

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

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

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

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 SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

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

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

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

Programowanie w Internecie

Programowanie w Internecie Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej

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

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

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

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

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

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja

Bardziej szczegółowo

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów

Bardziej szczegółowo

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

Pierwsza strona internetowa

Pierwsza strona internetowa HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania

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

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

Bardziej szczegółowo

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje

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

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

Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) Najbardziej charakterystycznym elementem dokumentów w światowej sieci World

Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) Najbardziej charakterystycznym elementem dokumentów w światowej sieci World Temat: Odsyłacze. Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) Najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Odsyłacze Umożliwiają za pomocą

Bardziej szczegółowo

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

Witryny i aplikacje internetowe

Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

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

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

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

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

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z

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

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp

Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp Najprostszym sposobem utworzenia strony internetowej jest użycie języka HTML.

Bardziej szczegółowo

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup

Bardziej szczegółowo

Tworzenie szablonów użytkownika

Tworzenie szablonów użytkownika Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera

Bardziej szczegółowo

Być może jesteś doświadczonym programistą, biegle programujesz w Javie,

Być może jesteś doświadczonym programistą, biegle programujesz w Javie, Kompendium PHP 01 Być może jesteś doświadczonym programistą, biegle programujesz w Javie, C++, Pythonie lub jakimś innym języku programowania, których jak myślę, powstało już tyle, że chyba nie ma osoby,

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

CSS - layout strony internetowej

CSS - layout strony internetowej www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:

Bardziej szczegółowo

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi

Bardziej szczegółowo

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci

Bardziej szczegółowo

Adobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7.

Adobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7. Spis treści: 1 Dokument wielostronicowy... 2 1.1 Książka... 2 1.2 Eksport do PDF... 7 strona 1 z 7 1 Dokument wielostronicowy Poniższa instrukcja zawiera przykład procedury projektowania dokumentów wielostronicowych

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

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędó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

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

Tworzenie infografik za pomocą narzędzia Canva

Tworzenie infografik za pomocą narzędzia Canva Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12

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

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

Przykłady zastosowań funkcji tekstowych w arkuszu kalkulacyjnym

Przykłady zastosowań funkcji tekstowych w arkuszu kalkulacyjnym S t r o n a 1 Bożena Ignatowska Przykłady zastosowań funkcji tekstowych w arkuszu kalkulacyjnym Wprowadzenie W artykule zostaną omówione zagadnienia związane z wykorzystaniem funkcji tekstowych w arkuszu

Bardziej szczegółowo

Zastanawiałeś się może, dlaczego Twój współpracownik,

Zastanawiałeś się może, dlaczego Twój współpracownik, Kurs Makra dla początkujących Wiadomości wstępne VBI/01 Piotr Dynia, specjalista ds. MS Office Czas, który poświęcisz na naukę tego zagadnienia, to 15 20 minut. Zastanawiałeś się może, dlaczego Twój współpracownik,

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

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

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania

Bardziej szczegółowo

Temat bardzo mądrego referatu maksymalnie na dwie linijki tekstu

Temat bardzo mądrego referatu maksymalnie na dwie linijki tekstu Tutaj logo szkoły Gimnazjum nr 72 ul. Wysoka 8/12 00-155 Warszawa Temat bardzo mądrego referatu maksymalnie na dwie linijki tekstu Opiekun merytoryczny: Zofia Zatorska Opiekun techniczny: Ewa Kołodziej

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

Podstawy informatyki

Podstawy informatyki Podstawy informatyki semestr I, studia stacjonarne I stopnia Elektronika rok akademicki 2012/2013 Pracownia nr 5 Edytor tekstu Microsoft Word 2007 mgr inż. Adam Idźkowski Pracownia nr 5 2 Edytor tekstu

Bardziej szczegółowo

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV I OKRES Sprawności 1. Komputery i programy konieczne (ocena: dopuszczający) wymienia z pomocą nauczyciela podstawowe zasady bezpiecznej pracy z komputerem;

Bardziej szczegółowo

Techniki wstawiania tabel

Techniki wstawiania tabel Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać

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

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA MasterEdytor Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA 1. Przeznaczenie Program MasterEdytor przeznaczony jest do skonfigurowania wszystkich parametrów pracy programu mpfotoalbum. 2.

Bardziej szczegółowo

CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM

CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM 1.1. PODSTAWOWE INFORMACJE PC to skrót od nazwy Komputer Osobisty (z ang. personal computer). Elementy komputera można podzielić na dwie ogólne kategorie: sprzęt - fizyczne

Bardziej szczegółowo

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2 Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy

Bardziej szczegółowo

Przewodnik Szybki start

Przewodnik Szybki start Przewodnik Szybki start Program Microsoft Publisher 2013 wygląda inaczej niż wcześniejsze wersje, dlatego przygotowaliśmy ten przewodnik, aby skrócić czas nauki jego obsługi. Pasek narzędzi Szybki dostęp

Bardziej szczegółowo

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami. Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest

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

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

Tworzenie formularzy w Microsoft Office Word 2007

Tworzenie formularzy w Microsoft Office Word 2007 Tworzenie formularzy w Microsoft Office Word 2007 Opublikowano: 5 kwietnia 2007 Autor: Michał Staniszewski W życiu codziennym często wypełniamy różnego rodzaju formularze, podania i coraz częściej mają

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

Podstawy technologii WWW

Podstawy technologii WWW Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer

Bardziej szczegółowo

Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl

Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl Rejestracja w serwisie: Aby utworzyć konto w serwisie, należy otworzyć w przeglądarce internetowej stronę www.esiop.legionowo.pl,

Bardziej szczegółowo

Instrukcja zarządzania kontem jednostki samorządu terytorialnego w serwisie internetowym

Instrukcja zarządzania kontem jednostki samorządu terytorialnego w serwisie internetowym Instrukcja zarządzania kontem jednostki samorządu terytorialnego w serwisie internetowym www.esiop.legionowo.pl Rejestracja w serwisie: Aby utworzyć konto w serwisie, należy otworzyć w przeglądarce internetowej

Bardziej szczegółowo

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji uzyskujemy widok: a. Wstawianie tekstów Tekst możemy wpisywać bezpośrednio w panelu lub wklejać do edytora. Jeśli wklejamy tekst

Bardziej szczegółowo

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt. Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym

Bardziej szczegółowo

29. Poprawność składniowa i strukturalna dokumentu XML

29. Poprawność składniowa i strukturalna dokumentu XML 29. i strukturalna dokumentu XML 13 października 2015 1 2 Poprawny składniowo dokument XML powinien być tworzony zgodnie z poniżej przedstawionymi zasadami. Deklaracja XML Powinien zawierać deklarację

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

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37 Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników

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

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

Tworzenie i edycja dokumentów w aplikacji Word.

Tworzenie i edycja dokumentów w aplikacji Word. Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy

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