SVG | HTML

Halo! IT Corner hari ini saya mempelajari tentang SVG dalam HTML. Apa itu SVG? Nah, SVG itu sebuah grafik yang scalable, artinya jika diperbesar atau diubah ukurannya tidak akan hilang kualitas gambarnya.

SVG dibuat dengan menggunakan elemen <svg>. Elemen ini digunakan sebagai wadah untuk grafik-grafiknya. Setelah itu, diberi ukuran, misalnya 500px × 500px. Untuk grafiknya sendiri ada beberapa jenis sebagai berikut.

Grafik yang pertama adalah lingkaran yang dibuat dengan elemen <circle>. Untuk atributnya ada cx, cy, r, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut r adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik kedua adalah persegi panjang yang dibuat dengan elemen <rect>. Untuk atributnya ada x, y, width, height, fill, stroke, dan stroke-width. Atribut x dan y adalah posisi koordinatnya. Atribut width adalah panjangnya, dan height adalah lebarnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik yang ketiga adalah polygon yang dibuat dengan elemen <polygon>. Untuk atributnya hanya ada points. Namun bisa diberi style, seperti fill, fill-rule, stroke, dan stroke-width. Atribut points adalah posisi titik-titik dalam suatu koordinat. Style fill adalah warna polygonnya, dan fill-rule adalah algoritma untuk menentukan warna. Style stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik keempat adalah ellipse yang dibuat dengan elemen <ellipse>. Untuk atributnya ada cx, cy, rx, ry, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut rx dan ry adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik kelima adalah teks yang dibuat dengan elemen <text>. Untuk atributnya ada x, y, fill, font-family, dan font-size. Atribut x dan y adalah posisi koordinatnya. Atribut fill adalah warna teksnya. Atribut font-family adalah jenis fontnya, dan font-size adalah ukuran fontnya.

Itu saja untuk materi SVG, selamat jumpa di blog materi berikutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Graphic</title>
    <style>
        body {
            background-color: black;
            padding: 10px;
        }
        svg {
            background-color: rgb(15, 15, 15);
            border: 4px solid white;
            border-radius: 4px;
            display: block;
            margin: auto;
        }
        .svg-container {
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="svg-container">
        <svg width="1000" height="510">
            <polygon points="250,140 150,300 350,300"
            style="fill: none; stroke: white; stroke-width: 6; fill-rule: evenodd;"></polygon>
            <polygon points="250,160 170,290 330,290"
            style="fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 4; fill-rule: evenodd;"></polygon>
            <polygon points="250,180 190,280 310,280"
            style="fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; fill-rule: evenodd;"></polygon>

            <circle cx="250" cy="245" r="50" fill="none" stroke="white" stroke-width="4"></circle>
            <rect x="255" y="253" width="15" height="71" fill="white" stroke="white" stroke-width="2"></rect>
            <rect x="230" y="270" width="15" height="54" fill="white" stroke="white" stroke-width="2"></rect>
            <polygon points="245,252 238,266 169,231 176,217"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="241,223 234,237 180,210 187,196"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="244,231 251,245 320,210 313,196"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="271,244 278,258 332,231 325,217"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>

            <text fill="white" x="570" y="250" font-size="45" font-family="Lucida Console">Welcome</text>
            <text fill="white" x="640" y="320" font-size="40" font-family="Lucida Console" font-style="italic">Overseer</text>

            <text fill="white" x="370" y="450" font-size="25" font-family="Lucida Console">Begin simulation</text>
            <polygon points="350,440 330,430 330,450"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="320,440 300,430 300,450"
            style="fill: rgba(255, 255, 255, 0.75); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="630,440 650,430 650,450"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="660,440 680,430 680,450"
            style="fill: rgba(255, 255, 255, 0.75); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; fill-rule: evenodd;"></polygon>
        </svg>
    </div>
</body>
</html>

Form Input | HTML

Halo guys! Hari ini saya sebagai pemateri mengajari tentang elemen input yang bisa digunakan dalam elemen form. Langsung saja kita membahas materinya. Jadi elemen input itu memiliki beberapa jenis berdasarkan typenya. Jenisnya itu ada banyak, namun saya akan membahas yang text, radio, checkbox, submit, dan button saja. Elemen input yang typenya text digunakan untuk mengisi data dalam bentuk teks. Jenis ini hanya ada satu baris untuk mengisi data, namun bisa overflow untuk mengakomodasi text yang panjang. Input yang typenya radio hanya membolehkan user untuk memilih satu jawaban dari beberapa opsi pilihan. Jadi, jenis ini sama dengan pilihan ganda. Seterusnya, elemen input yang typenya checkbox membolehkan user memilih lebih dari satu opsi dari beberapa opsi pilihan. Jenis ini sama dengan pilihan ganda kompleks. Selanjutnya input yang typenya submit biasa digunakan untuk mengirimkan data yang telah diisi ke server. Jenis ini seringkali ditemui dalam elemen form. Terakhir yang typenya bu...

Brillianta Febimas Winawan

Search This Blog

SVG | HTML

Labels

Comments

Post a Comment

Popular posts from this blog

Form Input | HTML

Operators | PHP