Belajar Membuat Layout Statis Sederhana

Selamat datang lagi di duniacodeiptek friends, Kali ini saya akan membahas atau membagikan tutorial membuat layout statis sederhana dengan menggunakan bahasa pemograman HTML dan CSS.

Langsung saja simak dengan baik dibawah yah ........

Tahap-tahap membuat layout :

1. Membuat folder Layout
2. Membuat coding html nya
3. Membuat coding CSS nya
4. Jalankan

Tahap 1

Ditahap pertama ini silahkan agan-agan semua membuat folder nya terlebih dahulu di server yang agan gunakan , seperti wamp server , xampp dll . atau bisa juga membuat folder nya di data D/E/F. Dan buat saja nama folder nya layout atau bisa juga dengan nama yang kalian inginkan.

Tahap 2

Lanjut ditahap kedua ini silahkan buka text editor yang agan gunakan masing-masing, seperti notepad++, Sublim, Intype, dll . Jika sudah dibuka ketik saja coding HTML berikut dibawah ini dan jangan sampai ada yang salah penulisannya ... 

Jika sudah diketik semua langsung saja di save/simpan dengan nama "index.html" tanpa tanda petik dua , dan  simpannya didalam folder layout yang agan buat di tahap 1 .

Tahap 3

Lanjut di tahap akhir ini agan buat juga coding css nya agar tampilan lebih menarik dan untuk bisa membedakan masing-masing fungsi tab <div> pada codingan HTML agar terlihat seperti website menarik . Langusng saja ketik codingan css nya dibawah ini, dan jangan juga sampai ketinggalan satu huruf/karakter pun ......

setelah selesai diketik semua langsung saja di save juga dengan nama "gaya.css" tanpa tanda petik dua , dan simpan didalam folder yang tadi agan buat .

Tahap Terakhir

Langusng saja lihat hasilnya menggunakan browser yang agan gunakan , seperti Google Chrome,Mozilla, opera, dll .Seperti gambar ini bawah ini :)

Sekian dari saya sampai jumpa di lain waktunya , tetep pantau ya blog ini :) pastikan agan selalu dapat update terbaru dari blog ini :),dan 

jangan lupa di share, dan comment nya ya , jika ada yang ingin ditanyakan atau masih binggung dengan fungsi-fungsi di atas silahkan comment dibawah ini :) ..... Terima Kasih :)

Bagikan Artikel ini