Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: <ZNACZNIK atrybuty> zawartość </ZNACZNIK> Struktura szkieletu dokumentu HTML: <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> Tu są elementy pojawiające się na stronie główna część dokumentu HTML </BODY> </HTML> Zwrócić uwagę na początek i koniec bloków oznaczonych znacznikami HTML, HEAD i BODY. Utworzyć przy pomocy Notatnika Windows plik tekstowy o powyższej strukturze. Aby poprawnie wyświetlane były polskie znaki zapisać dokument z kodowaniem UTF-8, zmienić mu nazwę na index.html (ważne rozszerzenie nazwy), a następnie obejrzeć efekt otwierając w przeglądarce internetowej. Oto kilka przydatnych znaczników: Akapit tekstowy - znacznik <P> <P style="text-align:center"> Tytuł </P> <P style="text-align:center; font-size:28px;color:#887755"> Tytuł2 </P> Jak wynika z powyższego przykładu wiele parametrów dla znacznika można ustalić dzięki atrybutowi style. Atrybut ten może posiadać wiele cech o określonych wartościach. Jest to lista reguł ustalających w jaki sposób mają zostać wyświetlone przez przeglądarkę wybrane elementy HTML. Schemat zastosowania: <ZNACZNIK style="cecha1:wartość; cecha2:wartość; itd">zawartość</znacznik> Wybrane cechy stylów: Cecha stylu Opis Przykładowe wartości background-color kolor tła elementu red #ff0000 background-image adres tła graficznego rys.gif border-color kolor obramowania #CCFF33 border-width grubość obramowania 2px border-style styl obramowania dotted dashed solid border obramowanie (całość cech) 3px solid green color kolor tekstu yellow #669933 cursor wygląd kursora myszki hand crosshair font-family rodzaj oraz rodzina Arial sans-serif
czcionki font-size wielkość czcionki 14px font-style styl czcionki italic font-weight grubość (waga) czcionki bold height wysokość elementu 23mm width szerokość elementu 5cm margin-left margin-right margin-top margin-bottom text-align marginesy zewnętrzne wyrównanie poziome tekstu 10cm 100px left center right justify text-decoration wygląd tekstu none underline blink Pełny opis możliwych do zastosowanie cech stylów znajduje się np. pod adresem: http://www.signs.pl/html/o/style.php Zmiana wiersza wewnątrz akapitu - znacznik <BR /> UWAGA : pojedynczy znacznik Przykład: <HEAD> <TITLE> Moja strona internetowa </TITLE> </HEAD> to będzie jeden wiersz <P> a <BR /> to <BR /> cztery <BR />wiersze</p> <P> to </P> <P> tez </P> <P> cztery </P> <P> wiersze</p> </BODY></HTML> Poziom nagłówka strony - znacznik <Hn> - <H1> Nagłówek pierwszy </H1> Wypróbować również znaczniki H2 H3 itd. aż do H6 Linie poziome znacznik <HR> <HR style="width:800px;height:14px;color:red"> Style czcionki (dla krótkich tekstów) <B> </B> pogrubiona (albo <STRONG>) <I> </I> kursywa <U> </U> podkreślona <STRIKE> </STRIKE> przekreślona <SUP> </SUP> indeks górny(superscript) <SUB> </SUB> indeks dolny(subscript) <B><I> To jest tekst napisany pogrubioną kursywą </I></B> <P style="text-align:center"> Jakiś <B>Tekst</B> x<sup>2</sup></p>
Stałe koloru: white aqua silver gray teal yellow lime olive navy red blue maroon fuchsia black green purple lub #336699 liczba określająca w systemie szesnastkowym nasycenie barw RGB (od 00 do FF) tutaj: red: 33h, green: 66h, blue: 99h Kolor tła strony (cecha background-color dla stylu znacznika BODY) <BODY style="background-color:maroon"> <BODY style="background-color:#668600"> Tabele znaczniki: <TABLE ></TABLE> znacznik całej tabeli <TR></TR> znaczniki wiersza <TD></TD> znaczniki kolumny Przykład: <TABLE style="border:4px solid green"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> Aby ustalić styl dla wszystkich komórek tabeli można w bloku pomiędzy znacznikami <HEAD> zastosować przykładową definicję: <STYLE type="text/css"> TD{color: blue; border:1px dotted black;width:80px} </STYLE> Lista wypunktowana znaczniki <UL> i <LI> <UL> <LI> tekst punktu pierwszego</li> <LI> tekst punktu drugiego</li> <LI> tekst punktu trzeciego</li> </UL> Lista numerowana znaczniki <OL> i <LI> <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL> Grafika znacznik <IMG> <IMG src="ścieżka\plik_graficzny" /> <IMG src="email_7.gif" style="width:55px;height:45px" />
Hiperłącza (odsyłacze) znacznik <A> Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można przedstawić w postaci: <A href= "adres strony " > Tekst (lub obrazek), który należy kliknąć </A> Np. <A href= " http://www.wp.pl" > Wirtualna Polska </A> <A href="http://www.microsoft.com/poland/"> Microsoft </A> <A href="./reklama.htm"> <IMG SRC="reklama.jpg" /> </A> <A href="mailto:imię nazwisko@adres"> Napisz do autorów tej strony</a> Odsyłacz do zakładki o nazwie x: <A href="#x">skocz do rozdz.1</a>...... <P> Teksty</P> <A name="x">rozdział 1</A> Formularze Przykład: Utworzyć poniższy formularz: Realizacja wygląda następująco: <FORM> <P>Nazwisko:<INPUT type='text' name='nazwisko' /></P> <P>Imię:<INPUT type='text' name='imie' /></P> <P>Wzrost:</P> <P>Wysoki<INPUT type="radio" name="wzrost" checked></p> <P>Średni<INPUT type="radio" name="wzrost" ></P> <P>Niski<INPUT type="radio" name="wzrost" ></P> <P><SELECT> <OPTION>Podstawowe</OPTION> <OPTION>Średnie</OPTION> <OPTION>Wyższe</OPTION> </SELECT></P> <P><INPUT type='submit' value="prześlij" /> </P> </FORM> </BODY>
</HTML> Ćwiczenie Wykonać stronę z elementami z powyższej instrukcji według własnego projektu, stosując wszystkie znaczniki i nadając im cechy stylu. Materiały pomocnicze w sieci: http://www.kurshtml.boo.pl http://www.signs.pl/html/