Home » How To » Cara Membuat WebBook

Cara Membuat WebBook

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat Buku HTML yang akan berfungsi di semua perangkat yaitu: PC, laptop, tablet, dan ponsel.

Pertama, Buat Halaman HTML Dasar

HTML adalah bahasa markup standar untuk membuat situs web dan CSS adalah bahasa yang menjelaskan gaya dokumen HTML.

Kita akan menggabungkan HTML dan CSS untuk membuat basic Buku HTML .

Pertama mulai dengan kerangka HTML:

Contoh

<!DOCTYPE html>
<html>

<head>
<title>Buku Saya</title>
<meta charset="UTF-8">
</head>

<body>
<h1>WebBook Saya</h1>
<p>Buku HTML yang saya buat dengan sederhana</p>
</body>

</html>

Penjelasan Kode

  • <!DOCTYPE html> Jenis dokumennya adalah HTML
  • <html> </html> Awal dan akhir dokumen
  • <head> </head> Awal dan akhir informasi dokumen
  • <title> Judul buku (“Buku Saya”)
  • <meta charset="UTF-8"> Kumpulan karakter yang digunakan (UTF-8)
  • <body> </body> Awal dan akhir konten yang terlihat
  • <h1> </h1>Awal dan akhir heading
  • <p> </p>Awal dan akhir paragraf

Kode yang dijelaskan di atas adalah tag HTML.

Tag HTML yang digunakan untuk mendefinisikan konten dokument HTML.

Tag dimulai dengan < (tanda kurang dari) dan diakhiri dengan > (tanda lebih besar dari).

Cara <p> dan </p> ini digunakan untuk menandai awal dan akhir paragraf.

Agar sepenuhnya benar, harus ada atribut bahasa yang ditambahkan ke tag  <html> untuk menentukan bahasa yang digunakan di buku:

<html lang="en">

Menambahkan informasi meta berikut akan membuat buku yang akan kita tampilkan dengan benar di semua perangkat, PC, laptop, tablet, dan telepon:

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

Contoh

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

<head>
<title>Buku Saya</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<h1>WebBook Saya</h1>
<p>Buku HTML yang saya buat dengan sederhana</p>
</body>

</html>

Buat Daftar Isi

Di dalam elemen <body> </body> , tambahkan daftar isi:

<body>

<h1>List Song Of Justin Bieber</h1>
<h3>Table of Contents</h3>

<p>1. Love Yourself</p>
<p>2. I'm Sorry</p>
<p>3. As Long As You Love Me</p>
<p>4. Boyfriend</p>
<p>5. Never Let You Go</p>

</body>

Buat halaman HTML untuk Bab 1

File: LoveYourself.html

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

<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body class="w3-content">
<div class="w3-container">
<h1>1. Love Yourself</h1>
<h3>Track 1 Love Yourself- Justin Bieber.</h3>
<p>The Lyrics.</p>
  <p>
For all the times that you rain on my parade<br>
And all the clubs you get in using my name<br>
You think you broke my heart, oh girl for goodness sake<br>
You think I'm crying on my own, well I ain't<br>
And I didn't wanna write a song<br>
Cause I didn't want anyone thinking I still care<br>
I don't but, you still hit my phone up<br>
And baby I be movin' on<br>
And I think you should be somethin'<br>
I don't wanna hold back, maybe you should know that<br>
My mama don't like you and she likes everyone<br>
And I never like to admit that I was wrong<br>
And I've been so caught up in my job, didn't see what's going on<br>
But now I know, I'm better sleeping on my own<br>
Cause if you like the way you look that much<br>
Oh, baby, you should go and love yourself<br>
And if you think that I'm still holdin' on to somethin'<br>
You should go and love yourself<br>
And when you told me that you hated my friends<br>
The only problem was with you and not them<br>
And every time you told me my opinion was wrong<br>
And tried to make me forget where I came from<br>
And I didn't wanna write a song<br>
Cause I didn't want anyone thinking I still care<br>
I don't but, you still hit my phone up<br>
And baby I be movin' on<br>
And I think you should be somethin'<br>
I don't wanna hold back, maybe you should know that<br>
My mama don't like you and she likes everyone<br>
And I never like to admit that I was wrong<br>
And I've been so caught up in my job, didn't see what's going on<br>
But now I know, I'm better sleeping on my own<br>
Cause if you like the way you look that much<br>
Oh, baby, you should go and love yourself<br>
And if you think that I'm still holdin' on to somethin'<br>
You should go and love yourself<br>
For all the times that you made me feel small<br>
I fell in love, now I feel nothin' at all<br>
Had never felt so low when I was vulnerable<br>
Was I a fool to let you break down my walls?<br>
Cause if you like the way you look that much<br>
Oh, baby, you should go and love yourself<br>
And if you think that I'm still holdin' on to somethin'<br>
You should go and love yourself<br>
Cause if you like the way you look that much<br>
Oh, baby, you should go and love yourself<br>
And if you think that I'm still holdin' on to somethin'<br>
You should go and love yourself<br>
  </p>
</div>

</body>
</html>

Tambahkan Tautan ke Bab 1

<body>
  
<h1>List Song Of Justin Bieber</h1>
<h3>Table of Contents</h3>

  <p><a href="LoveYourself.html">1. Love Yourself</a></p>
<p>2. I'm Sorry</p>
<p>3. As Long As You Love Me</p>
<p>4. Boyfriend</p>
<p>5. Never Let You Go</p>

Dalam contoh di atas, kita menamai bab pertama dari buku tersebut:

“LoveYourself.html”.

Kalian bisa gunakan nama lain untuk membuatnya.

Setelah membuat satu file seperti di atas, jangan lupa simpan pada sebuah folder agar tidak susah mencarinya. Kita harus membuat yang lainnya seperti :

  • “Im_Sorry.html”
  • “AsLongAsYouLoveMe.html”
  • “Boyfriend.html”
  • “NeverLetYouGo.html”

Tambahkan Tautan ke Setiap Bab

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

<head>
<title>Track List Song Justin Bieber</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="w3-content">

<div class="w3-container">
<h1>List Song Of Justin Bieber</h1>
<h3>Table of Contents</h3>

<p><a href="LoveYourself.html">1. Love Yourself</a></p>

<p><a href="Im_Sorry.html">2. i'm Sorry</a></p>

<p><a href="AsLongAsYouLoveMe.html">3. As Long As You Love Me</a></p>

<p><a href="Boyfriend.html">4. Boyfriend</a></p>

<p><a href="NeverLetYouGo.html">5. Never Let You Go</a></p>
</div>

</body>
</html>

You may also like