Skip to main content

MEMBUAT SEARCH BAR SEDERHANA MENGGUNAKAN HTML DAN CSS

           


            HTML merupakan sebuah bahasa markah yang dipakai untuk membuat halaman sebuah website,dimana dapat menampilkan berbagai macam informasi didalam menjelajahi sebuah website pada internet.CSS merupakan suatu aturan didalam mengendalikan beberapa kelompok komponen pada sebuah website agar lebih terstruktur dan seragam.

            Pada topik kali ini saya ingin membahas tentang cara membuat search bar sederhana menggunakan HTML dan CSS.Ada berbagai macam software text editor yang bisa anda gunakan dalam menjalankan perintah dari HTML dan CSS.Contoh software yang bisa anda gunakan seperti Notepad,Notepad++,Atom,Subleme text,Vs.code dan yang lain-lain.

            Untuk menjalankan codingan ini saya menggunakan software text editor Vs.code.Anda bisa juga menggunakan software text editor yang lain untuk menjalankan codingan atau program ini.Akan tetapi saya merekomendasikan software Vs.code,karena selain bersifat open souce,Software Vs.code memiliki beberapa keunggulan dibandingkan software text editor yang lainnya.Salah satu keunggulan yang dimiliki software Vs.code adalah sudah support berbagai macam jenis bahasa pemrograman dan memiliki fitur yang berbeda serta beberapa jenis ekstensi yang bisa diinstall langsung untuk dipergunakan.

            Jika anda belum memiliki software text editor Vs.code diperangkat komputer,laptop atau pc yang anda gunakan ,anda bisa download terlebih dahulu dilaman situs website resminya https://code.visualstudio.com/download.Berikut tampilan atau gambar Software text editor Vs.code setelah anda install dan dibuka.











            Setelah anda buka software Vs.code,kemudian buka Text file yang baru atau anda bisa tekan tombol CTRL+N pada keyboard anda.Setelah itu pilih jenis bahasa pemrograman yang ingin anda pakai,Kemudian tuliskan code berikut ini.


Berikut Untuk Code HTML nya:

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <title>Test</title>

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

</head>

    

<body>

    

<div class="flexbox">

  <div class="search">

    <h1>Click on search icon</h1>

    <div>

      <input type="text" placeholder="Search..." required>

    </div>

  </div>

</div>

    </body>

</html>


Berikut Untuk Code CSS nya:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");


* {

  font-family: Roboto, sans-serif;

  padding: 0;

  margin: 0;

}


html, body {

  width: 100%;

  height: 100%;

}


.flexbox {

  background: #f2eee3;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}


.search {

  margin: 20px;

}



.search > h1 {

  color: red;

  margin-bottom: 15px;

  

}


.search > div {

  display: inline-block;

  position: relative;

  

}


.search > div:after {

  content: "";

  background: black;

  width: 4px;

  height: 20px;

  position: absolute;

  top: 40px;

  right: 2px;

  transform: rotate(135deg);

}


.search > div > input {

  color: black;

  font-size: 16px;

  background: transparent;

  width: 25px;

  height: 25px;

  padding: 10px;

  border: solid 3px black;

  outline: none;

  border-radius: 35px;

  transition: width 0.5s;

}


.search > div > input::placeholder {

  color: black;

  opacity: 0;

  transition: opacity 150ms ease-out;

}


.search > div > input:focus::placeholder {

  opacity: 1;

}


.search > div > input:focus,

.search > div > input:not(:placeholder-shown) {

  width: 250px;

}

  

            Langkah selanjutnya adalah simpan atau save codingan tersebut ditempat penyimpanan yang anda inginkan.Kemudian anda bisa RUN atau jalankan codingan tersebut,maka hasilnya akan tampak seperti gambar atau tampilan berikut ini.












SELAMAT MENCOBA!!!😇


Comments

Popular posts from this blog

PENGERTIAN DAN MANFAAT PEREGANGAN STATIS DAN DINAMIS DALAM DUNIA OLAHRAGA

                          Dalam Gerakan peregangan meliputi peregangan statis dan dinamis. Peregangan statis dilakukan setelah latihan, sedangkan peregangan dinamis dilakukan sebelum latihan. Kedua jenis peregangan ini memiliki manfaatnya masing-masing.Peregangan (stretching) sebaiknya dilakukan sebelum  berolahraga. Bagi anda yang belum tahu,  peregangan termasuk peregangan statis dan dinamis. Keduanya memiliki fungsi dan keunggulan masing-masing.            Peregangan Statis adalah jenis peregangan yang dilakukan di akhir latihan. Ini memiliki pola peregangan berbeda yang terjadi selama periode waktu tertentu dan tidak ada gerakan. Pemanasan statis memungkinkan otot tubuh bagian atas untuk rileks sambil meningkatkan fleksibilitas dan rentang gerak.Berikut manfaat peregangan stastis: * Peningkatan fleksibilitas dan rentang gerak          ...

Komponen & Gerak Dasar Kebugaran Jasmani Dalam Berolahraga

               Kebugaran jasmani adalah alat pembelajaran Pendidikan Jasmani Olahraga dan Kesehatan, selain itu merupakan upaya untuk meningkatkan dan mengembangkan kesehatan dan kebugaran tubuh.               Kebugaran jasmani atau physical fitness dapat diartikan sebagai kondisi jasmani yang menggambarkan kebugaran jasmani atau dapat pula diartikan sebagai kemampuan seseorang untuk melakukan suatu pekerjaan tertentu dengan baik tanpa mengalami kelelahan yang berarti. Komponen kebugaran jasmani, di antaranya adalah sebagai berikut.   1. Kelenturan adalah kemampuan sendi untuk melakukan gerakan secara maksimal.   2. Keseimbangan merupakan kemampuan sikap dan posisi tubuh pada saat tertentu.    3. Kecepatan adalah kemampuan berpindah dari satu tempat ke tempat lain dalam waktu yang singkat.        4. Kelincahan merupakan kemampuan mengubah arah dengan ...

MEMBUAT DIGITAL CLOCK DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN C++

                              Pembahasan kali ini akan mengulas tentang cara membuat Digital Clock dengan menggunakan bahasa pemrograman C++.Untuk menjalankan codingan atau programnya saya menggunakan software Dev C++.Saya menggunakan software ini karena sangat cocok untuk mengcompile serta menjalankan bahasa pemrograman c++.Jika anda belum memiliki software Dev C++ silahkan download di situs website resminya  https://sourceforge.net/projects/orwelldevcpp/ .               Setelah anda download silahkan install seperti software pada umumnya,Berikut tampilan atau gambar software Dev c++ setelah di install dan dibuka.                 Setelah anda buka software Dev C++ langkah selanjutnya adalah tuliskan code berikut ini: #include<iostream> #include<conio.h> #include<dos.h>  #include <win...