Tutorial membuat website #1: Menyiapkan template dasar Dokument HTML

2 Aug 2020
#basscss
#html
#css

Ini adalah bagian pertama dari sesi tutorial membuat website dengan basscss. Tahap ini sangat sangat simple, hanya konfigurasi dasar, apa saja yang diperlukan oleh dokument HTML baru.

Pertama sekali, create satu folder untuk menyimpan file-file proyek tutorial web desain ini. Kemudian open folder tersebut melalui aplikasi editor pilihan kamu.

Untuk kasus tutorial ini, InsertApps menggunakan Brackets editor yang dikembang oleh Adobe.

Membuat file baru

Klik kanan pada bagian sidebar aplikasi Brackets, lalu pilih New File.

Screenshoot new file Brackets editor

Namakan file baru tersebut dengan index.html.

Pada sisi bilah kanan aplikasi Brackets, akan terbuka file index.html lembaran dokumen HTML baru yang akan kita ketik baris demi baris sintak HMTL hingga menjadi sebuah halaman web siap pakai.

Tambahkan struktur dasar sintak HTML ( Hypertext Markup Language ) berikut ini:

Screenshoot new file Brackets editor

🔥 QUICK TIPS: Aplikasi editor terbaru biasanya sudah terintegrasi dengan plugin Emmet, toolkit untuk mempercepat pengetikan sintak program. Cukup ketik tanda seru ! lalu tekan tombol Tap, secara otomatis aplikasi akan mengenerate sintak dasar dokumen HTML.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Penjelasan Kode:

Setiap halaman HTML dimulai dengan tag <!DOCTYPE html> untuk mendeklarasikan tipe dokumen yang akan dirender oleh peramban; Firefox, Chrome atau Microsoft Edge. Tag <!DOCTYPE html> menandakan bahasa markup yang dipakai adalah HTML versi 5. Sebelumnya, pada HTML v4 tag deklarasi tipe dokumen seperti ini <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. 😭
Baris berikutnya setelah tag <!DOCTYPE html> deklarasi tipe dokumen, semua element yang dipanggil ada tag pembuka < > dan tag penutup </ >.
Tag <html> hingga tag penutup </html> di posisi paling akhir adalah ‘akar rumput’ dari dokumen HTML itu sendiri.
Dalam tag <html lang="en"> juga ada atribut lang="en", ini untuk memberitahukan Browser dan mesin pencarian bahwa isi konten website berbahasa apa? Kalau kode ISO en berarti bahasa Inggris. Kalau isi web kamu Bahasa Indonesia, ganti kode negara menjadi lang="id".
Pada baris berikutnya memuat tag <head> ... </head>. Semua informasi yang ditampung dalam wadah head berisi meta data konten website, seperti; judul dokumen, meta data SEO, meta data Open Graph untuk potongan informasi share ke Media sosial. Apapun isi dalam tag <head> ... </head> bersifat informasi untuk keperluan mesin, bukan untuk human.
Baris kode <body> ... </body> inilah yang akan menampung semua konten dokumen web yang bersifat human readable. Apapun isi yang diinput oleh user ke dalam wadah <body> ... </body>, Browser akan merender dalan bentuk visual, sehingga kita bisa membaca dan menikmati isi konten website, seperti artikel, gambar, vidoe, suara, table, link-link yang saling terkait dan lain-lainnya.

Sekarang saatnya untuk memulai koding yang sebenarnya.

Pertama sekali, ganti judul halaman yang di dalam tag <title>Tutorial Web Desain oleh ... </title>.

Berikutnya memanggil style CSS untuk memberitahukan kepada Browser, bahwa halaman web yang kita koding berdasarkan styling dari framework Basscss. Sehingga peramban web tidak salah render tampilan halaman web, maunya Basscss, eh yang dirender malah style dari Bootstrap. 😱

Caranya, insert code berikut: <link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css"> di dalam wadah <head> ... </head>.

Hasilnya kode sementara:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tutorial Web Desain oleh InsertApps</title>
	<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
</head>
<body>
    
</body>
</html>

Penjelasan kode yang ditampung dalam wadah <head>:

Baris kode <meta charset="UTF-8"> berisi meta data yang ditujukan untuk mesin browser, robot mesin pencarian untuk menterjemah karakter-karakter dalam format UTF-8, penjelasan lebih rinci, Googling saja apa itu format UTF-8?
Baris kode <meta name="viewport" content="width=device-width, initial-scale=1.0"> untuk memberi instruksi kepada mesin peramban, hasil rendering laman web bersifat responsif. Parameter width=device-width instruksi untuk set ukuran layar berdasarkan ukuran perangkat user yang akses. Parameter skala inital-scale=1.0 berarti situs web memungkinkan untuk di zoom atau sebaliknya pada layar smartphone.
Tag <title> ... </title> memuat informasi judul website, juga info yang ditampilkan pada tap head Browser.
Baris kode <link rel="" href=""> berfungsi untuk memanggil resource ‘sumber daya’ lain secara external. Tag <link> ini memiliki dua atribut: rel="" dan href="". Atribut rel="stylesheet" dengan nilai inputan stylesheet berarti yang dipanggil adalah berkas CSS yang berada di tempat lain diluar dokumen HTML itu sendiri, maka alamat file yang dituju diinput dalam atribut href="https://unpkg.com/ace-css/css/ace.min.css".

Mari lanjutkan ketik sintaknya.

Sekarang, fokus coding dalam wadah <body>... </body>. Bagian yang akan menampung isi konten web site.

Tambahkan beberapa struktur dasar tag HTML yang semantik seperti <header>,<main>,<footer> yang akan mengorganisir isi dari pada konten website berdasarkan fungsinya masing-masing.

Tag HTML yang semantik artinya tag atau wadah atau kontainer yang memiliki makna dan filosofi yang melekat pada tag atau wadah itu sendiri.

Setiap nilai yang ditampung dalam tag yang semantik representatif dari bobot nilai tersebut. Sedangkan tag <div> dan tag <span> adalah tag HTML non semantik, yang tidak memiliki makna dan filosofi yang melekat pada kedua tag tersebut.

Berikut tambahan kodenya.

<body>
    <header>
        <p>InsertApps</p>
    </header>
    
    <main>
       <h1>Hello World...</h1>
    </main>
    
    <footer>
        <p>Copyright</p>
    </footer>
</body>

Penjelasan kode yang ditampung dalam wadah <body>:

Tag <header> ... </header> wadah untuk menampung informasi brand website dan navigasi menu-menu. Tag <header> tidak boleh disematkan dalam tag <footer>, <address> atau dalam tag <header> itu sendiri.
Tag <main> ... </main> wadah paling luar untuk membungkus isi konten utama sebuah web site, seperti <article>, bilah sidebar <aside> dan <section> informasi lainnya.
Terakhir tag <footer> ... </footer> wadah untuk menampung informasi tambahan, seperti <address>, info copyright, dan informasi pendukung lainnya.

Rekap code selengkapnya:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tutorial Web Desain oleh InsertApps</title>
	<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
</head>
<body>
    <header>
        <p>InsertApps</p>
    </header>
    
    <main>
        <h1>Hello World...</h1>
    </main>
    
    <footer>
        <p>Copyright</p>
    </footer>
</body>
</html>

Hasil akhir dari sesi coding hari ini adalah:

Hasil akhir sesi tutorial ini

🔥 QUICK TIPS: Bagi yang menggunakan app Brackets, untuk merender hasil akhir coding, cukup jalankan fitur Live Preview, tekan Ctrl + Alt + P sistem Windows dan ⌥ ⌘ P di macOS. Dengan adanya fitur buil in Live Preview app Brackets, aktivitas ngoding jadi lebih asyik. Setiap ada perubahan kode, peramban web secara auto render menampilkan perubahan langsung. Bye-bye… refresh manual. 😆

Untuk mengaktifkan Live Preview app Visual Studio Code, tambahkan extension Live Server, sedangkan untuk app Sublime Text 3 tambah plugin LiveReload. 😓

⬅ Tutorial sebelumnya

➡ Tutorial Selanjutnya

Sharing

Comment