Cara membuat halaman error 404 di html

Halo pembaca, Hari ini di blog ini Anda akan belajar cara membuat Halaman Kesalahan 404 Kustom hanya menggunakan HTML & CSS. Sebelumnya saya telah membagikan banyak blog yang berhubungan dengan Desain Web seperti (Responsive Footer Design, Responsive Drop-down Menu, dan Responsive Sidebar Menu). Namun sekarang saya akan membuat halaman Error 404 yang juga merupakan bagian atau bagian dari Website

Table of Contents Show

Video Tutorial Desain Halaman Error 404 Kustom
Anda mungkin menyukai ini
Desain Halaman Kesalahan 404 Kustom [Kode Sumber]
Apa halaman HTML untuk kesalahan 404?
Apa itu halaman kesalahan 404 khusus?
Bagaimana cara membuat halaman kesalahan 404 khusus PHP?

Pesan kesalahan HTTP 404, 404 Tidak Ditemukan, atau 404 Halaman Tidak Ditemukan adalah kode respons standar Hypertext Transfer Protocol (HTTP), dalam komunikasi jaringan komputer, untuk menunjukkan bahwa browser dapat berinteraksi dengan server tertentu tetapi server tidak dapat . Kesalahan ini ditampilkan saat halaman atau URL yang diminta pengguna tidak ada di situs tertentu

Dalam program ini (Desain Halaman Kesalahan Kustom 404), pada awalnya, di halaman web, ada latar belakang gradien linier dengan kotak wadah putih. Di dalam kotak terdapat teks judul, deskripsi, dan dua tombol. Teks 404 itu memiliki animasi topeng yang berarti ada animasi warna gradien yang mengalir dari atas ke bawah. Halaman kesalahan ini dibuat hanya untuk tujuan desain dan tidak akan mengarahkan Anda ke halaman lain saat Anda mengklik tombol

Jika Anda merasa sulit untuk memahami apa yang saya katakan. Anda dapat menonton tutorial video lengkap tentang program ini (Desain Halaman Kesalahan Kustom 404)

Video Tutorial Desain Halaman Error 404 Kustom

Seperti yang telah Anda lihat animasi pemindahan topeng teks yang sebenarnya dalam video dan saya yakin Anda memahami kode dasar di balik pembuatan halaman kesalahan ini. Ini adalah program CSS murni sehingga tidak ada kode besar yang digunakan untuk membuat program ini. Saat ini setiap situs web memiliki halaman kesalahan 404 khusus yang membantu memberi tahu pengguna tentang halaman yang mereka minta tidak ada di situs web

Anda juga dapat membuat halaman kesalahan jenis ini dan menggunakannya pada proyek dan halaman HTML Anda. Jika Anda mengetahui JavaScript maka Anda dapat menambahkan fitur lanjutan ke program ini dan membawa program ini ke level berikutnya. Jika Anda menyukai program ini (Desain Halaman Kesalahan Kustom 404) dan ingin mendapatkan kode sumber. Anda dapat dengan mudah mendapatkan kode sumber dari program ini. Untuk mendapatkan kode sumber Anda hanya perlu menggulir ke bawah

Anda mungkin menyukai ini

Desain Paginasi yang Mengagumkan
Desain Bagian Footer Responsif
Desain Menu Sidebar Responsif
Bilah Menu Drop-down Responsif

Desain Halaman Kesalahan 404 Kustom [Kode Sumber]

Untuk membuat program ini (Desain Halaman Kesalahan Kustom 404). Pertama, Anda perlu membuat dua File, satu File HTML dan satu lagi adalah File CSS. Setelah membuat file-file ini cukup rekatkan kode berikut di file Anda

Pertama, buat file HTML dengan nama index. html dan rekatkan kode yang diberikan di file HTML Anda. Ingat, Anda harus membuat file dengan. ekstensi html

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>404 Error Page | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div id="error-page">
         <div class="content">
            <h2 class="header" data-text="404">
               404
            </h2>
            <h4 data-text="Opps! Page not found">
               Opps! Page not found
            </h4>
            <p>
               Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.
            </p>
            <div class="btns">
               <a href="https://www.codingnepalweb.com/">return home</a>
               <a href="https://www.codingnepalweb.com/">report problem</a>
            </div>
         </div>
      </div>
   </body>
</html>

Kedua, buat file CSS dengan nama style. css dan rekatkan kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan. ekstensi css

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
  background-size: 400%;
}
#error-page{
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
#error-page .content{
  max-width: 600px;
  text-align: center;
}
.content h2.header{
  font-size: 18vw;
  line-height: 1em;
  position: relative;
}
.content h2.header:after{
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
  right: 0;
  background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.25);
  animation: animate 10s ease-in-out infinite;
}
@keyframes animate {
  0%{
    background-position: 0 0;
  }
  25%{
    background-position: 100% 0;
  }
  50%{
    background-position: 100% 100%;
  }
  75%{
    background-position: 0% 100%;
  }
  100%{
    background-position: 0% 0%;
  }
}
.content h4{
  font-size: 1.5em;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #000;
  font-size: 2em;
  max-width: 600px;
  position: relative;
}
.content h4:after{
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
  right: 0;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content p{
  font-size: 1.2em;
  color: #0d0d0d;
}
.content .btns{
  margin: 25px 0;
  display: inline-flex;
}
.content .btns a{
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  border: 2px solid #69a6ce;
  color: #69a6ce;
  font-weight: 500;
  padding: 10px 25px;
  border-radius: 25px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.content .btns a:hover{
  background: #69a6ce;
  color: #fff;
}

Itu saja, sekarang Anda telah berhasil membuat Desain Halaman Kesalahan 404 Kustom menggunakan HTML & CSS. Jika kode Anda tidak berfungsi atau Anda menghadapi kesalahan/masalah apa pun, silakan beri komentar atau hubungi kami dari halaman kontak

Apa halaman HTML untuk kesalahan 404?

Apa itu halaman kesalahan 404 khusus?

Halaman 404 khusus menghilangkan kebingungan karena tidak mendarat di halaman yang ingin mereka tuju. Ini memberi tahu pengguna Anda bahwa ada kesalahan dengan permintaan mereka. Mungkin mereka salah mengetik URL, halaman untuk sementara tidak tersedia, atau halaman sudah tidak ada lagi

Bagaimana cara membuat halaman kesalahan 404 khusus PHP?

Halaman Kesalahan 404 Khusus di PHP .

Langkah 1. Persyaratan. Jika Anda memiliki situs web, server selang Anda harus menginstal PHP. .

Langkah 2. . htaccess. Seperti yang dinyatakan pada halaman sampul, halaman kesalahan kustom Anda dapat memiliki ekstensi apa pun yang Anda inginkan. .

Langkah 3. 404. php. .

Langkah 4. Pengujian. .

Langkah 5. File. .

1 Orang Membuat Proyek Ini