Cara Membuat Notepad Menggunakan HTML & CSS

Cara Membuat Notepad Menggunakan HTML & CSS

Author : Published:
Apa itu notepad? Rata-rata pengguna komputer tau itu notepad karena notepad merupakan aplikasi untuk menulis, menyiman, mengedit file berformat txt ataupun yang lainnya yang sudah disediakan oleh os masing masing. Jika notepad pada pc sudah biasa, lalu bagaimana jika membuka notepad dibrowser? berikut cara membuatnya ada di bawah!

  • Pertama buka notepad, lalu masukan kode di bawah dan simpan dengan nama index.html



<!DOCTYPE html>




<html lang="en">



<head>



    <meta charset="UTF-8">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <meta http-equiv="X-UA-Compatible" content="ie=edge">



    <title>Notepad</title>



    <link rel="stylesheet" href="style.css">



</head>



<body>



    



    <div class="notepad">



        <div class="title-bar">



            <div class="row">



                <div class="col-2">



                    <span class="dot" style="background: #e74c3c;"></span>



                    <span class="dot" style="background: #f1c40f;"></span>



                    <span class="dot" style="background: #1abc9c;"></span>



                </div>



                <div class="col-2 right-align">



                    <p>Notepad</p>



                </div>



            </div>



        </div>



        <div class="main-menu">



            <span>File</span>



            <span>Edit</span>



            <span>View</span>



            <span>Go</span>



            <span>Help</span>



        </div>



        <div class="editor">



            <textarea></textarea>



        </div>



    </div>







</body>



</html>
  • Lalu masukan lagi kode di bawah dan simpan dengan nama style.css



*{




    margin: 0;



    padding: 0;



    font-family: 'Source Sans Pro';



    box-sizing: border-box;



}



body{background: #16a085;}



.notepad{



    width: 720px;



    position: absolute;



    bottom: 50%;



    right: 50%;



    transform: translate(50%, 50%);



}



.right-align{text-align: right;}



.row::after{



    content: "";



    display: table;



    clear: both;



}



.title-bar{



    background: #34495e;



    color: #fff;



    padding: 5px 17px;



    border-top-left-radius: 7px;



    border-top-right-radius: 7px;



}



.dot{



    width: 10px;



    height: 10px;



    border-radius: 50%;



    display: inline-block;



    cursor: pointer;



}



.col-2{



    width: calc(100%/2);



    float: left;



}



.main-menu{



    background: #34495e;



    padding: 5px 17px;



}



.main-menu span{



    display: inline-block;



    margin-right: 20px;



    color: #fff;



    cursor: pointer;



}



.editor{



    width: 100%;



    height: 400px;



    overflow: hidden;



}



.editor textarea{



    width: 100%;



    height: 400px;



    border: none;



    padding: 10px;



    font-size: 16px;



    color: #fff;



    outline: none;



    border-bottom-left-radius: 7px;



    border-bottom-right-radius: 7px;



    background: #2c3e50;



    resize: none;



}
  • Jangan lupa ganti dari text document menjadi all files saat save kode
  • Simpan kedua file tersebut dalam satu folder
  • Lalu buka index.html dengan chrome atau browser apa saja dan liat hasilnya.
Jika berhasil notepadnya akan  seperti ini:


Tonton video cara pembuatannya di youtube Dingkoding
Credit diberikan kepada yang membuatnya yaitu Dingkoding
Saya menemukannya diakun youtubenya Dingkoding silahkan subscribe & lihat hasil karyanya yang lain.
Jika ada pertanyaan atau saran silahkan berkomentar atau menghubungi lewat email pada menu contact.
0 Comments

Silahkan jika ada yang ingin memberi saran atau pertanyaan jangan sungkan :) . Jangan Spam!