Apa itu HTML? HTML adalah markup standar yang digunakan untuk membuat suatu halaman website. Bisa dibilang HTML merupakan program atau kode kode wajib kalau kamu ingin membuat web. Jangan takut, belajar html itu gampang kok!
Dalam sebuah website ada warna, tata letak, huruf atau font, gambar, link, dan sebagainya. Ini dibuat dengan HTML loh..
Apakah belajar html itu penting? Begini..
Kamu mau menjadi seorang web designer? Atau web developer? Atau sekedar ingin tahu cara membuat website?
Nah, langkah awal itu kamu wajib belajar HTML dahulu. Bahasa HTML adalah dasar dari segala dasar di dunia per-website-an.
Dalam series HTML Warrior #1 ini, kita akan belajar cara membuat website dengan html. Materi pertama pastinya kita akan pelajari struktur dan kode html dasar terlebih dahulu. Yuk, kita belajar html sekarang!
Struktur Dasar HTML
Berikut struktur html dasar yang wajib ada dalam membuat web dengan html.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>
Penjelasan kode html diatas:
<!DOCTYPE html>memberitahu kalau dokumen ini berjenis halaman html<html>bagian awal dan wajib dalam sebuah halaman web<head>dibagian ini juga wajib, fungsinya untuk memberi judul halaman web (<title>), informasi meta, stylesheet CSS, dan sebagainya. Ibaratnya manusia, dalam kepala manusia ada otak dan mulut yang berfungsi untuk berkomunikasi dengan orang lain.<head>memiliki fungsi yang sama, yaitu digunakan untuk berkomunikasi dengan browser.<body>dibagian inilah kita bisa membuat tata letak, tulisan, link, warna dan sebagainya. Kita bebas mau menggunakan model baju, warna, bahan apapun dalam badan (body) kita.
Persiapan Belajar
Sebelum kita lanjut ke materi belajar html dasar, kita persiapkan dulu “alat perang” nya. Simpel kok. Kamu cuma butuh laptop atau PC komputer, aplikasi notepad dan browser (Google Chrome / Firefox / Safari – bebas mau pakai yang mana).
Ohya, aku kasih tahu rahasia agar kamu bisa menguasai html dengan cepat..
Silahkan persiapkan juga kertas kosong dan pulpen.
Ini rahasia nya..
Sebelum kamu mengetikan kode kode html dalam materi, kamu tulis dulu pada kertas kode html tersebut, kamu baca kembali dari atas ke bawah, barulah kamu ketikan di notepad.
“Banyak psikolog percaya bahwa menulis sesuatu dengan tangan memiliki efek yang lebih tahan lama pada memori otak dibandingkan dengan mengetik pada keyboard.“
Setelah semua perlengkapan ready, jangan lupa berdoa dan niat ya 😀
Cara Membuat Judul Website
Heading adalah judul atau subjudul yang ditampilkan pada sebuah halaman web.
Heading memiliki kode html <h1> hingga <h6>. Semakin besar angka pada heading, maka ukuran semakin kecil.
Ketikan kode html berikut pada notepad.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Heading</title>
</head>
<body>
<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>
</body>
</html>
Simpan kode tersebut dengan memberi nama heading.html (hanya contoh – penamaan bebas namun hindari menggunakan spasi).
Kemudian klik kanan pada file heading.html, pilih Open With > Google Chrome (jika kamu menggunakan browser Chrome)
Penggunaan heading pada halaman web:
- Biasa digunakan untuk judul halaman atau artikel
<h1>adalah heading utama, cukup gunakan 1 saja pada tiap halaman web<h2>biasa digunakan sebagai subjudul<h3>bisa digunakan untuk subjudul turunan- dan seterusnya
Cara Membuat Paragraf
PARAGRAPH
Gunakan kode <p> untuk membuat sebuah baris atau blok paragraf.
Ketikan kode html berikut pada notepad.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Paragraph</title>
</head>
<body>
<p>Hore! Kamu berhasil membuat sebuah paragraph. Ini adalah blok paragraph pertama.</p>
<p>Dan ini adalah blok paragraph kedua. Begitu seterusnya jika kamu ingin membuat paragraph pada sebuah halaman website.</p>
</body>
</html>
Simpan kode tersebut dengan nama paragraf.html (penamaan bebas) kemudian klik kanan pilih Open With > Google Chrome.
LINE BREAKS
Tapi tunggu.. mungkin kamu heran, kok saat kamu ketik dan tekan tombol Enter pada keyboard (baca: untuk membuat baris baru), tulisannya tidak ikut berubah ya di browser?
Gunakan kode <br> untuk membuat baris baru. Contoh berikut bisa kamu ketikan di notepad.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Line Break</title>
</head>
<body>
<p>Ini adalah baris pertama<br>Ini adalah baris kedua<br>ini baris ketiga<br>dst…</p>
</body>
</html>
Kemudian simpan dan lihat kembali pada browser dengan menekan tombol refresh atau F5 / ctrl+R / cmd+R.
Nah sekarang kamu sudah berhasil membuat baris baru.
Note: Kode <br> tidak perlu ditulis tag penutup yah, cukup <br> saja, ngga perlu <br></br> No.. no.. no..
HORIZONTAL RULES
Kamu ingin menyisipkan garis separator horizontal? Gunakan kode <hr>.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Horizontal Rule</title>
</head>
<body>
<p>Ini adalah baris pertama<p>
<hr>
<p>teks ini dipisahkan oleh garis horizontal</p>
</body>
</html>
Simpan dan lihat pada browser dengan menekan tombol refresh.
PREFORMATTED TEXT
Repot kalau harus mengetikan kode <br> setiap mau bikin baris baru? Ini mesti kamu coba deh. Gunakan kode <pre> pada teks yang mau kamu tampilkan.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Pre</title>
</head>
<body>
<pre>
Kamu bisa menulis bebas disini
Enter
Enter
Ehh.. udah dibaris ke-empat ajaa.. :D
</pre>
</body>
</html>
Simpan kode tersebut dan lihat pada browser.
Cara Membuat List di Website
HTML menyediakan elemen bagi para developer website untuk membuat daftar item. Elemen-elemen ini antara lain:
- Unordered Lists, disingkat
<ul>, ditandai dengan simbol pada tiap item nya. - Ordered Lists, disingkat
<ol>, ditandai dengan huruf atau angka pada tiap item nya. - Description Lists, disingkat
<dl>, adalah deskripsi tiap poin dari sebuah item.
Unordered Lists <ul>
Tipe Unordered Lists dimulai dengan tag <ul> dan untuk daftar item nya menggunakan <li>. Lihat contoh penggunaannya berikut:
Kode HTML:
<ul>
<li>Bikin web dengan notepad</li>
<li>Bikin web keren dengan html itu mudah</li>
<li>Belajar bikin website untuk pemula</li>
</ul>
Hasil:
- Bikin web dengan notepad
- Bikin web keren dengan html itu mudah
- Belajar bikin website untuk pemula
Tipe unordered lists juga dapat kita ubah simbolnya. HTML menyediakan tiga simbol yang bisa kita pakai: disc, square dan circle.
<ul type="disc">
Kode HTML:
<ul type="disc">
<li>Buku cara membuat web design</li>
<li>Buku cara membuat web sederhana</li>
<li>Buku HTML dan CSS</li>
</ul>
Hasil:
- Buku cara membuat web design
- Buku cara membuat web sederhana
- Buku HTML dan CSS
<ul type="square">
Kode HTML:
<ul type="square">
<li>Cara membuat website dengan html</li>
<li>Belajar coding html dengan notepad</li>
<li>Contoh coding html website keren</li>
</ul>
Hasil:
- Cara membuat website dengan html
- Belajar coding html dengan notepad
- Contoh coding html website keren
<ul type="circle">
Kode HTML:
<ul type="circle">
<li>Cara membuat website dengan html</li>
<li>Cara membuat html web</li>
<li>Belajar html dasar</li>
</ul>
Hasil:
- Cara membuat website dengan html
- Cara membuat html web
- Belajar html dasar
Ordered Lists <ol>
Tipe Ordered Lists dimulai dengan tag <ol> dan untuk membuat daftar list item nya menggunakan <li>. Lihat contoh penggunaan tipe ordered lists berikut ini:
Kode HTML:
<ol>
<li>Belajar html lengkap</li>
<li>Belajar html dasar</li>
<li>Contoh program html</li>
</ol>
Hasil:
- Belajar html lengkap
- Belajar html dasar
- Contoh program html
HTML menyediakan lima pilihan marker khusus tipe ordered lists ini. Kita bisa mengubahnya dengan huruf, angka dan angka romawi.
Contoh Pilihan
<ol type="1|a|A|i|I">
Tabel Nilai Atribut
| Nilai | Penjelasan |
|---|---|
| 1 | Default. Angka desimal (1, 2, 3, 4) |
| a | Huruf kecil (a, b, c, d) |
| A | Huruf besar (A, B, C, D) |
| i | Angka romawi dengan huruf kecil (i, ii, iii, iv) |
| I | Angka romawi dengan huruf besar (I, II, III, IV) |
<ol type="a"> – Huruf Kecil (a, b, c, d)
Tipe atribut dengan nilai yang akan menghasilkan tampilan huruf kecil (a, b, c, d).
Kode HTML:
<ol type="a">
<li>Belajar html lengkap</li>
<li>Kode html lengkap</li>
<li>Coding html lengkap</i>
</ol>
Hasil:
- Belajar html lengkap
- Kode html lengkap
- Coding html lengkap
<ol type="A"> – Huruf Besar (A, B, C, D)
Tipe atribut dengan nilai yang akan menghasilkan tampilan huruf besar (A, B, C, D).
Kode HTML:
<ol type="A">
<li>Belajar html lengkap</li>
<li>Kode html lengkap</li>
<li>Coding html lengkap</i>
</ol>
Hasil:
- Belajar html lengkap
- Kode html lengkap
- Coding html lengkap
<ol type="i"> – Angka Romawi Kecil (i, ii, iii, iv)
Tipe atribut dengan nilai yang akan menghasilkan tampilan angka romawi kecil (i, ii, iii, iv).
Kode HTML:
<ol type="i">
<li>Tutorial Belajar HTML Bahasa Indonesia</li>
<li>Belajar HTML itu Mudah Banget</li>
<li>Cara Membuat Website Sederhana dengan HTML</i>
</ol>
Hasil:
- Tutorial Belajar HTML Bahasa Indonesia
- Belajar HTML itu Mudah Banget
- Cara Membuat Website Sederhana dengan HTML
<ol type="I"> – Angka Romawi Besar (I, II, III, IV)
Tipe atribut dengan nilai yang akan menghasilkan tampilan angka romawi besar (I, II, III, IV).
Kode HTML:
<ol type="I">
<li>Tutorial Belajar HTML Bhs Indonesia</li>
<li>Belajar HTML itu Gampang!</li>
<li>Cara Bikin Web Sederhana dengan notepad</i>
</ol>
Hasil:
- Tutorial Belajar HTML Bhs Indonesia
- Belajar HTML itu Gampang!
- Cara Bikin Web Sederhana dengan notepad
Description Lists <dl>
Tipe Description Lists dimulai dengan tag <dl>. Untuk membuat daftar list item nya menggunakan <dt> dan tiap list memiliki sub-point lagi dengan menggunakan <dd>. Lihat contoh dibawah agar lebih jelas.
Kode HTML:
<dl>
<dt>Web Design</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>Javascript</dd>
<dt>Browser</dt>
<dd>Google Chrome</dd>
<dd>Mozilla Firefox</dd>
<dd>Safari</dd>
</dl>
Hasil:
- Web Design
- HTML
- CSS
- Javascript
- Browser
- Google Chrome
- Mozilla Firefox
- Safari
Cara Membuat Form Website
Kalau kita biasa menyebutnya “formulir” di dunia nyata, di dunia website disebutnya form. Form sangat sering digunakan pada website dan hampir semua web yang ada pasti memiliki form html nya sendiri.
Kegunaan form di website antara lain untuk halaman informasi kontak, kolom komentar, pencarian konten, registrasi, formulir pemesanan, dan sebagainya.
Berikut adalah elemen html yang sering digunakan dalam membuat form.
input, digunakan untuk mengisi teks maksimal 255 karakter.textarea, digunakan untuk mengisi teks panjang (lebih dari 255 karakter), seperti pengisian pesan, alamat, dan teks panjang lainnya.checkbox, elemen berbentuk boks kecil apabila di klik akan muncul tanda checkmark. Sebut saja “centang” biar lebih mudah 😀radio, entah kenapa dinamakan radio padahal tidak ada siaran nya :D, elemen ini biasa digunakan untuk kolom pilihan (lebih dari 1 pilihan). Contoh: Pilih Gender > Pria / Wanita.select, elemen berbentuk drop-down list, apabila di klik akan muncul beberapa pilihan yang ditampilkan kebawah.
Yuk kita mulai materi cara membuat form di website dalam seksi belajar html dasar ini.
Belajar HTML <input>
Elemen <input> memiliki beberapa jenis tipe yang biasa digunakan pada sebuah website. Berikut beberapa tipe yang dapat kamu gunakan pada html.
<input type="button"><input type="checkbox"><input type="color"><input type="email"><input type="file"><input type="hidden"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="submit"><input type="text">
Input tipe button selalu digunakan pada sebuah form website. Tentunya dilihat dari namanya, tipe input ini berbentuk sebuah button atau tombol.
Untuk memberikan teks pada jenis input ini, gunakan atribut value. Lihat contoh dibawah:
Kode HTML:
Tanpa Teks <input type="button">
Dengan Teks: <input type="button" value="Kirim Pesan" />
Hasil:
Tanpa Teks Dengan Teks:
<input type="checkbox">
Input tipe checkbox berbentuk sebuah kotak kosong secara default. Apabila kita klik maka akan muncul sebuah tanda centang pada kotak tersebut.
Input jenis ini biasa digunakan pada kolom persetujuan atau agreement dan multi-optional.
Kode HTML:
<input type="checkbox">
Hasil: (klik kotak dibawah)
Hasil diatas merupakan contoh dari input tipe checkbox, namun dalam penerapannya masih belum sempurna. Lalu bagaimana cara memasukan teks pada input checkbox?
Gunakan <label> sebagai “pembungkus” masing-masing checkbox. Lihat contoh:
Kode HTML:
<label>
<input type="checkbox"> Saya setuju untuk belajar html dari sekarang
</label>
<label>
<input type="checkbox"> Berlangganan artikel belajar html sekarang
</label>
Hasil:
<input type="color">
Input tipe color digunakan untuk menampilkan pilihan warna html. Jenis tipe ini jarang digunakan pada sebuah form, tapi sering dipakai untuk aplikasi berbasis web.
Kode HTML:
<input type="color">
Hasil: (klik dibawah ini)
<input type="email">
Input tipe email digunakan untuk pengisian alamat email. Apabila user mengisi alamat email dengan format yang tidak valid, otomatis akan tervalidasi gagal saat submit nanti.
Kode HTML:
<input type="email">
<input type="file">
Input tipe file digunakan untuk menggungah dokumen dari komputer.
Kode HTML
<input type="file">
Hasil:
Input tipe ini merupakan input yang tidak terlihat (hidden). User tidak dapat mengisi kolom ini, namun programmer bisa menyertakan data yang dibutuhkan untuk web di kolom tersembunyi ini.
Kode HTML:
<input type="hidden" value="data_tersembunyi">
<input type="number">
Input tipe ini digunakan untuk mengisi data angka dan dapat diset angka minimal dan maksimalnya.
Kode HTML:
Standar: <input type="number">
Nilai Default: <input type="number" value="0">
Min dan Max (1-10): <input type="number" min="1" max="10">
Step (0.5): <input type="number" step=".5">
Hasil:
Standar: Nilai Default (contoh 7): Min dan Max (1-10): Step (0.5)
<input type="password">
Input tipe ini digunakan untuk kolom pengisian kata sandi atau password.
Kode HTML:
<input type="password">
Hasil:
<input type="radio">
Input ini hampir sama dengan checkbox namun berbentuk bulat dan biasa digunakan untuk pengisian satu pilihan dari beberapa opsi.
Kode HTML:
<label>
<input type="radio" name="materi"> Belajar HTML
<label>
<label>
<input type="radio" name="materi"> Belajar CSS
</label>
Hasil:
<input type="range">
Input tipe ini berbentuk slider untuk menampilan nilai range yang telah ditentukan.
Kode HTML:
<input type="range" min="0" max="10">
Hasil:
<input type="reset">
Input tipe ini untuk menghilangkan (reset) nilai yang telah terisi pada kolom sebuah form.
Kode HTML:
<form>
<input type="text">
<input type="reset" value="Reset">
</form>
Hasil: (isi kolom kemudian klik tombol “Reset”)
<input type="submit">
Input ini sama dengan input button. Digunakan sebagai tombol untuk submit formulir.
Kode HTML:
<input type="submit" value="Submit">
Hasil:
<input type="text">
Input text adalah yang paling umum digunakan. Input ini biasa digunakan untuk pengisian teks yang mengandung huruf, kata maupun karakter simbol.
Kode HTML:
Standar: <input type="text">
Max. 15 Karakter <input type="text" maxlength="15">
Hasil:
Standar: Max. 15 Karakter
Belajar HTML <textarea>
Elemen textarea adalah kolom teks yang dapat menampung karakter panjang dan padat. Lebih banyak dari maksimal jumlah karakter yang dimiliki elemen <input>.
Penggunaan <textarea> pada sebuah form html biasa dipakai untuk:
- Pengisian alamat lengkap
- Pengisian biodata diri
- Pengisian teks pesan
- Pengisian deskripsi
- dan sejenisnya
Penggunaan <textarea> harus memakai tag penutup </textarea>. Lihat contoh berikut.
Kode HTML
<textarea></texarea>
Hasil:
Belajar HTML <select>
Elemen <select> digunakan untuk membuat drop-down list pada form. Fungsinya sejenis dengan elemen checkbox dan radio yaitu pemilihan opsi.
Untuk membuat opsi gunakan <option> yang diletakan dalam elemen <select>.
Kode HTML:
<select>
<option value="Belajar HTML">Belajar HTML</option>
<option value="Belajar Web Design">Belajar Web Design</option>
<option value="Bikin Web Keren">Bikin Web Keren</option>
</select>
Hasil:
Cara Memasukan Gambar di Website
Perlu diketahui, sebuah website yang tidak ada gambar atau foto itu seperti membaca skripsi tanpa spasi :’D
– Dian Agung –
Bayangkan kalau beranda Facebook kalian isinya teks tulisan curhatan orang semua tanpa ada gambar? Hehe…
Yah pokoknya visual itu penting banget dalam kehidupan kita..
Gunakan kode <img> untuk menyisipkan gambar pada halaman website. Namun, tidak cukup menggunakan kode tag <img> saja, ada beberapa atribut yang kita perlu dituliskan juga. Lihat kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Cara Memasukan Gambar</title>
</head>
<body>
<img src=”nama-file-gambar.jpg” alt=”Ini adalah gambar ku”>
</body>
</html>
Penjelasan:
srcadalah singkatan dari source (sumber). Masukan nama file gambar TANPA menggunakan spasi atau bisa juga spasi digantikan dengan tanda strip (–) dan underscore (_). Lebih jelasnya lihat pada gambar dibawah.altadalah singkatan dari alternate text. Ini fungsinya jika sumber gambar salah atau tidak ketemu, maka tulisan ini akan muncul.- Usahakan gunakan huruf kecil (lowercase) pada nama file gambar kalian ya. Kalau masih ada huruf yang besar, segera rename atau ubah nama menjadi huruf kecil dan TANPA spasi.
Cara diatas adalah contoh bagaimana cara memasukan gambar di website dari sumber internal (lokal).
Lalu, bagaimana caranya memasukan gambar dari sumber link dari luar? Berikut adalah cara memasukan gambar via url link eksternal. Sebelumnya, pastikan bahwa kamu memiliki koneksi INTERNET agar gambar dapat ditampilkan secara sempurna.
Link gambar eksternal: https://source.unsplash.com/800×400/?html
Kode HTML:
<img src=”https://source.unsplash.com/800x400/?html” alt=”Ini adalah gambar dari sumber link luar”>
Hasilnya sebagai berikut:
CARA MENGATUR PANJANG DAN LEBAR GAMBAR
Setelah kita mempelajari cara memasukan gambar kedalam website baik itu dari sumber gambar internal maupun eksternal, kita juga dapat mengatur panjang dan lebar gambar tesebut dengan menggunakan atribut width dan height.
Contoh:
<img src=”https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076533_960_720.jpg” alt=”Ini adalah gambar dari sumber link luar” width=”500” height=”300”>
Penjelasan:
widthuntuk mengatur panjang sebuah gambar (dalam ukuran pixel)heightuntuk mengatur lebar / tinggi sebuah gambar (dalam ukuran pixel)
Cara Memasukan Video di Website
Kamu juga bisa memasukan video di website entah itu unggahan video sendiri (internal) ataupun video dari youtube (eksternal).
Video Offline (Lokal)
Video lokal maksudnya adalah video yang kamu unggah atau upload sendiri dan ingin ditampilkan kedalam website. Bagaimana caranya? Sebelumnya lihat gambar berikut.
Tulis dan setelah itu ketikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Cara Memasukan Video di Website</title>
</head>
<body>
<video>
</video>
</body>
</html>
Langkah berikutnya tentukan sumber dan nama video yang mau ditampilkan.
<video>
<source src=”video-ulang-tahun.mp4” type=”video/mp4”>
</video>
Cara mengatur panjang dan lebar ukuran video dengan kode berikut.
<video width=”320” height=”240”>
<source src=”video-ulang-tahun.mp4” type=”video/mp4”>
</video>
Kode diatas memberitahukan bahwa video memiliki panjang sebesar 320 pixel dan lebar kebawah 240 pixel.
Untuk memulai video secara otomatis gunakan autoplay seperti berikut.
<video width=”320” height=”240” autoplay>
<source src=”video-ulang-tahun.mp4” type=”video/mp4”>
</video>
FORMAT VIDEO YANG BISA DIMASUKAN DI WEB
| File Format | Media Type |
|---|---|
| .mp4 | video/mp4 |
| .webm | video/webm |
| .ogg | video/ogg |
Video Online (YouTube)
Video online maksudnya adalah sumber video yang diambil dari luar website kita, contohnya Youtube, Vimeo, dan sebagainya. Kita akan belajar cara memasukan video Youtube di website dengan notepad.
Cara Memasukan Video Youtube di Website.
- Buka YouTube
Buka YouTube (https://youtube.com) dan carilah video yang mau dimasukan. Ketikan kata kunci video yang mau dicari di kolom pencarian dibagian paling atas. Jika sudah tekan enter. - Pilih Bagikan Tautan atau Share
Klik menu “BAGIKAN” atau “SHARE” yang terletak dibawah video. Lihat gambar diatas. - Sematkan / Embed
Pilih menu “Sematkan” atau “Embed” yang terletak di posisi paling kiri. Lihat gambar. - Salin Kode HTML
Kemudian salin kode html yang muncul dengan mengklik tombol “SALIN” atau “COPY”. - Tempelkan Kode pada Web
Kemudian tempelkan pada website dengan cara Klik Kanan > Tempelkan atau Klik Kanan > Paste. Kamu juga bisa menggunakan shortcut ctrl+v (windows) atau cmd+v (macintosh). - Selesai
Sekarang kamu sudah berhasil memasukan video youtube pada website. Cara ini juga bisa kamu gunakan di blogspot. (Materi blogspot akan aku buatkan, Insya Allah)
BAGIKAN” atau “
SHARE” yang terletak dibawah video. Lihat gambar diatas.
Cara Membuat Table / Tabel di Website
Tabel merupakan salah satu elemen penting pada website. Biasa digunakan untuk menampilkan data-data agar rapi dan terstruktur dalam bentuk baris dan kolom.
Yaa.. seperti excel lah..
Tapi sebelumnya agar mudah memahami struktur kode html untuk membuat table, aku berikan sedikit gambaran struktur tabel pada html berikut.
Penjelasan gambar:
<table>, adalah tag dasar untuk membuat sebuah tabel pada web.<thead>sebuah grup bagian kepala atau header pada tabel.<tbody>sebuah grup pada bagian badan atau isi sebuah tabel.<tfoot>sebuah grup pada bagian footer atau akhir tabel.<th>digunakan untuk membuat judul kolom pada tabel.<tr>merupakan tag dasar membuat baris atau row pada tabel.<td>adalah tag dasar membuat kolom pada tabel.
Yuk kita coba membuat sebuah table sederhana.
Cara Membuat Table Header (Judul Tabel)
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML – Cara Membuat Table / Tabel</title>
</head>
<body>
<table>
</table>
</body>
</html>
Kemudian kita akan membuat judul tabel. Kita akan grup-kan kedalam bagian kepala atau header dengan menggunakan <thead>.
<table>
<thead>
</thead>
</table>
Setelah membuat grup table header, selanjutnya buatlah heading atau judul pada tabel. Misal kita akan membuat judul untuk kolom Nomor, Nama dan Pekerjaan.
Kode HTML:
<table>
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Pekerjaan</th>
</tr>
</thead>
</table>
Hasilnya akan seperti berikut:
| Nomor | Nama | Pekerjaan |
|---|
Yes! Kita berhasil membuat judul pada tiap kolom di tabel.
Cara Membuat Isi Tabel
Next, judul tabel sudah kita buat, sekarang saatnya kita bikin isi tabel tersebut. Contoh kita akan membuat isi tabel seperti pada gambar berikut.
Pada gambar ilustrasi diatas, terdapat 3 baris data (nomor, nama, pekerjaan). Setiap baris data, kita “bungkus” dengan tag <tr> atau table row.
Berarti.. ada 3 table row (<tr>) …
STEP 1:
<table>
<tr>
… Data 1 …
</tr>
<tr>
…. Data 2 …
</tr>
<tr>
… Data 3 …
</tr>
</table>
Kita berhasil membuat 3 buah baris atau row. Next, kita mulai isi tiap baris tersebut sesuai urutan kolom nya masing-masing (Nomor, Nama, Pekerjaan).
STEP 2:
<table>
<tr>
<td>1</td>
<td>Citra</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>Indra Rahadian</td>
<td>Web Programmer</td>
</tr>
<tr>
<td>3</td>
<td>Bayu Indrawan</td>
<td>Graphic Designer</td>
</tr>
</table>
STEP 3:
Sekarang kita grupkan isi tabel diatas kedalam bagian body dengan menggunakan <tbody>.
<table>
<tbody>
<tr>
<td>1</td>
<td>Citra</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>Indra Rahadian</td>
<td>Web Programmer</td>
</tr>
<tr>
<td>3</td>
<td>Bayu Indrawan</td>
<td>Graphic Designer</td>
</tr>
</tbody>
</table>
Done! Kita berhasil membuat isi tabel.
Hasil akhirnya akan seperti dibawah ini.
| 1 | Citra | Web Designer |
| 2 | Indra Rahadian | Web Programmer |
| 3 | Bayu Indrawan | Graphic Designer |
Cara Gabungkan Kolom & Baris (Merge Cells)
Dalam excel, ada istilah merge cells yaitu perintah menggabungkan dua cell atau lebih menjadi satu baris atau kolom pada tabel. Lalu bagaimana caranya menggabungkan cell table pada html?
Perlu diingat, kita disini belajar full coding dengan menggunakan notepad. Jadi, untuk melakukannya, ya harus coding… 😀
1. Menggabungkan Kolom Kesamping
Untuk menggabungkan kolom kesamping pada tabel, gunakan atribut colspan. Atribut ini mempunyai isi nilai dari nol hingga jumlah kolom pada tabel. Lihat contoh berikut
Contoh 1:
| Belanja | Harga |
|---|---|
| Beras | 15,000 |
| Telur Ayam | 23,000 |
| Total: 38,000 | |
Kode HTML:
<table>
<thead>
<tr>
<th>Belanja</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Beras</td>
<td>15,000</td>
</tr>
<tr>
<td>Telur Ayam</td>
<td>23,000</td>
</tr>
<tr>
<td colspan=”2”>Total: 38,000</td>
</tr>
</tbody>
</table>
Contoh 2:
| Nomor | Nama | Kelas | Nilai | |
|---|---|---|---|---|
| 1 | Baharudin | 3A | 75 | LULUS |
| 2 | Maudy Ayunda | 3B | 100 | LULUS |
| 3 | Irwan Kusuma | 3A | 58 | BELUM LULUS |
| Update per tanggal 14 Juli 2020 | ||||
Kode HTML:
<table>
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Kelas</th>
<th colspan=”2”>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Baharudin</td>
<td>3A</td>
<td>75</td>
<td>LULUS</td>
</tr>
<tr>
<td>2</td>
<td>Maudy Ayunda</td>
<td>3B</td>
<td>100</td>
<td>LULUS</td>
</tr>
<tr>
<td>3</td>
<td>Irwan Kusuma</td>
<td>3A</td>
<td>58</td>
<td>BELUM LULUS</td>
</tr>
<tr>
<td colspan=”5” align=”center”>Update per tanggal 14 Juli 2020</td>
</tr>
</tbody>
</table>
2. Menggabungkan Baris Kebawah
Untuk menggabungkan baris kebawah pada tabel, gunakan atribut rowspan. Sama halnya dengan colspan, atribut ini juga memiliki nilai dari nol hingga jumlah baris row pada sebuah tabel.
Contoh 1:
| GRUP A | Atletico |
| Monaco | |
| B. Dortmund | |
| Club Brugge |
Kode HTML:
<table>
<tbody>
<tr>
<td rowspan="4">GRUP A</td>
<td>Atletico</td>
</tr>
<tr>
<td>Monaco</td>
</tr>
<tr>
<td>B. Dortmund</td>
</tr>
<tr>
<td>Club Brugge</td>
</tr>
</tbody>
</table>
Contoh 2:
| Senin | Rabu | Jumat | |
|---|---|---|---|
| PETUGAS PIKET | Nia | Naruto | Nobita |
| Thomas | Sasuke | Suneo | |
| Percy | Rock Lee | Takeshi |
Kode HTML:
<table>
<thead>
<tr>
<th></th>
<th>Senin</th>
<th>Rabu</th>
<th>Jumat</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">PETUGAS PIKET</td>
<td>Nia</td>
<td>Naruto</td>
<td>Nobita</td>
</tr>
<tr>
<td>Thomas</td>
<td>Sasuke</td>
<td>Suneo</td>
</tr>
<tr>
<td>Percy</td>
<td>Rock Lee</td>
<td>Takeshi</td>
</tr>
</tbody>
</table>
3. Menggabungkan Kolom Kesamping dan Baris Kebawah
Contoh:
| No. | Nama | Kelas | Hasil Akhir | |
|---|---|---|---|---|
| Nilai | Keterangan | |||
| 1 | Anggi Septi | 2C | 85 | LULUS |
| 2 | Baskara Jati | 2A | 78 | LULUS |
| 3 | Dony Setiawan | 2B | 65 | LULUS |
Kode HTML:
<table>
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Nama</th>
<th rowspan="2">Kelas</th>
<th colspan="2">Hasil Akhir</th>
</tr>
<tr>
<th>Nilai</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anggi Septi</td>
<td>2C</td>
<td>85</td>
<td>LULUS</td>
</tr>
<tr>
<td>2</td>
<td>Baskara Jati</td>
<td>2A</td>
<td>78</td>
<td>LULUS</td>
</tr>
<tr>
<td>3</td>
<td>Dony Setiawan</td>
<td>2B</td>
<td>65</td>
<td>LULUS</td>
</tr>
</tbody>
</table>
Cara Membuat Link / Hyperlink atau Tautan
Tautan atau link sangatlah sering digunakan bahkan menjadi suatu kewajiban yang harus ada pada website. Link termasuk elemen yang terpenting. Untuk membuat sebuah link kita harus menggunakan tag <a> singkatan dari anchor.
Fungsi tautan atau link pada web:
- Kita dapat berpindah dari satu halaman ke halaman lainnya dalam satu website.
- Kita juga dapat berpindah dari satu halaman ke halaman website luar.
- Link merupakan faktor penting untuk Search Engine Optimization (SEO).
Misalnya, kita memiliki 2 halaman website, home.html dan kontak.html yang masing-masing ingin saling terhubung. Lihat gambar berikut.
Kita akan membuat link tautan di masing-masing halaman. Di halaman home.html akan ada tautan ke halaman kontak.html. Begitu juga sebaliknya.
Bagaimana caranya? Yuk kita buka notepad untuk coding..
1. Buat halaman home.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Home</title>
</head>
<body>
<h1>HOME</h1>
</body>
</html>
2. Buat halaman kontak.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Kontak</title>
</head>
<body>
<h1>KONTAK</h1>
</body>
</html>
3. Lalu edit halaman home.html dan tambahkan kode berikut
<body>
<h1>HOME</h1>
<a href=”kontak.html”>Ke halaman kontak</a>
</body>
Simpan dan lihat pada browser. Klik tautan yang baru kita buat tadi maka halaman akan berpindah ke halaman kontak.html.
4. Buat tautan dari halaman kontak.html ke halaman home.html.
Tambahkan kode berikut.
<body>
<h1>KONTAK</h1>
<a href=”home.html”>Kembali ke Halaman Home</a>
</body>
Simpan dan lihat kembali browser kamu. Jika kamu sekarang ada di halaman kontak, coba klik tautan “Kembali ke halaman home”, maka halaman akan berpindah ke halaman home.html.
Cara Ubah Warna dan Style pada Link
Sebenarnya materi ini masuk ke level selanjutnya, yaitu materi belajar HTML dan CSS (Cascading Style Sheet) di kelas Monster CSS. Ibarat sebuah rumah, CSS berfungsi untuk memberikan warna tembok, peletakan furniture isi rumah, bikin taman, ubah warna lampu dan lainnya.
Tapi supaya kamu tetap semangat dalam belajar html, aku akan share sedikit cara penggunaan CSS untuk mengubah warna dan style pada tautan atau link.
1. Cara Membuat Kode CSS
Untuk membuat sebuah kode CSS, kita perlu membuat tag <style> terlebih dahulu yang diletakan diantara tag <head>..</head>. Buat sebuah halaman html berikut:
<!DOCTYPE html>
<head>
<title>cara membuat kode css</title>
<style>
</style>
</head>
<body>
<a href=”https://dianagung.com”>Website Belajar HTML dan CSS</a>
</body>
</html>
Kemudian kita akan memberikan style pada elemen anchor link atau tautan. Bagaimana caranya? Lihat kode css dibawah ini:
<style>
a {
kode css nanti ada disini
}
</style>
Kenapa ditulis a saja? Dalam html, a merupakan kode untuk membuat tautan atau link. Silahkan baca kembali cara membuat tautan atau link dengan html diatas.
2. Cara Ubah Warna Link
Selanjutnya kita akan memberikan warna pada link. Misal, kita coba berikan warna merah pada link. Perhatikan cara penulisan kode css berikut ini.
<style>
a {
color: #FF0000; /* KODE WARNA HTML MERAH */
}
</style>
Hasil:
Website Belajar HTML dan CSS
Lihat daftar Kode Warna HTML lengkap.
Simpan dan lihat pada browser kamu, maka tampilan link akan berubah menjadi warna merah. Jika kamu ingin menghilangkan garis bawah pada link, kamu bisa menggunakan text-decoration: none.
<style>
a {
color: #FF0000;
text-decoration: none; /* Menghilangkan garis bawah pada link */
}
</style>
Hasil:
Website Belajar HTML dan CSS
Simpan dan lihat kembali pada browser, maka garis bawah akan hilang.
3. Cara Ubah Warna Link Hover
Pernahkan kamu melihat pada suatu web, pada saat cursor mengarah kesebuah tautan, maka warna tautan tersebut berubah menjadi warna ungu misalnya atau warna lainnya. Hal tersebut dinamakan hover, aktivitas kursor saat mengarah ke sebuah elemen web.
Bagaimana cara merubah warna link hover? Kita lanjutkan kode css sebelumnya agar lebih mudah dimengerti.
<style>
a {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #800080; /* KODE WARNA HTML PURPLE */
}
</style>
Hasil:
Website Belajar HTML dan CSS
Simpan dan lihat pada browser dengan menekan tombol refresh. Jika berhasil, saat kursor mengarah pada link, maka link tersebut akan berubah warna dari merah menjadi ungu (purple).
Lihat juga: Daftar Kode Warna HTML Lengkap
Kalau kamu mau memberikan garis bawah pada link hover, kamu bisa menambahkan baris kode text-decoration: underline.
<style>
a {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #800080;
text-decoration: underline; /* GARIS BAWAH PADA LINK */
}
</style>
Hasil:
Website Belajar HTML dan CSS
Simpan dan silakan tinjau kembali hasilnya.
4. Teknik Mudah Ubah Link menjadi Button
Cara ini merupakan teknik dasar dalam belajar html dan css namun sering digunakan saat membuat website dengan notepad. Banyak sekali teknik dan cara mendesain web dengan CSS yang bisa kamu pelajari di internet. Tapi sekarang kita coba belajar css dari yang dasar dulu ya.
Seperti sebelumnya, kita akan melanjutkan kode css diatas agar lebih gampang dipahami.
<style>
a {
background: #6495ED; /* BERI WARNA BACKGROUND "CORNFLOWER BLUE" */
border-radius: 3px; /* BERI LEKUKAN (RADIUS) PADA SUDUT */
color: #FFFFFF; /* GANTI WARNA PUTIH PADA TEKS */
text-decoration: none;
}
a:hover {
background: #9ACD32; /* BERI WARNA BACKGROUND "YELLOW GREEN" */
color: #FFFFFF; /* UBAH KE WARNA PUTIH */
text-decoration: none; /* HILANGKAN UNDERLINE */
}
</style>
Hasilnya akan seperti berikut,
Website Belajar HTML dan CSS
Sekarang kita akan memberikan ruang pada button dengan cara berikut.
<style>
a {
background: #6495ED;
border-radius: 3px;
color: #FFFFFF;
text-decoration: none;
padding-top: 10px; /* BERI RUANG ATAS */
padding-bottom: 10px; /* BERI RUANG BAWAH */
padding-left: 15px; /* BERI RUANG KIRI */
padding-right: 15px; /* BERI RUANG KANAN */
}
a:hover {
background: #9ACD32;
color: #FFFFFF;
text-decoration: none;
}
</style>
Hasilnya akan seperti ini,
Website Belajar HTML dan CSS
Note: px merupakan singkatan dari satuan ukuran pixel. Silahkan ketahui tentang ukuran pixel disini.
Penulisan padding bisa kamu singkat seperti berikut.
<style>
a {
background: #6495ED;
color: #FFFFFF;
text-decoration: none;
padding: 10px 15px 10px 15px; /* ATAS KANAN BAWAH KIRI */
}
</style>
Disingkat malah ribet? Engga kok. Coba kamu bacanya dengan cara searah jarum jam. Contohnya seperti ini.
<style>
a {
padding: [Jam 12 - atas] [Jam 3 - kanan] [Jam 6 - bawah] [Jam 9 - kiri];
}
</style>
Sekarang mulai paham, kan? Suatu hari saya akan membuat materi belajar html dan css, Insya Allah.
Cara Memasukan Audio di Website. Musik di Spotify? Bisa!
Pertama kali aku belajar html, saat itu yang aku cari tahu adalah bagaimana cara memasukan musik atau audio di website. Dulu yang ada dipikiranku itu mau bikin website seperti playlist musik sehingga orang-orang betah berada di website ku 😀
Nah, bagaimana cara nya memasukan audio pada website? Kita akan membahas nya beserta contoh kode html.
- Cara memasukan audio pada website dengan html
- Cara memasukan Spotify Play Button di website
Yuk buka lagi notepad kita..
Cara memasukan audio pada website
Gunakan elemen tag <audio> untuk memainkan file audio di web html. Lihat contoh kode html berikut.
<audio>
</audio>
Kemudian tentukan sumber file audio tersebut dengan memasukan elemen <source> pada tag elemen <audio>.
<audio>
<source src=”lagu_melow.mp3” type=”audio/mpeg”>
</audio>
Bagaimana cara memunculkan control seperti play, pause dan volume? Tambahkan atribut controls pada elemen audio. Lihat kode html berikut.
<audio controls>
<source src=”lagu_melow.mp3” type=”audio/mpeg”>
</audio>
Tabel HTML Audio – Media Types
| File Format | Media Type |
|---|---|
| .mp3 | audio/mpeg |
| .ogg | audio/ogg |
| .wav | audio/wav |
HTML Audio Formats
Ada 3 format audio yang didukung oleh browser: MP3, OGG, dan WAV. Namun tidak semua browser yang support ketiganya. Lihat tabel dibawah.
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | Ya | – | – |
| Safari | Ya | Ya | – |
| Google Chrome | Ya | Ya | Ya |
| Mozilla Firefox | Ya | Ya | Ya |
| Opera | Ya | Ya | Ya |
Cara memasukan musik atau podcast Spotify di Website
Kamu mau memasukan podcast ke dalam website dari Spotify? Atau mau memasukan playlist lagu kamu di Spotify ke dalam website atau Blogspot? Bisa kok.
Gunakan Spotify Play Button.
Spotify Play Button itu seperti mini player untuk streaming konten Spotify dimanapun secara online. Konten tersebut seperti Albums, Tracks, Artists, Playlist, dan Podcast.
Langkah 1:
Klik kanan pada lagu / album / artis / playlist atau podcast di aplikasi DESKTOP Spotify, klik Share > Salin Kode Tertanam. Apabila aplikasi Spotify kamu pakai Bahasa Inggris: Share > Copy Embed Code.
Contoh aku mau memasukan lagu “Cinta Melulu – Efek Rumah Kaca“.
Langkah 2:
Kemudian tempelkan atau paste kode yang telah kita salin ke dalam halaman website. Lihat contoh berikut:
<body>
<iframe src="https://open.spotify.com/embed/track/1jwaf6CWAWUrbqAT5mrKrA" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</body>
Save. Dan lihat pada browser.
Hasil Akhir:
Voila! Kamu sudah berhasil memasukan musik dari Spotify di website.
Cara ini bisa juga digunakan untuk kamu para pengguna Blogspot. Kode Spotify Play Button tinggal kamu tempelkan di menu Theme > Edit HTML atau Layout > Add a Gadget.
Cara Memasukan Twitter Timeline di Website
Twitter merupakan salah satu situs social media dan microblogging terbesar di bumi untuk saat ini (baca: tahun 2020). Situs yang diciptakan di San Francisco, California, US ini memiliki lebih dari 500 juta pengguna dan Indonesia menyumbang lebih dari 20 juta pengguna di dalam nya loh.
Fantastis !
Nah, Twitter nggak mau cuek dalam mengembangkan teknologi khususnya website dalam persaingannya dengan situs raksasa socmed lain.
Salah satu inovasinya adalah kita dapat menyematkan timeline siapapun pada website tanpa harus masuk ke situs Twitter terlebih dahulu!
Ada lima jenis timeline yang tersedia antara lain:
- Profil, menampilkan Tweet publik dari akun mana pun di Twitter.
- Suka, menampilkan semua Tweet yang telah ditandai “Suka” atau “Like” oleh akun tertentu.
- Daftar, menampilkan Tweet dari Daftar publik.
- Koleksi, menampilkan Tweet yang unik dari Koleksi.
- Momen, menampilkan Tweet yang unik dari momen publik.
Berikut cara untuk memasukan Twitter timeline pada website:
- Buka https://publish.twitter.com/.
- Masukan URL akun Twitter yang mau kamu lekatkan pada web.
- Sesuaikan ukuran tinggi dan pilih warna tema (gelap atau terang).
- Salin dan tempelkan kode HTML ke website kamu.
- Selesai!
1. Buka Halaman Twitter Publish
Klik link https://publish.twitter.com dan kamu akan melihat tampilan seperti gambar diatas. Kolom tersebut adalah kolom URL akun Twitter yang nanti kita mau tampilkan di website.
2. Masukan URL Akun Twitter
Nah kamu tinggal masukan URL akun Twitter nya. Disini aku mau embed Twitter timeline milik Aa Gym. Lalu tekan Enter untuk melanjutkan.
Pilih “Embedded Timeline“. Klik!
3. Sesuaikan Ukuran dan Pilih Tema
Kalau kamu mau sesuaikan ukuran widget dan tema, silahkan klik tautan “set customization options“. Setelah itu akan muncul tampilan seperti dibawah ini.
Penjelasan opsi kostumisasi widget:
- Height (px), untuk mengatur ukuran tinggi widget timeline. Isikan misal: 600 (dalam ukuran pixel).
- Width (px), untuk mengatur ukuran lebar widget timeline. Isikan misal: 400 (dalam ukuran pixel).
- Light / Dark, yaitu pilihan warna tema widget terang atau gelap. Pilihlah tema yang sesuai dengan warna tema pada website kamu.
- Language, pilihan bahasa.
- Klik tombol “Update“.
Selanjutnya klik “Copy Code” dan selesai!
4. Salin dan Tempelkan pada Website
Langkah terakhir yaitu kita tempelkan script yang telah kita salin / copy tadi ke dalam kode html website. Posisi peletakan pada web BEBAS dimanapun, ASALKAN masih di dalam tag <body>.
Hasil salin kode:
<a class="twitter-timeline" data-width="180" data-height="600" data-theme="light" href="https://twitter.com/aagym?ref_src=twsrc%5Etfw">Tweets by aagym</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Tempelkan pada web:
<body>
<a class="twitter-timeline" data-width="180" data-height="600" data-theme="light" href="https://twitter.com/aagym?ref_src=twsrc%5Etfw">Tweets by aagym</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
Save halaman html kamu dan lihat pada browser.
Cara Memasukan Instagram Post di Website
Siapa yang tidak mengenal Instagram? Situs jejaring ini masuk jajaran salah satu platform social media terbesar di muka bumi setelah diakuisisi oleh raksasa Facebook pada tahun 2012 lalu.
Setelah IG (baca: Instagram) dibina oleh Facebook, sedikit demi sedikit inovasi dalam fitur dan teknologi di IG semakin meningkat pula. Tak hanya pengguna yang dimanjakan, tim Mark Zuckerberg juga menyediakan fitur lengkap untuk para developer website.
Nah, salah satu fiturnya tersebut kita dapat memasukan Instagram Post pada website yang kita bikin dengan html.
Cara memasukan Instagram Post di website hanya dalam 5 langkah berikut:
- Buka https://instagram.com melalui browser komputer atau browser smartphone.
- Buka akun IG yang akan kita masukan ke dalam web. Aku masih menggunakan contoh akun Aa Gym.
- Pilih salah satu post dan klik tanda yang ada disamping nama profil IG tersebut.
- Pilih Embed dan klik tombol Copy Embed Code.
- Tempelkan / Paste ke dalam halaman web kamu. Selesai!
1. Buka Instagram via Browser Web
Buka https://instagram.com melalui browser komputer atau browser smartphone. Masuklah atau login dengan akun kamu.
2. Buka Akun Instagram yang Ingin Disematkan
Cari profil akun IG yang akan kita sematkan pada web. Kamu bisa mengetikannya pada kolom Search yang ada di posisi atas.
3. Pilih Salah Satu Post
Pilih salah satu post yang ada di feed halaman profil tujuan, maka akan muncul popup seperti gambar diatas.
Kemudian klik pada tanda 
disamping nama akun. Lihat lingkaran merah pada gambar.
4. Mendapatkan Kode HTML
Pilih menu Embed maka kamu akan mendapatkan kode html yang bisa disalin nanti.
5. Salin Kode HTML dan Tempelkan pada Web
Kode html akan muncul seperti gambar diatas. Apabila kamu ingin menampilkan caption (baca: teks yang ada pada tiap post) maka biarkan “Include caption” tercentang.
Selanjutnya klik pada tombol Copy Embed Code.
Buka halaman html kamu, dan letakan salinan kode html tersebut dimanapun sesuai keinginan kamu ASALKAN masih di dalam tag <body>.
Hasil salin kode html:
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">banyak berdoa di hari-hari terakhir 10 hari bulan Dzulhijjah ini. Salah satunya dengan doa yang diwasiatkan Rasulullah kepada Siti Fatimah ini. Hafalkan dan amalkan yaa Sahabatku, dibaca di pagi dan sore hari. Semoga dalam setiap ikhtiar kita selalu dibimbing dan ditolong oleh Alloh Ta'ala. #dakwah #hijrah #islamicquotes #sunnah #sahabat #reminderquran #quran #islam #hadits #alquran #tauhid #hijrahislam</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/aagym/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Abdullah Gymnastiar</a> (@aagym) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-07-29T06:32:33+00:00">Jul 28, 2020 at 11:32pm PDT</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
Tempelkan pada web:
<body>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/CDN09bIFK_Q/?utm_source=ig_embed&utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">banyak berdoa di hari-hari terakhir 10 hari bulan Dzulhijjah ini. Salah satunya dengan doa yang diwasiatkan Rasulullah kepada Siti Fatimah ini. Hafalkan dan amalkan yaa Sahabatku, dibaca di pagi dan sore hari. Semoga dalam setiap ikhtiar kita selalu dibimbing dan ditolong oleh Alloh Ta'ala. #dakwah #hijrah #islamicquotes #sunnah #sahabat #reminderquran #quran #islam #hadits #alquran #tauhid #hijrahislam</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/aagym/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Abdullah Gymnastiar</a> (@aagym) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-07-29T06:32:33+00:00">Jul 28, 2020 at 11:32pm PDT</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
</body>
Simpan dan buka browser untuk melihat tampilannya.
Penutup
Tutorial yang aku share diatas adalah step by step pengalaman ku belajar membuat website dengan html. Dulunya aku pikir belajar html itu rumit, ternyata apabila kita praktekan dan pahami baris demi baris kode html tersebut malah gampang loh!
Bila boleh aku kasih saran untuk kamu yang niat belajar html dengan notepad sebagai berikut:
- Awal mula belajar coba baca kode html dari materi yang sederhana terlebih dahulu berulang kali, pahami dan hafalkan. Lalu TULISKAN pada selembar kertas berulang kali. Setelah kamu benar-benar paham baru KETIKAN pada notepad. Bila disiplin menerapkan cara ini, AKU JAMIN kamu lebih cepat mengerti dan menguasai bahasa program html.
- Jangan terpaku oleh spesifikasi komputer. Belajar html TIDAK PERLU spesifikasi komputer yang wah! Sekedar info, dulu aku mulai belajar html hanya dengan menggunakan komputer Pentium 4 dan layar monitor tabung yang berubah warna ungu bila kabelnya kesenggol. Hehe
- Selalu update ilmu dari sumber lain seperti internet dan buku. Banyak sumber belajar program web di internet seperti w3schools. Buku pun beredar dimana-mana.
- BTW, aku juga sedang menulis buku panduan belajar html dan css (cascading style sheet). Insya Allah bisa segera hadir.
- Belajar membuat website SANGAT punya prospek yang bagus untuk mencari penghasilan. Dari web html aku bisa menghasilkan uang yang cukup lumayan.
- Yang paling penting, BERDOA!
Nah, diujung tulisan ini (yang sudah 1 bulan lebih dalam pembuatannya) aku ucapkan syukur Alhamdulillah karena telah diberikan kesempatan dan kesehatan untuk bisa berbagi ilmu kepada teman-teman pejuang html semua.
Apabila kamu suka dengan tulisan ini dan bermanfaat, silahkan share halaman ini via Facebook, Twitter, web ataupun blog kamu dengan menyematkan kode html dibawah ini:
Salin kode berikut:
Blogspot / Website
<a href="https://dianagung.com/belajar-html">Belajar HTML Gampang Banget! - HTML Warrior #1</a>
Facebook & Twitter
https://dianagung.com
Dengan share halaman ini, kamu sudah ikut membantu teman-teman lain nya yang ingin ataupun sedang belajar html dengan mudah. Warrior, jadilah pejuang html dari sekarang!