14 Jan 2017

Membuat header website ikut bergerak [tips dan trik]



Membuat tampilan website yang menarik memang sangat penting bagi para developer website, terutama untuk para blogger. Demi kenyamanan developer, blogger, user (pengguna) atau bahkan pengunjung sekalipun harus di perhatikan.

Kenyamanan para pengunjung dan user (pengguna) adalah salah satu point penting yang harus di pertimbangkan oleh pihak developer (pengembang atau pembangun) sebuah aplikasi.

Tampilan atau biasa disebut dengan user interface adalah salah satu yang terpenting dari segi kenyamanan pengguna dan pengunjung.

Pada kesempatan kali ini saya indra Maulana Pratama Putra akan mencoba membantu kawan-kawan yang ingin mempercantik tampilan website dan blognya.

Pada halaman blog www.indra-maulana-pratama-putra.blogspot.co.id ini saya akan coba membahas tips dan trik bagaimana caranya membuat header website atau blog agar ikut bergerak.

  • Buat Rangka Awal Halaman HTML

Code/Tag HTML <!DOCTYPE html>
<html>
<body>


</body>
</html>

buat pembaca yang belum mengerti halaman html saya sarankan untuk membaca apa itu halaman html dan rangka awal html. karena itu adalah basic / atau dasar dari materi pembahasan cara membuat header website atau blog ikut bergerak.

  • Buat Bagian Header Halaman HTML

Code/Tag HTML <!DOCTYPE html>
<html>
<body>

<header> Membuat Header Ikut Bergerak </header>


</body>
</html>

sedikit review header dalam sebuah halaman html, website atau blog itu biasanya di gunakan untuk menampilkan judul halaman, judul article, atau bahkan ada juga beberapa yang menggunakanya sebagai tempat penyimpanan navigation / menu-menu website atau blog. Header ini di simpan di bagian atas halaman website atau blog.


  • Buat Paragraf [optional]

Code/Tag HTML <!DOCTYPE html>
<html>
<body>

<header> Membuat Header Ikut Bergerak </header>

<p>
Ini adalah bagian isi dari halaman website bisa berisi text, gambar, article, link yang terhubung pada halaman lain, pemutar video, tombol unduhan file. dll
</p>


<!-- Di buat oleh www.indra-maulana-pratama-putra.blogspot.co.id -->


</body>
</html>

bagian pembuatan paragraf pada halaman html ini saya buat sebagai optional karena memang bagian paragraf ini diluar dari pada topik pembahasan cara membuat header ikut bergerak, tapi sangat membantu proses pembelajaran karena dengan adanya paragraf ini pembaca bisa mengetahui mana bagian header dan mana yang bagian isi dari pada sebuah halaman website atau blog.



  • Finishing / langkah akhir

Code/Tag HTML <!DOCTYPE html>
<html>
<body>

<header style="postition:fixed;"> Membuat Header Ikut Bergerak </header>

<p>
Ini adalah bagian isi dari halaman website bisa berisi text, gambar, article, link yang terhubung pada halaman lain, pemutar video, tombol unduhan file. dll
</p>

<!-- Di buat oleh www.indra-maulana-pratama-putra.blogspot.co.id -->

</body>
</html>

pada bagian yang diberi warna hijau dari code/tag HTML yang saya cantumkan di atas adalah pemberian CSS pada bagian header yang bertujuan untuk memposisikan bagian header tersebut agar tetap pada bagian layar / tidak ikut bergeser ketika halaman HTML, website atau blog di scroll ke bawah.

Terima kasih banyak sudah berkunjung ke blog www.indra-maulana-pratama-putra.blogspot.co.id ku ini. Semoga apa yang sudah saya bagikan bermanfaat bagi kawan-kawan pembaca semua.

Bila mana ada yang ingin di tanyakan, memberikan masukan, kritik, saran atau apapun yang berhubungan dengan pembahasan di atas, silahkan isikan di kolom komentar.

Thanks a lot guys.
stay awesome brofist, i love yaaa
Langganan: Postingan (Atom)