Jacek Wiślicki Systemy Multimedialne, wykład 0

Transkrypt

1 Spis treści 1. Co to jest HTML? Struktura strony i znaczniki Podstawowe elementy Nagłówki Akapity Komentarze Listy Listy numerowane Listy wypunktowane Lista definicyjna Znacznik <A> Połączenia zewnętrzne Połączenia wewnętrzne (kotwice): Czcionki Czcionka bazowa Style znaków Style logiczne Style fizyczne Położenie na stronie Wyrównanie Środkowanie elementów Wycinek dokumentu Linie poziome Łamanie linii Blokada przełamania Pisanie w szpaltach (Netscape) Wolna przestrzeń (Netscape) Animacja Znaki specjalne Przeformatowanie Obrazy Połączenia Mapa odsyłaczy Definiowanie tabeli Ogólne zasady tworzenia tabeli Kolumny i grupy kolumn Rozpinanie komórek na kilku wierszach lub kolumnach Ramki Pływające ramki Style Style dołączane (linked styles) Style zagnieżdżone (embedded styles) Style lokalne (inline styles) Definicja stylu Zestawienie stylów..11 strona 1 z 12

2 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 >  <HTML> <HEAD> <META HTTP-EQUIV= Refresh CONTENT= x >  <META HTTP-EQUIV= Refresh CONTENT= x; URL= /strona.html > <META HTTP-EQUIV= content-type CONTENT= text/html; charset=iso > <META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec :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>  <BASE HREF= strona 2 z 12

3  <LINK>  </HEAD> <BODY>  </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.  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 Listy 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

4 "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 Listy wypunktowane <UL> <LI> Element numer 1 <LI> Element numer 2 </UL> TYPE = "disc" "square" "circle" kropka kwadrat kółko puste w środku 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 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=" 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> Połączenia wewnętrzne (kotwice): <A NAME= tytul > </A> strona 4 z 12

5 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 #: FACE = "Arial, Helvetica COLOR = "#FF0000 "red" 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 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) 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 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> Środkowanie elementów <CENTER> strona 5 z 12

6 </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 Ł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; Blokada przełamania. Podczas wyświetlania tekstu. <NOBR> </NOBR> 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; 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) 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

7 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 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 ) < < > > & & sztywna spacja (non-breaking space) 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> 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 > 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> 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

8 POLYGON 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 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

9 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>) Kolumny i grupy kolumn. <TABLE FRAME= VOID RULES= GROUPS > <COLGROUP SPAN= 1 ALIGN= LEFT > <COLGROUP SPAN= 4 ALIGN= CENTER > 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 Fizyka <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

10 <TD>3</TD> <TD>4</TD> </TABLE> 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 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) Style 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

11 { 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 = TYPE = text/css > </HEAD> Style zagnieżdżone (embedded styles) 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 Definicja stylu H1.BardzoWazneInfo { font-size: 20pt; color: red } H1.MaloWazneInfo { font-size: 15pt; color: green } Stosowanie: <H1 CLASS = BardzoWazneInfo > Treść </H1> 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

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