TEXT FORMATTING &

LIST
# Chapter 1

SPEAKER : MULKI FIRMANSYAH

Text Formatting adalah pemberian format yang Berfungsi untuk mengatur ukuran huruf yang
mengkhusus pada text. Elemen format dirancang biasanya dijadikan untuk headline sebuah
untuk menampilkan jenis teks khusus. Fungsi dari artikel.
pemformatan text ini adalah untuk memberikan <h1>. <h2>, <h3>, <h4>, <h5>, <h6>
kesan dan tampilan yang berbeda kepada User. 2. Paragraf <p>
Penggunaan pemformatan text dengan tepat Berfungsi untuk membuat paragraf baru.
dapat menjadikan paragraf atau text tersebut 3. Menebalkan Tulisan <b> / Strong <strong>
lebih menyenangkan untuk dibaca dan 4. Memiringkan Tulisan <i> / emphasized <em>
dipahami. 5. Memberi garis bawah Tulisan <u>
Dalam formatting text pada HTML, ada banyak 6. Subscript <sub>
jenis dan fungsi yang dapat kita gunakan. Ada Teks subskrip muncul setengah karakter di
yang memiliki kemiripan, namun fungsi atau bawah garis normal, dan terkadang
maksud penggunaanya berbeda. Jenis-jenis ditampilkan dalam font yang lebih kecil.
tersebut akan kita pelajari kali ini, da berikut ini 7. superscript <sup>
adalah Text Formatting dalam HTML beserta Teks superskrip muncul setengah karakter di
Contoh dan Fungsinya. atas garis normal, dan terkadang ditampilkan
1. Hedline <h> dalam font yang lebih kecil.
8. Line Break <br> (tanpa tag penutup)
 Untuk Enter. LIST
9. Horizontal Rule <hr> 1. Ordered List <ol>
Untuk membuat sebuah garis horizontal. adalah list yang terurut/angka. Yang
10. Marked <mark> didalamnya ada tag <li>. Untuk merubah
Berfungsi untuk menandai tulisan dengan urutannya dengan huruf A/romawi, kita bisa
warna kuning. menggunakan atribut type pada tag ol dan
11. Delete <del> berikut ini nilai yang bisa diberikan: <ol
Berfungsi untuk mencoret tulisan. type='A'>.
12. Quote <q> 2. Unordered List <ul>
Berfungsi untuk tulisan yang sifatnya kutipan. adalah list yang tidak
berurutan/menggunakan simbol (bullet).
Yang didalamnya ada tag <li>. Secara default
simbol yang digunakan oleh unordered list
adalah lingkaran kecil (disc). Kita juga bisa
menggantinya dengan atribut type.
Berikut ini nilai yang bisa diberikan untuk
atribut type:
 square untuk simbol persegi;
  none tidak memakai simbol;
 circle untuk simbol lingkaran.
3. List dalam List (List bersarang)
List juga dapat dibuat di dalam list, misalkan
kita ingin menggabungkan ordered list
dengan unordered list.
<ol>
<li>Seblak
<ul>
<li>Seblak Ceker</li>
<li>Seblak Biasa</li>
<li>Seblak Rafael</li>
</ul>
</ol>
 LINK DAN MULTIPAGE
#Chapter 2

SPEAKER : MULKI FIRMANSYAH

LINK CONTOH HALAMAN LINK
Link atau Hyperlink adalah elemen HTML yang berfungsi MULTIPAGE
menghubungkan suatu halaman web ke halaman web
yang lain.
Elemen ini bisa diklik dan nanti akan membuka halaman
lain sesui alamat URL yang diberikan.

ATRIBUT DALAM LINK

1. Atribut Target
CARA MEMBUAT LINK DI HTML Atribut ini berfungsi untuk menentukan target dari
Link pada HTML dapa dibuat dengan tag <a>, kemudian pembukaan link. Ada beberapa target yang biasanya
tag ini harus memiliki atribut href untuk menentukan digunakan:

alamat URL tujuan dari link.  _blank akan membuka link pada jendela atau tab baru;

Bentuk sederhananya seperti ini:  _self akan membuka link pada halaman itu sendiri
(default target);
<a href=https://www.youtube.com>YOUTUBE</a>
  _top menuju bagian paling atas pada halaman; <a href=https://www.youtube.com target=’_blank’
 _parent membuka link pada frame induk; title=”Klik link berikut” style=”color:yellow”>YOUTUBE</a>
 nama-frame akan membuka link pada <iframe>
dengan nama tertentu;
FUNGSI MENARIK LAINNYA DARI
Contohnya:
<a href=https://www.youtube.com
LINK
target=’_blank’>YOUTUBE</a> 1. Membuat Link untuk Memanggil Fungsi Javascript
2. Atribut title Link dapat juga digunakan untuk memanggil fungsi
Atribut ini berfungsi untuk membuat tooltips. Tooltips Javascript.
adalah informasi tambahan yang akan tampil saat link Pemanggilan fungsi Javascript biasanya dilakukan
disentuh pointer atau saat kita menahan tap di hp. dengan atribut even seperti onclick, onmouseover,
Contohnya: onmouseout, dan sebagainya.
<a href=https://www.youtube.com target=’_blank’  Onclick:
title=”Klik link berikut”>YOUTUBE</a> <a href="#" onclick="alert('Anda yakin ingin
keluar?')">Keluar</a>
MENGUBAH WARNA LINK  Onmouseover:
Warna default link adalah biru, ini bisa kita ubah dengan style
<a href="#!" onmouseover="alert('link sudah kamu
CSS. Warna bisa kita berikan untuk teks dan latar belakang
sentuh!')">Coba Sentuh Link ini</a>
(background). Caranya: Tambahkan atribut style kemudian
2. Membuat Link untuk Mengirim WA/Membuat WA
isi dengan style css untuk mengubah warna, yakni color
Link CTA (call to action) untuk whatsapp
(untuk teks) dan background-color (untuk latar). Contoh:
<a href=" https://wa.me/62xxxxxxxx ">Chat aku dong
om!</a>
 IMAGE
#Chapter 3

SPEAKER : MULKI FIRMANSYAH

 Lalu bagaimana kalau gambarnya berada di internet atau
CARA MENAMPILKAN GAMBAR DI HTML
website lain? kita harus menuliskan alamat URL lengkap dari
Website tanpa gambar = membosankan. Setuju? Ya saya
gambar tersebut.
juga setuju.
<img src="https://Borobudur_Temple.jpg " />
Gambar akan membuat website kita terlihat lebih menarik.
Karena otak kita lebih mudah menyerap informasi dengan ATRIBUT UNTUK TAG <IMG>
visual dibandingkan hanya teks saja. Karena itu, gambar Ada beberapa atribut yang sering digunakan pada tag <img>:
sangatlah penting.  alt untuk teks alternatif untuk gambar;
 width untuk menentukan lebar gambar;
MENAMBAHKAN GAMBAR DI HTML
 height untuk menentukan tinggi gambar;
Gambar dapat kita tambakan di HTML dengan
 style untuk menentukan style CSS untuk gambar.
menggunakan tag <img>. Tag ini memiliki atribut wajib, yakni
alt:
src. Jika kita tidak mengisi atribut src, maka gambar tidak
atribut untuk memberikan teks alternatif pada gambar saat
akan ditampilkan.
gambar gagal ditampilkan: <img src="" alt="Candi
<img src="sawah.jpg" />.
Borobudur" />
Pada contoh di atas, kita menuliskan langsung nama file dari
gambar. Ini karena kita menaruh gambar di dalam folder width & height:
yang sama dengan file HTML. atribut yang digunakan untuk menentukan lebar dan tinggi
Apabila file gambarnya tersimpan di folder yang berbeda, dari gambar.
maka kita hanya perlu menuliskan alamat path-nya. <img src="images/sawah.jpg" width="200" height="150"
Misalkan, kita akan menyimpan gambar di dalam folder alt="Sawah"/>
images.: Satuan yang digunakan untuk nilai width dan height adalah
<img src="images/sawah.jpg" /> piksel (px). Jika kita memberikan nilai 200, artinya.. kita
memberikan nilai 200px.
style: Contoh:

atribut untuk menambahkan style CSS pada sebuah elemen. <a href="https://www.petanikode.com">

Atribut ini sering digunakan pada gambar untuk memberikan <img src="images/sawah.jpg" width="160"/>

style atau efek tertentu: </a>

1. Memberi border/garis pada gambar: TAG TAMBAHAN

<img src="images/sawah.jpg" style="width:
 <figure> untuk membungkus gambar dan teks caption-
160px;border: 3px solid red;" />
nya;
2. Memberi lengkungan pada pojok gambar:
 <picture> untuk menentukan jenis gambar pada ukuran
<img src="images/sawah.jpg" style="width:
layar yang berbeda.
160px;border-radius: 10px;" />
Tag <figure>
3. Gambar berbentuk lingkaran:
Tag figure berfungsi untuk membungkus tag <img> atau
<img src="images/sawah.jpg" style="width:
gambar dengan teks caption. Teks caption adalah teks yang
160px;border-radius: 100px;" />
menjelaskan tentang gambar. Teks caption bisa dibuat
MEMBUAT GAMBAR BACKGROUND dengan tag <figcaption>. Contoh:
Agar gambar bisa ditampilkan sebagai background, maka <figure>
kita harus menggunakan CSS dengan atribut background- <img src="images/sawah.jpg" width="300" alt="Sawah"/>
image lalu diisi dengan URL dari gambar. Contoh: <figcaption>Landscape sawah dan langit</figcaption>
<body style="background-image: </figure>
url(images/sawah.jpg);">

MEMBUAT LINK DENGAN GAMBAR

membuat link dengan gambar adalah dengan
menggabungkan tag <a> dan tag <img>. Tag <a> harus
mengapit tag <img>.
 TABEL
#Chapter 4

SPEAKER : MULKI FIRMANSYAH

Salah satu cara atau format menampilkan informasi dalam
web adalah dengan tabel. Tabel terdiri dari 4 unsur utama:
1. Baris
2. Kolom
3. Sel
4. Garis
Lalu, bagaimana cara membuat tabel di HTML?
Kita bisa membuatnya dengan beberapa tag yang sudah
disediakan di HTML.

Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat untuk membuat tabel
di HTML:
Agar Tabelnya memiliki garis, silahkan tambahkan atribut
1. Tag <table> untuk membungkus tabelnya
border="1" di dalam tag <table>.: <table boder="1">
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel Mengatur Jarak Sel dengan
4. Tag <tr> (tabel row) untuk membuat baris
Cellpadding
5. Tag <td> (table data) untuk membuat sel
Atribut cellpadding adalah atribut untuk mengatur jarak
6. Tag <th> (table head) untuk membuat judul pada header
teks dengan garis di dalam sel. Atribut ini dapat kita berikan
Contoh:
kepada tag <table>. Contoh: <table border="1"
cellpadding="10">. Nilai "10" pada atribut cellpadding adalah
ukuran jarak antara teks sel dengan garis.
 1. colspan untuk menggabungkan kolom;
Mengatur Jarak Sel dengan
<td colspan="2">Hasil Panen</td>
Cellspacing 2. rowspan untuk menggabungkan baris;
Atribut cellspacing adalah atribut untuk mengatur jarak <td rowspan="2">Hasil Panen</td>
antar sel. Atribut ini dapat kita berikan kepada tag <table>. Menambahkan Warna pada Sel dan
Contoh: <table border="1" cellspacing="0">. Nilai "0" pada
atribut cellspacing adalah ukuran jarak antara antar sel. Baris
Untuk menambahkan warna pada sel dan baris, kita bisa
Menggabungkan Sel Tabel
menambahkan atribut bgcolor di dalam tag <td> (untuk sel)
Atribut yang digunakan untuk menggabungkan sel tabel
atau <tr> (untuk baris).
adalah rowspan dan colspan:
Contoh: <td bgcolor="yellow">Baris 1 kolom 1</td>
1. colspan untuk menggabungkan kolom.
2. rowspan untuk menggabungkan baris; Latihan:
Atribut ini bisa kita berikan kepada tag <td> atau <th>. Buatkan tabel seperti ini:

PRODUK UNGGULAN
FORM
#Chapter 5

SPEAKER : MULKI FIRMANSYAH

Web tidak hanya digunakan untuk menampilkan informasi
Apa itu Field?
saja. Web juga digunakan untuk mengambil informasi atau
Field adalah ruas yang dapat diisi dengan data. Contoh
data dari pengunjung. Salah satu cara untuk mengambil
field:
informasi dari pengunjung ialah menggunakan form.
Form dalam web bisa disamakan dengan formuliar di dunia
nyata. Form dapat diisi, kemudian diproses dengan
Field memiliki beberapa atribut yang harus diberikan:
program tertentu.
1. type merupakan type dari field.
2. name merupakan nama dari field yang akan menjadi
Cara Membuat Form di HTML kunci dan variabel di dalam program.
Form di HTML dapat kita buat dengan tag <form>. Tag ini
memiliki beberapa atribut yang harus diberikan, seperti: Macam Macam Input Type pada Field
1. action untuk menentukan aksi yang akan dilakukan saat
data dikirim;
2. method metode pengiriman data.
Contoh:
Latihan: Membuat Form Register
Berikutnya kita akan coba membuat form registrasi. Form ini
berisi field untuk:
 Input nama lengkap;
 Input username;
 Input email;
 Input password;
 Input jenis kelamin;
 Input Agama;
 Input Biografi.
 dsb.
Berikut codingannya:
Hasilnya:
 VIDEO & AUDIO
#Chapter 6

SPEAKER : MULKI FIRMANSYAH

 HTML sekarang punya tag baru untuk membuat media
Cara Menambahkan Video di HTML
player, yakni tag <video>.
Kita membutuhkan sebuah media player untuk
menampilkan video di HTML.
Dulu..
Sebelum ada HTML 5, media player di HTML dibuat dengan
program eksternal seperti adobe flash. Namun, kini sudah
tidak dipakai lagi.

Contoh:

jika videonya berada di website yang berbeda, maka kita

harus mengisi atribut src dengan URL lengkap dari video.
Atribut untuk Video
Tag <video> punya beberapa atribut yang bisa diberikan:

Atribut untuk Audio

1. Controls : berfungsi untuk mengaktifkan tombol kontrol
seperti tombol play, pause, stop, scroll, dan volume).

2. Autoplay: berfungsi untuk memutar audio secara

otomatis. Nilai yang bisa diberikan pada atribut ini
Cara Menambahkan Audio di HTML adalah true dan false.
Kini HTML sudah punya tag sendiri yakni <audio>.Tag <audio>
adalah tag untuk membuat audio player. Lalu kita bisa
memberikan file audio yang akan diputar dengan tag
<source>. 3. Loop: berfungsi untuk mengulang-ulang pemutaran
audio. Ini seperti repeat one. Nilai yang bisa diberikan
adalah true dan false.
 4. Muted: berfungsi untuk mensenyapkan audio. Nilai yang
bisa diberikan adalah true dan false.

Audio Sebagai Background

Audio kadang sering digunakan sebagai background.
Biasanya menggunakan musik.
Cara membuat musk sebagai background adalah dengan
NEXT : BELAJAR CSS.... SEE YOU 
menambahkan atribut autoplay, loop, dan menghilangkan
kontrol (hidden). Contoh:

Nggak ada suaranya? atribut autoplay mungkin tidak

bekerja di Google Chrome karena ada pembaharuan
kebijakan dalam memutar audio. Kalian bisa menggunakan
browser lain.