docĆw.11 Dokumenty HTML
download 
Reklamacja Transkrypt
Ćw.11 Dokumenty HTML
Ćw.11 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:
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
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>
Przykłady:
<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
background-color
kolor tła elementu
background-image
border-color
border-width
border-style
adres tła graficznego
kolor obramowania
grubość obramowania
styl obramowania
border
color
obramowanie (całość cech)
kolor tekstu
cursor
wygląd kursora myszki
font-family
font-size
font-style
font-weight
height
rodzaj oraz rodzina czcionki
wielkość czcionki
styl czcionki
grubość (waga) czcionki
wysokość elementu
Przykładowe wartości
red
#ff0000
url('rys.jpg')
#CCFF33
dotted
dashed
solid
3px solid green
yellow
#669933
hand
crosshair
Arial sans-serif
14px
italic
bold
23mm
width
margin-left
margin-right
margin-top
margin-bottom
text-align
szerokość elementu
marginesy zewnętrzne
5cm
10cm
100px
wyrównanie poziome tekstu
text-decoration
wygląd tekstu
left
center
right
justify
none
underline
blink
Pełny opis możliwych do zastosowanie
http://www.signs.pl/html/o/style.php
cech
stylów
znajduje
się
np.
pod
Zmiana wiersza wewnątrz akapitu - znacznik <BR /> UWAGA : – pojedynczy znacznik
Przykład:
<HTML>
<HEAD>
<TITLE> Moja strona internetowa </TITLE>
</HEAD>
<BODY>
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>
<I> </I>
<U> </U>
<STRIKE> </STRIKE>
<SUP> </SUP>
<SUB> </SUB>
pogrubiona (albo <STRONG>)
kursywa
podkreślona
przekreślona
indeks górny(superscript)
indeks dolny(subscript)
Przykłady:
<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:
lub
#336699
white
aqua
silver
gray
lime
red
fuchsia
purple
teal
olive
blue
black
yellow
navy
maroon
green
adresem:
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)
Przykłady:
<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" />
Przykłady:
<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 wtgląda następująco:
<HTML>
<BODY>
<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>
Zastanowić się nad interpretacją poszczególnych znaczników dla formularza
Materiały pomocnicze w sieci:
http://www.kurshtml.boo.pl
http://www.signs.pl/html/
Ćwiczenie
Wykonać stronę z elementami z powyższej instrukcji, według własnego projektu. Stosować
cechy stylu dla znaczników: wygląd (czcionka, kolor tła i obramowania), pozycja (marginesy),
wymiary (czerokość, wysokość).
