Buat Project Ebook HTML & CSS (Eye Protection Color)

Project: Ebook HTML & CSS (Eye Protection Color)

Tujuan

Membuat sebuah ebook statis menggunakan HTML5 dan CSS dengan tampilan yang nyaman dibaca dalam waktu lama (eye protection color), sehingga dapat diekspor menjadi PDF maupun EPUB.

Project ini juga menjadi media belajar HTML dan CSS secara bertahap.

ebook-html-css/
│
├── index.html
├── css/
│   └── style.css
├── images/
├── chapter/
│   ├── bab1.html
│   ├── bab2.html
│   ├── bab3.html
│   └── bab4.html
└── assets/

Warna Eye Protection

Banyak aplikasi membaca ebook menggunakan warna krem atau hijau muda karena lebih nyaman dibanding putih murni.

Beberapa pilihan:

Nama	Hex
Kindle Warm	#F6F1E7
Eye Protection Green	#CDECCF
Soft Cream	#F7F5E8
Warm Paper	#F4F1E6
Light Olive	#E8F0D8

Saya merekomendasikan

background-color: #CDECCF;

atau

background-color: #F6F1E7;

index.html

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Belajar HTML & CSS</title>

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

</head>

<body>

<main>

<h1>Belajar HTML & CSS</h1>

<p class="author">
Oleh Azis Rahmat Pratama
</p>

<hr>

<h2>Kata Pengantar</h2>

<p>

HTML adalah bahasa standar untuk membuat halaman web.

Buku ini ditulis sebagai catatan belajar menggunakan Visual Studio Code.

</p>

<h2>Daftar Isi</h2>

<ol>

<li>HTML Dasar</li>

<li>Semantic HTML</li>

<li>CSS Dasar</li>

<li>Layout Modern</li>

<li>Responsive Design</li>

</ol>

</main>

</body>
</html>

style.css

body{

background:#CDECCF;

color:#333333;

font-family:Georgia, serif;

font-size:20px;

line-height:1.8;

margin:auto;

max-width:850px;

padding:40px;

}

main{

background:#FDFCF7;

padding:50px;

border-radius:12px;

box-shadow:0 0 15px rgba(0,0,0,.1);

}

h1{

text-align:center;

font-size:42px;

margin-bottom:10px;

}

.author{

text-align:center;

color:#666;

font-style:italic;

}

h2{

margin-top:40px;

color:#0F5132;

}

p{

text-align:justify;

text-indent:40px;

}

ol{

line-height:2;

}

hr{

margin:40px 0;

}

Hasil

Halaman akan menyerupai buku cetak.

+--------------------------------------------------+

              Belajar HTML & CSS

           Oleh Azis Rahmat Pratama

----------------------------------------------------

               Kata Pengantar

     HTML adalah bahasa standar untuk membuat
halaman web....

               Daftar Isi

1. HTML Dasar

2. Semantic HTML

3. CSS Dasar

4. Layout Modern

5. Responsive Design

+--------------------------------------------------+

Fitur yang Dapat Ditambahkan

✅ Dark Mode

background:#1E1E1E;
color:#E8E8E8;

✅ Night Reading

background:#282C34;
color:#DCDCDC;

✅ Sepia

background:#F4ECD8;

✅ Green Eye Protection

background:#CDECCF;

Target Pembelajaran

Jika dikembangkan secara bertahap, proyek ini dapat mencakup materi berikut:

HTML Dasar
Semantic HTML
CSS Dasar
Typography
Box Model
Warna dan Background
Flexbox
Grid Layout
Responsive Design
CSS Animation
Print CSS
Pembuatan PDF
Pembuatan EPUB
Hosting di GitHub Pages
Publikasi ke Kindle Direct Publishing (KDP)

Proyek ini sangat sesuai dengan tujuan Anda yang sebelumnya ingin menggunakan Visual Studio Code sebagai lingkungan belajar HTML dan CSS sekaligus menghasilkan buku elektronik. Setelah seluruh bab selesai, Anda dapat mengonversi kumpulan halaman HTML tersebut menjadi EPUB atau PDF menggunakan alat seperti Pandoc atau Calibre, sehingga satu proyek dapat menjadi materi belajar, dokumentasi pribadi, dan ebook yang siap dibaca di Kindle.

Azis R. Pratama