Jacek Wiślicki Systemy Multimedialne, wykład 0

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

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

Programowanie WEB PODSTAWY HTML

HTML (HyperText Markup Language)

Tworzenie stron internetowych w kodzie HTML Cz 5

Podstawowe znaczniki języka HTML.

HTML podstawowe polecenia

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

Wprowadzenie do języka HTML

przygotował: mgr Szymon Szewczyk PODSTAWY

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

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

HTML cd. Ramki, tabelki

Hyper Text Markup Language

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Odsyłacze. Style nagłówkowe

Język HTML i podstawy CSS

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

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

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

Tworzenie stron internetowych w oparciu o język HTML

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

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW

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

Tabela z komórkami nagłówkowymi (wyróżnionymi)

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

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

Wybrane znaczniki HTML

Znaczniki języka HTML

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

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:

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)

I. Wstawianie rysunków

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

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

I. Formatowanie tekstu i wygląd strony

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Tutorial. HTML Rozdział: Ramki

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

p { color: yellow; font-weight:bold; }

CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między

Atrybuty znaczników HTML

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

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

Tworzenie stron internetowych RAMKI

Dokument hipertekstowy

Strony WWW - podstawy języka HTML

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

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

Moduł IV Internet Tworzenie stron www

Podstawy HTML. Tworzenie stron internetowych. Tomasz Piłka. Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro

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.

za pomocą: definiujemy:

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

Czcionki. Rodzina czcionki [font-family]


Podstawy (X)HTML i CSS

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

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

Edukacja na odległość

Kaskadowe arkusze stylów (CSS)

Krok 1: Stylizowanie plakatu

Podstawy języka HTML (HyperText Markup Language)

Kaskadowe arkusze stylów cz. 2

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

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

Witryny i aplikacje internetowe

Projektowanie aplikacji internetowych. CSS w akcji

CSS. Kaskadowe Arkusze Stylów

STRONY INTERNETOWE mgr inż. Adrian Zapała

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

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

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Ćwiczenie 2 Tekst podstawowe znaczniki.

Tworzenie stron internetowych w kodzie HTML Cz 7

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

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.

Elementarz HTML i CSS

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Tekst humanistyczny. Tekst naukowy na stronie www

CSS - 2. Właściwości tekstu, czcionek

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

Blok dokumentu. <div> </div>

Podstawy. w HTML u HTML??? tworzenia stron internetowych. dla wszystkich. nie wiem co to jest, ale na pewno nie jest trudne.

Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML

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

TECHNOLOGIE SIECI WEB

Architektura WWW. HTML Część I - Podstawy. HTML język tworzenia stron WWW. Znaczniki HTML. Struktura dokumentu HTML. Kodowanie polskich liter

Deklarowanie tytułu związanej z tabelą

9. TABELE KURS HTML.

Laboratorium 1: Szablon strony w HTML5

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

Kurs HTML 4.01 TI 312[01]

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Transkrypt:

Spis treści 1. Co to jest HTML?..2 2. Struktura strony i znaczniki..2 3. Podstawowe elementy. 3 3.1. Nagłówki..3 3.2. Akapity..3 3.3. Komentarze.3 3.3. Listy 3 3.3.1. Listy numerowane. 3 3.3.2. Listy wypunktowane 4 3.3.3. Lista definicyjna.4 3.4. Znacznik <A> 4 3.4.1. Połączenia zewnętrzne 4 3.4.2. Połączenia wewnętrzne (kotwice):4 3.5. Czcionki5 3.5.1. Czcionka bazowa.. 5 3.6. Style znaków..5 3.6.1. Style logiczne.. 5 3.6.2. Style fizyczne.. 5 3.7. Położenie na stronie5 3.7.1. Wyrównanie. 5 3.7.2. Środkowanie elementów 5 3.8. Wycinek dokumentu.. 6 3.9. Linie poziome 6 3.10. Łamanie linii6 3.10.1. Blokada przełamania.6 3.11. Pisanie w szpaltach (Netscape)..6 3.12. Wolna przestrzeń (Netscape).. 6 3.13. Animacja6 3.14. Znaki specjalne.. 7 3.15. Przeformatowanie. 7 3.16. Obrazy.7 3.16.1. Połączenia.. 7 3.16.2. Mapa odsyłaczy7 3.17. Definiowanie tabeli..8 3.17.1. Ogólne zasady tworzenia tabeli8 3.17.2. Kolumny i grupy kolumn 9 3.17.3. Rozpinanie komórek na kilku wierszach lub kolumnach.. 9 3.18. Ramki10 3.19. Pływające ramki..10 3.20. Style.. 10 3.20.1. Style dołączane (linked styles)..10 3.20.2. Style zagnieżdżone (embedded styles)..11 3.20.3. Style lokalne (inline styles). 11 3.20.4. Definicja stylu 11 3.20.5. Zestawienie stylów..11 strona 1 z 12

1. Co to jest HTML? HTML to skrót od angielskiego Hyper Text Markup Language. HTML jest językiem opisu strony, a nie wyglądu poszczególnych jej elementów. W HTML'u zdefiniowany jest pewien określony zestaw stylów, używanych na stronach WWW: nagłówki, akapity, listy i tabele. Dodatkowo zostały zdefiniowane również pewne elementy formatowania znaków, jak np. pogrubienie. Każdy taki element posiada swoją nazwę i występuje w formie czegoś, co zostało nazwane znacznikiem lub tagiem. Znacznik HTML wskazuje, że dany element jest nagłówkiem bądź listą, ale nie określa jak nagłówek ma być sformatowany. Autor musi się tylko martwić, który fragment ma być nagłówkiem. Przeglądarka WWW, oprócz pobierania strony z sieci, wykonuje całą pracę związaną z formatowaniem tekstu HTML. Przeglądarka po pobraniu pliku odczytuje znaczniki, a następnie formatuje tekst i elementy graficzne oraz wyświetla je na ekranie. Plik HTML zawiera następujące elementy: właściwy tekst strony, znaczniki HTML, określające elementy strony, jej strukturę, sposoby formatowania i hiperpołączenia do innych stron lub informacje innego rodzaju. Większość znaczników wygląda tak: <NazwaZnacznika> tekst </NazwaZnacznika> Nazwa znacznika ujęta jest w nawiasy kątowe. Każdy znacznik składa się zasadniczo z dwóch części: znacznika początkowego i końcowego (który poprzedzony jest ukośnikiem '/'). Znacznik początkowy włącza pewien sposób formatowania, a końcowy go wyłącza. Nie wszystkie znaczniki mają swój początek i koniec. Znaczniki nie są zależne od wielkości liter. Jednak większość autorów pisze znaczniki dużymi literami, gdyż łatwiej je wychwycić w tekście. Do rozpoczęcia pisania kodu HTML, nie są potrzebne żadne wyszukane narzędzia. Wystarczy edytor tekstu i przeglądarka, aby móc sprawdzić wyniki pracy. W trakcie przetwarzania strony przez przeglądarkę wszelkie próby formatowania dokonane ręcznie, to znaczy dodatkowe spacje, znaki tabulacji, są ignorowane. Jedyną rzeczą wpływającą na formatowanie strony są znaczniki HTML. 2. Struktura strony i znaczniki W HTMLu zdefiniowane są trzy znaczniki, które opisują strukturę strony oraz dostarczają podstawowych informacji nagłówkowych. Stanowią one dla przeglądarek coś w rodzaju identyfikatora strony. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > <!-- Poziom używanego języka HTML.--> <HTML> <HEAD> <META HTTP-EQUIV= Refresh CONTENT= x > <!-- Odświeżanie strony co x sekund --> <META HTTP-EQUIV= Refresh CONTENT= x; URL=http:// /strona.html > <META HTTP-EQUIV= content-type CONTENT= text/html; charset=iso-8859-2 > <META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> <META NAME="Keywords" CONTENT="Nanotechnology, Biochemistry"> <META NAME="Author" CONTENT="Microsoft Corporation"> <META NAME ="Description" CONTENT="Microsoft Information, Product Support"> <META HTTP-EQUIV="Reply-to" CONTENT="dsr@w3.org (Dave Raggett)"> <META NAME="generator" CONTENT="WebEdit"> <TITLE>TYTUŁ STRONY</TITLE> <!-- Tytuł strony wyświetlany na pasku okna programu --> <BASE HREF=http://www.firma.com/dokument.html> strona 2 z 12

<!-- Bazowy adres ułatwiający stosowanie odsyłaczy relatywnych. --> <LINK> <!-- Określa hierarchiczny porządek w zespole dokumentów. --> </HEAD> <BODY> <!-- Treść strony --> </BODY> </HTML> Zawartość okna przeglądarki rozpoczyna znacznik: <BODY> BACKGROUND = nazwa pliku BGCOLOR = kolor tła TEXT = kolor tekstu LINK = kolor linków VLINK = kolor odwiedzonych linków ALINK = kolor linków, na których naciśnięto przycisk myszy (ale strona się jeszcze nie załadowała) LEFTMARGIN = x pikseli lewy margines TOPMARGIN = x pikseli margines górny MARGINWIDTH = x pikseli MARGINHEIGHT = x pikseli 3. Podstawowe elementy 3.1. Nagłówki. Nagłówki służą do podziału tekstu na części. <H#> nagłówek </H#> gdzie # to cyfra od 1 do 6 ALIGN = CENTER LEFT RIGHT 3.2. Akapity Wprowadzanie akapitów: <P> treść akapitu </P> ALIGN = CENTER LEFT RIGHT 3.3. Komentarze Tekst pomiędzy znacznikami komentarza jest ignorowany przez przeglądarkę i nie jest wyświetlany na ekranie. <!-- tekst komentarza --> Uwaga: Nie powinno się wstawiać w komentarz innych znaczników HTML ponieważ może to być mylnie zinterpretowane przez przeglądarkę. Można przyjąć zasadę, aby nie używać w komentarzach znaków <,> i --. 3.3. Listy 3.3.1. Listy numerowane <OL> <LI> Element numer 1 <LI> Element numer 2 </OL> TYPE = "1" "a" liczby arabskie (1,2 itd.) małe litery alfabetu (a,b itd.) strona 3 z 12

"A" "i" "I" START = "3" wielkie litery alfabetu (A,B itd.) liczby rzymskie zapisane małymi literami (i, ii, idt.) liczby rzymskie zapisane dużymi literami (I, II, itd.) rozpoczęcie numerowania od podanej pozycji. 3.3.2. Listy wypunktowane <UL> <LI> Element numer 1 <LI> Element numer 2 </UL> TYPE = "disc" "square" "circle" kropka kwadrat kółko puste w środku 3.3.3. Lista definicyjna Listy definicji oraz pokrewne grupy akapitów. <DL> <DT> pierwszy termin <DD> wyjaśnienie terminu jeden <DT> drugi termin <DD> wyjaśnienie terminu dwa </DL> 3.4. Znacznik <A> Do tworzenia hiperpołączeń na stronach HTML służy znacznik <A></A>. W tym celu potrzebne są następujące informacje: nazwa pliku, do którego będzie połączenie, tekst, który będzie wyróżniony przez przeglądarkę i po wybraniu, którego nastąpi realizacja połączenia. Najprostsze użycie: <A HREF="podstawy.html"> Podstawy HTMLa </A> NAME REL REV Używany do połączeń kierowanych do określonego miejsca w dokumencie. Podaje relację opisaną przez hipertekstowe połączenie, prowadzące do zakotwiczenia do celu. Różni się od atrybutu REL tylko odwrotnym porządkiem typów połączenia. TARGET Używany do połączeń pomiędzy oknami dokumentu używającego ramek. TITLE Ma charakter informacyjny. 3.4.1. Połączenia zewnętrzne Strony lokalne połączone określa się przy użyciu ścieżek względnych i bezwzględnych. Połączenia odległe określa się za pomocą URL a: HTTP: <A HREF="http://www.kis.p.lodz.pl/strona2.html">KIS</A> FTP anonymous: <A HREF="ftp://ftp.serwer.com./kat/">FTP</A> FTP: <A HREF= ftp://nazwa:haslo@ftp.server.com/kat/">ftp</a> Mailto: <A HREF="mailto:jacenty@kis.p.lodz.pl">Napisz</A> 3.4.2. Połączenia wewnętrzne (kotwice): <A NAME= tytul > </A> strona 4 z 12

Wywołanie: Idź do <A HREF= #tytul > tytułu strony </A> 3.5. Czcionki Do formatowania fragmentów tekstu i kontroli nad wyglądem i rozmiarem służy znacznik: <FONT></FONT> SIZE = # gdzie #: 1-7 +1 FACE = "Arial, Helvetica COLOR = "#FF0000 "red" 3.5.1. Czcionka bazowa Do niej odnoszą się czcionki względne: SIZE = +x, <BIG>, <SMALL>. <BASEFONT SIZE = rozmiar_czcionki > 3.6. Style znaków Style znaków to znaczniki służące do zmiany wyglądu pojedynczych wyrazów, znaków czy zdań. Style dzielą się na logiczne i fizyczne. 3.6.1. Style logiczne Style logiczne określają rolę tekstu w dokumencie (wygląd związany z jej zastosowaniem, przeznaczeniem) <EM> <STRONG> <CODE> <KBD> <VAR> <DFN> <CITE> <ADDRESS> znacznik, który mówi, aby tekst był jakoś wyróżniony, najczęściej w przeglądarkach jest to kursywa tekst mocno wyróżniont fragment kodu programu tekst wpisywany z klawiatury nazwa zmiennej znacznik definicji krótkie cytaty adres (zastosowana zostanie kursywa) <BLOCKQUOTE> blok cytowany (uzyskujemy między innymi wcięcie tekstu) 3.6.2. Style fizyczne Style fizyczne pozwalają na ściśle określoną zmianę tekstu. Znaczniki fizyczne mogą być w sobie zagnieżdżane. <B> pogrubienie <I> kursywa <TT> czcionka maszynowa (stała szerokość znaku) <U> podkreślenie <STRIKE> przekreślenie <BIG> czcionka większa (+1) <SMALL> czcionka mniejsza (-1) <SUB> indeks dolny <SUP> indeks górny <BLINK> tekst migający (Netscape) 3.7. Położenie na stronie 3.7.1. Wyrównanie Atrybut ALIGN np.: <H4 ALIGN="CENTER"> Nagłówek wycentrowały </H4> <H4 ALIGN="RIGHT"> Wyrównanie do prawej </H4> <H4 ALIGN="LEFT"> Wyrównanie do lewej </H4> 3.7.2. Środkowanie elementów <CENTER> strona 5 z 12

</CENTER> 3.8. Wycinek dokumentu Wydziela większy blok dokumentu, aby nadać mu jakiś rodzaj formatowania. <DIV> </DIV> 3.9. Linie poziome <HR> NOSHADE brak cieniowania SIZE = 5 grubość linii WIDTH = 300 długość linii w pikselach lub procentach 50% ALIGN = CENTER wyrównanie linii względem marginesów LEFT RIGHT COLOR = yellow kolor linii 3.10. Łamanie linii <BR> CLEAR = ALL LEFT RIGHT przenoszenie grafiki, tekstu i tabel poniżej dane obiektu; przenoszenie grafiki, tekstu i tabel poniżej dane obiektu; przenoszenie grafiki, tekstu i tabel poniżej dane obiektu; 3.10.1. Blokada przełamania. Podczas wyświetlania tekstu. <NOBR> </NOBR> 3.11. Pisanie w szpaltach (Netscape) <MULTICOL> COLS = x ilość kolumn; GUTTER = x odstęp pomiędzy szpaltami; WIDTH = x w pikselach lub procentach określa ilość miejsca jakie zajmują szpalty; 3.12. Wolna przestrzeń (Netscape) <SPACER> TYPE = HORIZONTAL VERTICAL TYPE = BLOCK ALIGN = LEFT RIGHT CENTER SIZE = x wielkość w pikselach (dla wersji poziomej i pionowej) WIDTH = x szerokość w pikselach (dla bloku) HEIGHT = x wysokość w pikselach (dla bloku) 3.13. Animacja <MARQUEE> BEHAVIOR = SCROLL ciągłe przesuwanie tekstu SLIDE przesuwanie tekstu aż do momentu dotarcia do brzegu ALTERNATE po dotarciu napisu do brzegu, odbija się od niego BGCOLOR = red kolor tła; DIRECTION = LEFT RIGHT HEIGHT = x pikseli rozmiar drogi, po której porusza się napis strona 6 z 12

WIDTH = x pikseli rozmiar drogi, po której porusza się napis; LOOP = x ile razy ma powtórzyć się ruch napisu; HSPACE = x odległość od sąsiadujących elementów (w poziomie); VSPACE = x odległość od sąsiadujących elementów (w pionie); SCROLLAMOUNT = x skok tekstu w pikselach; SCROLLDELAY = x odstęp czasowy pomiędzy skokami (ms); ALIGN = TOP MIDDLE BOTTOM 3.14. Znaki specjalne Kody znaków rozpoczynają się znakiem & a kończą średnikiem (;). Pomiędzy tymi znakami znajduje się skrócona nazwa znaku np.: " cudzysłów " znak towarowy prawa autorskie znak prawa autorskie (liczba odpowiadająca numerowi znaku w zbiorze ISO-8859-1) < < > > & & sztywna spacja (non-breaking space) 3.15. Przeformatowanie Każda spacja pomiędzy tymi znacznikami zostanie wyświetlona za pomocą tego znacznika. Można formatować tekst w dowolny sposób i w takiej postaci zostanie on wyświetlony przez przeglądarkę. <PRE> </PRE> 3.16. Obrazy Wstawienie obrazu na stronie. <IMG SRC="../grafika/obraz1.gif"> ALIGN = "TOP" "MIDDLE" "BOTTOM" "LEFT" "RIGHT" VSPACE = "x pikseli" HSPACE = "x pikseli" ALT = "tekst" WIDTH = "x pikseli" HEIGHT = "x pikseli" BORDER = "x pikseli" wyrównuje górną krawędź obrazu względem górnej krawędzi linii. wyrównuje środek obrazu do środka linii. wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii. obraz po lewej stronie, otoczony tekstem; obraz po prawej stronie, otoczony tekstem; wolna przestrzeń od górnej i dolnej krawędzi obrazu. wolna przestrzeń od lewej i prawej krawędzi obrazu. "chmurka" z napisem po najechaniu wskaźnika myszy nad obrazek. szerokość obrazu podana w pikselach. wysokość obrazu podana w pikselach. grubość ramki wokół obrazu. Rozpoczęcie nowego akapitu pod obrazem i przerwanie funkcji otaczania obrazu przez tekst: <BR CLEAR= ALL > 3.16.1. Połączenia Obraz może być również połączeniem np.: <A HREF="spis.html"> <IMG SRC="../grafika/back.gif" ALIGN="MIDDLE"> Spis treści </A> 3.16.2. Mapa odsyłaczy <IMG SRC = odsylacze.gif USEMAP = #mapa1 > <MAP NAME = mapa1 > <AREA SHAPE = RECT CORDS = 1, 1, 50, 50 HREF = 1.html > <AREA SHAPE = RECT CORDS = 51, 1, 100, 50 HREF = 2.html > </MAP> SHAPE = RECT CIRCLE prostokąt (podajemy współrzędne rogów lewy-górny oraz prawy-dolny) koło (podajemy środek koła oraz promień) strona 7 z 12

POLYGON 3.17. Definiowanie tabeli Znacznik tworzenia tabeli. <TABLE> dowolny kształt (podajmy po kolei współrzędne rogów tego kształtu). BORDER = x szerokość obramowania tabeli BACKGROUND = plik ; grafika umieszczona w tle BORDERCOLOR = kolor kolor obramowani tabeli CELLSPACING = x pikseli szerokość odstępu pomiędzy komórkami CELLPADDING = x pikseli odstępy pomiędzy krawędziami komórki a jej zawartością FRAME = VOID brak zewnętrznego obramowania ABOVE tylko górna krawędź obramowania BELOW tylko dolna krawędź obramowania VSIDES lewa i prawa krawędź obramowania HSIDES górna i dolna krawędź obramowania LHS lewa krawędź obramowania RHS prawa krawędź obramowania BOX wszystkie krawędzie obramowania RULES = NONE brak linii wewnętrznych GROUPS linie dzielące nagłówki, stopki, itp. ROWS tylko linie poziome COLS tylko pionowe linie ALL wszystkie 3.17.1. Ogólne zasady tworzenia tabeli. Pomiędzy znacznikiem tabeli umieszczana jest jej zawartość wiersz po wierszu. Każdy wiersz musi zawierać definicję wszystkich komórek w nim zawartych. Kolumny obliczane są automatycznie w oparciu o liczbę komórek w danym wierszu. Wiersz jest tworzony za pomocą znaczników: <TR> W obrębie tych znaczników definiujemy komórki nagłówkowe (wyróżnione grubszą czcionką): <TH> </TH> lub komórki danych: <TD> </TD> Przykład: <TABLE BORDER= 1 > <CAPTION>TABELA</CAPTION> <TR> <TH>Nagłówek1</TH> <TH>Nagłówek2</TH> <TH>Nagłówek3</TH> <TR> <TD>Dana1</TD> <TD>Dana2</TD> <TD>Dana3</TD> </TABLE> TABELA Nagłówek1 Nagłówek2 Nagłówek3 Dana1 Dana2 Dana3 strona 8 z 12

Dodatkowe atrybuty: BORDERCOLORDARK cienie obramowania tabeli (dla <TABLE>, <TR>, <TD>) BORDERCOLORLIGHT cienie obramowania tabeli (dla <TABLE>, <TR>, <TD>) BGCOLOR Kolor tła całej tabeli lub pojedynczej komórki (dla <TABLE>, <TD> ALIGN pozwala wyrównać w poziomie całą tabelę, wiersz, czy też pojedynczą komórkę (dla <TABLE>, <TR>, <TD>) LEFT CENTER RIGHT VALIGN umożliwia wyrównanie komórki w pionie (dla <TR>, <TD>) TOP wyrównanie do górnego marginesu MIDDLE wycentrowanie BOTTOM wyrównanie do dolnego marginesu WIDTH szerokość tabeli lub komórki w pikselach lub procentach (dla <TABLE>, <TD>) HEIGHT wysokość tabeli lub komórki w pikselach lub procentach (dla <TABLE>, <TR>, <TD>) 3.17.2. Kolumny i grupy kolumn. <TABLE FRAME= VOID RULES= GROUPS > <COLGROUP SPAN= 1 ALIGN= LEFT > <COLGROUP SPAN= 4 ALIGN= CENTER > 3.17.3. Rozpinanie komórek na kilku wierszach lub kolumnach. Atrybuty ROWSPAN COLSPAN Atrybuty te dodajemy do znaczników <TH> lub <TD> i przypisujemy im wartości określające liczbę wierszy lub kolumn, które mają być spięte. Przykład: Liczba zajęć Dni tygodnia Poniedziałek Wtorek Środa Czwartek Piątek Matematyka 1 0 2 1 3 Fizyka 1 2 0 3 4 <TABLE BORDER= 1 > <TR> <TH ROWSPAN="2" COLSPAN="2"><BR></TH> <TH COLSPAN="5">Dni tygodnia</th> <TR> <TH>Poniedziałek</TH> <TH>Wtorek</TH> <TH>Środa</TH> <TH>Czwartek</TH> <TH>Piątek</TH> <TR ALIGN="CENTER"> <TH ROWSPAN="2">Liczba zajęć</th> <TH>Matematyka</TH> <TD>1</TD> <TD>0</TD> <TD>2</TD> <TD>1</TD> <TD>3</TD> <TR ALIGN="CENTER"> <TH>Fizyka</TH> <TD>1</TD> <TD>2</TD> <TD>0</TD> strona 9 z 12

<TD>3</TD> <TD>4</TD> </TABLE> 3.18. Ramki <FRAMESET> Atrybuty COLS = x, y ROWS = x, y x, y piksele, procenty lub * - w celu określenia rozmiaru ramek np. COLS = 18%, 82% COLS = 200, *, 200 j.w. FRAMESPACING = x pikseli szerokość ramki FRAMEBORDER= 0 brak obramowania pomiędzy ramkami Element <FRAME> powtarzamy jest tyle razy ile jest zdefiniowanych ramek w znaczniku <FRAMESET>. SRC = spis.html nazwa pliku, który zostanie załadowany do ramki; SCROLLING = YES przewijanie zawartości ramki NO AUTO NAME = nazwa nazwa ramki. NORESIZE nie można skalować ramki. Ładownie dokumentów HTML do odpowiednich ramek. <A HREF = wyj.hml TARGET = drzwi > Wyjście </A> <A HREF = wej.hml TARGET = drzwi > Wejście </A> Atrybut TARGET = _blank _self _parent _top 3.19. Pływające ramki <IFRAME> Atrybuty do nowego okna przeglądarki operacja domyślna zastąpi nadrzędny dokument dla bieżącego zastąpi pierwszy dokument w historii skoków WIDTH = x pikseli HEIGHT = x pikseli SRC = nazwa dokumentu FRAMEBORDER = x SCROLLING = NO VSPACE = x pikseli HSPACE = x pikseli NAME = nazwa ramki (aby kierować do niej dokumenty) 3.20. Style 3.20.1. Style dołączane (linked styles) Arkusz ze stylami. <HTML> <STYLE TYPE = text/css > <!-- P { text-align: justify; font-family: Times New Roman; font-weight: normal; font-style: normal; color: #000000; } H1 strona 10 z 12

{ text-align: justify; font-family: Times New Roman; font-weight: bold; font-style: normal; color: #FF0000; } --> </STYLE> <BODY> </BODY> </HTML> Do odwołanie we właściwym dokumencie do zdefiniowanego stylu <HEAD> <LINK REL = stylesheet HREF = http://www.firma.com/style.css TYPE = text/css > </HEAD> 3.20.2. Style zagnieżdżone (embedded styles) 3.20.3. Style lokalne (inline styles) <P STYLE = font-size: 20pt; font-weight: bold > Tan akapit ma taki styl </P> Więcej niż jeden styl dla jednego typu obiektu. 3.20.4. Definicja stylu H1.BardzoWazneInfo { font-size: 20pt; color: red } H1.MaloWazneInfo { font-size: 15pt; color: green } Stosowanie: <H1 CLASS = BardzoWazneInfo > Treść </H1> 3.20.5. Zestawienie stylów Atrybut Opis Dopuszczalne wartości Przykład składni polecenia font-size punkty (pt) {font-size: 12pt} Ustala rozmiar czcionki. cale (in) centymetry (cm) piksele (px) font-family nazwa czcionki {font-family: courier} Ustala czcionkę. nazwa rodziny czcionek font-weight extra-light {font-weight: bold} Ustala grubość czcionki light demi-light medium demi-bold bold extra-bold font-style normal {font-style: italic} Ustala styl czcionki. italic line-height {line-height: 24pt} Ustala odstępy między wierszami. color Ustala barwę tekstu. punkty (pt) cale (in) centymetry (cm) piksele (px) procent (%) color-name RGB triplet {color: blue} strona 11 z 12

textdecoration margin-left Podkreśla lub w inny sposób uwypukla tekst. Ustala odstęp od lewego brzegu strony. margin-right Ustala odstęp od prawego brzegu strony. text-align text-indent background Ustala justowanie tekstu. Ustala wcięcie tekstu od lewego marginesu strony. Ustala obrazek w tle lub kolor. none underline italic line-through punkty (pt) cale (in) centymetry (cm) piksele (px) punkty (pt) cale (in) centymetry (cm) piksele (px) left center right punkty (pt) cale (in) centymetry (cm) piksele (px) URL color-name RGB triplet {text-decoration: underline} {margin-left: 1in} {margin-right 1in} {text-align: right} {text-indent: 0.5in} {background: #33CC00} strona 12 z 12