Anda di halaman 1dari 76

"HTML"

Development Tool
• Text Editor: Visual Studio Code atau Sublime
• Internet Browser (Chrome, Firefox)
Apa itu HTML?
• HTML adalah singkatan dari Hyper Text Markup Language.
• HTML mendefinisikan struktur halaman web menggunakan bahasa
markup.
• Sebuah halaman web tersusun dari elemen-elemen HTML.
• Elemen HTML direpresentasikan menggunakan kode tag.
• Browser menerjemahkan elemen HTML menjadi halaman web.
Elemen HTML
• Elemen HTML terdiri dari tag pembuka dan tag penutup.
• Konten dari elemen tersebut berada di antara tag pembuka
dan tag penutup.
• Tag pembuka dan tag penutup selalu ditulis dalam huruf kecil.
• Di bawah ini adalah format penulisan elemen HTML.
Contoh Elemen HTML
• Elemen HTML terdiri dari tag pembuka dan tag penutup.
• Konten dari elemen tersebut berada di antara tag pembuka
dan tag penutup.
• Tag pembuka dan tag penutup selalu ditulis dalam huruf kecil.
• Jenis-jenis elemen HTML akan kita pelajari lebih lanjut
Contoh Elemen HTML
Atribut Elemen
• Elemen HTML bisa mempunyai satu atau lebih atribut.
• Atribut memberikan informasi tambahan bagi sebuah elemen.
• Atribut selalu disisipkan pada tag pembuka.
• Format atribut adalah key="value".
• Perhatikan contoh atribut berikut:
Struktur
Dokumen HTML
• Elemen HTML ditambahkan di
bagian yang berwarna putih
• Jumlah elemen HTML yang bisa
ditambahkan tidak terbatas,
sesuai kebutuhan.
Membuat Dokumen HTML Pertama
Anda
• Buka teks editor favorite anda. Lalu ketikan kode berikut
• Simpan dengan nama index.html
• Kemudian buka file tersebut menggunakan browser anda.
We've created our first
HTML Document
Element HTML
Elemen 1: Heading
• Elemen Heading biasa digunakan sebagai judul/sub judul dari sebuah
halaman website.
• Elemen Heading menggunakan kode tag: h1, h2, h3, h4, h5 dan h6.
• Elemen h1 menunjukan judul paling penting/besar
• Elemen h6 menunjukan sub judul terkecil.
Praktek Menggunakan Heading
• Buatlah heading seperti berikut:
Elemen 2: Paragraph
• Elemen Paragraph digunakan untuk membuat sebuah paragraph.
• Untuk membuat elemen Paragraph gunakan kode tag p.
Praktek Menggunakan Paragraph
• Buatlah paragraph seperti berikut:
Elemen 3: Links
• Elemen Links dipakai untuk membuat link/tautan ke halaman lain. Jika
user melakukan klik pada elemen tersebut, halaman akan pindah ke
halaman target.
• Untuk membuat link gunakan kode tag a.
• Untuk menentukan url halaman target, gunakan atribute href.
• Konten diantara tag a, merupakan teks pada link tersebut.
• Jika link ingin dibuka pada tab baru, tambahkan atribut
target="_blank".
Praktek Menggunakan Links
• Buatlah Links seperti berikut:
Elemen 4: Image
• Elemen Image dipakai untuk menampilkan gambar pada halaman
web.
• Untuk membuat image gunakan kode tag img.
• Untuk menentukan gambar yang akan ditampilkan, gunakan atribut
src.
• Elemen img tidak memerlukan konten, sehingga tag penutup bisa
disingkat menjadi />.
• Untuk menentukan lebar dan tinggi gambar, gunakan atribut width
dan height.
Praktek Menggunakan Image
• Buatlah Image seperti berikut:
Elemen 5: Button
• Elemen Button dipakai untuk menampilkan sebuah button pada
halaman web.
• Untuk membuat Button gunakan kode tag button.
Praktek Menggunakan Button
• Buatlah Button seperti berikut:
Elemen 6: List
• Elemen List digunakan untuk menampilkan daftar/list pada halaman
web.
• Terdapat dua jenis list, ordered (berurutan) atau unordered (tidak
berututan).
• Untuk membuat ordered list, gunakan tag ol.
• Untuk membuat unordered list, gunakan tag ul.
• Elemen dari list dibuat menggunakan tag li.
Praktek Menggunakan List
• Buatlah List seperti berikut:
Elemen 7: Horizontal Rule
• Elemen Horizontal Rule digunakan untuk membuat garis horizontal.
• Untuk membuat Horizontal Rule gunakan tag hr.
Praktek Menggunakan Horizontal
Rule
• Buatlah Horizontal Rule seperti berikut:
Elemen 8: Formating Element
• Anda dapat membuat teks element dengan format tertentu.
• Berikut adalah elemen format yang biasa digunakan

• Silahkan mencoba masing-masing elemen tersebut


Styles
Style
• Atribute style digunakan untuk mengatur tampilan/style dari sebuah elemen
HTML.
• Atribut style mengikuti format berikut:

• Properti adalah CSS properti


• Value adalah CSS value
• CSS akan dibahas lebih lanjut pada bab berikutnya
background-color
• background-color digunakan untuk mendefinisikan warna background
pada sebuah elemen HTML.
• Elemen yang bisa memiliki background-color hanyalan elemen yang
bersifat block, sedangkan elemen yang bersifat inline tidak bisa
memiliki background-color. Pembahasan tentang block dan inline
pada bab berikutnya.
Praktek Menggunakan background-
color
Colors
• HTML support berbagai macam warna.
• Ada dua cara menentukan warna elemen.
• Pertama dengan menuliskan nama dari warna tersebut seperti orange,
blue, yellow dll. Daftar lengkap nama warna bisa dicek disini
https://www.w3schools.com/colors/colors_names.asp
• Kedua dengan menuliskan kode hexa dari warna tersebut, misal #FFFFFF
(warna putih).
• Untuk mendapatkan kode hexa dari sebuah warna, bisa menggunakan
tool online seperti https://www.w3schools.com/colors/colors_picker.asp
color
• color digunakan untuk mendefinisikan warna teks pada sebuah
elemen HTML yang mengandung teks.
• color bisa digunakan pada elemen yang mengandung teks seperti p,
a, h, dll.
Praktek Menggunakan color
font-family
• font-family digunakan untuk menentukan jenis font dari elemen html.
• Jenis font yang bisa digunakan antara lain Verdana, Times New
Roman, Courier, dll. Untuk lebih jelasnya bisa melihat link berikut
https://www.w3schools.com/cssref/css_websafe_fonts.asp
Praktek Menggunakan font-family
font-size
• font-size digunakan untuk menentukan ukuran font dari elemen html.
• Ukuran yang biasa digunakan adalah pixel. Contoh untuk memberikan
ukuran font menjadi 20px, maka sintaksnya adalah font-size:20px;
Praktek Menggunakan font-size
text-align
• text-align digunakan untuk menentukan posisi aligment dari sebuah
teks elemen.
• Aligment yang biasa digunakan adalah center (rata tengah), lef (rata
kiri) dan right (rata kanan).
Praktek Menggunakan text-align
Mini Project 1:
Buatlah halaman website
project1.html seperti berikut:
(lihat halaman berikut)
HTML Table
HTML Table
• Untuk membuat sebuah table, anda dapat menggunakan tag table.
• Sebuah baris pada table direpresentasikan menggunakan tag tr.
• Sebuah kolom pada table direpresentasi menggunakan tag td.
• Sedangkan khusu kolom header pada table direpresentasi
menggunakan tag th.
Praktek Membuat Table (1) 
Table Border
• Secara default, sebuah table tidak memiliki border (garis pembatas).
• Anda dapat memberikan border (garis pembatas) dengan
menambahkan style border. Perhatikan contoh berikut:
<table style="border: 1px solid black">
• Perintah di atas berarti memberikan border setebal 1px dan garis yang
solid berwarna hitam. Anda dapat memodifikasi sesuai kebutuhan
anda. Contoh lain:
<table style="border: 2px dash red">
Praktek Membuat Table (2) 
Table Border (2)
• Dari praktek sebelumnya, tampak bahwa kini table memiliki border
(garis pembatas). Akan tetapi garis tersebut hanya terdapat di luar
table. Tidak terdapat garis pembatas antar kolom pada table tersebut.
• Untuk membuat border antar kolom, anda bisa melakukan hal yang
sama untuk masing-masing td dan th.
• Pada praktek berikutnya anda akan melihat bahwa kita memberikan
style untuk semua td dan th. Pekerjaan yang membuang energi
karena banyak terjadi pengulangan kode. Kita akan membahas cara
cepatnya saat membahas tentang CSS.
Praktek Membuat Table (3) 
Table colspan
• Anda bisa membuat sebuah kolom dalam table merentang (span) ke
dalam beberapa kolom.
• Untuk membuat sebuah kolom merentang (span), anda bisa
menggunakan atribut colspan pada tag td atau th.
• Nilai dari colspan adalah jumlah rentangan (span) dari kolom
tersebut. Misal <td colspan="2">, berarti kolom tersebut merentang
sebanyak 2 kolom.
Praktek Membuat Table (4) 
Table rowspan
• Anda bisa membuat sebuah baris dalam table merentang (span) ke da
lam beberapa baris.
• Untuk membuat sebuah baris merentang (span), anda bisa mengguna
kan atribut rowspan pada tag tr.
• Nilai dari rowspan adalah jumlah rentangan (span) dari baris tersebut.
Misal <tr rowspan="2">, berarti baris tersebut merentang sebanyak
2 baris.
Praktek Membuat Table (5) 
Mini Project 2:
Buatlah halaman website
project2.html seperti berikut:
(lihat halaman berikut)
HTML Form
HTML Form
• HTML Form merupakan elemen HTML yang dipakai untuk
mengambil input dari user.
• Contoh penggunaan Form adalah form untuk login, form tambah data,
dan lain-lain.
• HTML Form bisa mengandung lebih dari satu elemen form seperti teks
box, radio button, checkbox, button dan lain-lain.
• Untuk membuat elemen form, anda bisa menggunakan tag form.
• Elemen form bisa memiliki atribut action dan method. Atribut action
menunjukan url server dimana data form akan dikirim ke url tersebut.
Sedangkan method menunjukan metode pengiriman, apakah POST atau
GET.
Elemen Input
• Elemen input merupakan elemen form yang paling penting dan paling
banyak digunakan.
• Elemen input bisa ditampilkan dalam beberapa bentuk, tergantung
atribut type pada elemen tersebut.
• Elemen input bisa ditampilkan sebagai teks input, radio button,
checkbox atau button.
• Setiap elemen input bisa mempunya atribut name dan value. Atribut
ini adalah yang akan dikirim ke server melalui url action pada form.
Elemen Input Text
• Elemen Input Text merupakan satu baris input yang digunakan untuk
mengambil input dari user berupa teks. Misal untuk data nama, no
hp, email dan lain-lain.
• Untuk membuat elemen input teks, anda bisa menggunakan tag
<input type="text" />
• Untuk mengatur lebar dari elemen input teks, anda bisa
menggunakan style width, misal style="width:200px".
Praktek Elemen Input (1) 
Elemen Input Radio
• Elemen Input Radio merupakan satu baris input
yang digunakan untuk mengambil input dari user yang berupa pilihan
tunggal dari beberapa pilihan yang ada. Contoh penggunaannya
adalah untuk pemilihan gender atau jenis kelamin.
• Untuk membuat elemen input radio, anda bisa menggunakan tag <inp
ut type="radio" />
• Untuk mengatur lebar dari elemen input radio, anda bisa menggunak
an style width, misal style="width:100px;".
Praktek Elemen Input (2) 
Elemen Input Checkbox
• Elemen Input Checkbox merupakan satu baris input
yang digunakan untuk mengambil input dari user bisa memilih lebih
dari satu pilihan dari beberapa pilihan yang ada.
Contoh penggunaannya adalah untuk pemilihan hobi.
• Untuk membuat elemen input checkbox, anda bisa menggunakan tag
<input type="checkbox" />
• Untuk mengatur lebar dari elemen input checkbox, anda bisa menggu
nakan style width, misal style="width:100px;".
Praktek Elemen Input (3) 
Elemen Select
• Elemen Select merupakan elemen yang berupa combo box atau drop
down dimana user bisa memilih dari beberapa pilihan yang ada.
• Untuk membuat elemen select, anda bisa menggunakan tag select.
• Untuk membuat opsi/pilihan dari elemen select, anda bisa
menggunakan tag option.
• Secara default, user hanya bisa memilih satu pilihan, jika ingin
membuat user bisa memilih lebih dari satu, gunakan atribut multiple.
Praktek Elemen Select
Elemen TextArea
• Elemen TextArea merupakan elemen yang berupa teks lebih dari satu
baris. Elemen TextArea biasa digunakan untuk mengambil input data
teks yang panjang seperti alamat atau deskripsi.
• Untuk membuat elemen TextArea, anda bisa menggunakan tag
textarea.
• Untuk menentukan lebar TextArea, anda bisa menggunakan atribut
cols. Misal cols="40".
• Untuk menentukan tinggi TextArea, anda bisa menggunakan atribut ro
ws. Misal rows="10".
Praktek Elemen TextArea
Mini Project 3:
Buatlah halaman website
project3.html seperti berikut:
(lihat halaman berikut)
Mini Project 4:
Perbaiki form anda dengan
mengkombinasikannya dengan
table agar terlihat rapih
Tugas Week 2
• 1. Kerjakan Mini Project 5
• 2. Kerjakan Mini Project 6
• 3. Buat sebuah artikel dengan tema "Pengenalan HTML dasar" dan posting di blog
pribadi.
• 4. Kumpulkan tambahan 10 email teman dan kerabat anda yang memiliki fashion di dunia
IT dan tambahkan ke dalam List di mailchimp
• 5. Kirimkan ke semua list email anda berisi ajakan untuk membaca artikel anda
• 6. Buat akun di linkedin (jika belum punya) dan temukan 3 orang yang berprofesi sebagai
Web Developer. Catat nama, email, pekerjaan dan kantor tempat mereka bekerja.
• 7. Minta 3 orang tersebut membaca dan memberi masukan artikel anda.
• 8. Update artikel anda sesuai dengan masukan dari ke-3 orang tersebut.

Kumpulkan di s.id/WBTugas2
Mini Project 5:
Buatlah halaman website
project5.html seperti berikut:
(lihat halaman berikut)
Mini Project 6:
Buatlah halaman website
project6.html seperti
berikut:
(lihat halaman berikut)
Hint: Menggunakan struktur table sebagai layout
Lihat Contoh: https://s.id/359y5