Wykład 4_1 TINT. Obiekty graficzne. Zofia Kruczkiewicz

Wielkość: px

Rozpocząć pokaz od strony:

Download "Wykład 4_1 TINT. Obiekty graficzne. Zofia Kruczkiewicz"

Grażyna Piątkowska
7 lat temu
Przeglądów:

1 Wykład 4_1 TINT Obiekty graficzne Zofia Kruczkiewicz

2 1. Grafika i połączenia <a href="a.html"><img src="kwiatek.gif" alt=""/></a> GIF (.gif) JPEG (.jpg,.jpeg), XBM (.xbm), TIFF (.tiff,.tif), BMP (.bmp), PICT (.pct) 2. Formaty graficzne 3. Skalowanie i wymiary obrazów Atrybuty height oraz width znacznika <img> określają odpowiednioszerokość i wysokość obrazu, podawaną w pikselach. Uwaga: Zaleca się nie należy pomniejszać obrazów, gdyż wydłuża to odczyt strony.

3 4. Umieszczanie grafiki Rysunek z lewej strony tekstu <img src="kwiatek.gif" hspace="5" align="left" alt="rysunek"/> <br clear = "left"/>

4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>osadzanie rysunków</title> </head> <body>  <img src="assets.gif" hspace= 15" align="left" alt="rysunek"/> <h1>rysunki i tekst</h1> <p>ąęółśżźć bbbbbbbbbbbbbbbbbbbbbbbb<br/> ccccccccccccccccccccccccccc</p> <br clear = "left"/>  <p>dddddddddddddddddddddddd<br/> eeeeeeeeeeeeeeeeeeeeeeeeeee</p> </body> </html>

5 Zatosowanie arkusza stylów.obraz { float:left; margin-left:15px; margin-right:15px;.linia{ clear:left

6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>osadzanie rysunków</title> <link rel="stylesheet" type="text/css" href="probystylu.css" media="screen" /> </head> <body>  <img src="assets.gif" class="obraz" alt="rysunek"/> <h1>rysunki i tekst</h1> <p>ąęółśżźć bbbbbbbbbbbbbbbbbbbbbbbb<br/> ccccccccccccccccccccccccccc</p> <br class="linia"/>  <p>dddddddddddddddddddddddd<br/> eeeeeeeeeeeeeeeeeeeeeeeeeee</p> </body> </html>

7 Rysunek zmniejszony i zdeformowany z prawej strony tekstu <img src="assets.gif" height="200" width="150" align="right" alt="rysunek"/> <br clear = "right"/>

8 4.2.2.Zatosowanie arkusza stylów img { float:right; height:200px; width:150px.linia{ clear:right

9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>osadzanie rysunków</title> <link rel="stylesheet" type="text/css" href="probystylu.css" media="screen" /> </head> <body>  <img src="assets.gif" alt="rysunek"/> <h1>rysunki i tekst</h1> <p>ąęółśżźć bbbbbbbbbbbbbbbbbbbbbbbb<br/> ccccccccccccccccccccccccccc</p> <br class="linia"/>  <p>dddddddddddddddddddddddd<br/> eeeeeeeeeeeeeeeeeeeeeeeeeee</p> </body> </html>

10 Rysunek z góry tekstu pogrubioną ramką <img src="assets.gif" border="10" alt="" /> <br clear ="all" />

11 4.3.2.Zatosowanie arkusza stylów img { outline-color:black; outline-style:solid; outline-width:10px.linia{ clear:none

12 5. Zastosowanie pseudoklas do wyświetlania obrazów img { outline-color:black; outline-style:solid; outline-width:10px img.obraz:active{ margin-left:50px; img.obraz:hover{ margin-top:50px;.linia{ clear:left

13 hover Kursor przesunięty na obrazek active Kliknięcie lewym klawiszem myszy na obrazek

14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>osadzanie rysunków</title> <link rel="stylesheet" type="text/css" href="probystylu.css" media="screen" /> </head> <body> <img src="assets.gif" class="obraz" alt="rysunek"/> <h1>rysunki i tekst</h1> <p>ąęółśżźć bbbbbbbbbbbbbbbbbbbbbbbb<br/> ccccccccccccccccccccccccccc</p> <br class="linia"/> <p>dddddddddddddddddddddddd<br/> eeeeeeeeeeeeeeeeeeeeeeeeeee</p> </body> </html>

15 Pseudo-klasy Pseudo-classes On-line examples Pseudo-class :active :focus :hover :link :visited :first-child :lang Purpose Adds special style to an activated element Adds special style to an element while the element has focus Adds special style to an element when you mouse over it Adds special style to an unvisited link Adds special style to a visited link Adds special style to an element that is the first child of some other element Allows the author to specify a language to use in a specified element

16 Obrys elementu Property outline Outlines outline-color outline-style outline-width Description A shorthand property for setting all the outline properties in one declaration Sets the color of the outline around an element Sets the style of the outline around an element Sets the width of the outline around an element Values outline-color outline-style outline-width color invert none dotted dashed solid double groove ridge inset outset thin medium thick length

Podobne dokumenty

Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz

Wykład 5_2 Arkusze stylów dziedziczenie Technologie internetowe Zofia Kruczkiewicz 1. Dziedziczenie stylów Zagnieżdżone elementy dziedziczą styl od elementów zagnieżdżających. Dziedziczenie stylu wynika