18 Contoh Code Html Untuk Membuat Gambar Grafika Komputer Dasar


pada artikel ini weonesite akan mencoba mebahas tentang 18 Code Html Untuk Membuat Gambar Grafika Komputer Dasar.
menggambar dengan html
1. lingkaran kuning hijau



<!DOCTYPE html>

<html>

<body>

<svg width="100" height="100">

<circle cx="50" cy="50"

r="40" stroke="green" stroke-width="4"

fill="yellow" />


</svg>

</body>

</html>





gambar lingkaran kuning hijau



contoh kode 1 diatas akan menampilkan hasil gambar dengan ukuran 50x50 dengan ketebalan garis(hijau) =4



2. gambar lingkaran biru ungu      

<!DOCTYPE html>

<html>

<body>

<svg height="140" width="500">

<ellipse cx="200" cy="80"

rx="100" ry="50"

style="fill:blue;stroke:purple;stroke-width:2" />


</svg>

</body>

</html>



code html diatas akan menampilakan gambar dengn ukuran 140x500 dengan ketebalan garis (ungu)=2



3.       gambar variasi lingkaran kotak dan garis



<!DOCTYPE html>

<html>

<body>

<?xml version="1.0" encoding="UTF-8"

?>


<svg width="800" height="600"

xmlns="http://www.w3.org/2000/svg" version="1.1">


<rect x="25" y="25"

width="200" height="200" fill="lime"

stroke-width="4" stroke="black" />


<circle cx="125" cy="125"

r="75" fill="orange" />


<polyline points="50,100 50,200 200,200

200,100" stroke="red" stroke-width="3"

fill="none"


/>

<line x1="30" y1="30"

x2="210" y2="210" stroke="cyan"

stroke-width="1" />


<line x1="60" y1="50"

x2="210" y2="50" stroke="blue"

stroke-width="2" />


</svg>

</body>

</html>









4. membuat gambar dengan 3 titik pusat + garis



<!DOCTYPE html>

<html>

<body>

<svg height="400" width="450">

<path id="lineAB" d="M 100 350 l 150

-300" stroke="red" stroke-width="3"

fill="none" />


<path id="lineBC" d="M 250 50 l 150

300" stroke="red" stroke-width="3"

fill="none" />


<path d="M 175 200 l 150 0"

stroke="green" stroke-width="3" fill="none" />


<path d="M 100 350 q 150 -300 300 0" stroke="blue"

stroke-width="5" fill="none" />


<!-- Mark relevant points -->

<g stroke="black" stroke-width="3"

fill="black">


<circle id="pointA" cx="100"

cy="350" r="3" />


<circle id="pointB" cx="250"

cy="50" r="3" />


<circle id="pointC" cx="400"

cy="350" r="3" />


</g>

<!-- Label the points -->

<g font-size="30"

font-family="sans-serif" fill="black"

stroke="none" text-anchor="middle">


<text x="100" y="350"

dx="-30">A</text>


<text x="250" y="50"

dy="-10">B</text>


<text x="400" y="350"

dx="30">C</text>


</g>

</svg>

</body>

</html>



kode diatas bisa kita coba untuk membuat gambar dengan 3 titik pusat + garis sehingga hasilnya menyerupai huruf A



5. Gambar garis 6 titik pusat

<!DOCTYPE html>

<html>

<body>

<svg height="400" width="500">

<line x1="0" y1="0"

x2="200" y2="200"

style="stroke:rgb(255,0,0);stroke-width:2" />


<line x1="100" y1="40"

x2="300" y2="40"

style="stroke:rgb(255,255,0);stroke-width:3" />


<line x1="40" y1="60"

x2="40" y2="300"

style="stroke:rgb(0,255,255);stroke-width:1" />


</svg>

</body>

</html>



code diatas akan menampilkan hasil 3 garis yang setiap garis memiliki 2 titik pusat sehingga hasilnya seluruh titik pusat berjumlah 6





6. Gambar segitiga




<!DOCTYPE html>


<html>


<body>


<svg height="210" width="400">


<path d="M150 0 L75 200 L225 200 Z" />


</svg>


</body>


</html>




code ditas akan menampilakn hasil segitiga dengan warna hitam



7. gambar bintang



<!DOCTYPE html>

<html>

<body>

<svg width="300" height="200">

<polygon points="100,10 40,198 190,78 10,78

160,198"


 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"

/>


</svg>

</body>

</html>





gambar bintang





8. gambar bintang

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="100,10 40,198 190,78 10,78

160,198"


style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>

</svg>

</body>

</html>



code yang ke-8 ini hampir sama dengan yang ke-7 perbedaannya pada gambar ke 8 ini hasil dari code html akan menampilkan gambar bintang dengan full colour sedangkan pada gambar 7 titik tengah transparan.



9. segitiga

<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="200,10 250,190 160,210"

style="fill:lime;stroke:purple;stroke-width:1" />


</svg>

</body>

</html>



untuk kode segitiga pade code html ke 9 ini sisi kanan memiliki ukurang yang lebih pendek daripada sisi kiri sehingga akan terlihat gambar segitiga yang tidak lurus.



10. segita



<!DOCTYPE html>

<html>

<body>

<svg height="250" width="500">

<polygon points="220,10 300,210 170,250

123,234"


style="fill:lime;stroke:purple;stroke-width:1"

/>


</svg>

</body>

</html>



pada contoh code ke 10 ini segitiga akan divariasi sehingga gambar segitiganya akan terlihat perbedaan pada segi garis dibawah nya.



11. garis tangga





<!DOCTYPE html>

<html>

<body>

<svg height="180" width="500">

<polyline points="0,40 40,40 40,80 80,80 80,120

120,120 120,160"


style="fill:white;stroke:red;stroke-width:4" />

</svg>

</body>

</html>



code diatas akan menampilkan gambar gabungan antara beberapa garis sehigga akan menciptakan pola seperti tangga



12. garis

<!DOCTYPE html>

<html>

<body>

<svg height="200" width="500">

<polyline points="20,20 40,25 60,40 80,120 120,140

200,180"


style="fill:none;stroke:black;stroke-width:3"

/>


</svg>

</body>

</html>



code ke 12 akan membuat garis yang memiliki 4 titik tumpu sekaligus tapi titik tumpu tadi tidak berada pada satu arah sehingga garisnya akan terlihat tidak beraturan.



13. persegi panjang



<!DOCTYPE html>

<html>

<body>

<svg width="400" height="100">

<rect width="400" height="100"

style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"


/>

</svg>

</body>

</html>



dengan kelebaran 400 dan ketinggian 100 kode diatas akan menampilkan gambar yg berbentuk segipanjang.



14. kotak



<!DOCTYPE html>

<html>

<body>

<<svg width="400" height="180">

<rect x="50" y="20" rx="20"

ry="20" width="150" height="150"


 style="fill:red;stroke:black;stroke-width:5;opacity:0.5"

/>


</svg>

</body>

</html>



contoh 14 menampilkan gambar kotak yang tumpul pada setiap ujungnya



15. 3 kotak sekaligus

<!DOCTYPE html>

<html>

<body>

<svg width="800" height="600">

<rect x="10" y="10"

width="200" height="80"


style="fill:rgb(255,2550,0);stroke-width:2;stroke:rgb(200,200,200)"

/>


<rect x="10" y="110"

width="200" height="100"


style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(160,160,160)"

/>


<rect x="10" y="240"

width="200" height="140"


style="fill:rgb(255,0,0);stroke-width:4;stroke:rgb(120,120,120)"

/>


</svg>

</body>

</html>





3 kotak sekaligus





16. segiempat



<!DOCTYPE html>

<html>

<body>

<svg width="600" height="600">

<rect

x="50" y="10"

width="200" height="400"

fill="blue" stroke="red"

stroke-width="3px"

rx="0" ry="0"

id="myRect" class="chart" />

</svg>

</body>

</html>



contoh 16 akan menampilkan hasil dengan panjang 200 dan tinggi 400 sehigga akan terlihat gambar kotak panjang



17. kotak pudar



<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20"

width="150" height="150"


style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9">

</svg>

</body>
</html>



kode 17 akan menampilakan hasil dengan tingkat ketajaman warna 0.1 (pudar)



18. kotak pudar

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20"

width="150" height="150"


style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">

</svg>

</body>

</html>



kode 18 akan menampilakan hasil dengan tingkat ketajaman warna 0.1 (pudar) bedanya dengan gambar 17 warna code ini biru dengan garis luar pink.



cara menggunakan 18 Contoh Code Html Untuk Membuat Gambar Grafika Komputer Dasar


18 contoh code tersebut dapat di coba 1 persatu dengan menggunakan html tesk editor misal notepad atau notepad++ setelah di copy disimpan dengan eksistenti .html lalu buka menggunakan browser dan lihat hasilnya. 18 code dasar tersebut dapat divariasi sesuai dengan kebutuhan baik dari segi warna, titik tumpu ketebalan garis dll.

cukup sekian artikel tentang 18 Contoh Code Html Untuk Membuat Gambar Grafika Komputer Dasar. semoga menambah wawasan dan manfaat..!!

No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel