docDokument HTML (Hyper Text Markup Language) jest plikiem
download 
Reklamacja Transkrypt
Dokument HTML (Hyper Text Markup Language) jest plikiem
Dokument HTML (Hyper Text Markup Language) jest plikiem tekstowym, w którym znajdują się polecenia języka HTML. Polecenia w dokumencie HTML nazywamy znacznikami (tagami) i większość z nich jest dwuczęściowa: otwierająca < > oraz zamykająca </ >. Niektóre z poleceń nie wymagają znaczników zamykających. Tekst zawarty między znacznikami ulega odpowiedniemu formatowaniu. Nazwy znaczników można pisać dużymi lub małymi literami. Strony zapisywane są w formie plików tekstowych o rozszerzeniu .htm lub .html. Strona główna witryny WWW ma najczęściej nazwę index.html. Ponieważ serwery sieci Internet mogą rozróżniać wielkość liter w nazwach plików, potraktują jako różne pliki o nazwach: index.html, Index.html, INDEX.html, czy index.HTML, dlatego należy w nazwach plików zawsze używać takiej samej pisowni. Podstawowy schemat dokumentu HTML <HTML> <HEAD> <TITLE>Tytuł strony</TITLE> </HEAD> <BODY> Treść strony </BODY> </HTML> Prawidłowy dokument powinien rozpoczynać się znacznikiem <HTML> i kończyć </HTML>, w ten sposób informujemy przeglądarkę o istnieniu dokumentu hipertekstowego. Można go ominąć, ale nie jest to zalecane. Zawartość dokumentu dzielimy na dwie części: nagłówek (HEAD) i ciało dokumentu (BODY). W nagłówku umieszczone są polecenia definiujące tytuł i inne informacje dla przeglądarek. Tytuł jest widoczny na ekranie w pasku górnym obok nazwy przeglądarki. W nagłówku może się również znajdować polecenie <META>. Przy jego pomocy możemy utworzyć strony, które będą się odświeżać co jakiś czas, można również wczytać nową stronę po upływie określonego czasu. Polecenie <META> powinno być umieszczone zaraz za poleceniem <HEAD>. Posiada ono parametry: CONTENT=”time; URL=adres” – określa adres nowego dokumentu i czas oczekiwania na podjęcie nowej decyzji określonej parametrem HTTP-EQUIV=”akcja”. Wartość time jest podawana w sekundach. Np: <META HTTP-EQUIV=”refresh” CONTENT=”3; URL=kadr2.html”> - po 3 sekundach załaduje się strona kadr2.html Polecenie <META> służy również do opisu używanej na stronie tablicy kodowej znaków: a) Środkowoeuropejski – zalecana polska norma ISO <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> b) Środkowoeuropejski - Windows <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> Polecenie <META> nie wymaga zamknięcia. 1 Ciało dokumentu: Tekst zawarty pomiędzy poleceniami <BODY> a </BODY> stanowi podstawową część dokumentu, prezentowaną użytkownikowi w przeglądarce. Zwykły tekst (bez poleceń składu) jest wyrównywany do lewej, puste linie są ignorowane, ciąg spacji traktowany jako jeden odstęp. Polecenie <BODY> posiada szereg parametrów definiujących wygląd dokumentu: - BACKGROUND=”nazwa_rysunku” – podany jako parametr rysunek będzie tłem dokumentu. - BGCOLOR=”kolor” – kolor tła, jest określany przez podanie nazwy po angielsku np.. yellow, lub składowych RGB w postaci”#rrggbb”. Określają one nasycenie kolorów (red, greek, blue), podane w zapisie szesnastkowym. - TEXT=”kolor” - kolor tekstu. - LINK=”kolor” – kolor odnośnika - VLINK=”kolor” – kolor odnośnika do dokumentu już przeczytanego - ALINK=”kolor” – kolor aktywnego odnośnika (takiego na którym trzymamy naciśnięty lewy klawisz myszki. <BODY BGCOLOR=”red” TEXT=”blue”> - kolor tła czerwony, a tekstu niebieski. 1. Nagłówki – wyróżnienie tytułu rozdziału, podrozdziału itp. Mamy do dyspozycji 6 poleceń do definiowania nagłówków. Tekst nagłówka wyświetlany jest czcionką pogrubioną o wielkości zależnej od poziomu rozdziału. Poleceniami tymi są: <H1> tytuł </H1> - największy nagłówek <H2> tytuł </H2> <H3> tytuł </H3> <H4> tytuł </H4> <H5> tytuł </H5> <H6> tytuł </H6> - najmniejszy nagłówek Parametr ALIGN – wyrównanie nagłówka ALIGN=”center” – wyśrodkowały ALIGN=”left” – wyrównany do lewej ALIGN=”right” – wyrównany do prawej NOBR – zapobiega zwijaniu wierszy nagłówka 2. Polecenie <FONT> ... </FONT> Definiuje wielkość, krój i kolor czcionki. Jego parametrami są: COLOR – zmienia kolor znaków w tekści FACE – określa rodzaj czcionki SIZE – określa rozmiar czcionki od 1 do 7. Można też podawać wartości w odniesieniu do aktualnego rodzaju czcionki, w tym celu umieszczamy przed liczbą znaki „+” lub „-”. Np. <FONT COLOR=”#110000” FACE=”ARIAL” SIZE=”4”> ... </FONT> 3. Polecenia definiujące podstawowe kroje pisma: <BLINK> tekst </BLINK> - napis migający <I> tekst </I> - napis pochylony (kursywa) <B> tekst </B> - napis pogrubiony <U> tekst </U> - napis podkreślony <STRIKE> tekst </STRIKE> - napis przekreślony <SUB> tekst </SUB> - indeks dolny <SUP> tekst </SUP> - indeks górny <SMALL> tekst </SMALL> - napis pomniejszony o jeden stopień 2 <BIG> tekst </BIG> - napis powiększony o jeden stopień <TT> tekst </TT> - czcionka o stałej szerokości 4. Polecenia wyróżniające określone rodzaje pisma: <CODE> tekst </CODE> - tekst programów <SAMP> tekst </SAMP> - tekst programów <KBD> tekst </KBD> - czcionka systemowa <VAR> tekst </VAR> - wyróżnianie zmiennych <DFN> tekst </DFN> - definicje <CITE> tekst </CITE> - cytaty <ADDRESS> tekst </ADDRESS> 5. Nowa linia: <BR> - polecenie to nie ma znacznika zamykającego 6. Centrowanie tekstu: <CENTER> tekst </CENTER> 7. Pozioma linia: <HR parametry> - brak znacznika zamykającego Parametry: - NOSHADE – linia bez cieniowania - SIZE – wysokość linii w pikselach - WIDTH – szerokość w pikselach lub procentach szerokości okna przeglądarki - ALIGN – położenie (przyjmuje wartości – center, left, right) Np. <HR NOSHADE SIZE=”10” ALIGN=”left”> 8. Nowy akapit: <P> ... </P> Parametr ALIGN: - center – tekst paragrafu będzie wycentrowały - left – tekst wyrównany do lewej - right – tekst wyrównany do prawej - justify – tekst wyrównany do obydwu marginesów - indent – pierwsza linia akapitu będzie posiadać wcięcie Parametr ID: definiuje unikalny identyfikator dla elementu (np. <P ID=”etykieta1”> nazwa akapitu </P>). Do elementów oznaczonych w ten sposób można się odwoływać poprzez odnośnik 9. Odsyłacze: <A HREF=”adres_docelowy”> Tekst odsyłacza </A> - <A HREF=”strona2.html”> - odsyłacz do drugiej strony</A> - <A HREF=”#etykieta1”> - odsyłacz do akapitu na stronie, który ma przypisany identyfikator „etykieta1” - <A HREF=”http://www.yahoo.com” TARGET=”_blank”> www.yahoo.com </A> odsyłacz dom innej strony, otwieranej w nowym oknie - <A HREF=”mailto:[email protected]”> [email protected] </A> - odsyłacz do poczty elektronicznej 10. Wstawianie obrazków do strony WWW: <IMG SRC=”katalog/podkatalog/nazwa_obrazka.gif”> Inne parametry to: - WIDTH=”500” i HEIGHT=”20” – rozmiary obrazka w pikselach lub % - ALT=”tekst” - tekst zastępczy (alternatywny) 3 11. Osadzanie pliku filmowego lub dźwiękowego <embed src="ścieżka dostępu do pliku" width="x" height="y" /> Parametry: showcontrols="1" – wyświetlenie panelu sterowania autostart="true / false" – automatyczne startowanie loop="true / false" – odtwarzanie w pętli 12. Listy i wykazy: Wykazy pozwalają na schematyczne przedstawienie informacji danej strony. Wykaz to szereg niezależnych elementów należących do wspólnej struktury. Można je numerować zgodnie z porządkiem w jakim występują lub wyróżnić punktorami. Rodzaje wykazów : - wypunktowanie <UL type=”…”> <LI> punkt 1 <LI> punkt 2 ... </UL> Parametr TYPE: "disc" - (domyślny) - koło "circle" - okrąg "square" - wypełniony kwadrat - numerowanie <OL> <LI> ... <LI> ... ... </OL> Parametry: TYPE określa sposób numerowania pozycji w liście (np. 1, a, A, i, I) START=”n” – numerowanie od ustalonej wartości 13. Tabele <table>...</table> jest znacznikiem tabeli <tr>...</tr> jest znacznikiem wiersza <td>...</td> jest znacznikiem pojedynczej komórki Atrybuty: Border=”2” obramowanie cellpadding="x" margines cellspacing="x" odstęp między komórkami width="x" szerokość height="y" wyskość align=”left / right / center” wyrównanie bgcolor="kolor" kolor tła bordercolor="kolor" kolor obramowania colspan="x" łączenie kolumn rowspan=”x” łączenie wierszy 4 14. Blok <div>...</div> Polecenie to wydziela większy blok tekstu, przez co możemy nadać mu jakiś rodzaj formatowania: <div align="left">...</div> <div align="right">...</div> <div align="center">...</div> <div align="justify">...</div> Na stylach: <div style="background: red; width: 200px; float: right;"> Przykład: <div style="width: 500px;"> <div style="float: left; background: #e0e0e0;"> <p>Zawartość akapitu w lewym bloku.</p> </div> <div style="float: right; background: #f0f0f0;"> <p>Zawartość akapitu w prawym bloku.</p> </div> </div> 5
