Postingan

Menampilkan postingan dari Januari, 2019
Gambar
CSS Float CSS Float digunakan untuk memposisikan elemen dalam sebuat layout halaman website. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Beberapa value yang digunakan untuk property float yaitu : left, right, none. Secara  default  float memiliki nilai none. float: none menentukan bahwa sebuah elemen tidak boleh mengapung (float). float: none;<!DOCTYPE html> <html> <head> <title>CSS Float</title> </head> <body> <img src="codepolitan.jpg"> <p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi. CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para developer Indonesia. </p> </body> </html> Bila kita lihat pada kode diatas float tidak d
Posting Komentar
Baca selengkapnya

Silahkan dibaca

Gambar
Konsep Client dan Server Bedasarkan fungsinya, pemrograman web dibagi menjadi dua yaitu frontend dan backend. Frontend adalah bagian web yang bisa dilihat secara langsung oleh pengguna. Misalnya, saat kita membuka Facebook atau Twitter, maka halaman-halaman yang muncul merupakan bagian dari frontend. Saat kita mendaftar, melakukan login, mengirim pesan, mengunggah gambar, dan aksi dimana kita perlu mengambil atau menyimpan data, maka aksi-aksi tersebut akan terjadi di backend yang tidak bisa kita lihat bagaimana aksi-aksi tadi terjadi. Frontend dan backend sangat erat kaitannya. Jika sebauh web hanya memiliki frontend, maka ia tidak bisa melakukan sesuatu yang dinamis. Kita tidak bisa mencari data atau menyimpan data di sebuah web yang tidak memiliki backend. Sebaliknya, jika kita hanya membuat backend-nya saja, pengguna tidak bisa berinteraksi dengan web yang kita buat yang menyebabkan web kita tidak ada yang memakai. Web Server / Hosting Hosting adalah penyewaan tempat untuk mena
Posting Komentar
Baca selengkapnya

Mengenal Fitur HTML5

Gambar
Contoh : <!DOCTYPE html> <html> <body> <audio autoplay="autoplay" controls="controls"> <source src="file.ogg"> <source src="file.mp3"> </audio> </body> </html> HTML Pada HTML belum ada atribut audio Video Digunakan untuk menambahkan video ke halaman web HTML5 Format video yang disupport browser : BrowserMP4WebMOggInternet Exploer 9+YESNONOChrome 6+YESYESYESFirefox 3.6+NOYESYESSafari 5+YESNONOOpera 10.6+NOYESYES Contoh : <!DOCTYPE html> <html> <body> <video width="320" height="240" controls preload> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> </video> </body> </html> HTML Pada HTML belum ada atribut video Data Attributes Data attributes adalah fitur baru di HTML5, maka pada HTML sebelumnya fitur data atrribut belum tersedia. Dat
Posting Komentar
Baca selengkapnya

Mengenal Fitur CSS3

Gambar
Chrome | 43.0  4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0 5.0 -moz- | | Safari | 9.0 4.0 -webkit- | | Opera | 30.0 15.0 -webkit- 12.0 -o- | Keterangan : Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-. Contoh Pengguna opera versi 30.0 ke atas : div { animation-iteration-count: 2; } Sedangkan pengguna opera versi 15.0 hingga 29.0 : div { -webkit-animation-iteration-count: 2; } Nilai Properti : animation-name menentukan nama  keyframe  yang akan dikaitkan ke  selector animation-duration menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi animation-timing-function Menentukan kurva kecepatan animasi Nilai properti : linear mengatur animasi dengan kecepatan yang sama dari awal hingga akhir ease Nilai default  an
Posting Komentar
Baca selengkapnya

Menambahkan jumbotron

Gambar
Menambahkan Jumbotron Kita akan menambahkan banner besar atau biasa disebut jumbotron, diantara header dan content. Tambahkan kode HTML berikut antara elemen .header dan .content: <div class="jumbotron"> <h2>Welcome to My Homepage</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor necessitatibus quae voluptate explicabo architecto fugiat asperiores illo quibusdam qui mollitia, porro fugit. Illum sapiente modi, ut harum aliquam accusamus unde.</p> </div> Kemudian pada bagian style, tambahkan CSS berikut: .jumbotron { width: 100%; padding: 80px 40px; box-sizing: border-box; text-align: center; color: white; background-color: #aaa; } Hasil dari kode di atas akan tampil seperti ini: Kita sekarang akan mengganti latar warnanya menggunakan gambar. Kamu bisa mengambil gambar yang gratis di internet, salahsatunya dapat kamu unduh dari website [ https://unsplash.com].Website tersebut menyediakan gambar-gambar berkualitas
Posting Komentar
Baca selengkapnya

Membuat menu dropdown

Gambar
Membuat Menu Dropdown Misalkan kita ingin bila menu About di header disorot pointer mouse, dia akan menampilkan submenu, dan bila pointer dijauhkan, submenunya disembunyikan kembali. Untuk membuat fitur tersebut, kita membutuhkan property position untuk mengatur tata letak submenunya, dan juga property display untuk menampilkan dan menyembunyikan submenu. Tambahkan elemen html berikut di bagian .menu di header: <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">About</a> <ul class="submenu"> <li><a href="#">CV</a></li> <li><a href="#">Education</a></li> <li><a href="#">Portfolio</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div>
Posting Komentar
Baca selengkapnya

Membuat layout dasar

Gambar
Membuat Layout Dasar Sekarang kita akan mengisi bagian konten halaman. Bagian konten akan kita isi dengan daftar produk. Edit kode bagian content menjadi seperti ini: <div class="content"> <h2>My Articles</h2> <h2>My Products</h2> <div class="thumbnail"> <img src="http://via.placeholder.com/250x150"> <h2>Product 2</h2> <p>Rp 250.000</p> </div> </div> Kemudian pada bagian <style> tambahkan CSS berikut: .thumbnail { background-color: white; text-align: center; padding: 10px; } Hasil dari kode di atas akan nampak seperti ini: Kita ingin agar dalam satu baris, terdapat 3 buah produk yang ditampilkan. Sedangkan pada hasil kode yang sudah kita miliki, kita hanya memiliki satu buah produk yang memenuhi semua lebar baris. Oleh karena itu, kita harus mengatur width dari elemen .thumbnail agar dalam satu baris dapat masuk 3 buah produk. Tambahkan baris kode CSS berikut pada b
Posting Komentar
Baca selengkapnya

Membuat layout dasar 1

Gambar
Membuat Layout Dasar Buat folder baru dengan nama latihan-layout/ dan buat file baru dengan nama index.html di dalamnya. Tulislah kode HTML berikut pada file index.html: <!DOCTYPE html> <html> <head> <title>My Webpage</title> <style type="text/css"> .header { background-color: #eee; min-height: 50px; } .content { background-color: #ddd; min-height: 500px; } .footer { background-color: #ccc; min-height: 50px; } </style> </head> <body> <div class="header"> <h1>Logo Produk</h1> </div> <div class="content"> <h2>Our Products</h2> </div> <div class="footer"> <p>copyright 2018 My Page</p> </div> </body> </html> Pada kode di atas, kita membuat 3 buah elemen utama di bawah <body>, yakni <div>dengan masing-masing class header, content dan footer. Pada <div> dengan class header, kita akan isi dengan l
Posting Komentar
Baca selengkapnya

Css selector

CSS Selector Sebelumnya sudah dibahas tentang css selector pada materi css dan style html dasar , tapi pada materi ini kita akan coba bahas lebih mendalam lagi . Pada css terdapat selector yang digunakan untuk memilih elemen HTML yang akan dikenai style , pemilihan elemen menggunakan nama tag, nilai atribut, atau pola tertentu. Jenis selector nama tag id class atribut complex selector Selector dengan nama Tag Semisal kita ingin mewarnai body maka langsung saja ketikan selector body,begitupun dengan h1 , p atau yang lainnya. Koma pada selector Koma pada selector berfungsi untuk memilih elemen lebih dari satu , h1,h2,h3,p{ font-family : "arial", sans-sarif; color:#666; } Jika dilihat pada potongan kode diatas selecteor h1,h2,h3,p berarti elemen tersebut di set dengan style yang sama. Spasi pada selector <style> body{ background-color : #fff2cc; } p span { background-color: #7CFC00; padding: 4px 3px; } </style> <body> <h1>Ini elemen judul</
Posting Komentar
Baca selengkapnya

Css text styling..

CSS Text Styling color Memberi warna pada tulisan <html> <head> <title>Mengatur Teks Pada CSS</title> <style type="text/css"> p { color: red; } </style> </head> <body> <p>Mengubah warna text pada css</p> </body> </html> text-align mengatur format paragraf/teks <!DOCTYPE html> <html> <head> <title>Mengatur Teks Pada CSS</title> <style type="text/css"> .rata-kiri { text-align: left; } .rata-kanan { text-align: right; } .rata-tengah { text-align: center; } .sama-rata { text-align: justify; } </style> </head> <body> <strong>Rata Kiri</strong> <p class="rata-kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <strong>Rata Kanan</strong> <p class="rata-kanan">Lorem ipsum dolor sit amet, consectetur a
Posting Komentar
Baca selengkapnya