Myjayvyn.com

Cara Membuat Landing Page: File dan Folder Kerja

14  |  1226 Views

Lanjutan…

Pada artikel ini akan membahas cara membuat landing page: file dan folder kerja.
Review sejenak, mungkin dari pelajaran menggambar layout kemarin masih ada yang bingung…
cobaaa… kalo saya kasih desain jadinya kira-kira masih bingung ga yaa??

Desain LP

Desain LP

Nah pastinya kalo udah lihat desain LP diatas makin semangat dong belajarnya…

Yuk kita mulai memainkan coding dalam 2 berkas index.html dan style.css, tapi sebelum itu tahukah anda fungsi kedua file tersebut? Begini… biasanya dalam membuat sebuah web itu ada istilah front end dan back end.

  • Front end. Gambar LP yang anda lihat diatas adalah front end dari sebuah halaman web atau tampilan visual dari sebuah halaman web.
  • Back end. Adalah dapurnya, berupa koding yang dituangkan di berkas index.html dan style.css

Lalu fungsi index.html dan style.css adalah:

  • index.html berisi struktur web berbahasa html yang membangun sebuah halaman web. File ini juga yang akan pertama kali dipanggil oleh webserver secara otomatis.
  • style.css sesuai dengan namanya style berarti gaya, file ini nanti yang mengatur fashion dari sebuah web seperti pengaturan warna, ukuran font, border, background dan sebagainya. Walaupun sebetulnya pengaturan tersebut bisa juga langsung dituliskan dalam file index.html, hanya saja penggunaan style.css akan lebih mempermudah anda dalam mempercantik tampilan halaman web.

Bingung? Biariiin… tujuan saya memang bikin anda bingung hehe…
Perlahan tapi pasti anda akan mengerti setelah praktek… tapi ga janji yaaa 😀

Tugas pertama anda adalah membuat sebuah folder kerja di komputer… #ya iya masa dikompor#
Terserah mau disimpan di drive C:, D:, E: atau di lokasi lainnya. Nama foldernya juga terserah anda.

Lalu tugas kedua adalah membuat file kosong index.html

  • Buka aplikasi notepad, caranya klik start>>all programs>>accesoriess>>notepad.
  • Setelah aplikasi notepad terbuka, dalam kondisi kosong tanpa diketik apapun klik file>>save.
  • Lakukan persis seperti gambar dibawah ini dan simpan pada folder kerja yang tadi anda buat. Pastikan Save as type telah dirubah jadi All Files.
  • wpb90
  • Klik Save

Berikutnya membuat file kosong style.css, dengan cara yang sama:

  • Buka aplikasi notepad, caranya klik start>>all programs>>accesoriess>>notepad.
  • Setelah aplikasi notepad terbuka, dalam kondisi kosong tanpa diketik apapun klik file>>save.
  • Lakukan persis seperti gambar dibawah ini dan simpan pada folder kerja yang tadi anda buat. Pastikan Save as type telah dirubah jadi All Files.
  • wpb92
  • Klik Save

Done!! kini anda telah memiliki 2 buah file index.html dan style.css, cobalah buka file index.html dengan mendobel klik filenya, biasanya akan langsung terbuka melalui browser. Coba lihat apakah sudah ada tampilan webnya? Kalo sudah ada… selamat!!! Keajaiban telah menimpa pada tampilan web anda dan saya tidak sanggup menjelaskan kejadian langka tersebut hehe…

Silakan komen bila ada kesulitan yaa…
Bersambung…

 

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

14 Comments

  1. ade alfay

    pak agi, saya ga menemukan NOTEPAD, dimana gerangan? hiks
    samakah dengan WORDPAD?
    please help me…

  2. ade alfay

    ups maaf udah ketemuuu….
    udah kerjain sesuai petunjuk, yang keluar jadi begini file:///D:/BikinLP/Index.html
    hancur ya paak… #tutupmuka

  3. fenny

    Sudah diikuti stepnya, jadinya halaman html blank
    bener gak pak 🙂

  4. Dinar

    kok gak seperti digambar pak, munculnya seperti gambar kertas bukan bulet begitu
    salah ya pak 🙁

  5. Dinar

    maaf pak ternyata gambarnya e, kok gak seperti mozila firefox ya, seperti gambarnya pak agi

So, what do you think ?