Belajar Web Design : Membuat Scrollspy menggunakan Bootstrap 4

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini kita akan belajar Scrollspy menggunakan Bootstrap 4. Sebelum mulai, apa sih itu Scrollspy???

Jadi Scrollspy itu biasanya digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi scroll pada suatu halaman.

Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan benar:

1. Harus digunakan pada komponen Navbar Bootstrap atau List group.

2. Scrollspy membutuhkan position: relative; pada elemen HTML yang biasanya dijadikan target, biasanya tag .

3. Tag “a” diperlukan dan harus menunjuk ke elemen dengan id=”” itu.
Ketika berhasil diterapkan, Navbar atau List group akan berubah, memindahkan kelas .active dari satu item menu ke item menu lainnya berdasarkan target yang terkait. Continue reading

SUBLIME TEXT 3, Aplikasi Web Editor Terbaik

Assalamualaikum Wr. Wb,

Alhamdulillah, kali ini bisa posting artikel lagi. Dan pada postingan ini saya akan membagi sedikit pengalaman pribadi dalam membuat halaman website. Yang mana dalam membuat website tersebut pasti tidak pernah lepas dari aplikasi web editor sebagai pendukungnya.

 

Sublime Text 3 merupakan aplikasi Web Editor yang saya pakai sampai saat ini. Yang mana aplikasi ini sangat ringan dan tidak ribet dalam penggunaannya. Desain warna tulisan kodingnya yang sangat interaktif beserta variasi warna yang menarik. Selain itu warna teks kodingnya juga bisa diganti warna temanya. Jadi dengan teks koding yang enak untuk dilihat bisa membuat banyak pengguna betah dalam proses koding. Itulah beberapa alasan yang tepat untuk membangun sebuah web.

Continue reading

Pentingnya Belajar Web Desain

Assalamualaikum Wr. Wb,

Kembali lagi dengan saya, dan Alhamdulillah sekarang bisa posting artikel lagi. Pada postingan ini, saya ingin membahas tentang Web Desain. Yang mana Web Desain itu merupakan suatu ilmu atau pemahaman tentang desain bentuk halaman suatu website.

 

Web Desain itu termasuk penting, karena web desain itu merupakan tahap awal dalam membuat suatu website. Web desain itu meliputi style, warna, bentuk kerangka suatu website. Dengan tampilan yang baik juga, seorang pengguna website bisa merasa nyaman dan betah berada dalam web yang kita bangun.

Continue reading

Kesalahan yang sering Dilakukan dalam Menulis HTML

Assalamualaikum, Wr. Wb.

Alhamdulillah bisa posting artikel lagi di Webhozz BlogO, iya langsung saja.

Pada artikel ini, kita akan membahas sedikit tentang HTML. Ya, mungkin untuk teman-teman programmer web tidak asing mendengarnya. Karena HTML itu, merupakan suatu bahasa yang paling pertama untuk dipelajari dalam membangun sebuah website. HTML ini juga merupakan kerangka utama dalam membuat sebuah website yang mana HTML bisa diibaratkan saat kita membangun rumah, kita punya pondasi utama seperti tiang, atap, pintu, jendela dan lain-lain. Untuk menghiasi pondasi tersebut dibutuhkanlah CSS untuk mempercantik pondasi tersebut agar terlihat lebih baik.

Continue reading

Mengenal CSS

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai pengenalan CSS, nah biar pada nggak bingung langsung aja yuk kita masuk ke pembahasan bermain dengan controllers codeigniter sobat Webhozz.

CSS (Cascading Style Sheet) berguna untuk menentukan tema tampilan dari sebuah website. CSS merupakan bahasa Continue reading

HTML Layouts

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena dengan mudah dapat diposisikan dengan CSS.
Contoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:

kode html nya seperti berikut:


<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>

<p>
London is the capital city of England.
 It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>

<p>
Standing on the River Thames, 
London has been a major settlement for two millennia,
its history going back to its founding by the Romans, 
who named it Londinium.
</p>

</div>

<div id="footer">
Copyright © webhozz.com
</div>

lalu kode css seperti ini:

 

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 

maka hasinya akan sperti ini:

html_layout

HTML Classes

Classing Blok Elements Class HTML atribut befungsi memungkinkan untuk menentukan style yang sama untuk “equel” elemen.

kode cssnya seperti berikut:

div.sama {    
background-color:black;    
color:white;    
margin:20px;    
padding:20px;
}

maka kode pada htmlnya adalah sebagai berikut:


<div class="cities">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>

<div class="cities"><h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater</p>
</div>

maka hasilnya akan seperti gambar di bawah ini:

classes