Design

Mudah! Ini Cara Membuat Desain Website dengan Notepad

Mudah! Ini Cara Membuat Desain Website dengan Notepad

Ingin membuat website tapi tidak memiliki aplikasi pembuat program seperti adobe dreamweaver? Tenang, Anda bisa masih bisa membuat desain website dengan menggunakan notepad. Cara membuat desain dengan notepad ini menuntut Anda untuk tahu cara menulis program lebih dahulu.

Jadi, akan lebih baik untuk Anda mengerti CSS dan HTML lebih dahulu. Kenapa? ini karena Anda harus menulis program dengan manual.

Jika Anda tidak mengerti apa yang Anda tuliskan, maka sesederhana apapun desain website, tidak akan bisa dibuat. Daripada Anda bingung, simak caranya berikut ini.

Cara Membuat Desain dengan Notepad yang Sederhana

Sebelum mulai mendesain, pastikan jika Anda memiliki notepad. Setelah itu, buka notepad Anda.

Jika sudah, dalam proses cara membuat desain dengan notepad, Anda harus menentukan dahulu, bagaimana bentuk atau tampilan website.

Kenapa? Tujuannya agar saat Anda membuat desain, Anda bisa langsung tahu mana yang harus dibuat dan mana yang tidak.

Umumnya, ada 4 bagian dari desain website, yaitu:

  • Header yang bisa berisi judul atau slogan website.
  • Navigasi atau menu.
  • Konten.
  • Footer, misalnya berisi alamat, kontak, media sosial.

Bentuk desainnya bisa Anda sesuaikan dengan tujuan pembuatan website. Jadi, kalau Anda ingin membuat website untuk anak-anak, maka buat dengan desain yang cocok untuk anak-anak. Misalnya yang memiliki tampilan sederhana dan menggunakan warna cerah.

Lalu, bagaimana cara membuatnya? Pertama-tama, Anda harus membuat dasarnya lebih dahulu. Anda bisa menuliskan

<html>

<HEAD>

<TITLE> belajar mencoba desain website</TITLE>

</HEAD>

 <BODY> <H1>Hello</H1> <HR> <P>Ini adalah halaman uji coba</P> <HR> </BODY>

</HTML>

Simpan file html tersebut dengan nama contohdesain.html lalu simpan. Pastikan untuk formatnya, Anda pilih all file.

Nama file bisa Anda sesuaikan dengan keinginan Anda. Namun, ada baiknya Anda membuat folder khusus untuk membuat menyimpan semua file desain website.

Tampilan di atas hanya tampilan dasarnya saja ya. Agar terbentuk suatu desain website, Anda perlu menambahkan css antara tag <head></head>. Contohya adalah sebagai berikut.

<html>

<HEAD>

<TITLE> belajar mencoba desain website</TITLE>

<style>

     body {

         width: 65%;

         height: auto;

         background: white;

         margin:auto;

         margin-top: 5px;

         padding-bottom: 5px;

     }

 

     p {

         text-align: center;

         font-size: x-large;

         margin:auto;

     }

 

     header,nav,article,footer {

         border-radius: 3px;

         margin: 5px 5px 5px 5px;

         border: 1px solid gainsboro;

    

     }

     header {

            height: 80px;

         background-color: gold;

     }

     nav {

         height: 45px;

         background-color: white;

     }

     article {

         height: 150px;

         background-color: magenta;

     }

    footer {

         height: 50px;

         background-color: darkkhaki;

     }

 

</style>

</head>

<body>

    <header>

         <p>Header</p>

    </header>

    <nav>

        <p>Navigasi</p>

    </nav>

    <article>

         <p>Konten</p>

   </article>

 

    <footer>

         <p>Footer</p>

    </footer>

</head>

</HTML>

Jika ingin mengujinya, buka di salah satu halaman website yang baru Anda buat. Nantinya akan muncul tampilan sesuai dengan css yang Anda buat.

Mudah! Ini Cara Membuat Desain Website dengan Notepad
Mudah! Ini Cara Membuat Desain Website dengan Notepad

Dari cara membuat desain dengan notepad yang paling sederhana di atas, Anda bisa mengembangkan desain sesuai keinginan Anda. Selamat mencoba ya.