Obrazy

Formaty plików graficznych

Dwa podstawowe rodzaje grafiki cyfrowej to grafika rastrowa oraz wektorowa.
W witrynach WWW zazwyczaj używa się obrazów zapisanych w formatach:
JPEG - stosowany do kolorowych zdjęć
GIF - do zdjęć z niewielką liczbą kolorów lub zdjęć z dużymi obszarami tego samego koloru + animowane obrazy + przezroczystość
PNG - do zdjęć z niewielką liczbą kolorów lub zdjęć z dużymi obszarami tego samego koloru + przezroczystość + półprzezroczystość
SVG - uniwersalny format dwuwymiarowej grafiki wektorowej (statycznej i animowanej), nieobwarowany licencjami i patentami

format	JPG	GIF	PNG	SVG
ilość bitów	24	8	24 kolor 8 przezroczystość	24 kolor 8 przezroczystość
przezroczystość	nie	tak	tak	tak
animacja	nie	tak	nie	tak
kompresja	stratna	bezstratna	bezstratna	bezstratna

umieszczanie obrazu na stronie WWW

<img src="sciezka-do-pliku" />
<img src="grafika/sunflower.jpg" />

wynik kodu

opatrywanie obrazu komentarzem

<img src="grafika/sunflower.jpg" alt="sunflower" />

wynik kodu

określanie rozmiaru obrazu

<img src="grafika/sunflower.jpg" style="width: 640px; height: 360px;" alt="sunflower" />

wynik kodu

zmiana rozmiaru obrazu

<img src="grafika/sunflower.jpg" style="width: 640px; height: 640px;" alt="sunflower" />

wynik kodu

obramowanie obrazu

style="border: szerokość rodzaj kolor"
style="border-top: szerokość rodzaj kolor"
style="border-right: szerokość rodzaj kolor"
style="border-bottom: szerokość rodzaj kolor"
style="border-left: szerokość rodzaj kolor"

style="border: 15px solid orange;"	- pojedyncza linia ciągła
style="border: 15px dashed orange;"	- seria krótkich kresek
style="border: 15px dotted orange;"	- seria kwadratowych punktów
style="border: 15px double orange;"	- podwójna linia ciągła
style="border: 15px groove orange;"	- obramowanie wydaje się wklęsłe
style="border: 15px inset orange;"	- element zagłebiony w stronie
style="border: 15px outset orange;"	- element jest wypukły
style="border: 15px ridge orange;"	- obramowanie wydaje się wypukłe

<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px solid orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px dashed orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px dotted orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px double orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px groove orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px inset orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px outset orange;" alt="sunflower" />

wynik kodu


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 15px ridge orange;" alt="sunflower" />

wynik kodu



ukrycie obramowania obrazu
style="border: hidden"




likwidacja obramowania obrazu
style="border: none"

marginesy obrazu

Margines to obszar występujący po zewnętrznej stronie obramowania elementu.

określenie szerokości wszystkich marginesów
style="margin: wartość"
style="margin: góra prawo dół lewo"

określenie szerokości pojedynczych marginesów
style="margin-top: wartość"
style="margin-right: wartość"
style="margin-bottom: wartość"
style="margin-left: wartość"


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; margin:25px 25px 50px 50px;" alt="sunflower" />

wynik kodu



<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; margin-top: 50px;" alt="sunflower" />

wynik kodu



<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; margin-right: 50px;" alt="sunflower" />

wynik kodu



<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; margin-bottom: 50px;" alt="sunflower" />

wynik kodu



<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; margin-left: 50px;" alt="sunflower" />

wynik kodu

wypełnienie obrazu

Wypełnienie to margines wewnętrzny pomiędzy zawartością elementu a jego obramowaniem.

określenie szerokości wszystkich wypełnień
style="padding: wartość"
style="padding: góra prawo dół lewo"

określenie szerokości pojedynczych wypełnień
style="padding-top: wartość"
style="padding-right: wartość"
style="padding-bottom: wartość"
style="padding-left: wartość"


<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; padding:25px 25px 10px 10px;" alt="sunflower" />

wynik kodu





<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; padding-top: 25px;" alt="sunflower" />

wynik kodu





<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; padding-right: 25px;" alt="sunflower" />

wynik kodu





<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; padding-bottom: 25px;" alt="sunflower" />

wynik kodu





<img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px; border: 2px solid green; padding-left: 25px;" alt="sunflower" />

wynik kodu

oblewanie obrazu tekstem

wyrównanie obrazu do lewego marginesu, tekst znajduje się po prawej stronie obrazu
style="float: left;"

<p><img src="grafika/sunflower02.jpg" style="padding: 5px 5px 5px 5px; float: left;" />Słonecznik jest to roślina ... </p>

wynik kodu

Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen.

wyrównanie obrazu do prawego marginesu, tekst znajduje się po lewej stronie style="float: right;"

<p><img src="grafika/sunflower02.jpg" style="padding: 5px 5px 5px 5px; float: right;" />Słonecznik jest to roślina ...</p>

wynik kodu

Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen.

rezygnowanie z oblewania akapitu tekstem
<p style="clear: both">rezygnowanie z oblewania akapitu tekstem</p>

style="clear: left"	- jeśli obraz, którego oblewanie tekstem chcesz anulować, został wyrównany do marginesu za pomocą atrybutu stylu float: left
style="clear: right"	- jeśli obraz, którego oblewanie tekstem chcesz anulować, został wyrównany do marginesu za pomocą atrybutu stylu float: right
style="clear: both"	- jeżeli chcesz bezwarunkowo przenieść element poniżej obrazu, niezależnie od tego, w jaki sposób obraz ten jest oblewany tekstem

używanie obrazu jako tła strony (lub innego znacznika np. akapitu)

<body style="background-color: kod koloru; background-image: url('adres-pliku-graficznego');"></body>
<body style="background-color: blue; background-image: url('grafika/sunflower.jpg');"></body>

<p style="background-color: kod koloru; background-image: url('adres-pliku-graficznego');"></p>
<p style="background-color: blue; background-image: url('grafika/sunflower.jpg');"></p>


Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen. Słonecznik jest to roślina, która jest traktowana jako źródło pożywienia w formie ziarna, mąki lub oleju. Słonecznik został sprowadzony przez Hiszpanów do Europy z Ameryki Północnej około 1500 roku. W 100g słonecznika znajduje się około 580 kalorii. Nasiona słonecznika posiadają zdrowe tłuszcze, witaminę E, antyoksydanty, magnez, selen.

dodawanie podpisów do zdjęć - <figure> oraz <figcaption>

<figure>
 <img src="grafika/sunflower02.jpg" style="width: 320px; height: 180px;" alt="sunflower" />
 <figcaption>Słonecznik to bardzo ładna roślina..<figcaption>
</figure>


wynik kodu

osadzanie miniatury na stronie WWW

<a href="plik-obrazu"><img src="plik-miniatury" /></a>
<a href="grafika/sunflower.jpg"><img src="grafika/sunflower03.jpg" /></a>


wynik kodu

przekształcenie obrazu w odnośnik

<a href="adres-docelowy"><img src="ścieżka-do-pliku" alt="komentarz" /></a>
<a href="https://www.australia.com/en-us"><img src="grafika/Australia.jpg" alt="Australia" /></a>


wynik kodu

mapy odnośników

plik graficzny ma wymiary 200x240
rect oznacza prostokąt, w innych kształtach należałoby wpisać coś innego
x - szerokość (x jest wporządku -> od lewa 0 do prawa 200)
y - wysokość (y jest na odwrót -> od góry 0 do dołu 240)
x1 - współrzędna pozioma lewego górnego narożnika przycisku
y1 - współrzędna pionowa lewego górnego narożnika przycisku
x2 - współrzędna pozioma prawego dolnego narożnika przycisku
y2 - współrzędna pionowa prawego dolnego narożnika przycisku

<img src="nazwa-pliku" usemap="#nazwa-mapy" />
<map name="nazwa-mapy">
 <area shape="rect" coords="x1,y1,x2,y2" href="HTML.html" />
 <area shape="rect" coords="x1,y1,x2,y2" href="CSS.html" />
 <area shape="rect" coords="x1,y1,x2,y2" href="JavaScript.html" />
</map>

<img src="grafika/logo_mapy_odnosnikow.png" usemap="#nazwa-mapy" />
<map name="nazwa-mapy">
 <area shape="rect" coords="0,0,200,80" href="HTML.html" />
 <area shape="rect" coords="0,81,200,160" href="CSS.html" />
 <area shape="rect" coords="0,161,200,240" href="JavaScript.html" />
</map>