Membuat Website dengan Menggunakan HTML

Mempercantik Tampilan Website dengan Menggunakan CSS

Mempercepat Proses Pembuatan Website dengan Bootstrap

Memformat Teks

Kami percaya bahwa cara termudah dalam mempelajari sesuatu adalah dengan terjun mengerjakan projek secara langsung, sesederhana apapun projek tersebut.

Projek yang akan kita kerjakan dalam pembuatan website kita kali ini bertema “Tangga Lagu Indonesia“.

Untuk mempermudah Anda dalam mengerjakan projek ini, kami telah menyiapkan data yang akan digunakan untuk mengisi konten website nantinya, silahkan tengok ke bagian bawah, di sana ada attachments (berisi lirik lagu, link file mp3 dan biografi penyanyi).

Seperti projek pada umumnya, sebelum memulai untuk mengerjakan sesuatu tentu harus membuat perencanaan terlebih dahulu, tanpa perencanaan kita akan bingung sebenarnya kita didepan komputer ini mau ngapain? Tanpa perencanaan yang matang kita bisa kehilangan fokus…

Pada saat akan membuat sebuah rumah, maka dipastikan kita sudah memiliki gambaran rumah seperti apa yang ingin dibuat, berapa lantai, berapa luasnya, dan lain sebagainya. Begitu juga halnya dengan pembuatan suatu website, setidaknya kita harus membuat desain awalnya, cukup dengan menggunakan kertas dan ballpoint, buatlah coret-coretan sebelum mengetikkan apapun di komputer.

Kita telah memiliki dua desain website, desain pertama akan digunakan untuk halaman website yang menampilkan daftar judul lagu. Sedangkan desain kedua akan digunakan pada halaman website yang berisi player untuk mendengarkan lagu, menampilkan lirik lagu, dan menampilkan biografi penyanyinya.

Sekarang buat sebuah dokumen baru, lalu ketikan baris kode berikut (ingat: diketik bukan copas!):

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Tangga Lagu Indonesia</title>
  </head>
  
  <body>
    <h1>Tangga Lagu Indonesia</h1>
    
    <p>PENTING!</p>
    <p>Halaman website ini dibuat untuk keperluan pembelajaran, kami sama sekali <b>TIDAK</b> ada maksud untuk melakukan pembajakan lagu dan musik berhak cipta. Semua lagu yang digunakan dalam proses pembelajaran pembuatan website ini <u>hanya merujuk</u> pada file-file MP3 yang sudah tersedia di internet, khususnya situs <i>archive.org</i></p>
  
    <p>Copyright &copy; 2019, Panduan.VIP</p>
  </body>
</html>

Jika sudah selesai, sekarang kita bahas tentang tag-tag yang berfungsi untuk melakukan format pada teks.

<b></b>, berfungsi agar teks tercetak tebal, Anda juga bisa menggunakan tag <strong></strong> untuk menebalkan suatu teks.

<i></i>, berfungsi agar teks tercetak miring, Anda juga bisa menggunakan tag <em></em> untuk menghasilkan efek miring pada suatu teks.

<u></u>, berfungsi agar teks tercetak dengan tanda garis pada bagian bawahnya.

Sedankan &copy; bukanlah merupakan tag, namun sebuah entitas karakter yang berfungsi untuk mencetak simbol “copyright” (¬©). Ada banyak simbol-simbol khusus yang bisa dicetak dengan menggunakan entitas karakter, untuk lebih detailnya silahkan kunjungi¬†https://dev.w3.org/html5/html-author/charref

Jika sudah selesai mengetikan baris kode di atas simpanlah dokumen HTML Anda dengan nama index.html, lalu lihatlah hasilnya.