Panduan Dasar Belajar HTML untuk Pemula
Belajar HTML - HTML merupakan dasar bagi web developer dalam membuat halaman web. HTML (HyperText Markup Language) adalah bahasa pemograman markup yang digunakan untuk membuat atau menuliskan kode program sehingga terbentuk suatu halaman website. HTML kurang tepat disebut bahasa pemograman karena pada bahasa HTML disusun menggunakan tanda (mark) atau biasa disebut tag. Tanda atau tag ini berfungsi untuk menandai tipe text tertentu pada halaman web. Kita ambil contoh untuk membuat baris paragraf menggunakan tag <p>, membuat heading kita gunakan <h>, untuk membuat tabel kita gunakan <table>.
Untuk menyusun sebuah halaman web, HTML harus disimpan dalam bentuk file dengan ekstensi .html. Selain itu, untuk membangun sebuah halaman web, tidak cukup menggunakan HTML saja, harus ada bahasa lain seperti CSS dan JavaScript.
Struktur Dasar HTML
HTML merupakan struktur atau kerangka dasar dalam suatu halaman web. CSS menjadikan halaman web lebih menarik dengan mengatur tampilan atau desain web tersebut. Sedangkan JavaScript dibutuhkan untuk membuat halaman web menjadi dinamis dan interaktif. Untuk mengakses halaman web dibutuhkan web browser seperti Mozila dan Chrome.
Agar browser dapat menterjemahkan sebuah dokumen HTML, maka dibutuhkan struktur dasar dengan menambahkan informasi DTD (Document Text Declaration). Dengan menambahkan informasi DTD ini, web browser tau bahwa dokumen yang sedang diproses adalah sebuah halaman HTML. Contoh struktur dasar HTML dengan DTD <!DOCTYPE html> :
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>Struktur dasar HTML pada web browser:
Penjelasan mendalam tentang struktur di atas akan kami paparkan pada bahasan khusus di bawah ini. Jika kita buat dalam bentuk layout akan kelihatan seperti di bawah ini.
Belajar HTML - Mengenal Text Editor
Text editor merupakan aplikasi atau software yang digunakan untuk membuat atau memodifikasi suatu syntax atau kode program sehingga menjadi sebuah aplikasi baru. Contoh sederhana aplikasi text editor yang sudah kita kenal selama ini adalah Notepad yang terdapat pada sistem operasi Windows.
Ada banyak jenis text editor yang dapat digunakan oleh programmer dalam menuliskan kode program. Beberapa diantaranya yang kami rekomendasikan adalah sebagai berikut:
Notepad++
Notepad++ merupakan aplikasi text editor sederhana yang dikembangkan dari notepad bawaan Windows dengan banyak dukungan bahasa pemograman, salah satunya adalah HTML. Aplikasi Notepad++ didukung oleh beberap fitur diantaranya shortcut customization, text-shortening, macro recording, auto-completion, dan lain-lain.
Notepad++ dapat digunakan secara gratis. Tertarik ingin menggunakan text editor ini? Silakan kunjungi langsung laman Notedpat++ di sini.
Sublime Text
Sublime Text merupakan text editor yang banyak digunakan oleh web developer dan dapat diinstall pada sistem operasi Windows, Linux, maupun Mac. Di Sublime Text tersedia tema yang dapat diatur sesuai selera.
Sublime Text dapat digunakan secara gratis dengan batasan waktu tertentu. Untuk menggunakannya secara terus-menerus kita diharuskan untuk membeli lisensi sekitar $99. Tertarik menggunakan Sublime Text, silahkan kunjungi langsung laman resmi untuk mendapatkan aplikasi ini.
Visual Studio Code
Visual Studio Code menjadi aplikasi terakhir yang kami rekomendasikan untuk digunakan oleh programmer. Visual Studio Code dikembangkan oleh Microsoft dan dapat digunakan secara gratis. Sama halnya dengan Sublime Text, VS Code mensuport semua sistem operasi termasuk Linux.
Visual Studio Code mendukung banyak bahasa pemograman, salah satunya HTML. Selain itu terdapat banyak fitur yang tersedia di Visual Code diantaranya fitur debugging, Git control, syntax highlighting, code completion, snippets, dan code refactoring.
Bagi yang ingin menggunakan text editor bawaan Microsoft ini, silakan kunjungi langsung laman Visual Studio Code lalu pilih paket instalasi sesuai sistem operasi yang digunakan.
Belajar HTML - Mengenal Tag, Element, dan Atribut
Tag, atribut, dan element merupakan komponen penting yang harus kita pahami pada saat belajar html. Mari kita bahas satu-persatu
Tag
Tag merupakan penanda atau kode yang ditempatkan sebelum dan sesudah isi text/kalimat/paragraf. Fungsinya adalah mendefinisikan suatu text, kalimat, atau paragraf di halaman browser. Penulisan tag menggunakan tanda kurung siku. Untuk tag pembuka gunakan < ... > sedangkan tag penutup terdapat tambahan slash </... >.
Contoh penggunaan tag paragraf:
Tag selalunya dibuat berpasangan, tag pembuka - isi tag - tag penutup, tetapi terdapat juga baris html yang tidak menggunakan tag penutup.
Tag terdiri atas berbagai jenis dengan fungsi masing-masing. Berikut tag umum yang sering digunakan:
| Tag | Fungsi |
| <!DOCTYPE html> | mendefinisikan tipe dokumen HTML5 |
| <html> | memulai dokumen html |
| <head> | mendefinisikan bagian head |
| <body> | mendefinisikan bagian body |
| <title> | mendefinisikan judul halaman |
| <h1> s.d <h6> | membuat heading 1 s.d 6 |
| <p> | membuat paragraf |
| <!-- --> | membuat komentar |
| <link> | mendefinisikan link antar dokumen |
| <table> | membuat tabel |
| <form> | membuat kotak formulir |
| dst.. |
Untuk mengetahui lebih banyak tag pada html, silakan kunjungi link berikut ini (klik di sini).
Harap diperhatikan, jika terdapat beberapa tag yang digunakan pada sebuah text atau kalimat, tag pembuka yang pertama kali ditulis, harus ditempatkan pada akhir tag penutup. Contoh penulisan tag yang benar dan salah:
Tag yang pertama dibuat harus ditutup terakhir, maka yang benar untuk penulisan tag di atas adalah nomor 2.
Element
Jika kita menuliskan baris html sebenarnya kita telah mendefinisikan sebuah element. Jadi element adalah baris html yang terdiri dari tag pembuka - isi tag - tag penutup, seperti gambar berikut ini.
Element bisa saja hanya terdiri atas satu baris html, tetapi dapat juga gabungan dari element-element lain yang disebut dengan nested element. Contohnya:
<html>
<head>
<title>Belajar HTML untuk Pemula</title>
</head>
</html>Pada contoh di atas, terdapat 3 element yaitu <html>, <head>, dan <title>:
- element <html> berisi element <head></head>
- element <head> berisi element <title></title>
- element <title> berisi tag pembuka - isi tag - tag penutup
Atribut
Komponen penting lain dalam terdapat pada halaman html adalah atribut. Atribut adalah informasi tambahan yang dituliskan pada tag awal suatu elemen, misalnya mengatur posisi kalimat, menambahkan warna, dan lain-lain.
Penulisan atribut selalui diikuti dengan nilai atribut atau disebut dengan value yang diapit oleh tanda petik. Untuk atribut dengan value berupa text harus menggunakan tanda petik baik ganda (") maupun tunggal ('), sedangkan value berupa angka penggunaan tanda menjadi opsional. Penggunaan atribut pada suatu element juga dapat digunakan lebih dari satu. Gunakan spasi untuk memisahkan atribut satu dengan lainnya. Selain itu, atribut yang memiliki lebih dari satu kata harus dihubungkan dengan tanda strip (-) bukan spasi.
Beberapa jenis atribut yang biasa digunakan pada halaman html:
- Atribut align pada tag <p> digunakan untuk mengatur posisi paragraf
- Atribut href pada tag <a> digunakan untuk menempatkan halaman link yang dituju
- Atribut src pada tag <img> digunakan untuk path dari suatu gambar
- Atribut width dan height pada tag <img> digunakan untuk mengatur ukuran lebar dan tinggi gambar
- Atribut alt pada tag <img> digunakan untuk menambahkan informasi pada gambar (alternative text)
- Atribut style pada element digunakan untuk menambahkan gaya bisa berupa warna, font, size, dan lain-lain
- dst..
Contoh beberapa penggunaan atribut pada element html
Atribut href
Atribut href berfungsi untuk menyatakan halaman tujuan dari suatu link. Atribut href digunakan pada tag <a>. Contoh penggunaanya:
<a href="https//rinosafrizal.com">Belajar HTML</a>Agar link di atas tampil di tab baru browser, tambahkan atribut target dengan value "_blank", contohnya:
<a href="https//rinosafrizal.com" target="_blank">Belajar HTML</a>Atribut src
Atribut src digunakan untuk menampilkan suatu gambar pada halaman html menggunakan tag <img>. Contoh:
<img src="gambar.jpg">Atribut alt, width, dan height
Atribut alt (alternate) berfungsi sebagai keterangan gambar jika gambar gagal tampil di halaman browser. Sedangkan width dan height untuk mengatur lebar dan tinggi gambar. Ketiga atribut ini bisa digabungkan dengan atribut src di atas sehingga menjadi seperti ini:
<img src="gambar.jpg" alt="gambar kucing" width="150" height="200">Belajar HTML - Mengenal Head dan Body
Element Head
<Head> merupakan element html yang terletak antara tag <html> dan <body>, berfungsi sebagai tempat metadata yaitu informasi yang berkaitan dengan halaman html yang dibuat. Metadata tidak ditujukan untuk pengunjung web, melainkan untuk web browser itu sendiri sehingga tidak akan muncul pada halaman web. Dalam element <head> terdapat element lain yaitu <title>, <meta>, <style>, <link>, dan <script>.
Element Title
Element <title> adalah element yang berfungsi sebagai judul atau title dokument web yang bisa kita lihat pada title bar web browser. Contoh penulisan element <title> :
<title>Belajar HTML untuk Pemula</title>Element <title> pada web browser:
Element Meta
Seperti yang dijelaskan sebelumnya, metadata berfungsi sebagai informasi mengenai halaman web yang ditujukan untuk web browser dan robot mesin pencari seperti Google serta layanan web lainnya.
Element <meta> terdiri dari berbagai jenis, element yang wajib ada di halaman html adalah character set, yang lain sifatnya opsional.
Berikut beberapa contoh penggunaan element <meta> :
1. meta charset (character set)
Untuk text editor tertentu, meta charset biasa otomatis ditulis pada saat membuat struktur html sederhana.
<meta charset="utf-8">2. meta description
Meta description berungsi untuk menambahkan informasi atau deskripsi singkat tentang web yang dibuat. Untuk meta deskripsi akan muncul di mesin pencarian jika halaman web sudah di index oleh search engine.
<meta name="description" content="Kumpulan Materi Kimia dan Administrasi Guru">3. meta keywords
Menuliskan meta keywords sama pentingnya dengan meta description, yaitu menuliskan keyword-keyword yang mewakili konten dan deskripsi web yang telah dibuat.
<meta name="keywords" content="struktur kimia, reaksi senyawa, hidrokarbon, rpp, silabus, perangkat guru">
4. meta author
Meta author menginformasikan pemilik atau pembuat halaman web.
<meta name="author" content="Rino Safrizal">5. meta viewport
Menambahkan meta viewprot ke dalam element html bertujuan untuk membuat halaman web menjadi responsif, menyesuaikan dengan device atau perangkat yang digunakan untuk mengakses web tersebut.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Element Style
Element <style> berfungsi untuk memberikan style atau mengatur tampilan halaman web. Biasa element <style> dibuat pada satu halaman tersendiri mengunakan CSS. Contoh element <style>
<style>
body {background-color: darkgray;}
h1 {color: darkred;}
p {color: darkblue;}
</style>Element Link
Element <link> berfungsi untuk menghubungkan halaman web dengan file atau halaman lain salah satunya adalah CSS. Contoh menghubungkan file style.css (berada di folder yang sama dengan index.html):
<link rel="stylesheet" href="style.css" style=" type="text/css">Element Script
Element <script> berfungsi untuk menghubungkan halaman web dengan file Javascript. Sama halnya dengan CSS, javascript juga dapat langsung dituliskan ke dalam halaman html. Contoh penggunaan element <script>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>Jika JavaScript berupa file, element <script> yang harus ditambahkan adalah
<script src="javascript.js" type="text/javascript"></script>Element <head> di atas dapat kita susun seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
<meta name="description" content="Kumpulan Materi Kimia dan Administrasi Guru">
<meta name="keywords" content="struktur kimia, reaksi senyawa, hidrokarbon, rpp, silabus, perangkat guru">
<meta name="author" content="Rino Safrizal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: tomato;}
h1 {color: darkred;}
p {color: darkblue;}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>Mengenal Element Heading</h1>
<p>Contoh baris paragraf</p>
</body>
</html>Element <head> pada web browser:
Belajar HTML - Membuat Heading
Untuk membuat judul atau subjudul dapat menggunakan tag heading <h>. Tag <h> terdiri atas 6 tingkatan yaitu: h1, h2, h3, h4, h5, h6. Heading 1 (h1) digunakan untuk judul utama subuah konten blog atau web. h2 sampai h6 digunakan untuk subjudul sesuai tingkatan dari judul setiap artikel. Semakin besar angka heading, semakin kecil tulisan subjudul tersebut. Format penulisan heading pada html:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Contoh penggunaan tag <h> sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</html>Element <heading> pada web browser:
Belajar HTML - Membuat Komentar
Komentar dalam sebuah halaman html kadang perlu ditambahkan untuk memberikan keterangan pada suatu baris html. Baris komentar ini tidak akan tampil di halaman browser. Tag yang digunakan adalah <!-- untuk tag pembuka, dan --> untuk tag penutup. Format penulisan baris komentar:
<!-- Tuliskan komentar di sini -->Contoh penggunakan baris komentar pada halaman html seperti berikut (kita gunakan kode di atas):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<!-- Ini adalah heading -->
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</html>Belajar HTML - Membuat Paragraf
Untuk membuat suatu paragraf pada html dapat menggunakan tag <p> ... </p>. Format penulisan:
<p>Tuliskan isi paragraf di sini</p>Contoh penggunaan tag <p> seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<p>Ini adalah paragrap pertama. Untuk membuat paragraf pada html dapat menggunakan tag p. Silakan tambahkan paragraf sesuai kebutuhan.</p>
<p>Ini adalah paragrap kedua. Untuk membuat paragraf pada html dapat menggunakan tag p. Silakan tambahkan paragraf sesuai kebutuhan.</p>
<p>Ini adalah paragrap ketiga. Untuk membuat paragraf pada html dapat menggunakan tag p. Silakan tambahkan paragraf sesuai kebutuhan.</p>
</body>
</html>Element paragraph pada web browser:
Mengatur Posisi Paragraf
Untuk mengatur posisi sebuah paragraf gunakan atribut align dengan value "left" untuk rata kiri, "right" untuk rata kanan, "center" untuk rata tengah, dan "justify" untuk rata kiri-kanan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<p align="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</body>
</html>Element paragraph dengan atribut align pada web browser:
Membuat Baris Baru (Break)
Untuk membuat baris baru dalam suatu text pada halaman html dapat menggunakan tag break yaitu <br>, <br />, atau <br/>. Contoh penerapannya bisa kita aplikasikan pada bait pantun berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h1>Bait pantun tanpa tag break</h1>
<p>
Tembaga padat boleh dituang.
Bila dituang melepuh kaki.
Adat tidak boleh dibuang.
Jika dibuang binasa sudah negeri
</p>
<h1>Bait pantun dengan tag break</h1>
<p>
Tembaga padat boleh dituang.<br>
Bila dituang melepuh kaki.<br>
Adat tidak boleh dibuang.<br>
Jika dibuang binasa sudah negeri<br>
</p>
</body>
</html>Element <br> pada web browser:
Membuat Garis
Pada halaman html juga bisa ditambahkan garis horizontal menggunakan tag <hr> (horizontal rule). Contoh penggunaannya sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<p>
Kayu lebat jangan ditebang.<br>
Bila berbuah jadi berdaun.<br>
Adat suku melayu jangan dibuang.<br>
Karena pusaka secara turun – temurun.<br>
</p>
<hr>
<p>
Tembaga padat boleh dituang.<br>
Bila dituang melepuh kaki.<br>
Adat tidak boleh dibuang.<br>
Jika dibuang binasa sudah negeri<br>
</p>
</body>
</html>Element <hr> pada web browser:
Belajar HTML - Mengenal Format Text
Format text berfungsi untuk membuat sebuah text menjadi berbeda dari bentuk awal, tujuannya untuk mempertegas, memperjelas, atau membedakan suatu text dengan text atau kalimat yang lain. Format text dalam html terdiri dari beberapa jenis diantaranya huruf tebal bisa menggunakan bold atau strong, huruf miring gunakan italic, huruf garis bawah menggunakan underline. Atau untuk menuliskan rumus kimia bisa menggunakan subscript untuk kecil bawah (jumlah atom) atau superscript untuk kecil atas (jumlah muatan). Berikut format text yang bisa digunakan pada halaman html:
- tag <b> : huruf tebal (bold)
- tag <i> : huruf miring (italic)
- tag <u> : huruf garis bawah (underline)
- tag <sub> : huruf kecil di bawah (subscript)
- tag <sup> : huruf kecil di atas (superscript)
- tag <strong> : huruf tebal
- tag <ins> : huruf garis bawah
- tag <mark> : text berwarna
- tag <del> : garis tengah huruf
Contoh penggunaan format text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h1>Mengenal Format Text pada HTML</h1>
<b>Format huruf tebal</b><br>
<i>Format huruf miring</i><br>
<u>Format huruf garis bawah</u><br>
Format huruf supscript, misal H<sub>2</sub>O<br>
Format huruf superscript, misal Mg<sup>2+</sup><br>
<ins>Format huruf garis bawah</ins><br>
<mark>Format text berwarna</mark><br>
<del>Format text garis tengah</del>
</body>
</html>Format text HTML pada web browser:
Belajar HTML - Menambahkan Image
Gambar atau image merupakan komponen yang tidak dapat dipisahkan dari sebuah halaman html. Dengan menambahkan image ke dalam halaman html, web jadi kelihatan lebih menarik selain itu untuk memperkuat informasi di dalam halaman web itu sendiri.
Untuk menambahkan image ke dalam html, gunakan tag <img> dengan beberapa atribut tambahan seperti src untuk link image, alt untuk alternate text image, width dan height untuk lebar dan tinggi image seperti yang telah dijelaskan di atas.
Khusus untuk atribut src, value dapat berupa nama file image (tanpa spasi) yang disimpan dalam folder yang sama dengan file html, atau dapat juga berupa link gambar. Contoh menambahkan gambar dengan tag <img>.
Contoh pertama saya ingin membahkan gambar logo Vokasi yang disimpan pada komputer (file gambar berada satu folder dengan file index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2 align="center">Menambahkan Image di HTML</h2>
<img src="vokasi.png">
</body>
</html>Contoh kedua menambahkan gambar yang diperoleh dari internet yaitu berupa link:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2 align="center">Menambahkan Image di HTML</h2>
<img src="https://rinosafrizal.com/wp-content/uploads/2021/10/smk-bisa.png">
</body>
</html>Contoh ketiga menambahkan atribut title yang berfungsi untuk menambahkan keterangan yang muncul ketika mouse diarahkan ke gambar tersebut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2 align="center">Menambahkan Image di HTML dengan atribut title</h2>
<img src="https://rinosafrizal.com/wp-content/uploads/2021/10/smk-bisa.png" title="Logo SMK Bisa">
</body>
</html>Contoh keempat menambahkan atribut title, alt, weight, dan height pada salah satu image di atas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2 align="center">Menambahkan Image berupa link</h2>
<img src="https://rinosafrizal.com/wp-content/uploads/2021/10/smk-bisa.png" title="SMK Bisa" alt="image berupa link" width="300" height="200">
</body>
</html>Element <image> pada web browser:
Belajar HTML - Menambahkan Audio
Sama halnya seperti image, audio juga dapat ditambahkan ke dalam halaman web. Kalau image kita menggunakan tag <img> tanpa tag penutup, sedangkan untuk element audio kita gunakan tag <audio> ... </audio>. Sebelum menambahkan audio, pastikan file audio tersebut berada di folder yang sama dengan file index.html. Atribut yang bisa ditambahkan pada element audio berdasarkan fungsinya adalah sebagai berikut:
- Atribut controls. Untuk menampilkan tombol play/stop, volume, time, seperti halnya pemutar audio kita perlu menambahkan atribut control ke dalam element audio.
- Atribut controls muted. Atribut ini digunakan jika kita ingin mengset tampilkan pemutar audio pada posisi volume mute.
- Atribut autoplay. Jika ingin memutar audio pada saat halaman web tampil, tambahkan atribut autoplay ke dalam element audio
- Atribut loop. Jika musik ingin dimainkan berulang-ulang gunakan atribut loop dengan value
<!-- Atribut controls -->
<audio controls="true">
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
<!-- Atribut controls muted -->
<audio muted="true">
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
<!-- Atribut loop -->
<audio loop="true">
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
<!-- Atribut autoplay -->
<audio autoplay="true">
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>Jika atribut bernilai "true", pada element audio cukup dituliskan atributnya saja, misalnya:
<audio loop="true">
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
Atau
<audio loop>
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>Untuk penerapannya di halaman web, silakan pilih atribut audio sesuai fungsi yang diinginkan. Contoh menambahkan audio dengan atribut muted dengan menampilkan tombol kontrol:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Audio dengan Control Mute</h1>
<audio controls muted>
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
</body>
</html>Element <audio> pada web browser:
Untuk menambahkan musik sebagai background web, gunakan atribut loop dan autoplay serta hidden untuk menyembunyikan kontrol musik. Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Audio sebagai Backgroud Web</h1>
<audio hidden autoplay loop>
<source src="mars-smk.mp3" type="audio/mpeg">
Browser yang kamu gunakan tidak mendukung untuk memutar audio ini
</audio>
</body>
</html>Format audio yang umum digunakan pada html:
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Berikut jenis-jenis browser yang mendukung element audio
| Element | Chrome | Edge | FIrefox | Safari | Opera |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Untuk format audio yang support berdasarkan jenis browser yang digunakan:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Belajar HTML - Menambahkan Video
Untuk menambahkan video ke dalam halaman web, kita ganti format penulisan element audio di atas dengan mengganti tag <audio> ... </audio>. Atribut yang bisa digunakan untuk menambahkan element video adalah:
- Atribut controls, berfungsi menambahkan tombol control (play/stop, volume,
- Atribut autoplay, berfungsi menjalankan video secara otomatis saat halaman web di muat
- Atribut loop, berfungsi menjalankan video terus-menerus
- Atribut muted, berfungsi menonaktifkan volume
- Atribut width dan height, berfungsi mengatur lebar dan tinggi layar video
<!-- Atribut controls -->
<video width="320" height="240" controls="true">
<source src="mars-smk.mp4" type="video/mp4">
Browser yang kamu gunakan tidak mendukung untuk memutar video ini
</video>
<!-- Atribut autoplay-->
<video width="320" height="240" autoplay="true">
<source src="mars-smk.mp4" type="video/mp4">
Browser yang kamu gunakan tidak mendukung untuk memutar video ini
</video>
<!-- Atribut loop -->
<video width="320" height="240" loop="true">
<source src="mars-smk.mp4" type="video/mp4">
Browser yang kamu gunakan tidak mendukung untuk memutar video ini
</video>
<!-- Atribut Mute -->
<video width="320" height="240" muted="true">
<source src="mars-smk.mp4" type="video/mp4">
Browser yang kamu gunakan tidak mendukung untuk memutar video ini
</video>Penulisan nilai atribut boleh ditiadakan jika atribut tersebut bernilai "true", sama seperti element audio di atas. Contoh menambahkan video ke dalam halaman html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Menambahkan Video</h1>
<video width="320" height="240" controls autoplay>
<source src="mars-smk.mp4" type="video/mp4">
Browser yang kamu gunakan tidak mendukung untuk memutar video ini
</video>
</body>
</html>Element <video> pada web browser:
Format video yang biasa digunakan pada halaman web:
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Jenis browser yang mendukung element video:
| Element | Chrome | Edge | FIrefox | Safari | Opera |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Format video yang support berdasarkan jenis browser:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Tambahan
Untuk browser yang tidak bisa menjalankan audio maupun video yang diset otomatis (autoplay), silakan diatur permission, ubah dari block menjadi allow audio and video. Contoh pada browser Firefox berikut ini:
Belajar HTML - Membuat Daftar (List)
Daftar atau list dalam sebuah halaman html berfungsi untuk menampilkan suatu daftar atau dapat juga menjelaskan suatu kronologis maupun cara kerja. Umumnya, list pada html terdiri atas dua jenis yaitu:
Ordered List (ol)
Ordered list merupakan list yang dibuat secara berurutan. Tipe list seperti ini cocok untuk menjelaskan suatu tahapan, prosedur, maupun cara kerja, menjelaskan suatu kronologis kejadian, atau dapat juga daftar instruksi yang dibuat secara berurutan.
Secara default ordered list berupa angka desimal dengan tag yang digunakan adalah <ol> dan </ol> dan tag <li> dan </li>.
Unordered List (ul)
Unordered list merupakan list yang tidak diurutkan. Tipe list seperti ini sesuai untuk daftar yang tidak menjelaskan kronologis, prosedur, seperti halnya ordered list di atas. Contohnya dapat berupa list alat dan bahan, jenis-jenis, dan lain.lain.
Secara default unordered list berupa lingkaran kecil (disk). Tag yang digunakan adalah <ul> ... </ul>.
Contoh penggunaan ordered list dan unordered list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Contoh ordered list</h2>
<ol>
<li>List pertama</li>
<li>List kedua</li>
<li>List ketiga</li>
</ol>
<h2>Contoh unordered list</h2>
<ul>
<li>List pertama</li>
<li>List kedua</li>
<li>List ketiga</li>
</ul>
</body>
</html>Hasil ordered list dan unordered list pada web browser:
Selain list default di atas, kita juga dapat membuat beberapa bentuk list lain dengan menambahkan atribut type sebagai berikut:
- Ordered list:
- type="A" untuk list huruf kapital, contoh: A, B, C, D, dan seterusnya
- type="a" untuk list huruf kecil, contoh: a, b, c, d, dan seterusnya
- type="I" untuk list huruf romawi besar, contoh: I, II, III, IV, dan seterusnya
- type="i" untuk list huruf romawi kecil, contoh: i, ii, iii, iv, dan seterusnya
- Unordered list:
- type="none" untuk list yang tidak memiliki simbol
- type="square" untuk list berupa simbol persegi
- type="circle" untuk list berupa simbol lingkaran
Contoh penggunaan ordered list dengan atribut type tertentu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Ordered list type A:</h2>
<ol type="A">
<li>List pertama</li>
<li>List kedua</li>
</ol>
<h2>Ordered list type a:</h2>
<ol type="a">
<li>List pertama</li>
<li>List kedua</li>
</ol>
<h2>Oredered list type I:</h2>
<ol type="I">
<li>List pertama</li>
<li>List kedua</li>
</ol>
<h2>Ordered list type i:</h2>
<ol type="i">
<li>List pertama</li>
<li>List kedua</li>
</ol>
</body>
</html>Hasil ordered list dengan karakter tertentu pada web browser:
Contoh unordered list dengan type tertentu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Unordered list type none:</h2>
<ul type="none">
<li>List pertama</li>
<li>List kedua</li>
</ul>
<h2>Unordered list type square:</h2>
<ul type="square">
<li>List pertama</li>
<li>List kedua</li>
</ul>
<h2>Unordered list type circle:</h2>
<ul type="circle">
<li>List pertama</li>
<li>List kedua</li>
</ul>
</body>
</html>Hasil unordered list dengan type tertentu di web browser:
Untuk ordered list, kita bisa membuat daftar atau list dimulai pada angka atau abjad tertentu dengan menambahkan atribut start. Contoh penggunaannya berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>List dimulai pada nomor tertentu</h2>
<ol start="3">
<li>List ke-3</li>
<li>List ke-4</li>
<li>List ke-5</li>
</ol>
<ol type="a" start="5">
<li>List ke-e</li>
<li>List ke-f</li>
<li>List ke-g</li>
</ol>
</body>
</html>Hasil list pada nomor tertentu di web browser:
Selain cara di atas, list juga dapat dibuat menggunakan logo atau image dengan menambahkan atribut style CSS, seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>List dengan logo tertentu</h2>
<ol style="list-style-image: url(https://rinosafrizal.com/wp-content/uploads/2019/04/favicon.ico);">
<li>List pertama</li>
<li>List kedua</li>
<li>List ketiga</li>
<li>List keempat</li>
</ol>
</body>
</html>Hasil list dengan image tertentu pada web browser:
Nested List
Nested list merupakan list yang terdapat list lain di dalamnya. Contoh penggunaan nested list seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Contoh nested list:</h2>
<ol>
<li>Daftar unsur golongan alkali:</li>
<ul>
<li>kalium</li>
<li>natrium</li>
</ul>
<li>Daftar unsur golongan alkali tanah:</li>
<ul>
<li>kalsium</li>
<li>magnesium</li>
</ul>
<li>Daftar unsur golongan gas mulia</li>
<ul>
<li>helium</li>
<li>neon</li>
</ul>
</ol>
</body>
</html>Hasil nested list pada web browser:
Description List
Description list merupakan list yang terdiri dari suatu kata, frasa, atau istilah yang nantinya akan dideskripsikan atau dijelaskan lebih lanjut. Tag yang digunakan untuk membuat description list adalah:
- <dl> (description list), tag yang digunakan untuk memulai description list
- <dt> (description term), tag yang digunakan untuk kata, frasa, atau istilah yang akan dideskripsikan
- <dd> (description description), tag yang digunakan untuk mendiskripsikan dt
Contoh penggunaan description list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Contoh Penggunaan Description List</h2>
<dl>
<dt>Alkana</dt>
<dd>Senyawa hidrokarbon dengan ikatan tunggal</dd>
<dt>Alkena</dt>
<dd>Senyawa hidrokarbon dengan ikatan rangkap</dd>
<dt>Alkuna</dt>
<dd>Senywa hidrokarbon dengan ikatan rangkap 3</dd>
</dl>
</body>
</html>Hasil description list pada web browser:
Belajar HTML - Membuat Tabel
Tabel merupakan struktur yang digunakan untuk menampilan suatu data dalam bentuk kolom dan baris. Suatu tabel terdiri dari tiga bagian yaitu table head (th) untuk header tabel, table row (tr) untuk baris tabel, dan tabel data (td) untuk sel atau kolom dalam sebuah tabel.
Untuk membuat tabel di html, gunakan tag <tabel> ... </table>, jumlah baris gunakan tag <tr> ... </tr>, sedangkan tag <td> ... </td> untuk sel tabel.
Contoh membuat tabel dengan jumlah baris 2 dan kolom 3 (untuk tag <th> dapat diabaikan terlebih dahulu).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel tanpa border dan header</h2>
<table>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>Hasil tabel pada web browser:
Untuk menambahkan header tabel gunakan tag <th> ... </th>. Misalnya suatu tabel terdiri atas 4 kolom yaitu Nomor, Nama, Kelas, dan Kompetensi Keahlian, seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel dengan header</h2>
<table>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Kelas</th>
<th>Kompetensi Keahlian</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>XI</td>
<td>TKJ</td>
</tr>
<tr>
<td>2</td>
<td>Irma</td>
<td>XII</td>
<td>ATPH</td>
</tr>
<tr>
<td>3</td>
<td>Bayu</td>
<td>XII</td>
<td>TBSM</td>
</tr>
</table>
</body>
</html>Hasil tabel dengan header di web browser:
Atribut pada Tabel
Tabel pada html juga dapat dilakukan optimasi maupun modifikasi sedemikian rupa sesuai kebutuhan, seperti halnya di Microsoft Office Excel. Beberapa atribut yang dapat kita gunakan pada tabel adalah sebagai berikut:
Border
Tag tabel di atas tidak menggunakan garis atau border. Untuk menambahkan border gunakan atribut border dengan value sesuai keinginan. Value di sini menyatakan ukuran dari border tersebut. Contoh kita akan membuat tabel di atas dengan border = 1, silakan tambahkan atribut border="1" pada tag <table> seperti berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel dengan border</h2>
<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>Hasil tabel dengan border di web browser:
Cellpadding
Atribut cellpadding berfungsi untuk mengatur jarak suatu text dengan garis (border) dari suatu sel. Contoh penggunaan atribut cellpadding:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel dengan cellpadding</h2>
<table border="1" cellpadding="10">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>Hasil penambahan atribut cellpadding pada web browser:
bgcolor
Atribut bgcolor berfungsi untuk memberikan warna pada sel tabel. Atribut ini dapat diterapkan untuk satu baris atau hanya satu buah sel saja. Contoh penerapan atribut bgcolor adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel dengan background color</h2>
<table border="1" cellpadding="10">
<tr bgcolor="blue">
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td bgcolor="green">baris 2 kolom 1</td>
<td bgcolor="pink">baris 2 kolom 2</td>
<td bgcolor="yellow">baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>Hasil menambahkan warna tabel di web browser:
rowspan dan colspan
Atribut rowspan berfungsi untuk menggabungkan beberap baris sel, sedangkan colspan digunakan untuk menggabungkan kolom sel. Kalau di office biasa kita menggunakan merge. Nilai atribut menyatakan berapa banyak sel yang digabungkan. Contoh penggunaan atribut ini adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Tabel dengan merge cell</h2>
<table border="1" cellpadding="5">
<tr>
<th rowspan="2">Nama Siswa</th>
<th colspan="2">Hasil Ulangan</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
</tr>
<tr>
<td>Andi</td>
<td>87</td>
<td>91</td>
</tr>
<tr>
<td>Ina</td>
<td>82</td>
<td>95</td>
</tr>
<tr>
<td>Wati</td>
<td>92</td>
<td>88</td>
</tr>
</table>
</body>
</html>Hasil merge cell tabel pada web browser:
Belajar HTML - Membuat Link
Link atau hyperlink merupakan salah satu element html yang berfungsi untuk menghubungkan suatu halaman web ke halaman web lain. Selain itu, link juga dapat difungsikan untuk mengarah ke entitas lain sepeti gambar, dokumen/file, lagu, video, dan lain-lain.
Untuk membuat elemen link di html, tag yang digunakan adalah <a> (anchor) dengan tambahan atribut href (hyperlink reference) dengan value berupa link absolut dan link relatif. Apa perbedaannya?
Link absolut adalah alamat atau link yang mencantumkan url secara lengkap mulai dari protokol, link domain, dan link file atau halaman tujuan. Sedangkan link relatif adalah alamat atau link yang mengarah ke halaman lain pada direktori yang berada di komputer yang sama. Contoh:
Nomor 1 merupakan link absolut berupa alamat url lengkap. Sedangkan nomor 2 berupa link relatif, di mana link diarahkan ke halaman about.html yang terdapat pada direktori profil.
Selain menambahkan atribut href beserta valuenya, membuat link juga membutuhkan anchor text, fungsinya adalah untuk melakukan eksekusi terhadap link tersebut. Kita bahas dulu macam-macam anchor text berikut ini:
Anchor Text
Anchor text merupakan kata, frasa, atau kalimat yang berisi tautan atau link yang dapat diklik. Umumnya anchor text berwarna biru. Selain mengarahkan ke halaman tertentu, anchor text juga berfungsi untuk mendeskripsikan halaman tersebut. Berikut ini macam-macam anchor text yang bisa diterapkan pada element link:
- Generic, jenis anchor text berupa petunjuk atau perintah, misalnya "klik di sini", "daftar di sini", dan lain-lain
- Brended, jenis anchor text berupa nama atau jenis merk/produk, misalnya W3schools
- Exact-Match, jenis anchor text berupa kata kunci yang sama persis dengan halaman web tujuan
- Partial-Match, jenis anchor text yang menggunakan kata kunci alternatif dari halaman web yang dituju
- Naked LInk, jenis anchor text yang menampilkan link atau tautan secara langsung
- Image, jenis anchor text yang diambil dari alt text gambar tersebut
Dari penjelasan di atas, dapat kita susun struktur element link sebagai berikut:
Contoh pembuatan link pada html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML Untuk Pemula</title>
</head>
<body>
<h2>Jenis-jenis anchor text:</h2>
<!-- Atribut berupa link absout -->
<a href="https://rinosafrizal.com/about/">About</a> <br>
<!-- Atribut berupa link relatif -->
<a href="about.html">About</a> <br>
<!-- Link dengan anchor text brand -->
<a href="https://www.w3schools.com/">W3Shools</a> <br>
<!-- Link dengan anchor text generic -->
<a href="https://rinosafrizal.com/pengelolaan-lab-tkj/">klik di sini</a> <br>
<!-- Link dengan anchor text exact-match -->
<a href="https://rinosafrizal.com/pengelolaan-lab-tkj/">Pengelolaan Lab TKJ</a> <br>
<!-- Link dengan ancor text partial-match -->
<a href="https://rinosafrizal.com/pengelolaan-lab-tkj/">SOP Lab TKJ</a> <br>
<!-- Link dengan anchor text naked link -->
<a href="https://rinosafrizal.com/pengelolaan-lab-tkj/">https://rinosafrizal.com/pengelolaan-lab-tkj/</a> <br>
<!-- Link dengan anchor text image -->
<a href="https://rinosafrizal.com/wp-content/uploads/2021/10/smk-bisa.png" alt="smk bisa></a>
</body>
</html>Hasil menambahkan anchor text di web browser:
Internal dan Eksternal Link
Link dapat diarahkan ke halaman internal maupun halaman eksternal. JIka link diarahkan ke halaman internal, maka link masih berada pada domain atau komputer yang sama, sedangkan eksternal link, maka link tersebut diarahkan ke halaman atau domain lain.
Untuk internal link akan kita bahas lebih dalam di berikut ini.
Siapkan 3 dokumen html tambahan, beri nama masing-masing dengan nama about.html dan contact. html (untuk file index.html bisa gunakan file sebelumnya). Simpan di folder yang sama.
Selanjutnya, tuliskan kode berikut ke masing-masing file. Untuk menghubungkan ketiga halaman di atas, element link harus ditambahan atribut href dengan value sesuai dengan nama file di atas.
Kode fIle index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Selamat Datang di Web rinosafrizal.com</h1>
<p>
<a href="index.html">Home</a> |
<a href="about.html">Tentang</a> |
<a href="contact.html">Hubungi Kami</a>
</p>
<hr>
<p>Ini contoh halaman home (index). Halaman home merupakan halaman utama dari sebuah website.</p>
<hr>
<p>Copyright © Abugaza_</p>
</body>
</html>Halaman home pada web browser:
Kode file about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Tentang</h1>
<p>
<a href="index.html">Home</a> |
<a href="about.html">Tentang</a> |
<a href="contact.html">Hubungi Kami</a>
</p>
<hr>
<p>Ini contoh halaman About. Halaman ini mendeskripsikan tentang isi atau tema web. Link halaman about biasanya ditempatkan di bagian footer.</p>
<hr>
<p>Copyright © Abugaza_</p>
</body>
</html>Halaman tentang pada web browser:
Kode file contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML untuk Pemula</title>
</head>
<body>
<h1>Hubungi Kami</h1>
<p>
<a href="index.html">Home</a> |
<a href="about.html">Tentang</a> |
<a href="contact.html">Hubungi Kami</a>
</p>
<hr>
<p>Ini contoh halaman Contact. Halaman ini memuat informasi alamat, email, maupun nomor handphone yang bisa dihubungi pengunjung web. Sama seperti halaman about, halaman contact juga ditempatkan di bagian footer.</p>
<hr>
<p>Copyright © Abugaza_</p>
</body>
</html>Halaman contact pada web browser:
Jika di klik tautan internal tersebut akan terlihat seperti berikut ini:
Untuk penggunaan eksternal link cukup dengan menambahkan link luar ke dalam atribut href. Contoh eksternal link yang mengarah ke halaman W3Schools:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>Atribut Element Link
Selain menggunakan href sebagai atribut link tujuan, element dari sebuah link dapat juga ditambahkan atribut lain seperti target, title, style, dan lain-lain.
Atribut target
Atribut target berfungsi untuk menentukan tempat membuka suatu halaman link. Jenis-jenis value untuk atribut target adalah:
- _self, membuka link pada halaman sendiri (default target)
- _blank, membuka link pada halaman atau tab baru
- _parent, membuka link pada frame induk
- _top, menuju ke posisi atas suatu halaman
Contoh membuka halaman pada tab baru dengan value _blank:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools.com!</a>Setelah di klik anchor text di atas, link W3Schools akan tampil pada halaman atau tab baru.
Membuat Form
Form atau formulir merupakan sarana yang dapat digunakan untuk mengumpulkan informasi dari suatu user misalnya identitas atau profil. Form juga dapat difungsikan untuk registrasi atau login seperti contoh berikut:
Untuk membuat form pada halaman web seperti contoh di atas dapat menggunakan element HTML berupa <form>:
<form>
<!-- Form field di sini -->
</form>Element form terdiri atas element-element lain yang memilliki fungsi masing-masing yaitu:
Element Input
Element input merupakan element yang banyak digunakan pada form html dan berfungsi untuk memasukkan teks, data, atau informasi lain. Tag yang digunakan dalam element input adalah <input> tanpat tag penutup atau biasa disebut dengan istilah self closing tag.
Di dalam element input diperlukan tambahan atribut type dengan value sesuai jenis inputan form yang kita inginkan, beberapa diantaranya:
- Element input dengan type="text", berfungsi untuk menerima input berapa text seperti nama, username, alamat, tempat lahir, dan lain-lain
- Element input dengan type="password", berfungsi untuk menerima input berupa password yang disamarkan dengan tanda titik
- Element input dengan type="radio", input berumessegepa radio button di mana user hanya bisa memilih salah satu dari pilihan yang telah disediakan
- Element input dengan type="checkbox", input berupa checkbox atau centang di mana user dapat memilih lebih dari satu pilihan yang telah disediakan
- Element input dengan type="number", berungsi untuk menerima input berupa nomor atau angka
- Element input dengan type="date", berfungsi untuk menerima input berapa tanggal
- Element input dengan type="email", berfungsi untuk menerima input berupa email
Selain penggunaan atribut type, element input juga perlu ditambahkan atribut lain seperti id, name, dan value.
Element Textarea
Element satu ini memiliki fungsi sama dengan element input dengan type="text" yaitu menerima input berupa text. Bedanya pada textarea dapat menerima lebih banyak karakter teks misalnya untuk form isian lengkap atau komentar. Untuk membuat element textarea gunakan tag <textarea> ... </textarea>. Untuk mengcostum ukuran textarea tambahkan atribut row dengan value jumlah baris yang diinginkan, dan atribut cols untuk lebar textarea yang digunakan, contoh jumlah baris 5 dengan lebar textarea 40:
<textarea name="message" rows="5" cols="40"></textarea>Element Select
Jika suatu formulir dibutuhkan informasi seperti nama kabupaten atau provinsi yang dibuat dalam bentuk menu dropdown dapat menggunakan element ini dengan tag <select> ... </select>. Di dalam element tersebut harus kita tambahkan element lain menggunakan tag <option> ... </option> :
<select>
<option> Tuliskan opsi di sini </option>
</select>Element Button
Biasa pada halaman form login atau registrasi selalui dilengkapi dengan tombol kirim, submit, login, atau sejenisnya. Kesemua tombol tersebut merupakan fungsi dari element bottom. Sebenarnya fungsi ini juga dapat menggunakan element input dengan type="submit". Untuk membuat element ini gunakan tag <button> ... </button>.
Element Label
Element label difungsikan untuk menambahkan informasi maupun keterangan terkait dengan jenis inputan yang digunakan pada form HTML dan selalu disandingkan dengan element input yang dipakai. Gunakan tag <label> ... </label> untuk membuat element ini. Element label juga dapat ditambahkan dengan atribut lain seperti for="value" untuk menghubungkan label dengan element lain pada form.
Contoh membuat element form:
<h1>Formulir Pendaftaran Diklat</h1>
<p>Lengkapi identitas pada formulir di bawah ini:</p>
<form>
<label for="nama">1. Nama Lengkap :</label>
<input type="text" id="nama" name="nama">
<br>
<label for="tempat">2. Tempat Lahir :</label>
<input type="text" id="tempat" name="tempat">
<br>
<label for="tanggal">3. Tanggal Lahir :</label>
<input type="date" id="tanggal" name="tanggal">
<br>
<label for="kabupaten">4. Asal Kabupaten/Kota :</label>
<select id="kabupaten" name="kabupaten">
<option>Sambas</option>
<option>Singkawang</option>
<option>Pontianak</option>
<option>Sintang</option>
</select>
<br>
5. Jenis Kelamin :
<input type="radio" id="male" name="gender" value="male">
<label for="male">Laki-laki</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label>
<br>
<label for="hp">6. Nomor HP/WA :</label>
<input type="number" id="hp" name="nomor hp">
<br>
<label for="email">7. Email :</label>
<input type="email" id="email" name="Email">
<br>
8. Bahasa pemograman yang dikuasai :
<input type="checkbox" id="html" name="bahasa" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="bahasa" value="CSS">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="bahasa" value="Javascript">
<label for="js">Javascript</label>
<br>
9. Tuliskan Alasan Anda mengikuti diklat ini : <br>
<textarea name="alasan" rows="5" cols="40"></textarea>
<br>
<button type="submit">Kirim</button>
</form>Hasil pembuatan form pada halaman HTML di web browser:
Mengenal Element Block dan Inline
Ditinjau dari cara browser menampilkan halaman web, element HTML dapat kita bagi ke dalam dua jenis yaitu element block dan element inline. Mari kita bahasa kedua jenis element ini.
Element Block
Element block pada HTML akan memenuhi lebar dari halaman web browser (penuh ke kanan). Jika terdapat element block lain akan didefisinikan pada block atau baris berikutnya bukan disamping block sebelumnya.
Tag yang termasuk ke dalam element block adalah:
Element Inline
Element inline pada HTML sebatas lebar dari teks atau konten tersebut. JIka terdapat element inline lain akan didefinisikan disamping element sebelumnya bukan membuat baris baru.
Tag yang termasuk ke dalam element inline adalah:
Contoh perbandingan element block dan inline pada halaman HTML:
<h1>Belajar HTML untuk Pemula</h1>
<p>Belajar mengenal element <b>Block</b> dan <i>Inline</p>
Hasil pada halaman web browser:
Untuk memberjelas sejauh mana batas element block dan inline, kita tambahkan kode CSS pada HTML di atas seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
<style type="text/css">
h1, p {
border: 1px;
border-style: solid;
border-color: red;
}
strong, span {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Belajar HTML untuk Pemula</h1>
<p>Belajar mengenal element <strong>Block</strong> dan <span>Inline</span></p>
</body>
</html>Hasil pada halaman web browser:
Dari contoh di atas kita dapat ketahui bahwa element block akan mengisi lebar dari suatu halaman web (warna merah), sedangkan element inline hanya sebatas text atau konten tersebut (warna kuning). Tag <p> akan membuat baris atau block baru di bawah tag <h1> bukan berada disamping <h1>, sedangkan tag <span> akan berada disamping tag <strong> bukan membuat baris baru di bawah tag <p>.
Element Div dan Span
Berkaitan dengan element block dan inline, terdapat element lain yang tak kalah penting yaitu element <div> dan <span>. Kedua element ini sangat berguna pada saat menghubungkan halaman HTML dengan kode CSS.
Div merupakan salah satu element block sedangkan span bagian dari element inline. Kedua jenis element ini tidak memiliki efek visual apapun di halaman browser tetapi sangat bermanfaat ketika penggunaanya dihubungkan dengan kode CSS.
Kedua element ini dapat kita jadikan penanda terhadap element-element HTML yang akan ditambahkan style dengan CSS. Selain itu dapat juga dijadikan pembungkus (container) atau penampung beberapa element sekaligus yang ada pada halaman HTML.
Contoh penggunaan tag <div> pada HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
</head>
<body>
<!-- Header -->
<div>
<h1>Belajar HTML</h1>
<img src="logo.jpg">
</div>
<!-- Menu -->
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Konten -->
<div>
<p> Konten website di sini.. </p>
</div>
<!-- Sidebar -->
<div>
<h1>Postingan Terbaru</h1>
<ul>
<li><a href="#">Postingan 1</a></li>
<li><a href="#">Postingan 2</a></li>
<li><a href="#">Postingan 3</a></li>
</ul>
</div>
<!-- Footer -->
<div>
<p>Copyright © Abugaza_</p>
</div>
</body>
</html>Perhatikan kode HTML di atas, tag <div> membungkus atau mengelompokkan element-element HTML berdasarkan fungsinya masing-masing, yaitu element sebagai header, menu, konten, sidebar, dan footer. Kesemunya fungsi tadi dikelompokkan menggunakan tag <div>.
Jika dibuka menggunakan web browser, tag <div> pada kode diatas tidak memberikan efek apapun. Hasilnya seperti gambar di bawah ini:
Sama halnya dengan tag <div>, tag <span> juga tidak memberikan efek visual apapun, perhatikan contoh kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
</head>
<body>
<h2>Paragraf tanpa tag span</h2>
<p>Tag span tidak memberikan efek visual apapun jika dicek menggunakan web browser, tetapi sangat BERMANFAAT jika penggunaannya dihubungkan dengan kode CSS</p>
<h2>Paragraf dengan tag span</h2>
<p>Tag span tidak memberikan efek visual apapun jika dicek menggunakan web browser, tetapi sangat <span>BERMANFAAT</span> jika penggunaannya dihubungkan dengan kode CSS</p>
</body>
</html>Pada contoh di atas, kata BERMANFAAT pada paragraf dua menggunakan tag <span>. Jika dilihat hasilnya di web browser tidak memberikan efek apapun, sama seperti di paragraf pertama tanpa menggunakan tag <span> untuk kata yang sama.
Atribut Class dan Id pada HTML
Sengaja kita masukkan bahasan atribut class dan id ke dalam subjudul yang sama dengan div dan span, karena kedua materi ini memiliki hubungan yang erat. Ada banyak jenis atribut yang bisa kita tambahkan ke dalam element HTML, diantaranya adalah Class dan Id. Apa perbedaan kedua atribut ini?
Atribut class berfungsi sebagai nama class pada style sheet dan dapat digunakan untuk memanipulasi element pada Javascript. Penggunaan atribut class bisa diterapkan pada beberapa element HTML sekaligus. Atribut class dapat dipanggil menggunakan tanda "." pada kode CSS.
Atribut id berfungsi sebagai id atau nama unik untuk element HTML dan tidak boleh digunakan lebih dari satu element untuk id yang sama. Atribut id dapat dipanggil menggunakan tanda hash (#) pada kode CSS.
Contoh penggunaan atribut class dan id pada HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
<style type="text/css">
#header {
background-color: skyblue;
color: black;
padding: 20px;
text-align: center;
}
.menu {
background-color: yellow;
color: black;
padding: 8px;
}
.konten {
background-color: yellowgreen;
color: black;
padding: 10px;
}
.footer {
background-color: orangered;
padding: 5px;
}
.senyawa {
color: darkred;
}
</style>
</head>
<body>
<div id="header">
<h1>Senyawa Hidrokarbon</h1>
</div>
<div class="menu">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</ul>
</div>
<div class="konten">
<h2>Senyawa Alkana</h2>
<p>Contoh: <span class="senyawa">Metana, Etana, Propana, Butana</span></p>
<h2>Senyawa Alkena</h2>
<p>Contoh: <span class="senyawa">Etena, Propena, Butana, Pentana</span></p>
<h2>Senyawa Alkuna</h2>
<p>Contoh: <span class="senyawa">Etuna, Propuna, Butuna, Pentuna</span></p>
</div>
<div class="footer">
<p>Copyright © Abugaza_</p>
</div>
</body>
</html>Hasil pada web browser:
Mengenal CSS (Cascading Style Sheet)
Jika HTML berfungsi sebagai kerangka halaman web, maka CSS adalah stylenya yaitu mempercantik tampilan atau desain halaman tersebut. CSS (Cascading Style Sheet) merupakan bahasa markup yang berfungsi mengatur desain atau tampilan setiap element yang ada pada HTML, seperti menambahkan warna teks, mengubah ukuran dan jenis font, menambahkan background, dan masih banyak fungsi lain yang dapat dilakukan oleh CSS.
Struktur Dasar CSS
Pada HTML kita mengenal istilah tag, atribut, dan value seperti yang sudah dijelaskan di awal. Sama halnya dengan HTML, CSS juga memiliki struktur dasar yang kita kenal dengan istilah selector, property, dan value. Penulisan kode CSS dapat dilihat pada gambar berikut:
Dari struktur di atas, dapat kita jabarkan sebagai berikut:
- Selector berfungsi untuk menandai tag maupun atribut class dan id pada halaman HTML yang akan diberikan style dengan CSS.
- Contoh selector berupa tag: <h1> s.d <h6>, <p>, <body>, <table>, <div>, <span>, dan lain-lain
- Contoh selector berupa atribut class dan id: class="menu", class="content", id="header", dan lain-lain
- Property berfungsi untuk menentukan jenis style yang akan diterapkan pada selector. Contoh beberapa property CSS:
- Property color: memberikan warna font
- Property background-color: memberikan warna background
- Property font-size: mengatur ukuran font
- Property padding: mengatur jarak konten dengan border
- dan lain-lain
- Sedangkan value berfungsi sebagai nilai dari property yang telah dipilih. Contoh penggunaan value pada CSS:
- Value black atau #000: menghasilkan warna hitam
- Value 100px: menghasilkan property dengan ukuran 100px
- Value center, left, right, auto: mengatur posisi property
- dan lain-lain
Untuk struktur CSS di atas, dapat kita simpulkan sebagai berikut:
Cari seluruh tag <h1> dan berikan style pada font dengan warna biru
Declaration dalam CSS untuk satu buah selector bisa saja lebih dari satu. Kita ambil contoh menambahkan jenis, warna, dan ukuran font pada tag h1:
h1 {
font-family: sans-serif;
color: blue;
font-size: 40px;
}Menghubungkan HTML dengan CSS
Kode CSS dapat kita terapkan pada halaman HTML dengan melalui tiga cara yaitu:
Inline CSS
Dilakukan dengan cara menambahkan atribut style ke dalam element HTML. Contoh kita menambahkan warna pada teks heading dan paragraf:
<h1 style="color: red;">Panduan Belajar HTML untuk Pemula</h1>
<p style="color: blue;">Menghubungkan HTML dengan CSS dengan cara Inline</p>Hasil pada web browser:
Cara seperti ini tidak direkomendasikan karena akan membuat element html kelihatan panjang dan penuh.
Internal CSS
DIlakukan dengan cara menambahkan kode CSS ke dalam element <head> pada halaman HTML. Kode CSS tersebut harus diapit oleh tag <style> dan </style>. Contoh menambahkan warna background halaman, warna teks heading dan paragraf:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML untuk Pemula</title>
<style type="text/css">
body {
background-color: lightblue;
}
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Menghubungkan HTML dengan CSS</h1>
<p>Menghubungkan HTML dengan CSS dengan metode Internal</p>
</body>
</html>Hasil pada web browser:
Eksternal CSS
Menerapkan kode CSS dengan cara menghubungkan file CSS melalui element <link> menggunakan atribut href. Untuk cara yang satu ini kita persiapkan dua buah file yaitu index.html dan style.css sebagai file CSS yang nantinya akan kita hubungkan dengan halaman HTML melalui element <link>. Penulisan element <link> sudah kita paparkan di atas pada subjudul Mengenal Head dan Body. Contoh penerapan eksternal CSS pada halaman HTML:
File index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML untuk Pemula</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menghubungkan HTML dengan CSS</h1>
<p>Menghubungkan HTML dengan CSS dengan metode Eksternal</p>
</body>
</html>File style.css
body {
background-color: lightblue;
}
h1 {
color: red;
}
p {
color: blue;
}Hasil pada web browser:
Property Dasar CSS
Sebelumnya kita telah membahas struktur atau anatomi CSS yang terdiri dari selector, property, dan value. Selain ketiga komponen tersebut, ada lagi komponen yang disebut dengan istilah declaration yang berfungsi memberikan perintah terhadap selector yang dipilih. Declaration terdiri dari property beserta valunya.
Kali ini kita akan coba jabarkan beberapa property dasar yang sering digunakan untuk memberikan style pada halaman website.
Text Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | color | mengatur warna teks | p { color: blue; } |
| 2 | line-height | mengatur jarak antar baris | p { line-height: 20px; } |
| 3 | text-align | mengatur posisi teks | p { text-align: center; } |
| 4 | letter-spacing | mengatur jarak antar karakter/huruf | p { letter-spacing: 2px; } |
| 5 | word-spacing | mengatur jarak antar kata | p {word-spacing: 5px; } |
| 6 | text-decoration | mengatur dekorasi teks | p { text-decoration: overline; } |
| 7 | dll |
Font Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | font-size | mengatur ukuran font | p { font-size: 14px; } |
| 2 | font-weight | mengatur ketebalan font | p { font-weight: bold; } |
| 3 | font-family | mengatur jenis font | p { font-family: sans-serif; } |
| 4 | font-style | mengatur style font | p { font-style: italic; } |
| 5 | font-variant | mengatur tampilan teks (lowercase & uppercase letters) | p {font-variant: small-caps; } |
| 6 | font | mengatur beberapa property font sekaligus dalam satu declaration | p { font: bold 14px sans-serif; } |
Background Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | background-color | mengatur warna latar belakang (background) | .header { background-color: skyblue; } |
| 2 | background-image | menambahkan gambar (image) pada latar belakang | .header { background-image: url("image.png"); } |
| 3 | background-origin | mengatur posisi gambar | .header {background-origin: content-box; } |
| 4 | background-size | mengatur ukuran gambar | .header {background-size: auto; } |
| 5 | background | mengatur beberapa property background sekaligus dalam satu declaration | .header {background: skyblue url("image.png") auto; } |
| 6 | dll |
Padding Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | padding-top | mengatur ruang atau jarak antara konten dengan border atas | h2 { padding-top: 20px; } |
| 2 | padding-right | mengatur ruang atau jarak antara konten dengan border kanan | h2 { padding-right: 30px; } |
| 3 | padding-bottom | mengatur ruang atau jarak antara konten dengan border bawah | h2 { padding-bottom: 40px; } |
| 4 | padding-left | mengatur ruang atau jarak antara konten dengan border kiri | h2 { padding-left: 50px; } |
| 5 | padding | mengatur beberapa property padding sekaligus dalam satu declaration | h2 { padding: 20px 30px 40px 50px; } |
Margin Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | margin-top | mengatur ruang atau jarak antara border atas ke bagian luar element | h2 { margin-top: 20px; } |
| 2 | padding-right | mengatur ruang atau jarak antara border kanan ke bagian luar element | h2 { margin-right: 30px; } |
| 3 | padding-bottom | mengatur ruang atau jarak antara border bawah ke bagian luar element | h2 { margin-bottom: 40px; } |
| 4 | padding-left | mengatur ruang atau jarak antara border kiri ke bagian luar element | h2 { margin-left: 50px; } |
| 5 | padding | mengatur beberapa property margin sekaligus dalam satu declaration | h2 { margin: 20px 30px 40px 50px; } |
Border Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | border-width | mengatur lebar border keseluruhan | h2 { border-width: 5px; } |
| 2 | border-color | mengatur warna border keseluruhan | h2 { border-color: blue; } |
| 3 | border-style | mengatur style border keseluruhan | h2 { border-style: solid; } |
| 4 | border-top border-right border-bottom border-left | mengatur border pada posisi atas, kanan, bawah, kiri | h2 { border-bottom: 5px solid blue; } |
| 5 | border | mengatur beberapa property border sekaligus pada semua posisi dalam satu declaration | h2 { border: 5px dotted red; } |
| 6 | dll |
Width & Height Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | width | mengatur lebar element | body { width: 600px; } |
| 2 | height | mengatur tinggi element | body { height: 600px; } |
| 3 | max-width | mengatur lebar maksimal element | body { max-width: 800px; } |
| 4 | max-height | mengatur tinggi maksimal element | body { max-height: 800px; } |
| 5 | min-width | mengatur lebar minimal element | body { min-width: 200px; } |
| 6 | min-height | mengatur tinggi minimal element | body { min-height: 200px; } |
Float Property
| No | Property | Fungsi | Contoh |
|---|---|---|---|
| 1 | left | posisi element sebelah kiri | .sidebar { float: left; } |
| 2 | right | posisi element sebelah kanan | .sidebar { float: right; } |
| 3 | none | posisi element default | .sidebar { float: none; } |
| 4 | max-height | posisi element mengikuti element parent | .sidebar { float: inherit; } |
Membuat Layout HTML
Untuk mendesain sebuah halaman website, selain pemilihan property CSS yang tepat, hal penting lain yang harus diperhatikan adalah layout HTML yaitu bagaimana mengatur element-element HTML sehingga terbentuk layout yang sesuai dengan kebutuhan web developer.
Layout HTML
Sebuah halaman website umumnya memiliki element-element seperti gambar berikut ini.
Header
Element header biasanya berisi informasi judul dan tagline web. Selain itu, bisa juga ditambahkan elemen lain seperti logo website, waktu, kontak, atau running text breaking news (untuk portal berita)
Navigation
Element navigasi biasa berupa menu horizontal atau kombinasi horizontal dan drowpdown yang berfungsi mengarahkan pengunjung web ke halaman lain baik itu internal maupun external link.
Sidebar
Element sidebar biasanya difungsikan untuk menempatkan informasi berupa postingan terbaru, postingan populer, arsip, iklan, dan masih banyak lagi yang dapat kita tempatkan di element ini. Element siderbar dapat dibuat di kiri maupun kanan konten, atau bisa kiri dan kanan tergantung kebutuhan pengembang web.
Article
Element article berfungsi untuk menempatkan atau menampilkan dokumen atau konten yang ada pada website.
Footer
Element footer berada pada bagian paling bawah halaman website. Informasi yang ada di footer biasanya berupa copyright, halaman profil seperti about, contact, privacy policy, atau bisa juga eksternal link yang mengarah ke web relevan. Element footer dapat kita buat ke dalam beberapa kolom sesuai kebutuhan pengembang web.
Contoh Membuat Layout HTML
Dalam membuat layout HTML, kita dapat menggunakan beberapa element utama sebagai kerangka yaitu menggunakan element <table> dan elemen <div>.
Membuat Layout menggunakan Tabel
Studi kasus: Buatlah sebuah halaman website dengan ketentuan berikut:
- 1 kolom header
- 1 kolom menu navigasi
- 1 kolom siderbar sebelah kiri
- 1 kolom konten
- 1 kolom footer.
Jika diperhatikan kasus di atas, tabel terdiri atas 2 kolom dan 4 baris. Baris pertama untuk header, baris kedua untuk menu navigasi, baris ketiga untuk siderbar dan konten, baris keempat untuk footer. Pada baris pertama, kedua, dan keempat tabel sel harus digabungkan menjadi satu menggunakan atribut colspan.
Untuk membuat layout HTML di atas, kita siapkan dua buah file yaitu index.html dan style. css. Penulisan kode untuk layout HTML di atas adalah sebagai berikut:
Kode halaman index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<!-- Header -->
<td colspan="2" id="header">
<h1>Layout HTML</h1>
<p>Membuat layout HTML dengan tabel</p>
</td>
</tr>
<tr>
<!-- Menu -->
<td colspan="2" class="menu">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</td>
</tr>
<tr>
<!-- Sidebar -->
<td class="sidebar">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Postingan 1</a></li>
<li><a href="#">Postingan 2</a></li>
<li><a href="#">Postingan 3</a></li>
</ul>
</td>
<!-- Konten -->
<td class="konten">
<h2>Halaman Konten di sini</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
<tr>
<!-- Footer -->
<td colspan="2" class="footer">
Copyright © Abugaza_
</td>
</tr>
</table>
</body>
</html>Output kode HTML pada web browser tanpa CSS:
Sekarang kita manipulasi halaman HTML menggunakan kode CSS berikut.
#header {
background-color: skyblue;
color: black;
text-align: center;
padding: 20px;
}
.menu {
background-color: yellow;
color: black;
padding: 10px;
}
.sidebar {
background-color: tomato;
color: black;
width: 30%;
padding: 10px;
}
.konten {
background-color: greenyellow;
color: darkred;
padding: 10px;
}
.footer {
background-color: silver;
padding: 10px;
}
p {
color: darkblue;
}Layout HTML pada web browser setelah ditambahkan kode CSS:
Membuat Layout menggunakan Element div
Dengan kasus yang sama, kita dapat membuat layout HTML menggunakan element div seperti berikut ini.
Kode pada file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<!-- Header -->
<div id="header">
<h1>Layout HTML</h1>
<p>Membuat Layout HTML dengan Element div</p>
</div>
<!-- Menu -->
<div class="menu">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</div>
<div class="body">
<!-- Sidebar -->
<div class="sidebar">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Postingan 1</a></li>
<li><a href="#">Postingan 2</a></li>
<li><a href="#">Postingan 3</a></li>
</ul>
</div>
<!-- Konten -->
<div class="konten">
<h2>Halaman Konten di sini</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="class"></div>
<!-- Footer -->
<div class="footer">
<p>Copyright © Abugaza_</p>
</div>
</div>
</body>
</html>Hasil kode HTML pada web browser tanpa menggunakan CSS:
Kode pada file style.css
.wrap {
width: 100%;
}
#header {
background-color: skyblue;
color: black;
text-align: center;
padding: 20px;
margin: 3px;
}
.menu {
background-color: yellow;
color: black;
padding: 10px;
margin: 3px;
}
.body {
font-family: courier, arial, sans-serif;
}
.sidebar {
float: left;
height: 300px;
width: 26%;
background-color: tomato;
color: black;
padding: 10px;
margin: 3px;
}
.konten {
float: right;
height: 300px;
width: 70%;
background-color: greenyellow;
color: darkred;
padding: 10px;
margin: 3px;
}
.footer {
background-color: silver;
color: darkblue;
padding: 1px;
margin: 3px;
text-align: center;
}
.class {
clear: both;
}
p {
color: darkblue;
}Hasil layout HTML setelah ditambahkan kode CSS:
Belum ada Komentar untuk "Panduan Dasar Belajar HTML untuk Pemula"
Posting Komentar