Membuat Layout Header Diam di Tempat (Fix Header)
|
|
- Ade Hartono
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 ini cukup membantu pengguna mengakses menu navigasi dengan mudah tanpa harus scroll ke atas dulu. Kali ini saya akan share membuat layout ini dengan bantuan CSS. Salam jagocoding,, kali ini saya mau share lagi sedikit tutorial mengenai layout fix header. Layout fix header ini cukup terkenal dipakai di beberapa website.. contoh yang paling simpelnya ya seperti Facebook. Biarpun kita scroll halaman website kita sampai kebawah sekalipun, header tetap diam di tempat dan membantu user mengklik navigasi didalamnya dengan lebih mudah. Kali ini kita akan belajar teknik pembuatannya. Untuk pertama-tama, kita mulai dulu dengan tag HTML dasar ya.. Layoutnya kita bagi jadi 3 bagian aja dulu, header, content, dan footer. Kalau mau ditambah sidebar juga bisa, tapi biar konsepnya mudah dicerna, saya pakai 3 bagian ini aja ya.. Yang cukup penting, biasakan bagian layout kita diletakkan di sebuah layer utama. Layer utama ini biasanya dinamakan container / wrapper. Tujuannya supaya website lebih terstruktur dan rapi saja.. <html> <head> <title>layout Fix Header</title> <link rel="stylesheet" href="css.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> <a href="" class="title">judul Website</a> <div id="content"> <div id="footer"> </body> </html> Nah, seperti yang kita lihat di strukturnya, dimulai dari #wrapper, kemudian diisi #header,
3 #content, dan #footer. Langkah pertama di CSSnya, kita desain dulu tampilan seperti biasanya : *{ margin:0px auto; /*supaya layer otomatis mengisi dan ke tengah*/ body{font-family:calibri, verdana, sans-serif; #wrapper{ width:100%; #header{ height:60px; background:#252525; #header a.title{ color:#f0f0f0; font-weight:bold; text-decoration:none; font-size:30px; line-height:60px; /*supaya baris judul terlihat rapi, berikan nilai line-height yg sama dengan height #header.*/ padding:0px 20px; /*padding 20px di kiri dan kanan saja*/ #content{ background:#eee; min-height:1500px; /*cuma supaya konten terlihat berisi. Kalau sudah diisi teks, baris ini harus dihapus.*/ margin:0px 20px; #footer{ background:#000; height:40px; Dari desain awal tadi, hasilnya masih seperti ini:
4 Sampai disini, desainnya sudah oke. Tinggal langkah terakhir membuat header diam diatas sekalipun kita scroll sampai ke bawah. Disini kita membutuhkan bantuan perintah "position" untuk mengatur posisi layout. Yang perlu diperhatikan disini adalah, semua layer utama yang tampil normal (#wrapper, #content, #footer) diberikan nilai position:relative; /*TAMBAHAN POSITION RELATIVE UNTUK WRAPPER, CONTENT, DAN FOOTER*/ #wrapper{ width:100%; position:relative; /*posisi disarankan*/ #content{ position:relative; /*posisi disarankan*/ background:#eee; min-height:1500px; /*kalau website sudah selesai, baris ini dihapus*/ margin:0px 20px;
5 #footer{ position:relative; /*posisi disarankan*/ background:#000; height:40px; Setelah itu, #header yang akan tampil diam di atas diberikan nilai position:fixed; #header{ position:fixed; height:60px; background:#252525; Hasilnya akan jadi seperti ini : Sampai disini, header memang sudah benar diam diatas. akan tetapi mengubah position menjadi fixed, membuat lebarnya tidak jadi memenuhi layar seperti awal, dan tertutup konten yang ada di atasnya. Hal ini bisa diakali dengan perintah width:100%, dan z-index yang kita beri nilai angka bebas (lebih besar lebih baik). #header{ width:100%; /*supaya header memenuhi layar*/ z-index:1000; /*z-index dgn nilai besar berfungsi supaya header selalu tampil didepan*/ position:fixed; height:60px; background:#252525;
6 Sekarang hasilnya sudah terlihat! Demikian tutorial membuat layout fix header sederhana. Semoga berguna untuk kita semua. :) Tentang Penulis Christian Rosandhy Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.
Membuat 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 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 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 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 terperinciResponsive Layout dengan Bootstrap [Part 2]
Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat
Lebih terperinciMembuat Tooltip Sendiri dengan CSS
Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
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 terperinciTutorial Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada
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 terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
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 terperinciMembuat Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
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 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 terperinciPanduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono
Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan
Lebih terperinciMEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP
MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang
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 terperinciMembuat Desain Custom Input (Checkbox + Radio Button) pada Form
Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya
Lebih terperinciMODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi
Lebih terperinciYayan Mulyana
Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel
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 terperinciAnalisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.
TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;
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 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 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 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 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 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 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 terperincisetiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.
PERTEMUAN 6 .classshadow font-family: color:#333333; text-shadow: 1px 2px 3px blue; 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px; 2px adalah
Lebih terperinciDesign Web Dengan 2 Kolom
Design Web Dengan 2 Kolom Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
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 terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciRWD (Responsive Web Design) dengan Grid System Bootsrtap
RWD (Responsive Web Design) dengan Grid System Bootsrtap Oleh: Jaf Al Azam RWD (Responsive Web Design) dengan Grid System Bootsrtap Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini,
Lebih terperinciDASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
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 HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian
Lebih terperinciTutorial Layouting CSS Part 1
Tutorial Layouting CSS Part 1 Oleh: Cecep Yusuf Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com,
Lebih terperinciCara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Lebih terperinciHow to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
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 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 dan Menampilkan QR Code secara Dinamis dengan PHP
Membuat dan Menampilkan QR Code secara Dinamis dengan PHP Oleh: Christian Rosandhy QR Code Everywhere!! Mungkin di website / proyek kita juga perlu dibikinin juga tuh biar nggak kalah keren.. Nggak susah
Lebih terperinciDesign Web 2 Kolom Flexible
Design Web 2 Kolom Flexible Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
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 terperinci/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}
II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX
Lebih terperinciMembuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan
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 terperinciTUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER
1 TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana
Lebih terperinciLAPORAN RESMI Layout
LAPORAN RESMI Layout Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
Lebih terperinciLAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP :
Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025 LAYOUT Alat dan Bahan --- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya --- Bahan-bahan gambar
Lebih terperinciMembuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
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 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website
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 terperinciMODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman
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 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciTutorial Membuat Template Joomla 1.5
Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial
Lebih terperinciSMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3
4 BAB IV WEB DESIGN CSS3 41 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Penggunaan CSS3 untuk Design dan Layout Web Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan
Lebih terperinciKELAS TANGGAL PRAKTIKUM
PRAKTIKUM NAMA KELAS TANGGAL PRAKTIKUM : Margins, Padding dan Dimensi : : : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan margin dan padding. 2. Siswa dapat mengenal, memahami
Lebih terperinciMembuat Themes Wordpress sendiri - Part 2
Membuat Themes Wordpress sendiri - Part 2 Oleh: asep saepulloh Halo sahabat jaco. Di tutorial sebelumnya kita sudah bahas bagaimana membuat themes wordpress sendiri. Bagaimana? sudah mengerti belom :Doke
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 terperinciMODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER. Abstrak. Kata kunci : Header Sidebar, Header Blogger, Sidebar Blogger, Header Sidebar Blogger
KOMPUTAKI Vol. 1 No. 1 Februari 2016 MODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER Suprapto Fakultas Ilmu Komputer, Universitas AKI Email: suprapto.brian@yahoo.com Abstrak Modifikasi dari blogger penting
Lebih terperinciMembuat Top Fixed Responsive Navbar Twitter Bootstrap
Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar
Lebih terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciCSS Layouting. Antonius RC Pemrograman Web
CSS Layouting Antonius RC Pemrograman Web CSS Selector Tambahan Tanda > artinya select child element Contoh: ul > li Maka akan terambil 2 elemen li CSS Selector Tambahan Tanda + artinya select adjecent
Lebih terperinciMembuat Login Pop Up Dengan JqueryUI
Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya
Lebih terperinciLEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
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 WEBSITE SEDERHANA DENGAN HTML 5
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,
Lebih terperinciCascading Style Sheet (CSS) pada HTML
Cascading Style Sheet (CSS) pada HTML Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola. Di dalamnya terdapat
Lebih terperinciSeri Tutorial Template Blogger
Struktur dari Template Blogspot Seri Tutorial Template Blogger Sebelum merancang template, kita harus tahu tentang struktur atau bagian-bagian dari template. Setiap template tidak harus memiliki struktur
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 terperinciMEMBUAT KUIS INTERAKTIF DENGAN FLASH 8
MEMBUAT KUIS INTERAKTIF DENGAN FLASH 8 Pada bagian yang ini akan dibahas langkah-langkah pembuatan kuis interaktif. Bentuk pertanyaan pada kuis ini adalah pilihan ganda dengan 4 pilihan jawaban untuk setiap
Lebih terperinciTUGAS BOXES. 1. Percobaan 1
TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan
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 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 terperinciCSS (CASCADING STYLE SHEET)
CSS (CASCADING STYLE SHEET) CSS DASAR Tentang CSS Kegunaan CSS Aturan Penulisan CSS Background CSS Font CSS Teks CSS Border Margin Contoh Layout Web menggunakan CSS 1 Tentang CSS CSS (Cascading Style Sheet)
Lebih terperinciCARA MEMBUAT CSS DENGAN DREAMWEAVER
CARA MEMBUAT CSS DENGAN DREAMWEAVER Dewi Wijayanti dewiwijayanti@raharja.info Abstrak Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun
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 terperinciDasar-dasar HTML 2. Oleh: Cecep Yusuf
Dasar-dasar HTML 2 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana membuat sebuah tabel tag-tag HTML. Kita akan mempelajari bagaimana membuat tabel yang baik. Melanjutkan tutorial Dasar-dasar
Lebih terperinciPRAKTIKUM SISTEM INFORMASI MANAJEMEN
MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana
Lebih terperinciCSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
Lebih terperinciTUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework
TUGAS UTS WEB STATIS Nama : Apriyanto Wibowo NIM : 12141362 Prodi Mata Kuliah : Teknik Informatika S1 (Malam) : Pemrograman Web Statis Pengertian framework Framework adalah kerangka kerja. Framework juga
Lebih terperinciModul 1 : HTML dan CSS
Modul 1 : HTML dan CSS Tujuan Praktikum - Praktikan mampu membuat halaman web dengan menggunakan HTML dan CSS. Pengantar HyperText Markup Language atau lebih dikenal HTML merupakan markup language yang
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 terperinciTUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
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 terperinciBelajar Dasar HTML 5. It s all about 4rt, not how smart you are. S u p p o r t e d b y : [ C y b e r 4 r t C r e w ]
Belajar Dasar HTML 5 S u p p o r t e d b y : [ C y b e r 4 r t C r e w ] [ H I G r o u p o n F a c e b o o k ] r00t@cyber4rt:~# It s all about 4rt, not how smart you are [ H I F a n s P a g e ] 1 1 / 2
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciGambar 1.1 Desain halaman web
DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8. Jika Anda menggunakan versi di atasnya, misalnya
Lebih terperinciTutorial Mengedit Halaman HTML dengan Dreamweaver
Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi
Lebih terperinciKostumisasi Fitur Twitter Bootstrap 3 - Episode Carousel / Slide
Kostumisasi Fitur Twitter Bootstrap 3 - Episode Carousel / Slide Oleh: Muhammad Fauzi Seperti yang kita ketahui twitter bootstrap menyediakan beberapa fitur javascript dan user tinggal menggunakannya,
Lebih terperinciCSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
Lebih terperinciPENGENALAN HTML - 3. Gambar 1. Layer Toolbar
PENGENALAN HTML - 3 A. Layer Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, kita dapat membuat halaman HTML yang tampilannya lebih fleksibel. Layer
Lebih terperinciLangkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna
Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana
Lebih terperinciMEMBUAT KUIS INTERAKTIF DENGAN FLASH 8
MEMBUAT KUIS INTERAKTIF DENGAN FLASH 8 Pada bagian yang kedua ini akan dibahas langkah-langkah pembuatan kuis interaktif. Bentuk pertanyaan pada kuis ini adalah pilihan ganda dengan 4 pilihan jawaban untuk
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 terperinci