Co to jest HTML

Transkrypt

Co to jest HTML

Jacek Wiślicki
Systemy Multimedialne, wykład 0
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. Czcionki.................................................................................................................................... 5
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 stronie.................................................................................................................. 5
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 linii........................................................................................................................... 6
3.10.1. Blokada przełamania....................................................................................................... 6
3.11. Pisanie w szpaltach (Netscape)...............................................................................................6
3.12. Wolna przestrzeń (Netscape).................................................................................................. 6
3.13. Animacja................................................................................................................................. 6
3.14. Znaki specjalne....................................................................................................................... 7
3.15. Przeformatowanie................................................................................................................... 7
3.16. Obrazy.....................................................................................................................................7
3.16.1. Połączenia....................................................................................................................... 7
3.16.2. Mapa odsyłaczy...............................................................................................................7
3.17. Definiowanie tabeli.................................................................................................................8
3.17.1. Ogólne zasady tworzenia tabeli.......................................................................................8
3.17.2. Kolumny i grupy kolumn................................................................................................ 9
3.17.3. Rozpinanie komórek na kilku wierszach lub kolumnach............................................... 9
3.18. Ramki....................................................................................................................................10
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
Jacek Wiślicki
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=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="[email protected] (Dave Raggett)">
<META NAME="generator" CONTENT="WebEdit">
<TITLE>TYTUŁ STRONY</TITLE>

<BASE HREF=http://www.firma.com/dokument.html>
strona 2 z 12
Jacek Wiślicki

<LINK>

</HEAD>
<BODY>

</BODY>
</HTML>
Zawartość okna przeglądarki rozpoczyna znacznik:
<BODY>
Atrybuty:
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
Atrybuty:
ALIGN =
„CENTER” | „LEFT” | „RIGHT”
3.2. Akapity
Wprowadzanie akapitów:
<P> treść akapitu </P>
Atrybuty:
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 --.
3.3. Listy
3.3.1. Listy numerowane
<OL>
<LI> Element numer 1
...
</OL>
Atrybuty:
TYPE = "1"
"a"
liczby arabskie (1,2 itd.)
małe litery alfabetu (a,b itd.)
strona 3 z 12
Jacek Wiślicki
"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>
...
</UL>
Atrybuty:
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>
<DD>
<DT>
<DD>
</DL>
pierwszy termin
wyjaśnienie terminu jeden
drugi termin
wyjaśnienie terminu dwa
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>
Atrybuty:
NAME
REL
REV
TARGET
TITLE
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.
Używany do połączeń pomiędzy oknami dokumentu używającego ramek.
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:[email protected]/kat/">FTP</A>
Mailto:
<A HREF="mailto:[email protected]">Napisz</A>
3.4.2. Połączenia wewnętrzne (kotwice):
<A NAME=”tytul”> </A>
strona 4 z 12
Jacek Wiślicki
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>
Atrybuty:
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>
znacznik, który mówi, aby tekst był jakoś wyróżniony, najczęściej w
przeglądarkach jest to kursywa
<STRONG>
tekst mocno wyróżniont
<CODE>
fragment kodu programu
<KBD>
tekst wpisywany z klawiatury
<VAR>
nazwa zmiennej
<DFN>
znacznik definicji
<CITE>
krótkie cytaty
<ADDRESS>
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>
<I>
<TT>
<U>
<STRIKE>
<BIG>
<SMALL>
<SUB>
<SUP>
<BLINK>
pogrubienie
kursywa
czcionka maszynowa (stała szerokość znaku)
podkreślenie
przekreślenie
czcionka większa (+1)
czcionka mniejsza (-1)
indeks dolny
indeks górny
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
Jacek Wiślicki
</CENTER>
3.8. Wycinek dokumentu
Wydziela większy blok dokumentu, aby nadać mu jakiś rodzaj formatowania.
<DIV>
…
</DIV>
3.9. Linie poziome
<HR>
Atrybuty:
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>
Atrybuty:
CLEAR = “ALL”
“LEFT”
“RIGHT”
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>
Atrybuty:
COLS =
“x”
GUTTER = “x”
WIDTH = “x”
ilość kolumn;
odstęp pomiędzy szpaltami;
w pikselach lub procentach określa ilość miejsca jakie zajmują
szpalty;
3.12. Wolna przestrzeń (Netscape)
<SPACER>
Atrybuty:
TYPE =
TYPE =
ALIGN =
SIZE =
WIDTH =
HEIGHT =
“HORIZONTAL” | “VERTICAL”
“BLOCK”
“LEFT” | “RIGHT” | “CENTER”
“x”
wielkość w pikselach (dla wersji poziomej i pionowej)
“x”
szerokość w pikselach (dla bloku)
“x”
wysokość w pikselach (dla bloku)
3.13. Animacja
<MARQUEE>
Atrybuty:
BEHAVIOR =
“SCROLL”
“SLIDE”
“ALTERNATE”
BGCOLOR =
“red”
DIRECTION = “LEFT” | “RIGHT”
HEIGHT =
“x pikseli”
ciągłe przesuwanie tekstu
przesuwanie tekstu aż do momentu dotarcia do brzegu
po dotarciu napisu do brzegu, odbija się od niego
kolor tła;
rozmiar drogi, po której porusza się napis
strona 6 z 12
Jacek Wiślicki
WIDTH =
LOOP =
HSPACE =
VSPACE =
SCROLLAMOUNT =
SCROLLDELAY =
ALIGN =
“x pikseli”
rozmiar drogi, po której porusza się napis;
“x”
ile razy ma powtórzyć się ruch napisu;
“x”
odległość od sąsiadujących elementów (w poziomie);
“x”
odległość od sąsiadujących elementów (w pionie);
“x”
skok tekstu w pikselach;
“x”
odstęp czasowy pomiędzy skokami (ms);
“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">
Atrybuty:
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>
Atrybuty:
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
Jacek Wiślicki
“POLYGON”
dowolny kształt (podajmy po kolei współrzędne rogów tego kształtu).
3.17. Definiowanie tabeli
Znacznik tworzenia tabeli.
<TABLE>
Atrybuty:
BORDER =
BACKGROUND =
BORDERCOLOR =
CELLSPACING =
CELLPADDING =
FRAME =
RULES =
“x”
“plik”;
“kolor”
“x pikseli”
“x pikseli”
“VOID”
“ABOVE”
“BELOW”
“VSIDES”
“HSIDES”
“LHS”
“RHS”
“BOX”
“NONE”
“GROUPS”
“ROWS”
“COLS”
“ALL”
szerokość obramowania tabeli
grafika umieszczona w tle
kolor obramowani tabeli
szerokość odstępu pomiędzy komórkami
odstępy pomiędzy krawędziami komórki a jej zawartością
brak zewnętrznego obramowania
tylko górna krawędź obramowania
tylko dolna krawędź obramowania
lewa i prawa krawędź obramowania
górna i dolna krawędź obramowania
lewa krawędź obramowania
prawa krawędź obramowania
wszystkie krawędzie obramowania
brak linii wewnętrznych
linie dzielące nagłówki, stopki, itp.
tylko linie poziome
tylko pionowe linie
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>
...
</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>
</TR>
<TR>
<TD>Dana1</TD>
<TD>Dana2</TD>
<TD>Dana3</TD>
</TR>
</TABLE>
TABELA
Nagłówek1 Nagłówek2 Nagłówek3
Dana1
Dana2
strona 8 z 12
Dana3
Jacek Wiślicki
Dodatkowe atrybuty:
BORDERCOLORDARK
BORDERCOLORLIGHT
BGCOLOR
cienie obramowania tabeli (dla <TABLE>, <TR>, <TD>)
cienie obramowania tabeli (dla <TABLE>, <TR>, <TD>)
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ęć
Matematyka
Fizyka
Dni tygodnia
Poniedziałek Wtorek
1
0
1
2
<TABLE BORDER=“1“>
<TR>
<TH ROWSPAN="2" COLSPAN="2"><BR></TH>
<TH COLSPAN="5">Dni tygodnia</TH>
</TR>
<TR>
<TH>Poniedziałek</TH>
<TH>Wtorek</TH>
<TH>Środa</TH>
<TH>Czwartek</TH>
<TH>Piątek</TH>
</TR>
<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>
<TR ALIGN="CENTER">
<TH>Fizyka</TH>
<TD>1</TD>
<TD>2</TD>
<TD>0</TD>
strona 9 z 12
Środa
2
0
Czwartek
1
3
Piątek
3
4
Jacek Wiślicki
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
3.18. Ramki
<FRAMESET>
Atrybuty
COLS = “x, y”
x, y – piksele, procenty lub * - w celu określenia rozmiaru
ramek
np. COLS = „18%, 82%”
COLS = „200, *, 200”
ROWS = “x, y”
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>.
Atrybuty:
SRC =
SCROLLING =
NAME =
NORESIZE
“spis.html”
“YES”
“NO”
“AUTO”
“nazwa”
nazwa pliku, który zostanie załadowany do ramki;
przewijanie zawartości ramki
nazwa ramki.
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”
do nowego okna przeglądarki
operacja domyślna
zastąpi nadrzędny dokument dla bieżącego
zastąpi pierwszy dokument w historii skoków
3.19. Pływające ramki
<IFRAME>
Atrybuty
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
Jacek Wiślicki
{
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
font-size
Ustala rozmiar czcionki.
font-family
Ustala czcionkę.
font-weight
Ustala grubość czcionki
font-style
Ustala styl czcionki.
line-height
Ustala odstępy między
wierszami.
color
Ustala barwę tekstu.
Dopuszczalne wartości
punkty (pt)
cale (in)
centymetry (cm)
piksele (px)
nazwa czcionki
nazwa rodziny czcionek
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
normal
italic
punkty (pt)
cale (in)
centymetry (cm)
piksele (px)
procent (%)
color-name
RGB triplet
strona 11 z 12
Przykład składni polecenia
{font-size: 12pt}
{font-family: courier}
{font-weight: bold}
{font-style: italic}
{line-height: 24pt}
{color: blue}
Jacek Wiślicki
textdecoration
Podkreśla lub w inny sposób
uwypukla tekst.
margin-left
Ustala odstęp od lewego brzegu
strony.
margin-right
Ustala odstęp od prawego
brzegu strony.
text-align
Ustala justowanie tekstu.
text-indent
Ustala wcięcie tekstu od lewego
marginesu strony.
background
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
strona 12 z 12
{text-decoration:
underline}
{margin-left: 1in}
{margin-right 1in}
{text-align: right}
{text-indent: 0.5in}
{background: #33CC00}

Co to jest HTML

Transkrypt

Podobne dokumenty

Wykorzystanie stylów w edytorze tekstu

HTML> ODSYŁACZE </HEAD

HTML w pigułce

Golf24.pl

HTML - sosw.poznan.pl

Robert Kubica DRUGI w Monte Carlo - Polak w Northampton

Zestawienie wymaganych parametrów technicznych urządzeń