Grafika - pusty znacznik <IMG>
<IMG src="ścieżka/plik_graficzny" />
Przykład:
<IMG src="obrazki/pl.gif' style="width:55px;height:45px" />
Uwaga na lokalizację pliku graficznego - tu w folderze obrazki, podrzędnym do foldera z naszym plikiem html.
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>
Ćwiczenie
Wykonać stronę z elementami z powyższej instrukcji, według własnego projektu.
Można zastosować poszczególne cechy w atrybucie Style dla znaczników, np.:
<P style="font-size:18px; co!or;red;font-weight:bold"> Tekst</P>
<TABLE style="background-color:blue;border:2px solid green">.....tu wiersze i kolumny......</TABLE>
Poszczególne cechy stylu oddzielamy średnikami.
Własne style można dowolnie nazywać, np. "nagłówek", "akapitczerwony" (tzw. klasa). Można je zadeklarować w osobnym pliku lub wprost na wybranej stronie WWW.
W nagłówku strony, w sekcji HEAD umieścić swoją definicję stylu pomiędzy znacznikami <STYLEx/STYLE>.
<HTMLxHEAD>
<STYLE type="text/css"> hl.td (color: green;}
.nagłówek {color: red; font-size:30px;}
,gruby_w_ramce {font-weight: bold;border:2px solid green) p.duza {font-size:30px;}
</STYLE>
</HEAD>
<BODY>
<Hl>Nagłówek strony</Hl>
<a href="http://www.signs.pl/html/" class="naglowek">Duży link do strony SIGNS</A>
<P> Standardowy akapit</P>
<P style="color:blue;font-size:50px"> Bezpośredni opis stylu</P>
<SPAN class-'gruby_w_ramce"> Opis klasy </SPAN>
<P class="duza"> Akapit opisanej klasy <I>duza</I> </P>
</BODYx/HTML>
W przykładzie zostały zdefiniowany styl dla elementów HI i TD i trzy style o nazwach klas: nagłówek i gruby_w_ramce i duża.
Najczęściej spotykane jest przypisanie stylu do istniejącego elementu HTML. Kropka przed nazwą stylu określa, że styl jest selektorem klasy, czyli klasa będzie miała nadaną przez nas nazwę, którą można potem użyć jako atrybut class dla dowolnego elementu HTML. Cechy stylu opisujemy w nawiasach klamrowych. Wszystkie tytuły HI i komórki tabeli TD będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 30 pikseli (font-size:30px;). Styl gruby_w_ramce będzie posiadał opisane cechy. Duża to klasa, ale tylko dla akapitów <P>.