Mengenal HTML

Gambar
Apa itu HTML Di halaman ini Apa itu HTML ? Pengertian HTML Browser Web Dokumen HTML Pengertian HTML HTML adalah singkatan dari Hyper Text Markup Language HTML merupakan sebuah bahasa kode standar untuk membuat halaman Web HTML mendefinisikan bentuk halaman Web. HTML disusun oleh rangkaian elemen-elemen. Elemen HTML merupakan instruksi untuk browser tentang bagaimana cara menampilkan konten yang ada didalamnya. Elemen HTML juga memberikan petunjuk untuk browser tentang setiap konten yang dimuat, misal: "ini adalah judul", "ini adalah paragraf", "ini adalah tautan", dll. Ini adalah kode HTML dari penjelasan "Apa itu HTML" <ol> <li><b>HTML</b> adalah singkatan dari <b class='code'><b>Hyper Text Markup Language</b></b></li> <li><b>HTML</b> merupakan sebuah bahasa kode standar untuk membuat halaman Web...

CSS Gradient

Pengertian gradient Di halaman ini Apa itu Gradient ? Pengertian gradient Jenis gradient Linear gradient Radial gradient Conic gradient Pengertian gradient gradient adalah perpaduan dua warna atau lebih yang menciptakan pembauran halus pada pertemuan kedua warna tersebut yang . gradient terbagi menjadi 3 jenis : Linear Gradient :arah susunan warna (atas/bawah/kiri/kanan/diagonal) Radial Gradient :susunan warna terpusat ditengah elemen. Conic Gradient :susunan warna melingkar. Linear Gradient <div class='linear1'>linear gradient</div> <div class='linear2'>linear gradient</div> <div class='linear3'>linear gradient</div> <div class='linear4'>repeating linear gradient</div> <style> div { color: white; padding:10px; height:100px; border: 1px groove darkblue; text-align: center;} } .linear1 {background: linear-gradient(blue,orange);...

Ikon Cursor

Gambar
Tampilan cursor berdasarkan fungsi Di halaman ini Ikon Cursor Ikon default kursor Tabel ikon kursor Mengganti ikon kursor Tampilan Default Cursor Tampilan cursor pada umumnya adalah berbentuk panah penunjuk : Pada saat cursor menyorot teks, tampilannya akan berubah seperti ini : Tampilan cursor juga berubah dipermukaan elemen tombol atau link menjadi seperti ini : Tampilan cursor pada dasarnya bergantung terhadap perangkat yang digunakan. Setiap perangkat misal laptop atau komputer biasanya memiliki pengaturan khusus untuk tampilan cursor. Dalam CSS pengaturan cursor lebih kepada permintaan agar perangkat menampilkan cursor sesuai nilai properti yang ditentukan. Tabel nilai properti cursor Arahkan cursor ke kolom test untuk melihat tampilan sesuai nilai cursor. No. Value CSS test 1. alias {cursor: alias ;} 2. all-scroll {cursor: all-scroll ;} 3. auto {cursor: auto ;} 4. cell {cursor: cell ;} 5. col-resize {...

CSS Tombol

Memberi gaya pada tombol dengan CSS Di halaman ini CSS Tombol Elemen tombol Kustom tombol Border tombol Background tombol Hover tombol Elemen tombol <button> merupakan elemen HTML yang berfungsi untuk memulai eksekusi suatu tindakan dihalaman web. Sehingga biasanya tampilan elemen ini akan didesain kontras (mencolok) agar mudah terlihat. Contoh tampilan tombol default tanpa kustom: Tombol 1 Kirim Mengkustom tombol padding; margin; border-radius <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <style> button { color: inherit; padding: 10px 25px; margin: 5px; border-radius: 8px;} </style> Tombol Tombol Tombol Tombol Tombol Tombol Mengatur border tombol. Tombol Tombol Tombol Tombol Tombol Tombol <button clas...

CSS Float

Properti CSS - Float Di halaman ini CSS float Pengertian float Dampak CSS float Elemen float over height Pengertian float Float berarti mengambang. Properti float pada suatu elemen membuat kedudukan elemen "terangkat" dari tempat asalnya. Sebelum float 1 2 float 3 4 5 Sesudah float 1 2 float 3 4 5 Properti float merupakan properti sifat yang menetapkan sifat float (mengambang) pada elemen. Dimana nilai (value) properti float ini mendeklarasikan arah float-nya yaitu : 1. left (kiri). 2. right (kanan). Contoh diatas menggunakan float : right ; Lihat Kode contoh <div class='induk'> <div class='konten'>1</div> <div class='konten'>2</div> <div class='konten float-r'>float 3</div> <div class='konten'>4</div> <div class='konten'>5</div> </div> <style> .induk{ padding:5p...

CSS Flex

Properti CSS flex Di halaman ini CSS flex Pengertian flex Menerapkan properti flex Mengatur jarak elemen flex Mengatur penyebaran elemen flex Memutus baris elemen flex Mempertahankan baris elemen flex Membalikkan arah urutan elemen flex Pengertian flex flex berasal dari kata flexible (lentur / fleksibel). Fungsi properti flex Properti flex berfungsi untuk mengatur fleksibilitas kelompok elemen (group). Membuat elemen grup : <div class='induk'> <div class='item konten-1'>konten 1</div> <div class='item konten-2'>konten 2</div> <div class='item konten-3'>konten 3</div> <div class='item konten-4'>konten 4</div> <div class='item konten-5'>konten 5</div> <div class='item konten-6'>konten 6</div> </div> <style> .induk { background: #f1f1f1; } .konten-1 { ...

CSS Overflow

Mengatur kelebihan ukuran konten yang melanggar batas elemen induknya kelebihan (OVERFLOW-Y) kelebihan (OVERFLOW-X) Overflow adalah pada saat suatu elemen tidak dapat "menampung" konten yang berada didalamnya. Atau sebaliknya : Pada saat suatu konten berukuran melebihi elemen induknya (parents element), seperti pada ilustrisi diatas. Kenapa disebut overflow (kelebihan aliran) ? Karena pada dasarnya halaman web berfungsi memuat informasi berupa teks. Dan teks memiliki arah baca dan juga arah dalam penulisannya baik dari arah kiri ke kanan atau sebaliknya. Arah baca / tulis inilah yang istilahkan sebagai aliran (flow), lebih tepatnya aliran teks. Dan ketika teks melampaui batas areanya disebut overflow atau aliran yang berlebih. Istilah tersebut diterapkan untuk semua jenis elemen HTML dan dimasukkan sebagai salah satu properti CSS yang berfungsi untuk mengatur / menentukan bagaimana kelebihan elemen tersebut harus ditampilkan. Properti CSS - overflow...

CSS Position

Mengatur posisi elemen dengan CSS Untuk menentukan letak elemen dengan CSS, salah satu cara yang dapat diterapkan adalah menggunakan properti posisi . Penerapan cara ini melalui 2 tahap berikut ini : 1. Menetapkan sifat elemen. Menggunakan properti position . Properti position ini berfungsi untuk menentukan sifat elemen . Detail value dari properti position: tersebut adalah : 1. static : Bersifat tetap ditempat semula. 2. relative : Bersifat menyesuaikan. 3. fixed : Bersifat permanen ditempat yang ditentukan. 4. absolute : Bersifat mutlak meninggalkan tempat asalnya. 5. sticky : Bersifat menempel. 2. Mengatur posisi elemen. Elemen yang sifatnya telah ditetapkan memerlukan properti letak untuk mengatur posisinya : 1. top : mengatur posisi elemen ke atas. 2. bottom : mengatur posisi elemen ke bawah. 3. left : mengatur posisi elemen ke kiri. 4. right : mengatur posisi elemen ke kanan. CATATAN : Properti letak TIDAK berlaku untuk elemen dengan properti pos...

CSS Max & Min

Mengatur ukuran panjang dengan properti pembatas max & min Pada materi sebelumnya telah dijelaskan bagaimana Mengatur width dan height suatu elemen, dimana pengaturan tersebut adalah untuk menentukan ukuran tetap suatu elemen. Selanjutnya disini akan menjelaskan cara mengatur ukuran suatu elemen dengan cara memberikan batas ukuran pada elemen. Ketentuan atribut pembatas max- & min- berlaku untuk atribut width dan height elemen. min-width / min-height : Berarti mengatur ukuran elemen dengan memberikan batas terkecil (minimal). Sehingga ukuran suatu elemen bisa bertambah semaksimal mungkin sesuai elemen induknya. max-width / max-height : Berarti mengatur ukuran elemen dengan memberikan batas terbesar (maksimal). Sehingga ukuran elemen tidak bisa melebihi batas tersebut. Fungsi penggunaan properti pembatas max- & min- Properti min- & max- ini sangat penting dalam mendesain halaman web responsive. Yaitu : Untuk menjaga area pandang halaman web...