Podstawy HTML. Dr inż. Arkadiusz Majewski

Transkrypt

1 Podstawy HTML Dr inż. Arkadiusz Majewski

2 Zasady tworzenia stron www 1. Informacyjna piramida Nie przeładowywać home page (pierwszej Stronicy Strony). Powinna być ona przejrzysta i prezentować ogólne i najważniejsze informacje o zawartości Strony. Najlepiej gdy szczegóły umieszczane są na dedykowanych Stronicach stanowiących logiczne odgałęzienia na Stronie (linki do innych Stronic). 2. Czytelność Korzystaj z czytelnych kształtów liter i prostych grafik. Należy pamiętać, że jakość obrazu na ekranie monitora bywa gorsza na ekranie Internauty-adresata, i na pewno jest znacznie mniejsza od wydruku na papierze. 3. Porządek przeciw Chaosowi Sieć w części jest dostępem do informacji, a w części jej odkrywaniem. Balansuj pomiędzy prostotą i łatwością, a tajemniczością i aluzjami. Troszcz się o swoją widownię i jej prawdopodobne oczekiwania. 4. Racjonalnie z technologią Korzystaj z wyrafinowanych technologii budowy Stron tylko wówczas gdy jest to konieczne. 5. Dbaj o harmonię kolorów i tła Nie stosuj efektów wypełnienia tła, które kolidują z formą przekazywanej na Stronicy treści.

3 Informacje podstawowe 1986 rok, genewski CERN powstanie języka HTML. Autor: Tim Berners-Lee. Zastosowanie: język opisu stron WWW, umożliwiający definiowanie: struktury i wyglądu stron internetowych, ich zawartości powiązań z innymi zasobami Sieci. HTML to skrót od angielskiego zwrotu Hypertext Markup Language, co znaczy - język znaczników hipertekstowych. Standaryzacją znaczników HTML zajmuje się konsorcjum W3C (World Wide Web Consortium). 3

4 Edytory HTML Kod źródłowy dokumentu HTML składa się ze zwykłego tekstu, jaki można tworzyć i modyfikować praktycznie w każdym edytorze. Dla wygody użytkowników Internetu stworzono specjalne edytory HTML. Dzielą się one na dwie kategorie: graficzne i tekstowe. Edytory graficzne: Edytory tekstowe: Microsoft FrontPage, Macromedia Dreamwaver, FrontPage Express, Netscape Composer. Macromedia HomeSite 5, HotDog Profesional 6.6, HateML 4

5 Pojęcie znacznika Tworzenie strony internetowej polega przede wszystkim na wstawianiu w odpowiednie miejsca ściśle określonych kodów ujętych w nawiasy kątowe. Kody te są zwane znacznikami, markerami lub tagami. Większość z nich to tzw. znaczniki obejmujące (parzyste), składające się ze znacznika otwierającego i zamykającego, na przykład: <H1> Instrukcja obsługi </H1> Tekst w tym obszarze zaznaczony jest jako nagłówek (header) pierwszego poziomu, czyli zostanie wyświetlony największą czcionką zdefiniowaną dla nagłówków. Istnieje sześć poziomów nagłówków w HTML-u: H1 H2 H3 H4 H5 H6 5

6 Atrybuty znaczników Niektóre znaczniki występują pojedynczo, np.: <hr> - tworzy linię poziomą, <br> - wymusza przejście do następnego wiersza, <img> - wstawia grafikę, <meta> - dostarcza informacji o dokumencie. Znaczniki można zagnieżdżać, podobnie jak nawiasy w matematyce: <B><I> fragment tekstu </I></B> Wiele znaczników może lub musi posiadać określone atrybuty, np.: <FONT SIZE="4" COLOR="red"> tekst </FONT> Atrybut COLOR może przyjmować różne wartości: aqua, brown, cyan, gold, gray, green, lime, magenta, maroon, navy, olive, orange, pink, plum, purple, red, silver, teal, tomato, violet, white, yellow. 6

7 Podstawowa struktura strony <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title> Tytuł strony </title> </head> <body>  </body> </html> 7

8 Kodowanie po polsku Standard kodowania wyznacza polska norma PN-91/T-42115, nazywana często ISO <meta http-equiv="content-type" content="text/html; charset=iso "> Druga metoda - kodowanie Windows CP 1250 (windows-1250) - jest charakterystyczna dla MS Windows. Powoduje czasem pojawienie się problemów przy wyświetlaniu znaków w innych systemach. <meta http-equiv="content-type" content="text/html; charset= windows-1250"> 8

9 Znaczniki META W nagłówku dokumentu umieszcza się zwykle informacje ważne dla przeglądarek i wyszukiwarek są to tzw. znaczniki META. <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="created" content=" "> <meta http-equiv="content-language" content="pl"> <meta name="description" content="podstawy HTML"> <meta name="author" content="mirosław Maciejczyk"> <meta name="keywords" content="html, strony WWW"> 9

10 Podstawowe znaczniki HTML jest językiem bezformatowym, w którym ignorowane są przejścia do nowego wiersza i wielokrotne spacje, zaś wymaganą strukturę dokumentu nadaje się za pomocą specjalnych znaczników. <P>...</P> (paragraph) <BR> (break) <HR> (horizontal rule line) <PRE>...</PRE> (preformatted) <UL>...</UL> (unordered list) - tworzy listę wypunktowaną. <OL>...</OL> (ordered list) - tworzy listę numerowaną. <LI>...</LI> wprowadza element listy <BLOCKQUOTE>...</BLOCKQUOTE> - cytat <DIV>...</DIV> - grupuje tekst w jeden blok 10

11 Wyróżnianie tekstu <B>...</B> (bold) <I>...</I> (italic) <U>...</U> (underline) <TT>...</TT> (teletype) <EM>...</EM> - wyróżnienie <STRONG>...</STRONG> - wyróżnienie silniejsze <STRIKE>...</STRIKE> - przekreślenie tekstu <SUB>...</SUB> - indeks dolny <SUP>...</SUP> - indeks górny 11

12 size - rozmiar czcionki (od 1 do 7, wartością domyślną jest 3) color - kolor face - krój Definiowanie czcionek Rozmiar, kolor i krój czcionki można określić za pomocą znacznika <FONT>...</FONT> i jego atrybutów: Przykład: <font color="navy" size="5" face="helvetica"> jakiś tekst </font> Można też używać bardziej uniwersalnych znaczników, takich jak: <BIG>...</BIG> - powiększenie czcionki o 1 punkt, <SMALL>...</ SMALL > - zmniejszenie czcionki o 1 punkt. 12

13 Kolor tła Kolor tła określamy za pomocą atrybutu bgcolor znacznika <BODY>: <BODY bgcolor = aqua text = navy > <BODY bgcolor = #FFFF00 text = #FFFFFF > <BODY bgcolor = rgb(255, 255, 0) text = rgb(255, 255, 255) > Tłem strony może być też tapeta zapisana w pliku graficznym, którego nazwę podaje się jako wartość atrybutu background: <BODY background = tlo.gif > <BODY background = images/tlo.gif > <BODY background =../tlo.gif > 13

14 Znacznik <IMG> (image) umożliwia umieszczenie w dokumencie HTML grafiki in-line, tzn. jako element bieżącego wiersza. Nazwa pliku zawierającego obrazek podawana jest za pomocą atrybutu SRC (source). <IMG src = foto.gif > Wstawianie grafiki <IMG src = foto.gif alt = Tekst zastępczy > <IMG src = foto.gif width= 120 height= 70 > <IMG src =../images/foto.gif > <IMG src = > Przeglądarki akceptują jedynie grafikę zapisaną w odpowiednim formacie. Najczęściej jest to: GIF JPG PNG 14

15 Wyrównanie grafiki Sposób rozmieszczenia tekstu wokół obrazka określany jest za pomocą atrybutu ALIGN znacznika <IMG>. Do pionowego zorientowania rysunku względem wiersza używane są następujące wartości: ALIGN = top Przykład: ALIGN = middle ALIGN = bottom <img src="foto.gif" align="middle"> Ania na spacerze Do oblewania grafiki tekstem używane są wartości left, right: ALIGN = left - dosunięcie obrazka do lewej i otoczenie go tekstem z prawej strony, ALIGN = right - odwrotnie 15

16 Wstawianie odnośników Odnośniki zwane potocznie linkami - to elementy interaktywne pozwalające na przemieszczanie się do innego miejsca, przy czym może to być miejsce na tej samej stronie, inna strona lub strona znajdująca się na odległym serwerze. Do tworzenia odnośników służy znacznik <A> (anchor kotwica), którego podstawowym atrybutem jest href (Hypertext REFerence), określający adres odnośnika: <A href="url"> tekst aktywny </A> Jeśli chcemy, aby elementem interaktywnym był obrazek, po prostu wstawiamy w odpowiednim miejscu znacznik <IMG> <A href="index.htm"> <img src="1.gif" border="0"> </A> 16

17 Tworzenie zakładek <A href="strona.htm#r_1"> Rozdział I </A> <A href="strona.htm#r_2"> Rozdział II </A> <A name="r_1"></a><h2>rozdział I</h2> <A name="r_2"></a><h2>rozdział II</h2> Znaczniki <A> umożliwiają tworzenia zakładek, czyli miejsc znajdujących się na tej samej stronie, do których może nastąpić przeskok hipertekstowy. Zdefiniowanie zakładki: <A name="r_1"></a> Postać dnośnika: <A href="strona.htm#r_1">rozdział I</A> 17

18 Tabele Tabele języka HTML są ważnym narzędziem służącym do kształtowania wyglądu strony; umożliwiają poprawne rozmieszczenie na stronie elementów, takich jak tekst, formularze czy grafika. Kod przykładowej tabeli wygląda następująco: <table border="4" width="100%" cellspacing="10"> <tr align="center"><td width="40">...</td> <td >...</td></tr> <tr><td>...</td> <td>...</td></tr> </table> Każdy wiersz tabeli określony jest parą znaczników <tr> i </tr> (table row). W wierszach, za pomocą znaczników <td> i </td> umieszcza się komórki z danymi (table data), np.: <td><img src="obrazek.gif"></td> Szerokość kolumny tabelki zostaje dopasowana do szerokości najszerszej komórki w danej kolumnie, przy czym tabela ma tyle kolumn, ile komórek znajduje się w najdłuższym wierszu. 18

19 Obramowanie tabeli <table border="4">...</table> Szerokość i wysokość tabeli <table width="600" height="300">...</table> Kolor tła <table bgcolor="yellow">...</table> Odstęp między komórkami tabeli <table cellspacing="8">...</table> Odstęp między zawartością komórki a jej krawędzią <table cellpadding="4">...</table> Wyrównanie tabeli na stronie Formatowanie tabel <table align="center">...</table> 19

20 Rozpinanie komórek Do rozpinania komórek służą dwa atrybuty znacznika <td> colspan i rowspan Wartości tych atrybutów określają odpowiednio liczbę kolumn i liczbę wierszy, na których ma zostać rozpięta komórka. Na przykład: <table border bgcolor="yellow" width="600"> <tr><td rowspan="2">nr<td colspan="2">labolatorium</tr> <tr><td>pomiar 1<td>Pomiar 2</tr> <tr><td>1<td>123<td>121</tr> </table> Nr Laboratorium Pomiar 1 Pomiar

21 Tworzenie ramek Ramki umożliwiają podzielenie okna przeglądarki na mniejsze podokna i wyświetlenie w każdym z nich osobnej strony WWW. Aby zdefiniować układ ramek należy utworzyć nowy typ dokumentu HTML zwany FRAMESET. W takim dokumencie sekcja <body> zastąpiona jest sekcją <frameset> z odpowiednim atrybutem - rows lub cols, w zależności od tego czy ramka ma być pozioma czy pionowa. Następnie za pomocą polecenia frame z parametrem src, podajemy nazwę strony do wstawienia. Starsze przeglądarki (np. Lynx) w przypadku dokumentów frameset nie wyświetlają zwykle żadnej treści. Z tego względu w takich dokumentach należy umieścić sekcję <noframes> zawierającą alternatywną postać strony, lub odnośnik do wersji strony przeznaczonej dla przeglądarek tekstowych. 21

22 Zagnieżdżanie ramek Znaczniki <frameset> można zagnieżdżać, tworząc rozbudowane układy. <html> <head><title>tytuł strony</title></head> <frameset rows="100,*" border="0"> <frame src="str1.htm" name="up" > <frameset cols="30%,*"> <frame src="str2.htm" name="menu" > <frame src="str3.htm" name="main" > </frameset> </frameset> </html> 22

23 Ramki docelowe Domyślnie dokument, do którego prowadzi łącze, zostaje wyświetlony w tym samym oknie co łącze. Jednak często łącze znajdujące się w jednej ramce powinno otwierać stronę w innej ramce należącej do układu. Aby wyświetlić nową stronę w danej ramce, po pierwsze należy przypisać tej ramce nazwę za pomocą atrybutu name w znaczniku <frame>: <frame src="default.htm" name="main"> Następnie za pomocą atrybutu target wskazujemy miejsce wyświetlania się nowej strony: <A href="nowa.htm" target="main"> 23

24 Witryny tematyczne Witryna World Wide Web Consortium - Webhelp.pl - serwis dla webmasterów: Kurs Pawła Wimmera - Oficjalna strona standardu CSS - Polska strona ogonkowa - Informacje dla webmasterów: