Cara Membuat E-Book

-

Membuat E-Book Pribadi Dengan HTML


Hallo teman-teman kembali lagi di blog Meliana Yunita Malau....

Kali ini saya ingin menjelaskan tentang cara membuat E-Book dengan HTML kepada teman-teman sekalian, disimak ya...

1. Membuat Halaman Utama E-Book

Untuk membuat sebuah E-Book yang pertama kali harus dibuat adalah halaman utama dari E-Book tersebut. Berikut adalah contoh coding untuk halaman utama tersebut :

<!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">
<link rel="stylesheet" href="css/Style.css">
<title>E-Book STIM Sukma</title>
</head>
<body>

<div id="container">   
<div class="header"><img src="images/logo.png" width="100" height="100"><h1>E-Book STIM Sukma Medan </h1>
</div>

<div class="main">
<div class="left">
<h3 align="center">MENU</h3>
<ul>


<li><a href="#">Home</a></li>
<li><a href="http://localhost/perpus/daftar_buku.php">Daftar Buku</a></li>
</ul>
</div>

<div class="middle">
<h3 align="center">Informatika/Keuangan/Pemasaran/Pariwisata/Perkantoran</h3>
<h2 align="center">Manajemen Informatika: Buku Terbanyak Dikunjungi </h2><br>
<div align="center">
<img src="images/rahvayana.jpg" width="240" >
</div>
<p><a href="#">Baca Selengkapnya >></a></p>
</div>

<div class="right">
<h3 align="center">BUKU TERPOPULER</h3>
<ul>
<li><a href="#">Manajemen Informatika Meliana</a></li>

<a href="Informatika">Selengkapnya</a>

<li><a href="#">Manajemen Keuangan Meliana</a></li>

<a href="Manajemen Keuangan">selengkapnya</a>
<li><a href="#">Manajemen Pemasaran Meliana</a></li>

<a href="Manajemen Pemasaran">selengkapnya</a>
<li><a href="#">Manajemen Pariwisata</a></li>

<a href="Manajemen Pariwisata">Selengkapnya</a>

<li><a href="#">Manajemen Perkantoran Meliana</a></li>

<a href="Manajemen Perkantoran">Selengkapnya</a>

</ul>
</div>

</div>
</div>
<div class="footer"><p align="center">Copyright © 2022 - E-Book Meliana Yunita Malau </a></p>
</div>
</div>
</body>
</html>

Berikut adalah hasil jadi halaman utama dari E-Book saya :

2. Cara Membuat Halaman E-Book Selanjutnya di HTML

Berikutnya saya Meliana Yunita Malau akan membahas mengenai cara membuat halaman E-Book selanjutnya di HTML. Untuk membuat sebuah halaman baru, diperlukan adanya sebuah coding baru. 

Nah, setelah teman-teman selesai membuatnya simpanlah coding tersebut di folder yang sama dengan folder E-Book ini.

Selanjutnya, teman-teman pindah kembali ke halaman coding utama E-book untuk memasukan rumus coding ke halaman berikutnya. Berikut adalah rumus nya :

<a href="Informatika.html">Selengkapnya</a>

Isilah tanda petik dua di rumus dengan judul coding untuk halaman baru dan jangan lupa untuk menyertakan ".html" setelah nama filenya, setelah hal tersebut selesai jangan lupa simpan dan reload kembali halaman web yang sudah dibuat.
Di web nanti hasil script tadi akan menjadi teks berwarna biru yang akan dapat di klik untuk akses ke halaman berikutnya.

Berikut adalah hasil jadi untuk menuju ke halaman web yang baru :


3. Halaman Isi Daftar Buku

Berikutnya adalah halaman isi yang berupa daftar buku yang ada di E-book. Berikut adalah contoh scriptnya : 

<!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">
<link rel="stylesheet" href="css/Style.css">
<title>Bagian Buku</title>
</head>
<body>
    
<div id="container">
<div class="header"><img src="images/logo.png" width="100" height="100"><h1>Judul Bagian Buku</h1></div>

<br>

<div class="middle2">
<h2 align="center">DAFTAR BUKU</h2><br>
<div align="center">
</div>

Belum selesai disitu saja, untuk membuat daftar buku yang lebih rapi saya membuat daftar buku saya dengan menggunakan tabel, berikut contoh scriptnya : 
<table>
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>
Setelah itu dibagian tanda petik buat script untuk daftar-daftar buku nya, berikut contoh scriptnya :

<div class="buku">
<div class="foto">
<img src="images/rahvayana.jpg">
<div class="judul">Judul Buku</div>
<div class="penulis"> Harga Buku : Rp...</div>
</div>
</div>

Berikut adalah contoh jadi dari halaman daftar buku saya :



        Mungkin hanya ini saja yang dapat saya jelaskan semoga bermanfaat bagi teman-teman sekalian, jika kurang jelas mohon dimaklumi karena saya juga masih belajar. Jika ingin penjelasan lebih rinci, anda dapat melihat tutorial di youtube ataupun sosial media lain. Dan jika ada kritik maupun saran akan sangat berarti untuk saya maupun kemajuan blog ini.

"Gunakanlah kemajuan teknologi saat ini untuk belajar. Tak ada yang tak mungkin bagi anda jika anda memiliki kemauan untuk lebih maju, seperti kata pepatah, dimana ada kemauan disitu ada jalan." 

Terima kasih sudah mengunjungi blog saya, sampai jumpa di blog berikutnya :)

Komentar

Posting Komentar