Grafika i multimedia

Grafika i multimedia w dokumentach HTML

Modele barw RGB - R (red), G (green), B (blue). Model jest stosowany podczas prezentacji na ekranie monitora lub obrazu z projektora. RGBA - dodatkowy współczynnik kanału alfa (przezroczystość). RGB HEX HSL - H (odcień), S (nasycenie), L (jasność). HSLA (przezroczystość). HSL CMYK - C (cyjan), M (magenta), Y (żółty), K (czarny). Model stosowany przy drukowaniu. HSV - H (odcień HUE), S (nasycenie SATURATION), V (wartość VALUE). Nazwy kolorów Kolor DodgerBlue rgb(255, 99, 71) kolor szary #ff6347 zapis skrócony #0f0 hsl(9, 100%, 64%) rgba(255, 99, 71, 0.8) hsla(9, 100%, 64%, 0.2)	<hr color="red" size="10"> <hr color="#00FF00" size="10"> <p style="color:DodgerBlue;">Kolor DodgerBlue</p> <p style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</p> <p style="background-color:rgb(150, 150, 150);">kolor szary</p> <p style="background-color:#ff6347;">#ff6347</p> <p style="background-color:#0f0;">zapis skrócony #0f0</p> <p style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</p> <p style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</p> <p style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</p>
	<img src="kwiatek.jpg" title="opis w chmurce" alt="tekst alternatywny">
	<img src="kwiatek.jpg" width=100 height=300>
	<img src="kwiatek.jpg" width=200>
	<img src="kwiatek2.jpg" alt="Brak pliku">
	Mapa obrazu <img src="kwiatekmapa.jpg" usemap="#mapa"> <map name="mapa"> <area shape="rect" coords="0,0,320,213" href="https://www.onet.pl" target="_blank"> <area shape="rect" coords="320,0,640,213" href="https://www.wp.pl" target="_blank"> <area shape="rect" coords="0,213,320,426" href="https://www.e03.pl" target="_blank"> <area shape="rect" coords="320,213,640,426" href="https://www.interia.pl/" target="_blank"> </map>
	Mapa obrazu <img src="kwiatek.jpg" usemap="#kolo"> <map name="kolo"> <area shape="circle" coords="320,213,100" href="https://www.onet.pl" target="_blank"> </map>
	Kontener grafiki SVG (ang. Scalable Vector Graphics)<svg width="200" height="200"> <rect x="40" y="40" width="150" height="150" stroke="black" fill="red"/> </svg>
	<svg width="200" height="200"> <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red"/> </svg>
	<svg width="500" height="140"> <ellipse cx="200" cy="80" rx="100" ry="50" stroke="green" stroke-width="5" fill="yellow"/> </svg>
	<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" stroke="blue" stroke-width="5" /> </svg>
	<svg height="220" width="500"> <polygon points="200,10 250,190 160,210" stroke="green" stroke-width="5" fill="yellow" /> </svg>
	<svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" stroke="blue" stroke-width="5" fill="white" /> </svg>
	Element Canvas definiuje kontener, który można wypełnić kolorem, tekstem, figurami geometrycznymi. Dzięki temu znacznikowi za pomocą skryptów JavaScript można tworzyć zaawansowane aplikacje graficzne. <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"> Sorry, your browser does not support canvas. </canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(0,0,150,75); </script>
	Znacznik <embed> <embed src="video.mp4" width="300px" height="200px">
	Znacznik <object> <object data="video.mp4" width="300" height="200"></object>
	Znacznik <audio> <audio controls autoplay loop muted> <source src="muzyka.wav" type="audio/wav"> </audio>
	Znacznik <video> <video width="500" controls autoplay loop poster="kwiatek.jpg"> <source src="video.mp4" type="video/mp4"> Nie można wyświetlić filmu. </video>
	Osadzanie filmu <iframe width="800" height="500" src="https://www.youtube.com/embed/xYycQNTOSbI" title="De Vlinderhof juli 2015 Part 1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Grafika i multimedia w dokumentach HTML

Modele barw