Skip to main content

Langkah - langkah pembuatan website

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman, melainkan bahasa penanda (markup language) yang digunakan untuk menyusun struktur konten seperti teks, gambar, tautan, tabel, formulir, dan elemen lainnya di halaman web. 

Pembuatan Logo

10%

Pengeditan Foto untuk website

30%

Pemrograman Website

80%

Design Website

90%

Integrasi Database

100%

Call to action

Silakan tekan tombol dibawah ini jika ada pertanyaan atau saran

HTML

  • Menyusun struktur dasar halaman web.

  • Menandai bagian-bagian konten (judul, paragraf, gambar, tautan, dll).

  • Bekerja sama dengan CSS (untuk tampilan) dan JavaScript (untuk interaktivitas).

  • Menjadi dasar dari semua halaman web di internet.

    • Fungsi HTML

  • Ditulis menggunakan tag (penanda) yang diawali dan diakhiri, seperti <p>...</p>.

  • Dapat digabungkan dengan CSS dan JavaScript.

  • Bersifat statik (tidak memiliki logika seperti perulangan atau pengkondisian tanpa bantuan bahasa lain).

    • Ciri-ciri HTML

    • CSS → untuk mempercantik tampilan halaman (warna, layout, font).

    • JavaScript → untuk membuat halaman lebih interaktif (validasi form, efek dinamis).

    • Framework HTML seperti Bootstrap → untuk desain responsif dan cepat.

    HTML Digunakan Bersama

    🔧 1. Pick Tool

    • Fungsi: Memilih, memindahkan, memperbesar, memperkecil, dan memutar objek.

    • Shortcut: Spacebar atau F10

    • Catatan: Tool utama dalam pengeditan.

    🔲 2. Shape Tool

    • Fungsi: Mengedit bentuk objek seperti mengubah node pada kurva atau sudut kotak.

    • Shortcut: F10

    🔄 3. Free Transform Tool

    • Fungsi: Memutar, memiringkan, mengubah ukuran, dan memantulkan objek.

    ✏️ 4. Crop Tool

    • Fungsi: Memotong sebagian gambar atau objek.

    🔳 5. Zoom Tool

    • Fungsi: Memperbesar atau memperkecil tampilan area kerja.

    • Shortcut: Z

    ✋ 6. Pan Tool

    • Fungsi: Menggeser tampilan halaman kerja tanpa mengubah posisi objek.

    ⬛ 7. Rectangle Tool

    • Fungsi: Membuat bentuk persegi atau persegi panjang.

    • Shortcut: F6

    ⭕ 8. Ellipse Tool

    • Fungsi: Membuat lingkaran atau oval.

    • Shortcut: F7

    🌟 9. Polygon Tool

    • Fungsi: Membuat bentuk segi banyak (polygon), bintang, spiral, dll.

    ✏️ 10. Freehand Tool

    • Fungsi: Menggambar garis bebas, garis lurus, dan kurva tangan bebas.

    ✒️ 11. Bezier Tool

    • Fungsi: Menggambar garis dengan titik kontrol secara presisi.

    🔠 12. Text Tool

    • Fungsi: Membuat dan mengedit teks artistik atau paragraf.

    • Shortcut: F8

    🪄 13. Interactive Blend Tool

    • Fungsi: Menggabungkan dua objek dengan gradasi bentuk dan warna.

    🌈 14. Interactive Fill Tool

    • Fungsi: Memberi warna gradasi, pola, atau tekstur pada objek.

    🔤 15. Eyedropper Tool

    • Fungsi: Mengambil dan menerapkan warna atau properti dari satu objek ke objek lain.

    🧲 16. Interactive Drop Shadow Tool

    • Fungsi: Memberikan efek bayangan (shadow) ke objek secara interaktif.

    🔥 17. Transparency Tool

    • Fungsi: Memberikan efek transparansi ke objek.

    🧵 18. Smart Fill Tool

    • Fungsi: Mengisi area tertutup dari gabungan garis menjadi objek berwarna.

    🎯 19. Outline Tool

    • Fungsi: Mengatur ketebalan, warna, dan jenis garis tepi objek.

    🎨 20. Fill Tool

    • Fungsi: Memberikan warna solid, gradasi, atau pola ke dalam objek.

    ✂️ 21. Knife Tool

    • Fungsi: Memotong objek menjadi dua bagian.

    📐 22. Dimension Tool

    • Fungsi: Menampilkan ukuran panjang atau lebar objek (khusus teknis).

    Materi 1

    IkonNama ToolKegunaan
    🖱️Move Tool (V)Memindahkan objek/layer.
    🔲Marquee Tool (M)Membuat seleksi berbentuk persegi, elips, baris/kolom.
    🔧Lasso Tool (L)Membuat seleksi bebas, poligon, atau magnetic.
    🪟Quick Selection / Magic Wand (W)Seleksi otomatis berdasarkan warna/area serupa.
    ✂️Crop Tool (C)Memotong gambar.
    📐Slice Tool (K)Membagi gambar untuk web.
    🎯Healing Brush / Spot Healing (J)Menghilangkan noda, bercak, atau cacat pada gambar.
    🔨Patch ToolMemperbaiki area gambar dengan menyalin tekstur dari area lain.
    🖌️Brush Tool (B)Melukis dengan kuas.
    ✏️Pencil ToolMenggambar garis keras (tanpa halus).
    🌫️Clone Stamp Tool (S)Menyalin area gambar ke area lain.
    🌀Pattern Stamp ToolMenggambar dengan pola yang sudah ditentukan.
    🧽History Brush Tool (Y)Mengembalikan bagian gambar ke keadaan sebelumnya.
    🖼️Art History BrushMenggambar dengan gaya artistik dari history.
    🩸Eraser Tool (E)Menghapus bagian gambar/layer.
    ✨Magic Eraser ToolMenghapus warna serupa secara otomatis.
    🧯Gradient Tool (G)Memberi gradasi warna.
    🎨Paint Bucket ToolMengisi area dengan warna solid.
    🧲Blur / Sharpen / Smudge ToolsBlur = mengaburkan, Sharpen = mempertajam, Smudge = mencoreng.
    🟡Dodge Tool (O)Mencerahkan area gambar.
    ⚫Burn ToolMenggelapkan area gambar.
    🎭Sponge ToolMengubah saturasi warna (meningkatkan/menurunkan).
    📝Type Tool (T)Menambahkan teks (horizontal/vertikal).
    🖍️Pen Tool (P)Membuat jalur (path) vektor.
    📐Path Selection Tool (A)Memilih dan mengedit path.
    📦Rectangle / Shape Tools (U)Membuat bentuk vektor (persegi, lingkaran, poligon, custom shape).
    🖼️Hand Tool (H)Menggeser tampilan area kerja.
    🔍Zoom Tool (Z)Membesarkan atau mengecilkan tampilan gambar.
    🎨Foreground/Background ColorMengatur warna depan dan belakang.
    🔄Switch ColorsMenukar warna foreground dan background.
    ❌Quick Mask Mode (Q)Membuat seleksi dengan mode mask.
    📑Screen ModeMengubah tampilan layar (normal, fullscreen, dsb).

    Tag Dasar Dokumen:

    <!DOCTYPE html>: Mendeklarasikan tipe dokumen HTML5. Harus berada di baris pertama dokumen.

    <html>: Elemen akar yang membungkus seluruh konten HTML.

    <head>: Berisi metadata tentang dokumen HTML, seperti judul, style, dan link ke stylesheet eksternal. Tidak ditampilkan langsung di halaman web.

    <title>: Menentukan judul dokumen yang ditampilkan di tab browser. Penting untuk SEO.

    <body>: Berisi konten utama dokumen HTML yang ditampilkan di browser.

    Tag Metadata:

    <meta>: Menyediakan metadata tentang dokumen HTML, seperti charset, deskripsi, dan keyword. Penting untuk SEO dan informasi browser. Contoh: <meta charset="UTF-8">, <meta name="description" content="Deskripsi halaman">

    <base>: Menentukan URL dasar untuk semua URL relatif dalam dokumen. Berguna jika semua link internal berada dalam direktori yang sama.

    <link>: Menghubungkan ke sumber daya eksternal, seperti stylesheet CSS (<link rel="stylesheet" href="style.css">) atau favicon (<link rel="icon" href="favicon.ico">).

    <style>: Menyisipkan style CSS inline di dalam dokumen HTML.

    Tag Formatting Teks:

    <h1> sampai <h6>: Mendefinisikan heading (judul) dari level 1 sampai 6. <h1> adalah heading terpenting.

    <p>: Mendefinisikan paragraf.

    <br>: Memasukkan baris baru (line break).

    <hr>: Membuat garis horizontal.

    <a>: Membuat hyperlink (tautan). Atribut href menentukan tujuan tautan. Contoh: <a href="https://www.google.com">Google</a>

    <em>: Menekankan teks (biasanya ditampilkan miring).

    <strong>: Menandai teks sebagai penting (biasanya ditampilkan tebal).

    <b>: Membuat teks tebal (sebaiknya gunakan <strong> untuk semantik yang lebih baik).

    <i>: Membuat teks miring (sebaiknya gunakan <em> untuk semantik yang lebih baik).

    <u>: Memberikan garis bawah pada teks (sebaiknya gunakan CSS untuk styling).

    <mark>: Menandai teks yang disorot.

    <small>: Membuat teks berukuran kecil.

    <del>: Mendefinisikan teks yang dihapus.

    <ins>: Mendefinisikan teks yang disisipkan.

    <sub>: Mendefinisikan teks subscript (misalnya H₂O).

    <sup>: Mendefinisikan teks superscript (misalnya x²).

    <abbr>: Mendefinisikan singkatan. Atribut title memberikan kepanjangan singkatan.

    <address>: Mendefinisikan informasi kontak.

    <blockquote>: Mendefinisikan kutipan panjang.

    <cite>: Mendefinisikan judul karya yang dikutip.

    <code>: Mendefinisikan potongan kode komputer.

    <pre>: Mendefinisikan teks yang diformat sebelumnya (mempertahankan spasi dan baris baru).

    <kbd>: Mendefinisikan input keyboard.

    <samp>: Mendefinisikan contoh output dari program komputer.

    <var>: Mendefinisikan variabel.

    Tag List (Daftar):

    <ul>: Membuat unordered list (daftar tanpa urutan).

    <ol>: Membuat ordered list (daftar dengan urutan).

    <li>: Mendefinisikan item dalam list.

    <dl>: Membuat description list (daftar deskripsi).

    <dt>: Mendefinisikan term (istilah) dalam description list.

    <dd>: Mendefinisikan deskripsi dari term dalam description list.

    Tag Tabel:

    <table>: Membuat tabel.

    <caption>: Memberikan judul pada tabel.

    <tr>: Mendefinisikan baris dalam tabel.

    <th>: Mendefinisikan header cell dalam tabel.

    <td>: Mendefinisikan data cell dalam tabel.

    <thead>: Mengelompokkan header content dalam tabel.

    <tbody>: Mengelompokkan body content dalam tabel.

    <tfoot>: Mengelompokkan footer content dalam tabel.

    <col>: Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>.

    <colgroup>: Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat.

    Tag Form:

    <form>: Membuat form untuk input pengguna.

    <input>: Membuat kontrol input (text, password, checkbox, radio, dll). Atribut type menentukan jenis input.

    <textarea>: Membuat area input teks multiline.

    <button>: Membuat tombol.

    <select>: Membuat dropdown list.

    <option>: Mendefinisikan opsi dalam dropdown list.

    <label>: Memberikan label pada elemen form.

    <fieldset>: Mengelompokkan elemen form.

    <legend>: Memberikan judul pada fieldset.

    <datalist>: Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input.

    <output>: Menampilkan hasil perhitungan.

    Tag Media:

    <img>: Menyisipkan gambar. Atribut src menentukan sumber gambar.

    <audio>: Menyisipkan audio.

    <video>: Menyisipkan video.

    <source>: Menentukan sumber media untuk <video> dan <audio>.

    <track>: Menambahkan teks trek (subtitel) untuk media.

    <canvas>: Membuat area untuk menggambar grafik menggunakan script.

    <svg>: Menyisipkan grafik vektor SVG.

    Tag Embedded Content:

    <iframe>: Menyisipkan inline frame (iframe).

    <object>: Menyisipkan objek eksternal.

    <embed>: Menyisipkan konten eksternal, seperti plugin.

    Tag Semantic:

    <article>: Mendefinisikan artikel.

    <aside>: Mendefinisikan konten samping.

    <details>: Membuat widget interaktif yang dapat dibuka/ditutup.

    <summary>: Memberikan ringkasan untuk <details>.

    <nav>: Mendefinisikan navigasi.

    <header>: Mendefinisikan header untuk dokumen atau section.

    <footer>: Mendefinisikan footer untuk dokumen atau section.

    <section>: Mendefinisikan section dalam dokumen.

    <time>: Mendefinisikan tanggal dan/atau waktu.

    Tag Lainnya:

    <div>: Membuat division atau section dalam dokumen.

    <span>: Membuat inline container untuk styling.

    <noscript>: Menyediakan konten alternatif jika script tidak didukung.

    <script>: Menyisipkan client-side script (biasanya JavaScript).

    <center>: Tag ini digunakan untuk memposisikan teks atau elemen HTML di tengah halaman secara horizontal.

    <font>: Tag ini digunakan untuk mengatur jenis huruf (font), ukuran, dan warna teks.

    <u>: Tag ini digunakan untuk memberikan garis bawah pada teks.

    <applet>: Tag ini digunakan untuk menyisipkan applet Java ke dalam halaman web.

    <frame> dan <frameset>: Tag-tag ini digunakan untuk membagi jendela browser menjadi beberapa bagian (frame), yang masing-masing dapat menampilkan dokumen HTML yang berbeda.


    Apa itu CSS?

    CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mendeskripsikan presentasi dokumen yang ditulis dalam bahasa markup seperti HTML. CSS berfungsi sebagai pelapis estetika untuk situs web, memberikan kontrol atas tata letak, warna, font, dan elemen visual lainnya.

    Fungsi CSS

    CSS memiliki beberapa fungsi utama, antara lain:

    • Pemisahan Konten dan Presentasi: CSS memungkinkan pemisahan antara konten situs web (HTML) dan desainnya (CSS). Hal ini memudahkan perubahan desain tanpa harus mengubah konten situs web.

    • Konsistensi: CSS memastikan konsistensi desain di seluruh situs web, karena gaya dapat diterapkan ke beberapa halaman sekaligus.

    • Responsif: CSS memungkinkan situs web menyesuaikan tampilannya dengan berbagai perangkat, seperti komputer desktop, tablet, dan smartphone.

    • Aksesibilitas: CSS dapat digunakan untuk membuat situs web lebih mudah diakses oleh pengguna dengan disabilitas.

    Bagaimana CSS Bekerja?

    CSS bekerja dengan menerapkan aturan gaya ke elemen HTML. Aturan gaya ini terdiri dari pemilih (selector) dan deklarasi (declaration). Pemilih mengidentifikasi elemen HTML yang akan diberi gaya, sedangkan deklarasi menentukan gaya yang akan diterapkan.

    Cara Menerapkan CSS di HTML

    Terdapat tiga cara untuk menerapkan CSS di HTML:

    1. Inline CSS: Gaya diterapkan langsung ke elemen HTML menggunakan atribut style.

    2. Internal CSS: Gaya didefinisikan dalam bagian <head> dokumen HTML menggunakan tag <style>.

    3. External CSS: Gaya didefinisikan dalam file CSS terpisah dan ditautkan ke dokumen HTML menggunakan tag <link>.


    Pelajari penggunaaan CSS di Link :

    https://kodebinerdanos.my.canva.site/cssinformatika


    Berikut adalah daftar lengkap elemen pembentuk script CSS, mulai dari struktur dasar hingga fitur lanjutannya:

    1. Struktur Dasar (Selector, Property, Value)

    Ini adalah elemen paling mendasar dalam penulisan CSS.

    ElemenFungsiContoh Penulisan
    SelectorMenentukan elemen HTML mana yang akan diberi gaya.h1 { ... }
    PropertyAspek yang ingin diubah (warna, ukuran, dll).{ color: ... }
    ValueNilai yang diberikan kepada properti tersebut.{ color: red; }
    DeclarationGabungan satu properti dan satu nilai.font-size: 12px;
    Declaration BlockKumpulan deklarasi di dalam kurung kurawal { }.{ color: blue; margin: 0; }

    2. Jenis-Jenis Selector

    Cara kamu "memanggil" elemen di HTML sangat bervariasi.

    • Universal Selector (*): Memilih semua elemen tanpa terkecuali.

      • Contoh: * { margin: 0; }

    • Element Selector: Berdasarkan nama tag.

      • Contoh: p { line-height: 1.5; }

    • Class Selector (.): Berdasarkan atribut class. Bisa dipakai berulang kali.

      • Contoh: .tombol-biru { background: blue; }

    • ID Selector (#): Berdasarkan atribut id. Hanya boleh satu per halaman.

      • Contoh: #header-utama { height: 80px; }

    • Attribute Selector: Memilih elemen berdasarkan atribut tertentu.

      • Contoh: input[type="text"] { border: 1px solid grey; }

    3. Box Model (Konsep Ruang)

    Memahami bagaimana elemen dibungkus adalah kunci tata letak.

    • Content: Isi teks atau gambar.

    • Padding: Ruang antara konten dan garis tepi (dalam).

      • Contoh: padding: 10px 20px; (Atas-bawah 10px, kiri-kanan 20px).

    • Border: Garis tepi elemen.

      • Contoh: border: 2px solid black;

    • Margin: Ruang di luar garis tepi (jarak antar elemen).

      • Contoh: margin-top: 50px;

    4. Pseudo-Classes & Pseudo-Elements

    Digunakan untuk memberikan gaya pada "keadaan khusus" elemen.

    • :hover: Saat kursor berada di atas elemen.

      • Contoh: a:hover { color: orange; }

    • :nth-child(): Memilih elemen berdasarkan urutan (misal baris ganjil/genap tabel).

      • Contoh: tr:nth-child(even) { background: #eee; }

    • ::before / ::after: Menyisipkan konten melalui CSS sebelum/sesudah elemen.

      • Contoh: p::before { content: "💡 "; }

    5. CSS Variables (Custom Properties)

    Digunakan untuk menyimpan nilai yang akan dipakai berulang kali agar mudah diedit.

    • Fungsi: Menghindari pengulangan kode warna atau ukuran yang sama.

    • Contoh Penulisan:

    :root {

        --warna-utama: #ff5733;

    }


    button {

        background-color: var(--warna-utama);

    }


    6. Media Queries (Responsive)

    Elemen yang membuat website kamu menyesuaikan diri dengan ukuran layar.

    • Fungsi: Mengubah gaya khusus untuk HP, tablet, atau desktop.

    • Contoh Penulisan:


    /* Hanya berlaku jika lebar layar maksimal 600px (HP) */

    @media screen and (max-width: 600px) {

        body {

            font-size: 14px;

        }

    }


    7. Keyframes (Animation)

    Elemen untuk membuat gerakan pada halaman.

    • Fungsi: Mendefinisikan tahapan perubahan gaya dari awal ke akhir.

    • Contoh Penulisan:


    @keyframes muncul {

        from { opacity: 0; }

        to { opacity: 1; }

    }


    .foto {

        animation: muncul 2s ease-in;

    }


    8. At-Rules Lainnya

    • @import: Mengambil file CSS lain atau font dari internet.

      • Contoh: @import url('/g/fonts/...');

    • @font-face: Mengunggah file font milik sendiri ke website.