Membuat Website HTML CSS Sederhana Part 11 / 11 – Last But Not Least


Setelah mempelajari langkah2 awal dan info dasar sebelum membuat website di Part 1Part 2Part 3Part 4 Part 5Part 6Part 7Part 8Part 9 dan part 10, sekarang kita lanjutkan ke part terakhir yaitu part 11. Tutorial kali ini akan melengkapi tutorial-tutorial sebelumnya, hanya tambahan saja. Kita akan menambahkan paginasi / pagination pada bagian bawah didaftar blog terbaru (home), hanya berupa tulisan Sebelumnya dan Selanjutnya ditambah tanda panah kanan dan kiri.

Buka file html home / beranda nya kemudian tambahkan kode berikut dibagian bawah setelah post terakhir / post terbawah dihalaman home:

<div class="pagination">
   <li class="kiri"><a href="">&larr; Sebelumnya</a></li>
   <li class="kanan"><a href="">Selanjutnya &rarr;</a></li>
</div>

Tambahkan kode berikut dibawah post terakhir (setelah paragraf terakhir tapi masih didalam class artikelTerbaru). &larr; disitu artinya panah ke kiri dan &rarr; adalah ikon panah ke kanan.

Tentu belum rapih ketika dibuka di browser, tambahkan CSS ini pada file CSS nya:

.buaya .pagination li {
   list-style: none;
   margin: 5px;
}
.buaya .pagination a {
   text-decoration: none;
   color: #fff;
}
.buaya .pagination .kiri {
   float: left;
}
.buaya .pagination .kanan {
   float: right;
}

Kenapa ditulis .buaya sebelum .pagination ? Karena .pagination berada didalam .buaya, supaya lebih spesifik saya tuliskan juga .buaya nya tapi kalo gak mau gak apa-apa. Cuma jaga-jaga aja, siapa tahu ada class pagination lain didalam HTML tersebut jadi bisa dibedakan masing-masing gayanya.

Save dan lihat hasilnya di browser !

Selamat, website HTML sudah selesai. Sekarang kalian sudah paham bagaimana struktur website dan dapat menelusurinya lebih lanjut / membuat situs sesuai yang diinginkan dengan dasar HTML CSS ini.

Terimakasih sudah mengikuti tutorial membuat website HTML CSS Sederhana ini dari part 1 sampai part 11

Mudah kan ? Kalo masih bingung silahkan lihat video tutorial part 11 disini atau klik disini untuk melihat semua video tutorial dari part 1 sampai part 11 atau tinggalkan komentar dibawah untuk bertanya.

Mau download file ?

Setelah menyelesaikan tutorial ini dari awal, dapat download file secara keseluruhan disini (bisa untuk pengguna yang ingin code original dari tutorial ini karena beberapa pengguna mungkin mengalami masalah ketika mengikuti tutorial tanpa melihat code original ini). Password: www.riobermano.com

Apa yang harus saya lakukan selanjutnya ?

Pada tutorial ini hanya mencontohkan satu halaman saja, selanjutnya kalian dapat membuat beberapa halaman yang diperlukan seperti halaman kontak / halaman lainnya. Lihat semua tutorial HTML & CSS di situs ini untuk melengkapi pengetahuan tentang HTML & CSS dan bisa diterapkan juga ke situs yang baru saja dibuat seperti situs di tutorial ini.

Mau membuat website responsive menggunakan Bootstrap ?

Ada juga tutorial membuat website responsive menggunakan framework Bootstrap (setelah membuat website HTML & CSS part 1 sampai part 11 tidak akan sulit mempelajari Bootstrap). Lihat Tutorial membuat website sederhana Bootstrap disini.

Selamat mencoba !


Jangan Lupa Share !!!

70
2 komentar, 10 shares, 70 points

Apa Reaksimu ?

Bingung Bingung
8
Bingung
Kesal Kesal
6
Kesal
OMG OMG
8
OMG
Takut Takut
7
Takut
Keren Keren
5
Keren
Sedih Sedih
10
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

2 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki