Dasar Dasar TRANFORMASI 2D DI CSS3
|
|
- Adi Pranata
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Dasar Dasar TRANFORMASI 2D DI CSS3 Oleh: Irvansyah Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css. Sebelum kita menuju contoh2nya kita bahas dulu transform y itu apa dan apa fungsinya.. Transform jika di bahasa Indonesia berarti perpindahan.nah Sesuai dengan artinya maka akan ada perubahan di suatu objek baik ukuran maupun posisi obj... Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css. Sebelum kita menuju contoh2nya kita bahas dulu transform y itu apa dan apa fungsinya.. Transform jika di bahasa Indonesia berarti perpindahan.nah Sesuai dengan artinya maka akan ada perubahan di suatu objek baik ukuran maupun posisi objek.. Dengan Css3 transform objek bisa dirubah bentuk dan posisinya sesuai yang kita mau dan yang kita butuhkan.. Sesuai standart Dari W3school sich ada 5 macam transform di css3 yaitu : translate(), rotate(), scale(), skew(), dan matrix(). Tapi yang paling sering digunain sich translate(), rotate(), scale(), dan skew() jadi kita akan bahas kecuali matrix(). Ok d langsung aja kita bahas 1 per translate() : sebuah objek akan dapat berpindah dari posisi aslinya dengan acuan jarak Kiri(x-axis) dan jarak Kanan(y-axis). Perhatiin d ilustrasi dibawah ini.. Syntak umumnya : transform:translate(nilai-posisix,nilai-posisiy); Untuk membuat contoh transform:translate(), kita buat contoh 2 objek agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style>.translate1 { background:#37f70b; transform: translate(0px,0px); -ms-transform: translate(0px,0px); /* IE 9 */ -webkit-transform: translate(0px,0px); /* Safari and Chrome */
3 -o-transform: translate(0px,0px); /* Opera */ -moz-transform: translate(0px,0px); /* Firefox */.translate { background:#37f70b; transform: translate(30px,30px); -ms-transform: translate(30px,30px); /* IE 9 */ -webkit-transform: translate(30px,30px); /* Safari and Chrome */ -o-transform: translate(30px,30px); /* Opera */ -moz-transform: translate(30px,30px); /* Firefox */ </style> Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : <div class="translate1">posisi Sebelum Ditranslate()</div> <div class="translate">posisi Setelah Ditranslate()</div> Hasilnya akan menjadi seperti Ini: Teman2 Dapat Mengganti Nilai Posisi X dan Y dengan nilai pt(point), cm(centimeter), px(pixel), ataupun %(percent). Contoh transform: translate(30pt,30pt); 2.rotate():Dengan fungsi rotate() maka sebuah objek akan dapat diputar hingga dan jika dengan nilai negatif maka objek akan diputar kearah berlawanan. Syntak untuk : rotate(nilai derajat); Untuk membuat contoh transform:rotate(), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini :
4 <style>.rotate1{ background-color:# f5ba05; border:solid 2px red; transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -moz-transform:rotate(0deg); /* Firefox */ -webkit-transform:rotate(0deg); /* Safari and Chrome */ -o-transform:rotate(0deg); /* Opera */.rotate{ background-color:# f5ba05; border:solid 2px green; transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ </style> Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : <div class="rotate1">posisi Sebelum Dirotate()</div> <div class="rotate">posisi Setelah Dirotate()</div> Hasilnya akan menjadi seperti Ini: Teman2 Dapat Mengganti Nilai derajatnya sesuai keinginan kamu dari Mulai 0 sampai atau 0 Sampai Contoh transform: rotate(-30deg); 3.scale() : Dengan fungsi scale() maka sebuah objek akan dapat diperbesar atau diperkecil dengan acuan (x-axis) sebagai Lebar dan (y-axis) sebagai Tinggi. Syntak umum : scale(nilai-x(lebar),nilai-y(tinggi));
5 Untuk membuat contoh transform:scale(), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style>.scale1{ width:100px; height:75px; background-color:#c6b710; border:solid 2px red;.scale{ background-color:#c6b710; transform:scale(2,1); margin:100px; -ms-transform:scale(2,1); /* IE 9 */ -moz-transform:scale(2,1); /* Firefox */ -webkit-transform:scale(2,1); /* Safari and Chrome */ -o-transform:scale(2,1); /* Opera */ border:solid 2px green; </style> Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : <div class="scale1">ukuran Sebelum Diskew()</div> <div class="scale">ukuran Setelah Diskew()</div> Hasilnya akan menjadi seperti Ini:
6 Untuk Nilai scale kamu cukup mengganti nilai X dan Y dengan angka yang lain tampa harus menggunakan pt(point),px(pixel),cm(centimeter),ataupun %(percent),karena efek scale tidak akan berjalan di browser. Kenapa..?? Karena Gambar sudah Diperbesar dengan scale jika kamu mengatur lagi tinggi lebar gambar maka efek akan berlawanan. 4.skew() : Dengan fungsi scale() maka sebuah objek akan dapat berbentuk perspektif dengan acuan (x-axis) sebagai nilai derajat Horizontal dan (y-axis) sebagai nilai derajat vertikal. Syntak umum : skew(nilai-derajatx,nilai-derajaty); Untuk membuat contoh transform:skew (), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style>.skew{ width:100px; height:75px; background-color:#08f7de; border:solid 2px red; transform: skew(0deg,0deg); -ms-transform: skew(0deg,0deg); /* IE 9 */ -webkit-transform: skew(0deg,0deg); /* Safari and Chrome */ -o-transform: skew(0deg,0deg); /* Opera */ -moz-transform: skew(0deg,0deg); /* Firefox */.skew1{ background-color:#08f7de; border:solid 2px green; margin:100px;
7 transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ </style> Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : <div class="skew1">ukuran Sebelum Diskew()</div> <div class="skew">ukuran Setelah Diskew()</div> Hasilnya akan menjadi seperti Ini: Sama Seperti rotate()teman2 Dapat Mengganti Nilai derajatnya sesuai keinginan kamu dari Mulai 0 sampai atau 0 Sampai Fuih!!???? Akhirnya selesai juga tutornya tentang css transform.. Nah saya harap dengan tutor dan contohnya tadi mudah2n teman bias jadi lebih paham.. Jika Teman2 ingin lebih fokus saya sudah sertakan link download dibawah dengan ekstensi *.rar jadi tema2 tinggal ekstrak aja utak atik d kodenya. Oia seikit informasi untuk semuuua jenis transform diatas masih ada yang belum support dengan css transform jadi buat kamu pengguna IE(internet explorer) yang versi dibawah 9 cepat2 d donlod yang terbaru buat terrapin ilmu css transformnya. Akhir kata dicoba terus y n semoga berhasil. Sampai jumpa lagi di tutor berikutnya.. DOWNLOD CSS TRANSFORM TUTORIAL Tentang Penulis
8 Irvansyah Tertarik Dengan Web Desain, Photoshop, dan Animasi Flash. Mohon panduan Dan arahan Agar Dapat menjadi Lebih Baik dab Bisa Sharing ke
9 sesama..
Dasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
Lebih terperinciMembuat Form Search Dengan CSS3
Membuat Form Search Dengan CSS3 Oleh: Irvansyah Pasti teman2 sering dong berkunjung ke blog ataupun malah di blog teman2 ada yang namanya Form Searh.. Apa itu Form Search..?? Yup bnar sekali.. Sebuah media
Lebih terperinciAnimasi Dengan CSS3. Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi
Tujuan Animasi Dengan CSS3 Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi Dasar Teori Pada praktikum-praktikum sebelumnya, kita telah
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS3 Tujuan: Mahasiswa mengenal komponen CSS 3 sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciMemanfaatkan CSS Animasi dan Transisi [Part 1]
Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part
Lebih terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
Lebih terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciHTML Scripting Desain Visual dan Tata Letak dengan CSS 3
Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya 8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling
Lebih terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinci: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil :
Nama : Choirul Anam Kelas : D3 CC PJJ/Teknik Informatika No NRP : 2103157012 Percobaan 1 Mengatur tampilan tipe list Kode : Hasil : Analisa : Value lower-roman dari property CSS list-style-type membuat
Lebih terperinciTutorial Lengkap Memahami CSS Display
Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak
Lebih terperinciC. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
Lebih terperinciTUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa :
TUGAS PRAKTIKUM 9 Nama : Surya Wahyusantoso NRP : 2103157024 1. Percobaan 1 Mengatur tampilan tipe list Gambar di atas Menggunakan Value lower-roman dari property CSS list-style-type membuat tampilan bullet
Lebih terperinciLAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO
LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO OLEH : LUTHFI HDIAYAT (4103131035) http://luthfihidayat.mb.student.pens.ac.id/ TEKNOLOGI MULTIMEDIA BROADCASTING POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015 Praktikum
Lebih terperinciMemanfaatkan CSS Animasi [Part 2]
Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis
Lebih terperinciTutorial Dasar CSS Preprocessor LESS
Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini
Lebih terperinciPercobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
Lebih terperinciTUTORIAL CSS FRAMEWORK
11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : WAHYU WIDODO CSS FRAMEWORK FONT AWESOME A. Pengertian Framework Sebelum mempelajari bagaimana
Lebih terperinci7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog Primo Riveral primo@raharja.info Abstrak Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan tersendiri untuk seorang yang menggemari
Lebih terperinciMemahami CSS Selector - Bagian 1
Memahami CSS Selector - Bagian Hendriono Kamis, Agustus 02, 202 (X)HTML, CSS 8 komentar Bismillah. Alhamdulillah. Perkembangan bahasa markup Cascading Style Sheet (CSS) cukuplah pesat dan ini membuat tampilan
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciTriswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Lebih terperinciMembuat Template Website Menggunakan Teknik Layer ala CSS
Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet
Lebih terperinciCara membuat HTML dasar
Cara membuat HTML dasar Oleh : Ronaldo Fantoni 11 IPA /12 1. Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
Lebih terperinciHover Putar CSS3. Oleh: Mohammad Nur Huda
Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek
Lebih terperinciPersiapan. Jalankan server apache dari XAMPP control panel Ekstrak file yang telah dibagikan, Salin folder week_8 ke htdocs
Ajax Persiapan Download: https://drive.google.com/file/d/0bxksp6axeejqa3loddvnd2fcx3c/vi ew?usp=sharing Latihan-latihan ini memerlukan koneksi aktif internet Cek kembali koneksi internet anda Jalankan
Lebih terperinciCSS Lanjut Pertemuan - 5
CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran
Lebih terperinciTutorial Lengkap Memahami CSS Position
Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,
Lebih terperinciE-LEARNING PETUNJUK UNTUK SISWA
E-LEARNING PETUNJUK UNTUK SISWA A. Pendahuluan Pada kesempatan kali ini akan dijelaskan tata cara penggunaan media pembelajaran e-learning (elektronik learning). Dalam sistem pembelajaran berbasis E-Learning
Lebih terperinciMengenal dan Mengedit HTML
Mengenal dan Mengedit HTML 3.1 Pengertian HTML HTML (HyperText Markup Language) merupakan protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser. HTML juga digunakan
Lebih terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
Lebih terperinciTampilan slide presentasi untuk industri kreatif dengan tema fresh
BAB 6 FRESH Tampilan slide presentasi untuk industri kreatif dengan tema fresh Slide presentasi kini tidak hanya bisa diciptakan melalui software atau program khusus seperti MS PowerPoint, tetapi juga
Lebih terperinciPRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP
PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP Disusun oleh: (Nama) (NIM) PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015 Modul 7 Twitter Bootstrap I. Tujuan:
Lebih terperinciCSS Eksternal. Instruktur: Arif Nurwidyantoro
CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan
Lebih terperinciMembuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini
Lebih terperinciMembuat Display Produk dalam Layout Box 4 Kolom
Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana
Lebih terperinciMembuat Layout Footer Menempel ke Bawah
Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan
Lebih terperinciMateri 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com
Materi 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar 1. Memahami cara kerja world
Lebih terperinciCara Memasukan Font Baru Ke Dalam Web Menggunakan CSS
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab
Lebih terperinciSanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan
Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau
Lebih terperinciHTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Lebih terperinciTutorial Membuat Slide Master di Ms. Powerpoint
Tutorial Membuat Slide Master di Ms. Powerpoint Tutorial Membuat Slide Master di Ms. Powerpoint, yaa begitulah judul postingan saya kali ini setelah sekian lama gak bsia update berhubung keyboard laptop
Lebih terperinciKAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
Lebih terperinciMendesain Custom Tabel dengan Pseudo Element CSS
Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna
Lebih terperinciPENGERTIAN WEB web adalah
PENGANTAR WEB -YQ- PENGERTIAN WEB web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (text, gambar, suara, animasi, video) di dalamnya yang menggunakan protokol http (hypertext transfer
Lebih terperinciMembuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
Lebih terperinciPertemuan V. Semester 1
Frames dan iframes ++ Video dan Audio Pertemuan V Pemrograman Web Dasar Semester 1 Frame HTML Frame digunakan untuk menampilkan banyak dokumen html lainnya dalam satu halaman browser pada saat yang sama.
Lebih terperinciMembuat Web dengan CMS Joomla Sumber dari
Membuat Web dengan CMS Joomla Sumber dari www.ahmadyunus.com Membuat Web dengan CMS Joomla sebenarnya gampang-gampang mudah, asalkan kita mau belajar. Saya sendiripun sebenarnya masih pemula sekali dalam
Lebih terperinciBUKU PANDUAN SISTEM INFORMASI PENGUJI MUTU BARANG UNTUK PMB/CALON PMB
BUKU PANDUAN SISTEM INFORMASI PENGUJI MUTU BARANG UNTUK PMB/CALON PMB DIREKTORAT PENGEMBANGAN MUTU BARANG DIREKTORAT JENDERAL STANDARDISASI DAN PERLINDUNGAN KONSUMEN KEMENTERIAN PERDAGANGAN TAHUN 2015
Lebih terperinciSecara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Lebih terperinciEfek Mengambang CSS3
Efek Mengambang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di
Lebih terperinciTUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP
TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP Oleh : Nama : Badiah Setyowati Nim : 12141363 Prodi : Teknik Informatika - Malam Bootsnipp A. Pengertian Bootsnip Bootsnipp. Apa sih itu Bootsnipp?
Lebih terperinciTeks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Lebih terperinciBAB 4 IMPLEMENTASI DAN EVALUASI. minimum sebagai berikut : 1. Sistem operasi multiplatform. 10, Internet Explorer 9. minimum sebagai berikut :
59 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Rencana Implementasi 4.1.1 Spesifikasi Software Untuk mengimplementasikan rancangan aplikasi yang telah dibuat dibutuhkan perangkat lunak (software) dengan spesifikasi
Lebih terperinciKomunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
Lebih terperinciSistem Informasi Database Online Kinerja Pembangunan Sektoral
iv Buku Panduan Penggunaan Sistem Informasi Database Online Kinerja Pembangunan Sektoral (SIDO-KPS) Buku 1 Manual Umum (Public User) Direktorat Evaluasi Kinerja Pembangunan Sektoral Kementerian Perencanaan
Lebih terperinciSIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
Lebih terperinciCara Membuat Halaman Form Dengan Bootstrap CDN
Cara Membuat Halaman Form Dengan Bootstrap CDN Fitria Arnita 23@gmail.com Abstrak Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone,
Lebih terperinciSejarah HTML5. Abstrak. Pendahuluan. Reni Resiani Sunmaryati
Sejarah HTML5 Reni Resiani Sunmaryati resiani.reni@yahoo.com Abstrak HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML sebelumnya yang dikeluarkan oleh W3C (World Wide Web Consortium)
Lebih terperinciAuthor : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
Lebih terperinciSejarah Web Browser. Web Browser pertama menggunakan perintah teks biasa dan hanya bisa menampilkan dokumen teks.
Sejarah Web Browser Web Browser pertama menggunakan perintah teks biasa dan hanya bisa menampilkan dokumen teks. Pada tahun 1993, Marc Andreessen, seorang mahasiswa Universitas Illinois, menciptakan web
Lebih terperinciAPLIKASI e-hosting STANDARD OPERATING PROCEDURE (SOP) REV.1 PT PLN (PERSERO) DISTRIBUSI JAWA TIMUR
APLIKASI e-hosting STANDARD OPERATING PROCEDURE (SOP) REV.1 PT PLN (PERSERO) DISTRIBUSI JAWA TIMUR PT PLN (Persero) DISTRIBUSI JAWA TIMUR Jl. Embong Trengguli No. 19 21 Surabaya PETUNJUK PENGOPERASIAN
Lebih terperinciDAFTAR ISI PANDUAN PENGGUNAAN WEB SEKOLAH
DAFTAR ISI PANDUAN PENGGUNAAN WEB SEKOLAH 1. Bagian - Bagian Website... 2 - Halaman (page), Artikel Berita (post), Widget... 2 2. Cara Masuk ke Website (Admin / Dashboard)... 3 3. Cara Mengisi Artikel
Lebih terperinciPERTEMUAN 1. Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage
PERTEMUAN 1 Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage Materi yang akan dibahas : 1. Kegunaan dari dokumen dan audiens 2. Bahasa HTML 3. Struktur dasar penulisan dokumen 4. Site
Lebih terperinciPanduan E-Learning Untuk Mahasiswa
Panduan E-Learning Untuk Mahasiswa STMIK & AMIK LOGIKA 2011 (EDISI REVISI) Copyright : STMIK & AMIK LOGIKA Halaman 1 dari 10 PANDUAN TM ONLINE A. Cara Mengakses Tutorial Online Langkah pertama adalah menjalankan
Lebih terperinciBAB IV IMPLEMENTASI DAN EVALUASI. perangkat lunak yang dibutuhkan oleh sistem ini adalah sebagai berikut :
BAB IV IMPLEMENTASI DAN EVALUASI 4.1 Kebutuhan Sistem Untuk dapat menjalankan sistem ini, diperlukan perangkat keras dan perangkat lunak dengan spesifikasi tertentu. Adapun kebutuhan perangkat keras dan
Lebih terperinciLANGKAH- LANGKAH PEMBUATAN BLOG DENGAN BLOG GRATISAN DARI BLOGGER.COM
LANGKAH- LANGKAH PEMBUATAN BLOG DENGAN BLOG GRATISAN DARI BLOGGER.COM BLOG? APA SIH BLOG? Pengertian gampangnya saja ya... blog ialah sebuah situs/web milik pribadi yang dikelola oleh sendiri. Saya tidak
Lebih terperinciContoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).
Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
Lebih terperinciMahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML
Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil
Lebih terperinciPEMROGRAMAN WEB 1 CSS
PEMROGRAMAN WEB 1 CSS RIO ANDRIYAT KRISDIAWAN, M.KOM Definisi CSS CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web designer untuk mengatur style elemen yang ada didalam halaman
Lebih terperinciMateri 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.
Lebih terperinciPage 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma
Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah
Lebih terperinciMembuat Responsive Layout dengan CSS Media Query
Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciMODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.
MODUL I PENGENALAN HTML A. MAKSUD DAN TUJUAN 1. Maksud a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. Tujuan a. Mahasiswa dapat membuat
Lebih terperinciDESAIN BROSUR SUPERMARKET MENGGUNAKAN ADOBE PHOTOSHOP CS Gianto, SPd - SMAN 113 Jakarta
DESAIN BROSUR SUPERMARKET MENGGUNAKAN ADOBE PHOTOSHOP CS Gianto, SPd - SMAN 113 Jakarta Standar Kompetensi : Menggunakan perangkat lunak pembuat grafis. Kompetensi Dasar : Membuat grafis dengan berbagai
Lebih terperinciCARA MUDAH BELAJAR HTML,XHTML,
IMZEN SITORUS CARA MUDAH BELAJAR HTML,XHTML, dan CSS 3 (Langkah awal menjadi programmer web, beserta contoh-contoh program) Penerbit nulisbuku CARA MUDAH BELAJAR HTML, XHTML, DAN CSS 3 (Langkah awal menjadi
Lebih terperinciLAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Image dan Link Dosen Pembimbing : Dwi Susanto Oleh : Laras Intansari (4103131054) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA
Lebih terperinciTUTORIAL SUZUKI E-RECRUITMENT
TUTORIAL SUZUKI E-RECRUITMENT SELAMAT DATANG DI TUTORIAL SUZUKI E-RECRUITMENT! Pelamar dapat melamar melalui website http://career.suzuki.co.id dengan mengikuti petunjuk yang akan diberikan selanjutnya.
Lebih terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
Lebih terperinciCara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
Lebih terperinciLAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati
LAPORAN RESMI Flash, Audio dan Video Dosen Pembimbing : Dwi SusantoS. ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK
Lebih terperinciPerkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]
Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1] Oleh: Arinadi Nur Rohmad Font Awesome adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system Font Icon yang memungkinkan
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinciMenginstal WordPress di Komputer Sendiri. (blogging offline)
Menginstal wordpress di komputer sendiri (blogging offline) Penyusun: Restava RESTAVA therestava@gmail.com Menginstal WordPress di Komputer Sendiri (Blogging Offline) Blogging telah menjadi tren kini.
Lebih terperinciBAB IV HASIL DAN PEMBAHASAN
BAB IV HASIL DAN PEMBAHASAN IV.1 Convert format data citra Konversi format data citra MTSAT agar file tersebut dapat dibuka dan diolah di ER Mapper. Berikut adalah hasil dari konversi ke format.ers yang
Lebih terperinciPANDUAN MENGGUNAKAN SISTEM INFORMASI KEARSIPAN STATIS (SiKS) ARSIP UNIVERSITAS GADJAH MADA
PANDUAN MENGGUNAKAN SISTEM INFORMASI KEARSIPAN STATIS (SiKS) ARSIP UNIVERSITAS GADJAH MADA A. Akses SiKS Untuk mengakses aplikasi SiKS, pengguna dapat menggunakan salah satu dari dua cara berikut : 1.
Lebih terperinciCSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) CSS CSS?????? Singkatannya Cascading Style Sheet Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Tujuan dari penggunaan CSS ini adalah supaya
Lebih terperinciMembuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinciUntuk mengimplementasikan sistem ini, diperlukan spesifikasi perangkat keras,
Untuk mengimplementasikan sistem ini, diperlukan spesifikasi perangkat keras, spesifikasi perangkat lunak, spesifikasi kebutuhan sistem, jadwal implementasi, dan petunjuk penggunaan sistem untuk memberikan
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Lebih terperinciPan a du d an a Pe P n e ggu g naa a n a Version date : : 06 Juni 2011
Panduan Penggunaa an Version date : 06 Juni 2011 Daftar Isi 1. Pendahuluan 1.1. Panduan awal penggunaan 1.2. Pengertian status tiket atau keluhan 2. Membuat / Melaporkan Keluhan Anda (Menu Request) 2.1.
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Sistem Pembuatan program organisasi kelembagaan mahasiswa ini ditujukan untuk user seluruh program studi ada dilingkungan Universitas Mercu Buana untuk
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciHTML Uncover. Duniailkom Duniailkom
HTML Uncover Duniailkom 2015 Duniailkom Contents 1. Berkenalan Dengan HTML (Contoh Bab 1)....................... 1 1.1 Pengertian HTML................................... 1 1.2 Fungsi HTML.....................................
Lebih terperinciMendeteksi Lokasi dengan HTML5 Geolocation
Mendeteksi Lokasi dengan HTML5 Geolocation Oleh: Hasyemi Rafsanjani Asyari Di tutorial kali ini masih berkaitan dengan google maps, yaitu kita akan membuat script dimana kita bisa mendeteksi lokasi dari
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinci