Odsyłacze. Style nagłówkowe

Transkrypt

1 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:login@domena.pl">... </A> definiowanie odsyłacza do poczty elektronicznej. <H1>tekst H1</H1> <H2>tekst H2</H2> <H3>tekst H3</H3> <H4>tekst H4</H4> <H5>tekst H5</H5> <H6>tekst H6</H6> Style nagłówkowe

2 Modyfikacja kroju pisma

3 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 pierwszy</dt> <DD> opis pierwszego elementu listy</dd> <DT>Temat drugi</dt> <DD> opis drugiego elementu listy</dd> <DT>Temat trzeci</dt> <DD> opis trzeciego elementu listy</dd> </DL> UWAGA listy można zagnieżdżać

4 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.

5 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>.

6 <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>

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

8 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"> </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"> </TD> <TD height="10" width="10"> </TD> <TD height="10" width="10"> </TD></TR> <TR><TD height="10" width="10"> </TD> <TD height="10" width="10"> </TD> <TD height="10" width="10"> </TD></TR> <TR><TD height="10" width="10"> </TD> <TD height="10" width="10"> </TD> <TD height="10" width="10"> </TD></TR> </TABLE>

9 Zadanie Napisać dokument HTML, który będzie przedstawiał następującą tabelę:

10 Przykładowe rozwiązanie <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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> </caption> <tr valign="top"> </tr> <tr valign="top"> </tr> <tr valign="top"> </tr> <tr valign="top"> </tr> <tr valign="top"> </tr> </table> </body> </html>