Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 1
Wykład 3
Umieszczanie obiektów graficznych: rysunków - uzupełnienie
<img src="kwiatek.gif" hspace="5" align="left" alt="Rysunek"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Osadzanie rysunków</title>
</head>
<body> <!--atrybut hspace określa oddalenie obrazka od lewej i prawej strony od pozostałych elementów strony, vspace oddalenie obrazka z góry i z dołu, atrybut align= ("left" | "center" | "right" | "justify") połoŜenie obrazka na stronie, atrybut alt oznacza napis ukazujący się po wybraniu obrazka myszą lub zamiast obrazka, jeśli nie moŜe wyświetlić go wyświetlarka -->
<img src="assets.gif" hspace="5" align="left" alt="Rysunek"/>
<h1>Rysunki i tekst</h1>
<p>ąęółśŜźć bbbbbbbbbbbbbbbbbbbbbbbb<br/>
ccccccccccccccccccccccccccc</p>
<br clear = "left"/> <!--atrybut clear= ("left" | "all" | "right" | "none") pozwala przerwać wiersz i umieścić go pod obrazkiem w zaleŜności od połoŜenia obrazka: left, gdy obraz jest z lewej strony, right, gdy obraz jest z prawej strony, all umieszcza cały tekst pod obrazkiem, jeśli nie zastosowano atrybutu align-->
<p>dddddddddddddddddddddddd<br/>
eeeeeeeeeeeeeeeeeeeeeeeeeee</p>
</body>
</html>
Rys.1. Rysunek z lewej strony tekstu (plik rysunki1.html)
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 2
Rys.2. Rysunek zmniejszony i zdeformowany z prawej strony tekstu
(plik rysunki2.html, który powstał z pliku rysunki1.html po wymianie zawartości dwóch linii kodu, podanych z prawej strony rysunku)
Rys.3. Rysunek z góry tekstu pogrubioną ramką (plik rysunki3.html, który powstał z pliku rysunki1.html po wymianie zawartości dwóch linii kodu, podanych z prawej strony rysunku)
<img src="assets.gif"
height="200"
width="150"
align="right"
alt="Rysunek"/>
oraz
<br clear = "right"/>
<img src="assets.gif"
border="10" alt="" />
oraz
<br clear ="all" />
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 3
Grafika i połączenia
<a href="a.html"><img src="kwiatek.gif" alt=""/></a>
Formaty graficzne
GIF (.gif), JPEG (.jpg, .jpeg), XBM (.xbm), TIFF (.tiff, .tif), BMP (.bmp), PICT (.pct)
Skalowanie i wymiary obrazów
Atrybuty height oraz width znacznika <img> określają odpowiednio szerokość i wysokość obrazu, podawaną w pikselach (zaleca się nie naleŜy pomniejszać obrazów, gdyŜ wydłuŜa to odczyt strony)
Ramki wokół obrazów
<img src="kwiatek.gif" border="10" alt="" />
Kolory
Określa się za pomocą:
• Liczby szesnastkowej
• Predefiniowanej nazwy
Kolor tła strony:
<body bgcolor=”#FFFFFF”> kolor biały
<body bgcolor=”#000000”> kolor czarny
<body bgcolor=”#FF0000”> kolor czerwony
<body bgcolor=”#00FF00”> kolor zielony
<body bgcolor=”#0000FF”> kolor niebieski
<body bgcolor=”green”>
Kolor wybranego fragmentu tekstu
<font color=”red”>czerwony</font>
Kolor tła
<body bgcolor="black">
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 4
Mapy odsyłaczy po stronie klienta
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset= utf-8"/>
<title>Mapa odsyłaczy - tęcza</title>
</head>
<body>
<h1>Odsyłacze</h1>
<img src="rainbow.gif" usemap = "#tecza" alt=""/>
<map name=”tecza” id=”tecza”>
<area shape = "rect" coords = "0,0,100,40"
href="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz"
target="newwindow" alt=""/>
<area shape = "rect" coords = "200,0,400,40" href="c1.htm"
target="newwindow" alt=""/>
<area shape = "rect" coords = "500,0,600,40"
href="c3.htm#Miejsce1"
target="newwindow" alt=""/>
<area shape = "rect" coords = "400,0,500,40" href="#Miejsce2"
target="newwindow" alt=""/>
</map><!--(atrybut shape moŜe oznaczać następujące figury ("rect" | "circle" | "poly" | "default"), czyli (prostokąt|koło|wielokąt|figurę domyślną)-->
<p><a name="Miejsce2" id="Miejsce2">Dzięki zachowywaniu dokumentów zbiorach tekstowych,</a><br/>
zbiory HTML są zrozumiałe dla większości komputerów.<br/>
Wynik końcowy jest podobny, a róŜnice są minimalne.<br/></p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
</body>
</html>
Rys. 4. Plik HTML z mapą odsyłaczy po stronie klienta
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 5
Zawartość pliku c3.htm <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset= utf-8"/>
<meta name="keywords" content="Miejsce1"/>
<title>Połączenie 3</title>
</head>
<body>
<p>ccccccc</p>
<h2><a name="Miejsce1" id="Miejsce1">Dołączanie grafiki </a></h2>
<p><a href="mapa.html">Powrót do pliku głównego</a></p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
<p>ccccccc</p>
</body>
</html>
Zawartość pliku c1.htm <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset= utf-8"/>
<title> Połączenie 1</title>
</head>
<body>
<h2>Zachowywanie w plikach tekstowych</h2>
<p>eeeeeeeeeeeeeeee</p>
<p><a href="mapa.html">Powrót do pliku głównego</a></p>
</body>
</html>
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 6
Rys.5. Mapa odsyłaczy wykorzystująca cztery prostokątne obszary tęczy (rysunek dołączony w formacie gif) – wizualizacja strony z rys.4.
http://sprocket.ict.pwr.wroc.pl/
~zkruczkiewicz
Obszar prostokątny "0,0,100,40"
c1.htm Obszar prostokątny
"200,0,400,40"
c3.htm#Miejsce1 Obszar prostokątny
"400,0,500,40"
#Miejsce2
Obszar prostokątny
"500,0,600,40"
Zofia Kruczkiewicz, HTML/XHTML, Wykład 3 7
Po wyborze obszaru prostokątnego Po wyborze obszaru prostokątnego "500,0,600,40" "500,0,600,40"
Po wyborze prostokątnego obszaru
tęczy „0,0,100,40”
Rys. 6. Zawartość okna przeglądarki dla strony z rys. 5 po uruchomieniu kolejno połączeń z obszarów tęczy.
Po wyborze prostokątnego obszaru tęczy "400,0,500,40"
