html (164 788 bajtów)

Transkrypt

html (164 788 bajtów)
Odsyłacze
<A HREF=URL> ... </A> — polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja
TARGET="...", która wskazuje na miejsce otwarcia wskazywanego
dokumentu, a jej parametrami mogą być:
self — otwarcie w tym samym oknie (wartość domyślna),
top — otwarcie w tym samym oknie z pominięciem struktury
ramek,
blank — otwarcie w nowym oknie przeglądarki,
parent — otwarcie w ramce nadrzędnej.
<A HREF=URL#etykieta> ... </A> — polecenie odsyłacza do dokumentu wskazywanego przez url, które zawiera lokalne odsyłacze
w dokumencie.
<A NAME=etykieta></A> — definiowanie etykiet odsyłaczy lokalnych.
<A HREF="mailto:[email protected]"> ... </A> — definiowanie
odsyłacza do poczty elektronicznej.
Style nagłówkowe
<H1>tekst
<H2>tekst
<H3>tekst
<H4>tekst
<H5>tekst
<H6>tekst
H1</H1>
H2</H2>
H3</H3>
H4</H4>
H5</H5>
H6</H6>
Modyfikacja kroju pisma
Listy
— Numerowana:
<OL>
<LI> pierwszy element listy </LI>
<LI> drugi element listy </LI>
<LI> trzeci element listy </LI>
</OL>
— Nienumerowana:
<UL>
<LI> pierwszy element listy </LI>
<LI> drugi element listy </LI>
<LI> trzeci element listy </LI>
</UL>
— Opisowa:
<DL>
<DT>Temat
<DD> opis
<DT>Temat
<DD> opis
<DT>Temat
<DD> opis
</DL>
pierwszy</DT>
pierwszego elementu listy</DD>
drugi</DT>
drugiego elementu listy</DD>
trzeci</DT>
trzeciego elementu listy</DD>
UWAGA∗ listy można zagnieżdżać
Umieszczanie grafiki
W dokumentach HTML można umieszczać grafikę w formacie *.GIF
oraz *.JPG.
<IMG SRC="obraz.jpg"> — polecenie umieszczenia grafiki rastrowej
w dokumencie HTML. Dodatkowe parametry to:
ALT="nazwa alternatywna" — umieszczenie nazwy obrazu. Nazwa ta pokazuje się w przeglądarce do momentu załadowania
obrazu, oraz po załadowaniu obrazu, w postaci dymka. Parametr ważny z punktu widzenia przeglądarek tekstowych.
width="10" — ustalenie szerokości obrazu,
height="10" — ustalenie wysokości obrazu,
border="1" — określenie szerokości ramki okalającej obraz.
Tabele w HTML
<TABLE>... </TABLE> — początek i koniec tabeli
<TR>... </TR> — początek i koniec wiersza tabeli
<TD>... </TD> — początek i koniec komórki tabeli
border="1" — parametr ustalający grubość ramek tabeli
width="100" — parametr ustalający szerokość komórki lub tabeli
height="100" — parametr ustalający wysokość komórki lub tabeli.
align="wyrównanie" — parametr ustalający wyrównanie poziome
tabeli bądź komórki. Parametr wyrównanie może przyjmować wartości:
left — wyrównanie do lewej,
right — wyrównanie do prawej,
center — wyrównanie do środka.
valign="wyrównanie" — parametr ustalający wyrównanie pionowe
tabeli bądź komórki. Parametr wyrównanie może przyjmować wartości:
top — wyrównanie do góry,
middle — wyrównanie do środka,
bottom — wyrównanie do dołu.
cellspacing="0" — odległość między komórkami (w pikselach)
cellpadding="0" — odległość pomiędzy ramką i zawartością komórki (w pikselach)
bgcolor=kolor — ustalenie koloru tła tabeli
<CAPTION>... </CAPTION> — tytuł tabeli. Umieszczany zaraz za
znacznikiem <TABLE> lub bezpośrednio przed </TABLE>.
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
<TABLE border="1">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
<TABLE border="1">
<TR><TD width="100">1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD height="50">4</TD></TR>
</TABLE>
Wyrównywanie tekstu w komórkach
align="wyrównanie" — parametr ustalający wyrównanie poziome.
Parametr wyrównanie może przyjmować wartości:
left — wyrównanie do lewej,
right — wyrównanie do prawej,
center — wyrównanie do środka.
valign="wyrównanie" — parametr ustalający wyrównanie pionowe.
Parametr wyrównanie może przyjmować wartości:
top — wyrównanie do góry,
middle — wyrównanie do środka,
bottom — wyrównanie do dołu.
<TABLE border="1">
<CAPTION>Tytuł tabeli</CAPTION>
<TR><TD align="left" width="100" height="50">left</TD>
<TD align="right" width="100" height="50">right</TD>
<TD align="right" width="100" height="50">center</TD></TR>
<TR><TD valign="top" height="50">top</TD>
<TD valign="middle" height="50">middle</TD>
<TD valign="bottom" height="50">bottom</TD></TR>
</TABLE>
Scalanie komórek
colspan="n" — parametr ustalający szerokość komórki. Parametr n
oznacza liczbę kolumn.
rowspan="n" — parametr ustalający wysokość komórki. Parametr n
oznacza liczbę wierszy.
<TABLE border="1">
<TR><TD width="20" height="20">&nbsp;</TD>
<TD align="center" colspan=3 height="20">A</TD></TR>
<TR><TD valign="middle" width="10" rowspan=3>B</TD>
<TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD></TR>
<TR><TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD></TR>
<TR><TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD>
<TD height="10" width="10">&nbsp;</TD></TR>
</TABLE>
Zadanie
Napisać dokument HTML, który będzie przedstawiał następującą
tabelę:
Przykładowe rozwiązanie
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-2">
<title>Tabela</title>
</head>
<body bgcolor="#FFFF00">
<table cellpadding="0" cellspacing="0" border="1"
width="400" align="Center" bgcolor="#FF0000">
<caption><STRONG>To jest tytuł tabeli</STRONG><BR>
&nbsp;</caption>
<tr valign="Top">
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
</tr>
<tr valign="Top">
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
</tr>
<tr valign="Top">
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
</tr>
<tr valign="Top">
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
</tr>
<tr valign="Top">
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
<td valign="Top"><br></td>
</tr>
</table>
</body>
</html>

Podobne dokumenty